/*
Theme Name: BLUEBOX Padel Club
Theme URI: https://blueboxpadel.com
Author: BLUEBOX
Author URI: https://blueboxpadel.com
Description: Premium navy and gold WordPress theme for BLUEBOX Padel Club
Version: 2.6.1
License: GPL v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: bluebox-padel
Domain Path: /languages
*/

:root {
  --hub-navy-950: #04101f;
  --hub-navy-900: #061326;
  --hub-navy-850: #081a31;
  --hub-navy-800: #0b1f3a;
  --hub-navy-700: #12315a;
  --hub-navy-600: #1a467e;

  --hub-gold-300: #f6df9f;
  --hub-gold-400: #f0c96b;
  --hub-gold-500: #d7a93f;
  --hub-gold-600: #b8892d;

  --hub-blue-300: #8ddaff;
  --hub-blue-400: #68c7ff;

  --hub-white: #ffffff;
  --hub-text: rgba(255, 255, 255, 0.94);
  --hub-text-soft: rgba(255, 255, 255, 0.74);
  --hub-text-faint: rgba(255, 255, 255, 0.54);

  --hub-border: rgba(255, 255, 255, 0.12);
  --hub-border-strong: rgba(240, 201, 107, 0.28);

  --hub-shadow-lg: 0 28px 70px rgba(0, 0, 0, 0.36);
  --hub-shadow-md: 0 18px 42px rgba(0, 0, 0, 0.22);

  --hub-radius-sm: 14px;
  --hub-radius-md: 24px;
  --hub-radius-lg: 34px;
  --hub-radius-xl: 48px;

  --container: 1320px;
  --header-height: 76px;
  --section-space: clamp(3.25rem, 6vw, 5.75rem);

  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-display: "Oswald", "Arial Narrow", sans-serif;

  --bg-main:
    radial-gradient(circle at top left, rgba(240, 201, 107, 0.08), transparent 30%),
    radial-gradient(circle at top right, rgba(23, 55, 100, 0.20), transparent 28%),
    linear-gradient(180deg, #061326 0%, #0a1d38 52%, #07172d 100%);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: var(--font-body);
  line-height: 1.55;
  color: var(--hub-text);
  background:
    linear-gradient(180deg, rgba(6, 19, 38, 0.70) 0%, rgba(6, 19, 38, 0.84) 100%),
    url("https://blueboxpadel.com/wp-content/uploads/2026/04/ChatGPT-Image-Apr-9-2026-12_36_58-AM.png") center 36% / cover fixed no-repeat,
    var(--bg-main);
  overflow-x: clip;
}

img,
video {
  display: block;
  max-width: 100%;
  height: auto;
}

a {
  color: inherit;
  text-decoration: none;
}

button,
input,
textarea,
select {
  font: inherit;
}

button {
  cursor: pointer;
}

ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.screen-reader-text {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  border: 0;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}

a:focus-visible,
button:focus-visible,
input:focus-visible {
  outline: 2px solid var(--hub-blue-400);
  outline-offset: 3px;
}

.container {
  width: min(100% - 2rem, var(--container));
  margin-inline: auto;
}

.site-main.hub-site {
  min-height: 100vh;
}

.hub-site {
  color: var(--hub-text);
}

.hub-section {
  position: relative;
  z-index: 1;
  padding: var(--section-space) 0;
}

.hub-kicker {
  display: inline-block;
  margin: 0 0 1rem;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--hub-gold-400);
}

.hub-kicker--light {
  color: var(--hub-white);
}

.hub-section-title {
  margin: 0 0 1rem;
  font-family: var(--font-display);
  font-size: clamp(2.6rem, 7vw, 5.4rem);
  line-height: 0.92;
  letter-spacing: 0.015em;
  text-transform: uppercase;
  color: var(--hub-white);
}

.hub-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: 0.78rem 1.18rem;
  border: 1px solid transparent;
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
  transition:
    transform 0.22s ease,
    box-shadow 0.22s ease,
    border-color 0.22s ease,
    background-color 0.22s ease,
    color 0.22s ease;
}

.hub-btn:hover {
  transform: translateY(-2px);
}

.hub-btn--primary {
  color: #071322;
  background: linear-gradient(135deg, var(--hub-gold-300) 0%, var(--hub-gold-500) 55%, var(--hub-gold-600) 100%);
  border-color: rgba(255, 255, 255, 0.08);
  box-shadow: 0 12px 28px rgba(215, 169, 63, 0.24);
}

.hub-btn--primary:hover {
  box-shadow: 0 16px 34px rgba(215, 169, 63, 0.32);
}

.hub-btn--secondary {
  color: var(--hub-white);
  background: rgba(255, 255, 255, 0.04);
  border-color: var(--hub-border-strong);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.hub-btn--secondary:hover {
  background: rgba(240, 201, 107, 0.08);
  border-color: rgba(240, 201, 107, 0.40);
}

/* ===== HEADER ===== */
.hub-header {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: linear-gradient(180deg, rgba(6, 19, 38, 0.95) 0%, rgba(10, 29, 56, 0.90) 100%);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--hub-border);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.16);
  transition:
    background 0.28s ease,
    backdrop-filter 0.28s ease,
    border-color 0.28s ease,
    box-shadow 0.28s ease;
}

body.is-bluebox-front-page .hub-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  background: transparent;
  backdrop-filter: none;
  border-bottom: 1px solid transparent;
  box-shadow: none;
}

body.is-bluebox-front-page .hub-header.hub-header--scrolled {
  background: linear-gradient(180deg, rgba(6, 19, 38, 0.95) 0%, rgba(10, 29, 56, 0.90) 100%);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--hub-border);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.16);
}

.hub-header-inner {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
  min-height: var(--header-height);
  padding: 0.75rem 0;
}

.hub-brand {
  position: relative;
  z-index: 3;
  flex-shrink: 0;
  min-width: 0;
}

.hub-brand-link {
  display: inline-flex;
  align-items: center;
  gap: 0.82rem;
  min-width: 0;
}

.hub-brand-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.hub-brand-logo {
  display: block;
  width: auto;
  max-height: 38px;
}

.hub-brand-text {
  display: inline-flex;
  align-items: center;
  gap: 0.28em;
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: 1;
  text-transform: uppercase;
  color: inherit !important;
  white-space: nowrap;
  transition: color 0.28s ease, text-shadow 0.28s ease, opacity 0.28s ease;
}

.hub-brand-name-blue {
  color: var(--hub-blue-400);
  text-shadow:
    0 0 8px rgba(104, 199, 255, 0.32),
    0 0 18px rgba(104, 199, 255, 0.16);
}

.hub-brand-name-gold {
  color: var(--hub-gold-400);
  text-shadow:
    0 0 8px rgba(240, 201, 107, 0.28),
    0 0 18px rgba(240, 201, 107, 0.14);
}

body.is-bluebox-front-page .hub-header:not(.hub-header--scrolled) .hub-brand-text,
body.is-bluebox-front-page .hub-header.hub-header--scrolled .hub-brand-text {
  color: inherit !important;
  text-shadow: none !important;
}

.hub-nav {
  display: flex;
  flex: 1;
  justify-content: center;
}

.hub-nav .menu {
  display: flex;
  align-items: center;
  gap: 1.5rem;
}

.hub-nav a {
  position: relative;
  font-size: 0.79rem;
  font-weight: 800;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--hub-text-soft);
  transition: color 0.28s ease, opacity 0.28s ease, text-shadow 0.28s ease;
}

body.is-bluebox-front-page .hub-header:not(.hub-header--scrolled) .hub-nav a {
  color: rgba(255, 255, 255, 0.92);
  text-shadow:
    0 2px 10px rgba(0, 0, 0, 0.28),
    0 1px 2px rgba(0, 0, 0, 0.20);
}

body.is-bluebox-front-page .hub-header.hub-header--scrolled .hub-nav a {
  color: var(--hub-text-soft);
  text-shadow: none;
}

.hub-nav a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -0.38rem;
  width: 100%;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, var(--hub-gold-400) 50%, transparent 100%);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 0.2s ease;
}

.hub-nav a:hover,
.hub-nav .current-menu-item > a,
.hub-nav .current_page_item > a {
  color: var(--hub-gold-400);
}

.hub-nav a:hover::after,
.hub-nav .current-menu-item > a::after,
.hub-nav .current_page_item > a::after {
  transform: scaleX(1);
}

.hub-header-actions {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  flex-shrink: 0;
  margin-left: auto;
}

.hub-menu-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0.65rem 0.95rem;
  border: 1px solid var(--hub-border-strong);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.04);
  color: var(--hub-white);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transition:
    background 0.28s ease,
    border-color 0.28s ease,
    text-shadow 0.28s ease,
    box-shadow 0.28s ease;
}

body.is-bluebox-front-page .hub-header:not(.hub-header--scrolled) .hub-menu-toggle {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.20);
  text-shadow:
    0 2px 10px rgba(0, 0, 0, 0.28),
    0 1px 2px rgba(0, 0, 0, 0.20);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

body.is-bluebox-front-page .hub-header.hub-header--scrolled .hub-menu-toggle {
  background: rgba(255, 255, 255, 0.04);
  border-color: var(--hub-border-strong);
  text-shadow: none;
  box-shadow: none;
}

/* ===== HERO ===== */
.hub-hero {
  position: relative;
  display: flex;
  align-items: flex-start;
  min-height: calc(100vh - var(--header-height));
  padding: 0;
  overflow: hidden;
}

body.is-bluebox-front-page .hub-hero {
  min-height: 100vh;
}

.hub-hero::after {
  content: "";
  position: absolute;
  inset: auto auto 12% -8%;
  width: 28rem;
  height: 28rem;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(104, 199, 255, 0.18) 0%, rgba(104, 199, 255, 0) 70%);
  filter: blur(24px);
  z-index: 2;
  pointer-events: none;
}

.hub-hero-video-wrap {
  position: absolute;
  inset: 0;
  z-index: 1;
}

.hub-hero-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hub-hero-overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(6, 19, 38, 0.84) 0%, rgba(6, 19, 38, 0.54) 44%, rgba(6, 19, 38, 0.38) 100%),
    linear-gradient(180deg, rgba(6, 19, 38, 0.30) 0%, rgba(6, 19, 38, 0.74) 100%);
}

.hub-hero-grid {
  position: relative;
  z-index: 3;
  display: grid;
  align-items: center;
  width: 100%;
  min-height: calc(100vh - var(--header-height));
  padding-top: clamp(13rem, 23vh, 16rem);
  padding-bottom: clamp(3rem, 6vh, 5rem);
}

body.is-bluebox-front-page .hub-hero-grid {
  min-height: 100vh;
}

.hub-hero-copy-wrap {
  max-width: 100%;
  margin: 0 auto;
  text-align: center;
  transform: translateY(80px);
}

.hub-hero-title {
  margin: 0 0 1.15rem;
  font-family: var(--font-display);
  font-size: clamp(3.25rem, 9vw, 8.5rem);
  line-height: 0.9;
  letter-spacing: 0.015em;
  text-transform: uppercase;
}

.hub-hero-title .brand-blue,
.hub-hero-title .brand-gold {
  display: inline-block;
}

.hub-hero-title .brand-blue {
  margin-right: 0.22em;
  color: var(--hub-blue-400);
  text-shadow:
    0 0 12px rgba(104, 199, 255, 0.52),
    0 0 28px rgba(104, 199, 255, 0.30),
    0 0 44px rgba(104, 199, 255, 0.16);
}

.hub-hero-title .brand-gold {
  color: var(--hub-gold-400);
  text-shadow:
    0 0 12px rgba(240, 201, 107, 0.46),
    0 0 28px rgba(240, 201, 107, 0.24),
    0 0 44px rgba(240, 201, 107, 0.12);
}

.hub-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.95rem;
  justify-content: center;
}

body.is-bluebox-front-page .hub-hero-copy-wrap {
  width: 100%;
  max-width: none;
  margin: 0 auto;
  text-align: center;
  transform: translateY(110px);
}

body.is-bluebox-front-page .hub-hero-title {
  display: inline-block;
  margin: 0;
  font-size: clamp(5.2rem, 12.2vw, 12.4rem);
  line-height: 0.74;
  letter-spacing: -0.004em;
  text-transform: uppercase;
  white-space: nowrap;
  transform: scaleY(1.42);
  transform-origin: center center;
}

body.is-bluebox-front-page .hub-hero-title .brand-blue,
body.is-bluebox-front-page .hub-hero-title .brand-gold {
  display: inline-block;
}

body.is-bluebox-front-page .hub-hero-title .brand-blue {
  margin-right: 0.12em;
}

body.is-bluebox-front-page .hub-hero-actions {
  display: none !important;
}

/* ===== SECTION SURFACES ===== */
.hub-section--band {
  isolation: isolate;
}

.hub-section--band::before,
.hub-section--benefits::before,
.hub-section--feature::before {
  content: "";
  position: absolute;
  left: 50%;
  width: 100vw;
  transform: translateX(-50%);
  pointer-events: none;
  z-index: -1;
}

.hub-section--offers {
  padding-top: clamp(3.15rem, 4vw, 4.5rem);
  padding-bottom: clamp(3.4rem, 4vw, 4.8rem);
}

.hub-section--offers::before {
  top: 0.85rem;
  bottom: 0.85rem;
  background:
    radial-gradient(circle at 14% 20%, rgba(104, 199, 255, 0.18), transparent 24%),
    radial-gradient(circle at 78% 18%, rgba(240, 201, 107, 0.12), transparent 22%),
    radial-gradient(circle at 54% 80%, rgba(104, 199, 255, 0.07), transparent 26%),
    linear-gradient(135deg, rgba(10, 32, 58, 0.84) 0%, rgba(18, 47, 86, 0.74) 28%, rgba(32, 56, 92, 0.42) 52%, rgba(8, 24, 44, 0.86) 100%);
  border-top: 1px solid rgba(104, 199, 255, 0.16);
  border-bottom: 1px solid rgba(240, 201, 107, 0.10);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.05),
    inset 0 -1px 0 rgba(255, 255, 255, 0.02);
}

.hub-section--benefits {
  padding-top: clamp(3rem, 4vw, 4.25rem);
  padding-bottom: clamp(3rem, 4vw, 4.25rem);
}

.hub-section--benefits::before {
  top: 1rem;
  bottom: 1rem;
  background:
    radial-gradient(circle at 16% 18%, rgba(104, 199, 255, 0.06), transparent 24%),
    radial-gradient(circle at 84% 80%, rgba(240, 201, 107, 0.05), transparent 22%),
    linear-gradient(180deg, rgba(7, 21, 40, 0.74) 0%, rgba(7, 21, 40, 0.58) 52%, rgba(7, 21, 40, 0.72) 100%);
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.hub-section--feature {
  padding-top: clamp(3rem, 4vw, 4.25rem);
  padding-bottom: clamp(3.25rem, 5vw, 4.75rem);
}

.hub-section--feature::before {
  top: 0.8rem;
  bottom: 0.8rem;
  background:
    radial-gradient(circle at 82% 20%, rgba(240, 201, 107, 0.08), transparent 24%),
    radial-gradient(circle at 18% 78%, rgba(104, 199, 255, 0.06), transparent 24%),
    linear-gradient(135deg, rgba(5, 16, 31, 0.92) 0%, rgba(7, 20, 38, 0.78) 40%, rgba(5, 16, 31, 0.94) 100%);
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.hub-section--community {
  padding-top: clamp(3.25rem, 5vw, 5rem);
  padding-bottom: clamp(3.5rem, 5vw, 5.25rem);
}

.hub-section--community::before {
  top: 0.85rem;
  bottom: 0.85rem;
  background:
    radial-gradient(circle at 20% 78%, rgba(240, 201, 107, 0.12), transparent 24%),
    radial-gradient(circle at 80% 18%, rgba(104, 199, 255, 0.08), transparent 22%),
    linear-gradient(135deg, rgba(10, 22, 39, 0.92) 0%, rgba(20, 34, 54, 0.78) 34%, rgba(32, 29, 20, 0.30) 56%, rgba(10, 22, 39, 0.94) 100%);
  border-top: 1px solid rgba(240, 201, 107, 0.10);
  border-bottom: 1px solid rgba(104, 199, 255, 0.08);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.03),
    inset 0 -1px 0 rgba(255, 255, 255, 0.02);
}

/* ===== OFFERS ===== */
.hub-locations-header {
  max-width: 52rem;
  margin: 0 auto 1.6rem;
  text-align: center;
}

.hub-section-title--offers {
  display: inline-block;
  margin: 0 auto;
  font-size: clamp(2.9rem, 6vw, 6rem);
  line-height: 0.9;
  letter-spacing: 0.012em;
}

.hub-entry-split {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  max-width: 1220px;
  margin: 0 auto;
  overflow: hidden;
  border-radius: 34px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: linear-gradient(180deg, rgba(7, 20, 37, 0.84) 0%, rgba(5, 16, 31, 0.92) 100%);
  box-shadow:
    0 28px 72px rgba(0, 0, 0, 0.34),
    inset 0 1px 0 rgba(255, 255, 255, 0.03);
  transition:
    grid-template-columns 0.42s cubic-bezier(0.2, 0.7, 0.2, 1),
    box-shadow 0.28s ease,
    border-color 0.28s ease;
}

.hub-entry-split::before {
  content: "";
  position: absolute;
  inset: 0;
  padding: 1px;
  border-radius: inherit;
  background: linear-gradient(135deg, rgba(104, 199, 255, 0.18) 0%, rgba(240, 201, 107, 0.16) 50%, rgba(104, 199, 255, 0.12) 100%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

.hub-entry-split:hover {
  border-color: rgba(240, 201, 107, 0.18);
  box-shadow:
    0 32px 82px rgba(0, 0, 0, 0.38),
    0 0 20px rgba(104, 199, 255, 0.06);
}

@supports selector(:has(*)) {
  .hub-entry-split:has(.hub-entry-panel--play:hover) {
    grid-template-columns: 1.12fr 0.88fr;
  }

  .hub-entry-split:has(.hub-entry-panel--membership:hover) {
    grid-template-columns: 0.88fr 1.12fr;
  }
}

.hub-entry-divider {
  display: none;
}

.hub-entry-panel {
  position: relative;
  min-width: 0;
  isolation: isolate;
}

.hub-entry-panel--play {
  z-index: 2;
}

.hub-entry-panel--membership {
  z-index: 1;
  margin-left: -1px;
}

.hub-entry-split .hub-location-card {
  min-height: 510px;
  height: 510px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.hub-entry-split .hub-location-card:hover {
  transform: none;
  border-color: transparent;
  box-shadow: none;
}

.hub-entry-panel img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transform: scale(1.015);
  transition:
    transform 0.42s cubic-bezier(0.2, 0.7, 0.2, 1),
    filter 0.32s ease,
    object-position 0.32s ease;
}

.hub-entry-panel--play img {
  object-position: center 5%;
}

.hub-entry-panel::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  transition: opacity 0.32s ease, background 0.32s ease;
}

.hub-entry-panel--play::after {
  background:
    linear-gradient(180deg, rgba(6, 19, 38, 0.08) 0%, rgba(6, 19, 38, 0.36) 52%, rgba(4, 14, 26, 0.88) 100%),
    linear-gradient(90deg, rgba(104, 199, 255, 0.09) 0%, rgba(104, 199, 255, 0.00) 48%);
}

.hub-entry-panel--membership::after {
  background:
    linear-gradient(180deg, rgba(6, 19, 38, 0.10) 0%, rgba(6, 19, 38, 0.40) 52%, rgba(4, 14, 26, 0.88) 100%),
    linear-gradient(270deg, rgba(240, 201, 107, 0.08) 0%, rgba(240, 201, 107, 0.00) 48%);
}

.hub-entry-panel--play::before {
  content: "";
  position: absolute;
  top: 1.2rem;
  bottom: 1.2rem;
  right: -1px;
  width: 2px;
  z-index: 4;
  background: linear-gradient(180deg, rgba(104, 199, 255, 0.00) 0%, rgba(104, 199, 255, 0.42) 22%, rgba(240, 201, 107, 0.88) 50%, rgba(104, 199, 255, 0.42) 78%, rgba(104, 199, 255, 0.00) 100%);
  box-shadow:
    0 0 10px rgba(104, 199, 255, 0.10),
    0 0 8px rgba(240, 201, 107, 0.08);
  pointer-events: none;
}

.hub-entry-split:hover .hub-entry-panel img {
  transform: scale(1.03);
  filter: saturate(0.90) brightness(0.88);
}

.hub-entry-split:hover .hub-entry-panel::after {
  opacity: 0.94;
}

.hub-entry-panel:hover img {
  transform: scale(1.07);
  filter: saturate(1.03) brightness(0.98);
}

.hub-entry-panel:hover::after {
  opacity: 0.78;
}

.hub-entry-content {
  position: absolute;
  inset: auto 0 0 0;
  z-index: 3;
  padding: 2rem;
  transition: transform 0.26s ease, opacity 0.26s ease;
}

.hub-entry-split:hover .hub-entry-content {
  opacity: 0.93;
}

.hub-entry-panel:hover .hub-entry-content {
  transform: translateY(-3px);
  opacity: 1;
}

.hub-entry-eyebrow {
  display: inline-block;
  margin: 0 0 0.85rem;
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.76);
}

.hub-entry-panel--membership .hub-entry-eyebrow {
  color: rgba(240, 201, 107, 0.88);
}

.hub-entry-panel--play .hub-entry-eyebrow {
  color: rgba(104, 199, 255, 0.92);
}

.hub-entry-split .hub-location-name {
  margin: 0 0 1rem;
  font-size: clamp(2.35rem, 3vw, 3.4rem);
  line-height: 0.92;
  text-transform: none;
}

.hub-entry-split .hub-location-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0.82rem 1.2rem;
  border-radius: 999px;
  border: 1px solid rgba(240, 201, 107, 0.18);
  background: linear-gradient(135deg, var(--hub-gold-300) 0%, var(--hub-gold-500) 100%);
  color: #081525;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  box-shadow:
    0 12px 28px rgba(215, 169, 63, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.20);
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease,
    filter 0.2s ease;
}

.hub-entry-split .hub-location-link:hover {
  transform: translateY(-2px);
  box-shadow:
    0 16px 34px rgba(215, 169, 63, 0.30),
    inset 0 1px 0 rgba(255, 255, 255, 0.24);
  filter: brightness(1.03);
}

/* ===== BENEFITS ===== */
.hub-benefits-head,
.hub-coaching-head,
.hub-store-section-head {
  max-width: 58rem;
  margin: 0 auto 1.6rem;
  text-align: center;
}

.hub-benefits-intro,
.hub-coaching-subtitle,
.hub-shop-intro {
  max-width: 44rem;
  margin: 0 auto;
  color: var(--hub-text-soft);
}

.hub-benefits-head .hub-section-title {
  display: inline-block;
}

.hub-benefits-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem;
}

.hub-benefit {
  --hub-benefit-image: none;
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: 320px;
  padding: 1.45rem;
  border: 1px solid rgba(240, 201, 107, 0.28);
  border-radius: 28px;
  background-image:
    linear-gradient(180deg, rgba(5, 16, 29, 0.22) 0%, rgba(5, 16, 29, 0.62) 52%, rgba(5, 16, 29, 0.94) 100%),
    var(--hub-benefit-image),
    linear-gradient(180deg, rgba(9, 24, 43, 0.82) 0%, rgba(8, 21, 38, 0.68) 100%);
  background-size: cover, cover, auto;
  background-position: center, center, center;
  background-repeat: no-repeat;
  background-clip: padding-box;
  -webkit-background-clip: padding-box;
  backdrop-filter: blur(5px);
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.16);
  overflow: hidden;
  isolation: isolate;
  clip-path: inset(0 round 28px);
  -webkit-clip-path: inset(0 round 28px);
  transform: translateZ(0);
  transition:
    transform 0.28s ease,
    box-shadow 0.28s ease,
    border-color 0.28s ease,
    background 0.28s ease;
}

.hub-benefit::before,
.hub-shop-card::before,
.hub-coaching-card::before,
.hub-store-card::before,
.hub-membership-v3-media::before,
.hub-membership-v3-info-card::before,
.hub-coaching-info-card::before,
.hub-membership-overview-item::before {
  content: "";
  position: absolute;
  inset: 0;
  padding: 1px;
  border-radius: inherit;
  background: linear-gradient(135deg, rgba(246, 223, 159, 0.56) 0%, rgba(215, 169, 63, 0.26) 45%, rgba(104, 199, 255, 0.16) 100%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

.hub-benefit::after {
  content: "";
  position: absolute;
  inset: auto -10% -25% auto;
  width: 180px;
  height: 180px;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(240, 201, 107, 0.14) 0%, rgba(240, 201, 107, 0) 72%);
  opacity: 0;
  transition: opacity 0.28s ease;
  pointer-events: none;
}

.hub-benefit:hover {
  transform: translateY(-4px);
  border-color: rgba(240, 201, 107, 0.48);
  box-shadow: 0 22px 48px rgba(0, 0, 0, 0.26);
}

.hub-benefit:hover::after {
  opacity: 1;
}

.hub-benefit > div {
  position: relative;
  z-index: 3;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  width: 100%;
}

.hub-benefit h3 {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.85rem;
  line-height: 0.95;
  text-transform: uppercase;
  color: var(--hub-gold-400);
  text-shadow:
    0 0 6px rgba(240, 201, 107, 0.14),
    0 0 14px rgba(240, 201, 107, 0.08);
  transition: transform 0.28s ease;
}

.hub-benefit p {
  margin: 0;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transform: translateY(10px);
  color: rgba(255, 255, 255, 0.88);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
  transition:
    opacity 0.28s ease,
    transform 0.28s ease,
    max-height 0.28s ease,
    margin-top 0.28s ease;
}

.hub-benefit:hover h3 {
  transform: translateY(-2px);
}

.hub-benefit:hover p {
  margin-top: 0.85rem;
  max-height: 160px;
  opacity: 1;
  transform: translateY(0);
}

.hub-benefit--image h3,
.hub-benefit--image p {
  text-shadow:
    0 2px 10px rgba(0, 0, 0, 0.45),
    0 1px 2px rgba(0, 0, 0, 0.35);
}

.hub-benefits-grid .hub-benefit:nth-child(1) {
  background-position: center, center 24%, center;
}

.hub-benefits-grid .hub-benefit:nth-child(2) {
  background-position: center, center 20%, center;
}

.hub-benefits-grid .hub-benefit:nth-child(3) {
  background-position: center, center 28%, center;
}

.hub-benefits-grid .hub-benefit:nth-child(4) {
  background-position: center, center 26%, center;
}

.hub-benefit[href] {
  display: flex !important;
  align-items: flex-end;
  color: inherit;
  text-decoration: none;
  cursor: pointer;
}

/* ===== PROMO / FEATURE CARDS ===== */
.hub-promo-card {
  position: relative;
  display: grid;
  grid-template-columns: minmax(320px, 0.9fr) minmax(0, 1.1fr);
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 34px;
  background: linear-gradient(180deg, rgba(8, 20, 37, 0.92) 0%, rgba(7, 18, 33, 0.82) 100%);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.40);
}

.hub-promo-card::before,
.hub-newsletter::before,
.hub-shop-banner::before {
  content: "";
  position: absolute;
  inset: 0;
  padding: 1px;
  border-radius: inherit;
  background: linear-gradient(135deg, rgba(104, 199, 255, 0.18) 0%, rgba(240, 201, 107, 0.14) 46%, rgba(6, 19, 38, 0.06) 100%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

.hub-promo-card::after,
.hub-newsletter::after {
  content: "";
  position: absolute;
  inset: -16px;
  z-index: -1;
  border-radius: inherit;
  background:
    radial-gradient(circle at 18% 24%, rgba(104, 199, 255, 0.10), transparent 28%),
    radial-gradient(circle at 82% 78%, rgba(240, 201, 107, 0.08), transparent 28%);
  filter: blur(16px);
  opacity: 0.42;
  pointer-events: none;
}

.hub-promo-media {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.hub-promo-media::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(6, 19, 38, 0.16) 0%, rgba(6, 19, 38, 0.42) 100%),
    linear-gradient(90deg, rgba(6, 19, 38, 0.08) 0%, rgba(6, 19, 38, 0.12) 38%, rgba(6, 19, 38, 0.58) 100%),
    radial-gradient(circle at 78% 18%, rgba(104, 199, 255, 0.10), transparent 28%);
}

.hub-promo-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.92) brightness(0.84);
}

.hub-promo-copy {
  padding: clamp(1.75rem, 3vw, 2.8rem);
}

.hub-promo-title {
  margin: 0 0 0.8rem;
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 5vw, 4.5rem);
  line-height: 0.94;
  text-transform: uppercase;
  color: var(--hub-white);
}

.hub-promo-text {
  margin: 0 0 1.15rem;
  color: var(--hub-text-soft);
}

.hub-promo-card--play {
  grid-template-columns: minmax(320px, 0.85fr) minmax(0, 1.15fr);
  background: linear-gradient(135deg, rgba(6, 19, 38, 0.96) 0%, rgba(8, 24, 44, 0.92) 46%, rgba(7, 18, 33, 0.94) 100%);
}

.hub-promo-card--play .hub-promo-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.hub-promo-card--play .hub-promo-title {
  max-width: 12ch;
}

.hub-promo-card--play .hub-promo-text {
  max-width: 34rem;
}

.hub-promo-media--play {
  background: linear-gradient(180deg, rgba(7, 21, 40, 0.88) 0%, rgba(7, 21, 40, 0.78) 100%);
}

.hub-promo-media--play::after {
  background:
    linear-gradient(180deg, rgba(6, 19, 38, 0.08) 0%, rgba(6, 19, 38, 0.26) 100%),
    linear-gradient(90deg, rgba(6, 19, 38, 0.05) 0%, rgba(6, 19, 38, 0.10) 34%, rgba(6, 19, 38, 0.42) 100%),
    radial-gradient(circle at 78% 18%, rgba(104, 199, 255, 0.08), transparent 28%);
}

.hub-promo-media--play img {
  object-position: center 26%;
  filter: saturate(0.98) brightness(0.92);
}

/* ===== FRONT PAGE SHOP PANEL ===== */
.hub-promo-card--shop {
  grid-template-columns: minmax(320px, 0.92fr) minmax(0, 1.08fr);
  align-items: center;
}

.hub-front-shop-media {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: clamp(1rem, 2vw, 1.6rem);
}

.hub-front-shop-grid {
  display: grid;
  grid-template-columns: repeat(3, 170px);
  gap: 1rem;
  width: auto;
  justify-content: flex-end;
  align-items: center;
}

.hub-front-shop-item {
  width: 170px;
  height: 260px;
  padding: 0.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: 24px;
  border: 1px solid rgba(240, 201, 107, 0.18);
  background: linear-gradient(180deg, rgba(7, 21, 40, 0.82) 0%, rgba(7, 18, 33, 0.70) 100%);
  box-shadow:
    0 18px 40px rgba(0, 0, 0, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.03);
}

.hub-front-shop-item img {
  width: auto;
  height: auto;
  max-width: 118%;
  max-height: 188px;
  object-fit: contain;
}

.hub-front-shop-item:nth-child(1) img,
.hub-front-shop-item:nth-child(3) img {
  max-width: 112%;
  max-height: 190px;
}

.hub-front-shop-item:nth-child(2) img {
  max-width: 126%;
  max-height: 184px;
}

/* ===== NEWSLETTER ===== */
.hub-newsletter {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(240, 201, 107, 0.10);
  border-radius: 36px;
  background: linear-gradient(135deg, rgba(18, 33, 53, 0.96) 0%, rgba(10, 22, 39, 0.98) 100%);
  box-shadow: 0 26px 60px rgba(0, 0, 0, 0.30);
}

.hub-newsletter::after {
  opacity: 0.46;
  background:
    radial-gradient(circle at 16% 24%, rgba(240, 201, 107, 0.10), transparent 28%),
    radial-gradient(circle at 84% 76%, rgba(104, 199, 255, 0.08), transparent 28%);
}

.hub-newsletter-inner {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(300px, 0.9fr);
  gap: 1.4rem;
  align-items: center;
  padding: clamp(1.75rem, 3vw, 2.8rem);
}

.hub-newsletter-title {
  margin: 0 0 0.8rem;
  font-family: var(--font-display);
  font-size: clamp(2.6rem, 6vw, 5rem);
  line-height: 0.92;
  text-transform: uppercase;
  color: var(--hub-white);
}

.hub-newsletter p,
.hub-footer-column a,
.hub-footer-bottom {
  color: var(--hub-text-soft);
}

.hub-newsletter-form {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem;
  justify-content: flex-end;
}

.hub-newsletter-form input[type="email"] {
  flex: 1 1 240px;
  min-height: 48px;
  padding: 0 1rem;
  border: 1px solid var(--hub-border);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  color: var(--hub-white);
}

.hub-newsletter-form input[type="email"]::placeholder {
  color: rgba(255, 255, 255, 0.5);
}

.hub-newsletter-copy {
  min-width: 0;
}

.hub-newsletter-side {
  display: grid;
  gap: 1rem;
  align-items: start;
}

.hub-newsletter-socials {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 0.85rem;
}

.hub-newsletter-socials-label {
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--hub-gold-400);
}

.hub-newsletter-social-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
  align-items: center;
  justify-content: flex-end;
}

.hub-newsletter-social-links a,
.hub-footer-socials a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  padding: 0.62rem 0.9rem;
  border-radius: 999px;
  border: 1px solid rgba(240, 201, 107, 0.18);
  background: rgba(255, 255, 255, 0.04);
  color: var(--hub-text-soft);
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transition:
    transform 0.22s ease,
    background 0.22s ease,
    border-color 0.22s ease,
    color 0.22s ease;
}

.hub-newsletter-social-links a:hover,
.hub-footer-socials a:hover {
  transform: translateY(-2px);
  background: rgba(240, 201, 107, 0.08);
  border-color: rgba(240, 201, 107, 0.36);
  color: var(--hub-white);
}

/* ===== FOOTER ===== */
.hub-footer {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  padding: 1.5rem 0 2rem;
}

.hub-footer::before {
  content: "BLUEBOX";
  position: absolute;
  top: 52%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 0;
  font-family: var(--font-display);
  font-size: clamp(7rem, 20vw, 18rem);
  line-height: 0.82;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
  color: rgba(255, 255, 255, 0.05);
  pointer-events: none;
  user-select: none;
}

.hub-footer .container {
  position: relative;
  z-index: 1;
}

.hub-footer-grid {
  display: grid;
  grid-template-columns: 1.2fr repeat(3, minmax(0, 1fr));
  gap: 1.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--hub-border);
}

.hub-footer-grid--simple {
  grid-template-columns: 1fr 1fr 1fr 1fr;
  align-items: start;
}

.hub-footer-brand {
  max-width: none;
}

.hub-footer-column h4,
.hub-footer-brand h4 {
  margin: 0 0 1rem;
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--hub-gold-400);
}

.hub-footer-column li + li {
  margin-top: 0.72rem;
}

.hub-footer-column a {
  transition: color 0.2s ease;
}

.hub-footer-column a:hover {
  color: var(--hub-white);
}

.hub-footer-bottom {
  margin-top: 1.25rem;
  font-size: 0.9rem;
}

.hub-footer-bottom p {
  margin: 0;
}

.hub-footer-socials {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: center;
  justify-content: center;
  margin-top: 1.25rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--hub-border);
}

.hub-footer-socials a {
  min-height: 42px;
  padding: 0.7rem 1rem;
  font-size: 0.78rem;
}

/* ===== GENERIC PAGE ===== */
.hub-page-content {
  max-width: 900px;
  margin: 0 auto;
  padding: clamp(1.5rem, 3vw, 2.5rem);
  border-radius: 30px;
  border: 1px solid rgba(255, 255, 255, 0.10);
  background: linear-gradient(180deg, rgba(8, 20, 37, 0.88) 0%, rgba(7, 18, 33, 0.78) 100%);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.24);
}

.hub-page-header {
  margin-bottom: 1.25rem;
}

.hub-page-body {
  color: var(--hub-text-soft);
}

.hub-page-body > *:first-child {
  margin-top: 0;
}

.hub-page-body > *:last-child {
  margin-bottom: 0;
}

/* ===== SHOP / STORE PAGE ===== */
.hub-shop-hero::before,
.hub-coaching-hero::before,
.hub-coaching-cta-wrap::before,
.hub-membership-v3-hero::before,
.hub-membership-v3-cta-wrap::before {
  content: "";
  position: absolute;
  left: 50%;
  width: 100vw;
  transform: translateX(-50%);
  pointer-events: none;
  z-index: -1;
}

.hub-shop-hero::before,
.hub-coaching-hero::before,
.hub-membership-v3-hero::before {
  top: 0.85rem;
  bottom: 0.85rem;
  background:
    radial-gradient(circle at 18% 22%, rgba(104, 199, 255, 0.12), transparent 26%),
    radial-gradient(circle at 82% 20%, rgba(240, 201, 107, 0.10), transparent 24%),
    linear-gradient(135deg, rgba(8, 24, 44, 0.95) 0%, rgba(14, 38, 68, 0.82) 38%, rgba(7, 21, 40, 0.96) 100%);
  border-top: 1px solid rgba(240, 201, 107, 0.10);
  border-bottom: 1px solid rgba(104, 199, 255, 0.08);
}

.hub-shop-hero-inner {
  max-width: 54rem;
  margin: 0 auto;
  text-align: center;
}

.hub-shop-grid,
.hub-coaching-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem;
}

.hub-shop-card,
.hub-coaching-card {
  position: relative;
  min-height: 220px;
  padding: 1.5rem;
  border-radius: 28px;
  border: 1px solid rgba(240, 201, 107, 0.22);
  background: linear-gradient(180deg, rgba(7, 21, 40, 0.88) 0%, rgba(8, 20, 37, 0.78) 100%);
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.20);
  overflow: hidden;
}

.hub-coaching-card {
  min-height: 240px;
}

.hub-shop-card h3,
.hub-coaching-card h3,
.hub-membership-v3-info-card h3,
.hub-coaching-info-card h3 {
  margin: 0 0 0.85rem;
  font-family: var(--font-display);
  font-size: 1.9rem;
  line-height: 0.95;
  text-transform: uppercase;
  color: var(--hub-gold-400);
}

.hub-membership-v3-info-card h3,
.hub-coaching-info-card h3 {
  font-size: 1.5rem;
  line-height: 1;
}

.hub-shop-card p,
.hub-coaching-card p {
  margin: 0;
  color: var(--hub-text-soft);
}

.hub-shop-banner {
  position: relative;
  overflow: hidden;
  border-radius: 34px;
  border: 1px solid rgba(255, 255, 255, 0.10);
  background: linear-gradient(180deg, rgba(8, 20, 37, 0.92) 0%, rgba(7, 18, 33, 0.82) 100%);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.40);
}

.hub-shop-banner-copy {
  max-width: 46rem;
  padding: clamp(1.75rem, 3vw, 2.8rem);
}

.hub-shop-actions,
.hub-store-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem;
}

.hub-shop-note {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) auto;
  gap: 1.25rem;
  align-items: center;
  padding: clamp(1.5rem, 3vw, 2.3rem);
  border-radius: 30px;
  border: 1px solid rgba(240, 201, 107, 0.18);
  background: linear-gradient(180deg, rgba(8, 20, 37, 0.92) 0%, rgba(7, 18, 33, 0.82) 100%);
  box-shadow:
    0 24px 60px rgba(0, 0, 0, 0.24),
    inset 0 1px 0 rgba(255, 255, 255, 0.03);
}

.hub-shop-note-copy .hub-promo-title {
  margin-bottom: 0.7rem;
}

.hub-store-grid {
  display: grid;
  gap: 1rem;
}

.hub-store-grid--apparel,
.hub-store-grid--accessories {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.hub-store-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 100%;
  border-radius: 28px;
  border: 1px solid rgba(240, 201, 107, 0.20);
  background: linear-gradient(180deg, rgba(7, 21, 40, 0.90) 0%, rgba(8, 20, 37, 0.80) 100%);
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.20);
  overflow: hidden;
}

.hub-store-media {
  position: relative;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  background:
    radial-gradient(circle at top, rgba(104, 199, 255, 0.08), transparent 36%),
    linear-gradient(180deg, rgba(6, 19, 38, 0.24) 0%, rgba(6, 19, 38, 0.08) 100%);
}

.hub-store-badge {
  position: absolute;
  top: 1rem;
  left: 1rem;
  z-index: 4;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 30px;
  padding: 0.35rem 0.7rem;
  border-radius: 999px;
  border: 1px solid rgba(240, 201, 107, 0.24);
  background: rgba(5, 16, 29, 0.78);
  color: var(--hub-gold-400);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.hub-store-image {
  position: absolute;
  inset: 1rem;
  width: calc(100% - 2rem);
  height: calc(100% - 2rem);
  object-fit: contain;
  opacity: 0;
  transform: scale(0.985);
  transition:
    opacity 0.24s ease,
    transform 0.24s ease;
}

.hub-store-image.is-active {
  opacity: 1;
  transform: scale(1);
}

.hub-store-toggle {
  position: absolute;
  right: 1rem;
  bottom: 1rem;
  z-index: 4;
  display: inline-flex;
  gap: 0.35rem;
  padding: 0.35rem;
  border-radius: 999px;
  background: rgba(5, 16, 29, 0.82);
  border: 1px solid rgba(240, 201, 107, 0.16);
  backdrop-filter: blur(8px);
}

.hub-store-toggle button {
  min-height: 32px;
  padding: 0.45rem 0.75rem;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--hub-text-soft);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.hub-store-toggle button.is-active {
  background: linear-gradient(135deg, var(--hub-gold-300) 0%, var(--hub-gold-500) 100%);
  color: #071322;
}

.hub-store-copy {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: 1.35rem;
}

.hub-store-title {
  margin: 0 0 0.75rem;
  font-family: var(--font-display);
  font-size: 2rem;
  line-height: 0.95;
  text-transform: uppercase;
  color: var(--hub-white);
}

.hub-store-summary {
  margin: 0;
  color: var(--hub-text-soft);
}

.hub-store-actions {
  gap: 0.75rem;
  margin-top: 1.15rem;
}

.hub-store-actions .hub-btn {
  width: auto;
}

body.page-template-default .hub-store-section:first-of-type,
body.page-template-default .hub-section--feature:first-of-type {
  padding-top: 2rem;
}

/* ===== COACHING PAGE ===== */
.hub-coaching-shell,
.hub-membership-v3-shell {
  display: grid;
  gap: 1.5rem;
}

.hub-coaching-shell {
  display: block;
}

.hub-coaching-copy,
.hub-coaching-hero .hub-coaching-copy {
  max-width: 100% !important;
}

.hub-coaching-title,
.hub-membership-v3-title {
  max-width: none;
  margin: 0 0 0.75rem;
  font-size: clamp(2.9rem, 5.2vw, 5.8rem);
  line-height: 0.9;
  letter-spacing: 0.01em;
  white-space: normal;
  text-wrap: balance;
}

.hub-coaching-intro,
.hub-membership-v3-intro {
  max-width: 58rem;
  margin: 0 0 1.1rem;
  font-size: 1.06rem;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.78);
}

.hub-coaching-actions,
.hub-membership-v3-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem;
  margin-top: 0.25rem;
}

.hub-coaching-actions--center,
.hub-membership-v3-actions--center {
  justify-content: center;
}

.hub-coaching-hero .hub-coaching-actions {
  margin-top: 1.25rem;
  justify-content: flex-start;
}

.hub-coaching-hero .hub-btn {
  width: auto;
}

.hub-coaching-approach .hub-promo-media img {
  object-position: center 28%;
}

.hub-coaching-hero-media img {
  object-position: center 15% !important;
}

.hub-coaching-why-grid,
.hub-membership-v3-why-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(340px, 0.92fr);
  gap: 1.5rem;
  align-items: start;
  padding: clamp(1.75rem, 3vw, 2.4rem);
  border-radius: 34px;
  border: 1px solid rgba(255, 255, 255, 0.10);
  background: linear-gradient(180deg, rgba(8, 20, 37, 0.92) 0%, rgba(7, 18, 33, 0.82) 100%);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.40);
}

.hub-coaching-info-grid,
.hub-membership-v3-info-grid {
  display: grid;
  gap: 1rem;
}

.hub-coaching-info-card,
.hub-membership-v3-info-card {
  position: relative;
  padding: 1.35rem 1.35rem 1.2rem;
  border-radius: 24px;
  border: 1px solid rgba(240, 201, 107, 0.20);
  background: linear-gradient(180deg, rgba(7, 21, 40, 0.78) 0%, rgba(7, 21, 40, 0.56) 100%);
  overflow: hidden;
}

.hub-coaching-info-card ul,
.hub-membership-v3-info-card ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.hub-coaching-info-card li,
.hub-membership-v3-info-card li {
  position: relative;
  padding-left: 1rem;
  color: var(--hub-text-soft);
}

.hub-coaching-info-card li::before,
.hub-membership-v3-info-card li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62rem;
  width: 0.42rem;
  height: 0.42rem;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--hub-gold-300) 0%, var(--hub-gold-500) 100%);
}

.hub-coaching-info-card li + li,
.hub-membership-v3-info-card li + li {
  margin-top: 0.68rem;
}

.hub-coaching-cta-wrap::before,
.hub-membership-v3-cta-wrap::before {
  top: 0.85rem;
  bottom: 0.85rem;
  background:
    radial-gradient(circle at 18% 78%, rgba(240, 201, 107, 0.12), transparent 24%),
    radial-gradient(circle at 82% 18%, rgba(104, 199, 255, 0.08), transparent 22%),
    linear-gradient(135deg, rgba(10, 22, 39, 0.94) 0%, rgba(20, 34, 54, 0.80) 34%, rgba(10, 22, 39, 0.94) 100%);
}

.hub-coaching-cta,
.hub-membership-v3-cta {
  max-width: 60rem;
  margin: 0 auto;
  text-align: center;
  padding: clamp(2rem, 4vw, 3rem);
  border-radius: 34px;
  border: 1px solid rgba(240, 201, 107, 0.18);
  background: linear-gradient(180deg, rgba(8, 20, 37, 0.92) 0%, rgba(7, 18, 33, 0.86) 100%);
  box-shadow:
    0 26px 64px rgba(0, 0, 0, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.03);
}

/* ===== MEMBERSHIP PAGE ===== */
.hub-membership-v3-hero,
.hub-coaching-hero {
  padding-top: clamp(1.2rem, 2vw, 2rem);
  padding-bottom: clamp(2.6rem, 4vw, 3.8rem);
}

.hub-membership-v3-shell--simple {
  display: block;
}

.hub-membership-v3-shell--simple .hub-membership-v3-copy,
.hub-membership-v3-copy {
  max-width: 100%;
}

.hub-membership-v3-points,
.hub-coaching-points {
  max-width: 46rem;
  margin: 0 0 1rem;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0.55rem;
}

.hub-membership-v3-points li {
  padding-left: 0;
  font-size: 1.02rem;
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.84);
}

.hub-membership-v3-points li::before,
.hub-membership-v3-points li::after {
  display: none !important;
  content: none !important;
}

.hub-membership-v3-actions--below {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  margin-top: 0.5rem;
}

.hub-membership-v3-actions--below .hub-btn {
  width: auto;
  min-width: 280px;
}

.hub-membership-v3-actions--inside {
  margin-top: 1.25rem;
  justify-content: flex-start;
}

.hub-membership-v3-media-wrap {
  position: relative;
}

.hub-membership-v3-media {
  position: relative;
  overflow: hidden;
  border-radius: 34px;
  border: 1px solid rgba(240, 201, 107, 0.22);
  background: linear-gradient(180deg, rgba(7, 21, 40, 0.82) 0%, rgba(7, 21, 40, 0.92) 100%);
  box-shadow:
    0 28px 72px rgba(0, 0, 0, 0.34),
    inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.hub-membership-v3-media::before {
  z-index: 4;
}

.hub-membership-v3-media img {
  width: 100%;
  min-height: 560px;
  height: 560px;
  object-fit: cover;
  object-position: center 16% !important;
  filter: saturate(0.96) brightness(0.92);
}

.hub-membership-v3-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(6, 19, 38, 0.08) 0%, rgba(6, 19, 38, 0.22) 42%, rgba(4, 14, 26, 0.82) 100%),
    linear-gradient(90deg, rgba(104, 199, 255, 0.05) 0%, rgba(240, 201, 107, 0.03) 100%);
  z-index: 1;
  pointer-events: none;
}

.hub-membership-v3-overlay {
  position: absolute;
  left: 1.25rem;
  right: 1.25rem;
  bottom: 1.25rem;
  z-index: 3;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.9rem;
}

.hub-membership-v3-benefit {
  position: relative;
  min-height: 132px;
  padding: 1.1rem 1rem;
  border-radius: 22px;
  border: 1px solid rgba(240, 201, 107, 0.22);
  background: rgba(5, 16, 29, 0.72);
  backdrop-filter: blur(10px);
  box-shadow:
    0 18px 36px rgba(0, 0, 0, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.04);
  transition:
    transform 0.24s ease,
    border-color 0.24s ease,
    background 0.24s ease,
    box-shadow 0.24s ease;
}

.hub-membership-v3-benefit:hover {
  transform: translateY(-4px);
  border-color: rgba(240, 201, 107, 0.42);
  background: rgba(5, 16, 29, 0.82);
  box-shadow:
    0 22px 42px rgba(0, 0, 0, 0.24),
    0 0 18px rgba(240, 201, 107, 0.08);
}

.hub-membership-v3-benefit-tag,
.hub-membership-overview-tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  margin-bottom: 0.8rem;
  border-radius: 999px;
  background: rgba(240, 201, 107, 0.14);
  border: 1px solid rgba(240, 201, 107, 0.28);
  color: var(--hub-gold-400);
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.08em;
}

.hub-membership-v3-benefit h3 {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.45rem;
  line-height: 0.95;
  text-transform: uppercase;
  color: var(--hub-white);
}

.hub-membership-v3-benefit p {
  margin: 0;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transform: translateY(8px);
  color: rgba(255, 255, 255, 0.88);
  transition:
    opacity 0.24s ease,
    transform 0.24s ease,
    max-height 0.24s ease,
    margin-top 0.24s ease;
}

.hub-membership-v3-benefit:hover p {
  margin-top: 0.7rem;
  max-height: 120px;
  opacity: 1;
  transform: translateY(0);
}

.hub-membership-overview {
  margin: 1.2rem 0 1.4rem;
  padding: clamp(1.2rem, 2.5vw, 1.8rem);
  border-radius: 28px;
  border: 1px solid rgba(240, 201, 107, 0.16);
  background: linear-gradient(180deg, rgba(8, 20, 37, 0.72) 0%, rgba(7, 18, 33, 0.54) 100%);
  box-shadow:
    0 18px 44px rgba(0, 0, 0, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.03);
}

.hub-membership-overview--hero {
  margin: 1.2rem 0 0;
}

.hub-coaching-hero .hub-membership-overview,
.hub-coaching-hero .hub-membership-overview--hero {
  width: 100%;
  max-width: 100% !important;
  margin: 0.6rem 0 0 !important;
}

.hub-membership-overview-head {
  margin-bottom: 1.15rem;
}

.hub-membership-overview--hero .hub-kicker,
.hub-coaching-hero .hub-membership-overview--hero .hub-kicker {
  margin: 0 0 0.85rem;
}

.hub-membership-overview--hero .hub-membership-v3-title,
.hub-coaching-hero .hub-membership-overview--hero .hub-coaching-title {
  margin: 0 0 1rem;
}

.hub-membership-overview--hero .hub-membership-overview-lead,
.hub-coaching-hero .hub-membership-overview--hero .hub-membership-overview-lead {
  margin: 0 0 1.15rem;
  max-width: 58rem;
}

.hub-membership-overview-lead {
  margin: 0 0 1.1rem;
  max-width: 52rem;
  color: var(--hub-text-soft);
  font-size: 1.02rem;
  line-height: 1.6;
}

.hub-membership-overview-grid,
.hub-coaching-hero .hub-membership-overview-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.9rem;
}

.hub-membership-overview-item,
.hub-coaching-hero .hub-membership-overview-item {
  position: relative;
  padding: 1.15rem 1.1rem 1rem;
  border-radius: 22px;
  border: 1px solid rgba(240, 201, 107, 0.16);
  background: linear-gradient(180deg, rgba(7, 21, 40, 0.72) 0%, rgba(7, 21, 40, 0.50) 100%);
  overflow: hidden;
}

.hub-membership-overview-item h3,
.hub-coaching-hero .hub-membership-overview-item h3 {
  margin: 0 0 0.65rem;
  font-family: var(--font-display);
  font-size: 1.45rem;
  line-height: 0.98;
  text-transform: uppercase;
  color: var(--hub-white);
}

.hub-membership-overview-item p,
.hub-coaching-hero .hub-membership-overview-item p {
  margin: 0;
  color: var(--hub-text-soft);
  line-height: 1.5;
}

/* ===== MEMBERSHIP PRICING / TABLES ===== */
.hub-membership-pricing-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
  justify-content: center;
  margin-bottom: 1.35rem;
}

.hub-membership-pricing-nav a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0.72rem 1rem;
  border-radius: 999px;
  border: 1px solid var(--hub-border-strong);
  background: rgba(255, 255, 255, 0.04);
  color: var(--hub-white);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  transition:
    transform 0.22s ease,
    background 0.22s ease,
    border-color 0.22s ease;
}

.hub-membership-pricing-nav a:hover {
  transform: translateY(-2px);
  background: rgba(240, 201, 107, 0.10);
  border-color: rgba(240, 201, 107, 0.42);
}

.hub-membership-copy-card {
  padding: clamp(1.35rem, 2.6vw, 2rem);
  border-radius: 28px;
  border: 1px solid rgba(240, 201, 107, 0.18);
  background: linear-gradient(180deg, rgba(8, 20, 37, 0.92) 0%, rgba(7, 18, 33, 0.82) 100%);
  box-shadow:
    0 24px 60px rgba(0, 0, 0, 0.24),
    inset 0 1px 0 rgba(255, 255, 255, 0.03);
}

.hub-membership-copy-card--tight {
  margin-bottom: 1.25rem;
}

.hub-membership-copy-card p {
  margin: 0;
  color: var(--hub-text-soft);
}

.hub-membership-copy-card p + p {
  margin-top: 0.95rem;
}

.hub-membership-table-head {
  max-width: 66rem;
  margin: 0 auto 1.25rem;
  text-align: left;
}

.hub-membership-table-wrap {
  overflow-x: auto;
  border-radius: 28px;
  border: 1px solid rgba(240, 201, 107, 0.22);
  background: linear-gradient(180deg, rgba(7, 21, 40, 0.82) 0%, rgba(7, 21, 40, 0.92) 100%);
  box-shadow:
    0 24px 58px rgba(0, 0, 0, 0.24),
    inset 0 1px 0 rgba(255, 255, 255, 0.03);
  scrollbar-width: thin;
}

.hub-membership-table {
  width: 100%;
  min-width: 980px;
  border-collapse: separate;
  border-spacing: 0;
}

.hub-membership-table th,
.hub-membership-table td {
  padding: 1rem 0.95rem;
  vertical-align: top;
  border-right: 2px solid rgba(7, 21, 40, 0.96);
  border-bottom: 2px solid rgba(7, 21, 40, 0.96);
}

.hub-membership-table tr > *:last-child {
  border-right: 0;
}

.hub-membership-table tbody tr:last-child td {
  border-bottom: 0;
}

.hub-membership-table thead th {
  background: linear-gradient(180deg, rgba(57, 68, 116, 0.96) 0%, rgba(74, 84, 132, 0.96) 100%);
  color: var(--hub-white);
  font-size: 0.9rem;
  font-weight: 800;
  line-height: 1.2;
}

.hub-membership-table tbody td {
  background: linear-gradient(180deg, rgba(240, 201, 107, 0.96) 0%, rgba(232, 190, 79, 0.96) 100%);
  color: #071322;
  font-size: 0.98rem;
  line-height: 1.35;
}

.hub-membership-v3-actions--spaced {
  margin-top: 1.25rem;
}

.hub-coaching-table-wrap .hub-membership-table {
  min-width: 860px;
}

.hub-coaching-table th:nth-child(1),
.hub-coaching-table td:nth-child(1) {
  width: 21%;
}

.hub-coaching-table th:nth-child(2),
.hub-coaching-table td:nth-child(2) {
  width: 31%;
}

.hub-coaching-table th:nth-child(3),
.hub-coaching-table td:nth-child(3) {
  width: 20%;
}

.hub-coaching-table th:nth-child(4),
.hub-coaching-table td:nth-child(4) {
  width: 28%;
}

/* ===== FRONT PAGE COMMUNITY SHOWCASE ===== */
body.is-bluebox-front-page .hub-front-community-fun {
  padding-top: clamp(2.5rem, 4vw, 4.5rem);
  padding-bottom: clamp(2.8rem, 4.5vw, 5rem);
}

body.is-bluebox-front-page .hub-front-community-fun .container {
  width: min(100% - 1.25rem, 1320px);
}

.hub-community-fun-showcase {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: clamp(1.2rem, 2.4vw, 2rem);
  border-radius: 36px;
  border: 1px solid rgba(104, 199, 255, 0.18);
  background:
    radial-gradient(circle at 50% 32%, rgba(104, 199, 255, 0.28), transparent 30rem),
    radial-gradient(circle at 18% 72%, rgba(104, 199, 255, 0.14), transparent 20rem),
    radial-gradient(circle at 84% 70%, rgba(240, 201, 107, 0.10), transparent 18rem),
    linear-gradient(180deg, rgba(5, 17, 34, 0.98) 0%, rgba(6, 22, 43, 0.98) 50%, rgba(4, 14, 29, 0.98) 100%);
  box-shadow:
    0 30px 80px rgba(0, 0, 0, 0.34),
    inset 0 1px 0 rgba(255, 255, 255, 0.04),
    0 0 42px rgba(104, 199, 255, 0.08);
}

.hub-community-fun-showcase::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 42%;
  z-index: -1;
  width: min(58rem, 82vw);
  height: min(24rem, 42vw);
  transform: translate(-50%, -50%);
  border-radius: 999px;
  background: radial-gradient(circle, rgba(104, 199, 255, 0.34) 0%, rgba(104, 199, 255, 0.14) 38%, rgba(104, 199, 255, 0) 72%);
  filter: blur(18px);
  opacity: 0.88;
  animation: hub-community-fun-glow 5.5s ease-in-out infinite alternate;
  pointer-events: none;
}

@keyframes hub-community-fun-glow {
  from {
    opacity: 0.58;
    transform: translate(-50%, -50%) scale(0.96);
  }

  to {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.05);
  }
}

.hub-community-fun-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

.hub-community-fun-showcase > *:not(.hub-community-fun-bg) {
  position: relative;
  z-index: 2;
}

.hub-community-sparkle {
  position: absolute;
  z-index: 1;
  color: var(--hub-blue-400);
  font-size: clamp(1.3rem, 2vw, 2.2rem);
  line-height: 1;
  opacity: 0.72;
  text-shadow:
    0 0 10px rgba(104, 199, 255, 0.58),
    0 0 24px rgba(104, 199, 255, 0.30);
  animation: hub-community-sparkle-float 4.8s ease-in-out infinite;
}

.hub-community-sparkle--one {
  top: 10%;
  left: 8%;
  animation-delay: 0s;
}

.hub-community-sparkle--two {
  top: 18%;
  right: 9%;
  color: var(--hub-gold-400);
  text-shadow:
    0 0 10px rgba(240, 201, 107, 0.48),
    0 0 22px rgba(240, 201, 107, 0.24);
  animation-delay: 0.9s;
}

.hub-community-sparkle--three {
  bottom: 22%;
  left: 7%;
  font-size: clamp(1rem, 1.5vw, 1.7rem);
  animation-delay: 1.6s;
}

.hub-community-sparkle--four {
  bottom: 18%;
  right: 8%;
  color: var(--hub-gold-400);
  font-size: clamp(1rem, 1.5vw, 1.7rem);
  animation-delay: 2.2s;
}

.hub-community-sparkle--five {
  top: 34%;
  left: 13%;
  font-size: clamp(0.85rem, 1.1vw, 1.25rem);
  opacity: 0.52;
  animation-delay: 0.35s;
}

.hub-community-sparkle--six {
  top: 38%;
  right: 15%;
  color: var(--hub-blue-400);
  font-size: clamp(0.95rem, 1.25vw, 1.45rem);
  opacity: 0.58;
  animation-delay: 1.15s;
}

.hub-community-sparkle--seven {
  top: 58%;
  left: 11%;
  color: var(--hub-gold-400);
  font-size: clamp(0.8rem, 1vw, 1.2rem);
  opacity: 0.48;
  animation-delay: 2.65s;
}

.hub-community-sparkle--eight {
  top: 62%;
  right: 12%;
  font-size: clamp(0.85rem, 1.1vw, 1.3rem);
  opacity: 0.50;
  animation-delay: 3.2s;
}

.hub-community-sparkle--nine {
  top: 8%;
  left: 28%;
  color: var(--hub-gold-400);
  font-size: clamp(0.75rem, 0.95vw, 1.1rem);
  opacity: 0.46;
  animation-delay: 1.85s;
}

.hub-community-sparkle--ten {
  top: 9%;
  right: 29%;
  font-size: clamp(0.75rem, 0.95vw, 1.1rem);
  opacity: 0.46;
  animation-delay: 2.95s;
}

@keyframes hub-community-sparkle-float {
  0% {
    opacity: 0.35;
    transform: translateY(0) scale(0.86) rotate(0deg);
  }

  45% {
    opacity: 0.95;
    transform: translateY(-8px) scale(1.08) rotate(8deg);
  }

  100% {
    opacity: 0.48;
    transform: translateY(3px) scale(0.92) rotate(-6deg);
  }
}

.hub-community-orb {
  position: absolute;
  z-index: 0;
  border-radius: 999px;
  filter: blur(2px);
  opacity: 0.45;
  animation: hub-community-orb-drift 7s ease-in-out infinite alternate;
}

.hub-community-orb--one {
  top: 22%;
  left: 17%;
  width: 9rem;
  height: 9rem;
  background: radial-gradient(circle, rgba(104, 199, 255, 0.22), transparent 66%);
}

.hub-community-orb--two {
  right: 15%;
  bottom: 18%;
  width: 8rem;
  height: 8rem;
  background: radial-gradient(circle, rgba(240, 201, 107, 0.16), transparent 66%);
  animation-delay: 1.4s;
}

@keyframes hub-community-orb-drift {
  from {
    transform: translate3d(-8px, 4px, 0) scale(0.96);
  }

  to {
    transform: translate3d(8px, -6px, 0) scale(1.08);
  }
}

.hub-community-fun-head {
  display: grid;
  justify-items: center;
  gap: 0.55rem;
  max-width: 64rem;
  margin: 0 auto clamp(1rem, 2vw, 1.4rem);
  text-align: center;
}

.hub-community-fun-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.65rem;
  min-height: 40px;
  margin: 0;
  padding: 0.45rem 1.1rem;
  border-radius: 999px;
  border: 1px solid rgba(240, 201, 107, 0.34);
  background: linear-gradient(180deg, rgba(8, 25, 47, 0.88) 0%, rgba(6, 19, 38, 0.78) 100%);
  color: var(--hub-gold-400);
  font-size: 0.74rem;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  box-shadow:
    0 12px 30px rgba(0, 0, 0, 0.22),
    0 0 24px rgba(104, 199, 255, 0.10),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.hub-community-fun-pill-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.55rem;
  height: 1.55rem;
  border-radius: 999px;
  border: 1px solid rgba(104, 199, 255, 0.36);
  background: rgba(104, 199, 255, 0.10);
  color: var(--hub-blue-400);
  font-family: var(--font-display);
  font-size: 0.7rem;
  line-height: 1;
  letter-spacing: 0.02em;
}

.hub-community-mini-title {
  position: relative;
  margin: 0;
  padding-bottom: 0.45rem;
  font-family: var(--font-display);
  font-size: clamp(1.45rem, 2.1vw, 2.35rem);
  line-height: 0.9;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--hub-white);
  text-shadow:
    0 0 14px rgba(104, 199, 255, 0.18),
    0 2px 12px rgba(0, 0, 0, 0.35);
}

.hub-community-mini-title::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 4.6rem;
  height: 2px;
  border-radius: 999px;
  transform: translateX(-50%);
  background: linear-gradient(90deg, var(--hub-blue-400) 0%, var(--hub-gold-400) 100%);
  box-shadow:
    0 0 10px rgba(104, 199, 255, 0.18),
    0 0 12px rgba(240, 201, 107, 0.16);
}

.hub-community-fun-marquee {
  position: relative;
  overflow: hidden;
  padding: 0.35rem 0 1rem;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 6%, #000 94%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0%, #000 6%, #000 94%, transparent 100%);
}

.hub-community-fun-track {
  display: flex;
  width: max-content;
  animation: hub-community-fun-scroll 42s linear infinite;
  animation-play-state: running !important;
  will-change: transform;
}

.hub-community-fun-showcase:hover .hub-community-fun-track,
.hub-community-fun-marquee:hover .hub-community-fun-track,
.hub-community-fun-track:hover,
.hub-community-fun-track:focus,
.hub-community-fun-track:focus-within,
.hub-community-fun-track:active {
  animation-play-state: running !important;
}

.hub-community-fun-group {
  display: flex;
  flex: 0 0 auto;
  gap: 1rem;
  padding-right: 1rem;
}

@keyframes hub-community-fun-scroll {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-50%);
  }
}

.hub-community-fun-card {
  position: relative;
  flex: 0 0 clamp(230px, 21vw, 320px);
  height: clamp(320px, 32vw, 470px);
  overflow: hidden;
  border-radius: 28px;
  border: 1px solid rgba(240, 201, 107, 0.24);
  background:
    radial-gradient(circle at 50% 20%, rgba(104, 199, 255, 0.10), transparent 36%),
    linear-gradient(180deg, rgba(8, 22, 42, 0.94) 0%, rgba(5, 16, 31, 0.98) 100%);
  box-shadow:
    0 22px 56px rgba(0, 0, 0, 0.30),
    0 0 22px rgba(104, 199, 255, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 0.04);
  cursor: default !important;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.hub-community-fun-card--feature {
  flex-basis: clamp(360px, 36vw, 560px);
  border-color: rgba(240, 201, 107, 0.44);
  box-shadow:
    0 28px 70px rgba(0, 0, 0, 0.38),
    0 0 32px rgba(104, 199, 255, 0.12),
    0 0 0 1px rgba(240, 201, 107, 0.10);
}

.hub-community-fun-card img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center center;
  padding: 0.45rem;
  background:
    radial-gradient(circle at 50% 20%, rgba(104, 199, 255, 0.10), transparent 34%),
    linear-gradient(180deg, rgba(8, 20, 37, 0.96), rgba(5, 16, 31, 0.98));
  filter: saturate(0.98) brightness(0.94);
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-user-drag: none;
}

.hub-community-fun-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(5, 16, 31, 0.04) 0%, rgba(5, 16, 31, 0.08) 44%, rgba(3, 11, 22, 0.62) 100%),
    radial-gradient(circle at 50% 82%, rgba(104, 199, 255, 0.10), transparent 42%);
}

.hub-community-fun-badge {
  position: absolute;
  top: 1rem;
  left: 1rem;
  z-index: 4;
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 0.4rem 0.8rem;
  border-radius: 999px;
  border: 1px solid rgba(240, 201, 107, 0.38);
  background: rgba(5, 16, 31, 0.78);
  color: var(--hub-gold-400);
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  backdrop-filter: blur(8px);
}

.hub-community-fun-copy {
  position: absolute;
  left: 1rem;
  right: 1rem;
  bottom: 1rem;
  z-index: 3;
  width: fit-content;
  max-width: calc(100% - 2rem);
  padding: 0.75rem 0.9rem;
  border-radius: 18px;
  border: 1px solid rgba(240, 201, 107, 0.18);
  background: rgba(5, 16, 31, 0.72);
  backdrop-filter: blur(10px);
}

.hub-community-fun-copy span {
  display: block;
  margin: 0 0 0.25rem;
  color: var(--hub-gold-400);
  font-size: 0.62rem;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.hub-community-fun-copy h3 {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(2rem, 3vw, 3.5rem);
  line-height: 0.86;
  text-transform: uppercase;
  color: var(--hub-white);
}

.hub-community-fun-copy h3 em {
  display: block;
  margin-top: 0.2rem;
  font-style: normal;
  color: var(--hub-gold-400);
}

.hub-community-fun-copy p {
  margin: 0.65rem 0 0;
  max-width: 26rem;
  color: rgba(255, 255, 255, 0.82);
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1.38;
}

.hub-community-fun-cta {
  display: flex;
  justify-content: center;
  margin-top: 1rem;
}

.hub-community-fun-cta .hub-btn {
  min-width: 240px;
}

.hub-community-fun-lightbox,
.hub-community-lightbox {
  display: none !important;
}

body.hub-community-fun-lightbox-open,
body.hub-community-lightbox-open {
  overflow: auto !important;
}

/* ===== FRONT PAGE REVEAL / LOADING BARS ===== */
body.is-bluebox-front-page .hub-reveal {
  opacity: 0;
  transform: translateY(28px);
  filter: blur(6px);
  transition:
    opacity 0.8s cubic-bezier(0.2, 0.7, 0.2, 1),
    transform 0.8s cubic-bezier(0.2, 0.7, 0.2, 1),
    filter 0.8s cubic-bezier(0.2, 0.7, 0.2, 1);
  transition-delay: var(--hub-reveal-delay, 0s);
  will-change: opacity, transform, filter;
}

body.is-bluebox-front-page .hub-reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
}

body.is-bluebox-front-page .hub-section-title {
  position: relative;
  padding-bottom: 0.7rem;
}

body.is-bluebox-front-page .hub-section-title::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 5.5rem;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(240, 201, 107, 0.98) 0%, rgba(215, 169, 63, 0.95) 55%, rgba(104, 199, 255, 0.72) 100%);
  box-shadow:
    0 0 10px rgba(240, 201, 107, 0.18),
    0 0 16px rgba(104, 199, 255, 0.08);
  transform: scaleX(0.35);
  transform-origin: left center;
  opacity: 0.7;
  transition:
    transform 0.9s cubic-bezier(0.2, 0.7, 0.2, 1),
    opacity 0.9s ease;
}

body.is-bluebox-front-page .hub-section-title.is-visible::after {
  transform: scaleX(1);
  opacity: 1;
}

body.is-bluebox-front-page .hub-section-title--offers::after {
  width: 11rem;
}

body.is-bluebox-front-page .hub-location-card.is-visible,
body.is-bluebox-front-page .hub-benefit.is-visible,
body.is-bluebox-front-page .hub-promo-card.is-visible,
body.is-bluebox-front-page .hub-newsletter.is-visible {
  box-shadow:
    0 24px 54px rgba(0, 0, 0, 0.24),
    0 0 0 1px rgba(255, 255, 255, 0.02);
}

body.is-bluebox-front-page .hub-location-card,
body.is-bluebox-front-page .hub-benefit,
body.is-bluebox-front-page .hub-promo-card,
body.is-bluebox-front-page .hub-newsletter {
  transition:
    opacity 0.8s cubic-bezier(0.2, 0.7, 0.2, 1),
    transform 0.8s cubic-bezier(0.2, 0.7, 0.2, 1),
    filter 0.8s cubic-bezier(0.2, 0.7, 0.2, 1),
    box-shadow 0.35s ease;
}

body.is-bluebox-front-page .hub-locations-header .hub-section-title::after {
  left: 50%;
  transform: translateX(-50%) scaleX(0.35);
  transform-origin: center center;
}

body.is-bluebox-front-page .hub-locations-header .hub-section-title.is-visible::after {
  transform: translateX(-50%) scaleX(1);
}

body.is-bluebox-front-page .hub-benefits-head .hub-section-title,
body.is-bluebox-front-page .hub-locations-header .hub-section-title--offers {
  position: relative;
  display: inline-block;
  padding-bottom: 1.35rem;
}

body.is-bluebox-front-page .hub-benefits-head .hub-section-title::before,
body.is-bluebox-front-page .hub-locations-header .hub-section-title--offers::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 14rem;
  height: 6px;
  border-radius: 999px;
  transform: translateX(-50%);
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.16) 50%, rgba(255, 255, 255, 0.08) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 0 0 1px rgba(255, 255, 255, 0.04);
}

body.is-bluebox-front-page .hub-benefits-head .hub-section-title::after,
body.is-bluebox-front-page .hub-locations-header .hub-section-title--offers::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 14rem;
  height: 6px;
  border-radius: 999px;
  transform: translateX(-50%);
  background: linear-gradient(90deg, var(--hub-gold-300) 0%, var(--hub-gold-500) 55%, var(--hub-blue-400) 100%);
  background-repeat: no-repeat;
  background-position: left center;
  background-size: 0% 100%;
  box-shadow:
    0 0 6px rgba(240, 201, 107, 0.10),
    0 0 10px rgba(104, 199, 255, 0.04);
}

body.is-bluebox-front-page .hub-benefits-head .hub-section-title.hub-load-start::after,
body.is-bluebox-front-page .hub-locations-header .hub-section-title--offers.hub-load-start::after {
  animation: hub-title-load 1.4s cubic-bezier(0.2, 0.7, 0.2, 1) forwards;
}

@keyframes hub-title-load {
  from {
    background-size: 0% 100%;
    box-shadow:
      0 0 6px rgba(240, 201, 107, 0.10),
      0 0 10px rgba(104, 199, 255, 0.04);
  }

  to {
    background-size: 100% 100%;
    box-shadow:
      0 0 14px rgba(240, 201, 107, 0.28),
      0 0 24px rgba(104, 199, 255, 0.12);
  }
}

/* ===== DESKTOP NAV CENTRING ===== */
@media (min-width: 1100px) {
  .hub-header-inner {
    justify-content: flex-start;
  }

  .hub-nav {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: max-content;
    flex: none;
    justify-content: center;
  }

  .hub-nav .menu {
    justify-content: center;
  }
}

@media (max-width: 1099px) {
  .hub-header-inner {
    justify-content: space-between;
  }

  .hub-nav {
    position: static;
    left: auto;
    right: auto;
    width: auto;
    transform: none;
    flex: 1;
  }

  .hub-header-actions {
    margin-left: 0;
  }
}

/* ===== TABLET / SMALL DESKTOP ===== */
@media (max-width: 1100px) {
  .hub-benefits-grid,
  .hub-coaching-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .hub-entry-split {
    max-width: 100%;
  }

  .hub-entry-panel--membership {
    margin-left: -1px;
  }

  .hub-entry-split .hub-location-card {
    min-height: 460px;
    height: 460px;
  }

  .hub-entry-split .hub-location-name {
    font-size: 2.7rem;
  }

  .hub-promo-card,
  .hub-promo-card--play,
  .hub-promo-card--shop,
  .hub-newsletter-inner,
  .hub-footer-grid,
  .hub-shop-note,
  .hub-store-grid--apparel,
  .hub-store-grid--accessories,
  .hub-coaching-why-grid,
  .hub-membership-v3-why-grid,
  .hub-membership-overview-grid,
  .hub-coaching-hero .hub-membership-overview-grid {
    grid-template-columns: 1fr;
  }

  .hub-newsletter-form,
  .hub-newsletter-socials,
  .hub-newsletter-social-links,
  .hub-shop-note .hub-shop-actions {
    justify-content: flex-start;
  }

  .hub-shop-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .hub-membership-v3-overlay {
    grid-template-columns: 1fr;
  }

  .hub-membership-v3-benefit {
    min-height: auto;
  }

  .hub-footer-grid--simple {
    grid-template-columns: 1fr 1fr;
  }

  .hub-front-shop-media {
    justify-content: center;
  }

  .hub-front-shop-grid {
    grid-template-columns: repeat(3, 160px);
    justify-content: center;
  }

  .hub-front-shop-item {
    width: 160px;
    height: 245px;
  }

  .hub-front-shop-item img {
    max-height: 178px;
  }

  .hub-front-shop-item:nth-child(1) img,
  .hub-front-shop-item:nth-child(3) img {
    max-height: 180px;
  }

  .hub-front-shop-item:nth-child(2) img {
    max-width: 126%;
    max-height: 174px;
  }

  .hub-membership-table {
    min-width: 900px;
  }

  .hub-coaching-table-wrap .hub-membership-table {
    min-width: 820px;
  }

  body.is-bluebox-front-page .hub-hero-copy-wrap {
    transform: translateY(120px);
  }

  body.is-bluebox-front-page .hub-hero-title {
    font-size: clamp(4.3rem, 11.2vw, 8.1rem);
    line-height: 0.78;
    white-space: normal;
    transform: scaleY(1.32);
  }

  body.is-bluebox-front-page .hub-front-community-fun .container {
    width: min(100% - 1rem, 100%);
  }

  .hub-community-fun-card {
    flex-basis: min(76vw, 330px);
    height: 390px;
  }

  .hub-community-fun-card--feature {
    flex-basis: min(86vw, 430px);
  }
}

/* ===== MOBILE ===== */
@media (max-width: 860px) {
  body {
    background:
      linear-gradient(180deg, rgba(6, 19, 38, 0.76) 0%, rgba(6, 19, 38, 0.88) 100%),
      url("https://blueboxpadel.com/wp-content/uploads/2026/04/ChatGPT-Image-Apr-9-2026-12_36_58-AM.png") center 34% / cover no-repeat,
      var(--bg-main);
  }

  body.hub-nav-open {
    overflow: hidden;
  }

  .hub-header-inner {
    min-height: 68px;
  }

  .hub-nav {
    display: none;
    position: absolute;
    top: calc(100% + 0.55rem);
    left: 0;
    right: 0;
    z-index: 1001;
    padding: 1rem;
    background: rgba(7, 23, 45, 0.98);
    border: 1px solid var(--hub-border);
    border-radius: 20px;
    box-shadow: var(--hub-shadow-lg);
  }

  .hub-nav.is-open {
    display: flex;
  }

  .hub-nav .menu {
    width: 100%;
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
  }

  .hub-menu-toggle {
    display: inline-flex;
  }

  .hub-hero,
  body.is-bluebox-front-page .hub-hero {
    min-height: 82svh;
  }

  .hub-hero-grid,
  body.is-bluebox-front-page .hub-hero-grid {
    min-height: 82svh;
    padding-top: 7.5rem;
    padding-bottom: 1.5rem;
    align-items: center;
  }

  .hub-hero-copy-wrap,
  body.is-bluebox-front-page .hub-hero-copy-wrap {
    transform: translateY(112px);
  }

  .hub-hero-title,
  body.is-bluebox-front-page .hub-hero-title {
    font-size: clamp(3.5rem, 13vw, 5.8rem);
    line-height: 0.84;
    white-space: normal;
    transform: scaleY(1.22);
  }

  .hub-hero-title .brand-blue,
  .hub-hero-title .brand-gold {
    display: inline;
  }

  .hub-hero-actions {
    gap: 0.85rem;
  }

  .hub-hero-video {
    object-position: center 38%;
  }

  .hub-benefits-grid,
  .hub-shop-grid,
  .hub-coaching-grid {
    grid-template-columns: 1fr;
  }

  .hub-locations-header {
    margin-bottom: 1.2rem;
  }

  .hub-section-title--offers {
    font-size: clamp(2.7rem, 12vw, 4.4rem);
  }

  .hub-entry-split {
    grid-template-columns: 1fr;
  }

  .hub-entry-panel--membership {
    margin-left: 0;
  }

  .hub-entry-panel--play::before {
    display: none;
  }

  .hub-entry-split .hub-location-card {
    min-height: 360px;
    height: 360px;
  }

  .hub-entry-content {
    padding: 1.5rem;
    transform: none;
    opacity: 1;
  }

  .hub-entry-split .hub-location-name {
    font-size: 2rem;
  }

  .hub-entry-split .hub-location-link {
    min-height: 46px;
    padding: 0.78rem 1.05rem;
  }

  .hub-btn {
    width: 100%;
  }

  .hub-benefit {
    min-height: 260px;
  }

  .hub-benefit p,
  .hub-membership-v3-benefit p {
    margin-top: 0.7rem;
    max-height: 200px;
    opacity: 1;
    transform: none;
  }

  .hub-section--offers::before,
  .hub-section--benefits::before,
  .hub-section--feature::before,
  .hub-section--community::before {
    top: 0.5rem;
    bottom: 0.5rem;
  }

  body.is-bluebox-front-page .hub-reveal {
    transform: translateY(20px);
    filter: blur(4px);
  }

  body.is-bluebox-front-page .hub-section-title {
    padding-bottom: 0.55rem;
  }

  body.is-bluebox-front-page .hub-section-title::after {
    width: 4.25rem;
  }

  body.is-bluebox-front-page .hub-section-title--offers::after {
    width: 8rem;
  }

  .hub-entry-panel img,
  .hub-entry-split:hover .hub-entry-panel img,
  .hub-entry-panel:hover img {
    transform: none;
    filter: none;
  }

  .hub-entry-panel::after,
  .hub-entry-split:hover .hub-entry-panel::after,
  .hub-entry-panel:hover::after {
    opacity: 1;
  }

  .hub-shop-actions,
  .hub-store-actions,
  .hub-shop-note .hub-shop-actions,
  .hub-membership-v3-actions,
  .hub-coaching-actions,
  .hub-membership-v3-actions--inside {
    flex-direction: column;
    align-items: stretch;
  }

  .hub-store-actions .hub-btn,
  .hub-shop-note .hub-shop-actions .hub-btn,
  .hub-coaching-hero .hub-coaching-actions .hub-btn,
  .hub-membership-v3-actions--inside .hub-btn {
    width: 100%;
  }

  .hub-membership-v3-shell > .hub-membership-v3-actions {
    justify-content: center;
    align-items: center;
  }

  .hub-membership-v3-shell > .hub-membership-v3-actions .hub-btn,
  .hub-membership-v3-actions--below .hub-btn {
    width: auto !important;
    min-width: auto;
  }

  .hub-membership-v3-media img {
    min-height: 360px;
    height: 360px;
    object-position: center 15% !important;
  }

  .hub-membership-v3-media::after {
    inset: 0 0 auto 0;
    height: 360px;
    background:
      linear-gradient(180deg, rgba(6, 19, 38, 0.08) 0%, rgba(6, 19, 38, 0.18) 42%, rgba(4, 14, 26, 0.55) 100%),
      linear-gradient(90deg, rgba(104, 199, 255, 0.05) 0%, rgba(240, 201, 107, 0.03) 100%);
  }

  .hub-membership-v3-overlay {
    position: static;
    left: auto;
    right: auto;
    bottom: auto;
    padding: 1rem;
    background: #071528;
  }

  .hub-membership-v3-benefit {
    background: #081a31;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }

  .hub-membership-pricing-nav {
    justify-content: flex-start;
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-bottom: 0.25rem;
  }

  .hub-membership-pricing-nav a {
    white-space: nowrap;
  }

  .hub-membership-table {
    min-width: 820px;
  }

  .hub-coaching-table-wrap .hub-membership-table {
    min-width: 760px;
  }

  .hub-membership-table th,
  .hub-membership-table td {
    padding: 0.9rem 0.8rem;
  }

  .hub-store-toggle {
    left: 1rem;
    right: auto;
  }

  .hub-newsletter-side {
    gap: 0.9rem;
  }

  .hub-newsletter-socials {
    flex-direction: column;
    align-items: flex-start;
  }

  .hub-newsletter-social-links {
    justify-content: flex-start;
  }

  .hub-footer::before {
    font-size: clamp(5rem, 24vw, 10rem);
    top: 58%;
  }

  .hub-community-fun-showcase {
    padding: 1rem;
    border-radius: 28px;
  }

  .hub-community-fun-head {
    margin-bottom: 0.9rem;
  }

  .hub-community-fun-pill {
    min-height: 36px;
    padding: 0.4rem 0.9rem;
    font-size: 0.66rem;
  }

  .hub-community-fun-pill-mark {
    width: 1.35rem;
    height: 1.35rem;
    font-size: 0.64rem;
  }

  .hub-community-mini-title {
    font-size: clamp(1.35rem, 6vw, 2rem);
  }

  .hub-community-fun-marquee {
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 4%, #000 96%, transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0%, #000 4%, #000 96%, transparent 100%);
  }

  .hub-community-fun-group {
    gap: 0.8rem;
    padding-right: 0.8rem;
  }

  .hub-community-fun-card {
    flex-basis: min(80vw, 300px);
    height: 350px;
    border-radius: 24px;
  }

  .hub-community-fun-card--feature {
    flex-basis: min(88vw, 360px);
  }

  .hub-community-fun-copy {
    left: 0.75rem;
    right: 0.75rem;
    bottom: 0.75rem;
    max-width: calc(100% - 1.5rem);
  }

  .hub-community-fun-cta .hub-btn {
    width: 100%;
    min-width: auto;
  }

  .hub-community-sparkle--seven,
  .hub-community-sparkle--eight,
  .hub-community-sparkle--nine,
  .hub-community-sparkle--ten {
    display: none;
  }

  .hub-coaching-hero-media img {
    object-position: center 20% !important;
  }
}

@media (max-width: 680px) {
  .hub-footer-grid--simple {
    grid-template-columns: 1fr;
    gap: 1.2rem;
  }

  .hub-front-shop-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 0.7rem;
    width: 100%;
  }

  .hub-front-shop-item {
    width: auto;
    height: 190px;
    padding: 0.55rem;
    border-radius: 20px;
  }

  .hub-front-shop-item img {
    max-width: 118%;
    max-height: 140px;
  }

  .hub-front-shop-item:nth-child(1) img,
  .hub-front-shop-item:nth-child(3) img {
    max-height: 142px;
  }

  .hub-front-shop-item:nth-child(2) img {
    max-width: 128%;
    max-height: 134px;
  }
}

@media (max-width: 560px) {
  :root {
    --section-space: 2.35rem;
  }

  .container {
    width: min(100% - 1.25rem, var(--container));
  }

  .hub-header-inner {
    gap: 0.75rem;
    padding: 0.55rem 0;
  }

  .hub-brand-logo {
    max-height: 32px;
  }

  .hub-brand-text {
    font-size: 0.88rem;
  }

  .hub-hero,
  body.is-bluebox-front-page .hub-hero {
    min-height: 76svh;
  }

  .hub-hero-grid,
  body.is-bluebox-front-page .hub-hero-grid {
    min-height: 76svh;
    padding-top: 6.75rem;
    padding-bottom: 1.25rem;
  }

  .hub-hero-copy-wrap,
  body.is-bluebox-front-page .hub-hero-copy-wrap {
    transform: translateY(105px);
  }

  .hub-hero-title,
  body.is-bluebox-front-page .hub-hero-title {
    font-size: clamp(2.9rem, 13.5vw, 4.4rem);
    line-height: 0.88;
    transform: scaleY(1.16);
  }

  .hub-hero-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .hub-hero-video {
    object-position: center 42%;
  }

  .hub-entry-split .hub-location-card {
    min-height: 320px;
    height: 320px;
  }

  .hub-entry-content {
    padding: 1.3rem;
  }

  .hub-entry-split .hub-location-name {
    font-size: 1.75rem;
  }

  .hub-entry-eyebrow {
    margin-bottom: 0.7rem;
    font-size: 0.68rem;
    letter-spacing: 0.16em;
  }

  .hub-entry-split .hub-location-link {
    width: auto;
  }

  .hub-membership-v3-title,
  .hub-coaching-title {
    max-width: 100%;
    margin-bottom: 0.75rem;
    font-size: clamp(2rem, 8.8vw, 2.7rem);
    line-height: 0.92;
  }

  .hub-membership-v3-intro,
  .hub-coaching-intro {
    font-size: 0.98rem;
  }

  .hub-membership-v3-points li {
    font-size: 0.96rem;
    line-height: 1.42;
  }

  .hub-membership-v3-media img {
    min-height: 300px;
    height: 300px;
    object-position: center 15% !important;
  }

  .hub-membership-v3-media::after {
    height: 300px;
  }

  .hub-membership-v3-benefit {
    padding: 1rem 0.95rem;
  }

  .hub-membership-v3-benefit h3 {
    font-size: 1.3rem;
  }

  .hub-membership-v3-cta,
  .hub-coaching-cta {
    padding: 1.5rem 1.2rem;
  }

  .hub-membership-overview,
  .hub-coaching-hero .hub-membership-overview {
    padding: 1rem;
    border-radius: 22px;
  }

  .hub-membership-overview-head {
    margin-bottom: 1rem;
  }

  .hub-membership-overview--hero .hub-membership-v3-title {
    margin-bottom: 0.85rem;
  }

  .hub-membership-overview-item h3,
  .hub-coaching-hero .hub-membership-overview-item h3 {
    font-size: 1.3rem;
  }

  .hub-membership-overview-lead,
  .hub-coaching-hero .hub-membership-overview-lead {
    font-size: 0.96rem;
  }

  .hub-membership-copy-card {
    padding: 1.1rem 1rem;
    border-radius: 22px;
  }

  .hub-membership-table {
    min-width: 760px;
  }

  .hub-coaching-table-wrap .hub-membership-table {
    min-width: 720px;
  }

  .hub-membership-table thead th,
  .hub-membership-table tbody td {
    font-size: 0.9rem;
  }

  .hub-store-copy {
    padding: 1.15rem 1rem;
  }

  .hub-store-title {
    font-size: 1.65rem;
  }

  .hub-newsletter-social-links a {
    min-height: 36px;
    padding: 0.58rem 0.8rem;
    font-size: 0.72rem;
  }

  .hub-footer-socials {
    justify-content: flex-start;
  }

  .hub-footer-socials a {
    width: auto;
  }

  .hub-front-shop-grid {
    grid-template-columns: 1fr;
  }

  .hub-front-shop-item {
    height: 240px;
  }

  .hub-front-shop-item img {
    max-width: 112%;
    max-height: 178px;
  }

  .hub-front-shop-item:nth-child(1) img,
  .hub-front-shop-item:nth-child(3) img {
    max-height: 182px;
  }

  .hub-front-shop-item:nth-child(2) img {
    max-width: 122%;
    max-height: 170px;
  }

  body.is-bluebox-front-page .hub-benefits-head .hub-section-title,
  body.is-bluebox-front-page .hub-locations-header .hub-section-title--offers {
    padding-bottom: 1.1rem;
  }

  body.is-bluebox-front-page .hub-benefits-head .hub-section-title::before,
  body.is-bluebox-front-page .hub-benefits-head .hub-section-title::after,
  body.is-bluebox-front-page .hub-locations-header .hub-section-title--offers::before,
  body.is-bluebox-front-page .hub-locations-header .hub-section-title--offers::after {
    width: 9.5rem;
    height: 5px;
  }

  .hub-community-mini-title {
    font-size: clamp(1.25rem, 7vw, 1.85rem);
  }

  .hub-community-fun-card {
    height: 325px;
  }

  .hub-community-fun-copy h3 {
    font-size: 2rem;
  }

  .hub-community-fun-copy p {
    font-size: 0.84rem;
  }

  .hub-community-sparkle {
    opacity: 0.45;
  }
}

/* ===== TOUCH DEVICE FIX ===== */
@media (hover: none), (pointer: coarse) {
  .hub-entry-split {
    grid-template-columns: 1fr !important;
  }

  .hub-entry-panel--membership {
    margin-left: 0 !important;
  }

  .hub-entry-panel--play::before {
    display: none !important;
  }

  .hub-entry-split:hover .hub-entry-panel img,
  .hub-entry-panel:hover img,
  .hub-entry-panel:active img {
    transform: none !important;
    filter: none !important;
  }

  .hub-entry-split:hover .hub-entry-panel::after,
  .hub-entry-panel:hover::after,
  .hub-entry-panel:active::after {
    opacity: 1 !important;
  }

  .hub-entry-split:hover .hub-entry-content,
  .hub-entry-panel:hover .hub-entry-content,
  .hub-entry-panel:active .hub-entry-content {
    transform: none !important;
    opacity: 1 !important;
  }

  .hub-entry-split .hub-location-card {
    min-height: 360px;
    height: 360px;
  }
}

/* ===== REDUCED MOTION ===== */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }

  .hub-btn:hover,
  .hub-location-link:hover,
  .hub-benefit:hover {
    transform: none;
  }

  .hub-benefit p {
    margin-top: 0.85rem;
    max-height: 200px;
    opacity: 1;
    transform: none;
  }

  body.is-bluebox-front-page .hub-reveal {
    opacity: 1;
    transform: none;
    filter: none;
  }

  body.is-bluebox-front-page .hub-section-title::after {
    transform: scaleX(1);
    opacity: 1;
  }

  body.is-bluebox-front-page .hub-locations-header .hub-section-title::after,
  .hub-benefits-head .hub-section-title::after {
    transform: translateX(-50%) scaleX(1);
  }

  .hub-community-fun-showcase::before,
  .hub-community-fun-track,
  .hub-community-sparkle,
  .hub-community-orb {
    animation: none !important;
  }

  .hub-community-fun-marquee {
    overflow-x: auto;
    -webkit-mask-image: none;
    mask-image: none;
  }

  .hub-community-fun-group[aria-hidden="true"] {
    display: none;
  }
}
/* ===== OFFERS TITLE - SINGLE LINE ===== */
body.is-bluebox-front-page .hub-section-title--offers {
  white-space: nowrap;
  font-size: clamp(2.15rem, 7.4vw, 5.35rem);
  line-height: 0.9;
}

@media (max-width: 560px) {
  body.is-bluebox-front-page .hub-section-title--offers {
    font-size: clamp(1.85rem, 9.4vw, 2.9rem);
    letter-spacing: 0.005em;
  }
}
/* ===== FRONT PAGE OFFER CARDS - FANCY HOVER INFO ===== */
.hub-entry-hover-info {
  position: absolute;
  top: 1.35rem;
  right: 1.35rem;
  z-index: 4;
  width: min(320px, calc(100% - 2.7rem));
  padding: 1rem 1rem 0.95rem;
  border-radius: 22px;
  border: 1px solid rgba(240, 201, 107, 0.28);
  background:
    radial-gradient(circle at top left, rgba(104, 199, 255, 0.18), transparent 42%),
    linear-gradient(180deg, rgba(5, 16, 31, 0.82) 0%, rgba(5, 16, 31, 0.66) 100%);
  backdrop-filter: blur(14px);
  box-shadow:
    0 18px 42px rgba(0, 0, 0, 0.30),
    0 0 24px rgba(104, 199, 255, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
  opacity: 0;
  transform: translateY(10px) scale(0.98);
  pointer-events: none;
  transition:
    opacity 0.28s ease,
    transform 0.28s ease;
}

.hub-entry-panel:hover .hub-entry-hover-info,
.hub-entry-panel:focus-within .hub-entry-hover-info {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.hub-entry-hover-kicker {
  display: inline-block;
  margin-bottom: 0.55rem;
  color: var(--hub-blue-400);
  font-size: 0.66rem;
  font-weight: 900;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.hub-entry-panel--membership .hub-entry-hover-kicker {
  color: var(--hub-gold-400);
}

.hub-entry-hover-info h4 {
  margin: 0 0 0.55rem;
  font-family: var(--font-display);
  font-size: clamp(1.45rem, 2vw, 2.1rem);
  line-height: 0.92;
  text-transform: uppercase;
  color: var(--hub-white);
  text-shadow:
    0 2px 12px rgba(0, 0, 0, 0.36),
    0 0 14px rgba(104, 199, 255, 0.10);
}

.hub-entry-hover-info p {
  margin: 0 0 0.75rem;
  color: rgba(255, 255, 255, 0.82);
  font-size: 0.9rem;
  line-height: 1.42;
}

.hub-entry-hover-info ul {
  display: grid;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.hub-entry-hover-info li {
  position: relative;
  padding-left: 1.25rem;
  color: rgba(255, 255, 255, 0.88);
  font-size: 0.84rem;
  font-weight: 700;
  line-height: 1.35;
}

.hub-entry-hover-info li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.48rem;
  width: 0.48rem;
  height: 0.48rem;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--hub-gold-300) 0%, var(--hub-gold-500) 100%);
  box-shadow:
    0 0 8px rgba(240, 201, 107, 0.34),
    0 0 12px rgba(104, 199, 255, 0.12);
}

/* Keep touch devices clean; hover info is desktop-only */
@media (hover: none), (pointer: coarse) {
  .hub-entry-hover-info {
    display: none;
  }
}

@media (max-width: 860px) {
  .hub-entry-hover-info {
    display: none;
  }
}
/* ===== COMMUNITY TITLE LOADING BAR - MATCH SITE BARS ===== */

.hub-community-load-title {
  position: relative;
  display: inline-block;
  padding-bottom: 1.35rem;
}

/* Track */
.hub-community-load-title::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 14rem;
  height: 6px;
  border-radius: 999px;
  transform: translateX(-50%);
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0.08) 0%,
    rgba(255, 255, 255, 0.16) 50%,
    rgba(255, 255, 255, 0.08) 100%
  );
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 0 0 1px rgba(255, 255, 255, 0.04);
}

/* Fill */
.hub-community-load-title::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 14rem;
  height: 6px;
  border-radius: 999px;
  transform: translateX(-50%);
  background: linear-gradient(
    90deg,
    var(--hub-gold-300) 0%,
    var(--hub-gold-500) 55%,
    var(--hub-blue-400) 100%
  );
  background-repeat: no-repeat;
  background-position: left center;
  background-size: 0% 100%;
  box-shadow:
    0 0 6px rgba(240, 201, 107, 0.10),
    0 0 10px rgba(104, 199, 255, 0.04);
  animation: hub-community-load 1.4s cubic-bezier(0.2, 0.7, 0.2, 1) forwards;
}

@keyframes hub-community-load {
  from {
    background-size: 0% 100%;
    box-shadow:
      0 0 6px rgba(240, 201, 107, 0.10),
      0 0 10px rgba(104, 199, 255, 0.04);
  }

  to {
    background-size: 100% 100%;
    box-shadow:
      0 0 14px rgba(240, 201, 107, 0.28),
      0 0 24px rgba(104, 199, 255, 0.12);
  }
}

@media (max-width: 560px) {
  .hub-community-load-title {
    padding-bottom: 1.1rem;
  }

  .hub-community-load-title::before,
  .hub-community-load-title::after {
    width: 9.5rem;
    height: 5px;
  }
}
/* ===== COMMUNITY HEADER POSITION FIX - PILL LEFT ===== */
/* Moves Bluebox Community pill left and keeps the title/bar centred */

.hub-front-community-fun .hub-community-fun-head,
.hub-front-community .hub-community-showcase-head {
  position: relative;
  display: grid !important;
  grid-template-columns: 1fr auto 1fr;
  align-items: start;
  justify-items: center;
  gap: 0;
  max-width: 100%;
  min-height: 4.4rem;
  margin: 0 auto 0.75rem !important;
  padding: 0.1rem clamp(1rem, 2vw, 1.6rem) 0;
  text-align: center;
}

/* Put the pill on the left */
.hub-front-community-fun .hub-community-fun-pill,
.hub-front-community .hub-community-pill {
  grid-column: 1;
  grid-row: 1;
  justify-self: start;
  align-self: start;
  margin: 0 !important;
  transform: translateY(0.05rem);
}

/* Keep title centred, lifted into the header row */
.hub-front-community-fun .hub-community-mini-title,
.hub-front-community .hub-community-mini-title,
.hub-front-community-fun .hub-community-load-title,
.hub-front-community .hub-community-load-title {
  grid-column: 1 / -1;
  grid-row: 1;
  justify-self: center;
  margin: 0 !important;
  transform: translateY(1.6rem);
}

/* Mobile: stack neatly so the pill does not clash with the title */
@media (max-width: 760px) {
  .hub-front-community-fun .hub-community-fun-head,
  .hub-front-community .hub-community-showcase-head {
    display: grid !important;
    grid-template-columns: 1fr;
    min-height: auto;
    gap: 0.65rem;
    margin-bottom: 0.95rem !important;
    padding-top: 0;
  }

  .hub-front-community-fun .hub-community-fun-pill,
  .hub-front-community .hub-community-pill {
    grid-column: 1;
    grid-row: 1;
    justify-self: center;
    transform: none;
  }

  .hub-front-community-fun .hub-community-mini-title,
  .hub-front-community .hub-community-mini-title,
  .hub-front-community-fun .hub-community-load-title,
  .hub-front-community .hub-community-load-title {
    grid-column: 1;
    grid-row: 2;
    transform: none;
  }
}
/* ===== COMMUNITY HEADER - MOVE TITLE / BAR UP ===== */

.hub-front-community-fun .hub-community-fun-head,
.hub-front-community .hub-community-showcase-head {
  min-height: 3.4rem !important;
  margin: 0 auto 0.35rem !important;
  padding-top: 0 !important;
}

/* Move Where Players Belong and its loading bar further up */
.hub-front-community-fun .hub-community-mini-title,
.hub-front-community .hub-community-mini-title,
.hub-front-community-fun .hub-community-load-title,
.hub-front-community .hub-community-load-title {
  transform: translateY(0.45rem) !important;
}

/* Keep mobile stacked and clean */
@media (max-width: 760px) {
  .hub-front-community-fun .hub-community-fun-head,
  .hub-front-community .hub-community-showcase-head {
    min-height: auto !important;
    margin-bottom: 0.9rem !important;
  }

  .hub-front-community-fun .hub-community-mini-title,
  .hub-front-community .hub-community-mini-title,
  .hub-front-community-fun .hub-community-load-title,
  .hub-front-community .hub-community-load-title {
    transform: none !important;
  }
}
/* ===== COMMUNITY CAROUSEL - PUSH IMAGES LOWER ===== */

.hub-front-community-fun .hub-community-fun-marquee,
.hub-front-community .hub-community-marquee {
  margin-top: 1.2rem !important;
}

/* Mobile: keep the gap smaller */
@media (max-width: 760px) {
  .hub-front-community-fun .hub-community-fun-marquee,
  .hub-front-community .hub-community-marquee {
    margin-top: 0.7rem !important;
  }
}
/* ===== FRONT PAGE SHOP PANEL - PREMIUM STORE DROP ===== */

.hub-front-shop .hub-promo-card--shop {
  position: relative;
  grid-template-columns: minmax(320px, 0.86fr) minmax(0, 1.14fr) !important;
  align-items: center;
  min-height: 430px;
  overflow: hidden;
  border-color: rgba(240, 201, 107, 0.18);
  background:
    radial-gradient(circle at 72% 42%, rgba(104, 199, 255, 0.18), transparent 24rem),
    radial-gradient(circle at 88% 78%, rgba(240, 201, 107, 0.13), transparent 18rem),
    linear-gradient(135deg, rgba(5, 16, 31, 0.98) 0%, rgba(7, 22, 42, 0.96) 46%, rgba(4, 14, 28, 0.98) 100%);
}

.hub-front-shop .hub-promo-card--shop::before {
  background: linear-gradient(
    135deg,
    rgba(104, 199, 255, 0.22) 0%,
    rgba(240, 201, 107, 0.18) 48%,
    rgba(104, 199, 255, 0.10) 100%
  );
}

.hub-front-shop .hub-promo-card--shop::after {
  content: "";
  position: absolute;
  inset: auto -12% -36% auto;
  width: 38rem;
  height: 38rem;
  border-radius: 999px;
  background:
    radial-gradient(circle, rgba(104, 199, 255, 0.18) 0%, rgba(104, 199, 255, 0.08) 32%, transparent 68%);
  filter: blur(18px);
  opacity: 0.85;
  pointer-events: none;
}

.hub-front-shop .hub-promo-copy {
  position: relative;
  z-index: 3;
  max-width: 38rem;
}

.hub-front-shop .hub-kicker {
  position: relative;
  padding-left: 2.15rem;
}

.hub-front-shop .hub-kicker::before {
  content: "BB";
  position: absolute;
  left: 0;
  top: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.55rem;
  height: 1.55rem;
  border-radius: 999px;
  border: 1px solid rgba(104, 199, 255, 0.35);
  background: rgba(104, 199, 255, 0.10);
  color: var(--hub-blue-400);
  font-family: var(--font-display);
  font-size: 0.66rem;
  line-height: 1;
  transform: translateY(-50%);
}

.hub-front-shop .hub-promo-title {
  max-width: 9.5ch;
  text-shadow:
    0 0 18px rgba(104, 199, 255, 0.08),
    0 3px 18px rgba(0, 0, 0, 0.34);
}

.hub-front-shop .hub-promo-text {
  max-width: 31rem;
  font-size: 1.02rem;
}

.hub-front-shop-media {
  position: relative;
  z-index: 3;
  justify-content: center !important;
  padding: clamp(1.25rem, 3vw, 2.4rem) !important;
}

.hub-front-shop-media::before {
  content: "NEW CLUB DROP";
  position: absolute;
  top: 1.4rem;
  right: clamp(1.25rem, 3vw, 2.4rem);
  z-index: 4;
  display: inline-flex;
  min-height: 34px;
  align-items: center;
  justify-content: center;
  padding: 0.38rem 0.85rem;
  border-radius: 999px;
  border: 1px solid rgba(240, 201, 107, 0.28);
  background: rgba(5, 16, 31, 0.72);
  color: var(--hub-gold-400);
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  box-shadow:
    0 10px 28px rgba(0, 0, 0, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(10px);
}

.hub-front-shop-media::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 2.1rem;
  width: min(32rem, 78%);
  height: 1px;
  transform: translateX(-50%);
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(104, 199, 255, 0.38) 20%,
    rgba(240, 201, 107, 0.42) 52%,
    rgba(104, 199, 255, 0.32) 80%,
    transparent 100%
  );
  box-shadow:
    0 0 18px rgba(104, 199, 255, 0.12),
    0 0 18px rgba(240, 201, 107, 0.10);
  pointer-events: none;
}

.hub-front-shop-grid {
  position: relative;
  display: grid !important;
  grid-template-columns: repeat(3, minmax(150px, 1fr)) !important;
  gap: clamp(0.85rem, 1.4vw, 1.15rem) !important;
  width: min(100%, 620px) !important;
  align-items: end !important;
}

.hub-front-shop-item {
  position: relative;
  width: auto !important;
  height: 290px !important;
  padding: 1rem 0.9rem 2.6rem !important;
  border-radius: 28px !important;
  border: 1px solid rgba(240, 201, 107, 0.20) !important;
  background:
    radial-gradient(circle at 50% 14%, rgba(104, 199, 255, 0.12), transparent 42%),
    linear-gradient(180deg, rgba(8, 24, 44, 0.92) 0%, rgba(5, 16, 31, 0.98) 100%) !important;
  box-shadow:
    0 24px 54px rgba(0, 0, 0, 0.32),
    0 0 22px rgba(104, 199, 255, 0.05),
    inset 0 1px 0 rgba(255, 255, 255, 0.04) !important;
  transform: translateY(0) rotate(0deg);
  transition:
    transform 0.28s ease,
    border-color 0.28s ease,
    box-shadow 0.28s ease;
}

.hub-front-shop-item:nth-child(1) {
  transform: translateY(18px) rotate(-2.2deg);
}

.hub-front-shop-item:nth-child(2) {
  height: 320px !important;
  transform: translateY(-8px);
  border-color: rgba(240, 201, 107, 0.34) !important;
}

.hub-front-shop-item:nth-child(3) {
  transform: translateY(18px) rotate(2.2deg);
}

.hub-front-shop-item:hover {
  transform: translateY(-8px) rotate(0deg) !important;
  border-color: rgba(240, 201, 107, 0.46) !important;
  box-shadow:
    0 30px 68px rgba(0, 0, 0, 0.38),
    0 0 28px rgba(104, 199, 255, 0.10),
    0 0 18px rgba(240, 201, 107, 0.08) !important;
}

.hub-front-shop-item::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  border-radius: inherit;
  background:
    linear-gradient(
      120deg,
      transparent 0%,
      transparent 38%,
      rgba(255, 255, 255, 0.10) 48%,
      transparent 58%,
      transparent 100%
    );
  transform: translateX(-120%);
  transition: transform 0.7s ease;
  pointer-events: none;
}

.hub-front-shop-item:hover::before {
  transform: translateX(120%);
}

.hub-front-shop-item::after {
  position: absolute;
  left: 1rem;
  right: 1rem;
  bottom: 0.85rem;
  z-index: 3;
  display: inline-flex;
  justify-content: center;
  min-height: 30px;
  align-items: center;
  border-radius: 999px;
  border: 1px solid rgba(240, 201, 107, 0.18);
  background: rgba(5, 16, 31, 0.70);
  color: var(--hub-text-soft);
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  backdrop-filter: blur(8px);
}

.hub-front-shop-item:nth-child(1)::after {
  content: "Core Tee";
}

.hub-front-shop-item:nth-child(2)::after {
  content: "Club Hoodie";
  color: var(--hub-gold-400);
}

.hub-front-shop-item:nth-child(3)::after {
  content: "Club Cap";
}

.hub-front-shop-item img {
  position: relative;
  z-index: 1;
  max-width: 128% !important;
  max-height: 205px !important;
  object-fit: contain;
  filter:
    drop-shadow(0 18px 24px rgba(0, 0, 0, 0.34))
    saturate(1.02)
    brightness(0.98);
  transition:
    transform 0.28s ease,
    filter 0.28s ease;
}

.hub-front-shop-item:nth-child(2) img {
  max-width: 136% !important;
  max-height: 215px !important;
}

.hub-front-shop-item:hover img {
  transform: scale(1.055);
  filter:
    drop-shadow(0 22px 30px rgba(0, 0, 0, 0.40))
    saturate(1.08)
    brightness(1.04);
}

/* Tablet */
@media (max-width: 1100px) {
  .hub-front-shop .hub-promo-card--shop {
    grid-template-columns: 1fr !important;
  }

  .hub-front-shop .hub-promo-copy {
    max-width: none;
    text-align: center;
  }

  .hub-front-shop .hub-promo-title {
    max-width: none;
  }

  .hub-front-shop .hub-promo-text {
    margin-left: auto;
    margin-right: auto;
  }

  .hub-front-shop-media::before {
    top: 0.8rem;
    right: 50%;
    transform: translateX(50%);
  }

  .hub-front-shop-grid {
    margin-top: 1.4rem;
  }
}

/* Mobile */
@media (max-width: 680px) {
  .hub-front-shop .hub-promo-card--shop {
    min-height: auto;
  }

  .hub-front-shop-media {
    padding: 1rem !important;
  }

  .hub-front-shop-media::before {
    position: relative;
    top: auto;
    right: auto;
    transform: none;
    margin: 0 auto 0.9rem;
  }

  .hub-front-shop-grid {
    grid-template-columns: 1fr !important;
    width: 100% !important;
    gap: 0.9rem !important;
    margin-top: 0;
  }

  .hub-front-shop-item,
  .hub-front-shop-item:nth-child(1),
  .hub-front-shop-item:nth-child(2),
  .hub-front-shop-item:nth-child(3) {
    height: 230px !important;
    transform: none !important;
  }

  .hub-front-shop-item img,
  .hub-front-shop-item:nth-child(2) img {
    max-width: 112% !important;
    max-height: 165px !important;
  }
}
/* ===== FRONT PAGE SHOP PANEL - MOBILE FIT FIX ===== */

@media (max-width: 680px) {
  .hub-front-shop .hub-promo-card--shop {
    min-height: auto;
    padding-bottom: 0;
  }

  .hub-front-shop .hub-promo-copy {
    padding-bottom: 0.75rem;
  }

  .hub-front-shop .hub-promo-title {
    font-size: clamp(2.35rem, 12vw, 3.35rem);
    line-height: 0.9;
  }

  .hub-front-shop .hub-promo-text {
    max-width: 22rem;
    font-size: 0.94rem;
  }

  .hub-front-shop-media {
    display: block !important;
    padding: 0.5rem 0.85rem 1.1rem !important;
  }

  .hub-front-shop-media::before {
    position: static;
    display: flex;
    width: fit-content;
    min-height: 30px;
    margin: 0 auto 0.85rem;
    padding: 0.32rem 0.75rem;
    font-size: 0.62rem;
    transform: none;
  }

  .hub-front-shop-media::after {
    bottom: 0.7rem;
    width: 72%;
  }

  .hub-front-shop-grid {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 0.55rem !important;
    width: 100% !important;
    margin: 0 auto !important;
    align-items: stretch !important;
  }

  .hub-front-shop-item,
  .hub-front-shop-item:nth-child(1),
  .hub-front-shop-item:nth-child(2),
  .hub-front-shop-item:nth-child(3) {
    height: clamp(142px, 35vw, 180px) !important;
    min-width: 0;
    padding: 0.55rem 0.35rem 2rem !important;
    border-radius: 18px !important;
    transform: none !important;
  }

  .hub-front-shop-item:hover {
    transform: none !important;
  }

  .hub-front-shop-item::after {
    left: 0.35rem;
    right: 0.35rem;
    bottom: 0.45rem;
    min-height: 24px;
    padding: 0.25rem 0.25rem;
    font-size: 0.52rem;
    letter-spacing: 0.06em;
  }

  .hub-front-shop-item img,
  .hub-front-shop-item:nth-child(1) img,
  .hub-front-shop-item:nth-child(2) img,
  .hub-front-shop-item:nth-child(3) img {
    max-width: 125% !important;
    max-height: clamp(82px, 22vw, 115px) !important;
  }

  .hub-front-shop-item:nth-child(2) img {
    max-width: 140% !important;
  }
}

@media (max-width: 420px) {
  .hub-front-shop .hub-promo-copy {
    padding-left: 1rem;
    padding-right: 1rem;
  }

  .hub-front-shop-grid {
    gap: 0.45rem !important;
  }

  .hub-front-shop-item,
  .hub-front-shop-item:nth-child(1),
  .hub-front-shop-item:nth-child(2),
  .hub-front-shop-item:nth-child(3) {
    height: 136px !important;
    padding-bottom: 1.85rem !important;
    border-radius: 16px !important;
  }

  .hub-front-shop-item img,
  .hub-front-shop-item:nth-child(1) img,
  .hub-front-shop-item:nth-child(2) img,
  .hub-front-shop-item:nth-child(3) img {
    max-height: 78px !important;
  }

  .hub-front-shop-item::after {
    font-size: 0.48rem;
  }
}
/* ===== EXPLORE BLUEBOX / PATHWAY CARDS POLISH ===== */

.hub-benefits-head {
  margin-bottom: clamp(1.7rem, 3vw, 2.6rem);
}

.hub-benefits-head .hub-section-title {
  margin-bottom: 0.75rem;
}

.hub-benefits-intro {
  max-width: 48rem;
  font-size: clamp(0.98rem, 1.15vw, 1.08rem);
  line-height: 1.55;
}

.hub-benefits-grid {
  gap: clamp(0.85rem, 1.4vw, 1.15rem);
}

.hub-benefit {
  min-height: clamp(330px, 26vw, 430px);
  padding: 1.35rem;
  border-color: rgba(240, 201, 107, 0.24);
  background-image:
    linear-gradient(180deg, rgba(5, 16, 29, 0.08) 0%, rgba(5, 16, 29, 0.36) 42%, rgba(3, 11, 22, 0.95) 100%),
    var(--hub-benefit-image),
    linear-gradient(180deg, rgba(9, 24, 43, 0.82) 0%, rgba(8, 21, 38, 0.68) 100%);
  box-shadow:
    0 22px 54px rgba(0, 0, 0, 0.24),
    inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.hub-benefit::before {
  z-index: 4;
  opacity: 0.8;
  transition: opacity 0.28s ease;
}

.hub-benefit::after {
  content: "";
  position: absolute;
  inset: auto -18% -28% auto;
  width: 230px;
  height: 230px;
  border-radius: 999px;
  background:
    radial-gradient(circle, rgba(104, 199, 255, 0.18) 0%, rgba(104, 199, 255, 0.00) 68%),
    radial-gradient(circle, rgba(240, 201, 107, 0.12) 0%, rgba(240, 201, 107, 0.00) 72%);
  opacity: 0;
  transition:
    opacity 0.28s ease,
    transform 0.28s ease;
  transform: scale(0.9);
  pointer-events: none;
  z-index: 1;
}

.hub-benefit:hover {
  transform: translateY(-7px);
  border-color: rgba(240, 201, 107, 0.52);
  box-shadow:
    0 30px 70px rgba(0, 0, 0, 0.34),
    0 0 24px rgba(104, 199, 255, 0.08);
}

.hub-benefit:hover::before {
  opacity: 1;
}

.hub-benefit:hover::after {
  opacity: 1;
  transform: scale(1);
}

.hub-benefit > div {
  min-height: 100%;
  justify-content: flex-end;
}

.hub-benefit > div::before {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  min-height: 30px;
  margin-bottom: 0.75rem;
  padding: 0.36rem 0.72rem;
  border-radius: 999px;
  border: 1px solid rgba(240, 201, 107, 0.24);
  background: rgba(5, 16, 31, 0.68);
  color: var(--hub-gold-400);
  font-size: 0.62rem;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  backdrop-filter: blur(8px);
}

.hub-benefits-grid .hub-benefit:nth-child(1) > div::before {
  content: "Business";
}

.hub-benefits-grid .hub-benefit:nth-child(2) > div::before {
  content: "Improve";
}

.hub-benefits-grid .hub-benefit:nth-child(3) > div::before {
  content: "Families";
}

.hub-benefits-grid .hub-benefit:nth-child(4) > div::before {
  content: "Premium";
}

.hub-benefit h3 {
  font-size: clamp(1.9rem, 2.4vw, 2.45rem);
  line-height: 0.9;
  color: var(--hub-white);
}

.hub-benefit h3::after {
  content: "";
  display: block;
  width: 3.4rem;
  height: 2px;
  margin-top: 0.75rem;
  border-radius: 999px;
  background: linear-gradient(
    90deg,
    var(--hub-gold-400) 0%,
    var(--hub-blue-400) 100%
  );
  box-shadow:
    0 0 10px rgba(240, 201, 107, 0.16),
    0 0 12px rgba(104, 199, 255, 0.10);
}

.hub-benefit p {
  max-width: 22rem;
  font-size: 0.95rem;
  line-height: 1.45;
}

.hub-benefit[href] > div::after {
  content: "Explore";
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  min-height: 38px;
  margin-top: 1rem;
  padding: 0.58rem 0.9rem;
  border-radius: 999px;
  border: 1px solid rgba(240, 201, 107, 0.28);
  background: rgba(5, 16, 31, 0.72);
  color: var(--hub-gold-400);
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  opacity: 0;
  transform: translateY(8px);
  transition:
    opacity 0.28s ease,
    transform 0.28s ease,
    background 0.28s ease,
    color 0.28s ease;
  backdrop-filter: blur(8px);
}

.hub-benefit[href]:hover > div::after {
  opacity: 1;
  transform: translateY(0);
}

.hub-benefit[href] > div::after:hover {
  background: linear-gradient(135deg, var(--hub-gold-300) 0%, var(--hub-gold-500) 100%);
  color: #071322;
}

/* Make the four cards feel slightly less flat on desktop */
@media (min-width: 1101px) {
  .hub-benefits-grid .hub-benefit:nth-child(1),
  .hub-benefits-grid .hub-benefit:nth-child(3) {
    transform: translateY(14px);
  }

  .hub-benefits-grid .hub-benefit:nth-child(1):hover,
  .hub-benefits-grid .hub-benefit:nth-child(3):hover {
    transform: translateY(7px);
  }
}

/* Mobile keeps the information visible rather than hiding it behind hover */
@media (max-width: 860px) {
  .hub-benefits-head {
    margin-bottom: 1.25rem;
  }

  .hub-benefit {
    min-height: 300px;
    padding: 1.2rem;
  }

  .hub-benefit h3 {
    font-size: 2rem;
  }

  .hub-benefit p {
    max-width: 100%;
    margin-top: 0.8rem;
    max-height: 220px;
    opacity: 1;
    transform: none;
  }

  .hub-benefit[href] > div::after {
    opacity: 1;
    transform: none;
  }

  .hub-benefits-grid .hub-benefit:nth-child(1),
  .hub-benefits-grid .hub-benefit:nth-child(3) {
    transform: none;
  }
}
/* ===== EXPLORE BLUEBOX - FORCE MATCHING TITLE SIZE ===== */

body.is-bluebox-front-page .hub-benefits-grid .hub-benefit h3 {
  font-size: clamp(1.65rem, 1.85vw, 2.15rem) !important;
  line-height: 0.92 !important;
  letter-spacing: 0.01em !important;
  white-space: nowrap !important;
  max-width: none !important;
  min-height: 0 !important;
}

/* Keep the underline aligned under all titles */
body.is-bluebox-front-page .hub-benefits-grid .hub-benefit h3::after {
  margin-top: 0.65rem;
}

/* Let titles wrap again on smaller screens */
@media (max-width: 1100px) {
  body.is-bluebox-front-page .hub-benefits-grid .hub-benefit h3 {
    font-size: clamp(2rem, 5vw, 2.8rem) !important;
    white-space: normal !important;
  }
}

@media (max-width: 560px) {
  body.is-bluebox-front-page .hub-benefits-grid .hub-benefit h3 {
    font-size: clamp(1.85rem, 8vw, 2.35rem) !important;
  }
}
/* ===== EXPLORE BLUEBOX - ALIGN CARD ROW ===== */

body.is-bluebox-front-page .hub-benefits-grid {
  align-items: stretch !important;
}

body.is-bluebox-front-page .hub-benefits-grid .hub-benefit {
  height: 430px !important;
  min-height: 430px !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  transform: none !important;
}

/* Remove any staggered positioning from previous styling */
body.is-bluebox-front-page .hub-benefits-grid .hub-benefit:nth-child(1),
body.is-bluebox-front-page .hub-benefits-grid .hub-benefit:nth-child(2),
body.is-bluebox-front-page .hub-benefits-grid .hub-benefit:nth-child(3),
body.is-bluebox-front-page .hub-benefits-grid .hub-benefit:nth-child(4) {
  margin-top: 0 !important;
  transform: none !important;
}

/* Keep the hover lift, but only on hover */
body.is-bluebox-front-page .hub-benefits-grid .hub-benefit:hover {
  transform: translateY(-4px) !important;
}

/* Tablet */
@media (max-width: 1100px) {
  body.is-bluebox-front-page .hub-benefits-grid .hub-benefit {
    height: 390px !important;
    min-height: 390px !important;
  }
}

/* Mobile */
@media (max-width: 860px) {
  body.is-bluebox-front-page .hub-benefits-grid .hub-benefit {
    height: 320px !important;
    min-height: 320px !important;
  }

  body.is-bluebox-front-page .hub-benefits-grid .hub-benefit:hover {
    transform: none !important;
  }
}
/* ===== JOIN BLUEBOX NEWSLETTER - PREMIUM POLISH ===== */

.hub-newsletter {
  position: relative;
  overflow: hidden;
  border-radius: 42px;
  border: 1px solid rgba(104, 199, 255, 0.18);
  background:
    radial-gradient(circle at 18% 24%, rgba(104, 199, 255, 0.18), transparent 24rem),
    radial-gradient(circle at 82% 72%, rgba(240, 201, 107, 0.12), transparent 22rem),
    linear-gradient(135deg, rgba(6, 19, 38, 0.98) 0%, rgba(8, 24, 44, 0.96) 48%, rgba(5, 16, 31, 0.98) 100%);
  box-shadow:
    0 32px 84px rgba(0, 0, 0, 0.36),
    0 0 46px rgba(104, 199, 255, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.hub-newsletter::before {
  content: "";
  position: absolute;
  inset: 0;
  padding: 1px;
  border-radius: inherit;
  background: linear-gradient(
    135deg,
    rgba(104, 199, 255, 0.24) 0%,
    rgba(240, 201, 107, 0.18) 48%,
    rgba(104, 199, 255, 0.10) 100%
  );
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

.hub-newsletter::after {
  content: "";
  position: absolute;
  right: -7rem;
  top: -7rem;
  width: 18rem;
  height: 18rem;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(240, 201, 107, 0.18), transparent 68%);
  filter: blur(8px);
  opacity: 0.75;
  pointer-events: none;
}

.hub-newsletter-inner {
  position: relative;
  z-index: 2;
  grid-template-columns: minmax(0, 0.95fr) minmax(420px, 1.05fr);
  gap: clamp(1.5rem, 4vw, 3rem);
  padding: clamp(2rem, 4vw, 3.4rem);
}

.hub-newsletter-copy {
  position: relative;
  max-width: 46rem;
}

.hub-newsletter-copy .hub-kicker {
  margin-bottom: 0.8rem;
  color: var(--hub-gold-400);
}

.hub-newsletter-title {
  position: relative;
  display: inline-block;
  margin-bottom: 1rem;
  padding-bottom: 0.85rem;
  font-size: clamp(3rem, 5.5vw, 5.8rem);
  line-height: 0.88;
  letter-spacing: 0.01em;
  text-shadow:
    0 0 18px rgba(104, 199, 255, 0.12),
    0 3px 18px rgba(0, 0, 0, 0.34);
}

.hub-newsletter-title::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 10rem;
  height: 5px;
  border-radius: 999px;
  background:
    linear-gradient(
      90deg,
      var(--hub-gold-300) 0%,
      var(--hub-gold-500) 54%,
      var(--hub-blue-400) 100%
    );
  box-shadow:
    0 0 12px rgba(240, 201, 107, 0.24),
    0 0 18px rgba(104, 199, 255, 0.12);
}

.hub-newsletter-copy p {
  max-width: 42rem;
  margin: 0;
  color: rgba(255, 255, 255, 0.76);
  font-size: 1.02rem;
  line-height: 1.55;
}

.hub-newsletter-side {
  align-content: center;
  gap: 1.15rem;
}

.hub-newsletter-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.85rem;
  justify-content: stretch;
  padding: 0.35rem;
  border-radius: 999px;
  border: 1px solid rgba(104, 199, 255, 0.14);
  background: rgba(255, 255, 255, 0.035);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.04),
    0 12px 28px rgba(0, 0, 0, 0.18);
}

.hub-newsletter-form input[type="email"] {
  width: 100%;
  min-height: 54px;
  border: 0;
  background: transparent;
  padding: 0 1rem;
  color: var(--hub-white);
}

.hub-newsletter-form input[type="email"]::placeholder {
  color: rgba(255, 255, 255, 0.48);
}

.hub-newsletter-form input[type="email"]:focus-visible {
  outline: none;
}

.hub-newsletter-form .hub-btn {
  min-height: 54px;
  padding-inline: 1.35rem;
  box-shadow:
    0 14px 28px rgba(215, 169, 63, 0.24),
    inset 0 1px 0 rgba(255, 255, 255, 0.20);
}

.hub-newsletter-socials {
  justify-content: flex-end;
  gap: 0.8rem;
}

.hub-newsletter-socials-label {
  color: var(--hub-gold-400);
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.12em;
}

.hub-newsletter-social-links {
  gap: 0.55rem;
}

.hub-newsletter-social-links a {
  min-height: 42px;
  padding: 0.66rem 0.95rem;
  border-color: rgba(240, 201, 107, 0.20);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.055) 0%, rgba(255, 255, 255, 0.025) 100%);
  color: rgba(255, 255, 255, 0.76);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.04),
    0 10px 22px rgba(0, 0, 0, 0.12);
}

.hub-newsletter-social-links a:hover {
  transform: translateY(-2px);
  border-color: rgba(240, 201, 107, 0.42);
  background: rgba(240, 201, 107, 0.10);
  color: var(--hub-white);
}

/* Tablet */
@media (max-width: 1100px) {
  .hub-newsletter-inner {
    grid-template-columns: 1fr;
  }

  .hub-newsletter-side {
    width: 100%;
  }

  .hub-newsletter-form {
    max-width: 720px;
  }

  .hub-newsletter-socials,
  .hub-newsletter-social-links {
    justify-content: flex-start;
  }
}

/* Mobile */
@media (max-width: 860px) {
  .hub-newsletter {
    border-radius: 30px;
  }

  .hub-newsletter-inner {
    padding: 1.35rem;
    gap: 1.35rem;
  }

  .hub-newsletter-title {
    font-size: clamp(2.55rem, 12vw, 4rem);
  }

  .hub-newsletter-title::after {
    width: 7.5rem;
    height: 4px;
  }

  .hub-newsletter-form {
    grid-template-columns: 1fr;
    border-radius: 24px;
    padding: 0.75rem;
  }

  .hub-newsletter-form input[type="email"] {
    min-height: 50px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.045);
  }

  .hub-newsletter-form .hub-btn {
    width: 100%;
  }

  .hub-newsletter-socials {
    align-items: flex-start;
  }

  .hub-newsletter-social-links a {
    min-height: 38px;
    padding: 0.6rem 0.82rem;
  }
}

/* Small mobile */
@media (max-width: 560px) {
  .hub-newsletter-inner {
    padding: 1.1rem;
  }

  .hub-newsletter-copy p {
    font-size: 0.94rem;
  }

  .hub-newsletter-social-links {
    width: 100%;
  }

  .hub-newsletter-social-links a {
    flex: 1 1 auto;
  }
}
/* ===== COMMUNITY ONE-LINER ===== */

.hub-community-mini-copy {
  display: block;
  max-width: 40rem;
  margin: 0.45rem auto 0;
  color: rgba(255, 255, 255, 0.72);
  font-size: clamp(0.9rem, 1vw, 1.02rem);
  line-height: 1.45;
  font-weight: 600;
  text-align: center;
}

.hub-community-showcase-head .hub-community-mini-copy {
  justify-self: center;
}

@media (max-width: 560px) {
  .hub-community-mini-copy {
    max-width: 19rem;
    margin-top: 0.4rem;
    font-size: 0.84rem;
  }
}
/* ===== COMMUNITY HEADER ALIGNMENT FIX ===== */

.hub-community-showcase-head {
  position: relative !important;
  display: grid !important;
  grid-template-columns: 1fr !important;
  justify-items: center !important;
  align-items: start !important;
  max-width: 100% !important;
  margin: 0 auto clamp(1.4rem, 2vw, 1.8rem) !important;
  padding-top: 0.25rem;
  text-align: center !important;
}

/* Keep Bluebox Community on the left without affecting title alignment */
.hub-community-showcase-head .hub-community-pill {
  position: absolute !important;
  top: 0;
  left: clamp(1rem, 3vw, 2rem);
  margin: 0 !important;
}

/* Centre title, loading bar and copy as one block */
.hub-community-mini-title,
.hub-community-showcase-title {
  justify-self: center !important;
  text-align: center !important;
  margin-inline: auto !important;
}

.hub-community-mini-copy {
  display: block !important;
  justify-self: center !important;
  width: fit-content !important;
  max-width: min(42rem, 90%) !important;
  margin: 0.55rem auto 0 !important;
  color: rgba(255, 255, 255, 0.72);
  font-size: clamp(0.9rem, 1vw, 1.02rem);
  line-height: 1.45;
  font-weight: 700;
  text-align: center !important;
}

/* Keeps the cards from sitting too tight under the heading */
.hub-community-stage,
.hub-community-fun-marquee {
  margin-top: clamp(0.85rem, 1.4vw, 1.35rem);
}

@media (max-width: 860px) {
  .hub-community-showcase-head {
    padding-top: 0;
    gap: 0.55rem;
  }

  .hub-community-showcase-head .hub-community-pill {
    position: static !important;
    justify-self: center !important;
    margin-bottom: 0.2rem !important;
  }

  .hub-community-mini-copy {
    max-width: 22rem !important;
    margin-top: 0.35rem !important;
    font-size: 0.86rem;
  }
}

@media (max-width: 560px) {
  .hub-community-mini-copy {
    max-width: 18.5rem !important;
    font-size: 0.82rem;
  }
}
/* ===== COMMUNITY HEADER FINAL FORCE FIX ===== */
/* Centres title, bar and one-liner. Keeps Bluebox Community pill left. */

body.is-bluebox-front-page .hub-front-community-fun .hub-community-fun-head {
  position: relative !important;
  display: grid !important;
  grid-template-columns: 1fr !important;
  justify-items: center !important;
  align-items: start !important;
  max-width: 100% !important;
  min-height: auto !important;
  margin: 0 auto clamp(1.25rem, 2vw, 1.8rem) !important;
  padding: 0.15rem clamp(1rem, 2vw, 1.6rem) 0 !important;
  text-align: center !important;
}

/* Keep the Bluebox Community pill on the left without affecting the centred title block */
body.is-bluebox-front-page .hub-front-community-fun .hub-community-fun-pill {
  position: absolute !important;
  top: 0 !important;
  left: clamp(1rem, 3vw, 2rem) !important;
  grid-column: auto !important;
  grid-row: auto !important;
  justify-self: auto !important;
  align-self: auto !important;
  margin: 0 !important;
  transform: none !important;
}

/* Centre Where Players Belong and the loading bar */
body.is-bluebox-front-page .hub-front-community-fun .hub-community-mini-title,
body.is-bluebox-front-page .hub-front-community-fun .hub-community-load-title {
  grid-column: 1 !important;
  grid-row: 1 !important;
  justify-self: center !important;
  align-self: start !important;
  margin: 0 auto !important;
  text-align: center !important;
  transform: none !important;
}

/* Centre the one-liner under the title/bar */
body.is-bluebox-front-page .hub-front-community-fun .hub-community-mini-copy {
  grid-column: 1 !important;
  grid-row: 2 !important;
  justify-self: center !important;
  align-self: start !important;
  display: block !important;
  width: fit-content !important;
  max-width: min(42rem, 90%) !important;
  margin: 0.6rem auto 0 !important;
  color: rgba(255, 255, 255, 0.72);
  font-size: clamp(0.9rem, 1vw, 1.02rem);
  line-height: 1.45;
  font-weight: 700;
  text-align: center !important;
}

/* If the copy was accidentally placed outside the heading div, still centre it */
body.is-bluebox-front-page .hub-front-community-fun .hub-community-fun-showcase > .hub-community-mini-copy {
  display: block !important;
  width: fit-content !important;
  max-width: min(42rem, 90%) !important;
  margin: 0.6rem auto 0 !important;
  text-align: center !important;
}

/* Keep carousel gap clean */
body.is-bluebox-front-page .hub-front-community-fun .hub-community-fun-marquee {
  margin-top: clamp(0.95rem, 1.5vw, 1.45rem) !important;
}

/* Mobile: stack the pill above the title so nothing overlaps */
@media (max-width: 860px) {
  body.is-bluebox-front-page .hub-front-community-fun .hub-community-fun-head {
    gap: 0.55rem !important;
    margin-bottom: 1rem !important;
    padding-top: 0 !important;
  }

  body.is-bluebox-front-page .hub-front-community-fun .hub-community-fun-pill {
    position: static !important;
    grid-column: 1 !important;
    grid-row: 1 !important;
    justify-self: center !important;
    margin: 0 0 0.15rem !important;
  }

  body.is-bluebox-front-page .hub-front-community-fun .hub-community-mini-title,
  body.is-bluebox-front-page .hub-front-community-fun .hub-community-load-title {
    grid-row: 2 !important;
  }

  body.is-bluebox-front-page .hub-front-community-fun .hub-community-mini-copy {
    grid-row: 3 !important;
    max-width: 22rem !important;
    margin-top: 0.35rem !important;
    font-size: 0.86rem;
  }
}

@media (max-width: 560px) {
  body.is-bluebox-front-page .hub-front-community-fun .hub-community-mini-copy {
    max-width: 18.5rem !important;
    font-size: 0.82rem;
  }
}
/* ===== PREMIUM FOOTER ===== */

.hub-footer {
  padding: clamp(2rem, 4vw, 4rem) 0 2rem;
}

.hub-footer-card {
  position: relative;
  overflow: hidden;
  border-radius: 42px;
  border: 1px solid rgba(104, 199, 255, 0.18);
  background:
    radial-gradient(circle at 18% 20%, rgba(104, 199, 255, 0.16), transparent 24rem),
    radial-gradient(circle at 84% 74%, rgba(240, 201, 107, 0.12), transparent 22rem),
    linear-gradient(135deg, rgba(6, 19, 38, 0.98) 0%, rgba(8, 24, 44, 0.96) 48%, rgba(5, 16, 31, 0.98) 100%);
  box-shadow:
    0 32px 84px rgba(0, 0, 0, 0.34),
    0 0 46px rgba(104, 199, 255, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.hub-footer-card::before {
  content: "";
  position: absolute;
  inset: 0;
  padding: 1px;
  border-radius: inherit;
  background: linear-gradient(
    135deg,
    rgba(104, 199, 255, 0.24) 0%,
    rgba(240, 201, 107, 0.18) 48%,
    rgba(104, 199, 255, 0.10) 100%
  );
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

.hub-footer-card::after {
  content: "BLUEBOX";
  position: absolute;
  left: 50%;
  bottom: -0.18em;
  z-index: 0;
  transform: translateX(-50%);
  font-family: var(--font-display);
  font-size: clamp(5rem, 16vw, 15rem);
  line-height: 0.8;
  letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.035);
  pointer-events: none;
  user-select: none;
  white-space: nowrap;
}

.hub-footer-cta,
.hub-footer-grid--premium,
.hub-footer-bottom {
  position: relative;
  z-index: 2;
}

.hub-footer-cta {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: clamp(1.25rem, 3vw, 2.5rem);
  align-items: center;
  padding: clamp(1.5rem, 3vw, 2.6rem);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.hub-footer-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  min-height: 40px;
  margin-bottom: 1rem;
  padding: 0.45rem 1rem;
  border-radius: 999px;
  border: 1px solid rgba(240, 201, 107, 0.34);
  background: rgba(5, 16, 31, 0.68);
  color: var(--hub-gold-400);
  font-size: 0.74rem;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  backdrop-filter: blur(10px);
}

.hub-footer-pill-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.55rem;
  height: 1.55rem;
  border-radius: 999px;
  border: 1px solid rgba(104, 199, 255, 0.36);
  background: rgba(104, 199, 255, 0.10);
  color: var(--hub-blue-400);
  font-family: var(--font-display);
  font-size: 0.68rem;
  line-height: 1;
}

.hub-footer-title {
  position: relative;
  display: inline-block;
  margin: 0 0 0.85rem;
  padding-bottom: 0.85rem;
  font-family: var(--font-display);
  font-size: clamp(2.8rem, 5vw, 5.2rem);
  line-height: 0.88;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: var(--hub-white);
  text-shadow:
    0 0 18px rgba(104, 199, 255, 0.12),
    0 3px 18px rgba(0, 0, 0, 0.34);
}

.hub-footer-title::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 10rem;
  height: 5px;
  border-radius: 999px;
  background: linear-gradient(
    90deg,
    var(--hub-gold-300) 0%,
    var(--hub-gold-500) 55%,
    var(--hub-blue-400) 100%
  );
  box-shadow:
    0 0 12px rgba(240, 201, 107, 0.24),
    0 0 18px rgba(104, 199, 255, 0.12);
}

.hub-footer-cta-copy p {
  max-width: 42rem;
  margin: 0;
  color: rgba(255, 255, 255, 0.76);
  font-size: 1.02rem;
  line-height: 1.55;
}

.hub-footer-cta-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.85rem;
}

.hub-footer-grid--premium {
  display: grid;
  grid-template-columns: minmax(260px, 1.35fr) repeat(3, minmax(0, 1fr));
  gap: clamp(1rem, 2vw, 1.8rem);
  padding: clamp(1.5rem, 3vw, 2.4rem);
  border-top: 0;
}

.hub-footer-brand,
.hub-footer-column {
  min-width: 0;
}

.hub-footer-brand h4,
.hub-footer-column h4 {
  margin: 0 0 0.9rem;
  color: var(--hub-gold-400);
  font-size: 0.76rem;
  font-weight: 900;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.hub-footer-brand p {
  max-width: 26rem;
  margin: 0;
  color: rgba(255, 255, 255, 0.70);
  line-height: 1.55;
}

.hub-footer-column ul {
  display: grid;
  gap: 0.65rem;
}

.hub-footer-column li + li {
  margin-top: 0;
}

.hub-footer-column a {
  position: relative;
  display: inline-flex;
  align-items: center;
  width: fit-content;
  color: rgba(255, 255, 255, 0.72);
  font-size: 0.95rem;
  transition:
    color 0.22s ease,
    transform 0.22s ease;
}

.hub-footer-column a::before {
  content: "";
  width: 0.38rem;
  height: 0.38rem;
  margin-right: 0.55rem;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--hub-gold-300) 0%, var(--hub-blue-400) 100%);
  opacity: 0.72;
  transition:
    opacity 0.22s ease,
    transform 0.22s ease;
}

.hub-footer-column a:hover {
  color: var(--hub-white);
  transform: translateX(2px);
}

.hub-footer-column a:hover::before {
  opacity: 1;
  transform: scale(1.2);
}

.hub-footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 0;
  padding: 1rem clamp(1.5rem, 3vw, 2.4rem) 1.25rem;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.62);
  font-size: 0.88rem;
}

.hub-footer-bottom p {
  margin: 0;
}

.hub-footer-top-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  padding: 0.45rem 0.8rem;
  border-radius: 999px;
  border: 1px solid rgba(240, 201, 107, 0.20);
  background: rgba(255, 255, 255, 0.035);
  color: rgba(255, 255, 255, 0.72);
  font-size: 0.7rem;
  font-weight: 900;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  transition:
    transform 0.22s ease,
    background 0.22s ease,
    border-color 0.22s ease,
    color 0.22s ease;
}

.hub-footer-top-link:hover {
  transform: translateY(-2px);
  background: rgba(240, 201, 107, 0.10);
  border-color: rgba(240, 201, 107, 0.38);
  color: var(--hub-white);
}

@media (max-width: 1100px) {
  .hub-footer-cta,
  .hub-footer-grid--premium {
    grid-template-columns: 1fr;
  }

  .hub-footer-cta-actions {
    justify-content: flex-start;
  }
}

@media (max-width: 860px) {
  .hub-footer-card {
    border-radius: 30px;
  }

  .hub-footer-cta {
    padding: 1.35rem;
  }

  .hub-footer-title {
    font-size: clamp(2.45rem, 11vw, 4rem);
  }

  .hub-footer-title::after {
    width: 7.5rem;
    height: 4px;
  }

  .hub-footer-cta-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .hub-footer-cta-actions .hub-btn {
    width: 100%;
  }

  .hub-footer-grid--premium {
    padding: 1.35rem;
    gap: 1.35rem;
  }

  .hub-footer-bottom {
    align-items: flex-start;
    flex-direction: column;
    padding: 1rem 1.35rem 1.25rem;
  }
}

@media (max-width: 560px) {
  .hub-footer {
    padding-top: 1.6rem;
  }

  .hub-footer-cta {
    padding: 1.1rem;
  }

  .hub-footer-grid--premium {
    padding: 1.1rem;
  }

  .hub-footer-pill {
    font-size: 0.66rem;
  }

  .hub-footer-cta-copy p,
  .hub-footer-brand p {
    font-size: 0.94rem;
  }
}
/* ===== FRONT SHOP ITEMS - FINAL CLEAN FIX ===== */
/* Uses the real span labels only. Removes duplicate pseudo labels and keeps desktop/mobile aligned. */

/* Disable old generated labels and shimmer on product cards only */
.hub-front-shop .hub-front-shop-item::before,
.hub-front-shop .hub-front-shop-item::after {
	content: none !important;
	display: none !important;
}

/* Clickable product cards */
.hub-front-shop .hub-front-shop-item {
	position: relative !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	overflow: hidden !important;
	color: inherit !important;
	text-decoration: none !important;
	cursor: pointer !important;
	padding: 1rem 0.85rem 3.1rem !important;
}

/* Product image fit */
.hub-front-shop .hub-front-shop-item img {
	position: relative !important;
	z-index: 2 !important;
	display: block !important;
	width: 100% !important;
	height: 100% !important;
	max-width: 128% !important;
	max-height: 205px !important;
	object-fit: contain !important;
	object-position: center !important;
	margin: 0 auto !important;
	filter:
		drop-shadow(0 18px 24px rgba(0, 0, 0, 0.34))
		saturate(1.02)
		brightness(0.98) !important;
	transition:
		transform 0.28s ease,
		filter 0.28s ease !important;
}

.hub-front-shop .hub-front-shop-item:nth-child(1) img {
	transform: scale(1.08) !important;
}

.hub-front-shop .hub-front-shop-item:nth-child(2) img {
	max-width: 136% !important;
	max-height: 215px !important;
	transform: scale(1.02) !important;
}

.hub-front-shop .hub-front-shop-item:nth-child(3) img {
	transform: scale(1.1) !important;
}

/* One real label only */
.hub-front-shop .hub-front-shop-item > span {
	position: absolute !important;
	left: 50% !important;
	right: auto !important;
	bottom: 0.75rem !important;
	top: auto !important;
	z-index: 5 !important;

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

	width: auto !important;
	min-width: 7.4rem !important;
	max-width: calc(100% - 1.2rem) !important;
	min-height: 34px !important;
	padding: 0.48rem 0.85rem !important;

	border-radius: 999px !important;
	border: 1px solid rgba(240, 201, 107, 0.26) !important;
	background: rgba(5, 16, 31, 0.86) !important;
	color: var(--hub-gold-400) !important;

	font-size: 0.68rem !important;
	font-weight: 900 !important;
	line-height: 1 !important;
	letter-spacing: 0.08em !important;
	text-align: center !important;
	text-transform: uppercase !important;
	white-space: nowrap !important;

	transform: translateX(-50%) !important;
	backdrop-filter: blur(8px) !important;
	box-shadow:
		0 10px 22px rgba(0, 0, 0, 0.28),
		inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;
}

.hub-front-shop .hub-front-shop-item:hover {
	border-color: rgba(240, 201, 107, 0.44) !important;
	box-shadow:
		0 30px 68px rgba(0, 0, 0, 0.38),
		0 0 28px rgba(104, 199, 255, 0.10),
		0 0 18px rgba(240, 201, 107, 0.08) !important;
}

.hub-front-shop .hub-front-shop-item:hover img {
	transform: scale(1.055) !important;
	filter:
		drop-shadow(0 22px 30px rgba(0, 0, 0, 0.40))
		saturate(1.08)
		brightness(1.04) !important;
}

.hub-front-shop .hub-front-shop-item:hover > span {
	background: rgba(240, 201, 107, 0.12) !important;
	border-color: rgba(240, 201, 107, 0.44) !important;
	color: var(--hub-white) !important;
}

/* Desktop card positions */
@media (min-width: 681px) {
	.hub-front-shop .hub-front-shop-item:nth-child(1) {
		transform: translateY(18px) rotate(-2.2deg) !important;
	}

	.hub-front-shop .hub-front-shop-item:nth-child(2) {
		height: 320px !important;
		transform: translateY(-8px) !important;
		border-color: rgba(240, 201, 107, 0.34) !important;
	}

	.hub-front-shop .hub-front-shop-item:nth-child(3) {
		transform: translateY(18px) rotate(2.2deg) !important;
	}

	.hub-front-shop .hub-front-shop-item:hover {
		transform: translateY(-8px) rotate(0deg) !important;
	}
}

/* Mobile: three product cards in one row, no duplicate labels */
@media (max-width: 680px) {
	.hub-front-shop .hub-promo-card--shop {
		min-height: auto !important;
	}

	.hub-front-shop .hub-promo-copy {
		padding-bottom: 0.75rem !important;
	}

	.hub-front-shop .hub-promo-title {
		font-size: clamp(2.35rem, 12vw, 3.35rem) !important;
		line-height: 0.9 !important;
	}

	.hub-front-shop .hub-promo-text {
		max-width: 22rem !important;
		font-size: 0.94rem !important;
	}

	.hub-front-shop-media {
		display: block !important;
		padding: 0.5rem 0.85rem 1.1rem !important;
	}

	.hub-front-shop-media::before {
		position: static !important;
		display: flex !important;
		width: fit-content !important;
		min-height: 30px !important;
		margin: 0 auto 0.85rem !important;
		padding: 0.32rem 0.75rem !important;
		font-size: 0.62rem !important;
		transform: none !important;
	}

	.hub-front-shop-media::after {
		bottom: 0.7rem !important;
		width: 72% !important;
	}

	.hub-front-shop-grid {
		display: grid !important;
		grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
		gap: 0.55rem !important;
		width: 100% !important;
		margin: 0 auto !important;
		align-items: stretch !important;
	}

	.hub-front-shop .hub-front-shop-item,
	.hub-front-shop .hub-front-shop-item:nth-child(1),
	.hub-front-shop .hub-front-shop-item:nth-child(2),
	.hub-front-shop .hub-front-shop-item:nth-child(3) {
		height: clamp(142px, 35vw, 180px) !important;
		min-width: 0 !important;
		padding: 0.55rem 0.35rem 2rem !important;
		border-radius: 18px !important;
		transform: none !important;
	}

	.hub-front-shop .hub-front-shop-item:hover {
		transform: none !important;
	}

	.hub-front-shop .hub-front-shop-item img,
	.hub-front-shop .hub-front-shop-item:nth-child(1) img,
	.hub-front-shop .hub-front-shop-item:nth-child(2) img,
	.hub-front-shop .hub-front-shop-item:nth-child(3) img {
		max-width: 125% !important;
		max-height: clamp(82px, 22vw, 115px) !important;
		transform: none !important;
	}

	.hub-front-shop .hub-front-shop-item:nth-child(2) img {
		max-width: 140% !important;
	}

	.hub-front-shop .hub-front-shop-item > span {
		bottom: 0.45rem !important;
		min-width: 0 !important;
		width: calc(100% - 0.7rem) !important;
		max-width: calc(100% - 0.7rem) !important;
		min-height: 24px !important;
		padding: 0.25rem 0.22rem !important;
		font-size: 0.52rem !important;
		letter-spacing: 0.055em !important;
	}
}

@media (max-width: 420px) {
	.hub-front-shop .hub-promo-copy {
		padding-left: 1rem !important;
		padding-right: 1rem !important;
	}

	.hub-front-shop-grid {
		gap: 0.45rem !important;
	}

	.hub-front-shop .hub-front-shop-item,
	.hub-front-shop .hub-front-shop-item:nth-child(1),
	.hub-front-shop .hub-front-shop-item:nth-child(2),
	.hub-front-shop .hub-front-shop-item:nth-child(3) {
		height: 136px !important;
		padding-bottom: 1.85rem !important;
		border-radius: 16px !important;
	}

	.hub-front-shop .hub-front-shop-item img,
	.hub-front-shop .hub-front-shop-item:nth-child(1) img,
	.hub-front-shop .hub-front-shop-item:nth-child(2) img,
	.hub-front-shop .hub-front-shop-item:nth-child(3) img {
		max-height: 78px !important;
	}

	.hub-front-shop .hub-front-shop-item > span {
		font-size: 0.48rem !important;
	}
}
/* ===== FRONT SHOP PRODUCTS - ALIGN DESKTOP CARDS ===== */

@media (min-width: 681px) {
	.hub-front-shop .hub-front-shop-grid {
		align-items: center !important;
	}

	.hub-front-shop .hub-front-shop-item,
	.hub-front-shop .hub-front-shop-item:nth-child(1),
	.hub-front-shop .hub-front-shop-item:nth-child(2),
	.hub-front-shop .hub-front-shop-item:nth-child(3) {
		height: 300px !important;
		transform: none !important;
	}

	.hub-front-shop .hub-front-shop-item:hover,
	.hub-front-shop .hub-front-shop-item:nth-child(1):hover,
	.hub-front-shop .hub-front-shop-item:nth-child(2):hover,
	.hub-front-shop .hub-front-shop-item:nth-child(3):hover {
		transform: translateY(-6px) !important;
	}

	.hub-front-shop .hub-front-shop-item img,
	.hub-front-shop .hub-front-shop-item:nth-child(1) img,
	.hub-front-shop .hub-front-shop-item:nth-child(2) img,
	.hub-front-shop .hub-front-shop-item:nth-child(3) img {
		max-height: 200px !important;
		transform: none !important;
	}

	.hub-front-shop .hub-front-shop-item:hover img {
		transform: scale(1.045) !important;
	}
}

/* ===== EXPLORE BLUEBOX - BRIGHTER PREMIUM BACKGROUND ===== */

body.is-bluebox-front-page .hub-section--benefits {
	position: relative;
	overflow: hidden;
	isolation: isolate;
}

body.is-bluebox-front-page .hub-section--benefits::before {
	top: 0;
	bottom: 0;
	background:
		radial-gradient(circle at 1px 1px, rgba(104, 199, 255, 0.16) 1px, transparent 0),
		radial-gradient(circle at 50% 18%, rgba(104, 199, 255, 0.24), transparent 30rem),
		radial-gradient(circle at 86% 66%, rgba(240, 201, 107, 0.12), transparent 24rem),
		linear-gradient(180deg, rgba(8, 29, 56, 0.98) 0%, rgba(5, 18, 36, 0.99) 100%);
	background-size:
		34px 34px,
		auto,
		auto,
		auto;
	border-top: 1px solid rgba(104, 199, 255, 0.16);
	border-bottom: 1px solid rgba(240, 201, 107, 0.12);
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.05),
		0 0 44px rgba(104, 199, 255, 0.07);
}
body.is-bluebox-front-page .hub-section--benefits::after {
	content: "";
	position: absolute;
	left: 50%;
	top: 1.9rem;
	z-index: -1;
	width: min(54rem, 82vw);
	height: 1px;
	transform: translateX(-50%);
	background: linear-gradient(
		90deg,
		transparent 0%,
		rgba(104, 199, 255, 0.30) 18%,
		rgba(240, 201, 107, 0.58) 50%,
		rgba(104, 199, 255, 0.30) 82%,
		transparent 100%
	);
	box-shadow:
		0 0 18px rgba(240, 201, 107, 0.18),
		0 0 30px rgba(104, 199, 255, 0.12);
	pointer-events: none;
}

body.is-bluebox-front-page .hub-benefits-head,
body.is-bluebox-front-page .hub-benefits-grid {
	position: relative;
	z-index: 2;
}

body.is-bluebox-front-page .hub-benefits-grid::before {
	content: "";
	position: absolute;
	left: 50%;
	top: 44%;
	z-index: -1;
	width: min(72rem, 92vw);
	height: 22rem;
	transform: translate(-50%, -50%);
	border-radius: 999px;
	background:
		radial-gradient(circle, rgba(104, 199, 255, 0.20) 0%, rgba(104, 199, 255, 0.08) 42%, transparent 72%);
	filter: blur(20px);
	opacity: 0.9;
	pointer-events: none;
}

body.is-bluebox-front-page .hub-benefits-grid::after {
	content: "";
	position: absolute;
	inset: -2rem -1rem;
	z-index: -2;
	background:
		linear-gradient(115deg, transparent 0%, rgba(255, 255, 255, 0.035) 38%, transparent 52%),
		radial-gradient(circle at 8% 16%, rgba(240, 201, 107, 0.08), transparent 12rem),
		radial-gradient(circle at 92% 20%, rgba(104, 199, 255, 0.10), transparent 14rem);
	opacity: 0.75;
	pointer-events: none;
}

body.is-bluebox-front-page .hub-benefit {
	border-color: rgba(240, 201, 107, 0.34);
	box-shadow:
		0 26px 62px rgba(0, 0, 0, 0.30),
		0 0 26px rgba(104, 199, 255, 0.08),
		inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

body.is-bluebox-front-page .hub-benefit::before {
	background: linear-gradient(
		135deg,
		rgba(246, 223, 159, 0.72) 0%,
		rgba(215, 169, 63, 0.32) 44%,
		rgba(104, 199, 255, 0.22) 100%
	);
}

@media (max-width: 860px) {
	body.is-bluebox-front-page .hub-section--benefits::after {
		top: 1.2rem;
		width: 72%;
	}

	body.is-bluebox-front-page .hub-benefits-grid::before {
		top: 48%;
		height: 30rem;
		width: 100%;
		opacity: 0.65;
	}
}
/* ===== COMMUNITY INTRO TEXT - MATCH FRONT PAGE INTRO STYLE ===== */

body.is-bluebox-front-page .hub-front-community-fun .hub-community-mini-copy {
  max-width: 48rem !important;
  margin: 0.55rem auto 0 !important;
  color: var(--hub-text-soft) !important;
  font-family: var(--font-body) !important;
  font-size: clamp(0.98rem, 1.15vw, 1.08rem) !important;
  font-weight: 400 !important;
  line-height: 1.55 !important;
  letter-spacing: 0 !important;
  text-align: center !important;
}

@media (max-width: 560px) {
  body.is-bluebox-front-page .hub-front-community-fun .hub-community-mini-copy {
    max-width: 22rem !important;
    font-size: 0.94rem !important;
    line-height: 1.55 !important;
  }
}
/* ===== FRONT PAGE HERO TITLE - FITTED + TALL LETTERS ===== */
/* File: /wp-content/themes/bluebox-padel/style.css */

body.is-bluebox-front-page .hub-hero,
body.is-bluebox-front-page .hub-hero-grid,
body.is-bluebox-front-page .hub-hero-copy-wrap {
  overflow: visible !important;
}

body.is-bluebox-front-page .hub-hero-copy-wrap {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 auto !important;
  text-align: center !important;
  transform: translateY(115px) !important;
}

body.is-bluebox-front-page .hub-hero-title {
  display: inline-block !important;
  width: auto !important;
  max-width: none !important;
  margin: 0 auto !important;

  font-size: clamp(4.7rem, 8.6vw, 10.4rem) !important;
  line-height: 0.68 !important;
  letter-spacing: -0.018em !important;
  white-space: nowrap !important;

  transform: scaleY(1.72) !important;
  transform-origin: center center !important;
}

/* Tablet */
@media (max-width: 1100px) {
  body.is-bluebox-front-page .hub-hero-copy-wrap {
    transform: translateY(115px) !important;
  }

  body.is-bluebox-front-page .hub-hero-title {
    font-size: clamp(4rem, 10vw, 7.4rem) !important;
    line-height: 0.74 !important;
    letter-spacing: -0.014em !important;
    white-space: normal !important;
    transform: scaleY(1.38) !important;
  }
}

/* Mobile */
@media (max-width: 860px) {
  body.is-bluebox-front-page .hub-hero-copy-wrap {
    transform: translateY(100px) !important;
  }

  body.is-bluebox-front-page .hub-hero-title {
    font-size: clamp(3.2rem, 12vw, 5.4rem) !important;
    line-height: 0.82 !important;
    transform: scaleY(1.2) !important;
  }
}

/* Small mobile */
@media (max-width: 560px) {
  body.is-bluebox-front-page .hub-hero-copy-wrap {
    transform: translateY(92px) !important;
  }

  body.is-bluebox-front-page .hub-hero-title {
    font-size: clamp(2.7rem, 12.5vw, 4.1rem) !important;
    line-height: 0.86 !important;
    letter-spacing: -0.01em !important;
    transform: scaleY(1.12) !important;
  }
}
/* ===== FRONT PAGE HERO TITLE - PREMIUM SHIMMER ANIMATION ===== */
/* File: /wp-content/themes/bluebox-padel/style.css */

body.is-bluebox-front-page .hub-hero-title {
  position: relative !important;
  z-index: 3 !important;
  animation: hub-hero-title-arrive 1.15s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}

body.is-bluebox-front-page .hub-hero-title .brand-blue,
body.is-bluebox-front-page .hub-hero-title .brand-gold {
  position: relative !important;
  display: inline-block !important;
  background-size: 220% 100% !important;
  background-position: 100% 50% !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  animation:
    hub-hero-title-shimmer 3.8s ease-in-out 0.45s infinite,
    hub-hero-title-glow 4.8s ease-in-out 1.2s infinite !important;
}

body.is-bluebox-front-page .hub-hero-title .brand-blue {
  background-image: linear-gradient(
    110deg,
    var(--hub-blue-400) 0%,
    var(--hub-blue-300) 34%,
    #ffffff 48%,
    var(--hub-blue-300) 58%,
    var(--hub-blue-400) 100%
  ) !important;
  text-shadow:
    0 0 12px rgba(104, 199, 255, 0.46),
    0 0 30px rgba(104, 199, 255, 0.24),
    0 0 48px rgba(104, 199, 255, 0.12) !important;
}

body.is-bluebox-front-page .hub-hero-title .brand-gold {
  background-image: linear-gradient(
    110deg,
    var(--hub-gold-400) 0%,
    var(--hub-gold-300) 34%,
    #ffffff 48%,
    var(--hub-gold-300) 58%,
    var(--hub-gold-400) 100%
  ) !important;
  text-shadow:
    0 0 12px rgba(240, 201, 107, 0.42),
    0 0 30px rgba(240, 201, 107, 0.22),
    0 0 48px rgba(240, 201, 107, 0.12) !important;
}

body.is-bluebox-front-page .hub-hero-title::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -0.26em;
  width: min(78vw, 56rem);
  height: 2px;
  transform: translateX(-50%) scaleX(0);
  transform-origin: center;
  border-radius: 999px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(104, 199, 255, 0.80) 18%,
    rgba(240, 201, 107, 0.95) 50%,
    rgba(104, 199, 255, 0.80) 82%,
    transparent 100%
  );
  box-shadow:
    0 0 14px rgba(104, 199, 255, 0.35),
    0 0 20px rgba(240, 201, 107, 0.24);
  animation: hub-hero-title-line 1.35s cubic-bezier(0.2, 0.7, 0.2, 1) 0.65s forwards;
  pointer-events: none;
}

@keyframes hub-hero-title-arrive {
  from {
    opacity: 0;
    filter: blur(8px);
    transform: translateY(22px) scaleY(1.72);
  }

  to {
    opacity: 1;
    filter: blur(0);
    transform: translateY(0) scaleY(1.72);
  }
}

@keyframes hub-hero-title-shimmer {
  0% {
    background-position: 100% 50%;
  }

  42% {
    background-position: 0% 50%;
  }

  100% {
    background-position: 0% 50%;
  }
}

@keyframes hub-hero-title-glow {
  0%,
  100% {
    filter: brightness(1);
  }

  50% {
    filter: brightness(1.16);
  }
}

@keyframes hub-hero-title-line {
  from {
    opacity: 0;
    transform: translateX(-50%) scaleX(0);
  }

  to {
    opacity: 1;
    transform: translateX(-50%) scaleX(1);
  }
}

/* Keep the arrival transform consistent with your responsive title scaling */
@media (max-width: 1100px) {
  @keyframes hub-hero-title-arrive {
    from {
      opacity: 0;
      filter: blur(8px);
      transform: translateY(18px) scaleY(1.38);
    }

    to {
      opacity: 1;
      filter: blur(0);
      transform: translateY(0) scaleY(1.38);
    }
  }
}

@media (max-width: 860px) {
  @keyframes hub-hero-title-arrive {
    from {
      opacity: 0;
      filter: blur(7px);
      transform: translateY(16px) scaleY(1.2);
    }

    to {
      opacity: 1;
      filter: blur(0);
      transform: translateY(0) scaleY(1.2);
    }
  }
}

@media (max-width: 560px) {
  @keyframes hub-hero-title-arrive {
    from {
      opacity: 0;
      filter: blur(6px);
      transform: translateY(14px) scaleY(1.12);
    }

    to {
      opacity: 1;
      filter: blur(0);
      transform: translateY(0) scaleY(1.12);
    }
  }
}

@media (prefers-reduced-motion: reduce) {
  body.is-bluebox-front-page .hub-hero-title,
  body.is-bluebox-front-page .hub-hero-title .brand-blue,
  body.is-bluebox-front-page .hub-hero-title .brand-gold,
  body.is-bluebox-front-page .hub-hero-title::after {
    animation: none !important;
  }

  body.is-bluebox-front-page .hub-hero-title .brand-blue {
    -webkit-text-fill-color: var(--hub-blue-400) !important;
    color: var(--hub-blue-400) !important;
  }

  body.is-bluebox-front-page .hub-hero-title .brand-gold {
    -webkit-text-fill-color: var(--hub-gold-400) !important;
    color: var(--hub-gold-400) !important;
  }

  body.is-bluebox-front-page .hub-hero-title::after {
    opacity: 1;
    transform: translateX(-50%) scaleX(1);
  }
}
/* ===== HERO TITLE ANIMATION - SOFTER UNDERLINE ===== */

body.is-bluebox-front-page .hub-hero-title::after {
  bottom: -0.18em !important;
  width: min(68vw, 48rem) !important;
  height: 1px !important;
  opacity: 0.78 !important;
  box-shadow:
    0 0 10px rgba(104, 199, 255, 0.24),
    0 0 14px rgba(240, 201, 107, 0.18) !important;
}

body.is-bluebox-front-page .hub-hero-title .brand-blue,
body.is-bluebox-front-page .hub-hero-title .brand-gold {
  animation-duration: 5.8s, 6.8s !important;
}
/* ===== FRONT PAGE HERO TITLE - FITTED, TALL, NOT CLIPPED ===== */
/* File: /wp-content/themes/bluebox-padel/style.css */

body.is-bluebox-front-page .hub-hero,
body.is-bluebox-front-page .hub-hero-grid,
body.is-bluebox-front-page .hub-hero-copy-wrap,
body.is-bluebox-front-page .hub-hero-title,
body.is-bluebox-front-page .hub-hero-title .brand-blue,
body.is-bluebox-front-page .hub-hero-title .brand-gold {
  overflow: visible !important;
}

body.is-bluebox-front-page .hub-hero-copy-wrap {
  position: relative !important;
  isolation: isolate !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 auto !important;
  padding-top: 2.2rem !important;
  padding-bottom: 2.6rem !important;
  text-align: center !important;
  transform: translateY(105px) !important;
}

body.is-bluebox-front-page .hub-hero-title {
  position: relative !important;
  z-index: 2 !important;
  display: inline-block !important;
  width: auto !important;
  max-width: none !important;
  margin: 0 auto !important;
  padding-top: 0.08em !important;
  padding-bottom: 0.16em !important;

  font-size: clamp(4.7rem, 8.6vw, 10.4rem) !important;
  line-height: 1 !important;
  letter-spacing: -0.018em !important;
  white-space: nowrap !important;
  text-transform: uppercase !important;

  transform: scaleY(1.42) !important;
  transform-origin: center center !important;
}

body.is-bluebox-front-page .hub-hero-title .brand-blue,
body.is-bluebox-front-page .hub-hero-title .brand-gold {
  display: inline-block !important;
  padding-top: 0.04em !important;
  padding-bottom: 0.08em !important;
}

body.is-bluebox-front-page .hub-hero-title .brand-blue {
  margin-right: 0.12em !important;
  color: var(--hub-blue-400) !important;
  text-shadow:
    0 0 6px rgba(104, 199, 255, 0.72),
    0 0 14px rgba(104, 199, 255, 0.38),
    0 0 24px rgba(104, 199, 255, 0.18),
    0 3px 10px rgba(0, 0, 0, 0.35) !important;
}

body.is-bluebox-front-page .hub-hero-title .brand-gold {
  color: var(--hub-gold-400) !important;
  text-shadow:
    0 0 6px rgba(240, 201, 107, 0.68),
    0 0 14px rgba(240, 201, 107, 0.34),
    0 0 24px rgba(240, 201, 107, 0.16),
    0 3px 10px rgba(0, 0, 0, 0.35) !important;
}

/* Tablet */
@media (max-width: 1100px) {
  body.is-bluebox-front-page .hub-hero-copy-wrap {
    padding-top: 1.8rem !important;
    padding-bottom: 2.2rem !important;
    transform: translateY(105px) !important;
  }

  body.is-bluebox-front-page .hub-hero-title {
    font-size: clamp(4rem, 10vw, 7.4rem) !important;
    line-height: 1.02 !important;
    letter-spacing: -0.014em !important;
    white-space: normal !important;
    transform: scaleY(1.26) !important;
  }
}

/* Mobile */
@media (max-width: 860px) {
  body.is-bluebox-front-page .hub-hero-copy-wrap {
    padding-top: 1.4rem !important;
    padding-bottom: 1.8rem !important;
    transform: translateY(92px) !important;
  }

  body.is-bluebox-front-page .hub-hero-title {
    font-size: clamp(3.2rem, 12vw, 5.4rem) !important;
    line-height: 1.04 !important;
    transform: scaleY(1.16) !important;
  }
}

/* Small mobile */
@media (max-width: 560px) {
  body.is-bluebox-front-page .hub-hero-copy-wrap {
    padding-top: 1.2rem !important;
    padding-bottom: 1.5rem !important;
    transform: translateY(84px) !important;
  }

  body.is-bluebox-front-page .hub-hero-title {
    font-size: clamp(2.7rem, 12.5vw, 4.1rem) !important;
    line-height: 1.06 !important;
    letter-spacing: -0.01em !important;
    transform: scaleY(1.08) !important;
  }
}
/* ===== FRONT PAGE HERO - MOVE COURT LINE SWEEP UP ===== */

body.is-bluebox-front-page .hub-hero-copy-wrap::before {
  top: 10% !important;
  height: 12rem !important;
  transform: translate(-50%, -50%) scaleX(0.4) !important;
  background-position: center 50%, 50% center !important;
}

/* Tablet */
@media (max-width: 1100px) {
  body.is-bluebox-front-page .hub-hero-copy-wrap::before {
    top: 45% !important;
    height: 10rem !important;
  }
}

/* Mobile */
@media (max-width: 860px) {
  body.is-bluebox-front-page .hub-hero-copy-wrap::before {
    top: 46% !important;
    height: 8rem !important;
  }
}

/* Small mobile */
@media (max-width: 560px) {
  body.is-bluebox-front-page .hub-hero-copy-wrap::before {
    top: 47% !important;
    height: 7rem !important;
  }
}
/* ===== FRONT PAGE HERO - MOVE TITLE UNDERLINE UP ===== */

body.is-bluebox-front-page .hub-hero-title::after {
  bottom: 0.12em !important;
  width: min(68vw, 48rem) !important;
  height: 1px !important;
}

/* Tablet */
@media (max-width: 1100px) {
  body.is-bluebox-front-page .hub-hero-title::after {
    bottom: 0.02em !important;
  }
}

/* Mobile */
@media (max-width: 860px) {
  body.is-bluebox-front-page .hub-hero-title::after {
    bottom: 0 !important;
  }
}

/* Small mobile */
@media (max-width: 560px) {
  body.is-bluebox-front-page .hub-hero-title::after {
    bottom: -0.02em !important;
  }
}
/* ===== COMMUNITY PANEL BAR - CLEAN SCROLL TRIGGERED VERSION ===== */

body.is-bluebox-front-page .hub-front-community-fun .hub-community-scroll-bar-title,
body.is-bluebox-front-page .hub-front-community-fun .hub-community-load-title {
	position: relative !important;
	display: inline-block !important;
	margin: 0 auto !important;
	padding-bottom: 1.35rem !important;
	text-align: center !important;
}

/* Track */
body.is-bluebox-front-page .hub-front-community-fun .hub-community-scroll-bar-title::before,
body.is-bluebox-front-page .hub-front-community-fun .hub-community-load-title::before {
	content: "" !important;
	position: absolute !important;
	left: 50% !important;
	bottom: 0 !important;
	width: 14rem !important;
	height: 6px !important;
	border-radius: 999px !important;
	transform: translateX(-50%) !important;
	background: linear-gradient(
		90deg,
		rgba(255, 255, 255, 0.08) 0%,
		rgba(255, 255, 255, 0.16) 50%,
		rgba(255, 255, 255, 0.08) 100%
	) !important;
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.08),
		0 0 0 1px rgba(255, 255, 255, 0.04) !important;
}

/* Fill */
body.is-bluebox-front-page .hub-front-community-fun .hub-community-scroll-bar-title::after,
body.is-bluebox-front-page .hub-front-community-fun .hub-community-load-title::after {
	content: "" !important;
	position: absolute !important;
	left: 50% !important;
	bottom: 0 !important;
	width: 14rem !important;
	height: 6px !important;
	border-radius: 999px !important;
	transform: translateX(-50%) !important;
	background: linear-gradient(
		90deg,
		var(--hub-gold-300) 0%,
		var(--hub-gold-500) 55%,
		var(--hub-blue-400) 100%
	) !important;
	background-repeat: no-repeat !important;
	background-position: left center !important;
	background-size: 0% 100% !important;
	box-shadow:
		0 0 6px rgba(240, 201, 107, 0.10),
		0 0 10px rgba(104, 199, 255, 0.04) !important;
	animation: none !important;
	opacity: 1 !important;
}

/* Start when footer JS adds hub-load-start */
body.is-bluebox-front-page .hub-front-community-fun .hub-community-scroll-bar-title.hub-load-start::after,
body.is-bluebox-front-page .hub-front-community-fun .hub-community-load-title.hub-load-start::after {
	animation: hub-community-clean-load 1.4s cubic-bezier(0.2, 0.7, 0.2, 1) forwards !important;
}

@keyframes hub-community-clean-load {
	from {
		background-size: 0% 100%;
		box-shadow:
			0 0 6px rgba(240, 201, 107, 0.10),
			0 0 10px rgba(104, 199, 255, 0.04);
	}

	to {
		background-size: 100% 100%;
		box-shadow:
			0 0 14px rgba(240, 201, 107, 0.28),
			0 0 24px rgba(104, 199, 255, 0.12);
	}
}

@media (max-width: 560px) {
	body.is-bluebox-front-page .hub-front-community-fun .hub-community-scroll-bar-title,
	body.is-bluebox-front-page .hub-front-community-fun .hub-community-load-title {
		padding-bottom: 1.1rem !important;
	}

	body.is-bluebox-front-page .hub-front-community-fun .hub-community-scroll-bar-title::before,
	body.is-bluebox-front-page .hub-front-community-fun .hub-community-scroll-bar-title::after,
	body.is-bluebox-front-page .hub-front-community-fun .hub-community-load-title::before,
	body.is-bluebox-front-page .hub-front-community-fun .hub-community-load-title::after {
		width: 9.5rem !important;
		height: 5px !important;
	}
}

@media (prefers-reduced-motion: reduce) {
	body.is-bluebox-front-page .hub-front-community-fun .hub-community-scroll-bar-title::after,
	body.is-bluebox-front-page .hub-front-community-fun .hub-community-load-title::after {
		background-size: 100% 100% !important;
		animation: none !important;
	}
}

/* ===== FOOTER CTA TITLE - KEEP ON ONE LINE ===== */

.hub-footer-title {
	display: block !important;
	width: auto !important;
	max-width: none !important;
	white-space: nowrap !important;
	margin: 0 0 0.9rem !important;
	font-size: clamp(3.1rem, 6.2vw, 5.1rem) !important;
	line-height: 0.86 !important;
	letter-spacing: 0.01em !important;
}

.hub-footer-title::after {
	width: 12rem !important;
}

@media (max-width: 860px) {
	.hub-footer-title {
		white-space: normal !important;
	}
}
/* ===== COMMUNITY PANEL BAR - FINAL WORKING VERSION ===== */

body.is-bluebox-front-page .hub-front-community-fun .hub-community-scroll-bar-title {
	position: relative !important;
	display: grid !important;
	justify-items: center !important;
	gap: 0.55rem !important;
	margin: 0 auto !important;
	padding-bottom: 0 !important;
	text-align: center !important;
}

/* Kill all old pseudo-element bars on this heading */
body.is-bluebox-front-page .hub-front-community-fun .hub-community-scroll-bar-title::before,
body.is-bluebox-front-page .hub-front-community-fun .hub-community-scroll-bar-title::after,
body.is-bluebox-front-page .hub-front-community-fun .hub-community-mini-title.hub-community-scroll-bar-title::before,
body.is-bluebox-front-page .hub-front-community-fun .hub-community-mini-title.hub-community-scroll-bar-title::after {
	content: none !important;
	display: none !important;
}

body.is-bluebox-front-page .hub-front-community-fun .hub-community-scroll-text {
	display: block !important;
	position: relative !important;
	z-index: 2 !important;
}

body.is-bluebox-front-page .hub-front-community-fun .hub-community-scroll-bar {
	position: relative !important;
	display: block !important;
	width: 14rem !important;
	height: 6px !important;
	overflow: hidden !important;
	border-radius: 999px !important;
	background: linear-gradient(
		90deg,
		rgba(255, 255, 255, 0.08) 0%,
		rgba(255, 255, 255, 0.16) 50%,
		rgba(255, 255, 255, 0.08) 100%
	) !important;
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.08),
		0 0 0 1px rgba(255, 255, 255, 0.04) !important;
}

body.is-bluebox-front-page .hub-front-community-fun .hub-community-scroll-bar-fill {
	position: absolute !important;
	inset: 0 auto 0 0 !important;
	display: block !important;
	width: 100%;
	height: 100%;
	border-radius: inherit !important;
	background: linear-gradient(
		90deg,
		var(--hub-gold-300) 0%,
		var(--hub-gold-500) 55%,
		var(--hub-blue-400) 100%
	) !important;
	box-shadow:
		0 0 6px rgba(240, 201, 107, 0.10),
		0 0 10px rgba(104, 199, 255, 0.04) !important;
	transform: scaleX(0);
	transform-origin: left center;
}

body.is-bluebox-front-page .hub-front-community-fun .hub-community-scroll-bar-title.hub-load-start .hub-community-scroll-bar-fill {
	animation: hub-community-real-bar-load 1.4s cubic-bezier(0.2, 0.7, 0.2, 1) forwards;
}

@keyframes hub-community-real-bar-load {
	from {
		transform: scaleX(0);
		box-shadow:
			0 0 6px rgba(240, 201, 107, 0.10),
			0 0 10px rgba(104, 199, 255, 0.04);
	}

	to {
		transform: scaleX(1);
		box-shadow:
			0 0 14px rgba(240, 201, 107, 0.28),
			0 0 24px rgba(104, 199, 255, 0.12);
	}
}

@media (max-width: 560px) {
	body.is-bluebox-front-page .hub-front-community-fun .hub-community-scroll-bar {
		width: 9.5rem !important;
		height: 5px !important;
	}
}

@media (prefers-reduced-motion: reduce) {
	body.is-bluebox-front-page .hub-front-community-fun .hub-community-scroll-bar-fill {
		transform: scaleX(1) !important;
		animation: none !important;
	}
}
/* ===== COMMUNITY PANEL - TITLE SPACING TWEAK ===== */

body.is-bluebox-front-page .hub-front-community-fun .hub-community-scroll-bar-title {
	gap: 0.85rem !important;
}

body.is-bluebox-front-page .hub-front-community-fun .hub-community-scroll-bar {
	margin-top: 0.1rem !important;
}

body.is-bluebox-front-page .hub-front-community-fun .hub-community-mini-copy {
	margin-top: 1.05rem !important;
}

/* Mobile: keep it tidy but still less cramped */
@media (max-width: 560px) {
	body.is-bluebox-front-page .hub-front-community-fun .hub-community-scroll-bar-title {
		gap: 0.7rem !important;
	}

	body.is-bluebox-front-page .hub-front-community-fun .hub-community-mini-copy {
		margin-top: 0.85rem !important;
	}
}
/* ===== FOOTER READY TO PLAY - SCROLL LOADING BAR ===== */

.hub-footer-title.hub-footer-scroll-bar-title {
	display: grid !important;
	justify-items: start !important;
	gap: 0.8rem !important;
	width: fit-content !important;
	max-width: 100% !important;
	margin: 0 0 1rem !important;
	padding-bottom: 0 !important;
	white-space: normal !important;
	text-align: left !important;
}

/* Disable the old footer pseudo underline */
.hub-footer-title.hub-footer-scroll-bar-title::after {
	content: none !important;
	display: none !important;
}

.hub-footer-scroll-text {
	display: block !important;
	white-space: nowrap !important;
}

.hub-footer-scroll-bar {
	position: relative !important;
	display: block !important;
	width: 12rem !important;
	height: 5px !important;
	overflow: hidden !important;
	border-radius: 999px !important;
	background: linear-gradient(
		90deg,
		rgba(255, 255, 255, 0.08) 0%,
		rgba(255, 255, 255, 0.16) 50%,
		rgba(255, 255, 255, 0.08) 100%
	) !important;
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.08),
		0 0 0 1px rgba(255, 255, 255, 0.04) !important;
}

.hub-footer-scroll-bar-fill {
	position: absolute !important;
	inset: 0 auto 0 0 !important;
	display: block !important;
	width: 0% !important;
	height: 100% !important;
	border-radius: inherit !important;
	background: linear-gradient(
		90deg,
		var(--hub-gold-300) 0%,
		var(--hub-gold-500) 55%,
		var(--hub-blue-400) 100%
	) !important;
	box-shadow:
		0 0 6px rgba(240, 201, 107, 0.10),
		0 0 10px rgba(104, 199, 255, 0.04) !important;
}

.hub-footer-scroll-bar-title.hub-load-start .hub-footer-scroll-bar-fill {
	animation: hub-footer-real-bar-load 1.4s cubic-bezier(0.2, 0.7, 0.2, 1) forwards !important;
}

@keyframes hub-footer-real-bar-load {
	from {
		width: 0%;
		box-shadow:
			0 0 6px rgba(240, 201, 107, 0.10),
			0 0 10px rgba(104, 199, 255, 0.04);
	}

	to {
		width: 100%;
		box-shadow:
			0 0 14px rgba(240, 201, 107, 0.28),
			0 0 24px rgba(104, 199, 255, 0.12);
	}
}

@media (max-width: 860px) {
	.hub-footer-title.hub-footer-scroll-bar-title {
		justify-items: start !important;
		gap: 0.7rem !important;
	}

	.hub-footer-scroll-text {
		white-space: normal !important;
	}

	.hub-footer-scroll-bar {
		width: 9.5rem !important;
		height: 4px !important;
	}
}

@media (prefers-reduced-motion: reduce) {
	.hub-footer-scroll-bar-fill {
		width: 100% !important;
		animation: none !important;
	}
}
/* ===== FOOTER READY TO PLAY - FIXED SCROLL LOADING BAR ===== */

.hub-footer-title.hub-footer-scroll-bar-title {
	display: grid !important;
	justify-items: start !important;
	gap: 0.75rem !important;
	width: fit-content !important;
	max-width: 100% !important;
	margin: 0 0 1rem !important;
	padding-bottom: 0 !important;
	text-align: left !important;
	white-space: normal !important;
}

.hub-footer-title.hub-footer-scroll-bar-title::after {
	content: none !important;
	display: none !important;
}

.hub-footer-scroll-text {
	display: block !important;
	white-space: nowrap !important;
}

.hub-footer-scroll-bar {
	position: relative !important;
	display: block !important;
	width: 12rem !important;
	height: 5px !important;
	overflow: hidden !important;
	border-radius: 999px !important;
	background: linear-gradient(
		90deg,
		rgba(255, 255, 255, 0.08) 0%,
		rgba(255, 255, 255, 0.16) 50%,
		rgba(255, 255, 255, 0.08) 100%
	) !important;
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.08),
		0 0 0 1px rgba(255, 255, 255, 0.04) !important;
}

.hub-footer-scroll-bar-fill {
	position: absolute !important;
	inset: 0 !important;
	display: block !important;
	width: 100% !important;
	height: 100% !important;
	border-radius: inherit !important;
	transform: scaleX(0);
	transform-origin: left center;
	background: linear-gradient(
		90deg,
		var(--hub-gold-300) 0%,
		var(--hub-gold-500) 55%,
		var(--hub-blue-400) 100%
	) !important;
	box-shadow:
		0 0 6px rgba(240, 201, 107, 0.10),
		0 0 10px rgba(104, 199, 255, 0.04) !important;
}

.hub-footer-scroll-bar-title.hub-load-start .hub-footer-scroll-bar-fill {
	animation: hub-footer-bar-load-fixed 1.4s cubic-bezier(0.2, 0.7, 0.2, 1) forwards !important;
}

@keyframes hub-footer-bar-load-fixed {
	from {
		transform: scaleX(0);
		box-shadow:
			0 0 6px rgba(240, 201, 107, 0.10),
			0 0 10px rgba(104, 199, 255, 0.04);
	}

	to {
		transform: scaleX(1);
		box-shadow:
			0 0 14px rgba(240, 201, 107, 0.28),
			0 0 24px rgba(104, 199, 255, 0.12);
	}
}

@media (max-width: 860px) {
	.hub-footer-scroll-text {
		white-space: normal !important;
	}

	.hub-footer-scroll-bar {
		width: 9.5rem !important;
		height: 4px !important;
	}
}

@media (prefers-reduced-motion: reduce) {
	.hub-footer-scroll-bar-fill {
		transform: scaleX(1);
		animation: none !important;
	}
}
/* ===== NEWSLETTER TITLE - BLUEBOX SAME AS HERO BLUE ===== */

.hub-newsletter-title {
	display: flex !important;
	flex-wrap: wrap !important;
	align-items: baseline !important;
	gap: 0.35rem !important;
}

.hub-newsletter-title .brand-blue {
	display: inline-block !important;
}
/* ===== NEWSLETTER TITLE - BLUEBOX HERO BLUE FINAL FIX ===== */

.hub-newsletter-title {
	display: inline-flex !important;
	flex-wrap: wrap !important;
	align-items: baseline !important;
	gap: 0.35rem !important;
}

.hub-newsletter-title > span:first-child {
	color: var(--hub-white) !important;
	-webkit-text-fill-color: var(--hub-white) !important;
}

.hub-newsletter-title .brand-blue {
	display: inline-block !important;
	color: var(--hub-blue-400) !important;
	-webkit-text-fill-color: var(--hub-blue-400) !important;
	background: none !important;
	background-image: none !important;
	-webkit-background-clip: initial !important;
	background-clip: initial !important;
	text-shadow:
		0 0 12px rgba(104, 199, 255, 0.52),
		0 0 28px rgba(104, 199, 255, 0.30),
		0 0 44px rgba(104, 199, 255, 0.16) !important;
}
/* ===== CHOOSE YOUR BLUEBOX - BLUEBOX IN HERO BLUE ===== */

.hub-benefits-head .hub-section-title {
	display: inline-flex !important;
	flex-wrap: wrap !important;
	align-items: baseline !important;
	justify-content: center !important;
	gap: 0.3rem !important;
}

.hub-benefits-head .hub-section-title .brand-blue {
	display: inline-block !important;
	color: var(--hub-blue-400) !important;
	-webkit-text-fill-color: var(--hub-blue-400) !important;
	background: none !important;
	background-image: none !important;
	-webkit-background-clip: initial !important;
	background-clip: initial !important;
	text-shadow:
		0 0 12px rgba(104, 199, 255, 0.52),
		0 0 28px rgba(104, 199, 255, 0.30),
		0 0 44px rgba(104, 199, 255, 0.16) !important;
}
/* ===== SHOP THE BLUEBOX RANGE - BLUEBOX IN HERO BLUE ===== */

.hub-front-shop .hub-promo-title .brand-blue {
	display: inline-block !important;
	color: var(--hub-blue-400) !important;
	-webkit-text-fill-color: var(--hub-blue-400) !important;
	background: none !important;
	background-image: none !important;
	-webkit-background-clip: initial !important;
	background-clip: initial !important;
	text-shadow:
		0 0 12px rgba(104, 199, 255, 0.52),
		0 0 28px rgba(104, 199, 255, 0.30),
		0 0 44px rgba(104, 199, 255, 0.16) !important;
}
/* ===== SHOP PAGE TITLE - BLUEBOX IN HERO BLUE ===== */

.hub-store-section-head .hub-store-hero-title {
	display: flex !important;
	flex-wrap: wrap !important;
	align-items: baseline !important;
	justify-content: center !important;
	gap: 0.22em !important;
	text-align: center !important;
}

.hub-store-section-head .hub-store-hero-title .brand-blue {
	display: inline-block !important;
	color: var(--hub-blue-400) !important;
	-webkit-text-fill-color: var(--hub-blue-400) !important;
	background: none !important;
	background-image: none !important;
	-webkit-background-clip: initial !important;
	background-clip: initial !important;
	text-shadow:
		0 0 12px rgba(104, 199, 255, 0.52),
		0 0 28px rgba(104, 199, 255, 0.30),
		0 0 44px rgba(104, 199, 255, 0.16) !important;
}

/* Keep the title tidy on smaller screens */
@media (max-width: 760px) {
	.hub-store-section-head .hub-store-hero-title {
		gap: 0.16em !important;
	}
}
/* ===== COMMUNITY TITLE - COMMUNITY AT BLUEBOX BRAND BLUE ===== */
/* Requires the title markup to split "Bluebox" into .hub-community-title-brand */

body.is-bluebox-front-page .hub-front-community-fun .hub-community-scroll-bar-title {
	display: grid !important;
	justify-items: center !important;
	gap: 0.85rem !important;
	margin: 0 auto !important;
	text-align: center !important;
}

body.is-bluebox-front-page .hub-front-community-fun .hub-community-scroll-text {
	display: inline-flex !important;
	flex-wrap: wrap !important;
	align-items: baseline !important;
	justify-content: center !important;
	gap: 0.28em !important;
	position: relative !important;
	z-index: 2 !important;
	text-align: center !important;
	color: var(--hub-white) !important;
	-webkit-text-fill-color: var(--hub-white) !important;
}

body.is-bluebox-front-page .hub-front-community-fun .hub-community-scroll-text > span {
	display: inline-block !important;
}

body.is-bluebox-front-page .hub-front-community-fun .hub-community-title-brand,
body.is-bluebox-front-page .hub-front-community-fun .hub-community-scroll-text .brand-blue {
	display: inline-block !important;
	color: var(--hub-blue-400) !important;
	-webkit-text-fill-color: var(--hub-blue-400) !important;
	background: none !important;
	background-image: none !important;
	-webkit-background-clip: initial !important;
	background-clip: initial !important;
	text-shadow:
		0 0 12px rgba(104, 199, 255, 0.52),
		0 0 28px rgba(104, 199, 255, 0.30),
		0 0 44px rgba(104, 199, 255, 0.16) !important;
}

body.is-bluebox-front-page .hub-front-community-fun .hub-community-scroll-bar {
	margin-top: 0.1rem !important;
}

body.is-bluebox-front-page .hub-front-community-fun .hub-community-mini-copy {
	margin-top: 1.05rem !important;
}

@media (max-width: 560px) {
	body.is-bluebox-front-page .hub-front-community-fun .hub-community-scroll-text {
		gap: 0.22em !important;
	}

	body.is-bluebox-front-page .hub-front-community-fun .hub-community-scroll-bar-title {
		gap: 0.7rem !important;
	}

	body.is-bluebox-front-page .hub-front-community-fun .hub-community-mini-copy {
		margin-top: 0.85rem !important;
	}
}
/* ===== COMMUNITY BACKGROUND DECOR - SMALL GLOW BOXES ===== */

.hub-community-sparkle {
	display: block !important;
	width: clamp(0.55rem, 0.9vw, 0.85rem) !important;
	height: clamp(0.55rem, 0.9vw, 0.85rem) !important;
	border-radius: 0.22rem !important;

	font-size: 0 !important;
	line-height: 0 !important;
	color: transparent !important;

	background:
		linear-gradient(135deg, rgba(104, 199, 255, 0.95) 0%, rgba(104, 199, 255, 0.42) 100%) !important;

	border: 1px solid rgba(104, 199, 255, 0.46) !important;

	box-shadow:
		0 0 10px rgba(104, 199, 255, 0.42),
		0 0 22px rgba(104, 199, 255, 0.22),
		inset 0 1px 0 rgba(255, 255, 255, 0.18) !important;

	opacity: 0.72 !important;
}

/* Gold alternate boxes */
.hub-community-sparkle--two,
.hub-community-sparkle--four,
.hub-community-sparkle--seven,
.hub-community-sparkle--nine {
	background:
		linear-gradient(135deg, rgba(240, 201, 107, 0.95) 0%, rgba(240, 201, 107, 0.42) 100%) !important;

	border-color: rgba(240, 201, 107, 0.46) !important;

	box-shadow:
		0 0 10px rgba(240, 201, 107, 0.38),
		0 0 22px rgba(240, 201, 107, 0.20),
		inset 0 1px 0 rgba(255, 255, 255, 0.18) !important;
}

/* Make a few boxes smaller for depth */
.hub-community-sparkle--five,
.hub-community-sparkle--six,
.hub-community-sparkle--eight,
.hub-community-sparkle--ten {
	width: clamp(0.42rem, 0.65vw, 0.62rem) !important;
	height: clamp(0.42rem, 0.65vw, 0.62rem) !important;
	opacity: 0.52 !important;
}

/* Convert the soft orbs into larger blurred glass boxes */
.hub-community-orb {
	border-radius: 1.2rem !important;
	filter: blur(3px) !important;
	opacity: 0.34 !important;
}

.hub-community-orb--one {
	width: 4.5rem !important;
	height: 4.5rem !important;
	background:
		linear-gradient(135deg, rgba(104, 199, 255, 0.24) 0%, rgba(104, 199, 255, 0.04) 100%) !important;
	border: 1px solid rgba(104, 199, 255, 0.18) !important;
	box-shadow:
		0 0 34px rgba(104, 199, 255, 0.18),
		inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
}

.hub-community-orb--two {
	width: 4rem !important;
	height: 4rem !important;
	background:
		linear-gradient(135deg, rgba(240, 201, 107, 0.20) 0%, rgba(240, 201, 107, 0.04) 100%) !important;
	border: 1px solid rgba(240, 201, 107, 0.16) !important;
	box-shadow:
		0 0 32px rgba(240, 201, 107, 0.14),
		inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
}

/* Mobile: keep the decorative boxes subtle */
@media (max-width: 560px) {
	.hub-community-sparkle {
		width: 0.44rem !important;
		height: 0.44rem !important;
		border-radius: 0.16rem !important;
		opacity: 0.42 !important;
	}

	.hub-community-orb--one,
	.hub-community-orb--two {
		width: 3rem !important;
		height: 3rem !important;
		opacity: 0.24 !important;
	}
}
/* ===== COMMUNITY BACKGROUND BOXES - BLUE VARIANTS ONLY ===== */

.hub-community-sparkle {
	display: block !important;
	width: clamp(0.55rem, 0.9vw, 0.85rem) !important;
	height: clamp(0.55rem, 0.9vw, 0.85rem) !important;
	border-radius: 0.22rem !important;

	font-size: 0 !important;
	line-height: 0 !important;
	color: transparent !important;

	border: 1px solid rgba(104, 199, 255, 0.46) !important;

	box-shadow:
		0 0 10px rgba(104, 199, 255, 0.44),
		0 0 22px rgba(104, 199, 255, 0.24),
		inset 0 1px 0 rgba(255, 255, 255, 0.18) !important;

	opacity: 0.72 !important;
}

/* Different blue shades */
.hub-community-sparkle--one {
	background: linear-gradient(135deg, #68c7ff 0%, rgba(104, 199, 255, 0.38) 100%) !important;
	border-color: rgba(104, 199, 255, 0.52) !important;
}

.hub-community-sparkle--two {
	background: linear-gradient(135deg, #8ddaff 0%, rgba(141, 218, 255, 0.34) 100%) !important;
	border-color: rgba(141, 218, 255, 0.48) !important;
}

.hub-community-sparkle--three {
	background: linear-gradient(135deg, #3fb6ff 0%, rgba(63, 182, 255, 0.34) 100%) !important;
	border-color: rgba(63, 182, 255, 0.46) !important;
}

.hub-community-sparkle--four {
	background: linear-gradient(135deg, #2f8cff 0%, rgba(47, 140, 255, 0.34) 100%) !important;
	border-color: rgba(47, 140, 255, 0.44) !important;
}

.hub-community-sparkle--five {
	background: linear-gradient(135deg, #9fe6ff 0%, rgba(159, 230, 255, 0.30) 100%) !important;
	border-color: rgba(159, 230, 255, 0.40) !important;
}

.hub-community-sparkle--six {
	background: linear-gradient(135deg, #5ecbff 0%, rgba(94, 203, 255, 0.32) 100%) !important;
	border-color: rgba(94, 203, 255, 0.42) !important;
}

.hub-community-sparkle--seven {
	background: linear-gradient(135deg, #4aa3ff 0%, rgba(74, 163, 255, 0.32) 100%) !important;
	border-color: rgba(74, 163, 255, 0.42) !important;
}

.hub-community-sparkle--eight {
	background: linear-gradient(135deg, #7ed8ff 0%, rgba(126, 216, 255, 0.30) 100%) !important;
	border-color: rgba(126, 216, 255, 0.40) !important;
}

.hub-community-sparkle--nine {
	background: linear-gradient(135deg, #347dff 0%, rgba(52, 125, 255, 0.30) 100%) !important;
	border-color: rgba(52, 125, 255, 0.38) !important;
}

.hub-community-sparkle--ten {
	background: linear-gradient(135deg, #b7edff 0%, rgba(183, 237, 255, 0.28) 100%) !important;
	border-color: rgba(183, 237, 255, 0.38) !important;
}

/* Keep all glows blue, even on the darker boxes */
.hub-community-sparkle--one,
.hub-community-sparkle--two,
.hub-community-sparkle--three,
.hub-community-sparkle--four,
.hub-community-sparkle--five,
.hub-community-sparkle--six,
.hub-community-sparkle--seven,
.hub-community-sparkle--eight,
.hub-community-sparkle--nine,
.hub-community-sparkle--ten {
	box-shadow:
		0 0 10px rgba(104, 199, 255, 0.46),
		0 0 24px rgba(104, 199, 255, 0.26),
		0 0 38px rgba(104, 199, 255, 0.10),
		inset 0 1px 0 rgba(255, 255, 255, 0.20) !important;
}

/* Smaller depth boxes */
.hub-community-sparkle--five,
.hub-community-sparkle--six,
.hub-community-sparkle--eight,
.hub-community-sparkle--ten {
	width: clamp(0.42rem, 0.65vw, 0.62rem) !important;
	height: clamp(0.42rem, 0.65vw, 0.62rem) !important;
	opacity: 0.54 !important;
}

/* Larger background boxes: blue only */
.hub-community-orb {
	border-radius: 1.2rem !important;
	filter: blur(3px) !important;
	opacity: 0.34 !important;
}

.hub-community-orb--one {
	width: 4.5rem !important;
	height: 4.5rem !important;
	background:
		linear-gradient(135deg, rgba(104, 199, 255, 0.24) 0%, rgba(47, 140, 255, 0.05) 100%) !important;
	border: 1px solid rgba(104, 199, 255, 0.18) !important;
	box-shadow:
		0 0 34px rgba(104, 199, 255, 0.18),
		inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
}

.hub-community-orb--two {
	width: 4rem !important;
	height: 4rem !important;
	background:
		linear-gradient(135deg, rgba(141, 218, 255, 0.20) 0%, rgba(52, 125, 255, 0.05) 100%) !important;
	border: 1px solid rgba(141, 218, 255, 0.16) !important;
	box-shadow:
		0 0 32px rgba(104, 199, 255, 0.16),
		inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
}

@media (max-width: 560px) {
	.hub-community-sparkle {
		width: 0.44rem !important;
		height: 0.44rem !important;
		border-radius: 0.16rem !important;
		opacity: 0.42 !important;
	}

	.hub-community-orb--one,
	.hub-community-orb--two {
		width: 3rem !important;
		height: 3rem !important;
		opacity: 0.24 !important;
	}
}
/* ===== COMMUNITY PILL MARK - LOGO IMAGE ===== */

.hub-community-fun-pill-mark {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.7rem;
	height: 1.7rem;
	flex: 0 0 1.7rem;
	border-radius: 999px;
	background: transparent;
	border: 0;
	box-shadow: none;
	overflow: hidden;
}

.hub-community-fun-pill-mark img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 50%;
}
/* ===== COMMUNITY LOGO ONLY - CLEAN TRANSPARENT VERSION ===== */

.hub-community-fun-pill {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	padding: 0 !important;
	margin: 0 !important;
	border: 0 !important;
	border-radius: 0 !important;
	background: transparent !important;
	box-shadow: none !important;
	backdrop-filter: none !important;
	-webkit-backdrop-filter: none !important;
}

.hub-community-fun-pill::before,
.hub-community-fun-pill::after {
	content: none !important;
	display: none !important;
}

.hub-community-fun-pill-mark {
	display: none !important;
}

.hub-community-fun-pill-logo {
	display: block !important;
	width: 96px !important;
	height: 96px !important;
	max-width: none !important;
	object-fit: contain !important;
	object-position: center !important;

	background: transparent !important;
	background-color: transparent !important;
	border: 0 !important;
	border-radius: 0 !important;
	padding: 0 !important;
	box-shadow: none !important;

	filter:
		drop-shadow(0 0 10px rgba(104, 199, 255, 0.80))
		drop-shadow(0 0 22px rgba(104, 199, 255, 0.45))
		drop-shadow(0 0 34px rgba(104, 199, 255, 0.22)) !important;
}

/* Tablet */
@media (max-width: 860px) {
	.hub-community-fun-pill-logo {
		width: 82px !important;
		height: 82px !important;
	}
}

/* Mobile */
@media (max-width: 560px) {
	.hub-community-fun-pill-logo {
		width: 68px !important;
		height: 68px !important;
	}
}
/* ===== COMMUNITY HEADER LOGO - LOGO ONLY, NO FRAME ===== */

body.is-bluebox-front-page .hub-front-community-fun .hub-community-fun-pill {
	position: absolute !important;
	top: 0 !important;
	left: clamp(1rem, 3vw, 2rem) !important;

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

	width: auto !important;
	height: auto !important;
	min-height: 0 !important;
	padding: 0 !important;
	margin: 0 !important;

	border: 0 !important;
	border-radius: 0 !important;
	background: transparent !important;
	box-shadow: none !important;
	backdrop-filter: none !important;
	-webkit-backdrop-filter: none !important;
}

body.is-bluebox-front-page .hub-front-community-fun .hub-community-fun-pill::before,
body.is-bluebox-front-page .hub-front-community-fun .hub-community-fun-pill::after {
	content: none !important;
	display: none !important;
}

body.is-bluebox-front-page .hub-front-community-fun .hub-community-fun-pill-logo {
	display: block !important;
	width: 104px !important;
	height: 104px !important;
	max-width: none !important;
	object-fit: contain !important;
	object-position: center !important;

	padding: 0 !important;
	margin: 0 !important;
	border: 0 !important;
	border-radius: 0 !important;
	background: transparent !important;
	box-shadow: none !important;

	filter:
		drop-shadow(0 0 10px rgba(104, 199, 255, 0.80))
		drop-shadow(0 0 22px rgba(104, 199, 255, 0.45))
		drop-shadow(0 0 34px rgba(104, 199, 255, 0.22)) !important;
}

/* Mobile: stack logo above title */
@media (max-width: 860px) {
	body.is-bluebox-front-page .hub-front-community-fun .hub-community-fun-pill {
		position: static !important;
		justify-self: center !important;
		margin-bottom: 0.35rem !important;
	}

	body.is-bluebox-front-page .hub-front-community-fun .hub-community-fun-pill-logo {
		width: 76px !important;
		height: 76px !important;
	}
}

@media (max-width: 560px) {
	body.is-bluebox-front-page .hub-front-community-fun .hub-community-fun-pill-logo {
		width: 64px !important;
		height: 64px !important;
	}
}
/* ===== COMMUNITY HEADER - LOGO AS PREMIUM WATERMARK ===== */

body.is-bluebox-front-page .hub-front-community-fun .hub-community-fun-head {
	position: relative !important;
	display: grid !important;
	grid-template-columns: 1fr !important;
	grid-template-rows: auto auto !important;
	justify-items: center !important;
	align-items: start !important;
	max-width: 100% !important;
	min-height: 128px !important;
	margin: 0 auto clamp(1.25rem, 2vw, 1.8rem) !important;
	padding: 0.45rem clamp(1rem, 3vw, 2.4rem) 0 !important;
	text-align: center !important;
	isolation: isolate !important;
}

/* Logo becomes a soft brand watermark, not a visible badge */
body.is-bluebox-front-page .hub-front-community-fun .hub-community-fun-pill {
	position: absolute !important;
	left: 50% !important;
	top: 48% !important;
	z-index: 0 !important;

	display: block !important;
	width: 168px !important;
	height: 168px !important;
	min-height: 0 !important;
	padding: 0 !important;
	margin: 0 !important;

	transform: translate(-50%, -50%) !important;

	border: 0 !important;
	border-radius: 0 !important;
	background: transparent !important;
	box-shadow: none !important;
	backdrop-filter: none !important;
	-webkit-backdrop-filter: none !important;
	pointer-events: none !important;
}

body.is-bluebox-front-page .hub-front-community-fun .hub-community-fun-pill::before,
body.is-bluebox-front-page .hub-front-community-fun .hub-community-fun-pill::after {
	content: none !important;
	display: none !important;
}

body.is-bluebox-front-page .hub-front-community-fun .hub-community-fun-pill-logo {
	display: block !important;
	width: 100% !important;
	height: 100% !important;
	max-width: none !important;
	object-fit: contain !important;
	object-position: center !important;

	padding: 0 !important;
	margin: 0 !important;
	border: 0 !important;
	border-radius: 0 !important;
	background: transparent !important;
	box-shadow: none !important;

	opacity: 0.18 !important;
	filter:
		drop-shadow(0 0 18px rgba(104, 199, 255, 0.58))
		drop-shadow(0 0 42px rgba(104, 199, 255, 0.30)) !important;
}

/* Title stays dominant */
body.is-bluebox-front-page .hub-front-community-fun .hub-community-scroll-bar-title {
	position: relative !important;
	z-index: 2 !important;
	grid-column: 1 !important;
	grid-row: 1 !important;

	display: grid !important;
	justify-items: center !important;
	gap: 0.75rem !important;
	margin: 0 auto !important;
	text-align: center !important;
}

body.is-bluebox-front-page .hub-front-community-fun .hub-community-scroll-text {
	display: inline-flex !important;
	flex-wrap: wrap !important;
	align-items: baseline !important;
	justify-content: center !important;
	gap: 0.28em !important;
	text-align: center !important;
	white-space: nowrap !important;
}

body.is-bluebox-front-page .hub-front-community-fun .hub-community-title-brand,
body.is-bluebox-front-page .hub-front-community-fun .hub-community-scroll-text .brand-blue {
	color: var(--hub-blue-400) !important;
	-webkit-text-fill-color: var(--hub-blue-400) !important;
	background: none !important;
	background-image: none !important;
	-webkit-background-clip: initial !important;
	background-clip: initial !important;
	text-shadow:
		0 0 12px rgba(104, 199, 255, 0.52),
		0 0 28px rgba(104, 199, 255, 0.30),
		0 0 44px rgba(104, 199, 255, 0.16) !important;
}

body.is-bluebox-front-page .hub-front-community-fun .hub-community-mini-copy {
	position: relative !important;
	z-index: 2 !important;
	grid-column: 1 !important;
	grid-row: 2 !important;

	max-width: 48rem !important;
	margin: 0.95rem auto 0 !important;
	text-align: center !important;
}

body.is-bluebox-front-page .hub-front-community-fun .hub-community-fun-marquee {
	margin-top: clamp(1rem, 1.8vw, 1.6rem) !important;
}

@media (max-width: 760px) {
	body.is-bluebox-front-page .hub-front-community-fun .hub-community-fun-head {
		min-height: 118px !important;
		padding-top: 0.25rem !important;
	}

	body.is-bluebox-front-page .hub-front-community-fun .hub-community-fun-pill {
		width: 138px !important;
		height: 138px !important;
		top: 46% !important;
	}

	body.is-bluebox-front-page .hub-front-community-fun .hub-community-scroll-text {
		white-space: normal !important;
	}

	body.is-bluebox-front-page .hub-front-community-fun .hub-community-mini-copy {
		max-width: 22rem !important;
		margin-top: 0.75rem !important;
	}
}

@media (max-width: 560px) {
	body.is-bluebox-front-page .hub-front-community-fun .hub-community-fun-pill {
		width: 118px !important;
		height: 118px !important;
	}

	body.is-bluebox-front-page .hub-front-community-fun .hub-community-fun-pill-logo {
		opacity: 0.14 !important;
	}
}
/* ===== COMMUNITY HEADER - NO LOGO CLEAN CENTRE ===== */

body.is-bluebox-front-page .hub-front-community-fun .hub-community-fun-head {
	position: relative !important;
	display: grid !important;
	grid-template-columns: 1fr !important;
	grid-template-rows: auto auto !important;
	justify-items: center !important;
	align-items: start !important;
	row-gap: 0.85rem !important;
	max-width: 100% !important;
	min-height: auto !important;
	margin: 0 auto clamp(1.25rem, 2vw, 1.8rem) !important;
	padding: 0.25rem clamp(1rem, 2vw, 1.6rem) 0 !important;
	text-align: center !important;
}

body.is-bluebox-front-page .hub-front-community-fun .hub-community-fun-pill {
	display: none !important;
}

body.is-bluebox-front-page .hub-front-community-fun .hub-community-scroll-bar-title {
	grid-column: 1 !important;
	grid-row: 1 !important;
	justify-self: center !important;
	align-self: start !important;
	margin: 0 auto !important;
	text-align: center !important;
}

body.is-bluebox-front-page .hub-front-community-fun .hub-community-mini-copy {
	grid-column: 1 !important;
	grid-row: 2 !important;
	justify-self: center !important;
	max-width: 48rem !important;
	margin: 0 !important;
	text-align: center !important;
}

body.is-bluebox-front-page .hub-front-community-fun .hub-community-fun-marquee {
	margin-top: clamp(1rem, 1.6vw, 1.45rem) !important;
}
/* ===== FRONT SHOP - REMOVE CLUB STORE KICKER ===== */

.hub-front-shop .hub-kicker {
	display: none !important;
}

.hub-front-shop .hub-kicker::before,
.hub-front-shop .hub-kicker::after {
	content: none !important;
	display: none !important;
}

.hub-front-shop .hub-promo-title {
	margin-top: 0 !important;
}
/* ===== FOOTER - REMOVE BLUEBOX PADEL CLUB LABELS ===== */

.hub-footer-pill,
.hub-footer-brand h4 {
	display: none !important;
}

.hub-footer-cta-copy .hub-footer-title {
	margin-top: 0 !important;
}

.hub-footer-brand p {
	margin-top: 0 !important;
}
/* ===== MEMBERSHIP PAGE - PREMIUM CARD PRICING ===== */

.hub-membership-table-wrap {
	display: none !important;
}

.hub-membership-table-head {
	max-width: 72rem;
	margin: 0 auto clamp(1.35rem, 2.4vw, 2rem);
	text-align: center;
}

.hub-membership-table-head .hub-kicker {
	margin-bottom: 0.8rem;
}

.hub-membership-table-head .hub-promo-title {
	max-width: 16ch;
	margin-left: auto;
	margin-right: auto;
	text-align: center;
}

.hub-membership-table-head .hub-promo-text {
	max-width: 48rem;
	margin-left: auto;
	margin-right: auto;
	color: var(--hub-text-soft);
}

.hub-membership-card-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: clamp(0.9rem, 1.4vw, 1.15rem);
	align-items: stretch;
}

.hub-membership-card-grid--corporate {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.hub-membership-price-card {
	position: relative;
	display: flex;
	flex-direction: column;
	min-height: 100%;
	overflow: hidden;
	padding: clamp(1.15rem, 1.8vw, 1.5rem);
	border-radius: 28px;
	border: 1px solid rgba(240, 201, 107, 0.20);
	background:
		radial-gradient(circle at 50% 0%, rgba(104, 199, 255, 0.13), transparent 15rem),
		linear-gradient(180deg, rgba(8, 24, 44, 0.94) 0%, rgba(5, 16, 31, 0.98) 100%);
	box-shadow:
		0 24px 58px rgba(0, 0, 0, 0.28),
		0 0 24px rgba(104, 199, 255, 0.05),
		inset 0 1px 0 rgba(255, 255, 255, 0.04);
	isolation: isolate;
	transition:
		transform 0.24s ease,
		border-color 0.24s ease,
		box-shadow 0.24s ease;
}

.hub-membership-price-card::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	padding: 1px;
	border-radius: inherit;
	background: linear-gradient(
		135deg,
		rgba(104, 199, 255, 0.22) 0%,
		rgba(240, 201, 107, 0.18) 48%,
		rgba(104, 199, 255, 0.08) 100%
	);
	-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
	-webkit-mask-composite: xor;
	mask-composite: exclude;
	pointer-events: none;
}

.hub-membership-price-card::after {
	content: "";
	position: absolute;
	right: -5rem;
	bottom: -5rem;
	z-index: -1;
	width: 13rem;
	height: 13rem;
	border-radius: 999px;
	background: radial-gradient(circle, rgba(104, 199, 255, 0.16), transparent 70%);
	opacity: 0;
	filter: blur(10px);
	transition: opacity 0.24s ease;
	pointer-events: none;
}

.hub-membership-price-card:hover {
	transform: translateY(-5px);
	border-color: rgba(240, 201, 107, 0.42);
	box-shadow:
		0 32px 74px rgba(0, 0, 0, 0.36),
		0 0 28px rgba(104, 199, 255, 0.10),
		inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.hub-membership-price-card:hover::after {
	opacity: 1;
}

.hub-membership-price-card--featured {
	border-color: rgba(104, 199, 255, 0.42);
	background:
		radial-gradient(circle at 50% 0%, rgba(104, 199, 255, 0.24), transparent 16rem),
		radial-gradient(circle at 100% 100%, rgba(240, 201, 107, 0.12), transparent 14rem),
		linear-gradient(180deg, rgba(10, 34, 64, 0.98) 0%, rgba(5, 16, 31, 0.98) 100%);
	box-shadow:
		0 30px 72px rgba(0, 0, 0, 0.36),
		0 0 34px rgba(104, 199, 255, 0.12),
		inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.hub-membership-card-ribbon {
	position: absolute;
	top: 1rem;
	right: 1rem;
	z-index: 3;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 30px;
	padding: 0.35rem 0.72rem;
	border-radius: 999px;
	border: 1px solid rgba(240, 201, 107, 0.34);
	background: rgba(5, 16, 31, 0.78);
	color: var(--hub-gold-400);
	font-size: 0.62rem;
	font-weight: 900;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	backdrop-filter: blur(10px);
	box-shadow:
		0 10px 24px rgba(0, 0, 0, 0.20),
		inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.hub-membership-card-head {
	display: grid;
	gap: 0.8rem;
	margin-bottom: 1.1rem;
	padding-right: 4.8rem;
}

.hub-membership-card-index {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.15rem;
	height: 2.15rem;
	border-radius: 999px;
	border: 1px solid rgba(104, 199, 255, 0.30);
	background: rgba(104, 199, 255, 0.10);
	color: var(--hub-blue-400);
	font-size: 0.68rem;
	font-weight: 900;
	letter-spacing: 0.08em;
	box-shadow:
		0 0 12px rgba(104, 199, 255, 0.14),
		inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.hub-membership-card-head h3 {
	margin: 0;
	font-family: var(--font-display);
	font-size: clamp(1.75rem, 2.2vw, 2.45rem);
	line-height: 0.92;
	text-transform: uppercase;
	color: var(--hub-white);
	text-shadow:
		0 0 14px rgba(104, 199, 255, 0.12),
		0 3px 18px rgba(0, 0, 0, 0.34);
}

.hub-membership-card-price {
	display: flex;
	align-items: baseline;
	gap: 0.5rem;
	margin: 0 0 1rem;
	padding-bottom: 1rem;
	border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.hub-membership-card-price strong {
	font-family: var(--font-display);
	font-size: clamp(2.7rem, 4vw, 4rem);
	line-height: 0.85;
	color: var(--hub-gold-400);
	text-shadow:
		0 0 12px rgba(240, 201, 107, 0.24),
		0 0 24px rgba(240, 201, 107, 0.10);
}

.hub-membership-card-price span {
	color: rgba(255, 255, 255, 0.62);
	font-size: 0.82rem;
	font-weight: 800;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.hub-membership-card-meta {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0.65rem;
	margin-bottom: 1rem;
}

.hub-membership-card-grid--corporate .hub-membership-card-meta {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.hub-membership-card-meta span {
	display: grid;
	align-content: center;
	min-height: 64px;
	padding: 0.7rem;
	border-radius: 16px;
	border: 1px solid rgba(240, 201, 107, 0.14);
	background: rgba(255, 255, 255, 0.035);
	color: rgba(255, 255, 255, 0.62);
	font-size: 0.66rem;
	font-weight: 900;
	line-height: 1.2;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.hub-membership-card-meta strong {
	display: block;
	margin-bottom: 0.25rem;
	color: var(--hub-white);
	font-size: 0.94rem;
	line-height: 1.2;
	letter-spacing: 0;
	text-transform: none;
}

.hub-membership-card-body {
	margin-top: auto;
	padding-top: 0.25rem;
}

.hub-membership-card-body h4 {
	margin: 0 0 0.55rem;
	color: var(--hub-blue-400);
	font-size: 0.72rem;
	font-weight: 900;
	letter-spacing: 0.13em;
	text-transform: uppercase;
}

.hub-membership-card-body p {
	margin: 0;
	color: rgba(255, 255, 255, 0.78);
	font-size: 0.94rem;
	line-height: 1.48;
}

.hub-membership-card-rule {
	margin-top: 1rem;
	padding: 0.72rem 0.82rem;
	border-radius: 18px;
	border: 1px solid rgba(104, 199, 255, 0.16);
	background: rgba(104, 199, 255, 0.07);
	color: rgba(255, 255, 255, 0.78);
	font-size: 0.82rem;
	font-weight: 800;
	line-height: 1.35;
}

/* Tablet */
@media (max-width: 1100px) {
	.hub-membership-card-grid,
	.hub-membership-card-grid--corporate {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.hub-membership-table-head .hub-promo-title {
		max-width: 18ch;
	}
}

/* Mobile */
@media (max-width: 760px) {
	.hub-membership-card-grid,
	.hub-membership-card-grid--corporate {
		grid-template-columns: 1fr;
	}

	.hub-membership-table-head {
		text-align: left;
	}

	.hub-membership-table-head .hub-promo-title,
	.hub-membership-table-head .hub-promo-text {
		margin-left: 0;
		margin-right: 0;
		text-align: left;
	}

	.hub-membership-price-card {
		border-radius: 24px;
	}

	.hub-membership-card-head {
		padding-right: 0;
	}

	.hub-membership-card-ribbon {
		position: static;
		width: fit-content;
		margin-bottom: 0.85rem;
	}

	.hub-membership-card-meta,
	.hub-membership-card-grid--corporate .hub-membership-card-meta {
		grid-template-columns: 1fr;
	}

	.hub-membership-card-meta span {
		min-height: auto;
	}
}
/* ===== MEMBERSHIP SUMMARY - LESS TEXT, MORE SCANNABLE ===== */

.hub-membership-copy-card--summary {
	display: grid;
	gap: 1.25rem;
}

.hub-membership-summary-lead {
	max-width: 48rem;
	margin: 0 auto !important;
	color: var(--hub-text-soft);
	font-size: clamp(1rem, 1.2vw, 1.12rem);
	line-height: 1.55;
	text-align: center;
}

.hub-membership-summary-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 1rem;
}

.hub-membership-summary-item {
	position: relative;
	overflow: hidden;
	padding: 1.2rem;
	border-radius: 24px;
	border: 1px solid rgba(240, 201, 107, 0.18);
	background:
		radial-gradient(circle at top right, rgba(104, 199, 255, 0.12), transparent 12rem),
		linear-gradient(180deg, rgba(7, 21, 40, 0.78) 0%, rgba(5, 16, 31, 0.88) 100%);
	box-shadow:
		0 18px 42px rgba(0, 0, 0, 0.20),
		inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.hub-membership-summary-item span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2rem;
	height: 2rem;
	margin-bottom: 0.85rem;
	border-radius: 999px;
	border: 1px solid rgba(104, 199, 255, 0.28);
	background: rgba(104, 199, 255, 0.10);
	color: var(--hub-blue-400);
	font-size: 0.68rem;
	font-weight: 900;
	letter-spacing: 0.08em;
}

.hub-membership-summary-item h3 {
	margin: 0 0 0.55rem;
	font-family: var(--font-display);
	font-size: clamp(1.45rem, 2vw, 1.9rem);
	line-height: 0.95;
	text-transform: uppercase;
	color: var(--hub-white);
}

.hub-membership-summary-item p {
	margin: 0;
	color: var(--hub-text-soft);
	font-size: 0.95rem;
	line-height: 1.45;
}

@media (max-width: 860px) {
	.hub-membership-summary-grid {
		grid-template-columns: 1fr;
	}

	.hub-membership-summary-lead {
		text-align: left;
	}
}
/* =========================================================
   MEMBERSHIP PAGE - CLEANER / CARD-BASED LAYOUT
   ========================================================= */

.hub-membership-clean-shell {
	display: grid;
	gap: 1.4rem;
	max-width: 1100px;
	margin: 0 auto;
	padding: clamp(1.5rem, 3vw, 2.3rem);
	border-radius: 28px;
	border: 1px solid rgba(240, 201, 107, 0.16);
	background:
		radial-gradient(circle at top right, rgba(104, 199, 255, 0.12), transparent 18rem),
		linear-gradient(180deg, rgba(8, 24, 46, 0.82) 0%, rgba(5, 17, 33, 0.92) 100%);
	box-shadow:
		0 18px 50px rgba(0, 0, 0, 0.18),
		inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.hub-membership-clean-title {
	display: flex;
	flex-wrap: wrap;
	gap: 0.45rem 0.7rem;
	margin: 0;
	font-family: var(--font-display);
	font-size: clamp(2.4rem, 6vw, 5.1rem);
	line-height: 0.9;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: var(--hub-white);
}

.hub-membership-clean-title .brand-blue,
.hub-promo-title .brand-blue {
	display: inline-block;
}

.hub-title-glow {
	color: var(--hub-blue-400);
	text-shadow:
		0 0 10px rgba(104, 199, 255, 0.24),
		0 0 22px rgba(104, 199, 255, 0.20),
		0 0 38px rgba(104, 199, 255, 0.12);
}

.hub-membership-clean-lead {
	max-width: 48rem;
	margin: 0;
	color: var(--hub-text-soft);
	font-size: clamp(1rem, 1.4vw, 1.1rem);
	line-height: 1.6;
}

.hub-membership-pricing-nav--hero {
	margin-top: 0.2rem;
}

.hub-membership-section-head {
	display: grid;
	gap: 0.6rem;
	max-width: 900px;
	margin: 0 auto 2rem;
	text-align: center;
}

.hub-membership-summary-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 1rem;
}

.hub-membership-summary-item {
	position: relative;
	overflow: hidden;
	padding: 1.2rem 1.15rem;
	border-radius: 22px;
	border: 1px solid rgba(240, 201, 107, 0.18);
	background:
		radial-gradient(circle at top right, rgba(104, 199, 255, 0.12), transparent 10rem),
		linear-gradient(180deg, rgba(8, 24, 46, 0.75) 0%, rgba(5, 17, 33, 0.86) 100%);
	box-shadow:
		0 14px 32px rgba(0, 0, 0, 0.14),
		inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.hub-membership-summary-item span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2rem;
	height: 2rem;
	margin-bottom: 0.85rem;
	border-radius: 999px;
	border: 1px solid rgba(104, 199, 255, 0.28);
	background: rgba(104, 199, 255, 0.10);
	color: var(--hub-blue-400);
	font-size: 0.68rem;
	font-weight: 900;
	letter-spacing: 0.08em;
}

.hub-membership-summary-item h3 {
	margin: 0 0 0.45rem;
	font-family: var(--font-display);
	font-size: clamp(1.35rem, 2vw, 1.85rem);
	line-height: 0.95;
	text-transform: uppercase;
	color: var(--hub-white);
}

.hub-membership-summary-item p {
	margin: 0;
	color: var(--hub-text-soft);
	font-size: 0.95rem;
	line-height: 1.45;
}

.hub-membership-plan-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 1rem;
}

.hub-membership-plan-grid--family {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.hub-membership-plan-grid--corporate {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.hub-membership-plan-card {
	position: relative;
	display: grid;
	gap: 1rem;
	min-height: 100%;
	padding: 1.2rem;
	border-radius: 24px;
	border: 1px solid rgba(240, 201, 107, 0.18);
	background:
		radial-gradient(circle at top right, rgba(104, 199, 255, 0.12), transparent 11rem),
		linear-gradient(180deg, rgba(8, 24, 46, 0.82) 0%, rgba(5, 17, 33, 0.92) 100%);
	box-shadow:
		0 16px 40px rgba(0, 0, 0, 0.16),
		inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.hub-membership-plan-card.is-featured {
	border-color: rgba(240, 201, 107, 0.34);
	box-shadow:
		0 22px 52px rgba(0, 0, 0, 0.2),
		0 0 0 1px rgba(240, 201, 107, 0.10),
		inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.hub-membership-plan-top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.6rem;
}

.hub-membership-plan-index {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.9rem;
	height: 1.9rem;
	border-radius: 999px;
	border: 1px solid rgba(104, 199, 255, 0.28);
	background: rgba(104, 199, 255, 0.10);
	color: var(--hub-blue-400);
	font-size: 0.68rem;
	font-weight: 900;
	letter-spacing: 0.08em;
}

.hub-membership-plan-badge {
	display: inline-flex;
	align-items: center;
	padding: 0.32rem 0.62rem;
	border-radius: 999px;
	background: rgba(240, 201, 107, 0.16);
	border: 1px solid rgba(240, 201, 107, 0.26);
	color: var(--hub-gold);
	font-size: 0.68rem;
	font-weight: 800;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.hub-membership-plan-title {
	margin: 0;
	font-family: var(--font-display);
	font-size: clamp(1.5rem, 2.3vw, 2.15rem);
	line-height: 0.92;
	text-transform: uppercase;
	color: var(--hub-white);
}

.hub-membership-plan-price {
	display: flex;
	align-items: flex-end;
	gap: 0.5rem;
}

.hub-membership-plan-price strong {
	font-family: var(--font-display);
	font-size: clamp(2.3rem, 4vw, 3.4rem);
	line-height: 0.88;
	color: var(--hub-gold);
}

.hub-membership-plan-price span {
	padding-bottom: 0.3rem;
	color: var(--hub-text-soft);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.hub-membership-plan-annual {
	color: var(--hub-text-soft);
	font-size: 0.92rem;
	line-height: 1.4;
}

.hub-membership-plan-meta {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0.8rem;
}

.hub-membership-plan-meta-item {
	padding: 0.85rem 0.9rem;
	border-radius: 16px;
	border: 1px solid rgba(240, 201, 107, 0.14);
	background: rgba(255, 255, 255, 0.03);
}

.hub-membership-plan-meta-item small,
.hub-membership-plan-stack-item small {
	display: block;
	margin-bottom: 0.35rem;
	color: var(--hub-text-soft);
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.hub-membership-plan-meta-item strong {
	color: var(--hub-white);
	font-size: 1rem;
	font-weight: 700;
	line-height: 1.35;
}

.hub-membership-plan-list {
	display: grid;
	gap: 0.55rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.hub-membership-plan-list li {
	position: relative;
	padding-left: 1rem;
	color: var(--hub-text-soft);
	font-size: 0.95rem;
	line-height: 1.45;
}

.hub-membership-plan-list li::before {
	content: '';
	position: absolute;
	top: 0.55rem;
	left: 0;
	width: 0.38rem;
	height: 0.38rem;
	border-radius: 999px;
	background: var(--hub-gold);
	box-shadow: 0 0 10px rgba(240, 201, 107, 0.38);
}

.hub-membership-plan-stack {
	display: grid;
	gap: 0.85rem;
}

.hub-membership-plan-stack-item {
	padding: 0.95rem 1rem;
	border-radius: 18px;
	border: 1px solid rgba(240, 201, 107, 0.14);
	background: rgba(255, 255, 255, 0.03);
}

.hub-membership-plan-stack-item p {
	margin: 0;
	color: var(--hub-text-soft);
	font-size: 0.95rem;
	line-height: 1.5;
}

@media (max-width: 1180px) {
	.hub-membership-plan-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.hub-membership-plan-grid--corporate {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 860px) {
	.hub-membership-summary-grid,
	.hub-membership-plan-grid,
	.hub-membership-plan-grid--family,
	.hub-membership-plan-grid--corporate {
		grid-template-columns: 1fr;
	}

	.hub-membership-clean-title {
		font-size: clamp(2.1rem, 12vw, 3.7rem);
	}

	.hub-membership-plan-meta {
		grid-template-columns: 1fr;
	}
}
/* =========================================================
   COACHING PAGE - CLEANER / CARD-BASED LAYOUT
   ========================================================= */

.hub-coaching-clean-shell {
	display: grid;
	gap: 1.4rem;
	max-width: 1100px;
	margin: 0 auto;
	padding: clamp(1.5rem, 3vw, 2.3rem);
	border-radius: 28px;
	border: 1px solid rgba(240, 201, 107, 0.16);
	background:
		radial-gradient(circle at top right, rgba(104, 199, 255, 0.14), transparent 18rem),
		radial-gradient(circle at bottom left, rgba(240, 201, 107, 0.08), transparent 16rem),
		linear-gradient(180deg, rgba(8, 24, 46, 0.82) 0%, rgba(5, 17, 33, 0.92) 100%);
	box-shadow:
		0 18px 50px rgba(0, 0, 0, 0.18),
		inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.hub-coaching-clean-title {
	display: flex;
	flex-wrap: wrap;
	gap: 0.45rem 0.7rem;
	margin: 0;
	font-family: var(--font-display);
	font-size: clamp(2.4rem, 6vw, 5.1rem);
	line-height: 0.9;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: var(--hub-white);
}

.hub-coaching-clean-title .brand-blue,
.hub-coaching-section-head .brand-blue,
.hub-coaching-cta .brand-blue {
	display: inline-block;
}

.hub-title-glow {
	color: var(--hub-blue-400) !important;
	-webkit-text-fill-color: var(--hub-blue-400) !important;
	text-shadow:
		0 0 10px rgba(104, 199, 255, 0.30),
		0 0 22px rgba(104, 199, 255, 0.22),
		0 0 38px rgba(104, 199, 255, 0.14) !important;
}

.hub-coaching-clean-lead {
	max-width: 48rem;
	margin: 0;
	color: var(--hub-text-soft);
	font-size: clamp(1rem, 1.4vw, 1.1rem);
	line-height: 1.6;
}

.hub-coaching-pricing-nav {
	display: flex;
	flex-wrap: wrap;
	gap: 0.8rem;
	margin-top: 0.2rem;
}

.hub-coaching-pricing-nav a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 42px;
	padding: 0.68rem 0.95rem;
	border-radius: 999px;
	border: 1px solid rgba(240, 201, 107, 0.22);
	background: rgba(255, 255, 255, 0.04);
	color: var(--hub-white);
	font-size: 0.74rem;
	font-weight: 900;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	transition:
		transform 0.22s ease,
		background 0.22s ease,
		border-color 0.22s ease;
}

.hub-coaching-pricing-nav a:hover {
	transform: translateY(-2px);
	background: rgba(240, 201, 107, 0.10);
	border-color: rgba(240, 201, 107, 0.38);
}

.hub-coaching-summary-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 1rem;
}

.hub-coaching-summary-item {
	position: relative;
	overflow: hidden;
	padding: 1.2rem 1.15rem;
	border-radius: 22px;
	border: 1px solid rgba(240, 201, 107, 0.18);
	background:
		radial-gradient(circle at top right, rgba(104, 199, 255, 0.12), transparent 10rem),
		linear-gradient(180deg, rgba(8, 24, 46, 0.75) 0%, rgba(5, 17, 33, 0.86) 100%);
	box-shadow:
		0 14px 32px rgba(0, 0, 0, 0.14),
		inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.hub-coaching-summary-item span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2rem;
	height: 2rem;
	margin-bottom: 0.85rem;
	border-radius: 999px;
	border: 1px solid rgba(104, 199, 255, 0.28);
	background: rgba(104, 199, 255, 0.10);
	color: var(--hub-blue-400);
	font-size: 0.68rem;
	font-weight: 900;
	letter-spacing: 0.08em;
}

.hub-coaching-summary-item h3 {
	margin: 0 0 0.45rem;
	font-family: var(--font-display);
	font-size: clamp(1.35rem, 2vw, 1.85rem);
	line-height: 0.95;
	text-transform: uppercase;
	color: var(--hub-white);
}

.hub-coaching-summary-item p {
	margin: 0;
	color: var(--hub-text-soft);
	font-size: 0.95rem;
	line-height: 1.45;
}

.hub-coaching-section-head {
	display: grid;
	gap: 0.6rem;
	max-width: 900px;
	margin: 0 auto 2rem;
	text-align: center;
}

.hub-coaching-service-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 1rem;
}

.hub-coaching-service-card {
	position: relative;
	display: grid;
	gap: 1rem;
	min-height: 100%;
	padding: 1.2rem;
	border-radius: 24px;
	border: 1px solid rgba(240, 201, 107, 0.18);
	background:
		radial-gradient(circle at top right, rgba(104, 199, 255, 0.12), transparent 11rem),
		linear-gradient(180deg, rgba(8, 24, 46, 0.82) 0%, rgba(5, 17, 33, 0.92) 100%);
	box-shadow:
		0 16px 40px rgba(0, 0, 0, 0.16),
		inset 0 1px 0 rgba(255, 255, 255, 0.04);
	overflow: hidden;
}

.hub-coaching-service-card.is-featured {
	border-color: rgba(240, 201, 107, 0.34);
	box-shadow:
		0 22px 52px rgba(0, 0, 0, 0.2),
		0 0 0 1px rgba(240, 201, 107, 0.10),
		0 0 28px rgba(104, 199, 255, 0.08),
		inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.hub-coaching-service-top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.6rem;
}

.hub-coaching-service-index {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.9rem;
	height: 1.9rem;
	border-radius: 999px;
	border: 1px solid rgba(104, 199, 255, 0.28);
	background: rgba(104, 199, 255, 0.10);
	color: var(--hub-blue-400);
	font-size: 0.68rem;
	font-weight: 900;
	letter-spacing: 0.08em;
}

.hub-coaching-service-badge {
	display: inline-flex;
	align-items: center;
	padding: 0.32rem 0.62rem;
	border-radius: 999px;
	background: rgba(240, 201, 107, 0.14);
	border: 1px solid rgba(240, 201, 107, 0.24);
	color: var(--hub-gold-400);
	font-size: 0.66rem;
	font-weight: 900;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.hub-coaching-service-title {
	margin: 0;
	font-family: var(--font-display);
	font-size: clamp(1.55rem, 2.3vw, 2.2rem);
	line-height: 0.92;
	text-transform: uppercase;
	color: var(--hub-white);
}

.hub-coaching-service-summary {
	margin: 0;
	color: var(--hub-text-soft);
	font-size: 0.95rem;
	line-height: 1.5;
}

.hub-coaching-service-price {
	display: flex;
	align-items: flex-end;
	gap: 0.5rem;
	padding-top: 0.15rem;
}

.hub-coaching-service-price strong {
	font-family: var(--font-display);
	font-size: clamp(2.25rem, 4vw, 3.25rem);
	line-height: 0.88;
	color: var(--hub-gold-400);
	text-shadow:
		0 0 10px rgba(240, 201, 107, 0.20),
		0 0 18px rgba(240, 201, 107, 0.10);
}

.hub-coaching-service-price span {
	padding-bottom: 0.3rem;
	color: var(--hub-text-soft);
	font-size: 0.72rem;
	font-weight: 800;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.hub-coaching-service-meta {
	padding: 0.9rem 1rem;
	border-radius: 16px;
	border: 1px solid rgba(240, 201, 107, 0.14);
	background: rgba(255, 255, 255, 0.03);
}

.hub-coaching-service-meta small {
	display: block;
	margin-bottom: 0.35rem;
	color: var(--hub-text-soft);
	font-size: 0.72rem;
	font-weight: 800;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.hub-coaching-service-meta strong {
	color: var(--hub-white);
	font-size: 1rem;
	font-weight: 800;
	line-height: 1.35;
}

.hub-coaching-service-list {
	display: grid;
	gap: 0.55rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.hub-coaching-service-list li {
	position: relative;
	padding-left: 1rem;
	color: var(--hub-text-soft);
	font-size: 0.95rem;
	line-height: 1.45;
}

.hub-coaching-service-list li::before {
	content: "";
	position: absolute;
	top: 0.55rem;
	left: 0;
	width: 0.38rem;
	height: 0.38rem;
	border-radius: 999px;
	background: var(--hub-gold-400);
	box-shadow: 0 0 10px rgba(240, 201, 107, 0.38);
}

.hub-coaching-pathway-card {
	display: grid;
	grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
	gap: clamp(1.2rem, 3vw, 2rem);
	align-items: center;
	padding: clamp(1.5rem, 3vw, 2.4rem);
	border-radius: 30px;
	border: 1px solid rgba(240, 201, 107, 0.16);
	background:
		radial-gradient(circle at 75% 30%, rgba(104, 199, 255, 0.14), transparent 18rem),
		linear-gradient(180deg, rgba(8, 24, 46, 0.82) 0%, rgba(5, 17, 33, 0.92) 100%);
	box-shadow:
		0 18px 50px rgba(0, 0, 0, 0.18),
		inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.hub-coaching-pathway-copy {
	min-width: 0;
}

.hub-coaching-pathway-steps {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 0.9rem;
}

.hub-coaching-pathway-steps article {
	padding: 1rem;
	border-radius: 20px;
	border: 1px solid rgba(240, 201, 107, 0.16);
	background: rgba(255, 255, 255, 0.035);
}

.hub-coaching-pathway-steps span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.8rem;
	height: 1.8rem;
	margin-bottom: 0.8rem;
	border-radius: 999px;
	border: 1px solid rgba(104, 199, 255, 0.28);
	background: rgba(104, 199, 255, 0.10);
	color: var(--hub-blue-400);
	font-size: 0.66rem;
	font-weight: 900;
	letter-spacing: 0.08em;
}

.hub-coaching-pathway-steps h3 {
	margin: 0 0 0.45rem;
	font-family: var(--font-display);
	font-size: 1.45rem;
	line-height: 0.95;
	text-transform: uppercase;
	color: var(--hub-white);
}

.hub-coaching-pathway-steps p {
	margin: 0;
	color: var(--hub-text-soft);
	font-size: 0.92rem;
	line-height: 1.45;
}

@media (max-width: 1180px) {
	.hub-coaching-service-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.hub-coaching-pathway-card {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 860px) {
	.hub-coaching-summary-grid,
	.hub-coaching-service-grid,
	.hub-coaching-pathway-steps {
		grid-template-columns: 1fr;
	}

	.hub-coaching-clean-title {
		font-size: clamp(2.1rem, 12vw, 3.7rem);
	}

	.hub-coaching-pricing-nav {
		flex-direction: column;
		align-items: stretch;
	}

	.hub-coaching-pricing-nav a {
		width: 100%;
	}
}