/* =====================================================================
   Electric Box theme
   Electric Box visual identity (dark navy/black, neon cyan/purple, gold)
   in a Reformer-style section layout.
   ===================================================================== */

:root {
	--eb-black: #050507;
	--eb-navy: #00042b;
	--eb-navy-2: #0a1140;
	--eb-gold: #e8b738;
	--eb-cyan: #33c8e0;
	--eb-neon: #6dcfd6;
	--eb-neon-core: #6dcfd6;
	--eb-purple: #7c5cff;
	--eb-text: #ffffff;
	--eb-muted: #b8bcc8;
	--eb-line: rgba(255, 255, 255, 0.12);
	--eb-container: 1200px;
	--eb-radius: 4px;
	--eb-head: "Barlow Semi Condensed", "Arial Narrow", system-ui, sans-serif;
	--eb-body: "Roboto", system-ui, -apple-system, sans-serif;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
	margin: 0;
	background: var(--eb-black);
	color: var(--eb-text);
	font-family: var(--eb-body);
	font-size: 17px;
	line-height: 1.7;
	font-weight: 300;
	overflow-x: hidden;
}
body.eb-no-scroll { overflow: hidden; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
ul { margin: 0; padding: 0; list-style: none; }
p { margin: 0 0 1em; }

h1, h2, h3, h4 {
	font-family: var(--eb-head);
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.01em;
	line-height: 1.02;
	margin: 0 0 0.4em;
}

/* ---------- Layout helpers ---------- */
.eb-container { width: 100%; max-width: var(--eb-container); margin: 0 auto; padding: 0 28px; }

/* ---------- Buttons ---------- */
.eb-btn {
	display: inline-flex;
	align-items: center;
	gap: 14px;
	padding: 16px 26px;
	border: 1px solid var(--eb-text);
	color: var(--eb-text);
	font-family: var(--eb-head);
	font-weight: 700;
	font-size: 0.82rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	border-radius: var(--eb-radius);
	transition: background 0.25s, color 0.25s, transform 0.25s;
}
.eb-btn .eb-btn__arrow { width: 18px; filter: brightness(0) invert(1); transition: transform 0.25s; }
.eb-btn:hover { background: var(--eb-text); color: var(--eb-black); }
.eb-btn:hover .eb-btn__arrow { filter: none; transform: translateX(4px); }
.eb-btn--gold { background: #f3c544; border-color: #f3c544; color: #111111; font-weight: 600; border-radius: 0; }
.eb-btn--gold .eb-btn__arrow { filter: brightness(0); }
.eb-btn--gold:hover { background: #ffd24d; border-color: #ffd24d; color: #111111; }
.eb-btn--gold:hover .eb-btn__arrow { filter: brightness(0); transform: translateX(4px); }

/* Hero call-to-action buttons: larger, flat solid, square corners (match reference). */
.eb-hero__cta .eb-btn { padding: 19px 36px; font-size: 1rem; letter-spacing: 0.09em; gap: 18px; border-radius: 0; }
.eb-hero__cta .eb-btn__arrow { width: 24px; }
.eb-btn--gold-sm {
	display: inline-flex; align-items: center;
	background: var(--eb-text); color: var(--eb-black);
	font-family: var(--eb-head); font-weight: 700; font-size: 0.78rem;
	letter-spacing: 0.12em; text-transform: uppercase;
	padding: 12px 20px; border-radius: var(--eb-radius);
	transition: background 0.25s;
}
.eb-btn--gold-sm:hover { background: var(--eb-gold); }

/* ---------- Top bar ---------- */
.eb-topbar {
	position: fixed; inset: 0 0 auto 0; z-index: 80;
	transition: background 0.3s, border-color 0.3s;
	border-bottom: 1px solid transparent;
}
.eb-topbar.is-scrolled { background: rgba(5, 5, 7, 0.95); border-bottom-color: var(--eb-line); }
.eb-topbar__inner {
	max-width: 1320px; margin: 0 auto; padding: 16px 28px;
	display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
}
.eb-topbar__menu {
	justify-self: start;
	display: inline-flex; align-items: center; gap: 16px;
	background: none; border: 1px solid var(--eb-line); color: var(--eb-text);
	padding: 16px 24px; border-radius: var(--eb-radius); cursor: pointer;
	font-family: var(--eb-head); font-weight: 600; font-size: 0.92rem;
	letter-spacing: 0.24em; text-transform: uppercase;
	transition: border-color 0.25s;
}
.eb-topbar__menu:hover { border-color: var(--eb-text); }
.eb-topbar__menu img { width: 26px; }
.eb-topbar__brand {
	justify-self: center;
	display: inline-flex; align-items: center; gap: 12px;
	text-decoration: none; color: var(--eb-text);
}
.eb-topbar__bolt { height: 34px; width: auto; display: block; filter: drop-shadow(0 0 10px rgba(109, 207, 214, 0.45)); }
.eb-topbar__wordmark {
	font-family: var(--eb-head); font-weight: 700; font-size: 1.08rem;
	letter-spacing: 0.22em; text-transform: uppercase; white-space: nowrap;
}
.eb-topbar__spacer { justify-self: end; }

/* ---------- Drawer ---------- */
.eb-drawer { position: fixed; inset: 0; z-index: 100; background: rgba(5, 5, 7, 0.75); opacity: 0; transition: opacity 0.3s; }
.eb-drawer.is-open { opacity: 1; }
.eb-drawer__panel {
	position: absolute; inset: 0 auto 0 0; width: min(420px, 86vw);
	background: linear-gradient(180deg, var(--eb-navy), var(--eb-black));
	border-right: 1px solid var(--eb-line);
	padding: 90px 44px; transform: translateX(-100%); transition: transform 0.32s ease;
	box-shadow: 0 0 60px rgba(52, 198, 236, 0.18);
}
.eb-drawer.is-open .eb-drawer__panel { transform: translateX(0); }
.eb-drawer__close { position: absolute; top: 26px; right: 26px; background: none; border: 0; cursor: pointer; padding: 8px; }
.eb-drawer__close img { width: 22px; }
.eb-drawer__nav .eb-menu__list { display: flex; flex-direction: column; gap: 6px; }
.eb-drawer__nav a {
	display: block; font-family: var(--eb-head); font-weight: 700;
	text-transform: uppercase; letter-spacing: 0.04em; font-size: 1.8rem;
	padding: 10px 0; color: var(--eb-text); transition: color 0.2s, padding 0.2s;
}
.eb-drawer__nav a:hover { color: var(--eb-cyan); padding-left: 10px; }

/* ---------- Hero ---------- */
.eb-hero {
	position: relative; min-height: 88vh; display: flex; align-items: center;
	/* Matched to the original video: deep, saturated electric-blue navy. */
	background: radial-gradient(120% 95% at 50% 42%, #07154a 0%, #01083a 45%, #00042b 100%);
	overflow: hidden;
}
.eb-hero__neon { position: absolute; inset: 0; display: grid; place-items: center; perspective: 900px; }
/* Animated neon tunnel: every square is the same size and continuously scales
   outward from the centre, fading as it passes the edges. Staggered negative
   delays keep squares at every depth at once, so it reads as flying forward
   through the tunnel — matching the original video. */
.eb-hero__neon span {
	position: absolute; width: 96vmin; height: 96vmin; border: 2px solid var(--eb-neon); border-radius: 0;
	box-shadow:
		0 0 4px rgba(170, 240, 245, 0.95),
		0 0 16px rgba(109, 207, 214, 0.9),
		0 0 38px rgba(109, 207, 214, 0.65),
		0 0 72px rgba(60, 170, 210, 0.4),
		inset 0 0 26px rgba(109, 207, 214, 0.22);
	transform: scale(0.04); opacity: 0;
	animation: eb-tunnel 12s linear infinite;
	will-change: transform, opacity;
}
/* Stop the tunnel animating once the hero is scrolled out of view (perf). */
.eb-hero.eb-anim-paused .eb-hero__neon span { animation-play-state: paused; }
.eb-hero__neon span:nth-child(1)  { animation-delay: 0s; }
.eb-hero__neon span:nth-child(2)  { animation-delay: -1s; }
.eb-hero__neon span:nth-child(3)  { animation-delay: -2s; }
.eb-hero__neon span:nth-child(4)  { animation-delay: -3s; }
.eb-hero__neon span:nth-child(5)  { animation-delay: -4s; }
.eb-hero__neon span:nth-child(6)  { animation-delay: -5s; }
.eb-hero__neon span:nth-child(7)  { animation-delay: -6s; }
.eb-hero__neon span:nth-child(8)  { animation-delay: -7s; }
.eb-hero__neon span:nth-child(9)  { animation-delay: -8s; }
.eb-hero__neon span:nth-child(10) { animation-delay: -9s; }
.eb-hero__neon span:nth-child(11) { animation-delay: -10s; }
.eb-hero__neon span:nth-child(12) { animation-delay: -11s; }
@keyframes eb-tunnel {
	0%   { transform: scale(0.04); opacity: 0; }
	8%   { opacity: 1; }
	92%  { opacity: 1; }
	100% { transform: scale(2.6); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
	.eb-hero__neon span { animation: none; opacity: 0.7; }
	.eb-hero__neon span:nth-child(1) { transform: scale(0.28); }
	.eb-hero__neon span:nth-child(2) { transform: scale(0.5); }
	.eb-hero__neon span:nth-child(3) { transform: scale(0.78); }
	.eb-hero__neon span:nth-child(4) { transform: scale(1.1); }
	.eb-hero__neon span:nth-child(5) { transform: scale(1.5); }
	.eb-hero__neon span:nth-child(6), .eb-hero__neon span:nth-child(7), .eb-hero__neon span:nth-child(8) { display: none; }
}
.eb-hero__overlay {
	position: absolute; inset: 0; z-index: 2;
	background:
		linear-gradient(to top, var(--eb-black) 0%, rgba(5, 5, 7, 0.7) 14%, transparent 32%),
		radial-gradient(62% 62% at 50% 48%, transparent 0%, rgba(0, 4, 43, 0.45) 100%);
}
.eb-hero__content { position: relative; z-index: 5; text-align: center; padding-top: 90px; }
.eb-hero__eyebrow {
	font-family: var(--eb-head); font-weight: 600; letter-spacing: 0.4em;
	text-transform: uppercase; font-size: 0.85rem; color: var(--eb-cyan); margin-bottom: 18px;
}
.eb-hero__title {
	/* Matched to the live site h1: ~72px, weight 700, tracking-wider. */
	font-size: clamp(2.4rem, 6vw, 4.5rem); font-weight: 700; letter-spacing: 0.05em;
	text-shadow: 0 0 36px rgba(0, 4, 43, 0.85), 0 0 60px rgba(109, 207, 214, 0.22); margin-bottom: 38px;
}
.eb-hero__cta { display: flex; gap: 18px; justify-content: center; flex-wrap: wrap; }
.eb-hero__scroll { position: absolute; left: 50%; bottom: 34px; transform: translateX(-50%); z-index: 6; }
.eb-hero__scroll span {
	display: block; width: 14px; height: 14px;
	border-right: 2px solid rgba(255, 255, 255, 0.7); border-bottom: 2px solid rgba(255, 255, 255, 0.7);
	transform: rotate(45deg); animation: eb-bob 1.8s ease-in-out infinite;
}
@keyframes eb-bob { 0%, 100% { transform: translateY(0) rotate(45deg); } 50% { transform: translateY(8px) rotate(45deg); } }

/* ---------- Split sections ---------- */
.eb-split { padding: 96px 0; background: var(--eb-black); }
.eb-split--alt { background: linear-gradient(180deg, #07091a, var(--eb-black)); }
.eb-split__inner { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
.eb-split--image-left .eb-split__media { order: -1; }
.eb-split__heading { font-size: clamp(1.9rem, 3.6vw, 3rem); max-width: 14ch; }
.eb-split__body { color: var(--eb-muted); font-size: 1.02rem; }
.eb-split__cta { margin-top: 26px; }
.eb-split__media { position: relative; }
.eb-split__img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--eb-radius); box-shadow: 0 30px 70px rgba(0, 0, 0, 0.55); }
.eb-split__media::after {
	content: ""; position: absolute; inset: 0; border-radius: var(--eb-radius);
	box-shadow: inset 0 0 0 1px rgba(52, 198, 236, 0.25); pointer-events: none;
}

/* ---------- Photo strip ---------- */
.eb-strip { background: var(--eb-black); padding-bottom: 20px; }
.eb-strip__lead { padding: 30px 0 26px; }
.eb-strip__heading { font-size: clamp(1.6rem, 3vw, 2.4rem); max-width: 22ch; }
.eb-strip__track { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(220px, 1fr); gap: 6px; }
.eb-strip__cell { overflow: hidden; }
.eb-strip__img { width: 100%; height: 320px; object-fit: cover; filter: brightness(0.82); transition: filter 0.3s, transform 0.5s; }
.eb-strip__cell:hover .eb-strip__img { filter: brightness(1); transform: scale(1.04); }

/* ---------- Who-for cards ---------- */
.eb-cards { padding: 100px 0; background: linear-gradient(180deg, var(--eb-black), #07091a); }
.eb-cards__title { text-align: center; font-size: clamp(2rem, 4.4vw, 3.4rem); margin-bottom: 56px; }
.eb-cards__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 30px; }
.eb-card { background: #0a1140; border: 1px solid var(--eb-line); border-radius: var(--eb-radius); overflow: hidden; transition: transform 0.3s, box-shadow 0.3s, border-color 0.3s; }
.eb-card:hover { transform: translateY(-6px); border-color: rgba(52, 198, 236, 0.5); box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5), 0 0 40px rgba(52, 198, 236, 0.12); }
.eb-card__media { background: #060b29; }
.eb-card__img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.eb-card__body { padding: 28px 30px 34px; }
.eb-card__heading { font-size: 1.5rem; }
.eb-card__text { color: var(--eb-muted); font-size: 0.98rem; margin-bottom: 20px; }

/* ---------- Timetable ---------- */
.eb-timetable { padding: 100px 0; background: #07091a; }
.eb-timetable__inner { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
.eb-timetable__img { width: 100%; border-radius: var(--eb-radius); box-shadow: 0 30px 70px rgba(0, 0, 0, 0.55); }
.eb-timetable__placeholder {
	aspect-ratio: 3 / 4; display: grid; place-items: center;
	background: linear-gradient(135deg, #e8731f, #c2410c); border-radius: var(--eb-radius);
}
.eb-timetable__placeholder span { font-family: var(--eb-head); font-weight: 800; font-size: 3rem; letter-spacing: 0.1em; color: #fff; }
.eb-timetable__heading { font-size: clamp(2rem, 4vw, 3rem); }
.eb-timetable__body { color: var(--eb-muted); margin-bottom: 26px; }

/* ---------- FAQ accordion (Members / Non-Members) ---------- */
.eb-faq { padding: 100px 0; background: linear-gradient(180deg, #07091a, var(--eb-black)); }
.eb-faq__inner { display: grid; grid-template-columns: 0.85fr 1fr; gap: 64px; align-items: center; }
.eb-faq__img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: var(--eb-radius); box-shadow: 0 30px 70px rgba(0, 0, 0, 0.55); }
.eb-faq__eyebrow { color: var(--eb-gold); font-family: var(--eb-head); font-weight: 600; letter-spacing: 0.3em; text-transform: uppercase; font-size: 0.8rem; margin-bottom: 14px; }
.eb-faq__heading { font-size: clamp(1.9rem, 3.6vw, 3rem); text-transform: uppercase; margin-bottom: 28px; max-width: 16ch; }
.eb-faq__list { list-style: none; margin: 0 0 34px; padding: 0; border-top: 1px solid var(--eb-line); }
.eb-faq__item { border-bottom: 1px solid var(--eb-line); }
.eb-faq__q {
	width: 100%; background: none; border: 0; color: var(--eb-text); cursor: pointer;
	display: flex; align-items: center; justify-content: space-between; gap: 20px; text-align: left;
	padding: 22px 4px; font-family: var(--eb-head); font-weight: 600; font-size: 1.15rem;
	transition: color 0.2s;
}
.eb-faq__q:hover { color: var(--eb-neon); }
.eb-faq__chev { flex: 0 0 auto; width: 11px; height: 11px; margin-right: 6px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); transition: transform 0.25s; }
.eb-faq__q[aria-expanded="true"] .eb-faq__chev { transform: rotate(-135deg); }
.eb-faq__a { color: var(--eb-muted); padding: 0 4px 22px; font-size: 1rem; max-width: 62ch; }
.eb-faq__a p { margin: 0; }
.eb-faq__cta { margin-top: 4px; }

/* ---------- Page hero / pages ---------- */
.eb-pagehero { padding: 150px 0 50px; background: linear-gradient(180deg, var(--eb-navy), var(--eb-black)); border-bottom: 1px solid var(--eb-line); }
.eb-pagehero__eyebrow { color: var(--eb-cyan); font-family: var(--eb-head); font-weight: 600; letter-spacing: 0.3em; text-transform: uppercase; font-size: 0.8rem; margin-bottom: 10px; }
.eb-pagehero__title { font-size: clamp(2.4rem, 6vw, 4.4rem); }
.eb-page { padding: 64px 28px 100px; }
.eb-page--prose { max-width: 820px; }
.eb-page__content { color: var(--eb-muted); font-size: 1.05rem; }
.eb-page__content h2 { color: var(--eb-text); font-size: 1.8rem; margin-top: 1.4em; }
.eb-page__content strong { color: var(--eb-text); }
.eb-page__content ul { list-style: none; padding: 0; }
.eb-page__content ul li { position: relative; padding-left: 26px; margin-bottom: 12px; }
.eb-page__content ul li::before { content: ""; position: absolute; left: 0; top: 11px; width: 10px; height: 10px; background: var(--eb-cyan); box-shadow: 0 0 10px var(--eb-cyan); }
.eb-page__cta { margin-top: 40px; display: flex; gap: 16px; flex-wrap: wrap; }
.eb-contact { display: grid; grid-template-columns: 1fr 1.4fr; gap: 56px; }
.eb-contact__item { margin-bottom: 28px; }
.eb-contact__item h3 { color: var(--eb-cyan); font-size: 1.1rem; letter-spacing: 0.1em; }
.eb-contact__item a { color: var(--eb-text); }
.eb-contact__item a:hover { color: var(--eb-cyan); }

/* ---------- Contact page ---------- */
.eb-contact2 { padding: 60px 28px 100px; }
.eb-contact2__intro { max-width: 760px; color: var(--eb-muted); font-size: 1.08rem; margin-bottom: 44px; }
.eb-contact2__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; margin-bottom: 44px; }
.eb-contact2__card, .eb-contact2__cta { background: #0a1140; border: 1px solid var(--eb-line); border-radius: var(--eb-radius); padding: 40px; }
.eb-contact2__cta { background: linear-gradient(160deg, #0c1450, #060b29); display: flex; flex-direction: column; align-items: flex-start; }
.eb-contact2__h { font-size: 1.6rem; margin-bottom: 22px; }
.eb-contact2__row { display: grid; grid-template-columns: 88px 1fr; gap: 16px; padding: 15px 0; border-top: 1px solid var(--eb-line); }
.eb-contact2__row:first-of-type { border-top: 0; padding-top: 0; }
.eb-contact2__label { color: var(--eb-cyan); font-family: var(--eb-head); font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; font-size: 0.8rem; padding-top: 3px; }
.eb-contact2__val { color: var(--eb-text); line-height: 1.5; }
.eb-contact2__val a { color: var(--eb-text); }
.eb-contact2__val a:hover { color: var(--eb-cyan); }
.eb-contact2__cta p { color: var(--eb-muted); margin-bottom: 26px; }
.eb-contact2__map { border: 1px solid var(--eb-line); border-radius: var(--eb-radius); overflow: hidden; line-height: 0; }
.eb-contact2__map iframe { display: block; filter: grayscale(0.2) contrast(1.05); }

/* ---------- Footer ---------- */
.eb-footer { background: #04050a; border-top: 1px solid var(--eb-line); padding-top: 64px; }
.eb-footer__inner { display: grid; grid-template-columns: auto 1fr auto; gap: 50px; align-items: start; padding-bottom: 50px; }
.eb-footer__brandlink { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; color: var(--eb-text); }
.eb-footer__bolt { height: 32px; width: auto; filter: drop-shadow(0 0 8px rgba(109, 207, 214, 0.4)); }
.eb-footer__wordmark { font-family: var(--eb-head); font-weight: 700; font-size: 1rem; letter-spacing: 0.2em; text-transform: uppercase; }
.eb-footer__nav .eb-menu__list { display: flex; flex-wrap: wrap; gap: 14px 40px; }
.eb-footer__nav a { color: var(--eb-muted); font-size: 0.95rem; transition: color 0.2s; }
.eb-footer__nav a:hover { color: var(--eb-text); }
.eb-footer__social { display: flex; align-items: center; gap: 20px; }
.eb-footer__social a { display: inline-flex; }
.eb-footer__social img { height: 24px; width: 24px; opacity: 0.75; transition: opacity 0.2s, transform 0.2s; }
.eb-footer__social a:hover img { opacity: 1; transform: translateY(-2px); }
.eb-footer__base { border-top: 1px solid var(--eb-line); padding: 22px 0; }
.eb-footer__base span { color: rgba(255, 255, 255, 0.4); font-size: 0.82rem; }

/* ---------- Responsive ---------- */
@media (max-width: 980px) {
	.eb-split__inner, .eb-timetable__inner, .eb-contact, .eb-contact2__grid, .eb-faq__inner { grid-template-columns: 1fr; gap: 36px; }
	.eb-faq { padding: 64px 0; }
	.eb-faq__media { order: -1; }
	.eb-split--image-left .eb-split__media { order: 0; }
	.eb-cards__grid { grid-template-columns: 1fr; }
	.eb-strip__track { grid-auto-flow: column; grid-auto-columns: 72%; overflow-x: auto; scroll-snap-type: x mandatory; }
	.eb-strip__cell { scroll-snap-align: start; }
	.eb-footer__inner { grid-template-columns: 1fr; gap: 30px; }
}
@media (max-width: 640px) {
	body { font-size: 16px; }

	/* Compact header, like the original mobile view. */
	.eb-topbar__inner { padding: 12px 16px; }
	.eb-topbar__menu { gap: 0; padding: 9px 11px; }
	.eb-topbar__menu span { display: none; }
	.eb-topbar__menu img { width: 20px; }
		.eb-topbar__bolt { height: 24px; }
		.eb-topbar__wordmark { font-size: 0.82rem; letter-spacing: 0.16em; }

	/* Hero: centred, smaller headline, tidy stacked buttons. */
	.eb-hero { min-height: 82vh; }
	.eb-hero__content { text-align: center; padding-top: 78px; }
	.eb-hero__eyebrow { letter-spacing: 0.26em; }
	.eb-hero__title { font-size: clamp(2.1rem, 12.5vw, 3.2rem); margin-bottom: 26px; }
	.eb-hero__cta { flex-direction: column; align-items: center; justify-content: center; gap: 12px; }
	.eb-hero .eb-btn { padding: 13px 22px; font-size: 0.66rem; letter-spacing: 0.1em; gap: 10px; }
	.eb-hero__scroll { bottom: 24px; }

	.eb-split, .eb-cards, .eb-timetable { padding: 64px 0; }
}