← ARTSABERS

ARTSABERS — British Action Academy ·

MAS73 Approved Content Page ARTSABERS
Open in New Tab ✓ Accepted
Template type: Standard — ready for /wire-template.

Mockup HTML

Open in New Tab
<!DOCTYPE html>
<?xml encoding="utf-8"?><?xml encoding="utf-8"?><?xml encoding="utf-8"?><?xml encoding="utf-8"?><?xml encoding="utf-8"?><?xml encoding="utf-8"?><?xml encoding="utf-8"?><?xml encoding="utf-8"?><?xml encoding="utf-8"?><?xml encoding="utf-8"?><?xml encoding="utf-8"?><?xml encoding="utf-8"?><?xml encoding="utf-8"?><?xml encoding="utf-8"?><?xml encoding="utf-8"?><?xml encoding="utf-8"?><?xml encoding="utf-8"?><?xml encoding="utf-8"?><?xml encoding="utf-8"?><?xml encoding="utf-8"?><?xml encoding="utf-8"?><?xml encoding="utf-8"?><html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>British Action Academy — Featured Partner · ARTSABERS</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Manrope:wght@300;400;500;600;700&family=Orbitron:wght@400;500;600;700;800&family=Onest:wght@400;500;600;700&display=swap" rel="stylesheet">
<style>:root {
  /* Orange ombre */
  --ember-glow: #FFB347;
  --ember-bright: #FF9540;
  --ember: #FF7A2E;
  --ember-forge: #E85D18;
  --ember-deep: #D14810;
  --ember-smoulder: #8B2E08;
  --ember-scar: #5A1A00;
  --on-primary-fixed: #2A0800;

  /* Hull ladder */
  --carbon: #060606;
  --void: #0A0A0A;
  --charcoal: #141414;
  --charcoal-warm: #161412;
  --hull-panel: #1A1A1A;
  --hull-panel-lift: #242424;
  --hull-panel-dark: #0F0F0F;
  --hull-chrome-shadow: #2E2E2E;
  --hull-edge: #363636;

  /* Chrome / white highlights */
  --chrome-highlight: #FAFAFA;
  --chrome-glint: #E8E4DD;
  --chrome-warm: #F5F0E8;
  --chrome-dim: #B8B0A6;

  /* Semantic surface roles */
  --bg-carbon: var(--carbon);
  --bg-void: var(--void);
  --bg-charcoal: var(--charcoal);
  --bg-charcoal-warm: var(--charcoal-warm);
  --bg-card: rgba(20,20,20,0.94);
  --bg-card-dark: rgba(15,15,15,0.90);
  --bg-card-lift: var(--hull-panel-lift);

  /* Text roles */
  --text-primary: var(--chrome-warm);
  --text-headline: var(--chrome-highlight);
  --text-dim: var(--chrome-dim);
  --text-accent: var(--ember);
  --text-on-ember: var(--on-primary-fixed);

  /* Elevation */
  --panel-lift: inset 0 1px 0 rgba(250,250,250,0.08), 0 8px 24px -8px rgba(0,0,0,0.9);
  --panel-lift-hover: inset 0 1px 0 rgba(250,250,250,0.15), 0 16px 40px -12px rgba(0,0,0,0.95);
  --ember-hot-rim: inset 0 0 0 1px rgba(255,122,46,0.6), 0 0 24px rgba(255,122,46,0.5);
  --ember-glow-sm: 0 0 16px rgba(255,122,46,0.35);
  --ember-glow-md: 0 0 28px rgba(255,122,46,0.55);
  --chrome-top-soft: inset 0 1px 0 rgba(250,250,250,0.30);

  /* Type */
  --font-display: 'Orbitron', sans-serif;
  --font-body: 'Onest', sans-serif;
}

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

html, body { margin: 0; padding: 0; }

body {
  background: var(--carbon);
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }

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

/* ---------- Global helpers ---------- */
.container { max-width: 1320px; margin: 0 auto; padding: 0 48px; }

.container--narrow { max-width: 880px; margin: 0 auto; padding: 0 48px; }

.container--reading { max-width: 1120px; margin: 0 auto; padding: 0 48px; }

.eyebrow {
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ember);
  display: inline-block;
  margin: 0 0 20px;
}

.section-title {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--chrome-highlight);
  letter-spacing: 0.8px;
  line-height: 1.05;
  margin: 0 0 24px;
}

.section-lede {
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.6;
  color: var(--chrome-dim);
  max-width: 640px;
  margin: 0 0 48px;
}

/* Ember seam glow between panels */
.seam {
  position: relative;
  height: 1px;
  background: var(--ember);
  opacity: 0.65;
  box-shadow:
    0 0 24px rgba(255,122,46,0.55),
    0 12px 40px -8px rgba(255,122,46,0.35);
}

/* Hull-plate imagery — Variant F horizontal, Variant G vertical */
.hull-plate-f {
  background-color: var(--carbon);
  background-image:
    linear-gradient(180deg, rgba(6,6,6,0.72) 0%, rgba(6,6,6,0.72) 100%),
    linear-gradient(
      180deg,
      #0B0B0B 0%,
      #0F0F0F 48%,
      rgba(255,122,46,0.7) 49.6%,
      rgba(255,179,71,0.9) 50%,
      rgba(255,122,46,0.7) 50.4%,
      #0F0F0F 52%,
      #0A0A0A 100%
    );
}

.hull-plate-g {
  background-color: var(--carbon);
  background-image:
    linear-gradient(90deg, rgba(6,6,6,0.72) 0%, rgba(6,6,6,0.72) 100%),
    linear-gradient(
      90deg,
      #0B0B0B 0%,
      #0F0F0F 48%,
      rgba(255,122,46,0.7) 49.6%,
      rgba(255,179,71,0.9) 50%,
      rgba(255,122,46,0.7) 50.4%,
      #0F0F0F 52%,
      #0A0A0A 100%
    );
}

/* ---------- CTAs ---------- */
.cta-primary {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 16px 28px;
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--on-primary-fixed);
  background: linear-gradient(180deg, var(--ember-glow) 0%, var(--ember) 50%, var(--ember-deep) 100%);
  border: 0;
  cursor: pointer;
  box-shadow: var(--ember-glow-sm), inset 0 1px 0 rgba(255,255,255,0.25);
  transition: box-shadow 180ms ease, transform 180ms ease;
}

.cta-primary:hover { box-shadow: var(--ember-glow-md), inset 0 1px 0 rgba(255,255,255,0.30); }

.cta-primary .arrow { font-size: 16px; margin-left: 2px; }

.cta-ghost {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 15px 26px;
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--chrome-warm);
  background: transparent;
  border: 1px solid rgba(62,62,62,0.7);
  cursor: pointer;
  transition: background 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}

.cta-ghost:hover {
  background: var(--hull-panel-lift);
  border-color: rgba(255,122,46,0.55);
  box-shadow: var(--chrome-top-soft);
}

/* ============================================================
   SECTION 1 — SITE NAV
============================================================ */
.site-nav {
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgba(6,6,6,0.85);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(46,46,46,0.6);
  box-shadow: inset 0 1px 0 rgba(250,250,250,0.06);
}

.site-nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 22px 48px;
  max-width: 1440px;
  margin: 0 auto;
}

.site-nav__brand {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.24em;
  color: var(--chrome-highlight);
  text-transform: uppercase;
}

.site-nav__brand-mark { color: var(--ember); }

.site-nav__links {
  display: flex;
  gap: 42px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.site-nav__link {
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--chrome-dim);
  padding: 8px 2px;
  border-bottom: 1px solid transparent;
  transition: color 160ms ease, border-color 160ms ease;
}

.site-nav__link:hover { color: var(--chrome-warm); }

.site-nav__link--active {
  color: var(--chrome-highlight);
  border-bottom-color: var(--ember);
}

.site-nav__utility {
  display: flex;
  align-items: center;
  gap: 24px;
  font-family: var(--font-display);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--chrome-dim);
}

.site-nav__cart {
  color: var(--chrome-warm);
  padding: 6px 12px;
  border: 1px solid rgba(62,62,62,0.7);
}

/* ============================================================
   SECTION 2 — HERO
============================================================ */
.hero {
  position: relative;
  min-height: 620px;
  background:
    linear-gradient(180deg, rgba(6,6,6,0.62) 0%, rgba(20,15,10,0.72) 62%, rgba(6,6,6,0.88) 100%),
    url('https://portal.britishactionacademy.com/assets/images/public/SaberMasterclass2026Dark.jpg') center/cover no-repeat,
    var(--carbon);
  overflow: hidden;
}

.hero::before {
  content: '';
  position: absolute;
  top: -140px;
  left: -140px;
  width: 520px;
  height: 520px;
  background: radial-gradient(circle at center, rgba(255,179,71,0.35) 0%, rgba(255,122,46,0.18) 30%, transparent 70%);
  filter: blur(20px);
  pointer-events: none;
}

.hero::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 120px;
  background: linear-gradient(180deg, transparent 0%, rgba(255,122,46,0.14) 60%, rgba(255,122,46,0.32) 100%);
  pointer-events: none;
}

.hero__inner {
  position: relative;
  z-index: 2;
  padding: 60px 48px 88px;
  max-width: 1320px;
  margin: 0 auto;
}

.hero__breadcrumb {
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--chrome-dim);
  margin-bottom: 60px;
}

.hero__breadcrumb .sep { color: var(--hull-edge); margin: 0 12px; }

.hero__breadcrumb .current { color: var(--chrome-warm); }

.hero__eyebrow {
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--ember);
  margin-bottom: 24px;
  display: flex;
  align-items: center;
  gap: 12px;
}

.hero__eyebrow::before {
  content: '';
  width: 42px;
  height: 1px;
  background: var(--ember);
  box-shadow: 0 0 8px rgba(255,122,46,0.6);
}

.hero__title {
  font-family: var(--font-display);
  font-size: 72px;
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: 0.8px;
  color: var(--chrome-highlight);
  margin: 0 0 28px;
  max-width: 900px;
}

.hero__sub {
  font-family: var(--font-body);
  font-size: 19px;
  line-height: 1.55;
  color: var(--chrome-warm);
  max-width: 680px;
  margin: 0 0 44px;
}

.hero__cta-row {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  align-items: center;
}

.hero__partner-mark {
  margin-top: 68px;
  padding-top: 24px;
  border-top: 1px solid rgba(46,46,46,0.5);
  display: flex;
  gap: 40px;
  font-family: var(--font-display);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--chrome-dim);
}

.hero__partner-mark strong { color: var(--chrome-warm); font-weight: 600; }

/* ============================================================
   SECTION 3 — THEIR STORY
============================================================ */
.their-story {
  background: var(--carbon);
  padding: 120px 0 128px;
  position: relative;
}

.their-story__grid {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 80px;
  align-items: start;
}

.their-story__body {
  max-width: 640px;
}

.their-story__body p {
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.7;
  color: var(--chrome-warm);
  margin: 0 0 22px;
}

.their-story__body p:first-of-type::first-letter {
  font-family: var(--font-display);
  font-size: 68px;
  font-weight: 700;
  color: var(--ember);
  float: left;
  line-height: 0.9;
  margin: 6px 14px 0 0;
}

.pullquote {
  background: var(--charcoal-warm);
  padding: 44px 40px 40px;
  position: relative;
  box-shadow: var(--panel-lift);
  border-left: 1px solid rgba(255,122,46,0.5);
}

.pullquote::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: rgba(250,250,250,0.10);
}

.pullquote__glyph {
  font-family: var(--font-display);
  font-size: 72px;
  line-height: 0.7;
  color: var(--ember);
  margin-bottom: 12px;
  display: block;
  font-weight: 700;
}

.pullquote__text {
  font-family: var(--font-display);
  font-size: 24px;
  font-style: italic;
  font-weight: 500;
  line-height: 1.4;
  color: var(--chrome-highlight);
  margin: 0 0 28px;
}

.pullquote__attr {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--chrome-dim);
}

.pullquote__attr span { color: var(--ember); margin: 0 8px; }

/* ============================================================
   SECTION 4 — ANDREAS
============================================================ */
.andreas {
  position: relative;
  padding: 128px 0 128px;
  overflow: hidden;
}

.andreas__pattern {
  position: absolute;
  inset: 0;
  background-color: var(--void);
  background-image:
    linear-gradient(90deg, rgba(10,10,10,0.68) 0%, rgba(10,10,10,0.68) 100%),
    linear-gradient(
      90deg,
      #0B0B0B 0%,
      #0F0F0F 48%,
      rgba(255,122,46,0.65) 49.6%,
      rgba(255,179,71,0.85) 50%,
      rgba(255,122,46,0.65) 50.4%,
      #0F0F0F 52%,
      #0A0A0A 100%
    );
}

.andreas__inner {
  position: relative;
  z-index: 2;
  max-width: 960px;
  margin: 0 auto;
  padding: 0 48px;
  text-align: center;
}

.andreas__eyebrow {
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--ember);
  margin-bottom: 28px;
  display: inline-flex;
  align-items: center;
  gap: 12px;
}

.andreas__eyebrow::before, .andreas__eyebrow::after {
  content: '';
  width: 36px;
  height: 1px;
  background: var(--ember);
  box-shadow: 0 0 8px rgba(255,122,46,0.6);
}

.andreas__title {
  font-family: var(--font-display);
  font-size: 68px;
  font-weight: 700;
  color: var(--chrome-highlight);
  letter-spacing: 0.8px;
  margin: 0 0 20px;
}

.andreas__sub {
  font-family: var(--font-body);
  font-size: 19px;
  line-height: 1.5;
  color: var(--chrome-warm);
  letter-spacing: 0.02em;
  margin: 0 auto 56px;
  max-width: 780px;
}

.andreas__sub strong { color: var(--ember); font-weight: 600; }

.andreas__body {
  max-width: 720px;
  margin: 0 auto;
  text-align: left;
}

.andreas__body p {
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.75;
  color: var(--chrome-warm);
  margin: 0 0 24px;
}

.andreas__quote {
  font-family: var(--font-display);
  font-size: 22px;
  font-style: italic;
  font-weight: 500;
  line-height: 1.4;
  color: var(--chrome-highlight);
  text-align: center;
  margin: 44px 0 56px;
  padding: 0 40px;
}

.andreas__chips {
  display: flex;
  justify-content: center;
  gap: 0;
  flex-wrap: wrap;
  margin-top: 52px;
  border-top: 1px solid rgba(255,122,46,0.35);
  border-bottom: 1px solid rgba(255,122,46,0.35);
  padding: 22px 0;
}

.andreas__chip {
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--chrome-warm);
  padding: 6px 28px;
  border-right: 1px solid rgba(255,122,46,0.35);
}

.andreas__chip:last-child { border-right: 0; }

.andreas__chip strong { color: var(--ember); font-weight: 700; }

/* ============================================================
   SECTION 5 — SABER MASTERCLASS BAND
============================================================ */
.masterclass {
  position: relative;
  background: var(--charcoal-warm);
  padding: 112px 0 120px;
  overflow: hidden;
}

.masterclass::before, .masterclass::after {
  content: '';
  position: absolute;
  left: 0; right: 0;
  height: 1px;
  background: var(--ember);
  opacity: 0.55;
  box-shadow: 0 0 24px rgba(255,122,46,0.45);
}

.masterclass::before { top: 0; }

.masterclass::after { bottom: 0; }

.masterclass__bloom {
  position: absolute;
  top: -180px;
  right: -180px;
  width: 620px;
  height: 620px;
  background: radial-gradient(circle at center, rgba(255,179,71,0.16) 0%, rgba(255,122,46,0.08) 40%, transparent 72%);
  pointer-events: none;
  filter: blur(18px);
}

.masterclass__inner { position: relative; z-index: 2; }

.masterclass__badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 16px;
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ember);
  border: 1px solid rgba(255,122,46,0.55);
  margin-bottom: 40px;
}

.masterclass__badge::before {
  content: '';
  width: 6px;
  height: 6px;
  background: var(--ember);
  box-shadow: 0 0 8px rgba(255,122,46,0.8);
}

.masterclass__grid {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 72px;
  align-items: center;
}

.masterclass__eyebrow {
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ember);
  margin-bottom: 20px;
}

.masterclass__title {
  font-family: var(--font-display);
  font-size: 60px;
  font-weight: 700;
  color: var(--chrome-highlight);
  line-height: 1.02;
  letter-spacing: 0.8px;
  margin: 0 0 24px;
}

.masterclass__title span { color: var(--ember); }

.masterclass__lede {
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.65;
  color: var(--chrome-warm);
  margin: 0 0 40px;
  max-width: 560px;
}

.masterclass__details {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  border-top: 1px solid rgba(255,122,46,0.35);
  border-bottom: 1px solid rgba(255,122,46,0.35);
  margin-bottom: 36px;
}

.masterclass__detail {
  padding: 22px 24px 20px;
  border-right: 1px solid rgba(255,122,46,0.28);
  border-bottom: 1px solid rgba(255,122,46,0.28);
}

.masterclass__detail:nth-child(2n) { border-right: 0; }

.masterclass__detail:nth-last-child(-n+2) { border-bottom: 0; }

.masterclass__detail-label {
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--chrome-dim);
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.masterclass__detail-label::before {
  content: '';
  width: 6px;
  height: 6px;
  background: var(--ember);
}

.masterclass__detail-value {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 600;
  color: var(--chrome-highlight);
}

.masterclass__detail-value .strike {
  color: var(--chrome-dim);
  text-decoration: line-through;
  font-size: 16px;
  font-weight: 400;
  margin-left: 8px;
}

.masterclass__detail-value .save {
  display: block;
  font-family: var(--font-display);
  font-size: 11px;
  color: var(--ember);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin-top: 4px;
  font-weight: 500;
}

.masterclass__detail-value .price { color: var(--ember); }

.masterclass__included {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 40px;
}

.masterclass__include-chip {
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--chrome-warm);
  padding: 8px 14px;
  border: 1px solid rgba(255,122,46,0.4);
  background: rgba(20,20,20,0.5);
}

.masterclass__cta-row {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 36px;
}

.masterclass__quote {
  font-family: var(--font-display);
  font-size: 20px;
  font-style: italic;
  font-weight: 500;
  line-height: 1.5;
  color: var(--chrome-highlight);
  padding-left: 24px;
  border-left: 2px solid var(--ember);
  max-width: 560px;
}

.masterclass__quote-attr {
  display: block;
  margin-top: 14px;
  font-family: var(--font-display);
  font-size: 11px;
  font-style: normal;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--chrome-dim);
}

.masterclass__quote-attr::before {
  content: '— ';
  color: var(--ember);
}

.masterclass__media {
  position: relative;
  aspect-ratio: 4/5;
  background:
    linear-gradient(180deg, rgba(6,6,6,0.35) 0%, rgba(6,6,6,0.65) 100%),
    url('https://portal.britishactionacademy.com/assets/images/public/SaberMasterclass2026Light.png') center/cover no-repeat,
    url('https://portal.britishactionacademy.com/assets/images/public/SaberMasterclass2026Dark.jpg') center/cover no-repeat,
    var(--void);
  box-shadow: var(--panel-lift), 0 0 40px rgba(255,122,46,0.18);
  outline: 1px solid rgba(255,122,46,0.35);
  outline-offset: -1px;
}

.masterclass__media::before {
  content: '';
  position: absolute;
  inset: 0;
  box-shadow: inset 0 1px 0 rgba(250,250,250,0.35);
  pointer-events: none;
}

.masterclass__media-tag {
  position: absolute;
  top: 20px;
  left: 20px;
  padding: 6px 12px;
  font-family: var(--font-display);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--chrome-highlight);
  background: rgba(6,6,6,0.75);
  border-left: 2px solid var(--ember);
}

.masterclass__media-caption {
  position: absolute;
  left: 20px;
  right: 20px;
  bottom: 20px;
  font-family: var(--font-display);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--chrome-dim);
}

.masterclass__media-caption strong { color: var(--chrome-warm); font-weight: 600; }

/* ============================================================
   SECTION 6 — FULL CATALOGUE (5 CARDS)
============================================================ */
.catalogue {
  background: var(--carbon);
  padding: 128px 0 128px;
}

.catalogue__head {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 60px;
  align-items: end;
  margin-bottom: 72px;
}

.catalogue__title { font-size: 60px; letter-spacing: 0.8px; }

.catalogue__lede { margin-bottom: 12px; max-width: 480px; }

.catalogue__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.programme-card {
  background: var(--hull-panel);
  padding: 40px 36px 36px;
  box-shadow: var(--panel-lift);
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 380px;
  transition: box-shadow 220ms ease, transform 220ms ease;
}

.programme-card:hover {
  box-shadow: var(--panel-lift-hover), 0 0 32px rgba(255,122,46,0.14);
  transform: translateY(-2px);
}

.programme-card__glyph {
  width: 48px;
  height: 48px;
  border: 1px solid var(--ember);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 28px;
  color: var(--ember);
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 500;
  box-shadow: inset 0 1px 0 rgba(250,250,250,0.18), 0 0 12px rgba(255,122,46,0.28);
}

.programme-card__title {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 700;
  color: var(--chrome-highlight);
  letter-spacing: 0.8px;
  margin: 0 0 14px;
  line-height: 1.15;
}

.programme-card__desc {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  color: var(--chrome-warm);
  margin: 0 0 24px;
  flex-grow: 1;
}

.programme-card__chips {
  display: flex;
  gap: 8px;
  margin-bottom: 22px;
  flex-wrap: wrap;
}

.programme-card__chip {
  font-family: var(--font-display);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ember);
  padding: 5px 10px;
  border: 1px solid rgba(255,122,46,0.4);
}

.programme-card__cta {
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--chrome-warm);
  padding-top: 20px;
  border-top: 1px solid rgba(46,46,46,0.7);
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: color 160ms ease, border-color 160ms ease;
}

.programme-card__cta::after { content: '→'; color: var(--ember); font-size: 16px; }

.programme-card:hover .programme-card__cta { color: var(--chrome-highlight); border-top-color: rgba(255,122,46,0.5); }

/* Fifth card spans two columns with the fourth card, centred on bottom row */
.programme-card--wide { grid-column: span 1; }

.catalogue__grid > .programme-card:nth-child(4) { grid-column: 1 / span 1; }

.catalogue__grid > .programme-card:nth-child(4) { }

/* ============================================================
   SECTION 7 — CAREER PATHWAY
============================================================ */
.pathway {
  position: relative;
  padding: 128px 0 128px;
  overflow: hidden;
}

.pathway__pattern {
  position: absolute;
  inset: 0;
  background-color: var(--void);
  background-image:
    linear-gradient(90deg, rgba(10,10,10,0.7) 0%, rgba(10,10,10,0.7) 100%),
    linear-gradient(
      90deg,
      #0B0B0B 0%,
      #0F0F0F 48%,
      rgba(255,122,46,0.65) 49.6%,
      rgba(255,179,71,0.85) 50%,
      rgba(255,122,46,0.65) 50.4%,
      #0F0F0F 52%,
      #0A0A0A 100%
    );
}

.pathway__inner { position: relative; z-index: 2; }

.pathway__head { margin-bottom: 76px; max-width: 780px; }

.pathway__title { font-size: 52px; letter-spacing: 0.8px; }

.pathway__stages {
  display: grid;
  gap: 4px;
  position: relative;
}

.stage {
  display: grid;
  grid-template-columns: 120px 1fr 220px;
  gap: 48px;
  padding: 36px 32px;
  background: rgba(20,20,20,0.94);
  backdrop-filter: blur(3px);
  align-items: center;
  box-shadow: var(--panel-lift);
  position: relative;
  transition: box-shadow 220ms ease;
}

.stage:hover { box-shadow: var(--panel-lift-hover), inset 0 0 0 1px rgba(255,122,46,0.35); }

.stage__marker {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.stage__marker-num {
  width: 68px;
  height: 68px;
  border: 1px solid var(--ember);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 700;
  color: var(--ember);
  background: rgba(6,6,6,0.7);
  box-shadow: inset 0 1px 0 rgba(250,250,250,0.15), 0 0 20px rgba(255,122,46,0.35);
}

.stage__marker-phase {
  font-family: var(--font-display);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--chrome-dim);
}

.stage__body { }

.stage__label {
  font-family: var(--font-display);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--ember);
  margin-bottom: 8px;
  display: block;
}

.stage__title {
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 700;
  color: var(--chrome-highlight);
  margin: 0 0 8px;
  letter-spacing: 0.8px;
}

.stage__desc {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  color: var(--chrome-warm);
  margin: 0;
  max-width: 520px;
}

.stage__meta {
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--chrome-dim);
  text-align: right;
}

.stage__meta strong {
  display: block;
  font-size: 13px;
  color: var(--chrome-warm);
  margin-bottom: 6px;
  font-weight: 600;
}

.stage--final .stage__marker-num {
  background: linear-gradient(180deg, var(--ember-glow) 0%, var(--ember) 60%, var(--ember-deep) 100%);
  color: var(--on-primary-fixed);
  box-shadow: 0 0 32px rgba(255,122,46,0.55), inset 0 1px 0 rgba(255,255,255,0.35);
}

.stage--final .stage__title { color: var(--chrome-highlight); letter-spacing: 0.8px; }

.stage--final { box-shadow: var(--panel-lift), inset 0 0 0 1px rgba(255,122,46,0.45); }

/* connector lines between stages */
.stage:not(:last-child)::after {
  content: '';
  position: absolute;
  left: 65px;
  bottom: -4px;
  width: 2px;
  height: 8px;
  background: rgba(255,122,46,0.6);
  box-shadow: 0 0 6px rgba(255,122,46,0.55);
}

/* ============================================================
   SECTION 8 — TESTIMONIALS
============================================================ */
.testimonials {
  background: var(--carbon);
  padding: 128px 0 128px;
}

.testimonials__head { margin-bottom: 72px; max-width: 780px; }

.testimonials__title { font-size: 52px; letter-spacing: 0.8px; }

.testimonials__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
}

.testimonial-card {
  background: var(--hull-panel);
  padding: 44px 44px 40px;
  box-shadow: var(--panel-lift);
  position: relative;
}

.testimonial-card__head {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-bottom: 32px;
}

.testimonial-card__portrait {
  width: 88px;
  height: 88px;
  border-radius: 50%;
  overflow: hidden;
  outline: 1px solid rgba(255,122,46,0.55);
  outline-offset: 3px;
  background: var(--hull-panel-dark);
  flex-shrink: 0;
  box-shadow: 0 0 20px rgba(255,122,46,0.25);
}

.testimonial-card__portrait img { width: 100%; height: 100%; object-fit: cover; }

.testimonial-card__name-block { }

.testimonial-card__name {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 700;
  color: var(--chrome-highlight);
  margin: 0 0 6px;
  letter-spacing: -0.005em;
}

.testimonial-card__role {
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--chrome-dim);
}

.testimonial-card__glyph {
  font-family: var(--font-display);
  font-size: 56px;
  color: var(--ember);
  line-height: 0.4;
  margin-bottom: 8px;
  display: block;
  font-weight: 700;
}

.testimonial-card__quote {
  font-family: var(--font-display);
  font-size: 20px;
  font-style: italic;
  font-weight: 500;
  line-height: 1.5;
  color: var(--chrome-highlight);
  margin: 0 0 28px;
}

.testimonial-card__meta {
  padding-top: 20px;
  border-top: 1px solid rgba(46,46,46,0.6);
  display: flex;
  justify-content: space-between;
  font-family: var(--font-display);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--chrome-dim);
}

.testimonial-card__meta strong { color: var(--ember); font-weight: 600; }

/* ============================================================
   SECTION 9 — VENUE
============================================================ */
.venue {
  background: var(--carbon);
  padding: 96px 0 96px;
  border-top: 1px solid rgba(255,122,46,0.32);
  box-shadow: inset 0 1px 0 rgba(250,250,250,0.06), 0 -12px 32px -12px rgba(255,122,46,0.18);
}

.venue__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: start;
}

.venue__col { }

.venue__eyebrow {
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ember);
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 12px;
}

.venue__eyebrow::before {
  content: '';
  width: 28px;
  height: 1px;
  background: var(--ember);
}

.venue__primary {
  font-family: var(--font-display);
  font-size: 32px;
  font-weight: 700;
  color: var(--chrome-highlight);
  margin: 0 0 14px;
  letter-spacing: -0.01em;
}

.venue__sub {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.65;
  color: var(--chrome-warm);
  margin: 0;
  max-width: 520px;
}

.venue__sub strong { color: var(--chrome-highlight); font-weight: 600; }

.venue__contact {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid rgba(46,46,46,0.5);
  font-family: var(--font-display);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--chrome-dim);
  display: flex;
  gap: 32px;
  flex-wrap: wrap;
}

.venue__contact span { color: var(--chrome-warm); }

/* ============================================================
   SECTION 10 — CROSS-SELL
============================================================ */
.crosssell {
  position: relative;
  background: var(--charcoal-warm);
  padding: 112px 0 120px;
  overflow: hidden;
}

.crosssell::before, .crosssell::after {
  content: '';
  position: absolute;
  left: 0; right: 0;
  height: 1px;
  background: var(--ember);
  opacity: 0.55;
  box-shadow: 0 0 24px rgba(255,122,46,0.45);
}

.crosssell::before { top: 0; }

.crosssell::after { bottom: 0; }

.crosssell__bloom {
  position: absolute;
  bottom: -180px;
  left: -180px;
  width: 620px;
  height: 620px;
  background: radial-gradient(circle at center, rgba(255,179,71,0.16) 0%, rgba(255,122,46,0.08) 40%, transparent 72%);
  pointer-events: none;
  filter: blur(18px);
}

.crosssell__inner { position: relative; z-index: 2; }

.crosssell__badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 16px;
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ember);
  border: 1px solid rgba(255,122,46,0.55);
  margin-bottom: 40px;
}

.crosssell__badge::before {
  content: '';
  width: 6px;
  height: 6px;
  background: var(--ember);
  box-shadow: 0 0 8px rgba(255,122,46,0.8);
}

.crosssell__grid {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 72px;
  align-items: center;
}

.crosssell__eyebrow {
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ember);
  margin-bottom: 20px;
}

.crosssell__title {
  font-family: var(--font-display);
  font-size: 54px;
  font-weight: 700;
  color: var(--chrome-highlight);
  line-height: 1.05;
  letter-spacing: 0.8px;
  margin: 0 0 24px;
}

.crosssell__lede {
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.65;
  color: var(--chrome-warm);
  margin: 0 0 36px;
  max-width: 560px;
}

.crosssell__stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border-top: 1px solid rgba(255,122,46,0.35);
  border-bottom: 1px solid rgba(255,122,46,0.35);
  padding: 22px 0;
  margin-bottom: 40px;
}

.crosssell__stat {
  padding: 0 20px;
  border-right: 1px solid rgba(255,122,46,0.28);
}

.crosssell__stat:first-child { padding-left: 0; }

.crosssell__stat:last-child { border-right: 0; }

.crosssell__stat-num {
  font-family: var(--font-display);
  font-size: 32px;
  font-weight: 700;
  color: var(--ember);
  line-height: 1;
  margin-bottom: 8px;
  letter-spacing: -0.01em;
}

.crosssell__stat-label {
  font-family: var(--font-display);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--chrome-dim);
  line-height: 1.4;
}

.crosssell__cta-row {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}

.crosssell__media {
  aspect-ratio: 1/1;
  background:
    linear-gradient(180deg, rgba(6,6,6,0.15) 0%, rgba(6,6,6,0.55) 100%),
    url('https://artsabers.com/wp-content/uploads/sites/10/2025/03/The-Fighter-Black-Lightsaber-Xenopixel-V3-600x600.jpg') center/cover no-repeat,
    var(--hull-panel-dark);
  box-shadow: var(--panel-lift), 0 0 40px rgba(255,122,46,0.2);
  outline: 1px solid rgba(255,122,46,0.35);
  outline-offset: -1px;
  position: relative;
}

.crosssell__media::before {
  content: '';
  position: absolute;
  inset: 0;
  box-shadow: inset 0 1px 0 rgba(250,250,250,0.35);
}

.crosssell__media-tag {
  position: absolute;
  top: 20px;
  right: 20px;
  padding: 6px 12px;
  font-family: var(--font-display);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--chrome-highlight);
  background: rgba(6,6,6,0.75);
  border-left: 2px solid var(--ember);
}

.crosssell__media-caption {
  position: absolute;
  left: 20px;
  right: 20px;
  bottom: 20px;
  font-family: var(--font-display);
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--chrome-warm);
}

.crosssell__media-caption span {
  color: var(--ember);
  display: block;
  margin-top: 4px;
  font-size: 11px;
  letter-spacing: 0.24em;
}

/* ============================================================
   SECTION 11 — SOCIAL
============================================================ */
.social {
  background: var(--carbon);
  padding: 72px 0 72px;
  border-top: 1px solid rgba(255,122,46,0.3);
  box-shadow: inset 0 1px 0 rgba(250,250,250,0.06);
}

.social__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 32px;
  flex-wrap: wrap;
  gap: 20px;
}

.social__title {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 600;
  color: var(--chrome-highlight);
  margin: 0;
  letter-spacing: 0.8px;
}

.social__title span { color: var(--ember); }

.social__eyebrow {
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ember);
}

.social__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

.social__chip {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px 24px;
  border: 1px solid rgba(255,122,46,0.35);
  background: rgba(20,20,20,0.6);
  transition: background 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}

.social__chip:hover {
  background: rgba(20,20,20,0.9);
  border-color: rgba(255,122,46,0.7);
  box-shadow: 0 0 24px rgba(255,122,46,0.2);
}

.social__logo {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255,122,46,0.5);
  color: var(--ember);
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 700;
  flex-shrink: 0;
  box-shadow: 0 0 12px rgba(255,122,46,0.25);
}

.social__platform {
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--chrome-dim);
  margin-bottom: 4px;
}

.social__handle {
  font-family: var(--font-display);
  font-size: 14px;
  color: var(--chrome-warm);
  font-weight: 500;
}

/* ============================================================
   SECTION 12 — OTHER PARTNERS
============================================================ */
.other-partners {
  background: var(--carbon);
  padding: 68px 0 68px;
  border-top: 1px solid rgba(255,122,46,0.3);
  box-shadow: inset 0 1px 0 rgba(250,250,250,0.06);
  text-align: center;
}

.other-partners__eyebrow {
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--ember);
  margin-bottom: 18px;
}

.other-partners__text {
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.55;
  color: var(--chrome-warm);
  margin: 0 auto 24px;
  max-width: 640px;
}

.other-partners__cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 24px;
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--chrome-warm);
  border: 1px solid rgba(255,122,46,0.5);
  transition: background 160ms ease, box-shadow 160ms ease;
}

.other-partners__cta::before { content: '←'; color: var(--ember); font-size: 16px; }

.other-partners__cta:hover { background: rgba(255,122,46,0.08); box-shadow: 0 0 20px rgba(255,122,46,0.2); }

/* ============================================================
   SECTION 13 — NEWSLETTER CAPTURE
============================================================ */
.capture {
  background: linear-gradient(180deg, var(--ember-glow) 0%, var(--ember) 50%, var(--ember-forge) 100%);
  padding: 108px 0 112px;
  position: relative;
  overflow: hidden;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.35), inset 0 -1px 0 rgba(90,26,0,0.4);
}

.capture::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: var(--ember);
  box-shadow: 0 0 40px rgba(255,122,46,0.8);
}

.capture__input::placeholder { color: rgba(42,8,0,0.55); }

.capture__input:focus {
  border-bottom-color: var(--on-primary-fixed);
  box-shadow: 0 4px 12px -4px rgba(42,8,0,0.35);
}

.capture__submit:hover { background: var(--on-primary-fixed); color: var(--ember-glow); }

/* ============================================================
   SECTION 14 — FOOTER
============================================================ */
.footer {
  background: var(--carbon);
  padding: 96px 0 48px;
  border-top: 1px solid rgba(255,122,46,0.5);
  box-shadow: 0 -20px 40px -20px rgba(255,122,46,0.35), inset 0 1px 0 rgba(250,250,250,0.06);
  position: relative;
}

.footer__grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr 1fr;
  gap: 48px;
  margin-bottom: 72px;
}

.footer__brand-mark {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: 0.22em;
  color: var(--chrome-highlight);
  margin-bottom: 16px;
  text-transform: uppercase;
}

.footer__brand-mark span { color: var(--ember); }

.footer__tag {
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.6;
  color: var(--chrome-dim);
  margin: 0 0 20px;
  max-width: 320px;
}

.footer__meta {
  font-family: var(--font-display);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--chrome-dim);
}

.footer__meta span { color: var(--ember); }

.footer__col-title {
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: var(--chrome-warm);
  margin: 0 0 20px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(46,46,46,0.6);
}

.footer__links {
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer__links li { margin-bottom: 12px; }

.footer__link {
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--chrome-dim);
  transition: color 160ms ease;
}

.footer__link:hover { color: var(--chrome-warm); }

.footer__bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 32px;
  border-top: 1px solid rgba(46,46,46,0.6);
  font-family: var(--font-display);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--chrome-dim);
  flex-wrap: wrap;
  gap: 20px;
}

.footer__bottom a { color: var(--chrome-warm); }

/* ============================================================
   RESPONSIVE
============================================================ */
@media (max-width: 900px) {
  .container, .container--reading, .hero__inner { padding: 0 24px; }
  .site-nav__inner { padding: 18px 24px; }
  .site-nav__links { display: none; }
  .site-nav__utility { gap: 12px; }

  .hero { min-height: 540px; }
  .hero__title { font-size: 44px; letter-spacing: 0.8px; }
  .hero__sub { font-size: 17px; }
  .hero__partner-mark { flex-direction: column; gap: 16px; }

  .their-story__grid,
  .masterclass__grid,
  .catalogue__head,
  .venue__grid,
  .crosssell__grid,
  .footer__grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .catalogue__grid { grid-template-columns: 1fr; }
  .testimonials__grid { grid-template-columns: 1fr; }
  .social__grid { grid-template-columns: 1fr 1fr; }

  .section-title, .catalogue__title { font-size: 40px !important; letter-spacing: 0.8px; }
  .masterclass__title, .crosssell__title { font-size: 40px !important; letter-spacing: 0.8px; }
  .andreas__title { font-size: 44px; letter-spacing: 0.8px; }
  .capture__title { font-size: 36px; letter-spacing: 0.8px; }

  .stage { grid-template-columns: 1fr; gap: 20px; padding: 28px 22px; text-align: left; }
  .stage__marker { flex-direction: row; }
  .stage__meta { text-align: left; }

  .andreas__chips { flex-direction: column; padding: 20px 0; }
  .andreas__chip { border-right: 0; border-bottom: 1px solid rgba(255,122,46,0.25); padding: 10px 0; }
  .andreas__chip:last-child { border-bottom: 0; }

  .masterclass__details { grid-template-columns: 1fr; }
  .masterclass__detail { border-right: 0; }
  .masterclass__detail:nth-last-child(-n+2) { border-bottom: 1px solid rgba(255,122,46,0.28); }
  .masterclass__detail:last-child { border-bottom: 0; }

  .capture__form { flex-direction: column; }
}

/* orbitron-retrofit: title-em italic kill */
[class*="__title"] em, [class*="__title"] i,
[class*="-title"] em, [class*="-title"] i,
[class*="__heading"] em, [class*="__heading"] i,
[class*="-heading"] em, [class*="-heading"] i { font-style: normal; }

/* -- Reconciled from family 14002 canonical 12840:tf-newsletter-signup -- */
.container { width: 100%; max-width: 1440px; margin: 0 auto; padding: 0 48px; }

/* =========================================================
   CAPTURE BAND — full orange ombre (biggest ember moment)
   ========================================================= */
.capture {
  position: relative;
  background: linear-gradient(180deg, var(--ember-glow) 0%, var(--ember-bright) 25%, var(--ember) 55%, var(--ember-forge) 100%);
  padding: 140px 0;
  box-shadow:
    inset 0 2px 0 rgba(255,235,180,0.55),
    inset 0 -1px 0 rgba(90,26,0,0.55),
    0 -12px 40px -8px rgba(255,122,46,0.55);
  overflow: hidden;
}

.capture::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 20% 30%, rgba(255,235,180,0.35) 0%, rgba(255,235,180,0) 55%),
    radial-gradient(ellipse at 80% 70%, rgba(209,72,16,0.35) 0%, rgba(209,72,16,0) 60%);
  pointer-events: none;
}

.capture__inner {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
  z-index: 2;
}

.capture__copy { max-width: 620px; }

.capture__eyebrow {
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--on-primary-fixed);
  opacity: 0.72;
  margin-bottom: 20px;
}

.capture__title {
  font-family: var(--font-display);
  font-size: clamp(48px, 5.5vw, 78px);
  font-weight: 700;
  line-height: 0.95;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: var(--on-primary-fixed);
  margin-bottom: 24px;
}

.capture__sub {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 500;
  line-height: 1.4;
  color: var(--on-primary-fixed);
  opacity: 0.86;
  max-width: 520px;
}

.capture__form {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 44px;
  background: rgba(20,20,20,0.94);
  box-shadow:
    inset 0 1px 0 rgba(250,250,250,0.2),
    0 30px 60px -20px rgba(0,0,0,0.7);
}

.capture__form-lbl {
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--ember-glow);
}

.capture__form-input {
  background: transparent;
  border: 0;
  border-bottom: 1px solid rgba(184,176,166,0.35);
  padding: 14px 0;
  font-family: var(--font-body);
  font-size: 17px;
  color: var(--chrome-warm);
  outline: none;
  transition: border-color 200ms ease, box-shadow 200ms ease;
  width: 100%;
}

.capture__form-input::placeholder { color: var(--chrome-dim); opacity: 0.7; }

.capture__form-input:focus {
  border-bottom-color: var(--ember);
  box-shadow: 0 2px 12px -2px rgba(255,122,46,0.4);
}

.capture__form-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 20px 30px;
  background: linear-gradient(180deg, var(--ember-glow) 0%, var(--ember) 50%, var(--ember-deep) 100%);
  color: var(--on-primary-fixed);
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  box-shadow: var(--ember-glow-sm);
  transition: box-shadow 200ms ease;
  margin-top: 8px;
}

.capture__form-cta:hover { box-shadow: var(--ember-glow-md); }

.capture__form-fine {
  font-family: var(--font-body);
  font-size: 12px;
  color: var(--chrome-dim);
  line-height: 1.5;
}

@media (max-width: 640px) {
  .container { padding: 0 24px; }
  .promo-bar__inner { gap: 16px; font-size: 10px; }
  .promo-bar__item { gap: 16px; }
  .hero__telemetry-row { flex-wrap: wrap; gap: 20px; }
  .hero__tagline { display: none; }
  .trust-bar__row { grid-template-columns: 1fr 1fr; row-gap: 24px; }
  .trust-bar__cell { border-right: 0; padding: 4px 12px; }
  .saber-core__grid { grid-template-columns: 1fr; }
  .faction-grid { grid-template-columns: 1fr; }
  .faction-tile { height: 340px; }
  .section-head { flex-direction: column; align-items: flex-start; gap: 24px; }
  .section-head__right { text-align: left; }
  .capture { padding: 90px 0; }
  .site-footer__grid { grid-template-columns: 1fr; gap: 40px; }
  .site-footer__base { flex-direction: column; align-items: flex-start; gap: 20px; }
}
/* -- Reconciled from family 14016 canonical 13173:tf-pull-quote-1 -- */
/* -- Reconciled from family 14016 canonical 13184:tf-pull-quote-2 -- */
/* =====================================================================
   ATTRIBUTED BLOCKQUOTE — ~85% scroll
   ===================================================================== */
.article-blockquote {
  margin: 2.4em 0;
  padding: 24px 28px;
  border-left: 3px solid var(--ember);
  background: linear-gradient(90deg, rgba(255,122,46,0.08) 0%, rgba(255,122,46,0.02) 40%, transparent 100%);
  box-shadow: -8px 0 20px -12px rgba(255,122,46,0.35);
}

.article-blockquote__text {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 22px;
  line-height: 1.35;
  color: var(--chrome-highlight);
  font-style: italic;
  margin-bottom: 12px;
}

.article-blockquote__cite {
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--chrome-dim);
  font-style: normal;
  display: block;
}

.article-blockquote__cite::before {
  content: "— ";
  color: var(--ember);
  margin-right: 4px;
}
</style>
</head>

<!-- ============================================================
     SECTION 1 — SITE NAV
============================================================ -->
<body><nav class="site-nav" role="navigation">
  <div class="site-nav__inner">
    <a class="site-nav__brand" href="/">ART<span class="site-nav__brand-mark">/</span>SABERS</a>
    <ul class="site-nav__links">
      <li><a class="site-nav__link" href="/lightsabers/">Lightsabers</a></li>
      <li><a class="site-nav__link" href="/helmets/">Helmets</a></li>
      <li><a class="site-nav__link" href="/parts/">Parts & Accessories</a></li>
      <li><a class="site-nav__link site-nav__link--active" href="/events-courses/">Events & Courses</a></li>
      <li><a class="site-nav__link" href="/journal/">Journal</a></li>
      <li><a class="site-nav__link" href="/support/">Support</a></li>
    </ul>
    <div class="site-nav__utility">
      <span>USD</span>
      <a class="site-nav__cart" href="/cart/">Bag · 0</a>
    </div>
  </div>
</nav>

<!-- ============================================================
     SECTION 2 — HERO
============================================================ -->
<a id="tf-hero-editorial-1" data-tf-family="hero-editorial" style="display:contents"></a>
<header class="hero">
  <div class="hero__inner">
    <div class="hero__breadcrumb">
      <a href="/">Home</a>
      <span class="sep">/</span>
      <a href="/events-courses/">Events & Courses</a>
      <span class="sep">/</span>
      <span class="current">British Action Academy</span>
    </div>
    <div class="hero__eyebrow">Featured Partner · UK Based</div>
    <h1 class="hero__title">Where screen combat starts.</h1>
    <p class="hero__sub">The UK's leading screen action training academy. Real instructors with production credits. Real students who go on to work on set. A Saber Masterclass taught by Obi-Wan Kenobi's stunt double.</p>
    <div class="hero__cta-row">
      <a class="cta-primary" href="https://www.britishactionacademy.com/" target="_blank" rel="noopener">Explore British Action Academy <span class="arrow">→</span></a>
      <a class="cta-ghost" href="#the-masterclass">Skip to the Masterclass</a>
    </div>
    <div class="hero__partner-mark">
      <div>Founded <strong>2011</strong></div>
      <div>Based <strong>Farnborough, Hampshire</strong></div>
      <div>Filmed at <strong>Longcross South Studios</strong></div>
      <div>Certification <strong>BAA Accredited</strong></div>
    </div>
  </div>
</header>

<div class="seam"></div>

<!-- ============================================================
     SECTION 3 — THEIR STORY
============================================================ -->
<section class="their-story">
  <div class="container">
    <div class="their-story__grid">
      <div class="their-story__body">
        <span class="eyebrow">Who they are</span>
        <h2 class="section-title" style="font-size:52px;">Not a stage school.<br>A working academy.</h2>
        <p>British Action Academy runs the UK's most credible action performer training programme. Their instructors work on major film and television productions — as stunt performers, action co-ordinators, and fight arrangers — and their students routinely go on to book professional set work.</p>
        <p>The whole operation runs on the assumption that action is a real craft, learned like any other — with progression, standards, and evidence of practice. Not a hobbyist workshop. Not a weekend LARP. A working academy.</p>
        <p>They also run a casting agency, supplying trained action performers to worldwide large-scale features. Which means their instructors aren't teaching techniques from books — they're teaching what actually gets used on set this year.</p>
      </div>
      <a id="tf-pull-quote-1" data-tf-family="pull-quote" style="display:contents"></a>
<blockquote class="article-blockquote">
      <p class="article-blockquote__text">Every crystal wants something. This one wanted silence.</p>
      <cite class="article-blockquote__cite">from The Fragments of Cassian</cite>
    </blockquote>
    </div>
  </div>
</section>

<div class="seam"></div>

<!-- ============================================================
     SECTION 4 — ANDREAS (INSTRUCTOR SPOTLIGHT)
============================================================ -->
<a id="tf-other-1" data-tf-family="other" style="display:contents"></a>
<section class="andreas">
  <div class="andreas__pattern"></div>
  <div class="andreas__inner">
    <div class="andreas__eyebrow">The Instructor</div>
    <h2 class="andreas__title">Andreas Petrides.</h2>
    <p class="andreas__sub">Fight Arranger. Stunt Co-ordinator. <strong>Obi-Wan Kenobi's Stunt Double, Star Wars: Episode I.</strong></p>
    <div class="andreas__body">
      <p>Andreas Petrides has spent 30+ years working in professional stunts and screen combat. As Fight Arranger and 2nd Unit Stunt Co-ordinator on Star Wars: Episode I — The Phantom Menace, he trained the cast, choreographed the action, and doubled for Obi-Wan Kenobi in one of the most widely cited fight sequences ever put on screen.</p>
      <p>He teaches the Saber Masterclass at BAA — a one-day intensive that takes you from foundational saber technique through choreography, single and double-ended saber work, and the on-camera performance discipline that makes an action shot land.</p>
    </div>
    <a id="tf-pull-quote-2" data-tf-family="pull-quote" style="display:contents"></a>
<blockquote class="article-blockquote">
      <p class="article-blockquote__text">Every crystal wants something. This one wanted silence.</p>
      <cite class="article-blockquote__cite">from The Fragments of Cassian</cite>
    </blockquote>
    <div class="andreas__chips">
      <div class="andreas__chip"><strong>30+</strong> Years Industry</div>
      <div class="andreas__chip"><strong>Obi-Wan</strong> Stunt Double</div>
      <div class="andreas__chip"><strong>Fight Arranger</strong>, Episode I</div>
    </div>
  </div>
</section>

<div class="seam"></div>

<!-- ============================================================
     SECTION 5 — SABER MASTERCLASS BAND
============================================================ -->
<a id="tf-workshop-split-1" data-tf-family="workshop-split" style="display:contents"></a>
<section class="masterclass" id="the-masterclass">
  <div class="masterclass__bloom"></div>
  <div class="container masterclass__inner">
    <div class="masterclass__badge">The Headline Course</div>
    <div class="masterclass__grid">
      <div class="masterclass__copy">
        <div class="masterclass__eyebrow">The Saber Masterclass</div>
        <h2 class="masterclass__title">Fulfil your <span>destiny.</span></h2>
        <p class="masterclass__lede">A one-day intensive with Andreas Petrides. Professional saber combat training. Choreography learned to performance-ready. Filmed in 4K on realistic sets. The film is yours to keep.</p>

        <div class="masterclass__details">
          <div class="masterclass__detail">
            <div class="masterclass__detail-label">Format</div>
            <div class="masterclass__detail-value">1-day intensive</div>
          </div>
          <div class="masterclass__detail">
            <div class="masterclass__detail-label">Price</div>
            <div class="masterclass__detail-value">
              <span class="price">£499</span>
              <span class="strike">£599</span>
              <span class="save">£100 off currently</span>
            </div>
          </div>
          <div class="masterclass__detail">
            <div class="masterclass__detail-label">Venue</div>
            <div class="masterclass__detail-value">Longcross South Studios</div>
          </div>
          <div class="masterclass__detail">
            <div class="masterclass__detail-label">Next date</div>
            <div class="masterclass__detail-value">10 October</div>
          </div>
        </div>

        <div class="masterclass__included">
          <span class="masterclass__include-chip">Multimedia Presentation</span>
          <span class="masterclass__include-chip">Single + Double Saber</span>
          <span class="masterclass__include-chip">4K Performance Film</span>
          <span class="masterclass__include-chip">Set Photography</span>
          <span class="masterclass__include-chip">Full Debrief</span>
        </div>

        <div class="masterclass__cta-row">
          <a class="cta-primary" href="https://www.britishactionacademy.com/courses/saber-masterclass/" target="_blank" rel="noopener">Book with BAA <span class="arrow">→</span></a>
          <a class="cta-ghost" href="https://www.britishactionacademy.com/courses/saber-masterclass/" target="_blank" rel="noopener">More about the day →</a>
        </div>

        <a id="tf-pull-quote-3" data-tf-family="pull-quote" style="display:contents"></a>
<blockquote class="article-blockquote">
      <p class="article-blockquote__text">Every crystal wants something. This one wanted silence.</p>
      <cite class="article-blockquote__cite">from The Fragments of Cassian</cite>
    </blockquote>
      </div>

      <div class="masterclass__media" role="img" aria-label="Saber Masterclass hero — dramatic training studio composition">
        <div class="masterclass__media-tag">Saber Masterclass</div>
        <div class="masterclass__media-caption"><strong>Filmed in 4K</strong> · Longcross South Studios · 10 October</div>
      </div>
    </div>
  </div>
</section>

<div class="seam"></div>

<!-- ============================================================
     SECTION 6 — FULL CATALOGUE (5 CARDS)
============================================================ -->
<a id="tf-other-2" data-tf-family="other" style="display:contents"></a>
<section class="catalogue">
  <div class="container">
    <div class="catalogue__head">
      <div>
        <span class="eyebrow">The Full Catalogue</span>
        <h2 class="section-title catalogue__title">Beyond the saber.</h2>
      </div>
      <p class="section-lede catalogue__lede">Everything BAA runs — for when the Saber Masterclass is just the start.</p>
    </div>

    <div class="catalogue__grid">
      <article class="programme-card">
        <div class="programme-card__glyph">01</div>
        <h3 class="programme-card__title">Warrior Masterclass</h3>
        <p class="programme-card__desc">The flagship series. Screen combat fundamentals through advanced performance.</p>
        <div class="programme-card__chips">
          <span class="programme-card__chip">4 Phases + Cert</span>
          <span class="programme-card__chip">Series</span>
        </div>
        <a class="programme-card__cta" href="https://www.britishactionacademy.com/pages/warrior-masterclass/" target="_blank" rel="noopener"><span>See the pathway</span></a>
      </article>

      <article class="programme-card">
        <div class="programme-card__glyph">02</div>
        <h3 class="programme-card__title">Stunt Training (B.L.A.S.T.)</h3>
        <p class="programme-card__desc">British Live Action Stunt Training — the professional discipline for anyone chasing on-set stunt work.</p>
        <div class="programme-card__chips">
          <span class="programme-card__chip">Professional</span>
          <span class="programme-card__chip">Programme</span>
        </div>
        <a class="programme-card__cta" href="https://www.britishactionacademy.com/" target="_blank" rel="noopener"><span>See B.L.A.S.T.</span></a>
      </article>

      <article class="programme-card">
        <div class="programme-card__glyph">03</div>
        <h3 class="programme-card__title">Firearms For Film (Gun Rush)</h3>
        <p class="programme-card__desc">Cinematic firearms handling, safety, and performance. Distinct from combat training.</p>
        <div class="programme-card__chips">
          <span class="programme-card__chip">Specialist</span>
          <span class="programme-card__chip">Short Course</span>
        </div>
        <a class="programme-card__cta" href="https://www.britishactionacademy.com/" target="_blank" rel="noopener"><span>See Gun Rush</span></a>
      </article>

      <article class="programme-card">
        <div class="programme-card__glyph">04</div>
        <h3 class="programme-card__title">Online Screen Combat</h3>
        <p class="programme-card__desc">The Warrior Masterclass content, remote. For when your postcode isn't in commuting distance.</p>
        <div class="programme-card__chips">
          <span class="programme-card__chip">Any Level</span>
          <span class="programme-card__chip">Online Series</span>
        </div>
        <a class="programme-card__cta" href="https://www.britishactionacademy.com/" target="_blank" rel="noopener"><span>Train online</span></a>
      </article>

      <article class="programme-card">
        <div class="programme-card__glyph">05</div>
        <h3 class="programme-card__title">Warrior Club</h3>
        <p class="programme-card__desc">The ongoing community. Continued training, network, and the connective tissue that ties BAA students together.</p>
        <div class="programme-card__chips">
          <span class="programme-card__chip">Membership</span>
          <span class="programme-card__chip">Ongoing</span>
        </div>
        <a class="programme-card__cta" href="https://www.britishactionacademy.com/" target="_blank" rel="noopener"><span>Join the community</span></a>
      </article>
    </div>
  </div>
</section>

<div class="seam"></div>

<!-- ============================================================
     SECTION 7 — CAREER PATHWAY
============================================================ -->
<a id="tf-other-3" data-tf-family="other" style="display:contents"></a>
<section class="pathway">
  <div class="pathway__pattern"></div>
  <div class="container pathway__inner">
    <div class="pathway__head">
      <span class="eyebrow">The Pathway</span>
      <h2 class="section-title pathway__title">From your first stance to your first set.</h2>
      <p class="section-lede">The Warrior Masterclass is a phased progression. Each phase builds on the last — and every phase is BAA-certified.</p>
    </div>

    <div class="pathway__stages">
      <div class="stage">
        <div class="stage__marker">
          <div class="stage__marker-num">01</div>
          <div class="stage__marker-phase">Phase I</div>
        </div>
        <div class="stage__body">
          <span class="stage__label">Entry Level</span>
          <h3 class="stage__title">Warrior</h3>
          <p class="stage__desc">Entry-level screen combat fundamentals. Stance, safety, first routines.</p>
        </div>
        <div class="stage__meta"><strong>Foundation</strong>All welcome</div>
      </div>

      <div class="stage">
        <div class="stage__marker">
          <div class="stage__marker-num">02</div>
          <div class="stage__marker-phase">Phase II</div>
        </div>
        <div class="stage__body">
          <span class="stage__label">Intermediate</span>
          <h3 class="stage__title">Battle</h3>
          <p class="stage__desc">Intermediate combat skills. Longer routines. Duelling grade discipline.</p>
        </div>
        <div class="stage__meta"><strong>Progression</strong>Phase I complete</div>
      </div>

      <div class="stage">
        <div class="stage__marker">
          <div class="stage__marker-num">03</div>
          <div class="stage__marker-phase">Phase III</div>
        </div>
        <div class="stage__body">
          <span class="stage__label">Advanced</span>
          <h3 class="stage__title">Titan</h3>
          <p class="stage__desc">Advanced combat performance. Character, camera awareness, longer choreography.</p>
        </div>
        <div class="stage__meta"><strong>Performance</strong>Phase II complete</div>
      </div>

      <div class="stage">
        <div class="stage__marker">
          <div class="stage__marker-num">04</div>
          <div class="stage__marker-phase">Phase IV</div>
        </div>
        <div class="stage__body">
          <span class="stage__label">Expert Level</span>
          <h3 class="stage__title">Ultimate Warrior</h3>
          <p class="stage__desc">Expert-level combat. Ready for professional-standard performance work.</p>
        </div>
        <div class="stage__meta"><strong>Expert</strong>Phase III complete</div>
      </div>

      <div class="stage stage--final">
        <div class="stage__marker">
          <div class="stage__marker-num">05</div>
          <div class="stage__marker-phase">Certification</div>
        </div>
        <div class="stage__body">
          <span class="stage__label">The Credential</span>
          <h3 class="stage__title">Advanced Screen Combatant Test</h3>
          <p class="stage__desc">Certification. The BAA credential that unlocks agency signing and on-set work.</p>
        </div>
        <div class="stage__meta"><strong>Certified</strong>Agency eligible</div>
      </div>
    </div>
  </div>
</section>

<div class="seam"></div>

<!-- ============================================================
     SECTION 8 — TESTIMONIALS
============================================================ -->
<a id="tf-testimonial-1" data-tf-family="testimonial" style="display:contents"></a>
<section class="testimonials">
  <div class="container">
    <div class="testimonials__head">
      <span class="eyebrow">What Their Students Say</span>
      <h2 class="section-title testimonials__title">Real students. Real credits. Real careers.</h2>
    </div>

    <div class="testimonials__grid">
      <article class="testimonial-card">
        <div class="testimonial-card__head">
          <div class="testimonial-card__portrait">
            <img src="https://portal.britishactionacademy.com/assets/images/public/Saskia_Allen_Testimonial_Picture_2048x2048.png" alt="Saskia Allen">
          </div>
          <div class="testimonial-card__name-block">
            <h3 class="testimonial-card__name">Saskia Allen</h3>
            <div class="testimonial-card__role">BAA Student · Agency Signed</div>
          </div>
        </div>
        <span class="testimonial-card__glyph">“</span>
        <p class="testimonial-card__quote">Working on productions through the BAA has given me some of the best experiences of my life.</p>
        <div class="testimonial-card__meta">
          <span>Warrior Masterclass · Phase IV</span>
          <strong>Certified</strong>
        </div>
      </article>

      <article class="testimonial-card">
        <div class="testimonial-card__head">
          <div class="testimonial-card__portrait">
            <img src="https://portal.britishactionacademy.com/assets/images/public/Matthew_Robinson_Testimonial_Picture_2048x2048.png" alt="Matthew T. Robinson">
          </div>
          <div class="testimonial-card__name-block">
            <h3 class="testimonial-card__name">Matthew T. Robinson</h3>
            <div class="testimonial-card__role">BAA Student · Agency Signed</div>
          </div>
        </div>
        <span class="testimonial-card__glyph">“</span>
        <p class="testimonial-card__quote">When undertaking your first Special Action jobs on a professional set, you know you are in the best hands.</p>
        <div class="testimonial-card__meta">
          <span>Warrior Masterclass · B.L.A.S.T.</span>
          <strong>On-Set</strong>
        </div>
      </article>
    </div>
  </div>
</section>

<!-- ============================================================
     SECTION 9 — VENUE
============================================================ -->
<a id="tf-other-4" data-tf-family="other" style="display:contents"></a>
<section class="venue">
  <div class="container">
    <div class="venue__grid">
      <div class="venue__col">
        <div class="venue__eyebrow">Where they train</div>
        <h3 class="venue__primary">Longcross South Studios</h3>
        <p class="venue__sub">The Saber Masterclass runs on realistic film-set conditions at <strong>Longcross</strong> — one of the UK's active studio complexes.</p>
      </div>
      <div class="venue__col">
        <div class="venue__eyebrow">The HQ</div>
        <h3 class="venue__primary">Farnborough, Hampshire</h3>
        <p class="venue__sub">Main academy operations.</p>
        <div class="venue__contact">
          <div>Phone <span>01252 711130</span></div>
          <div>Email <span>info@britishactionacademy.com</span></div>
        </div>
      </div>
    </div>
  </div>
</section>

<div class="seam"></div>

<!-- ============================================================
     SECTION 10 — CROSS-SELL
============================================================ -->
<a id="tf-cross-sell-strip-1" data-tf-family="cross-sell-strip" style="display:contents"></a>
<section class="crosssell">
  <div class="crosssell__bloom"></div>
  <div class="container crosssell__inner">
    <div class="crosssell__badge">Your Side of the Deal</div>
    <div class="crosssell__grid">
      <div class="crosssell__copy">
        <div class="crosssell__eyebrow">Bring a Hilt</div>
        <h2 class="crosssell__title">Every hilt we sell is built to duel.</h2>
        <p class="crosssell__lede">The Saber Masterclass is a real training day. So you want a real training saber. Our duelling-grade filter shows every hilt in the ARTSABERS catalogue that's been impact-tested for exactly this — reinforced emitters, thick-wall polycarbonate blades, hand-tested electronics.</p>

        <div class="crosssell__stats">
          <div class="crosssell__stat">
            <div class="crosssell__stat-num">1,100+</div>
            <div class="crosssell__stat-label">Hilts in<br>the catalogue</div>
          </div>
          <div class="crosssell__stat">
            <div class="crosssell__stat-num">Duelling</div>
            <div class="crosssell__stat-label">Grade filter<br>available</div>
          </div>
          <div class="crosssell__stat">
            <div class="crosssell__stat-num">24 hr</div>
            <div class="crosssell__stat-label">UK dispatch<br>from stock</div>
          </div>
        </div>

        <div class="crosssell__cta-row">
          <a class="cta-primary" href="/collections/duelling/">Browse duelling-grade hilts <span class="arrow">→</span></a>
          <a class="cta-ghost" href="/faq/#warranty">Read the warranty →</a>
        </div>
      </div>

      <div class="crosssell__media" role="img" aria-label="The Fighter Black Lightsaber, Xenopixel V3">
        <div class="crosssell__media-tag">Duelling Grade</div>
        <div class="crosssell__media-caption">
          The Fighter · Black · Xenopixel V3
          <span>ARTSABERS Catalogue</span>
        </div>
      </div>
    </div>
  </div>
</section>

<!-- ============================================================
     SECTION 11 — SOCIAL
============================================================ -->
<a id="tf-other-5" data-tf-family="other" style="display:contents"></a>
<section class="social">
  <div class="container">
    <div class="social__head">
      <span class="social__eyebrow">Follow BAA</span>
      <h3 class="social__title">See the training <span>in motion.</span></h3>
    </div>
    <div class="social__grid">
      <a class="social__chip" href="https://facebook.com/britishactionacademy" target="_blank" rel="noopener">
        <div class="social__logo">f</div>
        <div>
          <div class="social__platform">Facebook</div>
          <div class="social__handle">@britishactionacademy</div>
        </div>
      </a>
      <a class="social__chip" href="https://instagram.com/britishactionacademy" target="_blank" rel="noopener">
        <div class="social__logo">Ig</div>
        <div>
          <div class="social__platform">Instagram</div>
          <div class="social__handle">@britishactionacademy</div>
        </div>
      </a>
      <a class="social__chip" href="https://tiktok.com/@britishactionacademy" target="_blank" rel="noopener">
        <div class="social__logo">Tk</div>
        <div>
          <div class="social__platform">TikTok</div>
          <div class="social__handle">@britishactionacademy</div>
        </div>
      </a>
      <a class="social__chip" href="https://youtube.com/@britishactionacademy-baa" target="_blank" rel="noopener">
        <div class="social__logo">Yt</div>
        <div>
          <div class="social__platform">YouTube</div>
          <div class="social__handle">@britishactionacademy-baa</div>
        </div>
      </a>
    </div>
  </div>
</section>

<!-- ============================================================
     SECTION 12 — OTHER PARTNERS
============================================================ -->
<a id="tf-inpage-cta-1" data-tf-family="inpage-cta" style="display:contents"></a>
<section class="other-partners">
  <div class="container--narrow">
    <div class="other-partners__eyebrow">Other Partners</div>
    <p class="other-partners__text">More partners are joining the roster. We're selective — see the hub page for how partnership works.</p>
    <a class="other-partners__cta" href="/events-courses/">Back to the hub</a>
  </div>
</section>

<div class="seam"></div>

<!-- ============================================================
     SECTION 13 — CAPTURE BAND
============================================================ -->
<a id="tf-newsletter-signup-1" data-tf-family="newsletter-signup" style="display:contents"></a>
<section class="capture">
  <div class="container">
    <div class="capture__inner">
      <div class="capture__copy">
        <div class="capture__eyebrow">◆  Join the comms</div>
        <h2 class="capture__title">From factory floor<br>to your inbox.</h2>
        <p class="capture__sub">Get 10% off your first saber, plus early access to new drops, ARTSABERS Exclusives, and the workshop pieces that never make it to the public catalogue.</p>
      </div>
      <div class="capture__form">
        <span class="capture__form-lbl">Comms · Signal In</span>
        <input class="capture__form-input" type="email" placeholder="your@email.com">
        <button class="capture__form-cta">Open the signal →</button>
        <span class="capture__form-fine">One drop a week. Unsubscribe with one click. We never share your details.</span>
      </div>
    </div>
  </div>
</section>

<!-- ============================================================
     SECTION 14 — FOOTER
============================================================ -->
<footer class="footer">
  <div class="container">
    <div class="footer__grid">
      <div>
        <div class="footer__brand-mark">ART<span>/</span>SABERS</div>
        <p class="footer__tag">Every character, every Saber Core, every duelling grade. From factory floor to your door.</p>
        <div class="footer__meta">1,100 SKUs <span>·</span> 350 unique models <span>·</span> Global delivery 7-10 days</div>
      </div>
      <div>
        <h4 class="footer__col-title">Shop</h4>
        <ul class="footer__links">
          <li><a class="footer__link" href="/lightsabers/">Lightsabers</a></li>
          <li><a class="footer__link" href="/collections/duelling/">Duelling Grade</a></li>
          <li><a class="footer__link" href="/helmets/">Helmets</a></li>
          <li><a class="footer__link" href="/parts/">Parts & Accessories</a></li>
          <li><a class="footer__link" href="/offers/">Offers & Deals</a></li>
        </ul>
      </div>
      <div>
        <h4 class="footer__col-title">Learn</h4>
        <ul class="footer__links">
          <li><a class="footer__link" href="/events-courses/">Events & Courses</a></li>
          <li><a class="footer__link" href="/events-courses/british-action-academy/">British Action Academy</a></li>
          <li><a class="footer__link" href="/journal/">The Journal</a></li>
          <li><a class="footer__link" href="/guides/saber-core/">Saber Core Guide</a></li>
        </ul>
      </div>
      <div>
        <h4 class="footer__col-title">Support</h4>
        <ul class="footer__links">
          <li><a class="footer__link" href="/support/">Real Support</a></li>
          <li><a class="footer__link" href="/faq/">FAQ</a></li>
          <li><a class="footer__link" href="/faq/#warranty">Warranty</a></li>
          <li><a class="footer__link" href="/shipping/">Shipping (7-10 days)</a></li>
          <li><a class="footer__link" href="/returns/">30-Day Returns</a></li>
        </ul>
      </div>
      <div>
        <h4 class="footer__col-title">Company</h4>
        <ul class="footer__links">
          <li><a class="footer__link" href="/about/">About</a></li>
          <li><a class="footer__link" href="/contact/">Contact</a></li>
          <li><a class="footer__link" href="/press/">Press</a></li>
          <li><a class="footer__link" href="/wholesale/">Wholesale</a></li>
        </ul>
      </div>
    </div>
    <div class="footer__bottom">
      <div>© 2026 ARTSABERS · A Nerdworks Brand</div>
      <div>USD · CAD · AUD · NZD · EUR · GBP</div>
      <div><a href="/privacy/">Privacy</a>   <a href="/terms/">Terms</a></div>
    </div>
  </div>
</footer>

</body></html>