/wire-template.
<!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"?><html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Events & Courses — 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@400;500;600;700&family=Orbitron:wght@400;500;600;700;800&family=Onest:wght@400;500;600;700&display=swap" rel="stylesheet">
<style>/* ==========================================================================
ARTSABERS — Kyber Hull tokens (verbatim from styleguide SAS1 v4.2.1)
========================================================================== */
:root{
/* Ember ombre — the ONE brand voice */
--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 — surfaces */
--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 / warm-white highlights */
--chrome-highlight:#FAFAFA;
--chrome-glint:#E8E4DD;
--chrome-warm:#F5F0E8;
--chrome-dim:#B8B0A6;
/* Semantic surfaces (roles, not hues) */
--bg-page:var(--carbon);
--bg-section-plain:var(--carbon);
--bg-section-void:var(--void);
--bg-section-warm:var(--charcoal-warm);
--bg-card:var(--hull-panel);
--bg-card-lift:var(--hull-panel-lift);
--bg-card-deep:var(--hull-panel-dark);
/* Semantic text roles */
--text-primary:var(--chrome-warm);
--text-heading:var(--chrome-highlight);
--text-dim:var(--chrome-dim);
--text-on-ember:var(--on-primary-fixed);
/* Typography */
--font-display:'Orbitron', system-ui, sans-serif;
--font-body:'Onest', system-ui, sans-serif;
/* Shadows — Kyber Hull "panel-lift" pair */
--shadow-panel:inset 0 1px 0 rgba(250,250,250,0.08), 0 8px 24px -8px rgba(0,0,0,0.9);
--shadow-panel-hover:inset 0 1px 0 rgba(250,250,250,0.15), 0 16px 40px -8px rgba(0,0,0,0.95);
--glow-ember-sm:0 0 16px rgba(255,122,46,0.35);
--glow-ember-md:0 0 28px rgba(255,122,46,0.55);
--shadow-ember-hot-rim:inset 0 0 0 1px rgba(255,122,46,0.6), 0 0 24px rgba(255,122,46,0.5);
/* Chrome top-edge law */
--chrome-top:inset 0 1px 0 rgba(250,250,250,0.30);
--chrome-top-soft:inset 0 1px 0 rgba(250,250,250,0.14);
/* Ember panel-seam glow */
--ember-hairline:1px solid rgba(255,122,46,0.6);
--ember-hairline-dim:1px solid rgba(255,122,46,0.35);
}
/* ==========================================================================
Reset + base
========================================================================== */
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0}
html{scroll-behavior:smooth}
body{
background:var(--bg-page);
color:var(--text-primary);
font-family:var(--font-body);
font-size:16px;
line-height:1.55;
-webkit-font-smoothing:antialiased;
text-rendering:optimizeLegibility;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer;background:none;border:0;color:inherit}
h1,h2,h3,h4,h5,h6,p{margin:0}
/* Font role classes */
.eyebrow{
font-family:var(--font-display);
font-size:12px;
font-weight:600;
letter-spacing:0.18em;
text-transform:uppercase;
color:var(--ember);
}
.label-sm{
font-family:var(--font-display);
font-size:12px;
font-weight:500;
letter-spacing:0.1em;
text-transform:uppercase;
color:var(--text-dim);
}
/* ==========================================================================
BLOCK: site-nav
========================================================================== */
.site-nav{
position:sticky;top:0;z-index:50;
background:rgba(6,6,6,0.88);
backdrop-filter:blur(12px);
-webkit-backdrop-filter:blur(12px);
border-bottom:1px solid rgba(54,54,54,0.4);
box-shadow:var(--chrome-top-soft);
}
.site-nav__inner{
max-width:1440px;margin:0 auto;
padding:20px 40px;
display:flex;align-items:center;gap:48px;
}
.site-nav__brand{
font-family:var(--font-display);
font-size:20px;
font-weight:700;
letter-spacing:0.22em;
color:var(--chrome-highlight);
text-transform:uppercase;
}
.site-nav__brand span{color:var(--ember)}
.site-nav__links{
display:flex;gap:36px;flex:1;
}
.site-nav__link{
font-family:var(--font-display);
font-size:13px;
font-weight:500;
letter-spacing:0.14em;
text-transform:uppercase;
color:var(--chrome-warm);
padding:8px 2px;
position:relative;
transition:color .18s ease;
}
.site-nav__link:hover{color:var(--chrome-highlight)}
.site-nav__link--active{color:var(--chrome-highlight)}
.site-nav__link--active::after{
content:"";
position:absolute;left:0;right:0;bottom:-8px;
height:1px;background:var(--ember);
box-shadow:0 0 8px rgba(255,122,46,0.7);
}
.site-nav__actions{
display:flex;gap:20px;align-items:center;
}
.site-nav__icon{
width:38px;height:38px;
display:flex;align-items:center;justify-content:center;
color:var(--chrome-warm);
border:1px solid rgba(62,62,62,0.4);
transition:border-color .18s, color .18s;
}
.site-nav__icon:hover{border-color:var(--ember);color:var(--ember)}
.site-nav__count{
font-family:var(--font-display);
font-size:10px;
color:var(--ember);
margin-left:6px;
letter-spacing:0.1em;
}
@media (max-width:900px){
.site-nav__inner{padding:16px 20px;gap:20px}
.site-nav__links{display:none}
.site-nav__brand{font-size:16px}
}
/* ==========================================================================
BLOCK: hero-atmospheric
Full-bleed ~560px, Variant F horizontal hull-plate, corner ember bloom
========================================================================== */
.hero-atmos{
position:relative;
min-height:560px;
background:
radial-gradient(circle at 12% 18%, rgba(255,122,46,0.18) 0%, rgba(255,122,46,0) 42%),
linear-gradient(180deg, rgba(6,6,6,0.62) 0%, rgba(6,6,6,0.72) 55%, rgba(6,6,6,0.88) 100%),
url("https://camcom.dev/wp-content/uploads/2026/07/6f0320e4a3df77a3b51e2d37a15e6eae-6.jpg");
background-size:cover;
background-position:center;
display:flex;align-items:center;
overflow:hidden;
isolation:isolate;
}
.hero-atmos::after{
/* bottom ember-backlight — marks panel-end */
content:"";
position:absolute;left:0;right:0;bottom:-20px;
height:60px;
background:radial-gradient(ellipse at 50% 100%, rgba(255,122,46,0.28) 0%, rgba(255,122,46,0) 70%);
pointer-events:none;
z-index:1;
}
.hero-atmos__inner{
position:relative;z-index:2;
max-width:1240px;margin:0 auto;
padding:80px 40px 120px;
width:100%;
}
.hero-atmos__eyebrow{
color:var(--ember);
font-family:var(--font-display);
font-size:13px;
font-weight:600;
letter-spacing:0.24em;
text-transform:uppercase;
margin-bottom:32px;
display:inline-flex;align-items:center;gap:14px;
}
.hero-atmos__eyebrow::before{
content:"";width:32px;height:1px;background:var(--ember);
box-shadow:0 0 6px rgba(255,122,46,0.7);
}
.hero-atmos__title{
font-family:var(--font-display);
font-weight:700;
font-size:clamp(38px, 5.6vw, 68px);
line-height:1.02;
letter-spacing: 0.8px;
color:var(--chrome-highlight);
max-width:960px;
margin-bottom:28px;
}
.hero-atmos__subline{
font-family:var(--font-body);
font-size:19px;
line-height:1.55;
color:var(--chrome-warm);
max-width:720px;
}
@media (max-width:768px){
.hero-atmos{min-height:480px}
.hero-atmos__inner{padding:56px 20px 80px}
.hero-atmos__subline{font-size:16px}
}
/* ==========================================================================
BLOCK: manifesto-band-3col
Plain carbon ground, ember hairline top separator
========================================================================== */
.manifesto-band{
background:var(--bg-section-plain);
padding:110px 0 120px;
position:relative;
}
.manifesto-band::before{
/* ember hairline top separator */
content:"";position:absolute;top:0;left:0;right:0;
height:1px;background:var(--ember);opacity:0.55;
box-shadow:0 0 18px rgba(255,122,46,0.35), 0 6px 24px rgba(255,122,46,0.18);
}
.manifesto-band__inner{
max-width:1240px;margin:0 auto;padding:0 40px;
}
.manifesto-band__head{
max-width:820px;margin-bottom:72px;
}
.manifesto-band__eyebrow{
color:var(--ember);
font-family:var(--font-display);
font-size:12px;font-weight:600;
letter-spacing:0.22em;text-transform:uppercase;
margin-bottom:24px;display:block;
}
.manifesto-band__title{
font-family:var(--font-display);
font-weight:700;
font-size:clamp(30px, 3.6vw, 44px);
line-height:1.06;letter-spacing: 0.8px;
color:var(--chrome-highlight);
margin-bottom:22px;
}
.manifesto-band__lede{
font-family:var(--font-body);
font-size:17px;line-height:1.6;
color:var(--chrome-warm);
max-width:680px;
}
.manifesto-band__grid{
display:grid;grid-template-columns:repeat(3,1fr);gap:56px;
}
.manifesto-band__cell{
position:relative;padding-top:28px;
}
.manifesto-band__cell::before{
content:"";position:absolute;left:0;top:0;
width:44px;height:1px;background:var(--ember);
box-shadow:0 0 8px rgba(255,122,46,0.6);
}
.manifesto-band__num{
font-family:var(--font-display);
font-size:12px;font-weight:600;
letter-spacing:0.2em;color:var(--ember);
display:block;margin-bottom:14px;
}
.manifesto-band__cell-title{
font-family:var(--font-display);
font-weight:700;font-size:24px;
line-height:1.12;color:var(--chrome-highlight);
margin-bottom:14px; letter-spacing: 0.8px; }
.manifesto-band__cell-body{
font-family:var(--font-body);
font-size:15.5px;line-height:1.6;
color:var(--chrome-warm);
}
@media (max-width:900px){
.manifesto-band{padding:80px 0 90px}
.manifesto-band__grid{grid-template-columns:1fr;gap:44px}
}
/* ==========================================================================
BLOCK: featured-partner-spotlight
--charcoal-warm wide product-feature band (per MAS68 wide-category)
========================================================================== */
.partner-spot{
position:relative;
background:var(--bg-section-warm);
width:min(1240px, calc(100vw - 48px));
margin:0 auto;
padding:76px 64px;
box-shadow:var(--chrome-top), 0 32px 80px -20px rgba(0,0,0,0.9);
overflow:hidden;
isolation:isolate;
}
.partner-spot::before{
/* corner ember bloom */
content:"";position:absolute;top:-40px;right:-40px;width:520px;height:520px;
background:radial-gradient(circle, rgba(255,122,46,0.16) 0%, rgba(255,122,46,0) 60%);
pointer-events:none;z-index:0;
}
.partner-spot::after{
/* bottom ember hairline */
content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
background:var(--ember);opacity:0.55;
box-shadow:0 0 14px rgba(255,122,46,0.3);
}
.partner-spot__top-hairline{
position:absolute;top:0;left:0;right:0;height:1px;
background:var(--ember);opacity:0.55;
box-shadow:0 0 14px rgba(255,122,46,0.3);
}
.partner-spot__head{
position:relative;z-index:2;
display:flex;justify-content:space-between;align-items:flex-start;
margin-bottom:44px;gap:24px;
}
.partner-spot__badge{
display:inline-flex;align-items:center;gap:10px;
padding:8px 14px;
border:var(--ember-hairline);
font-family:var(--font-display);
font-size:11px;font-weight:600;
letter-spacing:0.22em;text-transform:uppercase;
color:var(--ember);
background:rgba(255,122,46,0.05);
}
.partner-spot__badge::before{
content:"";width:6px;height:6px;background:var(--ember);
box-shadow:0 0 8px var(--ember);
}
.partner-spot__logo{
height:44px;width:auto;opacity:0.85;
filter:brightness(0) invert(1) sepia(0) saturate(0) brightness(0.94);
}
.partner-spot__grid{
position:relative;z-index:2;
display:grid;grid-template-columns:1.15fr 1fr;
gap:64px;align-items:center;
}
.partner-spot__eyebrow{
color:var(--ember);
font-family:var(--font-display);
font-size:12px;font-weight:600;
letter-spacing:0.22em;text-transform:uppercase;
display:block;margin-bottom:20px;
}
.partner-spot__title{
font-family:var(--font-display);
font-weight:700;
font-size:clamp(30px, 3.4vw, 40px);
line-height:1.05;letter-spacing: 0.8px;
color:var(--chrome-highlight);
margin-bottom:24px;
}
.partner-spot__lede{
font-family:var(--font-body);
font-size:17px;line-height:1.62;
color:var(--chrome-warm);
margin-bottom:32px;
}
.partner-spot__pills{
display:flex;flex-wrap:wrap;gap:8px;
margin-bottom:36px;
}
.partner-spot__pill{
padding:7px 12px;
border:var(--ember-hairline-dim);
font-family:var(--font-display);
font-size:10.5px;font-weight:500;
letter-spacing:0.14em;text-transform:uppercase;
color:var(--chrome-warm);
background:rgba(255,122,46,0.03);
}
.partner-spot__stats{
display:grid;grid-template-columns:repeat(3,1fr);
gap:24px;margin-bottom:40px;
border-top:1px solid rgba(54,54,54,0.5);
padding-top:28px;
}
.partner-spot__stat-num{
font-family:var(--font-display);
font-weight:700;font-size:32px;
color:var(--ember);
font-variant-numeric:tabular-nums;
line-height:1;margin-bottom:10px;
}
.partner-spot__stat-label{
font-family:var(--font-display);
font-size:11px;font-weight:500;
letter-spacing:0.14em;text-transform:uppercase;
color:var(--chrome-dim);
line-height:1.4;
}
.partner-spot__cta{
display:inline-flex;align-items:center;gap:12px;
padding:16px 28px;
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:13px;font-weight:600;
letter-spacing:0.06em;text-transform:uppercase;
box-shadow:var(--glow-ember-sm);
transition:box-shadow .18s ease, transform .18s ease;
}
.partner-spot__cta:hover{box-shadow:var(--glow-ember-md);transform:translateY(-1px)}
.partner-spot__cta::after{content:"→";font-size:16px}
.partner-spot__media{
position:relative;
aspect-ratio:4/5;
overflow:hidden;
box-shadow:var(--chrome-top), 0 24px 60px -14px rgba(0,0,0,0.95);
}
.partner-spot__media::before{
/* ember hairline framing */
content:"";position:absolute;inset:0;
border-top:1px solid rgba(255,122,46,0.4);
border-bottom:1px solid rgba(255,122,46,0.4);
pointer-events:none;z-index:2;
}
.partner-spot__media img{
width:100%;height:100%;object-fit:cover;
}
.partner-spot__media::after{
/* Slight vignette so it settles into the warm ground */
content:"";position:absolute;inset:0;
background:linear-gradient(180deg, rgba(6,6,6,0) 40%, rgba(6,6,6,0.4) 100%);
pointer-events:none;
}
@media (max-width:1000px){
.partner-spot{padding:56px 32px}
.partner-spot__grid{grid-template-columns:1fr;gap:44px}
.partner-spot__stats{grid-template-columns:repeat(3,1fr);gap:16px}
.partner-spot__stat-num{font-size:26px}
}
@media (max-width:560px){
.partner-spot{width:calc(100vw - 24px);padding:44px 24px}
.partner-spot__head{flex-direction:column;gap:20px}
.partner-spot__stats{grid-template-columns:1fr;text-align:left}
}
/* Section spacing wrapper for partner-spot */
.partner-spot-wrap{padding:80px 0}
/* ==========================================================================
BLOCK: learn-grid-6
Plain carbon ground, 3×2 desktop, ember-hairline glyph + title + body
========================================================================== */
.learn-grid{
background:var(--bg-section-plain);
padding:110px 0 120px;
position:relative;
}
.learn-grid::before{
content:"";position:absolute;top:0;left:0;right:0;height:1px;
background:var(--ember);opacity:0.5;
box-shadow:0 0 14px rgba(255,122,46,0.28);
}
.learn-grid__inner{
max-width:1240px;margin:0 auto;padding:0 40px;
}
.learn-grid__head{
max-width:820px;margin-bottom:72px;
}
.learn-grid__eyebrow{
color:var(--ember);
font-family:var(--font-display);
font-size:12px;font-weight:600;
letter-spacing:0.22em;text-transform:uppercase;
margin-bottom:24px;display:block;
}
.learn-grid__title{
font-family:var(--font-display);
font-weight:700;
font-size:clamp(30px, 3.6vw, 44px);
line-height:1.06;letter-spacing: 0.8px;
color:var(--chrome-highlight);
margin-bottom:22px;
}
.learn-grid__lede{
font-family:var(--font-body);
font-size:17px;line-height:1.6;
color:var(--chrome-warm);
max-width:640px;
}
.learn-grid__grid{
display:grid;grid-template-columns:repeat(3,1fr);gap:32px;
}
.learn-grid__cell{
padding:32px 24px 32px 0;
border-top:1px solid rgba(54,54,54,0.5);
position:relative;
}
.learn-grid__glyph{
width:48px;height:48px;
border:var(--ember-hairline-dim);
display:flex;align-items:center;justify-content:center;
margin-bottom:22px;
background:rgba(255,122,46,0.04);
color:var(--ember);
box-shadow:inset 0 1px 0 rgba(250,250,250,0.06);
}
.learn-grid__glyph svg{width:22px;height:22px}
.learn-grid__cell-title{
font-family:var(--font-display);
font-weight:700;font-size:22px;
line-height:1.14;color:var(--chrome-highlight);
margin-bottom:12px; letter-spacing: 0.8px; }
.learn-grid__cell-body{
font-family:var(--font-body);
font-size: 16px;line-height:1.6;
color:var(--chrome-warm);
}
@media (max-width:900px){
.learn-grid{padding:80px 0 90px}
.learn-grid__grid{grid-template-columns:repeat(2,1fr);gap:24px}
}
@media (max-width:560px){
.learn-grid__grid{grid-template-columns:1fr}
}
/* ==========================================================================
BLOCK: editorial-3step
Hull-plate patterned ground (Variant G vertical), 3-step editorial
========================================================================== */
.editorial-3step{
position:relative;
background:
linear-gradient(180deg, rgba(10,10,10,0.66) 0%, rgba(10,10,10,0.74) 55%, rgba(10,10,10,0.88) 100%),
/* Variant G vertical smooth hull-plate — CSS-authored */
linear-gradient(90deg,
#0d0d0d 0%,
#101010 34%,
#0a0a0a 49.6%,
rgba(255,122,46,0.55) 50%,
#0a0a0a 50.4%,
#101010 66%,
#0d0d0d 100%);
padding:120px 0 130px;
overflow:hidden;
isolation:isolate;
}
.editorial-3step::before{
/* seam glow bleed */
content:"";position:absolute;left:50%;top:0;bottom:0;
width:220px;transform:translateX(-50%);
background:radial-gradient(ellipse at center, rgba(255,122,46,0.14) 0%, rgba(255,122,46,0) 70%);
pointer-events:none;z-index:0;
}
.editorial-3step__inner{
position:relative;z-index:2;
max-width:1140px;margin:0 auto;padding:0 40px;
}
.editorial-3step__head{
max-width:780px;margin-bottom:80px;
}
.editorial-3step__eyebrow{
color:var(--ember);
font-family:var(--font-display);
font-size:12px;font-weight:600;
letter-spacing:0.22em;text-transform:uppercase;
margin-bottom:24px;display:block;
}
.editorial-3step__title{
font-family:var(--font-display);
font-weight:700;
font-size:clamp(30px, 3.6vw, 44px);
line-height:1.06;letter-spacing: 0.8px;
color:var(--chrome-highlight);
margin-bottom:22px;
}
.editorial-3step__lede{
font-family:var(--font-body);
font-size:17px;line-height:1.6;
color:var(--chrome-warm);
}
.editorial-3step__list{
display:flex;flex-direction:column;gap:64px;
}
.editorial-3step__step{
display:grid;grid-template-columns:120px 1fr;gap:48px;align-items:flex-start;
position:relative;
}
.editorial-3step__marker{
position:relative;
padding-top:8px;
}
.editorial-3step__marker-circle{
width:64px;height:64px;
border:var(--ember-hairline);
border-radius:50%;
display:flex;align-items:center;justify-content:center;
font-family:var(--font-display);
font-size:22px;font-weight:700;
color:var(--ember);
background:rgba(20,20,20,0.94);
box-shadow:var(--glow-ember-sm), inset 0 1px 0 rgba(250,250,250,0.08);
font-variant-numeric:tabular-nums;
position:relative;z-index:2;
}
.editorial-3step__step:not(:last-child) .editorial-3step__marker::after{
content:"";
position:absolute;
left:32px;top:72px;bottom:-64px;
width:1px;
background:linear-gradient(180deg, rgba(255,122,46,0.55) 0%, rgba(255,122,46,0.05) 100%);
}
.editorial-3step__body{
padding-top:4px;
}
.editorial-3step__label{
color:var(--chrome-dim);
font-family:var(--font-display);
font-size:11px;font-weight:500;
letter-spacing:0.2em;text-transform:uppercase;
margin-bottom:14px;display:block;
}
.editorial-3step__step-title{
font-family:var(--font-display);
font-weight:700;font-size:26px;
line-height:1.15;color:var(--chrome-highlight);
margin-bottom:16px;
max-width:660px; letter-spacing: 0.8px; }
.editorial-3step__step-body{
font-family:var(--font-body);
font-size:16px;line-height:1.62;
color:var(--chrome-warm);
max-width:640px;
}
@media (max-width:900px){
.editorial-3step{padding:80px 0}
.editorial-3step__step{grid-template-columns:72px 1fr;gap:24px}
.editorial-3step__marker-circle{width:52px;height:52px;font-size:18px}
.editorial-3step__step:not(:last-child) .editorial-3step__marker::after{left:26px;top:60px;bottom:-64px}
.editorial-3step__step-title{font-size:22px; letter-spacing: 0.8px; }
}
/* ==========================================================================
BLOCK: pull-quote-band
Plain carbon, ~200px, ember hairlines top + bottom
========================================================================== */
.pull-quote{
background:var(--bg-section-plain);
padding:64px 40px;
position:relative;
min-height:200px;
display:flex;align-items:center;justify-content:center;
text-align:center;
}
.pull-quote::before,
.pull-quote::after{
content:"";position:absolute;left:0;right:0;height:1px;
background:var(--ember);opacity:0.5;
box-shadow:0 0 12px rgba(255,122,46,0.28);
}
.pull-quote::before{top:0}
.pull-quote::after{bottom:0}
.pull-quote__inner{
max-width:960px;
}
.pull-quote__q{
font-family:var(--font-display);
font-style:italic;
font-weight:500;
font-size:clamp(22px, 2.8vw, 32px);
line-height:1.28;
color:var(--chrome-highlight);
margin-bottom:22px;
position:relative;
padding:0 24px;
}
.pull-quote__q::before,
.pull-quote__q::after{
color:var(--ember);
font-family:var(--font-display);
font-style:normal;
font-size:1.05em;
opacity:0.9;
}
.pull-quote__q::before{content:"“";margin-right:6px}
.pull-quote__q::after{content:"”";margin-left:6px}
.pull-quote__attr{
font-family:var(--font-body);
font-size:12px;font-weight:500;
letter-spacing:0.2em;text-transform:uppercase;
color:var(--chrome-dim);
}
@media (max-width:560px){
.pull-quote{padding:48px 20px}
}
/* ==========================================================================
BLOCK: partner-recruitment-band
Second --charcoal-warm band, centred single-column recruitment
========================================================================== */
.recruit{
position:relative;
background:var(--bg-section-warm);
width:min(1240px, calc(100vw - 48px));
margin:0 auto;
padding:88px 64px 96px;
box-shadow:var(--chrome-top), 0 32px 80px -20px rgba(0,0,0,0.9);
overflow:hidden;
isolation:isolate;
text-align:center;
}
.recruit::before{
/* corner ember bloom top-left */
content:"";position:absolute;top:-40px;left:-60px;width:560px;height:560px;
background:radial-gradient(circle, rgba(255,122,46,0.15) 0%, rgba(255,122,46,0) 60%);
pointer-events:none;z-index:0;
}
.recruit::after{
content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
background:var(--ember);opacity:0.55;
box-shadow:0 0 14px rgba(255,122,46,0.3);
}
.recruit__top-hairline{
position:absolute;top:0;left:0;right:0;height:1px;
background:var(--ember);opacity:0.55;
box-shadow:0 0 14px rgba(255,122,46,0.3);
}
.recruit__inner{
position:relative;z-index:2;
max-width:800px;margin:0 auto;
}
.recruit__badge{
display:inline-flex;align-items:center;gap:10px;
padding:8px 14px;
border:var(--ember-hairline);
font-family:var(--font-display);
font-size:11px;font-weight:600;
letter-spacing:0.22em;text-transform:uppercase;
color:var(--ember);
background:rgba(255,122,46,0.05);
margin-bottom:36px;
}
.recruit__badge::before{
content:"";width:6px;height:6px;background:var(--ember);
box-shadow:0 0 8px var(--ember);
}
.recruit__eyebrow{
color:var(--ember);
font-family:var(--font-display);
font-size:13px;font-weight:600;
letter-spacing:0.24em;text-transform:uppercase;
margin-bottom:24px;display:block;
}
.recruit__title{
font-family:var(--font-display);
font-weight:700;
font-size:clamp(30px, 3.4vw, 40px);
line-height:1.05;letter-spacing: 0.8px;
color:var(--chrome-highlight);
margin-bottom:22px;
}
.recruit__lede{
font-family:var(--font-body);
font-size:17px;line-height:1.62;
color:var(--chrome-warm);
margin-bottom:36px;
}
.recruit__chips{
display:flex;flex-wrap:wrap;gap:8px;
justify-content:center;margin-bottom:44px;
}
.recruit__chip{
padding:7px 12px;
border:var(--ember-hairline-dim);
font-family:var(--font-display);
font-size:10.5px;font-weight:500;
letter-spacing:0.16em;text-transform:uppercase;
color:var(--chrome-warm);
background:rgba(255,122,46,0.03);
}
.recruit__cta{
display:inline-flex;align-items:center;gap:12px;
padding:16px 28px;
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:13px;font-weight:600;
letter-spacing:0.06em;text-transform:uppercase;
box-shadow:var(--glow-ember-sm);
transition:box-shadow .18s ease, transform .18s ease;
}
.recruit__cta:hover{box-shadow:var(--glow-ember-md);transform:translateY(-1px)}
.recruit__cta::after{content:"→";font-size:16px}
@media (max-width:1000px){
.recruit{padding:64px 32px}
}
@media (max-width:560px){
.recruit{width:calc(100vw - 24px);padding:52px 24px}
}
.recruit-wrap{padding:80px 0}
/* ==========================================================================
BLOCK: trust-chip-band
Plain carbon, compact ~120px, ember hairline top, MAS49-locked 4-chip
========================================================================== */
.trust-chips{
background:var(--bg-section-plain);
padding:44px 40px;
position:relative;
min-height:120px;
display:flex;align-items:center;
}
.trust-chips::before{
content:"";position:absolute;top:0;left:0;right:0;height:1px;
background:var(--ember);opacity:0.5;
box-shadow:0 0 12px rgba(255,122,46,0.28);
}
.trust-chips__inner{
max-width:1240px;margin:0 auto;width:100%;
display:grid;grid-template-columns:repeat(4,1fr);gap:0;
}
.trust-chips__chip{
display:flex;align-items:flex-start;gap:16px;
padding:16px 24px;
position:relative;
}
.trust-chips__chip + .trust-chips__chip{
border-left:1px solid rgba(54,54,54,0.5);
}
.trust-chips__icon{
width:36px;height:36px;flex-shrink:0;
display:flex;align-items:center;justify-content:center;
color:var(--ember);
border:var(--ember-hairline-dim);
background:rgba(255,122,46,0.05);
}
.trust-chips__icon svg{width:18px;height:18px}
.trust-chips__label{
font-family:var(--font-display);
font-size:11.5px;font-weight:600;
letter-spacing:0.14em;text-transform:uppercase;
color:var(--chrome-highlight);
line-height:1.3;margin-bottom:6px;
display:block;
}
.trust-chips__caption{
font-family:var(--font-body);
font-size:13px;line-height:1.4;
color:var(--chrome-dim);
}
@media (max-width:900px){
.trust-chips__inner{grid-template-columns:repeat(2,1fr)}
.trust-chips__chip:nth-child(3){border-left:0}
.trust-chips__chip:nth-child(3),
.trust-chips__chip:nth-child(4){border-top:1px solid rgba(54,54,54,0.5)}
}
@media (max-width:520px){
.trust-chips__inner{grid-template-columns:1fr}
.trust-chips__chip + .trust-chips__chip{border-left:0;border-top:1px solid rgba(54,54,54,0.5)}
}
/* ==========================================================================
BLOCK: newsletter-band
Plain carbon, MAS68-locked capture band shape
========================================================================== */
.newsletter{
background:var(--bg-section-plain);
padding:110px 40px 120px;
position:relative;
text-align:center;
}
.newsletter::before{
content:"";position:absolute;top:0;left:0;right:0;height:1px;
background:var(--ember);opacity:0.5;
box-shadow:0 0 14px rgba(255,122,46,0.3);
}
.newsletter__inner{
max-width:720px;margin:0 auto;
}
.newsletter__eyebrow{
color:var(--ember);
font-family:var(--font-display);
font-size:12px;font-weight:600;
letter-spacing:0.24em;text-transform:uppercase;
margin-bottom:24px;display:block;
}
.newsletter__title{
font-family:var(--font-display);
font-weight:700;
font-size:clamp(28px, 3.2vw, 36px);
line-height:1.06;letter-spacing: 0.8px;
color:var(--chrome-highlight);
margin-bottom:20px;
}
.newsletter__subtitle{
font-family:var(--font-body);
font-size:16px;line-height:1.6;
color:var(--chrome-warm);
margin-bottom:40px;
max-width:560px;margin-left:auto;margin-right:auto;
}
.newsletter__form{
display:grid;grid-template-columns:1fr auto;gap:16px;
max-width:560px;margin:0 auto;
align-items:end;
}
.newsletter__field{
text-align:left;position:relative;
}
.newsletter__label{
font-family:var(--font-display);
font-size:10.5px;font-weight:500;
letter-spacing:0.2em;text-transform:uppercase;
color:var(--chrome-dim);
display:block;margin-bottom:10px;
}
.newsletter__input{
width:100%;
background:transparent;
border:0;border-bottom:1px solid var(--hull-panel-lift);
padding:10px 0;
font-family:var(--font-body);
font-size:16px;
color:var(--chrome-warm);
outline:none;
transition:border-color .18s, box-shadow .18s;
}
.newsletter__input::placeholder{color:var(--chrome-dim);opacity:0.7}
.newsletter__input:focus{
border-bottom-color:var(--ember);
box-shadow:0 8px 16px -12px rgba(255,122,46,0.6);
}
.newsletter__cta{
padding:14px 26px;
border:var(--ember-hairline);
color:var(--ember);
font-family:var(--font-display);
font-size:12px;font-weight:600;
letter-spacing:0.14em;text-transform:uppercase;
background:rgba(255,122,46,0.04);
transition:background .18s, box-shadow .18s;
}
.newsletter__cta:hover{
background:rgba(255,122,46,0.1);
box-shadow:var(--glow-ember-sm), var(--chrome-top-soft);
}
@media (max-width:600px){
.newsletter{padding:80px 20px 90px}
.newsletter__form{grid-template-columns:1fr;gap:20px}
.newsletter__cta{width:100%}
}
/* ==========================================================================
BLOCK: site-footer
Carbon ground, panel-seam glow top, compact link columns
========================================================================== */
.site-footer{
background:var(--carbon);
padding:80px 40px 40px;
position:relative;
color:var(--chrome-dim);
}
.site-footer::before{
content:"";position:absolute;top:0;left:0;right:0;height:1px;
background:var(--ember);opacity:0.5;
box-shadow:0 0 16px rgba(255,122,46,0.32);
}
.site-footer__inner{
max-width:1240px;margin:0 auto;
}
.site-footer__grid{
display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr 1fr;gap:48px;
padding-bottom:56px;
border-bottom:1px solid rgba(54,54,54,0.4);
margin-bottom:32px;
}
.site-footer__brand-col{}
.site-footer__brand{
font-family:var(--font-display);
font-size:20px;font-weight:700;
letter-spacing:0.22em;text-transform:uppercase;
color:var(--chrome-highlight);
margin-bottom:18px;display:block;
}
.site-footer__brand span{color:var(--ember)}
.site-footer__blurb{
font-family:var(--font-body);
font-size:14px;line-height:1.6;
color:var(--chrome-dim);
max-width:320px;
}
.site-footer__col-title{
font-family:var(--font-display);
font-size:11px;font-weight:600;
letter-spacing: 0.8px;text-transform:uppercase;
color:var(--chrome-highlight);
margin-bottom:20px;
}
.site-footer__list{
list-style:none;margin:0;padding:0;
display:flex;flex-direction:column;gap:12px;
}
.site-footer__list a{
font-family:var(--font-body);
font-size:14px;color:var(--chrome-dim);
transition:color .18s;
}
.site-footer__list a:hover{color:var(--ember)}
.site-footer__bottom{
display:flex;justify-content:space-between;align-items:center;
gap:24px;flex-wrap:wrap;
font-family:var(--font-display);
font-size:11px;font-weight:500;
letter-spacing:0.14em;text-transform:uppercase;
color:var(--chrome-dim);
}
.site-footer__pay{
display:flex;gap:16px;
}
.site-footer__pay span{color:var(--chrome-warm)}
@media (max-width:900px){
.site-footer__grid{grid-template-columns:1fr 1fr;gap:32px}
}
@media (max-width:520px){
.site-footer__grid{grid-template-columns:1fr}
.site-footer__bottom{flex-direction:column;align-items:flex-start}
}
/* 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>
<body>
<!-- ==========================================================================
SECTION 1 — Site nav (MAS64 / MAS68 verbatim, Events & Courses active)
========================================================================== -->
<nav class="site-nav" aria-label="Primary">
<div class="site-nav__inner">
<a class="site-nav__brand" href="/">ART<span>SABERS</span></a>
<div class="site-nav__links">
<a class="site-nav__link" href="/lightsabers/">Lightsabers</a>
<a class="site-nav__link" href="/helmets/">Helmets</a>
<a class="site-nav__link" href="/parts/">Parts & Accessories</a>
<a class="site-nav__link" href="/chronicles/">Chronicles</a>
<a class="site-nav__link site-nav__link--active" href="/events-courses/" aria-current="page">Events & Courses</a>
<a class="site-nav__link" href="/about/">About</a>
</div>
<div class="site-nav__actions">
<a class="site-nav__icon" href="/search/" aria-label="Search">
<svg viewbox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.6"><circle cx="10.5" cy="10.5" r="6.5"></circle><path d="m20 20-4.7-4.7"></path></svg>
</a>
<a class="site-nav__icon" href="/account/" aria-label="Account">
<svg viewbox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.6"><circle cx="12" cy="8" r="4"></circle><path d="M4 20c1.5-4 5-6 8-6s6.5 2 8 6"></path></svg>
</a>
<a class="site-nav__icon" href="/cart/" aria-label="Cart">
<svg viewbox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.6"><path d="M3 4h3l2.5 12h11l2-8H6.5"></path><circle cx="9" cy="20" r="1.4"></circle><circle cx="18" cy="20" r="1.4"></circle></svg>
<span class="site-nav__count">02</span>
</a>
</div>
</div>
</nav>
<!-- ==========================================================================
SECTION 2 — Full-bleed atmospheric hero (~560px)
Kyber Hull Variant F horizontal + 62/72/88 dark stack + corner ember bloom
========================================================================== -->
<a id="tf-hero-atmospheric-1" data-tf-family="hero-atmospheric" style="display:contents"></a>
<header class="hero-atmos" role="banner">
<div class="hero-atmos__inner">
<span class="hero-atmos__eyebrow">Beyond the Collection</span>
<h1 class="hero-atmos__title">Real skills. Real training. Real partners.</h1>
<p class="hero-atmos__subline">Every hilt in our duelling catalogue is built to duel. So we partner with the UK's best action training academies — to help you learn to duel with intent, on real sets, with real instructors.</p>
</div>
</header>
<!-- ==========================================================================
SECTION 3 — Why we partner (plain carbon, 3-value manifesto band)
========================================================================== -->
<a id="tf-trust-prose-cells-1" data-tf-family="trust-prose-cells" style="display:contents"></a>
<section class="manifesto-band" aria-labelledby="why-title">
<div class="manifesto-band__inner">
<div class="manifesto-band__head">
<span class="manifesto-band__eyebrow">Why we partner</span>
<h2 id="why-title" class="manifesto-band__title">A hilt is a tool. Tools want teaching.</h2>
<p class="manifesto-band__lede">We don't teach — we ship the hilts our partners duel with. So when the question is “where do I learn to actually use this?”, we send you to people who do it professionally — on real productions, with real credentials.</p>
</div>
<div class="manifesto-band__grid">
<article class="manifesto-band__cell">
<span class="manifesto-band__num">01</span>
<h3 class="manifesto-band__cell-title">Owned craft.</h3>
<p class="manifesto-band__cell-body">We stay in our lane. Sourcing and shipping hilts is what we do. Teaching is theirs.</p>
</article>
<article class="manifesto-band__cell">
<span class="manifesto-band__num">02</span>
<h3 class="manifesto-band__cell-title">Curated partners.</h3>
<p class="manifesto-band__cell-body">Not a directory. Not an aggregator. Every partner is vetted, and we say why.</p>
</article>
<article class="manifesto-band__cell">
<span class="manifesto-band__num">03</span>
<h3 class="manifesto-band__cell-title">UK-first.</h3>
<p class="manifesto-band__cell-body">Every partner we work with is UK-based. Same standard of craft.</p>
</article>
</div>
</div>
</section>
<!-- ==========================================================================
SECTION 4 — Featured partner spotlight (charcoal-warm wide band)
British Action Academy — Andreas Petrides / Obi-Wan Kenobi credential
========================================================================== -->
<div class="partner-spot-wrap">
<a id="tf-workshop-split-1" data-tf-family="workshop-split" style="display:contents"></a>
<section class="partner-spot" aria-labelledby="baa-title">
<span class="partner-spot__top-hairline" aria-hidden="true"></span>
<div class="partner-spot__head">
<span class="partner-spot__badge">Featured Partner</span>
<img class="partner-spot__logo" src="https://portal.britishactionacademy.com/assets/images/public/logo_trans_1000_long_2048x2048.png" alt="British Action Academy">
</div>
<div class="partner-spot__grid">
<div class="partner-spot__copy">
<span class="partner-spot__eyebrow">British Action Academy</span>
<h2 id="baa-title" class="partner-spot__title">Where screen combat starts.</h2>
<p class="partner-spot__lede">The UK's leading screen action training academy. They train the stunt performers you see in blockbuster films — and their Saber Masterclass is taught by Andreas Petrides, Obi-Wan Kenobi's stunt double on Star Wars: Episode I.</p>
<div class="partner-spot__pills">
<span class="partner-spot__pill">Saber Masterclass</span>
<span class="partner-spot__pill">Screen Combat</span>
<span class="partner-spot__pill">Stunt Training</span>
<span class="partner-spot__pill">Online Courses</span>
</div>
<div class="partner-spot__stats">
<div>
<div class="partner-spot__stat-num">30+</div>
<div class="partner-spot__stat-label">Years industry experience<br>(Andreas Petrides)</div>
</div>
<div>
<div class="partner-spot__stat-num">04</div>
<div class="partner-spot__stat-label">Phases of combat<br>progression</div>
</div>
<div>
<div class="partner-spot__stat-num">UK</div>
<div class="partner-spot__stat-label">Working from a<br>professional-production base</div>
</div>
</div>
<a class="partner-spot__cta" href="/events-courses/british-action-academy/">Meet British Action Academy</a>
</div>
<div class="partner-spot__media">
<img src="https://portal.britishactionacademy.com/assets/images/public/SaberMasterclass2026Dark.jpg" alt="British Action Academy Saber Masterclass — Andreas Petrides teaching screen combat">
</div>
</div>
</section>
</div>
<!-- ==========================================================================
SECTION 5 — What you'll learn (plain carbon, 6-cell grid)
========================================================================== -->
<a id="tf-trust-prose-cells-2" data-tf-family="trust-prose-cells" style="display:contents"></a>
<section class="learn-grid" aria-labelledby="learn-title">
<div class="learn-grid__inner">
<div class="learn-grid__head">
<span class="learn-grid__eyebrow">What you'll learn</span>
<h2 id="learn-title" class="learn-grid__title">Six things a YouTube tutorial can't teach you.</h2>
<p class="learn-grid__lede">Because none of them come with a set, a camera, and a partner throwing back.</p>
</div>
<div class="learn-grid__grid">
<article class="learn-grid__cell">
<div class="learn-grid__glyph" aria-hidden="true">
<svg viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6"><path d="M12 3v18M4 12h16M6 6l12 12M18 6L6 18"></path></svg>
</div>
<h3 class="learn-grid__cell-title">Screen combat fundamentals.</h3>
<p class="learn-grid__cell-body">Stance, distance, rhythm, and the safety discipline every routine starts with.</p>
</article>
<article class="learn-grid__cell">
<div class="learn-grid__glyph" aria-hidden="true">
<svg viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6"><path d="M3 21 21 3M6 3l3 3M18 21l-3-3M12 3v6M12 15v6"></path></svg>
</div>
<h3 class="learn-grid__cell-title">Saber choreography.</h3>
<p class="learn-grid__cell-body">Single-blade and double-ended. Style, flow, and the moment before the strike.</p>
</article>
<article class="learn-grid__cell">
<div class="learn-grid__glyph" aria-hidden="true">
<svg viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6"><path d="M3 12h18M6 6h12M8 18h8M4 9h4M16 9h4M4 15h4M16 15h4"></path></svg>
</div>
<h3 class="learn-grid__cell-title">Duelling grades.</h3>
<p class="learn-grid__cell-body">The difference between clean sparring and cinematic combat — and where each fits.</p>
</article>
<article class="learn-grid__cell">
<div class="learn-grid__glyph" aria-hidden="true">
<svg viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6"><path d="M12 3l9 4v6c0 5-3.5 7.5-9 8-5.5-.5-9-3-9-8V7z"></path><path d="m8 12 3 3 5-6"></path></svg>
</div>
<h3 class="learn-grid__cell-title">Stage & camera safety.</h3>
<p class="learn-grid__cell-body">How to duel without hurting anyone — including your kit.</p>
</article>
<article class="learn-grid__cell">
<div class="learn-grid__glyph" aria-hidden="true">
<svg viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6"><rect x="3" y="6" width="14" height="12"></rect><path d="m17 10 4-3v10l-4-3z"></path><circle cx="9" cy="12" r="2.5"></circle></svg>
</div>
<h3 class="learn-grid__cell-title">Performance to camera.</h3>
<p class="learn-grid__cell-body">The angle. The sell. The way stunt work looks like the real thing.</p>
</article>
<article class="learn-grid__cell">
<div class="learn-grid__glyph" aria-hidden="true">
<svg viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6"><path d="M4 20 20 4M14 4h6v6"></path><path d="M4 14v6h6"></path></svg>
</div>
<h3 class="learn-grid__cell-title">The career pathway.</h3>
<p class="learn-grid__cell-body">How students go from Phase I to hireable action performer on real productions.</p>
</article>
</div>
</div>
</section>
<!-- ==========================================================================
SECTION 6 — How the partnership works (hull-plate Variant G vertical)
3-step editorial with numbered milestone markers
========================================================================== -->
<a id="tf-other-1" data-tf-family="other" style="display:contents"></a>
<section class="editorial-3step" aria-labelledby="fit-title">
<div class="editorial-3step__inner">
<div class="editorial-3step__head">
<span class="editorial-3step__eyebrow">How it fits together</span>
<h2 id="fit-title" class="editorial-3step__title">The workshop, the school, and you.</h2>
<p class="editorial-3step__lede">Three moving parts. One craft.</p>
</div>
<div class="editorial-3step__list">
<article class="editorial-3step__step">
<div class="editorial-3step__marker">
<div class="editorial-3step__marker-circle">01</div>
</div>
<div class="editorial-3step__body">
<span class="editorial-3step__label">Step one · The workshop</span>
<h3 class="editorial-3step__step-title">We ship you a duelling-grade hilt from the workshop.</h3>
<p class="editorial-3step__step-body">Duelling-grade electronics. Reinforced emitter. Impact-tested. Ready for a real training session, not a costume drawer.</p>
</div>
</article>
<article class="editorial-3step__step">
<div class="editorial-3step__marker">
<div class="editorial-3step__marker-circle">02</div>
</div>
<div class="editorial-3step__body">
<span class="editorial-3step__label">Step two · The school</span>
<h3 class="editorial-3step__step-title">You train with a real academy.</h3>
<p class="editorial-3step__step-body">You book direct with the partner — they run the class, we don't touch the booking. Instructors are working professionals with real production credits.</p>
</div>
</article>
<article class="editorial-3step__step">
<div class="editorial-3step__marker">
<div class="editorial-3step__marker-circle">03</div>
</div>
<div class="editorial-3step__body">
<span class="editorial-3step__label">Step three · The loop</span>
<h3 class="editorial-3step__step-title">You come back for more kit and the community.</h3>
<p class="editorial-3step__step-body">Second hilt. Different core. Blog stories. Community discussion. The workshop is the loop, not the destination.</p>
</div>
</article>
</div>
</div>
</section>
<!-- ==========================================================================
SECTION 7 — Community pull-quote band (plain carbon, ~200px)
========================================================================== -->
<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>
<!-- ==========================================================================
SECTION 8 — Call-to-partner recruitment band (charcoal-warm)
========================================================================== -->
<div class="recruit-wrap">
<a id="tf-inpage-cta-1" data-tf-family="inpage-cta" style="display:contents"></a>
<section class="recruit" aria-labelledby="recruit-title">
<span class="recruit__top-hairline" aria-hidden="true"></span>
<div class="recruit__inner">
<span class="recruit__badge">Partnership</span>
<span class="recruit__eyebrow">Are you an action academy?</span>
<h2 id="recruit-title" class="recruit__title">Talk to us.</h2>
<p class="recruit__lede">We're selective. Two more partner slots this year. If you run action training in the UK — screen combat, saber choreography, stunt work — and your standards match ours, we want to hear from you.</p>
<div class="recruit__chips">
<span class="recruit__chip">UK only</span>
<span class="recruit__chip">Professional productions preferred</span>
<span class="recruit__chip">We check credentials</span>
</div>
<a class="recruit__cta" href="/contact/?reason=partnership">Reach out to the team</a>
</div>
</section>
</div>
<!-- ==========================================================================
SECTION 9 — Trust chip band (plain carbon, MAS49-locked 4-chip shape)
========================================================================== -->
<a id="tf-trust-chip-strip-1" data-tf-family="trust-chip-strip" style="display:contents"></a>
<section class="trust-chips" aria-label="Trust signals">
<div class="trust-chips__inner">
<div class="trust-chips__chip">
<div class="trust-chips__icon" aria-hidden="true">
<svg viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6"><rect x="3" y="6" width="15" height="12"></rect><path d="M18 10h3l2 3v5h-5"></path><circle cx="8" cy="19" r="1.6"></circle><circle cx="17" cy="19" r="1.6"></circle></svg>
</div>
<div>
<span class="trust-chips__label">24-Hour Dispatch</span>
<p class="trust-chips__caption">From UK + US warehouses</p>
</div>
</div>
<div class="trust-chips__chip">
<div class="trust-chips__icon" aria-hidden="true">
<svg viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6"><path d="M4 5h16v11H8l-4 4z"></path><path d="M8 10h8M8 13h5"></path></svg>
</div>
<div>
<span class="trust-chips__label">UK Customer Service</span>
<p class="trust-chips__caption">Live chat during working hours</p>
</div>
</div>
<div class="trust-chips__chip">
<div class="trust-chips__icon" aria-hidden="true">
<svg viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6"><path d="M12 3l8 3v6c0 5-3.5 8-8 9-4.5-1-8-4-8-9V6z"></path><path d="m8 12 3 3 5-6"></path></svg>
</div>
<div>
<span class="trust-chips__label">1-Year Duelling Warranty</span>
<p class="trust-chips__caption">Covers the way you'll actually use it</p>
</div>
</div>
<div class="trust-chips__chip">
<div class="trust-chips__icon" aria-hidden="true">
<svg viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6"><path d="m12 3 2.6 5.9 6.4.6-4.9 4.3 1.5 6.3L12 16.9l-5.6 3.2 1.5-6.3L3 9.5l6.4-.6z"></path></svg>
</div>
<div>
<span class="trust-chips__label">2,400+ Five-Star Reviews</span>
<p class="trust-chips__caption">From duellists and collectors</p>
</div>
</div>
</div>
</section>
<!-- ==========================================================================
SECTION 10 — Newsletter capture band (MAS68 verbatim)
========================================================================== -->
<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 11 — Site footer (MAS64 / MAS68 verbatim)
========================================================================== -->
<footer class="site-footer" role="contentinfo">
<div class="site-footer__inner">
<div class="site-footer__grid">
<div class="site-footer__brand-col">
<a class="site-footer__brand" href="/">ART<span>SABERS</span></a>
<p class="site-footer__blurb">Every character, every Saber Core, every duelling grade. Real hilts. Real support. From factory floor to your door.</p>
</div>
<div>
<h4 class="site-footer__col-title">Shop</h4>
<ul class="site-footer__list">
<li><a href="/lightsabers/">Lightsabers</a></li>
<li><a href="/helmets/">Helmets</a></li>
<li><a href="/parts/">Parts & Accessories</a></li>
<li><a href="/offers/">Offers & Deals</a></li>
</ul>
</div>
<div>
<h4 class="site-footer__col-title">Learn</h4>
<ul class="site-footer__list">
<li><a href="/chronicles/">Chronicles</a></li>
<li><a href="/events-courses/">Events & Courses</a></li>
<li><a href="/saber-cores/">Saber Cores explained</a></li>
<li><a href="/duelling-grades/">Duelling grades</a></li>
</ul>
</div>
<div>
<h4 class="site-footer__col-title">Support</h4>
<ul class="site-footer__list">
<li><a href="/contact/">Contact us</a></li>
<li><a href="/faq/">FAQ</a></li>
<li><a href="/shipping/">Shipping & delivery</a></li>
<li><a href="/warranty/">Warranty</a></li>
</ul>
</div>
<div>
<h4 class="site-footer__col-title">Workshop</h4>
<ul class="site-footer__list">
<li><a href="/about/">About</a></li>
<li><a href="/press/">Press</a></li>
<li><a href="/wholesale/">Wholesale</a></li>
<li><a href="/partnerships/">Partnerships</a></li>
</ul>
</div>
</div>
<div class="site-footer__bottom">
<div>© 2026 ARTSABERS · A Nerdworks Brand</div>
<div class="site-footer__pay">
<span>Stripe</span>
<span>Apple Pay</span>
<span>Mollie</span>
<span>USD · CAD · AUD · NZD</span>
</div>
</div>
</div>
</footer>
</body>
</html>