/*
  Quiz Collective – Clean "Stand" Theme
  - Removes neon/glow styling
  - White / light background with tasteful accents
  - Keeps existing class names so HTML doesn't need changes
*/

:root{
  --bg: #f6f7fb;
  --surface: rgba(255,255,255,.14);
  --surface-2: rgba(255,255,255,.10);
  --border: rgba(255,255,255,.22);
  --text: #111827;
  --muted: #4b5563;
  --glass-highlight: rgba(255,255,255,.34);
  --glass-shadow: rgba(15,23,42,.16);

  /* Page-level theming (overridden per page) */
  --page-bg: var(--bg);
  --nav-bg: rgba(255,255,255,.82);
  --nav-text: color-mix(in srgb, var(--text) 88%, transparent);
  --nav-pill: color-mix(in srgb, var(--accentA) 14%, transparent);

  /* Accent colours (overridden per page below) */
  --accentA: #2563eb; /* blue */
  --accentB: #14b8a6; /* teal */
  --accentC: #f97316; /* orange */
  --accentD: #008000; /* green */
  --accentE: #800080; /* purple */



  --radius-lg: 24px;
  --radius-md: 16px;
  --radius-sm: 12px;

  --shadow-sm: 0 10px 30px rgba(15,23,42,.12);
  --shadow-md: 0 24px 60px rgba(15,23,42,.18);
}

/* Page accents */
body.page-home{ --accentA:#2563eb; --accentB:#14b8a6; --accentC:#f97316; }
body.page-pub{ --accentA:#7c3aed; --accentB:#2563eb; --accentC:#14b8a6; }
body.page-weddings{ --accentA:#c2410c; --accentB:#b45309; --accentC:#2563eb; }
body.page-fundraiser{ --accentA:#16a34a; --accentB:#14b8a6; --accentC:#2563eb; }
body.page-events{ --accentA:#db2777; --accentB:#2563eb; --accentC:#f97316; }
body.page-community{ --accentA:#0ea5e9; --accentB:#14b8a6; --accentC:#f97316; }

/* Deep page backgrounds (match navigation) */
body.theme-purple{ --page-bg:#2a0a45; --nav-bg:#3a0f66; --nav-text: rgba(255,255,255,.92); --nav-pill: rgba(255,255,255,.14); --card-bg-start: rgba(58,15,102,.58); --card-bg-end: rgba(42,10,69,.34); --card-border: rgba(255,255,255,.22); --card-text: rgba(255,255,255,.96); --card-muted: rgba(255,255,255,.82); }
body.theme-orange{ --page-bg:#7a2e00; --nav-bg:#a64300; --nav-text: rgba(255,255,255,.92); --nav-pill: rgba(255,255,255,.14); --card-bg-start: rgba(166,67,0,.56); --card-bg-end: rgba(122,46,0,.32); --card-border: rgba(255,255,255,.22); --card-text: rgba(255,255,255,.96); --card-muted: rgba(255,255,255,.82); }
body.theme-green{  --page-bg:#0f3d22; --nav-bg:#165c33; --nav-text: rgba(255,255,255,.92); --nav-pill: rgba(255,255,255,.14); --card-bg-start: rgba(22,92,51,.56); --card-bg-end: rgba(15,61,34,.32); --card-border: rgba(255,255,255,.22); --card-text: rgba(255,255,255,.96); --card-muted: rgba(255,255,255,.82); }
body.theme-pink{   --page-bg:#5c0034; --nav-bg:#8a004c; --nav-text: rgba(255,255,255,.92); --nav-pill: rgba(255,255,255,.14); --card-bg-start: rgba(138,0,76,.56); --card-bg-end: rgba(92,0,52,.32); --card-border: rgba(255,255,255,.22); --card-text: rgba(255,255,255,.96); --card-muted: rgba(255,255,255,.82); }
body.theme-blue{   --page-bg:#0a2d5a; --nav-bg:#144c96; --nav-text: rgba(255,255,255,.92); --nav-pill: rgba(255,255,255,.14); --card-bg-start: rgba(20,76,150,.56); --card-bg-end: rgba(10,45,90,.32); --card-border: rgba(255,255,255,.22); --card-text: rgba(255,255,255,.96); --card-muted: rgba(255,255,255,.82); }
body.theme-cyan{   --page-bg:#007f9b; --nav-bg:#006b82; --nav-text: rgba(255,255,255,.92); --nav-pill: rgba(255,255,255,.14); --card-bg-start: rgba(0,107,130,.56); --card-bg-end: rgba(0,127,155,.30); --card-border: rgba(255,255,255,.22); --card-text: rgba(255,255,255,.96); --card-muted: rgba(255,255,255,.82); }
body.page-community{ --card-bg-start: rgba(0,107,130,.56); --card-bg-end: rgba(14,165,233,.26); --card-border: rgba(255,255,255,.22); --card-text: rgba(255,255,255,.96); --card-muted: rgba(255,255,255,.82); }

/* Readability on deep backgrounds */
body.theme-purple,
body.theme-orange,
body.theme-green,
body.theme-pink,
body.theme-blue,
body.theme-cyan{
  color: rgba(255,255,255,.92);
}

/* Ensure core surfaces inherit page-aware card colours */
.hero,
.card,
.cta-strip,
.premium-booking,
.addons,
.quizcard,
.pricecard,
.saved__item,
.addon,
.callout,
.site-footer{
  color: var(--card-text, var(--text));
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }

body { background: #ffffff; color: #111; }

/* Subtle “quiz icon” pattern overlay (premium, not neon) */
body::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:0;
  pointer-events:none;
  opacity:.10;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240' viewBox='0 0 240 240'%3E%3Cg fill='none' stroke='white' stroke-opacity='.55' stroke-width='2'%3E%3Cpath d='M72 78c0-18 14-32 34-32 18 0 30 10 30 26 0 12-7 20-18 26-10 5-12 9-12 18v6'/%3E%3Ccircle cx='106' cy='154' r='3' fill='white' fill-opacity='.55' stroke='none'/%3E%3Cpath d='M168 94l14 14m0-14-14 14'/%3E%3Cpath d='M58 174h22m-11-11v22'/%3E%3C/g%3E%3C/svg%3E"),
    radial-gradient(1px 1px at 20px 20px, rgba(255,255,255,.55) 50%, transparent 51%),
    radial-gradient(1px 1px at 40px 60px, rgba(255,255,255,.40) 50%, transparent 51%),
    radial-gradient(1px 1px at 80px 120px, rgba(255,255,255,.34) 50%, transparent 51%);
  background-repeat: repeat;
  background-size: 240px 240px, 120px 120px, 160px 160px, 220px 220px;
  mix-blend-mode: overlay;
}

/* Background video becomes a subtle texture (not a neon feature) */
.bg-video{
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  opacity: .06;
  filter: grayscale(1) contrast(.9) blur(1px);
  pointer-events: none;
}

/* Canvas sparkles: keep available, but very subtle */
#sparkles{
  position:fixed;
  inset:0;
  z-index:0;
  pointer-events:none;
  opacity:.10;
}

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  .bg-video{ display:none; }
  #sparkles{ display:none; }
}

.wrap{
  position:relative;
  z-index:1;
  max-width:1100px;
  margin:0 auto;
  padding:22px 16px 80px;
}

/* Top bar */
.topbar{
  position:sticky;
  top:4px;
  z-index:20;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding:6px 12px;
  background: color-mix(in srgb, var(--nav-bg) 92%, transparent);
  border: 1px solid color-mix(in srgb, white 18%, #0000);
  border-bottom-color: color-mix(in srgb, white 12%, #0000);
  backdrop-filter: blur(10px);
  color: #fff;
  border-radius: 12px;
  box-shadow: var(--shadow-sm);
  margin: 0 2px;
}

.brand{ text-decoration:none; color:inherit; }
.brand--image{ display:flex; align-items:center; }
.logo-wrap{ display:inline-flex; align-items:center; justify-content:center; border-radius: 14px; }
.logo-img{ height: 60px; width:auto; display:block; }

.nav{ display:flex; gap:14px; align-items:center; flex-wrap:wrap; }
.nav a,
.nav .nav-link{
  font-family: 'MuseoModerno', sans-serif;
  letter-spacing: .8px;
  text-transform: uppercase;
  font-weight: 650;
  font-size: 13px;
  color: var(--nav-text);
  text-decoration:none;
  padding: 10px 10px;
  border-radius: 999px;
  transition: transform .14s ease, background .14s ease, color .14s ease;
}

.nav a:hover,
.nav .nav-link:hover{
  background: color-mix(in srgb, var(--nav-pill) 70%, transparent);
  color: color-mix(in srgb, var(--nav-text) 92%, var(--text));
  transform: translateY(-1px);
}

/* CTA nav link (if present) */
.nav-link--cta{
  background: none; 55%, white),
    color-mix(in srgb, var(--accentB) 48%, white));
  border: 1px solid color-mix(in srgb, white 28%, #0000);
  color: #0b1020 !important;
}

/* Burger */
.burger{ display:none; border:0; background:transparent; padding:10px; border-radius: 12px; cursor:pointer; }
.burger:hover{ background: rgba(17,24,39,.05); }
.burger__bar{ display:block; width:22px; height:2px; background: color-mix(in srgb, var(--nav-text) 92%, transparent); margin:5px 0; border-radius: 999px; }

@media (max-width: 860px){
  .burger{ display:flex; align-items:center; justify-content:center; }
  .nav{
    display:none;
    flex-direction:column;
    position:absolute;
    top:74px;
    right:16px;
    background: color-mix(in srgb, var(--nav-bg) 92%, black);
    border: 1px solid color-mix(in srgb, white 18%, #0000);
    box-shadow: var(--shadow-md);
    padding: 14px;
    border-radius: 16px;
    gap: 10px;
    min-width: 210px;
  }
  body.menu-open .nav{ display:flex; }
}

/* Make the whole page feel “agency smooth” */
.wrap{ padding-top: 28px; }

/* Soft section reveal (CSS-only) */
@keyframes riseIn{
  from{ opacity:0; transform: translateY(10px); }
  to{ opacity:1; transform: translateY(0); }
}
.hero,
.card,
.cta-strip,
.pricecard,
.quizcard,
.premium-booking,
.addons,
.callout{
  animation: riseIn .55s ease both;
}

@media (prefers-reduced-motion: reduce){
  .hero,
  .card,
  .cta-strip,
  .pricecard,
  .quizcard,
  .premium-booking,
  .addons,
  .callout{ animation:none; }
}

/* Make logo pop on dark nav */
body.theme-purple .logo-img,
body.theme-orange .logo-img,
body.theme-green .logo-img,
body.theme-pink .logo-img,
body.theme-blue .logo-img{
  filter: drop-shadow(0 10px 18px rgba(0,0,0,.25));
}

/* Buttons */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:10px 14px;
  border-radius:14px;
  background: none;, color-mix(in srgb, var(--accentB) 50%, var(--accentA)));
  color: white;
  font-weight: 750;
  text-decoration:none;
  border:1px solid color-mix(in srgb, var(--accentA) 65%, #0000);
  box-shadow: var(--shadow-sm);
  cursor:pointer;
  position: relative;
  overflow: hidden;
  transition: transform .16s ease, filter .16s ease;
}
.btn:hover{ filter: brightness(.98); transform: translateY(-1px); }
.btn:active{ transform: translateY(0); }

/* Subtle “shine” on hover */
.btn::before{
  content:"";
  position:absolute;
  top:-40%;
  left:-60%;
  width: 50%;
  height: 180%;
  background: none;, transparent);
  transform: rotate(18deg);
  opacity: 0;
  transition: opacity .18s ease;
}
.btn:hover::before{
  opacity: .9;
  animation: btnShine .9s ease;
}
@keyframes btnShine{
  from{ left:-60%; }
  to{ left:130%; }
}

.btn--ghost{
  background: transparent;
  color: var(--text);
  border: 1px solid var(--border);
  box-shadow:none;
}
.btn--ghost:hover{ background: rgba(17,24,39,.04); }

.btn--cta{
  padding: 14px 18px;
  border-radius: 18px;
}

/* Hero */
.hero{
  position:relative;
  overflow:hidden;
  border-radius: var(--radius-lg);
  border: 1px solid color-mix(in srgb, white 26%, #0000);
  background: none;, rgba(255,255,255,.86));
  box-shadow: var(--shadow-md);
  padding: 22px;
  display:grid;
  gap:18px;
}

/* Animated cyan hero on the homepage */
body.theme-cyan .hero{
  background: none;
  background-size: 400% 400%;
  animation: heroGradient 14s ease infinite, riseIn .55s ease both;
  color: rgba(255,255,255,.96);
  border: 1px solid rgba(255,255,255,.20);
}
body.theme-cyan .hero__sub{ color: rgba(255,255,255,.82); }
body.theme-cyan .pill{ background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.26); color: rgba(255,255,255,.92); }
body.theme-cyan .pill__dot{ background: rgba(255,255,255,.85); }
body.theme-cyan .hero-btn{ background: rgba(255,255,255,.16); border-color: rgba(255,255,255,.28); color: rgba(255,255,255,.96); }
body.theme-cyan .hero-btn:hover{ background: rgba(255,255,255,.24); }

@keyframes heroGradient{
  0%{ background-position: 0% 50%; }
  50%{ background-position: 100% 50%; }
  100%{ background-position: 0% 50%; }
}

/* Premium gradient ring */
.hero::after{
  content:"";
  position:absolute;
  inset:-2px;
  border-radius: calc(var(--radius-lg) + 2px);
  background: none;, var(--accentB), var(--accentC));
  z-index:0;
  opacity:.22;
  filter: blur(10px);
}
.hero > *{ position:relative; z-index:1; }

.hero--single{ grid-template-columns: 1fr !important; }

.hero__bggrid{
  position:absolute;
  inset:0;
  opacity:.18;
  background-image:
    linear-gradient(to right, rgba(17,24,39,.06) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(17,24,39,.06) 1px, transparent 1px);
  background-size: 72px 72px;
}

.hero__content{ position:relative; z-index:1; }

.hero__title,
h1{
  margin: 26px 0 14px;
  font-size: 40px;
  line-height: 1.15;
  letter-spacing: -.4px;
  font-family: 'MuseoModerno', sans-serif;
  font-style: normal;
  font-weight: 800;
}

.hero__sub{ margin: 10px 0 0; color: var(--muted); max-width: 60ch; }

/* The old neon classes become simple accents */
.neon{ text-shadow:none; }
.neon--pink{ color: #fc89ac; }
.neon--cyan{ color: #afeeee; }
.neon--green{ color: #98fb98; }
.neon--blue{ color: #87cefa; }
.neon--orange{ color: #ffbf00; }
.neon--purple{ color: #dda0dd; }

/* Pill */
.pill{
  display:inline-flex;
  align-items:center;
  gap: 10px;
  padding: 9px 12px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,.72);
  color: color-mix(in srgb, var(--text) 78%, transparent);
  font-size: 12px;
}
.pill__dot{
  width:8px; height:8px; border-radius:999px;
  background: var(--accentB);
}

.hero__cta{ margin-top: 16px; display:flex; gap:10px; flex-wrap:wrap; }

.hero-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 10px 14px;
  border-radius: 10px;
  height:26px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,.75);
  color: var(--text);
  text-decoration:none;
  font-family: 'MuseoModerno', sans-serif;
  letter-spacing: .7px;
  text-transform: uppercase;
  font-weight: 700;
  font-size: 13px;
  transition: transform .14s ease, background .14s ease, border-color .14s ease;
}
.hero-btn:hover{ transform: translateY(-1px); background: rgba(255,255,255,.92); border-color: color-mix(in srgb, var(--accentA) 25%, var(--border)); }
.hero-btn:active{ transform: translateY(0); }

.hero-btn--primary{
  background: color-mix(in srgb, var(--accentA) 12%, white);
  border-color: color-mix(in srgb, var(--accentA) 28%, var(--border));
}
.hero-btn--secondary{
  background: color-mix(in srgb, var(--accentB) 10%, white);
  border-color: color-mix(in srgb, var(--accentB) 24%, var(--border));
}

.hero__arrowrow{
  margin-top: 10px;
  display:flex;
  align-items:center;
  gap:12px;
  color: color-mix(in srgb, var(--text) 45%, transparent);
}
.arrows{ font-weight: 800; letter-spacing: 2px; }
.wave{
  height: 3px;
  flex: 1;
  border-radius: 999px;
  background: none;, var(--accentB), transparent);
  opacity: .65;
}

.section{ margin-top: 10px; }
.section__head h2{ margin:0; font-size: 28px; letter-spacing: -.3px; }
.section__head p{ margin: 8px 0 0; color: var(--muted); }

body.theme-purple .section__head p,
body.theme-orange .section__head p,
body.theme-green .section__head p,
body.theme-pink .section__head p,
body.theme-blue .section__head p{
  color: rgba(255,255,255,.74);
}

.cards{
  margin-top: 5px;
  display:grid;
  grid-template-columns: repeat(1, minmax(0, 1fr));
  gap: 14px;
}

.card{
  border: 4px solid var(--card-border, var(--border));
  background: none;), var(--card-bg-end, rgba(255,255,255,.10)));
  border-radius: var(--radius-lg);
  padding: 18px;
  box-shadow: var(--shadow-sm);
  backdrop-filter: blur(22px) saturate(160%);
  -webkit-backdrop-filter: blur(22px) saturate(160%);
  position:relative;
  overflow:hidden;
}
.card::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius: inherit;
  background: none;, transparent 42%, rgba(255,255,255,.06) 78%, rgba(255,255,255,.14));
  pointer-events:none;
}
.card > *{ position:relative; z-index:1; }

/* Subtle accent stripe */
.card::before{
  content:"";
  position:absolute;
  left:0; top:14px; bottom:14px;
  width:4px;
  border-radius: 999px;
  background: none;, var(--accentB));
  opacity: .55;
}

.card h3{ margin: 10px 0 6px; }
.card p{ margin: 0; }
.card ul{ margin: 12px 0 0; padding-left: 18px; color: color-mix(in srgb, var(--text) 84%, transparent); }
.card li{ margin: 7px 0; }


.muted{ font-size: 16px; color: #111; }	
.box{ font-size: 18px; color: #ffffff; }	

.small{ font-size: 13px; }
.divider{ height:1px; background: var(--border); margin: 14px 0; }
.row{ display:flex; gap:10px; flex-wrap:wrap; }

/* Booking / form */
.premium-booking{
  position: relative;
  border-radius: var(--radius-lg);
  padding: 24px;
  border: 1px solid var(--border);
  background: none;), var(--card-bg-end, color-mix(in srgb, var(--accentA) 10%, rgba(255,255,255,.10))));
  box-shadow: var(--shadow-md);
  backdrop-filter: blur(26px) saturate(160%);
  -webkit-backdrop-filter: blur(26px) saturate(160%);
  overflow: hidden;
  margin-top: 10px;
}

.glass{
  background: none;), var(--card-bg-end, rgba(255,255,255,.10)));
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
}

.card--form{ border-radius: var(--radius-lg); }

.form label{
  display:flex;
  flex-direction:column;
  gap: 10px;
  font-size: 13px;
  color: color-mix(in srgb, var(--text) 75%, transparent);
}

.form input, .form select, .form textarea{
  padding: 14px 14px;
  border-radius: 16px;
  border: 1px solid var(--border);
  background: white;
  color: var(--text);
  outline: none;
}

.form input::placeholder,
.form textarea::placeholder{ color: color-mix(in srgb, var(--text) 45%, transparent); }

.form textarea{ min-height: 160px; resize: vertical; }

.form input:focus, .form select:focus, .form textarea:focus{
  border-color: color-mix(in srgb, var(--accentA) 45%, var(--border));
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accentA) 14%, transparent);
}

.form__row{
  display:grid;
  grid-template-columns: 1fr;
  gap: 18px;
  margin-bottom: 10px;
}

.form__actions{
  margin-top: 10px;
  display:flex;
  gap: 10px;
  flex-wrap:wrap;
}

/* CTA strip */
.cta-strip{
  margin-top: 10px;
  border: 1px solid var(--border);
  background: none;), var(--card-bg-end, rgba(255,255,255,.10)));
  border-radius: var(--radius-lg);
  padding: 28px;
  box-shadow: var(--shadow-sm);
  backdrop-filter: blur(20px) saturate(150%);
  -webkit-backdrop-filter: blur(20px) saturate(150%);
}
.cta-strip__inner{
  display:flex;
  gap: 14px;
  align-items:center;
  justify-content: space-between;
  flex-wrap: wrap;
}
.cta-strip__actions{ display:flex; gap:10px; flex-wrap:wrap; }


.card,
.quizcard,
.pricecard,
.addons,
.saved__item,
.cta-strip,
.premium-booking{
  position: relative;
}

.card::selection{ background: rgba(255,255,255,.2); }

.quizcard::before,
.pricecard::before,
.addons::before,
.saved__item::before,
.cta-strip::before,
.premium-booking::before{
  content:"";
  position:absolute;
  inset:1px 1px auto 1px;
  height:42%;
  border-radius: inherit;
  background: none;, transparent);
  pointer-events:none;
}
/* Floating nav */
.float-nav{
  position:fixed;
  right:16px;
  bottom:16px;
  z-index:40;
  display:flex;
  flex-direction:column;
  gap:10px;
}
.float-nav__btn{
  width:40px;
  height:22px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.18);
  background:rgba(255,255,255,.92);
  color:#111827;
  box-shadow:var(--shadow-sm);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  transition:transform .14s ease, background .14s ease, opacity .2s ease;
}
.float-nav__btn:hover{
  transform:translateY(-1px);
  background:#fff;
}
.float-nav__btn[data-scroll="top"]{
  opacity:0;
  pointer-events:none;
}
.float-nav.show-top .float-nav__btn[data-scroll="top"],
.float-nav.is-visible .float-nav__btn[data-scroll="top"]{
  opacity:1;
  pointer-events:auto;
}
.float-nav__btn svg{
  width:22px;
  height:22px;
}
.float-nav__btn[data-scroll="down"] svg{
  transform:rotate(180deg);
}

/* Footer */
.site-footer{
  margin-top: 20px;
  padding: 10px 10px;
  border-top: 1px solid var(--border);
  background: rgba(0,0,0,.75);
  text-align:center;
}
.site-footer__inner{ max-width: 1200px; }
.site-footer p { 
margin: 10px; 
font-size: 14px; 
color: #fff; 
letter-spacing: .2px; 
font-family: 'MuseoModerno', sans-serif;}

/* Responsive layout */
@media (min-width: 860px){
  .hero{ grid-template-columns: 1.25fr .75fr; padding: 28px; gap: 20px; }
  .cards{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .form__row{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Small tweak for ultra-small screens */
@media (max-width: 420px){
  .logo-img{ height: 52px; }
  .hero__title{ font-size: 34px; }
}

/* =========================
   Dynamic components (rendered by script.js)
========================= */

.hero__chips{ margin-top: 14px; display:flex; gap:8px; flex-wrap:wrap; }
.chip{
  border:1px solid var(--border);
  background: rgba(255,255,255,.14);
  padding:8px 10px;
  border-radius: 999px;
  font-size: 12px;
  color: color-mix(in srgb, var(--text) 78%, transparent);
  backdrop-filter: blur(14px) saturate(145%);
  -webkit-backdrop-filter: blur(14px) saturate(145%);
}

.strip{ margin-top: 14px; display:flex; gap:10px; flex-wrap:wrap; }
.strip__item{
  border:1px solid var(--border);
  background: rgba(255,255,255,.14);
  padding:10px 12px;
  border-radius: 999px;
  font-size: 13px;
  color: color-mix(in srgb, var(--text) 78%, transparent);
  box-shadow: var(--shadow-sm);
  backdrop-filter: blur(14px) saturate(145%);
  -webkit-backdrop-filter: blur(14px) saturate(145%);
}

.gallery{
  margin-top: 18px;
  display:grid;
  grid-template-columns: repeat(1, minmax(0, 1fr));
  gap: 14px;
}

.quizcard{
  border:1px solid var(--border);
  background: none;), var(--card-bg-end, rgba(255,255,255,.10)));
  border-radius: var(--radius-lg);
  padding:16px;
  cursor:pointer;
  box-shadow: var(--shadow-sm);
  backdrop-filter: blur(20px) saturate(155%);
  -webkit-backdrop-filter: blur(20px) saturate(155%);
  transition: transform .12s ease, box-shadow .12s ease;
}
.quizcard:hover{ transform: translateY(-2px); box-shadow: var(--shadow-md); }
.quizcard__top{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
.badge{
  font-size: 12px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--accentA) 25%, var(--border));
  background: color-mix(in srgb, var(--accentA) 10%, white);
  color: color-mix(in srgb, var(--text) 80%, transparent);
}
.quizcard__items{ margin: 12px 0 0; padding-left: 18px; color: color-mix(in srgb, var(--text) 82%, transparent); display:none; }
.quizcard[data-open="true"] .quizcard__items{ display:block; }

.pricing{
  margin-top: 18px;
  display:grid;
  grid-template-columns: repeat(1, minmax(0, 1fr));
  gap: 14px;
}

.pricecard{
  border:1px solid var(--border);
  background: none;), var(--card-bg-end, rgba(255,255,255,.10)));
  border-radius: var(--radius-lg);
  padding:18px;
  box-shadow: var(--shadow-sm);
  backdrop-filter: blur(20px) saturate(155%);
  -webkit-backdrop-filter: blur(20px) saturate(155%);
}

.pricecard--featured{
  border-color: color-mix(in srgb, var(--accentA) 28%, rgba(255,255,255,.24));
  background: none; 16%, rgba(255,255,255,.22)),
    rgba(255,255,255,.12));
  box-shadow: var(--shadow-md);
}

.pricecard__head{ display:flex; align-items:baseline; justify-content:space-between; gap:10px; }
.price{
  font-size: 26px;
  font-weight: 900;
  color: var(--accentA);
}
.pricecard p{ margin: 6px 0 0; color: var(--muted); }
.pricecard ul{ margin: 12px 0 0; padding-left: 18px; color: color-mix(in srgb, var(--text) 82%, transparent); }
.pricecard .btn{ margin-top: 14px; width: 100%; }

.addons{
  margin-top: 14px;
  border: 1px solid var(--border);
  background: none;), var(--card-bg-end, rgba(255,255,255,.10)));
  border-radius: var(--radius-lg);
  padding: 18px;
  box-shadow: var(--shadow-sm);
  backdrop-filter: blur(20px) saturate(155%);
  -webkit-backdrop-filter: blur(20px) saturate(155%);
}

.addons__grid{
  margin-top: 12px;
  display:grid;
  grid-template-columns: repeat(1, minmax(0, 1fr));
  gap: 10px;
}

.addon{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
  padding: 12px 12px;
  border-radius: 16px;
  border: 1px solid var(--card-border, var(--border));
  background: color-mix(in srgb, var(--card-bg-start, rgba(255,255,255,.12)) 76%, transparent);
  backdrop-filter: blur(16px) saturate(145%);
  -webkit-backdrop-filter: blur(16px) saturate(145%);
}

.addon__price{ color: var(--accentB); font-weight: 800; }

.bookgrid{
  margin-top: 18px;
  display:grid;
  grid-template-columns: 1fr;
  gap: 14px;
}

.saved{ display:flex; flex-direction:column; gap:10px; margin-top: 12px; }
.saved__item{
  border: 1px solid var(--border);
  background: none;), var(--card-bg-end, rgba(255,255,255,.10)));
  border-radius: 16px;
  padding: 12px;
  box-shadow: var(--shadow-sm);
  backdrop-filter: blur(18px) saturate(150%);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
}
.saved__meta{ display:flex; justify-content:space-between; gap:10px; color: var(--muted); font-size: 13px; }
.saved__actions{ margin-top: 10px; display:flex; gap:10px; flex-wrap:wrap; }

.callout{
  margin-top: 14px;
  border-radius: 18px;
  padding: 14px;
  border: 1px solid var(--card-border, color-mix(in srgb, var(--accentB) 24%, rgba(255,255,255,.22)));
  background: none; 28%, var(--card-bg-start, rgba(255,255,255,.18))), var(--card-bg-end, rgba(255,255,255,.10)));
  backdrop-filter: blur(18px) saturate(150%);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
}
.callout__title{ font-weight: 900; color: color-mix(in srgb, var(--accentB) 75%, black); }

@media (min-width: 860px){
  .gallery{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pricing{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .addons__grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bookgrid{ grid-template-columns: 1.1fr .9fr; }
}


.card p,
.card ul,
.card li,
.pricecard p,
.pricecard ul,
.quizcard__items,
.saved__meta,
.form label,
.section__head p,
.cta-strip p,
.addons p,
.addon p,
.callout p,
.small,
.muted{
  color: var(--card-muted, var(--muted));
}

.card h3,
.pricecard h3,
.quizcard h3,
.addons h3,
.callout__title,
.premium-booking h2,
.premium-booking h3{
  color: var(--card-text, var(--text));
}

.price,
.addon__price,
.badge{
  color: rgba(255,255,255,.96);
}

.badge{
  border-color: rgba(255,255,255,.26);
  background: rgba(255,255,255,.14);
}

.card::after,
.quizcard::before,
.pricecard::before,
.addons::before,
.saved__item::before,
.cta-strip::before,
.premium-booking::before{
  background: none;, transparent);
}

.form input,
.form select,
.form textarea{
  background: rgba(255,255,255,.96);
  color: #111827;
}


/* 2026-03 refinement: restore dark hero copy, unify section heads with nav, and make cards pop */
.hero{
  color: #0f172a;
}
.hero__content,
.hero__content p,
.hero__title,
.hero__sub,
.hero .pill{
  color: #0f172a;
}
.hero__sub{
  color: rgba(15,23,42,.78);
}
body.theme-cyan .hero,
body.theme-cyan .hero__content,
body.theme-cyan .hero__content p,
body.theme-cyan .hero__title,
body.theme-cyan .hero__sub,
body.theme-cyan .pill{
  color: #0f172a;
}
body.theme-cyan .hero__sub{ color: rgba(15,23,42,.78); }
body.theme-cyan .pill{
  background: rgba(255,255,255,.34);
  border-color: rgba(255,255,255,.46);
}
body.theme-cyan .pill__dot{ background: rgba(15,23,42,.82); }

.section__head h2{
  color: var(--nav-text);
  font-family: 'MuseoModerno', sans-serif;
  font-weight: 800;
}
.section__head p,
body.theme-purple .section__head p,
body.theme-orange .section__head p,
body.theme-green .section__head p,
body.theme-pink .section__head p,
body.theme-blue .section__head p,
body.theme-cyan .section__head p{
  color: color-mix(in srgb, var(--nav-text) 82%, transparent);
}

.card{
  padding: 22px;
  border: 1px solid color-mix(in srgb, white 22%, var(--card-border, var(--border)));
  background: none;) 88%, rgba(255,255,255,.18)),
    color-mix(in srgb, var(--card-bg-end, rgba(255,255,255,.12)) 92%, rgba(255,255,255,.08)));
  box-shadow:
    0 18px 38px rgba(15,23,42,.20),
    inset 0 1px 0 rgba(255,255,255,.18);
  backdrop-filter: blur(24px) saturate(170%);
  -webkit-backdrop-filter: blur(24px) saturate(170%);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.card:hover{
  transform: translateY(-4px);
  box-shadow:
    0 28px 54px rgba(15,23,42,.24),
    inset 0 1px 0 rgba(255,255,255,.22);
  border-color: color-mix(in srgb, white 34%, var(--card-border, var(--border)));
}
.card::before{
  width: 5px;
  opacity: .82;
}
.card h3{
  margin: 4px 0 10px;
  font-size: 1.18rem;
  line-height: 1.25;
}
.card p,
.card__blurb{
  font-size: 15.5px;
  line-height: 1.62;
}
.card__blurb{
  margin-top: 12px;
  color: rgba(255,255,255,.98);
  font-weight: 600;
}
.card .muted{
  color: var(--card-muted, var(--muted));
}

/* Bold card styling */
.card, .experience-card, .section-card, .cta-strip {
    background: linear-gradient(135deg, #0ea5e9, #6366f1);
    color: #ffffff;
    box-shadow: 0 10px 30px rgba(0,0,0,0.15);
    border-radius: 16px;
}



/* ===== Refined white-background + matching pop cards override ===== */
:root{
  --page-white: #ffffff;
  --page-tint: #f8fafc;
  --ink-strong: #0f172a;
  --ink-soft: #475569;
}

html, body{
  background: var(--page-white) !important;
  color: var(--ink-strong) !important;
}

body{
  min-height: 100vh;
}

body::before{
  opacity: .035 !important;
  mix-blend-mode: normal !important;
}

.bg-video{
  opacity: .025 !important;
  filter: grayscale(1) contrast(.9) blur(2px) !important;
}

.wrap{
  position: relative;
}

/* Keep navigation clean on white */
.topbar{
  background: rgba(255,255,255,.88) !important;
  border: 1px solid rgba(15,23,42,.08) !important;
  box-shadow: 0 14px 40px rgba(15,23,42,.08) !important;
  color: var(--ink-strong) !important;
}

.nav a,
.nav .nav-link{
  color: var(--ink-strong) !important;
}

.nav a:hover,
.nav .nav-link:hover{
  background: color-mix(in srgb, var(--accentA) 10%, white) !important;
  color: var(--ink-strong) !important;
}

.hero{
  background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(248,250,252,.96)) !important;
  border: 1px solid rgba(15,23,42,.08) !important;
  box-shadow: 0 22px 60px rgba(15,23,42,.08) !important;
  color: var(--ink-strong) !important;
}

.hero::after{
  background: linear-gradient(135deg, var(--accentA), var(--accentB), var(--accentC)) !important;
  opacity: .16 !important;
  filter: blur(16px) !important;
}

.hero__sub,
.section__head p,
.muted,
.card p,
.card ul,
.site-footer,
.site-footer p{
  color: var(--ink-soft) !important;
}

/* Matching bold cards across all pages */
.cards{
  gap: 18px !important;
}

.card,
.cta-strip,
.premium-booking,
.addons,
.quizcard,
.pricecard,
.saved__item,
.addon,
.callout{
  position: relative !important;
  overflow: hidden !important;
  border-radius: 24px !important;
  border: 1px solid rgba(255,255,255,.36) !important;
  background:
    linear-gradient(160deg,
      color-mix(in srgb, var(--accentA) 92%, white) 0%,
      color-mix(in srgb, var(--accentB) 84%, white) 55%,
      color-mix(in srgb, var(--accentC) 80%, white) 100%) !important;
  color: white !important;
  box-shadow:
    0 18px 40px rgba(15,23,42,.14),
    0 8px 18px color-mix(in srgb, var(--accentA) 18%, transparent) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  transform: translateY(0);
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease !important;
}

.card:hover,
.cta-strip:hover,
.premium-booking:hover,
.addons:hover,
.quizcard:hover,
.pricecard:hover,
.saved__item:hover,
.addon:hover,
.callout:hover{
  transform: translateY(-3px) !important;
  box-shadow:
    0 26px 54px rgba(15,23,42,.18),
    0 14px 26px color-mix(in srgb, var(--accentB) 24%, transparent) !important;
  filter: saturate(1.04) !important;
}

.card::before,
.cta-strip::before,
.premium-booking::before,
.addons::before,
.quizcard::before,
.pricecard::before,
.saved__item::before,
.addon::before,
.callout::before{
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  background:
    radial-gradient(circle at top left, rgba(255,255,255,.32), transparent 34%),
    radial-gradient(circle at bottom right, rgba(255,255,255,.16), transparent 28%) !important;
  opacity: 1 !important;
  pointer-events: none !important;
}

.card::after,
.cta-strip::after,
.premium-booking::after,
.addons::after,
.quizcard::after,
.pricecard::after,
.saved__item::after,
.addon::after,
.callout::after{
  content: "" !important;
  position: absolute !important;
  inset: 1px !important;
  border-radius: inherit !important;
  border: 1px solid rgba(255,255,255,.18) !important;
  pointer-events: none !important;
}

.card h3,
.card p,
.card li,
.cta-strip h3,
.cta-strip p,
.premium-booking h2,
.premium-booking h3,
.premium-booking p,
.quizcard h3,
.quizcard p,
.pricecard h3,
.pricecard p,
.addons h3,
.addons p,
.addon h3,
.addon p,
.callout h3,
.callout p,
.box{
  color: #ffffff !important;
}

.card ul,
.card li,
.quizcard ul,
.quizcard li,
.pricecard ul,
.pricecard li{
  color: rgba(255,255,255,.94) !important;
}

.divider{
  background: rgba(255,255,255,.22) !important;
}

/* Buttons feel connected to the card palette */
.hero-btn--primary,
.btn,
.btn--cta{
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--accentA) 92%, white),
    color-mix(in srgb, var(--accentB) 86%, white)) !important;
  color: white !important;
  border: 1px solid rgba(255,255,255,.22) !important;
  box-shadow: 0 12px 28px rgba(15,23,42,.12) !important;
}

.hero-btn--secondary{
  background: color-mix(in srgb, var(--accentB) 10%, white) !important;
  border-color: color-mix(in srgb, var(--accentB) 22%, rgba(15,23,42,.08)) !important;
  color: var(--ink-strong) !important;
}

.btn--ghost{
  background: rgba(255,255,255,.72) !important;
  color: var(--ink-strong) !important;
  border: 1px solid rgba(15,23,42,.10) !important;
}

/* Footer back to white for a crisp finish */
.site-footer{
  background: transparent !important;
  color: var(--ink-soft) !important;
}

/* Mobile polish */
@media (max-width: 860px){
  .nav{
    background: rgba(255,255,255,.96) !important;
    border: 1px solid rgba(15,23,42,.08) !important;
  }
}




/* ===== Global white background + bold glass hero override ===== */
html,
body{
  background: #ffffff !important;
  background-color: #ffffff !important;
  color: #0f172a !important;
}

body::before,
body::after{
  background: none !important;
  opacity: 0 !important;
}

.bg-video,
.bg-video-wrap,
.background-video,
.page-bg,
.page-background{
  display: none !important;
  opacity: 0 !important;
}

main,
.site-shell,
.wrap,
.page,
.page-wrap{
  background: transparent !important;
}

/* Every single hero becomes a bold Apple-style glass panel */
.hero.hero--single,
.hero--single{
  position: relative !important;
  overflow: hidden !important;
  isolation: isolate !important;
  background:
    linear-gradient(135deg,
      color-mix(in srgb, var(--accentA, #7c3aed) 88%, white) 0%,
      color-mix(in srgb, var(--accentB, #06b6d4) 82%, white) 52%,
      color-mix(in srgb, var(--accentC, #ec4899) 78%, white) 100%) !important;
  border: 1px solid rgba(255,255,255,.45) !important;
  border-radius: 32px !important;
  box-shadow:
    0 28px 70px rgba(15,23,42,.16),
    inset 0 1px 0 rgba(255,255,255,.32),
    inset 0 -1px 0 rgba(255,255,255,.08) !important;
  backdrop-filter: blur(24px) saturate(145%) !important;
  -webkit-backdrop-filter: blur(24px) saturate(145%) !important;
  color: #ffffff !important;
}

/* luminous glass highlights */
.hero.hero--single::before,
.hero--single::before{
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  pointer-events: none !important;
  background:
    radial-gradient(circle at 14% 16%, rgba(255,255,255,.34) 0, rgba(255,255,255,.18) 16%, transparent 38%),
    radial-gradient(circle at 84% 18%, rgba(255,255,255,.20) 0, transparent 26%),
    linear-gradient(180deg, rgba(255,255,255,.16), rgba(255,255,255,.03) 36%, rgba(255,255,255,.06) 100%) !important;
  opacity: 1 !important;
}

.hero.hero--single::after,
.hero--single::after{
  content: "" !important;
  position: absolute !important;
  inset: 1px !important;
  border-radius: inherit !important;
  pointer-events: none !important;
  border: 1px solid rgba(255,255,255,.18) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.18) !important;
}

.hero.hero--single > *,
.hero--single > *{
  position: relative !important;
  z-index: 1 !important;
}

.hero.hero--single h1,
.hero.hero--single h2,
.hero.hero--single h3,
.hero--single h1,
.hero--single h2,
.hero--single h3,
.hero.hero--single p,
.hero--single p,
.hero.hero--single .eyebrow,
.hero--single .eyebrow,
.hero.hero--single .muted,
.hero--single .muted{
  color: #ffffff !important;
}

.hero.hero--single .muted,
.hero--single .muted,
.hero.hero--single .hero__sub,
.hero--single .hero__sub{
  color: rgba(255,255,255,.90) !important;
}

/* Buttons stay premium against the hero fill */
.hero.hero--single .hero-btn--primary,
.hero--single .hero-btn--primary,
.hero.hero--single .btn,
.hero--single .btn{
  background: rgba(255,255,255,.18) !important;
  color: #ffffff !important;
  border: 1px solid rgba(255,255,255,.28) !important;
  box-shadow: 0 10px 24px rgba(15,23,42,.12) !important;
  backdrop-filter: blur(12px) saturate(140%) !important;
  -webkit-backdrop-filter: blur(12px) saturate(140%) !important;
}

.hero.hero--single .hero-btn--secondary,
.hero--single .hero-btn--secondary{
  background: rgba(255,255,255,.88) !important;
  color: #0f172a !important;
  border: 1px solid rgba(255,255,255,.55) !important;
}

/* Ensure sections around the hero stay crisp on white */
section,
.section,
.section-shell{
  background-color: transparent !important;
}

/* mobile polish */
@media (max-width: 860px){
  .hero.hero--single,
  .hero--single{
    border-radius: 24px !important;
    box-shadow:
      0 18px 40px rgba(15,23,42,.14),
      inset 0 1px 0 rgba(255,255,255,.28) !important;
  }
}




/* ===== Vivid solid hero + matching headings + pink floating question marks ===== */
:root{
  --vivid-brand: #ff2f92;
  --vivid-brand-dark: #e61f80;
  --questionmark-pink: #ff4fa4;
}

html,
body{
  background: #ffffff !important;
  background-color: #ffffff !important;
}

/* vivid floating background question marks */
body::before{
  content: "?   ?   ?   ?   ?   ?   ?   ?" !important;
  position: fixed !important;
  top: 8vh !important;
  left: 2vw !important;
  right: 2vw !important;
  font-size: clamp(60px, 10vw, 132px) !important;
  line-height: 1.1 !important;
  letter-spacing: 1.4rem !important;
  font-weight: 800 !important;
  color: rgba(255, 79, 164, 0.11) !important;
  white-space: nowrap !important;
  pointer-events: none !important;
  z-index: 0 !important;
  transform: rotate(-8deg) !important;
  filter: blur(0.2px) !important;
  opacity: 1 !important;
}

body::after{
  content: "?   ?   ?   ?   ?   ?" !important;
  position: fixed !important;
  bottom: 10vh !important;
  right: -2vw !important;
  font-size: clamp(54px, 9vw, 124px) !important;
  line-height: 1 !important;
  letter-spacing: 1.2rem !important;
  font-weight: 800 !important;
  color: rgba(255, 79, 164, 0.09) !important;
  white-space: nowrap !important;
  pointer-events: none !important;
  z-index: 0 !important;
  transform: rotate(11deg) !important;
  opacity: 1 !important;
}

main,
.wrap,
.page,
.site-shell{
  position: relative !important;
  z-index: 1 !important;
}

/* solid vivid hero panels */
.hero.hero--single,
.hero--single{
  background: var(--vivid-brand) !important;
  border: 1px solid rgba(255,255,255,.35) !important;
  border-radius: 32px !important;
  color: #ffffff !important;
  box-shadow:
    0 26px 60px rgba(255, 47, 146, .26),
    0 10px 26px rgba(15, 23, 42, .12),
    inset 0 1px 0 rgba(255,255,255,.28) !important;
  backdrop-filter: blur(16px) saturate(140%) !important;
  -webkit-backdrop-filter: blur(16px) saturate(140%) !important;
}

.hero.hero--single::before,
.hero--single::before{
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  pointer-events: none !important;
  background:
    radial-gradient(circle at 18% 18%, rgba(255,255,255,.26), transparent 28%),
    linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.03) 42%, rgba(0,0,0,.03) 100%) !important;
  opacity: 1 !important;
}

.hero.hero--single::after,
.hero--single::after{
  content: "" !important;
  position: absolute !important;
  inset: 1px !important;
  border-radius: inherit !important;
  border: 1px solid rgba(255,255,255,.16) !important;
  pointer-events: none !important;
}

.hero.hero--single h1,
.hero.hero--single h2,
.hero.hero--single h3,
.hero.hero--single p,
.hero.hero--single .eyebrow,
.hero.hero--single .muted,
.hero.hero--single .hero__sub,
.hero--single h1,
.hero--single h2,
.hero--single h3,
.hero--single p,
.hero--single .eyebrow,
.hero--single .muted,
.hero--single .hero__sub{
  color: #ffffff !important;
}

/* make headings across the site match the vivid card colour */
h1, h2, h3,
.section__head h2,
.section__head h3,
.card h2,
.card h3,
.cta-strip h3,
.premium-booking h2,
.premium-booking h3,
.quizcard h2,
.quizcard h3,
.pricecard h2,
.pricecard h3,
.addon h2,
.addon h3{
  color: var(--vivid-brand) !important;
}

/* keep white text inside coloured cards/heroes */
.card h1, .card h2, .card h3,
.cta-strip h1, .cta-strip h2, .cta-strip h3,
.premium-booking h1, .premium-booking h2, .premium-booking h3,
.quizcard h1, .quizcard h2, .quizcard h3,
.pricecard h1, .pricecard h2, .pricecard h3,
.addon h1, .addon h2, .addon h3,
.addons h1, .addons h2, .addons h3,
.hero.hero--single h1, .hero.hero--single h2, .hero.hero--single h3,
.hero--single h1, .hero--single h2, .hero--single h3{
  color: #ffffff !important;
}

/* vivid, matched cards */
.card,
.cta-strip,
.premium-booking,
.addons,
.quizcard,
.pricecard,
.saved__item,
.addon,
.callout{
  background: var(--vivid-brand) !important;
  border: 1px solid rgba(255,255,255,.28) !important;
  box-shadow:
    0 18px 40px rgba(255, 47, 146, .22),
    0 10px 24px rgba(15,23,42,.10) !important;
}

.card:hover,
.cta-strip:hover,
.premium-booking:hover,
.addons:hover,
.quizcard:hover,
.pricecard:hover,
.saved__item:hover,
.addon:hover,
.callout:hover{
  box-shadow:
    0 24px 52px rgba(255, 47, 146, .28),
    0 14px 28px rgba(15,23,42,.14) !important;
  filter: saturate(1.03) brightness(1.02) !important;
}

.card::before,
.cta-strip::before,
.premium-booking::before,
.addons::before,
.quizcard::before,
.pricecard::before,
.saved__item::before,
.addon::before,
.callout::before{
  background:
    radial-gradient(circle at top left, rgba(255,255,255,.24), transparent 30%),
    linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.02) 60%, rgba(0,0,0,.03)) !important;
}

/* buttons matched to vivid brand */
.hero-btn--primary,
.btn,
.btn--cta{
  background: var(--vivid-brand) !important;
  color: #ffffff !important;
  border: 1px solid rgba(255,255,255,.18) !important;
  box-shadow: 0 12px 28px rgba(255, 47, 146, .20) !important;
}

.hero-btn--secondary{
  background: #ffffff !important;
  color: var(--vivid-brand) !important;
  border: 1px solid rgba(255, 47, 146, .18) !important;
}

/* mobile */
@media (max-width: 860px){
  .hero.hero--single,
  .hero--single{
    border-radius: 24px !important;
  }
  body::before{
    top: 12vh !important;
    letter-spacing: .7rem !important;
  }
  body::after{
    bottom: 8vh !important;
    letter-spacing: .6rem !important;
  }
}


/* ===== Multi hero colours + subtle question marks ===== */

body::before,
body::after{
  color: rgba(15,23,42,0.06) !important;
}

.hero--index {
  --page-accent: #7c3aed;
}

.hero--index {
  background: #7c3aed !important;
}

.hero--index ~ * .card,
.hero--index ~ * .cta-strip,
.hero--index ~ * .premium-booking,
.hero--index ~ * .quizcard,
.hero--index ~ * .pricecard,
.hero--index ~ * .addon {
  background: #7c3aed !important;
}

body.index h1,
body.index h2,
body.index h3 {
  color: #7c3aed !important;
}

.hero--corporate {
  --page-accent: #0ea5e9;
}

.hero--corporate {
  background: #0ea5e9 !important;
}

.hero--corporate ~ * .card,
.hero--corporate ~ * .cta-strip,
.hero--corporate ~ * .premium-booking,
.hero--corporate ~ * .quizcard,
.hero--corporate ~ * .pricecard,
.hero--corporate ~ * .addon {
  background: #0ea5e9 !important;
}

body.corporate h1,
body.corporate h2,
body.corporate h3 {
  color: #0ea5e9 !important;
}

.hero--private {
  --page-accent: #10b981;
}

.hero--private {
  background: #10b981 !important;
}

.hero--private ~ * .card,
.hero--private ~ * .cta-strip,
.hero--private ~ * .premium-booking,
.hero--private ~ * .quizcard,
.hero--private ~ * .pricecard,
.hero--private ~ * .addon {
  background: #10b981 !important;
}

body.private h1,
body.private h2,
body.private h3 {
  color: #10b981 !important;
}

.hero--events {
  --page-accent: #f59e0b;
}

.hero--events {
  background: #f59e0b !important;
}

.hero--events ~ * .card,
.hero--events ~ * .cta-strip,
.hero--events ~ * .premium-booking,
.hero--events ~ * .quizcard,
.hero--events ~ * .pricecard,
.hero--events ~ * .addon {
  background: #f59e0b !important;
}

body.events h1,
body.events h2,
body.events h3 {
  color: #f59e0b !important;
}

.hero--booking {
  --page-accent: #ef4444;
}

.hero--booking {
  background: #ef4444 !important;
}

.hero--booking ~ * .card,
.hero--booking ~ * .cta-strip,
.hero--booking ~ * .premium-booking,
.hero--booking ~ * .quizcard,
.hero--booking ~ * .pricecard,
.hero--booking ~ * .addon {
  background: #ef4444 !important;
}

body.booking h1,
body.booking h2,
body.booking h3 {
  color: #ef4444 !important;
}


/* ===== FINAL FIX: unique vivid hero colour per page + light grey question marks ===== */
html, body {
  background: #ffffff !important;
  background-color: #ffffff !important;
}

body {
  position: relative !important;
}

/* floating light grey question marks */
body::before,
body::after {
  pointer-events: none !important;
  position: fixed !important;
  z-index: 0 !important;
  font-weight: 800 !important;
  white-space: nowrap !important;
  color: rgba(100, 116, 139, 0.10) !important;
  opacity: 1 !important;
}

body::before {
  content: "?   ?   ?   ?   ?   ?   ?   ?" !important;
  top: 8vh !important;
  left: 0.5rem !important;
  right: 0.5rem !important;
  transform: rotate(-8deg) !important;
  font-size: clamp(54px, 9vw, 120px) !important;
  letter-spacing: 1rem !important;
}

body::after {
  content: "?   ?   ?   ?   ?   ?   ?" !important;
  bottom: 8vh !important;
  left: 10vw !important;
  right: 0 !important;
  transform: rotate(9deg) !important;
  font-size: clamp(48px, 8vw, 108px) !important;
  letter-spacing: 0.9rem !important;
}

main, .wrap, .page, .site-shell, .site, .page-wrap {
  position: relative !important;
  z-index: 1 !important;
  background: transparent !important;
}

.hero.hero--single,
.hero--single {
  color: #ffffff !important;
  border-radius: 32px !important;
  padding-top: 0px;
  padding-bottom: 32px;
  border: 4px solid rgba(255,255,255,.34) !important;
  overflow: hidden !important;
  position: relative !important;
  isolation: isolate !important;
  backdrop-filter: blur(14px) saturate(140%) !important;
  -webkit-backdrop-filter: blur(14px) saturate(140%) !important;
  box-shadow:
    0 26px 60px rgba(15,23,42,.14),
    inset 0 1px 0 rgba(255,255,255,.28) !important;
}

.hero.hero--single::before,
.hero--single::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  background:
    radial-gradient(circle at 18% 18%, rgba(255,255,255,.23), transparent 30%),
    linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.03) 45%, rgba(0,0,0,.04)) !important;
  pointer-events: none !important;
  z-index: 0 !important;
}

.hero.hero--single > *,
.hero--single > * {
  position: relative !important;
  z-index: 1 !important;
}

.hero.hero--single h1,
.hero.hero--single h2,
.hero.hero--single h3,
.hero.hero--single p,
.hero.hero--single .eyebrow,
.hero.hero--single .muted,
.hero.hero--single .hero__sub,
.hero--single h1,
.hero--single h2,
.hero--single h3,
.hero--single p,
.hero--single .eyebrow,
.hero--single .muted,
.hero--single .hero__sub {
  color: #ffffff !important;
}

/* default vivid fallback */
.hero--index,
body.index .card,
body.index .cta-strip,
body.index .premium-booking,
body.index .quizcard,
body.index .pricecard,
body.index .addon,
body.index .addons,
body.index .callout,
body.index .saved__item {
  background: #7C3AED !important;
}
body.index h1, body.index h2, body.index h3,
body.index .section__head h2, body.index .section__head h3 {
  color: #7C3AED !important;
}
body.index .card h1, body.index .card h2, body.index .card h3,
body.index .cta-strip h1, body.index .cta-strip h2, body.index .cta-strip h3,
body.index .premium-booking h1, body.index .premium-booking h2, body.index .premium-booking h3,
body.index .quizcard h1, body.index .quizcard h2, body.index .quizcard h3,
body.index .pricecard h1, body.index .pricecard h2, body.index .pricecard h3,
body.index .addon h1, body.index .addon h2, body.index .addon h3,
body.index .addons h1, body.index .addons h2, body.index .addons h3 { color:#fff !important; }

.hero--corporate,
body.corporate .card,
body.corporate .cta-strip,
body.corporate .premium-booking,
body.corporate .quizcard,
body.corporate .pricecard,
body.corporate .addon,
body.corporate .addons,
body.corporate .callout,
body.corporate .saved__item {
  background: #0EA5E9 !important;
}
body.corporate h1, body.corporate h2, body.corporate h3,
body.corporate .section__head h2, body.corporate .section__head h3 {
  color: #0EA5E9 !important;
}
body.corporate .card h1, body.corporate .card h2, body.corporate .card h3,
body.corporate .cta-strip h1, body.corporate .cta-strip h2, body.corporate .cta-strip h3,
body.corporate .premium-booking h1, body.corporate .premium-booking h2, body.corporate .premium-booking h3,
body.corporate .quizcard h1, body.corporate .quizcard h2, body.corporate .quizcard h3,
body.corporate .pricecard h1, body.corporate .pricecard h2, body.corporate .pricecard h3,
body.corporate .addon h1, body.corporate .addon h2, body.corporate .addon h3,
body.corporate .addons h1, body.corporate .addons h2, body.corporate .addons h3 { color:#fff !important; }

.hero--private,
body.private .card,
body.private .cta-strip,
body.private .premium-booking,
body.private .quizcard,
body.private .pricecard,
body.private .addon,
body.private .addons,
body.private .callout,
body.private .saved__item {
  background: #10B981 !important;
}
body.private h1, body.private h2, body.private h3,
body.private .section__head h2, body.private .section__head h3 {
  color: #10B981 !important;
}
body.private .card h1, body.private .card h2, body.private .card h3,
body.private .cta-strip h1, body.private .cta-strip h2, body.private .cta-strip h3,
body.private .premium-booking h1, body.private .premium-booking h2, body.private .premium-booking h3,
body.private .quizcard h1, body.private .quizcard h2, body.private .quizcard h3,
body.private .pricecard h1, body.private .pricecard h2, body.private .pricecard h3,
body.private .addon h1, body.private .addon h2, body.private .addon h3,
body.private .addons h1, body.private .addons h2, body.private .addons h3 { color:#fff !important; }

.hero--events,
body.events .card,
body.events .cta-strip,
body.events .premium-booking,
body.events .quizcard,
body.events .pricecard,
body.events .addon,
body.events .addons,
body.events .callout,
body.events .saved__item {
  background: #F59E0B !important;
}
body.events h1, body.events h2, body.events h3,
body.events .section__head h2, body.events .section__head h3 {
  color: #F59E0B !important;
}
body.events .card h1, body.events .card h2, body.events .card h3,
body.events .cta-strip h1, body.events .cta-strip h2, body.events .cta-strip h3,
body.events .premium-booking h1, body.events .premium-booking h2, body.events .premium-booking h3,
body.events .quizcard h1, body.events .quizcard h2, body.events .quizcard h3,
body.events .pricecard h1, body.events .pricecard h2, body.events .pricecard h3,
body.events .addon h1, body.events .addon h2, body.events .addon h3,
body.events .addons h1, body.events .addons h2, body.events .addons h3 { color:#fff !important; }

.hero--booking,
body.booking .card,
body.booking .cta-strip,
body.booking .premium-booking,
body.booking .quizcard,
body.booking .pricecard,
body.booking .addon,
body.booking .addons,
body.booking .callout,
body.booking .saved__item {
  background: #EF4444 !important;
}
body.booking h1, body.booking h2, body.booking h3,
body.booking .section__head h2, body.booking .section__head h3 {
  color: #EF4444 !important;
}
body.booking .card h1, body.booking .card h2, body.booking .card h3,
body.booking .cta-strip h1, body.booking .cta-strip h2, body.booking .cta-strip h3,
body.booking .premium-booking h1, body.booking .premium-booking h2, body.booking .premium-booking h3,
body.booking .quizcard h1, body.booking .quizcard h2, body.booking .quizcard h3,
body.booking .pricecard h1, body.booking .pricecard h2, body.booking .pricecard h3,
body.booking .addon h1, body.booking .addon h2, body.booking .addon h3,
body.booking .addons h1, body.booking .addons h2, body.booking .addons h3 { color:#fff !important; }

/* Ensure generic card copy stays white on coloured cards */
.card, .cta-strip, .premium-booking, .quizcard, .pricecard, .addon, .addons, .callout, .saved__item {
  color: #ffffff !important;
  box-shadow:
    0 18px 40px rgba(15,23,42,.10),
    0 10px 24px rgba(15,23,42,.06) !important;
  border: 1px solid rgba(255,255,255,.22) !important;
}

.card p, .card li, .cta-strip p, .premium-booking p, .quizcard p, .pricecard p, .addon p, .addons p, .callout p, .saved__item p {
  color: rgba(255,255,255,.94) !important;
}


/* ===== FINAL BRAND COLOUR MAPPING ===== */

.hero--index,
body.index .card,
body.index .cta-strip,
body.index .premium-booking,
body.index .quizcard,
body.index .pricecard,
body.index .addon,
body.index .addons,
body.index .callout,
body.index .saved__item {
  background: #7C3AED !important;
}

body.index h1,
body.index h2,
body.index h3,
body.index .section__head h2,
body.index .section__head h3 {
  color: #7C3AED !important;
}

body.index .card h1,
body.index .card h2,
body.index .card h3,
body.index .cta-strip h1,
body.index .cta-strip h2,
body.index .cta-strip h3,
body.index .premium-booking h1,
body.index .premium-booking h2,
body.index .premium-booking h3,
body.index .quizcard h1,
body.index .quizcard h2,
body.index .quizcard h3,
body.index .pricecard h1,
body.index .pricecard h2,
body.index .pricecard h3,
body.index .addon h1,
body.index .addon h2,
body.index .addon h3,
body.index .addons h1,
body.index .addons h2,
body.index .addons h3 {
  color: #ffffff !important;
}

.hero--pub-quiz,
body.pub-quiz .card,
body.pub-quiz .cta-strip,
body.pub-quiz .premium-booking,
body.pub-quiz .quizcard,
body.pub-quiz .pricecard,
body.pub-quiz .addon,
body.pub-quiz .addons,
body.pub-quiz .callout,
body.pub-quiz .saved__item {
  background: #06B6D4 !important;
}

body.pub-quiz h1,
body.pub-quiz h2,
body.pub-quiz h3,
body.pub-quiz .section__head h2,
body.pub-quiz .section__head h3 {
  color: #06B6D4 !important;
}

body.pub-quiz .card h1,
body.pub-quiz .card h2,
body.pub-quiz .card h3,
body.pub-quiz .cta-strip h1,
body.pub-quiz .cta-strip h2,
body.pub-quiz .cta-strip h3,
body.pub-quiz .premium-booking h1,
body.pub-quiz .premium-booking h2,
body.pub-quiz .premium-booking h3,
body.pub-quiz .quizcard h1,
body.pub-quiz .quizcard h2,
body.pub-quiz .quizcard h3,
body.pub-quiz .pricecard h1,
body.pub-quiz .pricecard h2,
body.pub-quiz .pricecard h3,
body.pub-quiz .addon h1,
body.pub-quiz .addon h2,
body.pub-quiz .addon h3,
body.pub-quiz .addons h1,
body.pub-quiz .addons h2,
body.pub-quiz .addons h3 {
  color: #ffffff !important;
}

.hero--weddings,
body.weddings .card,
body.weddings .cta-strip,
body.weddings .premium-booking,
body.weddings .quizcard,
body.weddings .pricecard,
body.weddings .addon,
body.weddings .addons,
body.weddings .callout,
body.weddings .saved__item {
  background: #EC4899 !important;
}

body.weddings h1,
body.weddings h2,
body.weddings h3,
body.weddings .section__head h2,
body.weddings .section__head h3 {
  color: #EC4899 !important;
}

body.weddings .card h1,
body.weddings .card h2,
body.weddings .card h3,
body.weddings .cta-strip h1,
body.weddings .cta-strip h2,
body.weddings .cta-strip h3,
body.weddings .premium-booking h1,
body.weddings .premium-booking h2,
body.weddings .premium-booking h3,
body.weddings .quizcard h1,
body.weddings .quizcard h2,
body.weddings .quizcard h3,
body.weddings .pricecard h1,
body.weddings .pricecard h2,
body.weddings .pricecard h3,
body.weddings .addon h1,
body.weddings .addon h2,
body.weddings .addon h3,
body.weddings .addons h1,
body.weddings .addons h2,
body.weddings .addons h3 {
  color: #ffffff !important;
}

.hero--fundraiser,
body.fundraiser .card,
body.fundraiser .cta-strip,
body.fundraiser .premium-booking,
body.fundraiser .quizcard,
body.fundraiser .pricecard,
body.fundraiser .addon,
body.fundraiser .addons,
body.fundraiser .callout,
body.fundraiser .saved__item {
  background: #10B981 !important;
}

body.fundraiser h1,
body.fundraiser h2,
body.fundraiser h3,
body.fundraiser .section__head h2,
body.fundraiser .section__head h3 {
  color: #10B981 !important;
}

body.fundraiser .card h1,
body.fundraiser .card h2,
body.fundraiser .card h3,
body.fundraiser .cta-strip h1,
body.fundraiser .cta-strip h2,
body.fundraiser .cta-strip h3,
body.fundraiser .premium-booking h1,
body.fundraiser .premium-booking h2,
body.fundraiser .premium-booking h3,
body.fundraiser .quizcard h1,
body.fundraiser .quizcard h2,
body.fundraiser .quizcard h3,
body.fundraiser .pricecard h1,
body.fundraiser .pricecard h2,
body.fundraiser .pricecard h3,
body.fundraiser .addon h1,
body.fundraiser .addon h2,
body.fundraiser .addon h3,
body.fundraiser .addons h1,
body.fundraiser .addons h2,
body.fundraiser .addons h3 {
  color: #ffffff !important;
}

.hero--events,
body.events .card,
body.events .cta-strip,
body.events .premium-booking,
body.events .quizcard,
body.events .pricecard,
body.events .addon,
body.events .addons,
body.events .callout,
body.events .saved__item {
  background: #F97316 !important;
}

body.events h1,
body.events h2,
body.events h3,
body.events .section__head h2,
body.events .section__head h3 {
  color: #F97316 !important;
}

body.events .card h1,
body.events .card h2,
body.events .card h3,
body.events .cta-strip h1,
body.events .cta-strip h2,
body.events .cta-strip h3,
body.events .premium-booking h1,
body.events .premium-booking h2,
body.events .premium-booking h3,
body.events .quizcard h1,
body.events .quizcard h2,
body.events .quizcard h3,
body.events .pricecard h1,
body.events .pricecard h2,
body.events .pricecard h3,
body.events .addon h1,
body.events .addon h2,
body.events .addon h3,
body.events .addons h1,
body.events .addons h2,
body.events .addons h3 {
  color: #ffffff !important;
}

.hero--booking,
body.booking .card,
body.booking .cta-strip,
body.booking .premium-booking,
body.booking .quizcard,
body.booking .pricecard,
body.booking .addon,
body.booking .addons,
body.booking .callout,
body.booking .saved__item {
  background: #1D4ED8 !important;
}

body.booking h1,
body.booking h2,
body.booking h3,
body.booking .section__head h2,
body.booking .section__head h3 {
  color: #1D4ED8 !important;
}

body.booking .card h1,
body.booking .card h2,
body.booking .card h3,
body.booking .cta-strip h1,
body.booking .cta-strip h2,
body.booking .cta-strip h3,
body.booking .premium-booking h1,
body.booking .premium-booking h2,
body.booking .premium-booking h3,
body.booking .quizcard h1,
body.booking .quizcard h2,
body.booking .quizcard h3,
body.booking .pricecard h1,
body.booking .pricecard h2,
body.booking .pricecard h3,
body.booking .addon h1,
body.booking .addon h2,
body.booking .addon h3,
body.booking .addons h1,
body.booking .addons h2,
body.booking .addons h3 {
  color: #ffffff !important;
}

/* ===== FORCE HERO COLOUR MATCH PER PAGE ===== */

body.index .hero.hero--single,
body.index .hero--single {
  background: #7C3AED !important;
}

body.pub-quiz .hero.hero--single,
body.pub-quiz .hero--single {
  background: #06B6D4 !important;
}

body.weddings .hero.hero--single,
body.weddings .hero--single {
  background: #EC4899 !important;
}

body.fundraiser .hero.hero--single,
body.fundraiser .hero--single {
  background: #10B981 !important;
}

body.events .hero.hero--single,
body.events .hero--single {
  background: #F97316 !important;
}

body.booking .hero.hero--single,
body.booking .hero--single {
  background: #1D4ED8 !important;
}

/* ===== Black topbar and footer across all pages ===== */

.topbar {
  background: #000000 !important;
  color: #ffffff !important;
  border: none !important;
}

.topbar a,
.topbar .nav-link,
.topbar .logo {
  color: #ffffff !important;
}

.topbar a:hover,
.topbar .nav-link:hover {
  color: #cccccc !important;
}

.site-footer {
  background: #000000 !important;
  color: #ffffff !important;
  border: none !important;
}

.site-footer a {
  color: #ffffff !important;
}

.site-footer a:hover {
  color: #cccccc !important;
}

/* ===== Apple-style modern nav + footer ===== */

/* Topbar - glass black */
.topbar {
  background: rgba(0, 0, 0, 0.72) !important;
  backdrop-filter: blur(18px) saturate(140%) !important;
  -webkit-backdrop-filter: blur(18px) saturate(140%) !important;
  border-bottom: 1px solid rgba(255,255,255,0.08) !important;
  box-shadow: 0 8px 30px rgba(0,0,0,0.25) !important;
  color: #ffffff !important;
}

.topbar a,
.topbar .nav-link,
.topbar .logo {
  color: rgba(255,255,255,0.92) !important;
  transition: all 0.2s ease !important;
}

.topbar a:hover,
.topbar .nav-link:hover {
  color: #ffffff !important;
  opacity: 0.85 !important;
}

/* subtle active feel */
.topbar .nav-link.active {
  color: #ffffff !important;
  border-bottom: 2px solid rgba(255,255,255,0.6) !important;
}

/* Footer - softer Apple style */
.site-footer {
  background: rgba(0, 0, 0, 0.9) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  border-top: 1px solid rgba(255,255,255,0.06) !important;
  color: rgba(255,255,255,0.85) !important;
}

.site-footer a {
  color: rgba(255,255,255,0.9) !important;
  transition: all 0.2s ease !important;
}

.site-footer a:hover {
  color: #ffffff !important;
  opacity: 0.8 !important;
}

/* spacing + polish */
.site-footer p {
  color: rgba(255,255,255,0.65) !important;
}

/* ===== NAV MATCHING PAGE COLOUR ===== */

body.index .topbar a:hover,
body.index .topbar .nav-link:hover {
  color: #7C3AED !important;
  background: transparent !important;
}

body.index .topbar .nav-link.active,
body.index .topbar a.active {
  color: #7C3AED !important;
  border-bottom: 2px solid #7C3AED !important;
}

body.pub-quiz .topbar a:hover,
body.pub-quiz .topbar .nav-link:hover {
  color: #06B6D4 !important;
  background: transparent !important;
}

body.pub-quiz .topbar .nav-link.active,
body.pub-quiz .topbar a.active {
  color: #06B6D4 !important;
  border-bottom: 2px solid #06B6D4 !important;
}

body.weddings .topbar a:hover,
body.weddings .topbar .nav-link:hover {
  color: #EC4899 !important;
  background: transparent !important;
}

body.weddings .topbar .nav-link.active,
body.weddings .topbar a.active {
  color: #EC4899 !important;
  border-bottom: 2px solid #EC4899 !important;
}

body.fundraiser .topbar a:hover,
body.fundraiser .topbar .nav-link:hover {
  color: #10B981 !important;
  background: transparent !important;
}

body.fundraiser .topbar .nav-link.active,
body.fundraiser .topbar a.active {
  color: #10B981 !important;
  border-bottom: 2px solid #10B981 !important;
}

body.events .topbar a:hover,
body.events .topbar .nav-link:hover {
  color: #F97316 !important;
  background: transparent !important;
}

body.events .topbar .nav-link.active,
body.events .topbar a.active {
  color: #F97316 !important;
  border-bottom: 2px solid #F97316 !important;
}

body.booking .topbar a:hover,
body.booking .topbar .nav-link:hover {
  color: #1D4ED8 !important;
  background: transparent !important;
}

body.booking .topbar .nav-link.active,
body.booking .topbar a.active {
  color: #1D4ED8 !important;
  border-bottom: 2px solid #1D4ED8 !important;
}

.topbar a:hover,
.topbar .nav-link:hover {
  background: transparent !important;
}

/* ===== STRONG ACTIVE NAV STATE ===== */

body.index .topbar .nav-link.active,
body.index .topbar a.active {
  color: #ffffff !important;
  background: #7C3AED !important;
  padding: 2px 10px !important;
  border-radius: 7px !important;
  box-shadow: 0 6px 18px #7C3AED55 !important;
  border: none !important;
}

body.pub-quiz .topbar .nav-link.active,
body.pub-quiz .topbar a.active {
  color: #ffffff !important;
  background: #06B6D4 !important;
  padding: 2px 10px !important;
  border-radius: 7px !important;
  box-shadow: 0 6px 18px #06B6D455 !important;
  border: none !important;
}

body.weddings .topbar .nav-link.active,
body.weddings .topbar a.active {
  color: #ffffff !important;
  background: #EC4899 !important;
  padding: 2px 10px !important;
  border-radius: 7px !important;
  box-shadow: 0 6px 18px #EC489955 !important;
  border: none !important;
}

body.fundraiser .topbar .nav-link.active,
body.fundraiser .topbar a.active {
  color: #ffffff !important;
  background: #10B981 !important;
  padding: 2px 10px !important;
  border-radius: 7px !important;
  box-shadow: 0 6px 18px #10B98155 !important;
  border: none !important;
}

body.events .topbar .nav-link.active,
body.events .topbar a.active {
  color: #ffffff !important;
  background: #F97316 !important;
  padding: 2px 10px !important;
  border-radius: 7px !important;
  box-shadow: 0 6px 18px #F9731655 !important;
  border: none !important;
}

body.booking .topbar .nav-link.active,
body.booking .topbar a.active {
  color: #ffffff !important;
  background: #1D4ED8 !important;
  padding: 2px 10px !important;
  border-radius: 7px !important;
  box-shadow: 0 6px 18px #1D4ED855 !important;
  border: none !important;
}

.topbar .nav-link.active:hover,
.topbar a.active:hover {
  color: #ffffff !important;
  opacity: 1 !important;
}

/* ===== Apple-style typography for paragraphs ===== */

body, p {
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "Helvetica Neue", Arial, sans-serif !important;
  font-weight: 400 !important;
  letter-spacing: -0.01em !important;
  line-height: 1.6 !important;
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
}

/* Slight refinement for readability */
p {
  font-size: 16px !important;
  color: #334155 !important;
}

/* Muted text refinement */
.muted {
  color: #64748b !important;
}

/* ===== FINAL FIXES ===== */

/* 1. Hero paragraph full width */
.hero__grid p,
.hero p {
  max-width: none !important;
  width: 100% !important;
}

/* 2. Remove max-width across site */
section p,
.section p,
.card p,
.cta-strip p,
.premium-booking p,
.quizcard p,
.pricecard p,
.addon p,
.addons p,
.callout p,
.saved__item p,
.section__head p,
.copy p,
.content p,
.text p,
main p {
  max-width: none !important;
  width: 100% !important;
}

/* 3. Ensure wave is visible */
.hero__arrowrow {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
}

.hero__arrowrow .wave {
  flex: 1 !important;
  height: 6px !important;
  border-radius: 999px !important;
  background: linear-gradient(90deg,
    rgba(255,255,255,0.2),
    rgba(255,255,255,0.9),
    rgba(255,255,255,0.2)
  ) !important;
}


/* ===== Wave shimmer update only ===== */

.hero__arrowrow {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
}

.hero__arrowrow .wave {
  flex: 1 !important;
  height: 6px !important;
  border-radius: 999px !important;
  position: relative !important;
  overflow: hidden !important;
  background: rgba(255,255,255,0.22) !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.08) !important;
}

.hero__arrowrow .wave::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  background: linear-gradient(
    90deg,
    rgba(255,255,255,0.10) 0%,
    rgba(255,255,255,0.18) 20%,
    rgba(255,255,255,0.95) 50%,
    rgba(255,255,255,0.18) 80%,
    rgba(255,255,255,0.10) 100%
  ) !important;
  width: 45% !important;
  transform: translateX(-140%) !important;
  animation: hero-wave-shimmer 2.4s ease-in-out infinite !important;
}

@keyframes hero-wave-shimmer {
  0% {
    transform: translateX(-140%) !important;
  }
  100% {
    transform: translateX(320%) !important;
  }
}


/* ===== Moving question mark background ===== */

body {
  position: relative;
  overflow-x: hidden;
}

/* layer 1 */
body::before {
  content: "?   ?   ?   ?   ?   ?   ?";
  position: fixed;
  top: 10%;
  left: 0;
  width: 200%;
  font-size: clamp(60px, 8vw, 120px);
  letter-spacing: 1.2rem;
  color: rgba(100,116,139,0.08);
  white-space: nowrap;
  animation: qmove-left 30s linear infinite;
  pointer-events: none;
  z-index: 0;
}

/* layer 2 */
body::after {
  content: "?   ?   ?   ?   ?   ?";
  position: fixed;
  bottom: 10%;
  left: -50%;
  width: 200%;
  font-size: clamp(50px, 7vw, 110px);
  letter-spacing: 1rem;
  color: rgba(100,116,139,0.06);
  white-space: nowrap;
  animation: qmove-right 40s linear infinite;
  pointer-events: none;
  z-index: 0;
}

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

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

/* keep content above */
main, .wrap, .page, .site-shell {
  position: relative;
  z-index: 1;
}


/* ===== FIXED moving question mark background ===== */

html,
body {
  overflow-x: hidden !important;
}

body {
  position: relative !important;
  background-color: #ffffff !important;
}

/* force animated floating marks */
body::before,
body::after {
  position: fixed !important;
  display: block !important;
  white-space: nowrap !important;
  pointer-events: none !important;
  font-weight: 800 !important;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Helvetica Neue", Arial, sans-serif !important;
  line-height: 1 !important;
  will-change: transform !important;
  z-index: 0 !important;
}

body::before {
  content: "?   ?   ?   ?   ?   ?   ?   ?   ?   ?   ?   ?" !important;
  top: 8vh !important;
  left: -40vw !important;
  font-size: clamp(64px, 9vw, 132px) !important;
  letter-spacing: 1rem !important;
  color: rgba(100, 116, 139, 0.10) !important;
  animation: floatingQMarksLeft 22s linear infinite !important;
  transform: translate3d(0,0,0) rotate(-8deg) !important;
}

body::after {
  content: "?   ?   ?   ?   ?   ?   ?   ?   ?   ?   ?" !important;
  bottom: 8vh !important;
  left: -30vw !important;
  font-size: clamp(56px, 8vw, 118px) !important;
  letter-spacing: 0.9rem !important;
  color: rgba(100, 116, 139, 0.07) !important;
  animation: floatingQMarksRight 28s linear infinite !important;
  transform: translate3d(0,0,0) rotate(9deg) !important;
}

@keyframes floatingQMarksLeft {
  0%   { transform: translate3d(0,0,0) rotate(-8deg); }
  100% { transform: translate3d(-28vw,0,0) rotate(-8deg); }
}

@keyframes floatingQMarksRight {
  0%   { transform: translate3d(0,0,0) rotate(9deg); }
  100% { transform: translate3d(28vw,0,0) rotate(9deg); }
}

/* keep site content above the background marks */
main,
.wrap,
.page,
.site-shell,
.site,
.page-wrap,
.topbar,
.hero,
section,
.site-footer {
  position: relative !important;
  z-index: 1 !important;
}



/* ===== HARD FIX: moving background question marks via real DOM elements ===== */

html, body {
  overflow-x: hidden !important;
  background: #ffffff !important;
}

body {
  position: relative !important;
}

.bg-qmarks {
  position: fixed !important;
  inset: 0 !important;
  pointer-events: none !important;
  overflow: hidden !important;
  z-index: 0 !important;
}

.bg-qmarks__row {
  position: absolute !important;
  white-space: nowrap !important;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Helvetica Neue", Arial, sans-serif !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  user-select: none !important;
  will-change: transform !important;
}

.bg-qmarks__row--one {
  top: 10vh !important;
  left: -35vw !important;
  font-size: clamp(64px, 9vw, 132px) !important;
  letter-spacing: 0.6rem !important;
  color: rgba(100,116,139,0.10) !important;
  transform: rotate(-8deg) !important;
  animation: qmarksDriftLeft 18s linear infinite !important;
}

.bg-qmarks__row--two {
  bottom: 10vh !important;
  left: -20vw !important;
  font-size: clamp(56px, 8vw, 118px) !important;
  letter-spacing: 0.5rem !important;
  color: rgba(100,116,139,0.07) !important;
  transform: rotate(8deg) !important;
  animation: qmarksDriftRight 24s linear infinite !important;
}

@keyframes qmarksDriftLeft {
  0%   { transform: translateX(0) rotate(-8deg); }
  100% { transform: translateX(-30vw) rotate(-8deg); }
}

@keyframes qmarksDriftRight {
  0%   { transform: translateX(0) rotate(8deg); }
  100% { transform: translateX(30vw) rotate(8deg); }
}

/* keep main site content above the animated background */
.topbar,
main,
.wrap,
.page,
.site,
.site-shell,
.page-wrap,
.hero,
section,
.site-footer {
  position: relative !important;
  z-index: 1 !important;
}




/* ===== Per-page themed white video backgrounds ===== */
html, body {
  background: #ffffff !important;
}

body {
  position: relative !important;
  overflow-x: hidden !important;
}

.bg-video-wrap {
  position: fixed !important;
  inset: 0 !important;
  z-index: 0 !important;
  overflow: hidden !important;
  background: #ffffff !important;
}

.bg-video {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  opacity: 0.22 !important;
  filter: brightness(1.18) contrast(0.88) saturate(0.80) blur(0px) !important;
  transform: scale(1.02) !important;
}

.bg-video-wrap::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  background:
    radial-gradient(circle at top left, rgba(255,255,255,0.68), transparent 30%),
    linear-gradient(180deg, rgba(255,255,255,0.78) 0%, rgba(255,255,255,0.88) 55%, rgba(255,255,255,0.94) 100%) !important;
  z-index: 1 !important;
  pointer-events: none !important;
}

.bg-video-wrap::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 2 !important;
  pointer-events: none !important;
  mix-blend-mode: normal !important;
}

/* Keep all site content above the background video */
.topbar,
main,
.wrap,
.page,
.site,
.site-shell,
.page-wrap,
.hero,
section,
.site-footer {
  position: relative !important;
  z-index: 3 !important;
}

/* Per-page subtle colour wash so each page feels themed while staying white-first */
body.page-home .bg-video-wrap::after {
  background: rgba(124, 58, 237, 0.05) !important;
}

body.page-pubquiz .bg-video-wrap::after {
  background: rgba(6, 182, 212, 0.05) !important;
}

body.page-weddings .bg-video-wrap::after {
  background: rgba(236, 72, 153, 0.05) !important;
}

body.page-fundraiser .bg-video-wrap::after {
  background: rgba(16, 185, 129, 0.05) !important;
}

body.page-events .bg-video-wrap::after {
  background: rgba(249, 115, 22, 0.05) !important;
}

body.page-booking .bg-video-wrap::after {
  background: rgba(29, 78, 216, 0.05) !important;
}

body.page-community .bg-video-wrap::after {
  background: rgba(71, 85, 105, 0.05) !important;
}

/* Graceful fallback when no video loads */
body.page-home .bg-video-wrap {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.92), rgba(255,255,255,0.96)),
    radial-gradient(circle at 20% 20%, rgba(124,58,237,0.08), transparent 28%),
    #ffffff !important;
}
body.page-pubquiz .bg-video-wrap {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.92), rgba(255,255,255,0.96)),
    radial-gradient(circle at 20% 20%, rgba(6,182,212,0.08), transparent 28%),
    #ffffff !important;
}
body.page-weddings .bg-video-wrap {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.92), rgba(255,255,255,0.96)),
    radial-gradient(circle at 20% 20%, rgba(236,72,153,0.08), transparent 28%),
    #ffffff !important;
}
body.page-fundraiser .bg-video-wrap {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.92), rgba(255,255,255,0.96)),
    radial-gradient(circle at 20% 20%, rgba(16,185,129,0.08), transparent 28%),
    #ffffff !important;
}
body.page-events .bg-video-wrap {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.92), rgba(255,255,255,0.96)),
    radial-gradient(circle at 20% 20%, rgba(249,115,22,0.08), transparent 28%),
    #ffffff !important;
}
body.page-booking .bg-video-wrap {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.92), rgba(255,255,255,0.96)),
    radial-gradient(circle at 20% 20%, rgba(29,78,216,0.08), transparent 28%),
    #ffffff !important;
}
body.page-community .bg-video-wrap {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.92), rgba(255,255,255,0.96)),
    radial-gradient(circle at 20% 20%, rgba(71,85,105,0.08), transparent 28%),
    #ffffff !important;
}



/* ===== FIX: re-enable background videos ===== */
.bg-video-wrap {
  display: block !important;
  position: fixed !important;
  inset: 0 !important;
  z-index: 0 !important;
  overflow: hidden !important;
  background: #ffffff !important;
  opacity: 1 !important;
}

.bg-video {
  display: block !important;
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  opacity: 0.22 !important;
  filter: brightness(1.18) contrast(0.88) saturate(0.80) !important;
  pointer-events: none !important;
}

.bg-video-wrap::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 1 !important;
  pointer-events: none !important;
  background:
    radial-gradient(circle at top left, rgba(255,255,255,0.68), transparent 30%),
    linear-gradient(180deg, rgba(255,255,255,0.78) 0%, rgba(255,255,255,0.88) 55%, rgba(255,255,255,0.94) 100%) !important;
}

/* keep content above video */
.topbar,
main,
.wrap,
.page,
.site,
.site-shell,
.page-wrap,
.hero,
section,
.site-footer {
  position: relative !important;
  z-index: 3 !important;
}



/* ===== Remove white overlay from video ===== */

.bg-video-wrap::before {
  display: none !important;
}

.bg-video-wrap::after {
  display: none !important;
}



/* ===== Make video fully solid (remove transparency) ===== */

.bg-video {
  opacity: 1 !important;
  filter: none !important;
}



/* ===== Smart overlay only behind content ===== */

/* keep video fully visible */
.bg-video {
  opacity: 1 !important;
}

/* add subtle readability layer ONLY on key content blocks */
.hero,
.card,
.cta-strip,
.premium-booking,
.quizcard,
.pricecard,
.addon,
.addons,
.callout {
  position: relative !important;
  z-index: 2 !important;
}

/* glass-style backdrop behind content */
.hero::before,
.card::before,
.cta-strip::before,
.premium-booking::before,
.quizcard::before,
.pricecard::before,
.addon::before,
.addons::before,
.callout::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(255,255,255,0.12);
  backdrop-filter: blur(10px) saturate(120%);
  -webkit-backdrop-filter: blur(10px) saturate(120%);
  border-radius: inherit;
  z-index: -1;
}

/* stronger readability for hero text only */
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    rgba(0,0,0,0.25),
    rgba(0,0,0,0.35)
  );
  z-index: -1;
}



/* ===== FINAL VIDEO ONLY BACKGROUND FIX ===== */
html, body {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
}

body::before, body::after {
  display:none !important;
  content:none !important;
}

.bg-qmarks, .bg-qmarks__row, .page-bg, .page-background, #sparkles {
  display:none !important;
}

.bg-video-wrap {
  position: fixed !important;
  inset:0 !important;
  z-index:0 !important;
  background: transparent !important;
}

.bg-video {
  position:absolute !important;
  inset:0 !important;
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
  opacity:1 !important;
  filter:none !important;
}

.hero, .topbar, .wrap, .page, section {
  background: transparent !important;
}

.topbar, main, .hero, section, .site-footer {
  position: relative;
  z-index:2;
}


/* ===== STRIP ALL REMAINING BACKGROUND LAYERS ===== */

.hero,
.topbar,
.wrap,
.page,
section,
.site,
.site-shell,
.page-wrap,
.site-footer,
.nav,
.header,
footer {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
}

.hero::before,
.hero::after,
.section::before,
.section::after,
.topbar::before,
.topbar::after,
.nav::before,
.nav::after {
  display: none !important;
  content: none !important;
}

* {
  background-image: none !important;
}

/* ===== FINAL VIDEO ONLY BACKGROUND CLEAN ===== */

html, body {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
}

body::before, body::after {
  display:none !important;
  content:none !important;
}

.bg-qmarks, .bg-qmarks__row, .page-bg, .page-background, #sparkles {
  display:none !important;
}

.bg-video-wrap {
  position: fixed !important;
  inset:0 !important;
  z-index:0 !important;
  background: transparent !important;
}

.bg-video {
  position:absolute !important;
  inset:0 !important;
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
  opacity:1 !important;
  filter:none !important;
  background: transparent !important;
}

.hero,
.topbar,
.wrap,
.page,
section,
.site,
.site-shell,
.page-wrap,
.site-footer,
.nav,
.header,
footer {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
}

.hero::before,
.hero::after,
.section::before,
.section::after,
.topbar::before,
.topbar::after,
.nav::before,
.nav::after {
  display: none !important;
  content: none !important;
}



/* ===== GLOBAL FIX: grey nav + grey footer + compact footer icons + hero shimmer ===== */

/* Top nav restored to grey across all pages */
.topbar,
header.topbar,
header,
.site-header {
  background: #2f2f2f !important;
  background-color: #2f2f2f !important;
  background-image: none !important;
  color: #ffffff !important;
  border-color: rgba(255,255,255,.10) !important;
}

.topbar::before,
.topbar::after,
header.topbar::before,
header.topbar::after,
header::before,
header::after {
  content: none !important;
  display: none !important;
}

.topbar a,
.topbar .nav-link,
.topbar .brand,
.topbar .brand * ,
.topbar .nav a,
.topbar .nav .nav-link,
.topbar .hero-btn,
.topbar .logo-wordmark {
  color: #ffffff !important;
}

.topbar .nav a:hover,
.topbar .nav .nav-link:hover {
  background: rgba(255,255,255,.10) !important;
  color: #ffffff !important;
}


/* Footer matches top nav grey across all pages */
.site-footer,
footer.site-footer,
footer {
  background: #2f2f2f !important;
  background-color: #2f2f2f !important;
  background-image: none !important;
  color: #ffffff !important;
  border-radius: 22px 22px 22px 22px !important;
  margin-top: -65px !important;
  max-width: 1076px;
  left: 50%;
  right: auto;
  transform: translateX(-50%);
  justify-content:center;
}

.site-footer::before,
.site-footer::after,
footer.site-footer::before,
footer.site-footer::after,
footer::before,
footer::after {
  content: none !important;
  display: none !important;
}

.site-footer__inner {
  max-width: 1076px !important;
  margin: 0 auto !important;
  padding: 8px 16px 6px !important;
  text-align: center !important;
}

.site-footer__inner p {
  margin: 4px 0 0 !important;
  color: #ffffff !important;
}

/* Footer social icons */
.footer-social {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 12px !important;
  margin: 0 0 4px !important;
}

.footer-social a {
  width: 75px !important;
  height: 30px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 999px !important;
  background: rgba(255,255,255,.10) !important;
  color: #ffffff !important;
  text-decoration: none !important;
  transition: background-color .18s ease, box-shadow .18s ease, transform .18s ease !important;
}

.footer-social a:hover {
  transform: translateY(-1px) !important;
}

.footer-social a[aria-label="Facebook"]:hover {
  background: rgba(24,119,242,.18) !important;
  box-shadow: 0 0 0 1px rgba(24,119,242,.38), 0 0 12px rgba(24,119,242,.35) !important;
}

.footer-social a[aria-label="Instagram"]:hover {
  background: rgba(214,41,118,.18) !important;
  box-shadow: 0 0 0 1px rgba(214,41,118,.38), 0 0 12px rgba(214,41,118,.35) !important;
}

.footer-social a[aria-label="X"]:hover,
.footer-social a[aria-label="Twitter"]:hover {
  background: rgba(255,255,255,.16) !important;
  box-shadow: 0 0 0 1px rgba(255,255,255,.28), 0 0 12px rgba(255,255,255,.25) !important;
}

.footer-social a[aria-label="LinkedIn"]:hover {
  background: rgba(10,102,194,.18) !important;
  box-shadow: 0 0 0 1px rgba(10,102,194,.38), 0 0 12px rgba(10,102,194,.35) !important;
}

.footer-social svg {
  width: 16px !important;
  height: 16px !important;
  display: block !important;
  fill: currentColor !important;
}

/* Hero shimmer / wave across all pages */
.hero__arrowrow {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
}

.hero__arrowrow .wave,
.wave {
  flex: 1 1 auto !important;
  height: 6px !important;
  min-height: 6px !important;
  display: block !important;
  position: relative !important;
  overflow: hidden !important;
  border-radius: 999px !important;
  opacity: 1 !important;
  background: linear-gradient(
    90deg,
    rgba(255,255,255,.10) 0%,
    rgba(255,255,255,.22) 50%,
    rgba(255,255,255,.10) 100%
  ) !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.10) !important;
}

.hero__arrowrow .wave::before,
.wave::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 auto 0 -45% !important;
  width: 45% !important;
  border-radius: 999px !important;
  background: linear-gradient(
    90deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,.10) 25%,
    rgba(255,255,255,.92) 50%,
    rgba(255,255,255,.10) 75%,
    rgba(255,255,255,0) 100%
  ) !important;
  animation: qc-hero-shimmer 2.1s linear infinite !important;
}

@keyframes qc-hero-shimmer {
  0% { left: -45%; }
  100% { left: 100%; }
}

/* reveal when the page is interacted with */
body:hover .float-nav,
body:focus-within .float-nav,
.float-nav:hover,
.float-nav:focus-within{
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}

/* keep hidden on touch until JS adds .is-visible */
.float-nav.is-visible{
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.float-nav__btn{
  width: 42px;
  height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 999px;
  background: rgba(255,255,255,.10);
  color: #ffffff;
  cursor: pointer;
  transition: background-color .18s ease, box-shadow .18s ease, transform .18s ease;
  padding: 0;
}

.float-nav__btn:hover,
.float-nav__btn:focus-visible{
  background: rgba(255,255,255,.18);
  box-shadow: 0 0 0 1px rgba(255,255,255,.16), 0 8px 20px rgba(0,0,0,.18);
  transform: translateY(-1px);
  outline: none;
}

.float-nav__btn svg{
  width: 18px;
  height: 18px;
  stroke: currentColor;
  stroke-width: 2.2;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  display: block;
}

@media (max-width: 640px){
  .float-nav{
    bottom: 16px;
    padding: 7px;
    gap: 8px;
  }
  .float-nav__btn{
    width: 40px;
    height: 40px;
  }
}




/* Book Quiz overlay button right side */
.book-quiz-overlay{
 
  font-family: 'MuseoModerno', sans-serif;
  position: fixed;
  right: auto;
  left: 18px;
  bottom: 18px;
  height: 26px;
  transform: none;
  z-index: 1200;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 108px;
  padding: 8px 8px;
  border-radius: 12px;
  background: #2563eb;
  color: #FFFFFF;
  text-decoration: none;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: .01em;
  box-shadow: 0 10px 30px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.08);
  transition: background-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.book-quiz-overlay:hover{
  background: #3a3a3a;
  box-shadow: 0 14px 34px rgba(0,0,0,.24), inset 0 1px 0 rgba(255,255,255,.10);
  transform: translateY(-2px);
}

.book-quiz-overlay:focus-visible{
  outline: 2px solid rgba(255,255,255,.6);
  outline-offset: 3px;
}

@media (max-width: 640px){
  .float-nav{
    bottom: 16px;
    gap: 8px;
  }
  .float-nav__btn{
    width: 40px;
    height: 40px;
  }
  .book-quiz-overlay{
    right: 14px;
    bottom: 14px;
    min-width: 138px;
    padding: 11px 16px;
    font-size: 14px;
  }
}




/* Transparent buttons */
.float-nav__btn{
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: #ffffff;
  cursor: pointer;
  transition: background-color .18s ease, transform .18s ease;
  padding: 0;
}

.float-nav__btn:hover,
.float-nav__btn:focus-visible{
  background: rgba(255,255,255,.12);
  transform: translateY(-1px);
  outline: none;
}

.float-nav__btn svg{
  width: 20px;
  height: 20px;
  stroke: currentColor;
  stroke-width: 2.2;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  display: block;
}

@media (max-width: 640px){
  .float-nav{
    bottom: 16px;
  }
  .float-nav__btn{
    width: 42px;
    height: 42px;
  }
}






/* Float nav FINAL center + stronger visibility */
.float-nav{
  position: fixed;
  left: 95%;
  bottom: 22px;
  transform: translate(-95%, 10px); /* true center fix */
  z-index: 1300;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .28s ease, transform .28s ease;
}

.float-nav.is-visible{
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translate(-50%, 0); /* ensures perfect centering */
}

.float-nav__btn{
  width: 30px;
  height: 30px;
  display: inline-flex;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(47,47,47,.92); /* less transparent */
  color: #ffffff;
  cursor: pointer;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
  box-shadow: 0 10px 26px rgba(0,0,0,.22);
}

/* subtle animation */
.float-nav__btn{
  animation: float-nav-bob 2.6s ease-in-out infinite;
}
.float-nav__btn:nth-child(2){
  animation-delay:.2s;
}

.float-nav__btn:hover{
  transform: translateY(-2px);
  background: #3a3a3a;
}

.float-nav__btn svg{
  width:20px;
  height:20px;
}

@keyframes float-nav-bob{
  0%,100%{transform:translateY(0);}
  50%{transform:translateY(-2px);}
}



/* FINAL OVERRIDE: float nav buttons side by side across all pages */
.float-nav{
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 12px !important;
}

.float-nav .float-nav__btn{
  display: inline-flex !important;
}


/* ===== Burger menu transplant fix ===== */
.topbar,
header.topbar{
  position: sticky !important;
  top: 4px !important;
  z-index: 4000 !important;
  isolation: isolate;
  overflow: visible !important;
}

@media (max-width: 860px){
  .topbar{
    align-items: center;
  }

  .burger{
    display:flex;
    align-items:center;
    justify-content:center;
    width:40px;
    height:40px;
    margin-left:auto;
    position:relative;
    z-index:4102;
  }

  .burger__bar{
    width:24px;
    height:3px;
    margin:0;
    position:absolute;
    left:50%;
    top:50%;
    transform:translate(-50%, -50%);
    transition: background-color .2s ease, transform .2s ease, opacity .2s ease;
    background:#ffffff !important;
  }

  .burger__bar:nth-child(1){ transform:translate(-50%, calc(-50% - 8px)); }
  .burger__bar:nth-child(2){ transform:translate(-50%, -50%); }
  .burger__bar:nth-child(3){ transform:translate(-50%, calc(-50% + 8px)); }

  .burger.is-open .burger__bar:nth-child(1){ transform:translate(-50%, -50%) rotate(45deg); }
  .burger.is-open .burger__bar:nth-child(2){ opacity:0; }
  .burger.is-open .burger__bar:nth-child(3){ transform:translate(-50%, -50%) rotate(-45deg); }

  .topbar .nav,
  .topbar nav#siteMenu{
    display:none;
    position:absolute;
    top:calc(100% + 8px);
    left:0;
    right:0;
    width:100%;
    min-width:0;
    flex-direction:column;
    align-items:flex-start;
    gap:0;
    padding:18px 22px 20px;
    margin:0;
    border-radius:18px;
    background:#000000 !important;
    border:1px solid rgba(255,255,255,.12);
    box-shadow:0 16px 40px rgba(0,0,0,.35);
    z-index:4101;
  }

  body.menu-open .topbar .nav,
  body.menu-open .topbar nav#siteMenu{
    display:flex !important;
  }

  .topbar .nav a,
  .topbar .nav .nav-link,
  .topbar nav#siteMenu a{
    display:block;
    width:100%;
    padding:14px 0;
    border-radius:0;
    font-size:15px;
    line-height:1.2;
    color:#ffffff !important;
    border-bottom:1px solid rgba(255,255,255,.08);
  }

  .topbar .nav a:last-child,
  .topbar .nav .nav-link:last-child,
  .topbar nav#siteMenu a:last-child{
    border-bottom:0;
  }

  .topbar .nav a:hover,
  .topbar .nav .nav-link:hover,
  .topbar nav#siteMenu a:hover{
    background:transparent !important;
    color:#7dd3fc !important;
    transform:none !important;
    padding-left:12px;
  }
}


/* Responsive logo scaling */
.site-logo img {
  max-height: 48px;
  width: auto;
}

@media (max-width: 768px) {
  .site-logo img {
    max-height: 40px;
  }
}

@media (max-width: 480px) {
  .site-logo img {
    max-height: 32px;
  }
}

@media (max-width: 360px) {
  .site-logo img {
    max-height: 26px;
  }
}

/* Header layout improvements */
.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.burger {
  flex-shrink: 0;
}

.site-logo {
  flex: 1;
  min-width: 0;
}


/* Logo swap for mobile */
.logo-icon { display: none; }

@media (max-width: 480px) {
  .logo-full { display: none !important; }
  .logo-icon {
    display: block;
    height: 28px;
    width: auto;
  }
}



/* ===== Final mobile/right-edge fix: float nav + Book Quiz button ===== */
.float-nav{
  position: fixed !important;
  left: 50% !important;
  right: auto !important;
  bottom: 18px !important;
  transform: translateX(-50%) translateY(8px) !important;
  width: auto !important;
  max-width: calc(100vw - 32px) !important;
  padding: 0 !important;
  box-sizing: border-box !important;
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  z-index: 1300 !important;
}

.float-nav.is-visible,
body:hover .float-nav,
body:focus-within .float-nav,
.float-nav:hover,
.float-nav:focus-within{
  transform: translateX(-50%) translateY(0) !important;
}

.float-nav .float-nav__btn,
.float-nav__btn{
  width: 44px !important;
  height: 44px !important;
  min-width: 44px !important;
  min-height: 44px !important;
  flex: 0 0 44px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 12px !important;
  box-sizing: border-box !important;
}

.float-nav .float-nav__btn svg,
.float-nav__btn svg{
  width: 20px !important;
  height: 20px !important;
  display: block !important;
}

.book-quiz-overlay{
  position: fixed !important;
  left: 18px !important;
  right: auto !important;
  bottom: 18px !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: min(160px, calc(100vw - 96px)) !important;
  padding: 10px 16px !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  text-align: center !important;
  box-sizing: border-box !important;
}

@media (max-width: 640px){
  .float-nav{
    left: 50% !important;
    right: auto !important;
    bottom: 14px !important;
    gap: 8px !important;
    max-width: calc(100vw - 24px) !important;
  }

  .float-nav .float-nav__btn,
  .float-nav__btn{
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    min-height: 40px !important;
    flex-basis: 40px !important;
  }

  .book-quiz-overlay{
    left: 14px !important;
    right: auto !important;
    bottom: 14px !important;
    max-width: min(150px, calc(100vw - 88px)) !important;
    padding: 10px 14px !important;
    font-size: 14px !important;
  }
}

@media (max-width: 420px){
  .book-quiz-overlay{
    max-width: 132px !important;
    padding: 9px 12px !important;
    font-size: 13px !important;
  }
}



/* Align float nav to right */
.float-nav{
  left: auto !important;
  right: 18px !important;
  transform: translateY(8px) !important;
}

.float-nav.is-visible,
body:hover .float-nav,
body:focus-within .float-nav,
.float-nav:hover,
.float-nav:focus-within{
  transform: translateY(0) !important;
}

@media (max-width: 640px){
  .float-nav{
    right: 14px !important;
  }
}



/* Align float nav with burger menu edge and match arrow styling */
.float-nav{
  position: fixed !important;
  right: max(14px, env(safe-area-inset-right)) !important;
  left: auto !important;
  bottom: 18px !important;
  transform: translateY(8px) !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  width: auto !important;
  max-width: calc(100vw - 28px) !important;
  z-index: 1300 !important;
}

.float-nav.is-visible,
body:hover .float-nav,
body:focus-within .float-nav,
.float-nav:hover,
.float-nav:focus-within{
  transform: translateY(0) !important;
}

.float-nav .float-nav__btn,
.float-nav__btn{
  width: 44px !important;
  height: 44px !important;
  min-width: 44px !important;
  min-height: 44px !important;
  flex: 0 0 44px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  line-height: 1 !important;
  border-radius: 12px !important;
  box-sizing: border-box !important;
}

.float-nav .float-nav__btn svg,
.float-nav__btn svg{
  width: 20px !important;
  height: 20px !important;
  display: block !important;
  pointer-events: none !important;
}

@media (max-width: 640px){
  .float-nav{
    right: max(12px, env(safe-area-inset-right)) !important;
    bottom: 14px !important;
    gap: 8px !important;
  }

  .float-nav .float-nav__btn,
  .float-nav__btn{
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    min-height: 40px !important;
    flex-basis: 40px !important;
  }

  .float-nav .float-nav__btn svg,
  .float-nav__btn svg{
    width: 18px !important;
    height: 18px !important;
  }
}



/* Bold matching arrow icon sizing */
.float-nav .float-nav__btn svg,
.float-nav__btn svg{
  width: 22px !important;
  height: 22px !important;
}



/* Force the top/down nav icons to render identically */
.float-nav__btn{
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.float-nav__btn svg{
  width: 20px !important;
  height: 20px !important;
  display: block !important;
  flex: 0 0 auto !important;
}

.float-nav__btn svg path{
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 2.8 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
}




/* ==== Force identical float-nav icons/buttons ==== */
.float-nav{
  position: fixed !important;
  right: max(14px, env(safe-area-inset-right)) !important;
  left: auto !important;
  bottom: 18px !important;
  width: auto !important;
  max-width: calc(100vw - 28px) !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  z-index: 1300 !important;
  transform: translateY(0) !important;
}

.float-nav__btn,
.float-nav .float-nav__btn{
  appearance: none !important;
  -webkit-appearance: none !important;
  width: 44px !important;
  height: 44px !important;
  min-width: 44px !important;
  min-height: 44px !important;
  flex: 0 0 44px !important;
  padding: 0 !important;
  margin: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1 !important;
  box-sizing: border-box !important;
  border-radius: 12px !important;
}

.float-nav__icon,
.float-nav__btn svg,
.float-nav .float-nav__btn svg{
  width: 22px !important;
  height: 22px !important;
  min-width: 22px !important;
  min-height: 22px !important;
  display: block !important;
  flex: 0 0 22px !important;
  transform: none !important;
}

.float-nav__btn svg *,
.float-nav .float-nav__btn svg *{
  fill: currentColor !important;
  stroke: none !important;
}

@media (max-width: 640px){
  .float-nav{
    right: max(12px, env(safe-area-inset-right)) !important;
    bottom: 14px !important;
    gap: 8px !important;
  }
  .float-nav__btn,
  .float-nav .float-nav__btn{
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    min-height: 40px !important;
    flex-basis: 40px !important;
  }
  .float-nav__icon,
  .float-nav__btn svg,
  .float-nav .float-nav__btn svg{
    width: 20px !important;
    height: 20px !important;
    min-width: 20px !important;
    min-height: 20px !important;
    flex-basis: 20px !important;
  }
}


/* === Float nav final override: match rethink trivia === */
.float-nav{
  position: fixed !important;
  right: 16px !important;
  left: auto !important;
  bottom: 16px !important;
  transform: none !important;
  z-index: 40 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  justify-content: flex-start !important;
  gap: 10px !important;
  width: auto !important;
  max-width: none !important;
  padding: 0 !important;
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.float-nav__btn,
.float-nav .float-nav__btn{
  width: 40px !important;
  height: 22px !important;
  min-width: 40px !important;
  min-height: 22px !important;
  flex: 0 0 auto !important;
  padding: 0 !important;
  margin: 0 !important;
  border-radius: 12px !important;
  border: 1px solid rgba(255,255,255,.18) !important;
  background: rgba(255,255,255,.92) !important;
  color: #111827 !important;
  box-shadow: var(--shadow-sm) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1 !important;
  box-sizing: border-box !important;
  cursor: pointer !important;
  transition: transform .14s ease, background .14s ease, opacity .2s ease !important;
}

.float-nav__btn:hover,
.float-nav__btn:focus-visible,
.float-nav .float-nav__btn:hover,
.float-nav .float-nav__btn:focus-visible{
  transform: translateY(-1px) !important;
  background: #fff !important;
  box-shadow: var(--shadow-sm) !important;
  outline: none !important;
}

.float-nav__btn[data-scroll="top"],
.float-nav .float-nav__btn[data-scroll="top"]{
  opacity: 0;
  pointer-events: none;
}

.float-nav.show-top .float-nav__btn[data-scroll="top"],
.float-nav.is-visible .float-nav__btn[data-scroll="top"]{
  opacity: 1;
  pointer-events: auto;
}

.float-nav__icon,
.float-nav__btn svg,
.float-nav .float-nav__btn svg{
  width: 22px !important;
  height: 22px !important;
  min-width: 22px !important;
  min-height: 22px !important;
  display: block !important;
  flex: 0 0 22px !important;
  transform: none !important;
}

.float-nav__btn[data-scroll="down"] svg,
.float-nav .float-nav__btn[data-scroll="down"] svg{
  transform: rotate(180deg) !important;
}

.float-nav__btn svg *,
.float-nav .float-nav__btn svg *{
  fill: currentColor !important;
  stroke: none !important;
}

body.page-home .float-nav{
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .25s ease, transform .25s ease, visibility .25s ease;
}

body.page-home .float-nav.is-visible{
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

body.page-home .float-nav__btn[data-scroll="top"]{
  opacity: 0;
  pointer-events: none;
}

body.page-home .float-nav.show-top .float-nav__btn[data-scroll="top"]{
  opacity: 1;
  pointer-events: auto;
}

body.page-home .float-nav__icon{
  width: 18px !important;
  height: 18px !important;
  min-width: 18px !important;
  min-height: 18px !important;
  flex-basis: 18px !important;
}

@media (max-width: 640px){
  .float-nav{
    right: 12px !important;
    bottom: 12px !important;
    flex-direction: row !important;
    align-items: center !important;
  }
}


/* =========================================================
   FINAL STABILITY FIX: top navigation + floating nav
   Keep this as the last block in style.css.
========================================================= */

/* Stop the active top-nav item changing size between pages */
.topbar .nav a,
.topbar .nav .nav-link,
.topbar a.nav-link{
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 36px !important;
  padding: 10px 10px !important;
  line-height: 1.2 !important;
  box-sizing: border-box !important;
  border: 0 !important;
}

.topbar .nav-link.active,
.topbar a.active{
  padding: 10px 10px !important;
  min-height: 36px !important;
  border: 0 !important;
  border-bottom: 0 !important;
  border-radius: 999px !important;
  transform: none !important;
}

.topbar .nav a:hover,
.topbar .nav .nav-link:hover{
  transform: none !important;
}

/* Desktop topbar width/placement consistency */
.topbar{
  width: calc(100% - 32px) !important;
  max-width: 1100px !important;
  margin: 4px auto 0 !important;
  min-height: 76px !important;
  box-sizing: border-box !important;
}

/* Mobile menu: active/hover states must not alter item position */
@media (max-width: 860px){
  .topbar{
    width: calc(100% - 24px) !important;
    min-height: 64px !important;
  }

  .topbar .nav,
  .topbar nav#siteMenu{
    top: calc(100% + 8px) !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    transform: none !important;
  }

  .topbar .nav a,
  .topbar .nav .nav-link,
  .topbar nav#siteMenu a{
    display: block !important;
    width: 100% !important;
    min-height: 0 !important;
    padding: 14px 0 !important;
    border-radius: 0 !important;
    transform: none !important;
  }

  .topbar .nav a:hover,
  .topbar .nav .nav-link:hover,
  .topbar nav#siteMenu a:hover{
    padding-left: 0 !important;
    transform: none !important;
  }
}

/* Single source of truth for the floating scroll nav */
.float-nav{
  position: fixed !important;
  right: 16px !important;
  left: auto !important;
  bottom: 16px !important;
  transform: none !important;
  z-index: 5000 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  width: auto !important;
  max-width: none !important;
  padding: 0 !important;
  margin: 0 !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  transition: none !important;
}

.float-nav.is-visible,
.float-nav.show-top,
body.page-home .float-nav,
body.page-home .float-nav.is-visible,
body:hover .float-nav,
body:focus-within .float-nav,
.float-nav:hover,
.float-nav:focus-within{
  right: 16px !important;
  left: auto !important;
  bottom: 16px !important;
  transform: none !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

.float-nav__btn,
.float-nav .float-nav__btn{
  appearance: none !important;
  -webkit-appearance: none !important;
  width: 40px !important;
  height: 22px !important;
  min-width: 40px !important;
  min-height: 22px !important;
  flex: 0 0 auto !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  margin: 0 !important;
  border-radius: 12px !important;
  border: 1px solid rgba(255,255,255,.18) !important;
  background: rgba(255,255,255,.92) !important;
  color: #111827 !important;
  box-shadow: var(--shadow-sm) !important;
  line-height: 1 !important;
  box-sizing: border-box !important;
  cursor: pointer !important;
  animation: none !important;
  transition: background .14s ease, transform .14s ease !important;
}

.float-nav__btn:hover,
.float-nav__btn:focus-visible{
  transform: translateY(-1px) !important;
  background: #fff !important;
  outline: none !important;
}

.float-nav__icon,
.float-nav__btn svg,
.float-nav .float-nav__btn svg{
  width: 22px !important;
  height: 22px !important;
  min-width: 22px !important;
  min-height: 22px !important;
  display: block !important;
  flex: 0 0 22px !important;
}

.float-nav__btn[data-scroll="down"] svg{
  transform: rotate(180deg) !important;
}

.float-nav__btn[data-scroll="top"]{
  opacity: 1 !important;
  pointer-events: auto !important;
}

@media (max-width: 640px){
  .float-nav,
  .float-nav.is-visible,
  .float-nav.show-top,
  body.page-home .float-nav,
  body.page-home .float-nav.is-visible,
  body:hover .float-nav,
  body:focus-within .float-nav,
  .float-nav:hover,
  .float-nav:focus-within{
    right: 12px !important;
    bottom: 12px !important;
    left: auto !important;
    transform: none !important;
    flex-direction: column !important;
  }
}

/* =========================================================
   FINAL FIX: full-width sticky topbar + always-available burger
   Added 2026-05
========================================================= */

html,
body{
  margin: 0 !important;
  padding: 0 !important;
  width: 100% !important;
}

/* Make the header background fill the full viewport width and stay visible while scrolling */
.topbar,
header.topbar{
  position: sticky !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  min-height: 76px !important;
  padding: 6px clamp(14px, 3vw, 32px) !important;
  border-radius: 0 !important;
  box-sizing: border-box !important;
  z-index: 10000 !important;
  overflow: visible !important;

  background: #2f2f2f !important;
  background-color: #2f2f2f !important;
  background-image: none !important;
  box-shadow: 0 8px 30px rgba(0,0,0,.22) !important;
}

/* Keep logo and desktop links comfortably aligned inside the full-width bar */
.topbar .brand,
header.topbar .brand{
  flex: 0 0 auto !important;
}

.topbar .nav,
header.topbar .nav{
  margin-left: auto !important;
}

/* Burger must stay tappable above all page/video/hero layers */
.burger,
.topbar .burger,
header.topbar .burger{
  position: relative !important;
  z-index: 10002 !important;
  flex-shrink: 0 !important;
}

/* Mobile menu drops from the sticky full-width topbar */
@media (max-width: 860px){
  .topbar,
  header.topbar{
    min-height: 64px !important;
    padding: 6px 14px !important;
  }

  .topbar .nav,
  .topbar nav#siteMenu,
  header.topbar .nav,
  header.topbar nav#siteMenu{
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    border-radius: 0 0 18px 18px !important;
    z-index: 10001 !important;
    background: #000000 !important;
    box-shadow: 0 16px 40px rgba(0,0,0,.35) !important;
  }

  body.menu-open .topbar .nav,
  body.menu-open .topbar nav#siteMenu,
  body.menu-open header.topbar .nav,
  body.menu-open header.topbar nav#siteMenu{
    display: flex !important;
  }
}


/* =========================================================
   FINAL OVERRIDE: true full-width topbar + stable right edge
   Added after page comparison fix
========================================================= */

html,
body{
  margin: 0 !important;
  padding: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  overflow-x: hidden !important;
}

body{
  position: relative !important;
}

/* The topbar itself remains full-width and sticky. */
.topbar,
header.topbar{
  position: sticky !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 6px clamp(14px, 2.4vw, 28px) !important;
  min-height: 76px !important;
  box-sizing: border-box !important;
  border-radius: 0 !important;
  overflow: visible !important;
  z-index: 10000 !important;

  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: clamp(10px, 1.5vw, 18px) !important;

  background: #2f2f2f !important;
  background-color: #2f2f2f !important;
  background-image: none !important;
  box-shadow: 0 8px 30px rgba(0,0,0,.22) !important;
}

/* Force the grey bar to paint edge-to-edge even if a browser treats the header as constrained. */
.topbar::before,
header.topbar::before{
  content: "" !important;
  display: block !important;
  position: absolute !important;
  top: 0 !important;
  bottom: 0 !important;
  left: 50% !important;
  width: 100vw !important;
  transform: translateX(-50%) !important;
  background: #2f2f2f !important;
  z-index: -1 !important;
  pointer-events: none !important;
}

.topbar::after,
header.topbar::after{
  content: none !important;
  display: none !important;
}

.topbar .brand,
header.topbar .brand{
  flex: 0 0 auto !important;
  min-width: 0 !important;
  position: relative !important;
  z-index: 1 !important;
}

.topbar .logo-img,
header.topbar .logo-img{
  max-width: min(220px, 42vw) !important;
  height: 60px !important;
  object-fit: contain !important;
}

.topbar .nav,
header.topbar .nav{
  flex: 1 1 auto !important;
  min-width: 0 !important;
  max-width: 100% !important;
  margin-left: auto !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: clamp(6px, 1.1vw, 14px) !important;
  flex-wrap: nowrap !important;
  overflow: visible !important;
  position: relative !important;
  z-index: 1 !important;
}

.topbar .nav a,
.topbar .nav .nav-link,
header.topbar .nav a,
header.topbar .nav .nav-link{
  flex: 0 1 auto !important;
  white-space: nowrap !important;
  padding: 10px clamp(7px, .75vw, 10px) !important;
  font-size: clamp(11px, .95vw, 13px) !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
}

.burger,
.topbar .burger,
header.topbar .burger{
  flex: 0 0 40px !important;
  position: relative !important;
  z-index: 10002 !important;
  margin-left: auto !important;
}

/* Mobile/tablet: burger is always visible and the dropdown is full-width. */
@media (max-width: 860px){
  .topbar,
  header.topbar{
    min-height: 64px !important;
    padding: 6px 14px !important;
  }

  .topbar .logo-img,
  header.topbar .logo-img{
    height: 48px !important;
    max-width: calc(100vw - 90px) !important;
  }

  .burger,
  .topbar .burger,
  header.topbar .burger{
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  .topbar .nav,
  .topbar nav#siteMenu,
  header.topbar .nav,
  header.topbar nav#siteMenu{
    display: none !important;
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 16px 22px 18px !important;
    box-sizing: border-box !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    gap: 0 !important;
    border-radius: 0 0 18px 18px !important;
    background: #000000 !important;
    box-shadow: 0 16px 40px rgba(0,0,0,.35) !important;
    z-index: 10001 !important;
  }

  body.menu-open .topbar .nav,
  body.menu-open .topbar nav#siteMenu,
  body.menu-open header.topbar .nav,
  body.menu-open header.topbar nav#siteMenu{
    display: flex !important;
  }

  .topbar .nav a,
  .topbar .nav .nav-link,
  .topbar nav#siteMenu a,
  header.topbar .nav a,
  header.topbar .nav .nav-link,
  header.topbar nav#siteMenu a{
    width: 100% !important;
    display: block !important;
    padding: 14px 0 !important;
    font-size: 15px !important;
    line-height: 1.2 !important;
    border-radius: 0 !important;
    border-bottom: 1px solid rgba(255,255,255,.08) !important;
    transform: none !important;
  }
}

/* =========================================================
   FINAL SITE NAVBAR FIX — full-width fixed topbar, burger, active colours
   Added 2026-05-05. Keep this block last in style.css.
========================================================= */

html,
body{
  margin: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  overflow-x: hidden !important;
}

body{
  padding-top: 92px !important;
}

.topbar,
header.topbar{
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  max-width: none !important;
  min-height: 76px !important;
  margin: 0 !important;
  padding: 8px clamp(14px, 3vw, 32px) !important;
  box-sizing: border-box !important;
  border-radius: 0 !important;
  border: 0 !important;
  background: rgba(47,47,47,.96) !important;
  background-color: rgba(47,47,47,.96) !important;
  background-image: none !important;
  color: #ffffff !important;
  box-shadow: 0 8px 28px rgba(0,0,0,.22) !important;
  backdrop-filter: blur(16px) saturate(140%) !important;
  -webkit-backdrop-filter: blur(16px) saturate(140%) !important;
  z-index: 10000 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 16px !important;
  overflow: visible !important;
  isolation: isolate !important;
}

.topbar::before,
.topbar::after,
header.topbar::before,
header.topbar::after{
  content: none !important;
  display: none !important;
}

.topbar .brand,
.topbar .brand--image{
  flex: 0 0 auto !important;
  display: inline-flex !important;
  align-items: center !important;
  min-width: 0 !important;
  color: #ffffff !important;
  text-decoration: none !important;
}

.topbar .logo-wrap{
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.topbar .logo-img{
  display: block !important;
  width: auto !important;
  height: clamp(44px, 6vw, 60px) !important;
  max-height: 60px !important;
}

.topbar .nav,
.topbar nav#siteMenu{
  flex: 1 1 auto !important;
  min-width: 0 !important;
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 8px !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  position: static !important;
  width: auto !important;
  max-width: none !important;
}

.topbar .nav a,
.topbar .nav .nav-link,
.topbar nav#siteMenu a,
.topbar a.nav-link{
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 38px !important;
  padding: 9px 12px !important;
  border-radius: 999px !important;
  border: 0 !important;
  border-bottom: 0 !important;
  box-sizing: border-box !important;
  color: rgba(255,255,255,.92) !important;
  background: transparent !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  line-height: 1.15 !important;
  transform: none !important;
  opacity: 1 !important;
  transition: background-color .18s ease, color .18s ease, box-shadow .18s ease !important;
}

.topbar .nav a:hover,
.topbar .nav .nav-link:hover,
.topbar nav#siteMenu a:hover,
.topbar a.nav-link:hover{
  color: #ffffff !important;
  background: rgba(255,255,255,.12) !important;
  transform: none !important;
}

/* Page-matched active/hover colours */
body.index{ --topbar-page-colour: #7C3AED; }
body.pub-quiz,
body.page-pubquiz{ --topbar-page-colour: #06B6D4; }
body.weddings,
body.page-weddings{ --topbar-page-colour: #EC4899; }
body.fundraiser,
body.page-fundraiser{ --topbar-page-colour: #10B981; }
body.events,
body.page-events{ --topbar-page-colour: #F97316; }
body.booking,
body.page-booking{ --topbar-page-colour: #1D4ED8; }
body.page-community{ --topbar-page-colour: #64748B; }

.topbar .nav a.active,
.topbar .nav a.is-active,
.topbar .nav .nav-link.active,
.topbar .nav .nav-link.is-active,
.topbar nav#siteMenu a.active,
.topbar nav#siteMenu a.is-active{
  color: #ffffff !important;
  background: var(--topbar-page-colour, #7C3AED) !important;
  box-shadow: 0 6px 18px color-mix(in srgb, var(--topbar-page-colour, #7C3AED) 42%, transparent) !important;
  padding: 9px 12px !important;
  min-height: 38px !important;
  border: 0 !important;
  border-bottom: 0 !important;
  transform: none !important;
}

.topbar .nav a.active:hover,
.topbar .nav a.is-active:hover,
.topbar .nav .nav-link.active:hover,
.topbar .nav .nav-link.is-active:hover{
  color: #ffffff !important;
  background: var(--topbar-page-colour, #7C3AED) !important;
  opacity: 1 !important;
}

.topbar .nav a:not(.active):not(.is-active):hover,
.topbar .nav .nav-link:not(.active):not(.is-active):hover{
  color: var(--topbar-page-colour, #ffffff) !important;
}

/* Burger: always three clear bars, available while scrolling because topbar is fixed */
.topbar .burger,
.burger{
  appearance: none !important;
  -webkit-appearance: none !important;
  flex: 0 0 44px !important;
  width: 44px !important;
  height: 44px !important;
  min-width: 44px !important;
  min-height: 44px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 12px !important;
  background: rgba(255,255,255,.08) !important;
  cursor: pointer !important;
  position: relative !important;
  z-index: 10002 !important;
  align-items: center !important;
  justify-content: center !important;
  flex-direction: column !important;
  gap: 5px !important;
  overflow: visible !important;
}

.burger:hover,
.burger:focus-visible{
  background: rgba(255,255,255,.14) !important;
  outline: none !important;
}

.burger__bar,
.burger .burger__bar,
.topbar .burger__bar{
  display: block !important;
  position: static !important;
  left: auto !important;
  top: auto !important;
  width: 24px !important;
  height: 3px !important;
  min-height: 3px !important;
  margin: 0 !important;
  padding: 0 !important;
  border-radius: 999px !important;
  background: #ffffff !important;
  opacity: 1 !important;
  transform: none !important;
  transition: transform .2s ease, opacity .2s ease, background-color .2s ease !important;
}

.burger.is-open .burger__bar:nth-child(1){
  transform: translateY(8px) rotate(45deg) !important;
}
.burger.is-open .burger__bar:nth-child(2){
  opacity: 0 !important;
}
.burger.is-open .burger__bar:nth-child(3){
  transform: translateY(-8px) rotate(-45deg) !important;
}

@media (min-width: 981px){
  .topbar .burger,
  .burger{
    display: none !important;
  }
}

@media (max-width: 980px){
  body{
    padding-top: 78px !important;
  }

  .topbar,
  header.topbar{
    min-height: 68px !important;
    padding: 8px 14px !important;
  }

  .topbar .logo-img{
    height: 48px !important;
    max-height: 48px !important;
  }

  .topbar .burger,
  .burger{
    display: inline-flex !important;
  }

  .topbar .nav,
  .topbar nav#siteMenu{
    display: none !important;
    position: fixed !important;
    top: 68px !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    max-width: none !important;
    max-height: calc(100vh - 68px) !important;
    overflow-y: auto !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    gap: 0 !important;
    padding: 10px 18px 18px !important;
    margin: 0 !important;
    border-radius: 0 0 18px 18px !important;
    background: rgba(31,31,31,.98) !important;
    border-top: 1px solid rgba(255,255,255,.10) !important;
    box-shadow: 0 18px 36px rgba(0,0,0,.35) !important;
    z-index: 10001 !important;
  }

  body.menu-open .topbar .nav,
  body.menu-open .topbar nav#siteMenu{
    display: flex !important;
  }

  .topbar .nav a,
  .topbar .nav .nav-link,
  .topbar nav#siteMenu a,
  .topbar a.nav-link{
    display: flex !important;
    width: 100% !important;
    min-height: 48px !important;
    justify-content: flex-start !important;
    padding: 14px 12px !important;
    border-radius: 12px !important;
    border-bottom: 1px solid rgba(255,255,255,.08) !important;
    font-size: 15px !important;
    transform: none !important;
  }

  .topbar .nav a:last-child,
  .topbar .nav .nav-link:last-child,
  .topbar nav#siteMenu a:last-child{
    border-bottom: 0 !important;
  }

  .topbar .nav a.active,
  .topbar .nav a.is-active,
  .topbar .nav .nav-link.active,
  .topbar .nav .nav-link.is-active,
  .topbar nav#siteMenu a.active,
  .topbar nav#siteMenu a.is-active{
    min-height: 48px !important;
    padding: 14px 12px !important;
    border-radius: 12px !important;
    border-bottom: 1px solid transparent !important;
  }
}

@media (max-width: 420px){
  .topbar,
  header.topbar{
    padding-left: 10px !important;
    padding-right: 10px !important;
  }

  .topbar .logo-img{
    height: 42px !important;
    max-height: 42px !important;
  }
}

/* ===== MOBILE STATIC JPG BACKGROUNDS INSTEAD OF MP4 ===== */

/* Desktop keeps the video, but avoid it interfering with scroll/taps. */
.bg-video,
.bg-video-wrap {
  pointer-events: none;
}

.bg-video {
  will-change: transform;
  backface-visibility: hidden;
  transform: translateZ(0);
}

/* Mobile/tablet: do not render the video layer; use each page's JPG instead. */
@media (max-width: 768px) {
  .bg-video {
    display: none !important;
  }

  .bg-video-wrap {
    display: block !important;
    position: fixed !important;
    inset: 0 !important;
    z-index: 0 !important;
    overflow: hidden !important;
    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
    background-color: #07061a !important;
  }

  body.page-home .bg-video-wrap {
    background-image: url("video/home.jpg") !important;
  }

  body.page-pubquiz .bg-video-wrap,
  body.page-pub .bg-video-wrap {
    background-image: url("video/pubquiz.jpg") !important;
  }

  body.page-weddings .bg-video-wrap {
    background-image: url("video/weddings.jpg") !important;
  }

  body.page-fundraiser .bg-video-wrap {
    background-image: url("video/fundraiser.jpg") !important;
  }

  body.page-events .bg-video-wrap {
    background-image: url("video/events.jpg") !important;
  }

  body.page-enquire .bg-video-wrap,
  body.page-booking .bg-video-wrap {
    background-image: url("video/booking.jpg") !important;
  }
}

/* ===== SCREENSHOT MATCH: COMPACT TOP NAV ===== */

/* Full-width dark topbar */
.topbar,
header.topbar {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 6px 18px !important;
  box-sizing: border-box !important;
  background: #2f2f2f !important;
  color: #ffffff !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: 0 8px 22px rgba(0,0,0,.22) !important;
  z-index: 5000 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 16px !important;
  overflow: visible !important;
}

/* Keep page content below fixed topbar */
body {
  padding-top: 76px !important;
}

/* Logo sizing */
.topbar .logo-img {
  height: 54px !important;
  width: auto !important;
  display: block !important;
}

/* Desktop nav layout */
.topbar .nav,
.topbar nav#siteMenu {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 10px !important;
  flex-wrap: nowrap !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Compact normal nav links */
.topbar .nav a,
.topbar .nav .nav-link,
.topbar nav#siteMenu a {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 24px !important;
  min-height: 24px !important;
  padding: 0 8px !important;
  margin: 0 !important;
  border-radius: 4px !important;
  background: transparent !important;
  color: rgba(255,255,255,.94) !important;
  box-shadow: none !important;
  border: 0 !important;
  text-decoration: none !important;
  font-family: 'MuseoModerno', sans-serif !important;
  font-size: 13px !important;
  line-height: 1 !important;
  letter-spacing: .7px !important;
  text-transform: uppercase !important;
  font-weight: 700 !important;
  transform: none !important;
  transition: background-color .16s ease, color .16s ease, box-shadow .16s ease !important;
}

/* Small rollover */
.topbar .nav a:hover,
.topbar .nav .nav-link:hover,
.topbar nav#siteMenu a:hover {
  height: 24px !important;
  padding: 0 8px !important;
  border-radius: 4px !important;
  background: rgba(255,255,255,.10) !important;
  color: #ffffff !important;
  transform: none !important;
}

/* Compact active selected page */
.topbar .nav a.active,
.topbar .nav .nav-link.active,
.topbar .nav a.is-active,
.topbar .nav .nav-link.is-active,
.topbar nav#siteMenu a.active,
.topbar nav#siteMenu a.is-active {
  height: 24px !important;
  min-height: 24px !important;
  padding: 0 9px !important;
  border-radius: 4px !important;
  color: #ffffff !important;
  background: var(--nav-active-color, #7C3AED) !important;
  box-shadow: 0 4px 12px rgba(0,0,0,.18) !important;
  border: 0 !important;
  transform: none !important;
}

/* Per-page active colour */
body.page-home,
body.index { --nav-active-color: #7C3AED; }

body.page-pubquiz,
body.page-pub,
body.pub-quiz { --nav-active-color: #06B6D4; }

body.page-weddings,
body.weddings { --nav-active-color: #EC4899; }

body.page-fundraiser,
body.fundraiser { --nav-active-color: #10B981; }

body.page-events,
body.events { --nav-active-color: #F97316; }

body.page-enquire,
body.page-booking,
body.booking { --nav-active-color: #1D4ED8; }

/* Burger: keep all three bars visible */
.burger {
  display: none !important;
  width: 40px !important;
  height: 40px !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  position: relative !important;
  z-index: 5100 !important;
  cursor: pointer !important;
}

.burger__bar {
  display: block !important;
  position: absolute !important;
  left: 8px !important;
  width: 24px !important;
  height: 3px !important;
  background: #ffffff !important;
  border-radius: 999px !important;
  opacity: 1 !important;
  transform: none !important;
  transition: transform .18s ease, opacity .18s ease !important;
}

.burger__bar:nth-child(1) { top: 10px !important; }
.burger__bar:nth-child(2) { top: 18px !important; }
.burger__bar:nth-child(3) { top: 26px !important; }

.burger.is-open .burger__bar:nth-child(1) {
  top: 18px !important;
  transform: rotate(45deg) !important;
}
.burger.is-open .burger__bar:nth-child(2) {
  opacity: 0 !important;
}
.burger.is-open .burger__bar:nth-child(3) {
  top: 18px !important;
  transform: rotate(-45deg) !important;
}

/* Mobile dropdown */
@media (max-width: 860px) {
  .topbar,
  header.topbar {
    padding: 6px 14px !important;
  }

  body {
    padding-top: 72px !important;
  }

  .topbar .logo-img {
    height: 48px !important;
  }

  .burger {
    display: block !important;
    flex: 0 0 40px !important;
  }

  .topbar .nav,
  .topbar nav#siteMenu {
    display: none !important;
    position: absolute !important;
    top: calc(100% + 0px) !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    background: #2f2f2f !important;
    padding: 10px 14px 14px !important;
    border-radius: 0 0 12px 12px !important;
    box-shadow: 0 14px 30px rgba(0,0,0,.28) !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 4px !important;
    z-index: 5050 !important;
  }

  body.menu-open .topbar .nav,
  body.menu-open .topbar nav#siteMenu {
    display: flex !important;
  }

  .topbar .nav a,
  .topbar .nav .nav-link,
  .topbar nav#siteMenu a {
    width: 100% !important;
    height: 34px !important;
    min-height: 34px !important;
    justify-content: flex-start !important;
    padding: 0 10px !important;
    border-radius: 5px !important;
    font-size: 14px !important;
  }

  .topbar .nav a.active,
  .topbar .nav .nav-link.active,
  .topbar nav#siteMenu a.active,
  .topbar .nav a.is-active,
  .topbar .nav .nav-link.is-active,
  .topbar nav#siteMenu a.is-active {
    height: 34px !important;
    min-height: 34px !important;
    padding: 0 10px !important;
    border-radius: 5px !important;
  }
}

/* ===== FINAL CLEAN MOBILE BURGER NAV - NO HOVER SHIFT ===== */
/* Mobile menu stays vertical. Hover changes colour only: no padding, no lift, no jump. */

/* Burger button */
.burger,
button.burger {
  appearance: none !important;
  -webkit-appearance: none !important;
  display: none !important;
  position: relative !important;
  width: 46px !important;
  height: 46px !important;
  min-width: 46px !important;
  min-height: 46px !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 12px !important;
  background: rgba(255,255,255,.08) !important;
  color: #ffffff !important;
  box-shadow: none !important;
  cursor: pointer !important;
  z-index: 5200 !important;
  overflow: hidden !important;
}

.burger:hover,
button.burger:hover,
.burger:focus-visible,
button.burger:focus-visible {
  background: rgba(255,255,255,.13) !important;
  outline: none !important;
}

/* Burger bars */
.burger__bar,
.burger span,
button.burger .burger__bar,
button.burger span {
  display: block !important;
  position: absolute !important;
  left: 11px !important;
  width: 24px !important;
  height: 3px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: #ffffff !important;
  opacity: 1 !important;
  transform-origin: center !important;
  transition: top .18s ease, transform .18s ease, opacity .18s ease !important;
}

.burger__bar:nth-child(1),
.burger span:nth-child(1) {
  top: 13px !important;
}

.burger__bar:nth-child(2),
.burger span:nth-child(2) {
  top: 21px !important;
}

.burger__bar:nth-child(3),
.burger span:nth-child(3) {
  top: 29px !important;
}

.burger.is-open .burger__bar:nth-child(1),
.burger.is-open span:nth-child(1),
body.menu-open .burger .burger__bar:nth-child(1),
body.menu-open .burger span:nth-child(1) {
  top: 21px !important;
  transform: rotate(45deg) !important;
}

.burger.is-open .burger__bar:nth-child(2),
.burger.is-open span:nth-child(2),
body.menu-open .burger .burger__bar:nth-child(2),
body.menu-open .burger span:nth-child(2) {
  top: 21px !important;
  opacity: 0 !important;
  transform: none !important;
}

.burger.is-open .burger__bar:nth-child(3),
.burger.is-open span:nth-child(3),
body.menu-open .burger .burger__bar:nth-child(3),
body.menu-open .burger span:nth-child(3) {
  top: 21px !important;
  transform: rotate(-45deg) !important;
}

/* Desktop */
@media (min-width: 861px) {
  .burger,
  button.burger {
    display: none !important;
  }

  .topbar .nav,
  .topbar nav#siteMenu {
    display: flex !important;
  }
}

/* Mobile vertical dropdown */
@media (max-width: 860px) {
  html,
  body {
    overflow-x: hidden !important;
  }

  .topbar,
  header.topbar {
    overflow: visible !important;
  }

  .burger,
  button.burger {
    display: block !important;
    flex: 0 0 46px !important;
  }

  .topbar .nav,
  .topbar nav#siteMenu {
    display: flex !important;
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;

    flex-direction: column !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    gap: 0 !important;

    padding: 18px 26px 20px !important;
    margin: 0 !important;

    background: #000000 !important;
    border: 0 !important;
    border-radius: 0 0 18px 18px !important;
    box-shadow: 0 18px 34px rgba(0,0,0,.32) !important;

    z-index: 5050 !important;

    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transform: translateY(-8px) !important;
    transition: opacity .2s ease, transform .2s ease, visibility .2s ease !important;
  }

  body.menu-open .topbar .nav,
  body.menu-open .topbar nav#siteMenu {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: translateY(0) !important;
  }

  .topbar .nav a,
  .topbar .nav .nav-link,
  .topbar nav#siteMenu a {
    width: 100% !important;
    min-height: 48px !important;
    height: 48px !important;

    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;

    padding: 0 !important;
    margin: 0 !important;

    border-radius: 0 !important;
    border: 0 !important;
    border-bottom: 1px solid rgba(255,255,255,.08) !important;

    background: transparent !important;
    color: #ffffff !important;
    box-shadow: none !important;

    font-family: 'MuseoModerno', sans-serif !important;
    font-size: 15px !important;
    font-weight: 800 !important;
    letter-spacing: .65px !important;
    line-height: 1 !important;
    text-transform: uppercase !important;
    text-decoration: none !important;
    white-space: nowrap !important;

    transform: none !important;
    transition: color .16s ease, opacity .16s ease !important;
  }

  .topbar .nav a:last-child,
  .topbar .nav .nav-link:last-child,
  .topbar nav#siteMenu a:last-child {
    border-bottom: 0 !important;
  }

  /* Hover/focus: colour only. No padding or transform movement. */
  .topbar .nav a:hover,
  .topbar .nav .nav-link:hover,
  .topbar nav#siteMenu a:hover,
  .topbar .nav a:focus-visible,
  .topbar .nav .nav-link:focus-visible,
  .topbar nav#siteMenu a:focus-visible {
    background: transparent !important;
    color: var(--nav-active-color, #7C3AED) !important;
    padding: 0 !important;
    transform: none !important;
    box-shadow: none !important;
    outline: none !important;
  }

  /* Active page: colour only, no indentation or raised state. */
  .topbar .nav a.active,
  .topbar .nav .nav-link.active,
  .topbar .nav a.is-active,
  .topbar .nav .nav-link.is-active,
  .topbar nav#siteMenu a.active,
  .topbar nav#siteMenu a.is-active {
    background: transparent !important;
    color: var(--nav-active-color, #7C3AED) !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    transform: none !important;
    position: relative !important;
  }

  .topbar .nav a.active::before,
  .topbar .nav .nav-link.active::before,
  .topbar nav#siteMenu a.active::before,
  .topbar .nav a.is-active::before,
  .topbar .nav .nav-link.is-active::before,
  .topbar nav#siteMenu a.is-active::before {
    content: none !important;
    display: none !important;
  }
}



/* Text wordmark replaces logo image on desktop/non-mobile pages */
.topbar .brand-wordmark,
header.topbar .brand-wordmark{
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: .35em !important;
  font-family: 'MuseoModerno', sans-serif !important;
  font-weight: 700 !important;
  font-size: clamp(1.45rem, 2.4vw, 2.15rem) !important;
  line-height: 1 !important;
  letter-spacing: .02em !important;
  text-transform: uppercase !important;
  white-space: nowrap !important;
  width: auto !important;
  height: auto !important;
  max-width: none !important;
}

.neon-orange,
.topbar .brand-wordmark .neon-orange,
header.topbar .brand-wordmark .neon-orange{
  color: #ff9f1a !important;
  text-shadow: 0 0 14px rgba(255,159,26,.55), 0 0 28px rgba(255,159,26,.25) !important;
}

.neon-cyan,
.topbar .brand-wordmark .neon-cyan,
header.topbar .brand-wordmark .neon-cyan{
  color: #00e5ff !important;
  text-shadow: 0 0 14px rgba(0,229,255,.55), 0 0 28px rgba(0,229,255,.25) !important;
}

.topbar .brand-wordmark span,
header.topbar .brand-wordmark span{
  display: inline-block !important;
}

@media (max-width: 760px){
  .topbar .brand-wordmark,
  header.topbar .brand-wordmark{
    font-size: clamp(1.1rem, 6.5vw, 1.65rem) !important;
    gap: .28em !important;
  }
}