:root{--font-inter:Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;--font-poppins:Poppins, Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;--red:#f0445f;--red-button:#b70e2d;--red-dark:#940b24;--red-soft:#c8102e1a;--navy:#151925;--navy-dark:#0d0f16;--black:#0a0b0e;--white:#f5f6f8;--muted:#f5f6f899;--muted-2:#f5f6f8a3;--border:#f5f6f814;--card:#11131a;--card-hover:#161922;--surface:#0f1117;--radius:12px;--radius-sm:6px}*,:before,:after{box-sizing:border-box;margin:0;padding:0}html{scroll-behavior:smooth;-webkit-tap-highlight-color:transparent}body{background:var(--black);color:var(--white);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;line-height:1.6;overflow-x:hidden}p{margin-bottom:18px}h1,h2,h3,h4,h5,h6,.section-title,.f-block-title,.c-title,.btn-primary,.btn-white,.btn-outline,.btn-outline-white{font-family:Poppins,Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif}
/* --- Focus rings matching brand --- */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid var(--red-button);outline-offset:3px}
.hamburger:focus-visible{border-radius:6px}
.skip-link{z-index:2000;background:var(--white);color:var(--black);border-radius:var(--radius-sm);padding:10px 16px;font-weight:700;text-decoration:none;position:fixed;top:8px;left:8px;transform:translateY(-160%)}.skip-link:focus{transform:translateY(0)}::-webkit-scrollbar{width:6px}::-webkit-scrollbar-track{background:var(--black)}::-webkit-scrollbar-thumb{background:#ffffff1f;border-radius:3px}.page{min-height:100vh;display:none}.page.active{animation:.3s ease-out both pageIn;display:block}@keyframes pageIn{0%{opacity:0}to{opacity:1}}nav{z-index:999;-webkit-backdrop-filter:blur(18px);border-bottom:1px solid var(--border);background:#0a0b0ecc;justify-content:space-between;align-items:center;height:68px;padding:0 56px;display:flex;position:fixed;top:0;left:0;right:0}.nav-logo{font-family:var(--font-poppins), "Poppins", sans-serif;letter-spacing:.02em;color:var(--white);cursor:pointer;font-size:16px;font-weight:800;text-decoration:none}.nav-logo span{color:var(--red);font-weight:900}.nav-links{gap:36px;list-style:none;display:flex}.nav-links a{color:var(--muted);letter-spacing:.01em;cursor:pointer;font-size:13px;font-weight:500;text-decoration:none;transition:color .2s}.nav-links a:hover,.nav-links a.active{color:var(--white)}.nav-cta{background:var(--white);color:var(--black);font-family:var(--font-poppins), "Poppins", sans-serif;border:1.5px solid var(--white);cursor:pointer;letter-spacing:.02em;border-radius:999px;align-items:center;min-height:44px;padding:9px 22px;font-size:12px;font-weight:700;text-decoration:none;transition:color .2s ease,background .2s ease,border-color .2s ease,transform .2s ease;display:inline-flex}.nav-cta:hover{color:var(--white);background:0 0}.hamburger{cursor:pointer;z-index:1001;background:0 0;border:none;flex-direction:column;justify-content:center;align-items:center;gap:5px;min-width:44px;min-height:44px;padding:11px;display:none}.hamburger span{background:var(--white);border-radius:2px;width:22px;height:2px;transition:transform .35s cubic-bezier(.4,0,.2,1),opacity .35s cubic-bezier(.4,0,.2,1);display:block}.hamburger span{transition:transform .35s cubic-bezier(0.32, 0.72, 0, 1),opacity .25s cubic-bezier(0.23, 1, 0.32, 1)}.hamburger.open span:first-child{transform:translateY(7px)rotate(45deg)}.hamburger.open span:nth-child(2){opacity:0;transform:scaleX(0)}.hamburger.open span:nth-child(3){transform:translateY(-7px)rotate(-45deg)}.mob-nav{z-index:998;-webkit-backdrop-filter:blur(20px);opacity:0;pointer-events:none;background:#0a0b0efa;flex-direction:column;gap:0;padding:24px 28px 40px;transition:transform .35s cubic-bezier(.4,0,.2,1),opacity .3s;display:flex;position:fixed;inset:68px 0 0;transform:translateY(-16px)}.mob-nav.open{opacity:1;pointer-events:auto;transform:translateY(0)}.mob-nav a{color:var(--muted);border-bottom:1px solid var(--border);cursor:pointer;padding:16px 0;font-size:17px;font-weight:600;text-decoration:none;transition:color .2s,transform .2s,padding-left .2s}.mob-nav a:hover,.mob-nav a:active{color:var(--white);padding-left:4px}.mob-nav .mob-cta{color:var(--black);letter-spacing:.04em;text-transform:uppercase;background:var(--white);text-align:center;border-bottom:none;border-radius:999px;margin-top:12px;padding:12px 24px;font-size:15px;font-weight:700}.mob-nav .mob-cta:hover{color:var(--white);background:0 0}.btn-primary{background:var(--red-button);color:var(--white);font-family:var(--font-poppins), "Poppins", sans-serif;cursor:pointer;letter-spacing:.01em;border:none;border-radius:999px;padding:14px 32px;font-size:13px;font-weight:700;text-decoration:none;transition:background .2s,transform .15s;display:inline-block}.btn-primary:hover{background:var(--red-dark);transform:translateY(-1px)}.btn-outline{color:var(--white);font-family:var(--font-poppins), "Poppins", sans-serif;cursor:pointer;letter-spacing:.01em;background:0 0;border:1.5px solid #f5f6f840;border-radius:999px;padding:13px 32px;font-size:13px;font-weight:700;text-decoration:none;transition:border-color .2s,transform .15s;display:inline-block}.btn-outline:hover{border-color:#f5f6f88c;transform:translateY(-1px)}.scroll-line{background:#fff3;width:36px;height:1px}.stats-bar{background:var(--navy-dark);border-top:1px solid var(--border);border-bottom:1px solid var(--border);padding:24px 64px;display:flex;overflow:hidden}.stat-item{text-align:center;border-right:1px solid var(--border);flex:1;padding:0 20px}.stat-item:last-child{border-right:none}.stat-num{font-family:var(--font-poppins), "Poppins", sans-serif;color:var(--white);margin-bottom:6px;font-size:32px;font-weight:800;line-height:1;display:block}.stat-label{letter-spacing:.08em;text-transform:uppercase;color:var(--muted);font-size:12px}.stat{text-align:center;border-right:1px solid var(--border);flex:1;padding:0 20px}.stat:last-child{border-right:none}.stat strong{font-family:var(--font-poppins), "Poppins", sans-serif;color:var(--white);margin-bottom:6px;font-size:32px;font-weight:800;line-height:1;display:block}.stat span{letter-spacing:.08em;text-transform:uppercase;color:var(--muted);font-size:12px}section{padding:110px 72px}.section-tag{letter-spacing:.14em;color:var(--red);text-transform:uppercase;margin-bottom:14px;font-size:12px;font-weight:600;display:block}.section-title{font-family:var(--font-poppins), "Poppins", sans-serif;text-transform:none;letter-spacing:-.01em;margin-bottom:18px;font-size:clamp(32px,3.6vw,48px);font-weight:800;line-height:1.05}.section-sub{color:var(--muted);max-width:540px;margin-bottom:18px;font-size:16px;line-height:1.7}.about{background:var(--navy);grid-template-columns:1fr 1fr;align-items:stretch;gap:0;display:grid}.about-visual{background:linear-gradient(135deg, var(--navy-dark) 0%, var(--black) 100%);justify-content:center;align-items:center;min-height:520px;display:flex;position:relative;overflow:hidden}.about-visual:before{content:"";background:radial-gradient(circle,#c8102e1a 0%,#0000 50%),linear-gradient(#ffffff05 1px,#0000 1px) 0 0/56px 56px,linear-gradient(90deg,#ffffff05 1px,#0000 1px) 0 0/56px 56px;position:absolute;inset:0}.formation{z-index:1;flex-direction:column;align-items:center;gap:24px;display:flex;position:relative}.formation-row{justify-content:center;gap:20px;display:flex}.player-dot{width:42px;height:42px;font-family:var(--font-poppins), "Poppins", sans-serif;color:#ffffffe6;background:#c8102e1a;border:2px solid #c8102e8c;border-radius:50%;justify-content:center;align-items:center;font-size:12px;font-weight:700;display:flex}.about-accent-num{font-family:var(--font-poppins), "Poppins", sans-serif;color:#ffffff06;-webkit-user-select:none;user-select:none;font-size:140px;font-weight:900;line-height:1;position:absolute;bottom:16px;right:24px}.about-text{flex-direction:column;justify-content:center;padding:90px 72px;display:flex}.about-quote{font-family:var(--font-poppins), "Poppins", sans-serif;border-left:3px solid var(--red);color:#ffffffe6;margin:20px 0 24px;padding-left:20px;font-size:18px;font-weight:700;line-height:1.5}.about-body{color:var(--muted);margin-bottom:18px;font-size:15px;line-height:1.85}.about-pillars{grid-template-columns:1fr 1fr;gap:12px;margin:28px 0;display:grid}.pillar{background:var(--card);border:1px solid var(--border);border-radius:var(--radius-sm);padding:16px 18px}.pillar-title{font-family:var(--font-poppins), "Poppins", sans-serif;letter-spacing:.02em;text-transform:none;margin-bottom:4px;font-size:13px;font-weight:700}.pillar-desc{color:var(--muted);margin-bottom:18px;font-size:13px}.section-split{background:var(--navy);grid-template-columns:1fr 1fr;align-items:stretch;gap:0;display:grid}.split-left{background:linear-gradient(135deg, var(--navy-dark) 0%, var(--black) 100%);justify-content:center;align-items:center;min-height:520px;display:flex;position:relative;overflow:hidden}.split-left:before{content:"";background:radial-gradient(circle,#c8102e1a 0%,#0000 50%),linear-gradient(#ffffff05 1px,#0000 1px) 0 0/56px 56px,linear-gradient(90deg,#ffffff05 1px,#0000 1px) 0 0/56px 56px;position:absolute;inset:0}.formation-dot{width:38px;height:38px;font-family:var(--font-poppins), "Poppins", sans-serif;color:#fff;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);background:linear-gradient(135deg,#c8102e38 0%,#c8102e1a 100%);border:2px solid #c8102ea6;border-radius:50%;justify-content:center;align-items:center;font-size:11px;font-weight:700;transition:transform .25s,background .25s;display:flex;position:absolute;transform:translate(-50%,-50%);box-shadow:0 4px 12px #00000040}.split-right{flex-direction:column;justify-content:center;padding:90px 72px;display:flex}.quote{font-family:var(--font-poppins), "Poppins", sans-serif;border-left:3px solid var(--red);color:#ffffffe6;margin:20px 0 24px;padding-left:20px;font-size:18px;font-weight:700;line-height:1.5}.values-grid{grid-template-columns:1fr 1fr;gap:12px;margin:28px 0;display:grid}.value-card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius-sm);padding:16px 18px}.value-card p{color:var(--muted);margin:4px 0 18px;font-size:13px}.value-title{font-family:var(--font-poppins), "Poppins", sans-serif;letter-spacing:.02em;text-transform:none;font-size:13px;font-weight:700}.btn-sm{font-family:var(--font-poppins), "Poppins", sans-serif;background:var(--red-button);color:var(--white);white-space:nowrap;border-radius:999px;align-items:center;min-height:44px;padding:10px 22px;font-size:12px;font-weight:700;text-decoration:none;transition:background .2s;display:inline-block}.btn-outline-light{color:var(--white);font-family:var(--font-poppins), "Poppins", sans-serif;cursor:pointer;background:0 0;border:1.5px solid #f5f6f859;border-radius:999px;padding:12px 28px;font-size:13px;font-weight:700;text-decoration:none;transition:border-color .2s;display:inline-block}.btn-outline-light:hover{border-color:#f5f6f8b3}.prog-header{justify-content:space-between;align-items:flex-end;margin-bottom:48px;display:flex}
.prog-header{flex-direction:column;align-items:flex-start;gap:10px;margin-bottom:clamp(40px, 4vw, 56px)}
.prog-header .section-sub{max-width:56ch !important;font-size:16.5px !important;margin-bottom:0}.prog-grid{grid-template-columns:repeat(3,1fr);gap:20px;display:grid}.prog-card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:34px 28px;transition:transform .25s,border-color .25s,box-shadow .25s;position:relative;overflow:hidden}.prog-card:hover{border-color:#c8102e59;transform:translateY(-4px);box-shadow:0 16px 40px #00000047}.prog-number{font-family:var(--font-poppins), "Poppins", sans-serif;color:var(--red);letter-spacing:.04em;font-size:13px;font-weight:900;position:absolute;top:24px;right:24px}.prog-icon{background:var(--red-soft);border:1px solid #c8102e2e;border-radius:10px;justify-content:center;align-items:center;width:44px;height:44px;margin-bottom:18px;display:flex}.prog-icon svg{width:22px;height:22px;stroke:var(--red);fill:none;stroke-width:2px}.prog-icon-svg{width:22px;height:22px;color:var(--red)}.prog-age{letter-spacing:.12em;color:var(--red);text-transform:uppercase;margin-bottom:8px;font-size:12px;font-weight:600;display:block}.prog-name{font-family:var(--font-poppins), "Poppins", sans-serif;text-transform:none;margin-bottom:6px;font-size:24px;font-weight:800}.prog-range{color:var(--muted);margin-bottom:16px;font-size:13px}.prog-desc{color:var(--muted);margin-bottom:18px;font-size:14px;line-height:1.75}.prog-list{margin-bottom:24px;list-style:none}.prog-list li{color:#ffffffb3;border-bottom:1px solid var(--border);padding:7px 0 7px 18px;font-size:13px;position:relative}.prog-list li:before{content:"";background:var(--red);border-radius:50%;width:6px;height:6px;position:absolute;top:50%;left:0;transform:translateY(-50%)}.prog-list li:last-child{border-bottom:none}.price-grid{grid-template-columns:repeat(3,1fr);gap:20px;display:grid}.price-card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);flex-direction:column;padding:34px 28px;transition:transform .25s,border-color .25s,box-shadow .25s;display:flex;position:relative;overflow:hidden}.price-card:hover{border-color:#c8102e59;transform:translateY(-4px);box-shadow:0 16px 40px #00000047}.price-card.featured{border-color:#c8102e66}.price-badge{letter-spacing:.1em;text-transform:uppercase;color:#4ade80;background:#22c55e1a;border:1px solid #22c55e38;border-radius:999px;padding:5px 12px;font-size:10px;font-weight:700;position:absolute;top:24px;right:24px}.price-name{font-family:var(--font-poppins), "Poppins", sans-serif;text-transform:none;margin-bottom:10px;font-size:20px;font-weight:800}.price-amount{font-family:var(--font-poppins), "Poppins", sans-serif;color:var(--white);margin-bottom:4px;font-size:38px;font-weight:900}.price-amount span{color:var(--muted);margin-left:4px;font-size:13px;font-weight:600}.price-desc{color:var(--muted);margin-bottom:20px;font-size:13px;line-height:1.6}.price-list{flex-grow:1;margin-bottom:24px;list-style:none}.price-list li{color:#ffffffb3;border-bottom:1px solid var(--border);padding:7px 0 7px 18px;font-size:13px;position:relative}.price-list li:before{content:"";background:var(--red);border-radius:50%;width:6px;height:6px;position:absolute;top:50%;left:0;transform:translateY(-50%)}.price-list li:last-child{border-bottom:none}.price-mini-grid{grid-template-columns:repeat(3,1fr);gap:16px;display:grid}.price-mini-card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);text-align:center;padding:22px 20px}.price-mini-label{letter-spacing:.08em;text-transform:uppercase;color:var(--red);margin-bottom:8px;font-size:12px;font-weight:700}.price-mini-amount{font-family:var(--font-poppins), "Poppins", sans-serif;color:var(--white);margin-bottom:4px;font-size:26px;font-weight:800}.price-mini-note{color:var(--muted);margin-bottom:18px;font-size:12px}@media (max-width:900px){.price-grid,.price-mini-grid{grid-template-columns:1fr}}.cta-strip{background:var(--navy);border-top:1px solid var(--border);border-bottom:1px solid var(--border);justify-content:space-between;align-items:center;padding:80px 72px;display:flex}.cta-strip-text h2{font-family:var(--font-poppins), "Poppins", sans-serif;text-transform:none;margin-bottom:10px;font-size:36px;font-weight:800;line-height:1.1}.cta-strip-text p{color:var(--muted);margin-bottom:18px;font-size:14px}.cta-strip-btns{gap:14px;display:flex}.btn-white{background:var(--white);color:var(--black);font-family:var(--font-poppins), "Poppins", sans-serif;cursor:pointer;border:none;border-radius:999px;padding:13px 28px;font-size:13px;font-weight:700;text-decoration:none;transition:opacity .2s;display:inline-block}.btn-white:hover{opacity:.92}.btn-outline-white{color:var(--white);font-family:var(--font-poppins), "Poppins", sans-serif;cursor:pointer;background:0 0;border:1.5px solid #f5f6f859;border-radius:999px;padding:12px 28px;font-size:13px;font-weight:700;text-decoration:none;transition:border-color .2s;display:inline-block}.btn-outline-white:hover{border-color:#f5f6f8b3}.trainers-grid{grid-template-columns:repeat(3,1fr);gap:20px;margin-top:48px;display:grid}.trainer-card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:32px 28px;transition:transform .25s;position:relative}.trainer-card:hover{transform:translateY(-3px)}.trainer-card:before{content:"";background:var(--red);border-radius:var(--radius) var(--radius) 0 0;height:3px;position:absolute;top:0;left:0;right:0}.trainer-initials{background:linear-gradient(135deg, var(--red-dark), var(--red-button));width:60px;height:60px;font-family:var(--font-poppins), "Poppins", sans-serif;color:#fff;border-radius:50%;justify-content:center;align-items:center;margin-bottom:18px;font-size:18px;font-weight:900;display:flex}.trainer-name{font-family:var(--font-poppins), "Poppins", sans-serif;text-transform:none;margin-bottom:3px;font-size:18px;font-weight:800}.trainer-role{letter-spacing:.08em;text-transform:uppercase;color:var(--red);margin-bottom:14px;font-size:12px;font-weight:600}.trainer-bio{color:var(--muted);margin-bottom:18px;font-size:14px;line-height:1.75}.values-grid{grid-template-columns:repeat(4,1fr);gap:20px;margin-top:48px;display:grid}.val-card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:32px 26px}.val-num{font-family:var(--font-poppins), "Poppins", sans-serif;color:#c8102e2e;margin-bottom:12px;font-size:44px;font-weight:900;line-height:1}.val-title{font-family:var(--font-poppins), "Poppins", sans-serif;text-transform:none;margin-bottom:8px;font-size:17px;font-weight:800}.val-desc{color:var(--muted);margin-bottom:18px;font-size:14px;line-height:1.75}.plan-filters{flex-wrap:wrap;gap:10px;margin:32px 0;display:flex}.filter-btn{letter-spacing:.06em;text-transform:uppercase;color:var(--muted);border:1px solid var(--border);cursor:pointer;background:0 0;border-radius:999px;padding:8px 18px;font-size:12px;font-weight:600;transition:color .2s ease,background .2s ease,border-color .2s ease}.filter-btn.active,.filter-btn:hover{color:var(--white);background:var(--red-soft);border-color:#c8102e73}.events-list{background:var(--border);border-radius:var(--radius);flex-direction:column;gap:1px;display:flex;overflow:hidden}.ev-row{background:var(--card);grid-template-columns:90px 1fr auto;align-items:center;gap:24px;padding:24px 28px;transition:background .2s;display:grid}.ev-row:hover{background:var(--card-hover)}.ev-date{text-align:center}.ev-day{font-family:var(--font-poppins), "Poppins", sans-serif;color:var(--red);font-size:30px;font-weight:800;line-height:1;display:block}.ev-month{letter-spacing:.1em;text-transform:uppercase;color:var(--muted);font-size:10px;font-weight:600}.ev-type-tag{letter-spacing:.14em;text-transform:uppercase;color:var(--red);margin-bottom:4px;font-size:10px;font-weight:600}.ev-title{font-family:var(--font-poppins), "Poppins", sans-serif;text-transform:none;margin-bottom:4px;font-size:16px;font-weight:700}.ev-meta{color:var(--muted);margin-bottom:18px;font-size:13px}.ev-right{text-align:right;flex-direction:column;align-items:flex-end;gap:6px;display:flex}.badge-open{letter-spacing:.1em;text-transform:uppercase;color:#4ade80;background:#22c55e1a;border:1px solid #22c55e38;border-radius:999px;padding:5px 12px;font-size:10px;font-weight:700;display:block}.badge-vol{letter-spacing:.1em;text-transform:uppercase;color:#f87171;background:#ef44441a;border:1px solid #ef444438;border-radius:999px;padding:5px 12px;font-size:10px;font-weight:700;display:block}.btn-sm{font-family:var(--font-poppins), "Poppins", sans-serif;background:var(--red-button);color:#fff;cursor:pointer;white-space:nowrap;border:none;border-radius:999px;align-items:center;min-height:44px;padding:10px 18px;font-size:12px;font-weight:700;transition:background .2s;display:inline-flex}.btn-sm:hover{background:var(--red-dark)}.form-wrap{max-width:680px;margin:0 auto}.f-notice{background:var(--red-soft);border-left:3px solid var(--red);color:#ffffffbf;border-radius:0 var(--radius-sm) var(--radius-sm) 0;margin-bottom:28px;padding:14px 18px;font-size:13px;line-height:1.6}.f-notice strong{color:var(--red)}.f-block{margin-bottom:28px}.f-block-title{font-family:var(--font-poppins), "Poppins", sans-serif;letter-spacing:.04em;text-transform:uppercase;border-bottom:1px solid var(--border);margin-bottom:20px;padding-bottom:12px;font-size:13px;font-weight:700}.f-grid{grid-template-columns:1fr 1fr;gap:16px;display:grid}.f-grid.full{grid-template-columns:1fr}.f-field{flex-direction:column;gap:7px;display:flex}.f-field label{letter-spacing:.08em;text-transform:uppercase;color:var(--muted);font-size:12px;font-weight:600}.f-field input,.f-field select,.f-field textarea{background:var(--surface);color:var(--white);font-family:var(--font-inter), "Inter", sans-serif;border-radius:var(--radius-sm);border:1px solid #f5f6f847;outline:none;padding:12px 15px;font-size:14px;transition:border-color .2s}.f-field input:focus,.f-field select:focus,.f-field textarea:focus{border-color:#c8102e80}.f-field select option{background:#12151f}.f-field textarea{resize:vertical;min-height:110px}.minor-warn{color:#ffffffa6;background:#fbbf2414;border-left:3px solid #fbbf24;margin:18px 0;padding:12px 16px;font-size:12px;line-height:1.6;display:none}.minor-warn.show{display:block}.minor-warn strong{color:#fbbf24}.priv-check{align-items:flex-start;gap:10px;margin-top:10px;display:flex}.priv-check input[type=checkbox]{width:20px;height:20px;accent-color:var(--red-button);flex-shrink:0;margin-top:1px}.priv-check label{color:var(--muted);cursor:pointer;font-size:14px;line-height:1.6}.priv-check label a{color:var(--red);text-underline-offset:2px;text-decoration:underline}.form-honeypot{width:1px;height:1px;position:absolute;left:-10000px;overflow:hidden}.form-privacy-note{color:var(--muted);margin-top:18px;font-size:13px;line-height:1.6}.form-privacy-note a{color:var(--red);text-underline-offset:2px}.f-submit{font-family:var(--font-poppins), "Poppins", sans-serif;letter-spacing:.01em;background:var(--red-button);color:#fff;cursor:pointer;border-radius:var(--radius);border:none;width:100%;margin-top:24px;padding:16px 0;font-size:14px;font-weight:700;transition:background .2s}.f-submit:hover{background:var(--red-dark)}.f-submit:disabled{cursor:wait;opacity:.72}.f-success{text-align:center;background:var(--card);border-radius:var(--radius);border:1px solid var(--border);padding:56px 32px;display:none}.f-success.show{display:block}.f-success-mark{color:#22c55e;background:#22c55e1f;border:2px solid #22c55e;border-radius:50%;justify-content:center;align-items:center;width:56px;height:56px;margin:0 auto 18px;font-size:22px;display:flex}.f-success h3{font-family:var(--font-poppins), "Poppins", sans-serif;text-transform:none;margin-bottom:8px;font-size:24px;font-weight:800}.f-success p{color:var(--muted);margin-bottom:18px;font-size:14px;line-height:1.75}.contact-cols{grid-template-columns:1fr 1fr;gap:56px;margin-top:40px;display:grid}.c-item{border-bottom:1px solid var(--border);align-items:flex-start;gap:16px;padding:20px 0;display:flex}.c-icon{background:var(--red-soft);width:40px;height:40px;color:var(--red);font-size:14px;font-weight:700;font-family:var(--font-poppins), "Poppins", sans-serif;border:1px solid #c8102e2e;border-radius:10px;flex-shrink:0;justify-content:center;align-items:center;display:flex}.c-title{letter-spacing:.1em;text-transform:uppercase;color:var(--white);margin-bottom:4px;font-size:12px;font-weight:700}.c-val{color:var(--muted);margin-bottom:18px;font-size:14px;line-height:1.6}.c-val a{color:var(--red);text-decoration:none}.soc-grid{grid-template-columns:repeat(3,1fr);gap:20px;margin-top:48px;display:grid}.soc-grid.single{grid-template-columns:minmax(0,520px)}.soc-card{background:var(--card);color:var(--white);border:1px solid var(--border);border-radius:var(--radius);flex-direction:column;gap:10px;padding:32px 26px;text-decoration:none;transition:transform .25s;display:flex}.soc-card:hover{transform:translateY(-3px)}.soc-platform-icon{background:var(--red-soft);width:44px;height:44px;font-family:var(--font-poppins), "Poppins", sans-serif;color:var(--red);letter-spacing:.04em;border:1px solid #c8102e2e;border-radius:10px;justify-content:center;align-items:center;font-size:13px;font-weight:900;display:flex}.soc-name{font-family:var(--font-poppins), "Poppins", sans-serif;text-transform:none;font-size:18px;font-weight:800}.soc-handle{color:var(--muted);font-size:13px}.soc-desc{color:var(--muted);flex:1;margin-bottom:18px;font-size:13px;line-height:1.7}.soc-link{letter-spacing:.06em;color:var(--red);font-size:12px;font-weight:600}.media-grid{grid-template-columns:repeat(4,1fr);gap:16px;margin-top:48px;display:grid}.media-item{aspect-ratio:1;background:var(--card);cursor:pointer;border-radius:var(--radius);border:1px solid var(--border);justify-content:center;align-items:center;transition:transform .2s;display:flex;position:relative;overflow:hidden}.media-item:hover{transform:scale(1.02)}.media-placeholder{flex-direction:column;justify-content:center;align-items:center;gap:10px;width:100%;height:100%;display:flex}.media-placeholder-icon{background:var(--red-soft);border:1px solid #c8102e2e;border-radius:50%;justify-content:center;align-items:center;width:44px;height:44px;display:flex}.media-placeholder-icon svg{fill:none;width:20px;height:20px;stroke:var(--red);stroke-width:2px}.media-placeholder-lbl{color:var(--muted);letter-spacing:.04em;font-size:11px}.media-overlay{color:#fffc;letter-spacing:.02em;background:#0a0b0eeb;padding:10px 14px;font-size:12px;transition:transform .25s ease,opacity .25s ease;position:absolute;bottom:0;left:0;right:0;transform:translateY(100%)}.media-item:hover .media-overlay{transform:translateY(0)}footer{background:var(--navy-dark);border-top:1px solid var(--border);padding:64px 72px}.foot-grid{grid-template-columns:2fr 1fr 1fr 1fr;gap:48px;display:grid}.foot-logo{font-family:var(--font-poppins), "Poppins", sans-serif;letter-spacing:.02em;color:var(--white);margin-bottom:14px;font-size:17px;font-weight:800}.foot-logo span{color:var(--red);font-weight:900}.foot-tag{color:var(--muted-2);max-width:260px;font-size:14px;line-height:1.7}.foot-col-title{letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-bottom:16px;font-size:12px;font-weight:700}.foot-col ul{margin:0;padding:0;list-style:none}.foot-col ul li{margin-bottom:10px}.foot-col ul li a{color:var(--muted-2);cursor:pointer;font-size:14px;text-decoration:none;transition:color .2s}.foot-col ul li a:hover{color:var(--white)}.foot-bottom{border-top:1px solid var(--border);justify-content:space-between;align-items:center;margin-top:44px;padding-top:22px;display:flex}.foot-bottom p{color:var(--muted-2);margin:0;font-size:14px}.foot-legal{gap:20px;display:flex}.foot-legal a{color:var(--muted-2);align-items:center;min-height:44px;font-size:14px;text-decoration:none;transition:color .2s;display:inline-flex}.foot-legal a:hover{color:var(--white);text-decoration:underline}@media (max-width:767px){body{font-size:15px;line-height:1.55}p{margin-bottom:14px}.section-title{margin-bottom:14px;font-size:clamp(26px,7vw,34px);line-height:1.1}.stat-num,.stat strong{font-size:26px}.stat-label,.stat span{font-size:11px}.prog-name{font-size:20px}.prog-range{font-size:12px}.about-quote,.quote{font-size:16px}.about-body{font-size:14px}.pillar-title,.value-title{font-size:13px}.pillar-desc,.value-card p{font-size:12px}.btn-primary,.btn-outline,.btn-sm,.nav-cta,.btn-outline-light{padding:12px 24px;font-size:12px}.section-tag,.prog-age{letter-spacing:.1em;font-size:11px}.mob-nav a{padding:14px 0;font-size:16px}.mob-nav .mob-cta{font-size:13px}nav{height:62px;padding:0 20px}section,.about-text,.split-right{padding:64px 20px}}@media (max-width:389px){body{font-size:14px}}@media (max-width:1100px){.section-split{grid-template-columns:1fr}.split-left{min-height:360px}.split-right{padding:64px 48px}.stats-bar{flex-wrap:wrap}.stat,.stat-item{border-bottom:1px solid var(--border);flex:50%}.stat:nth-child(odd),.stat-item:nth-child(odd){border-right:1px solid var(--border)}.stat:nth-last-child(-n+2),.stat-item:nth-last-child(-n+2){border-bottom:none}}@media (max-width:900px){nav{height:64px;padding:0 24px}.nav-links,.nav-cta{display:none}.nav-item-mobile-only{display:block}.hamburger{display:flex;z-index:1002}section{padding:72px 24px}.about{grid-template-columns:1fr}.about-visual{min-height:240px}.about-text{padding:48px 24px}.about-quote{font-size:16px}.section-split{grid-template-columns:1fr}.split-left{min-height:320px}.split-right{padding:48px 24px}.prog-grid,.trainers-grid,.values-grid{grid-template-columns:1fr}.prog-header{flex-direction:column;align-items:flex-start;gap:12px}.prog-card{padding:28px 24px}.soc-grid,.media-grid{grid-template-columns:repeat(2,1fr)}.contact-cols{grid-template-columns:1fr;gap:32px}.c-item{padding:16px 0}.cta-strip{text-align:center;flex-direction:column;gap:24px;padding:56px 24px}.cta-strip-btns{justify-content:center}.cta-strip-text h2{font-size:28px}.ev-row{grid-template-columns:72px 1fr;gap:14px}.ev-right{flex-direction:row;align-items:center;gap:10px;margin-top:12px;display:flex}.f-grid{grid-template-columns:1fr}.f-block{padding:20px}.f-field input,.f-field select,.f-field textarea{font-size:16px}.stats-bar{flex-wrap:wrap;gap:0;padding:20px 24px}.stat-item,.stat{border-right:none;border-bottom:1px solid var(--border);flex:50%;padding:14px 0}.stat-item:nth-child(odd),.stat:nth-child(odd){border-right:1px solid var(--border)}.stat-item:nth-last-child(-n+2),.stat:nth-last-child(-n+2){border-bottom:none}.stat-num,.stat strong{font-size:26px}.stat-label,.stat span{font-size:12px}footer{padding:48px 24px}.foot-grid{grid-template-columns:1fr 1fr;gap:32px}.section-title{font-size:30px}}@media (max-width:480px){.btn-primary,.btn-outline{padding:12px 24px;font-size:12px}.stat-num,.stat strong{font-size:22px}.stat-label,.stat span{font-size:12px}.section-title{font-size:26px}.prog-card{padding:24px 20px}.soc-grid,.media-grid{grid-template-columns:1fr}.ev-row{grid-template-columns:56px 1fr}nav{padding:0 16px}section{padding:56px 16px}.split-right,.about-text{padding:36px 16px}footer{padding:40px 16px}.foot-grid{grid-template-columns:1fr;gap:28px}.foot-col-title{margin-bottom:12px}.foot-col ul li{margin-bottom:8px}.foot-col ul li a{align-items:center;min-height:44px;display:inline-flex}.foot-bottom{text-align:center;flex-direction:column;gap:16px}.foot-legal{justify-content:center;gap:24px}}.route-grid{background:var(--border);grid-template-columns:repeat(3,1fr);gap:1px;display:grid}@media (max-width:900px){.route-grid{grid-template-columns:1fr}}@media (max-width:480px){.route-grid{grid-template-columns:1fr}}@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,:before,:after{transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}


/* ============================================================================
   BE ONE ACADEMY — VISUAL SYSTEM "MATCHDAY PROGRAMME"
   ----------------------------------------------------------------------------
   THESIS      A voetbalschool's site set like a printed matchday programme:
               ink-black stock, one spot red used at field scale, a visible
               hairline grid, condensed squad-number display type. It refuses
               the glowing dark-neon hero and the soft-shadowed feature-card
               grid that every football academy ships.
   OWN-WORLD   #08080a stock, #101014 second stock, one spot red (#d40f2c fill,
               #ff3b52 mark). Rules instead of shadows, floods instead of glows,
               square corners instead of radii. Archivo variable at 62-80% width
               for display, Inter for reading. One curve on the page: the crest.
   STORY       A parent or player lands, reads what is trained and when, sees a
               price with no small print, and asks via WhatsApp or the form.
   FIRST VIEW  Left 58% ink: running-head rule, condensed h1 at 68px, sub, two
               buttons. Right 42%: a full red flood carrying a hairline pitch
               diagram, with the crest — a perfect SVG circle, non-scaling
               stroke — sitting where the centre circle would be. A black
               credentials band closes the panel.
   FORM        Print-derived: rules, floods, crop marks, tabular numerals.
   ----------------------------------------------------------------------------
   Markup, copy, metadata and URLs are frozen. Every decision below is made
   from the stylesheet alone, driven through the original custom properties so
   the inline style="background:var(--card)" attributes baked into the page
   snapshots re-skin with everything else.
   ========================================================================== */


/* --- 1. Type ---------------------------------------------------------------
   Two self-hosted variable faces. Archivo carries a 62-125% width axis from a
   single file, which is what makes a condensed display voice affordable here:
   no second webfont for the jersey-number cut.                              */

@font-face{
  font-family:"Archivo";
  src:url("/static-old/static/fonts/archivo-var.woff2") format("woff2");
  font-weight:100 900;
  font-stretch:62% 125%;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:"Inter";
  src:url("/static-old/static/fonts/inter-var.woff2") format("woff2");
  font-weight:100 900;
  font-style:normal;
  font-display:swap;
}


/* --- 2. Tokens ------------------------------------------------------------- */

:root{
  --font-display:"Archivo", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-text:"Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;

  /* the original names, re-pointed: this is what re-skins the frozen inline styles */
  --font-inter:var(--font-text);
  --font-poppins:var(--font-display);

  --ink:#08080a;          /* page stock */
  --ink-2:#0b0b0e;        /* nav + footer stock */
  --stock:#101014;        /* alternating section stock */
  --plate:#141418;        /* plates, inputs, media slots */
  --plate-hi:#1a1a20;

  --red-flood:#d40f2c;    /* the fill. white text on it clears 5.3:1 */
  --red-flood-hi:#b80c26;
  --red-mark:#ff3b52;     /* the mark. on ink it clears 5.6:1 */

  --paper:#f4f4f6;
  --muted:rgba(244,244,246,.58);
  --muted-2:rgba(244,244,246,.74);

  --rule:rgba(244,244,246,.115);       /* the hairline the whole page is built from */
  --rule-2:rgba(244,244,246,.22);
  --rule-on-red:rgba(255,255,255,.26);

  /* original names kept alive for the frozen inline styles */
  --black:var(--ink);
  --navy:var(--stock);
  --navy-dark:var(--ink-2);
  --surface:var(--plate);
  --card:var(--plate);
  --card-hover:var(--plate-hi);
  --white:var(--paper);
  --red:var(--red-mark);
  --red-button:var(--red-flood);
  --red-dark:var(--red-flood-hi);
  --red-soft:rgba(212,15,44,.11);
  --border:var(--rule);
  --radius:0px;
  --radius-sm:0px;

  /* one page gutter shared by nav, sections, stats band, floods and footer */
  --gutter:max(clamp(20px, 5vw, 64px), calc((100vw - 1340px) / 2));

  --ease-out:cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out:cubic-bezier(0.77, 0, 0.175, 1);
  --ease-drawer:cubic-bezier(0.32, 0.72, 0, 1);

  /* The one curve on the page. A real SVG circle with a non-scaling stroke,
     so the ring stays a true hairline circle at any size instead of the
     faceted seam a border-radius ring leaves at this diameter.
     r is 118 of a 240 box, not 119: a non-scaling stroke keeps its width in
     device pixels however far the background is scaled down, so the ring
     needs real slack inside the box or the smallest rendered size clips it
     to a flat at the four cardinal points. Two units is that slack. */
  --crest:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 240'%3E%3Ccircle cx='120' cy='120' r='118' fill='none' stroke='%23ffffff' stroke-width='1.6' vector-effect='non-scaling-stroke'/%3E%3Ccircle cx='120' cy='120' r='105' fill='none' stroke='%23ffffff' stroke-opacity='.3' stroke-width='1' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E");
}


/* --- 3. Base --------------------------------------------------------------- */

body{
  background:var(--ink);
  color:var(--paper);
  font-family:var(--font-text);
  font-size:16px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  font-synthesis-weight:none;
}
/* the previous pass laid a turbulence grain over every page; this world is
   printed, not filmed, so the texture comes from rules and floods instead */
body:before{content:none !important;display:none !important}

h1,h2,h3,h4,h5,h6,
.section-title,.hero-title,.f-block-title,.c-title,
.btn-primary,.btn-white,.btn-outline,.btn-outline-white{
  font-family:var(--font-display);
  font-optical-sizing:auto;
}
p{margin-bottom:16px;text-wrap:pretty}

/* Browser surfaces are part of the design, not the browser's business. */
::selection{background:var(--red-flood);color:#fff}
::-webkit-scrollbar{width:11px}
::-webkit-scrollbar-track{background:var(--ink)}
::-webkit-scrollbar-thumb{background:rgba(244,244,246,.15);border:4px solid var(--ink)}
::-webkit-scrollbar-thumb:hover{background:rgba(244,244,246,.28)}
input,select,textarea{caret-color:var(--red-mark)}
/* Any link the frozen markup leaves unclassed still belongs to the palette;
   without this the privacy page ships a browser-default blue at 2.1:1. Set at
   element specificity so every class-scoped link rule below still wins. */
a{color:var(--red-mark);text-underline-offset:.22em;text-decoration-thickness:1px}

a:focus-visible,button:focus-visible,input:focus-visible,
select:focus-visible,textarea:focus-visible{
  outline:2px solid var(--red-mark);
  outline-offset:2px;
  border-radius:0;
}
.skip-link{
  background:var(--red-flood);
  color:#fff;
  border-radius:0;
  font-family:var(--font-display);
  font-stretch:82%;
  font-weight:700;
  letter-spacing:.1em;
  text-transform:uppercase;
  font-size:12px;
}

/* Every circle and arc the frozen markup already draws in real SVG keeps a
   true hairline at any rendered size. */
.trust-pill svg *,
.prog-icon-svg *,
.media-placeholder-icon svg *{vector-effect:non-scaling-stroke}


/* --- 4. Section rhythm + the running head ----------------------------------
   The programme device that replaces the red kicker: the eyebrow the frozen
   markup puts above almost every heading stops being a coloured label and
   becomes the rule that opens the section.                                  */

section{
  padding:clamp(72px, 7.6vw, 116px) var(--gutter);
  position:relative;
}
main.page > section + section,
main.page > .cta-strip{border-top:1px solid var(--rule)}

.section-tag,.hero-tag{
  display:flex;
  align-items:center;
  gap:16px;
  width:100%;
  margin:0 0 clamp(28px, 3.2vw, 44px);
  font-family:var(--font-display);
  font-stretch:80%;
  font-weight:600;
  font-size:10.5px;
  line-height:1;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:rgba(244,244,246,.52);
}
.section-tag:before,.hero-tag:before{
  content:"";
  flex:none;
  width:22px;
  height:6px;
  background:var(--red-flood);
}
.section-tag:after{
  content:"";
  flex:1 1 auto;
  height:1px;
  min-width:24px;
  background:var(--rule);
}

:is(h1,h2,h3).section-title{
  font-family:var(--font-display);
  font-stretch:68%;
  font-weight:800;
  font-size:clamp(33px, 4.4vw, 66px);
  line-height:.96;
  letter-spacing:-.012em;
  color:var(--paper);
  margin:0 0 20px;
  max-width:21ch;
  text-wrap:balance;
}
:is(h1,h2,h3).section-title:before{
  content:"";
  display:block;
  width:26px;
  height:3px;
  margin-bottom:18px;
  background:var(--red-flood);
}
.section-tag + :is(h1,h2,h3).section-title:before,
.hero-tag + :is(h1,h2,h3).section-title:before{content:none}
.prog-card :is(h1,h2,h3).section-title:before{content:none}

.section-sub{
  color:var(--muted-2);
  max-width:68ch;
  margin-bottom:16px;
  font-size:16.5px;
  line-height:1.72;
}
.section-sub a{color:var(--paper);text-decoration:underline;text-decoration-color:var(--red-flood)}
.section-sub a:hover{color:var(--red-mark)}

/* the pricing pages use p.section-title for the amount itself */
p.section-title{
  font-family:var(--font-display);
  font-stretch:66%;
  font-weight:800;
  line-height:.9;
  letter-spacing:-.02em;
  color:var(--paper);
  font-variant-numeric:tabular-nums;
}

blockquote.quote{
  position:relative;
  margin:6px 0 26px;
  padding-top:22px;
  font-family:var(--font-display);
  font-stretch:76%;
  font-weight:600;
  font-size:clamp(19px, 1.7vw, 25px);
  line-height:1.32;
  letter-spacing:-.008em;
  color:var(--paper);
  max-width:30ch;
}
blockquote.quote:before{
  content:"";
  position:absolute;
  top:0;
  left:0;
  width:34px;
  height:3px;
  background:var(--red-flood);
}


/* --- 5. Navigation --------------------------------------------------------- */

nav{
  height:66px;
  padding:0 var(--gutter);
  background:var(--ink-2);
  border-bottom:1px solid var(--rule);
  -webkit-backdrop-filter:none;
  backdrop-filter:none;
  /* The row is a wordmark, eight links and a filled CTA. Left to itself it
     runs out of width long before the hamburger used to take over, and the
     first thing to go is the gap: the wordmark ends up set solid against
     HOME and the CTA loses the page gutter. A floor on the gap and no
     shrink on the two ends means the row either fits or is not shown. */
  gap:clamp(20px, 2.4vw, 44px);
}
.nav-logo,.nav-cta{flex:0 0 auto}
.nav-links{min-width:0;flex-wrap:nowrap}
.nav-logo{
  position:relative;
  padding-left:17px;
  font-family:var(--font-display);
  font-stretch:74%;
  font-weight:800;
  font-size:16px;
  line-height:1;
  letter-spacing:.03em;
  text-transform:uppercase;
  color:var(--paper);
}
.nav-logo:before{
  content:"";
  position:absolute;
  left:0;
  top:50%;
  width:5px;
  height:16px;
  background:var(--red-flood);
  transform:translateY(-50%);
}
.nav-logo span{color:var(--red);font-weight:800}

.nav-links{gap:clamp(18px, 2.2vw, 32px)}
.nav-links a{
  position:relative;
  display:inline-block;
  padding:6px 0;
  font-family:var(--font-display);
  font-stretch:84%;
  font-weight:600;
  font-size:11px;
  letter-spacing:.13em;
  text-transform:uppercase;
  color:rgba(244,244,246,.6);
  transition:color .18s var(--ease-out);
}
.nav-links a:after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:2px;
  background:var(--red-flood);
  transform:scaleX(0);
  transform-origin:0 50%;
  transition:transform .2s var(--ease-out);
}
.nav-links a.active{color:var(--paper)}
.nav-links a.active:after{transform:scaleX(1)}
@media (hover:hover) and (pointer:fine){
  .nav-links a:hover{color:var(--paper)}
  .nav-links a:hover:after{transform:scaleX(1)}
}

.nav-cta{
  background:var(--red-flood);
  color:#fff;
  border:1px solid var(--red-flood);
  border-radius:0;
  min-height:40px;
  padding:11px 22px;
  font-family:var(--font-display);
  font-stretch:82%;
  font-weight:700;
  font-size:11px;
  letter-spacing:.14em;
  text-transform:uppercase;
  transition:background .16s var(--ease-out),border-color .16s var(--ease-out);
}
.nav-cta:hover{background:var(--red-flood-hi);border-color:var(--red-flood-hi);color:#fff}
.nav-cta:active{transform:translateY(1px)}

.hamburger span{background:var(--paper);border-radius:0;width:20px;height:2px}
nav.mobile-menu-open .hamburger span:first-child{transform:translateY(7px) rotate(45deg)}
nav.mobile-menu-open .hamburger span:nth-child(2){opacity:0;transform:scaleX(0)}
nav.mobile-menu-open .hamburger span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

.mob-nav{
  background:var(--ink);
  -webkit-backdrop-filter:none;
  backdrop-filter:none;
  padding:8px var(--gutter) 40px;
  inset:66px 0 0;
  transform:translateY(-10px);
  transition:transform .34s var(--ease-drawer),opacity .24s var(--ease-out);
}
.mob-nav.open,.mob-nav--open{opacity:1;pointer-events:auto;transform:translateY(0)}
.mob-nav a{
  border-bottom:1px solid var(--rule);
  padding:19px 0;
  font-family:var(--font-display);
  font-stretch:74%;
  font-weight:700;
  font-size:24px;
  letter-spacing:-.005em;
  color:var(--paper);
  transition:color .18s var(--ease-out),padding-left .22s var(--ease-out);
}
.mob-nav a:hover,.mob-nav a:active{color:var(--red-mark);padding-left:6px}
.mob-nav .mob-cta{
  background:var(--red-flood);
  color:#fff;
  border-radius:0;
  margin-top:26px;
  padding:17px 24px;
  font-stretch:82%;
  font-size:13px;
  letter-spacing:.14em;
  text-transform:uppercase;
}
.mob-nav .mob-cta:hover{background:var(--red-flood-hi);color:#fff;padding-left:24px}


/* --- 6. Hero ---------------------------------------------------------------
   The first viewport is the whole argument: ink on the left, a spot-red flood
   on the right carrying the pitch as hairline geometry, and the crest sitting
   where the centre circle would be. The crest ring is a real SVG circle with
   vector-effect:non-scaling-stroke; a border-radius ring at this diameter
   shows its seams.                                                          */

.hero{
  display:grid;
  grid-template-columns:1.32fr 1fr;
  min-height:100vh;
  min-height:100svh;
  padding:66px 0 0;
  background:var(--ink);
  overflow:hidden;
}
.hero-left{
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:clamp(56px, 6vw, 92px) clamp(32px, 5vw, 88px) clamp(56px, 6vw, 92px) var(--gutter);
}
.hero-tag{margin-bottom:26px}
.hero-tag:after{
  content:"";
  flex:1 1 auto;
  height:1px;
  min-width:24px;
  background:var(--rule);
}
.hero-title{
  font-family:var(--font-display);
  font-stretch:66%;
  font-weight:800;
  font-size:clamp(38px, 4.9vw, 74px);
  line-height:.94;
  letter-spacing:-.018em;
  color:var(--paper);
  margin:0 0 24px;
  max-width:15ch;
  text-wrap:balance;
}
.hero-title .red{color:var(--red-mark)}
.hero-sub{
  color:var(--muted-2);
  max-width:46ch;
  margin-bottom:36px;
  font-size:17px;
  line-height:1.7;
}
.hero-btns{display:flex;flex-wrap:wrap;gap:12px}

.hero-right{
  /* How far the crest sits above the centre of the panel. Zero here: at desk
     widths the panel is tall enough that the centre is where the mark wants to
     be, and the pitch's halfway line is drawn through it. The phone block in
     section 20 is the only place this is non-zero, and everything that has to
     stay registered to the mark — the pitch, the halo pool — is expressed in
     terms of it so the three cannot drift apart. */
  --crest-lift:0px;
  position:relative;
  display:grid;
  grid-template-rows:1fr auto;
  min-height:600px;
  background:var(--red-flood);
  border-left:1px solid var(--rule-on-red);
  overflow:hidden;
}
/* The pitch, drawn as geometry rather than illustration. The centre circle is
   deliberately absent — the crest is the centre circle. */
.hero-visual{
  position:absolute;
  inset:0;
  pointer-events:none;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 340 520'%3E%3Cg fill='none' stroke='%23ffffff' stroke-opacity='.17' stroke-width='1.2' vector-effect='non-scaling-stroke'%3E%3Crect x='24' y='24' width='292' height='472'/%3E%3Cpath d='M24 260H316'/%3E%3Crect x='82' y='24' width='176' height='72'/%3E%3Crect x='130' y='24' width='80' height='28'/%3E%3Crect x='82' y='424' width='176' height='72'/%3E%3Crect x='130' y='468' width='80' height='28'/%3E%3Cpath d='M138 96A40 40 0 0 0 202 96'/%3E%3Cpath d='M138 424A40 40 0 0 1 202 424'/%3E%3C/g%3E%3Cg fill='%23ffffff' fill-opacity='.22'%3E%3Ccircle cx='170' cy='72' r='2.2'/%3E%3Ccircle cx='170' cy='448' r='2.2'/%3E%3C/g%3E%3C/svg%3E") 50% calc(50% - 34px - var(--crest-lift, 0px)) / cover no-repeat,
    linear-gradient(196deg, #e0142f 0%, #d40f2c 46%, #ad0a22 100%);
}

.hero-logo-wrap{
  position:relative;
  z-index:2;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:32px clamp(20px, 3vw, 40px);
}
.hero-logo-ring{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:4px;
  width:clamp(212px, 23vw, 316px);
  height:clamp(212px, 23vw, 316px);
  aspect-ratio:1;
  padding:26px;
  background:var(--crest) 50% 50% / 100% 100% no-repeat;
  text-align:center;
}
.hero-logo-top{
  font-family:var(--font-display);
  font-stretch:84%;
  font-weight:600;
  font-size:clamp(12px, 1.05vw, 15px);
  letter-spacing:.32em;
  text-indent:.32em;
  text-transform:uppercase;
  color:rgba(255,255,255,.86);
  line-height:1;
}
.hero-logo-main{
  font-family:var(--font-display);
  font-stretch:64%;
  font-weight:900;
  font-size:clamp(40px, 4.6vw, 64px);
  line-height:.88;
  letter-spacing:.005em;
  text-transform:uppercase;
  color:#fff;
}
.hero-logo-sub{
  display:flex;
  align-items:center;
  gap:10px;
  margin-top:10px;
  font-family:var(--font-display);
  font-stretch:88%;
  font-weight:600;
  font-size:9.5px;
  letter-spacing:.36em;
  text-indent:.36em;
  text-transform:uppercase;
  color:rgba(255,255,255,.72);
  line-height:1;
}
.hero-logo-sub:before,.hero-logo-sub:after{
  content:"";
  width:18px;
  height:1px;
  background:rgba(255,255,255,.42);
}

/* credentials plate: a black band closing the red panel */
.hero-trust{
  position:relative;
  z-index:2;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:center;
  gap:8px clamp(16px, 2vw, 26px);
  padding:15px clamp(18px, 2.4vw, 28px);
  background:var(--ink);
  border-top:1px solid var(--rule-on-red);
}
.trust-pill{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-family:var(--font-display);
  font-stretch:84%;
  font-weight:600;
  font-size:9px;
  letter-spacing:.11em;
  text-transform:uppercase;
  color:rgba(244,244,246,.68);
}
.trust-pill svg{width:12px;height:12px;flex:none;fill:none;stroke:var(--red-mark);stroke-width:1.7px}


/* --- 7. Stats band ---------------------------------------------------------
   Four terms, ruled into columns, sitting on the page gutter. The red rule on
   top carries the hero's flood down into the body of the page.              */

.stats-bar{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:0;
  padding:0 var(--gutter);
  background:var(--ink);
  border-top:2px solid var(--red-flood);
  border-bottom:1px solid var(--rule);
  flex-wrap:nowrap;
}
.stat{
  display:flex;
  flex-direction:column;
  gap:7px;
  padding:clamp(22px, 2.6vw, 34px) clamp(16px, 2vw, 30px);
  border-left:1px solid var(--rule);
  text-align:left;
}
.stat:first-child{border-left:0;padding-left:0}
.stat:last-child{padding-right:0}
.stat strong{
  font-family:var(--font-display);
  font-stretch:70%;
  font-weight:800;
  font-size:clamp(20px, 2vw, 28px);
  line-height:1;
  letter-spacing:.005em;
  text-transform:uppercase;
  color:var(--paper);
}
.stat span{
  font-family:var(--font-display);
  font-stretch:88%;
  font-weight:500;
  font-size:10.5px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--muted);
}


/* --- 8. Split section: the team sheet --------------------------------------
   The formation panel becomes a real half-scale pitch in hairlines with the
   eleven squad numbers on it. Every circle here is an SVG circle with a
   non-scaling stroke, so the discs stay perfectly round at any zoom.        */

.section-split{
  display:grid;
  grid-template-columns:.86fr 1.14fr;
  gap:0;
  padding:0;
  background:var(--ink);
}
.split-left{
  display:flex;
  align-items:center;
  justify-content:center;
  padding:clamp(56px, 6vw, 96px) clamp(24px, 3vw, 48px);
  background:var(--stock);
  border-right:1px solid var(--rule);
  min-height:560px;
}
.split-left:before{content:none;display:none}
.formation-viz:before,.formation-viz:after{content:none;display:none}
.formation-viz{
  position:relative;
  border:0;
  border-radius:0;
  box-shadow:none;
  height:clamp(400px, 44vw, 620px);
  width:auto;
  max-width:84%;
  aspect-ratio:300 / 460;
  top:auto;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 460'%3E%3Cg fill='none' stroke='%23f4f4f6' stroke-opacity='.26' stroke-width='1' vector-effect='non-scaling-stroke'%3E%3Crect x='.5' y='.5' width='299' height='459'/%3E%3Cpath d='M0 230H300'/%3E%3Ccircle cx='150' cy='230' r='46'/%3E%3Crect x='68' y='0' width='164' height='62'/%3E%3Crect x='110' y='0' width='80' height='24'/%3E%3Crect x='68' y='398' width='164' height='62'/%3E%3Crect x='110' y='436' width='80' height='24'/%3E%3C/g%3E%3Cg fill='%23f4f4f6' fill-opacity='.26'%3E%3Ccircle cx='150' cy='230' r='2.4'/%3E%3Ccircle cx='150' cy='44' r='2.4'/%3E%3Ccircle cx='150' cy='416' r='2.4'/%3E%3C/g%3E%3C/svg%3E") 50% 50% / 100% 100% no-repeat;
}
.formation-dot{
  position:absolute;
  display:grid;
  place-items:center;
  width:34px;
  height:34px;
  margin:0;
  border:0;
  border-radius:0;
  -webkit-backdrop-filter:none;
  backdrop-filter:none;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 34 34'%3E%3Ccircle cx='17' cy='17' r='16.2' fill='%2308080a' stroke='%23f4f4f6' stroke-opacity='.55' stroke-width='1' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E") 50% 50% / 100% 100% no-repeat;
  font-family:var(--font-display);
  font-stretch:70%;
  font-weight:800;
  font-size:13px;
  line-height:1;
  letter-spacing:.01em;
  color:var(--paper);
  font-variant-numeric:tabular-nums;
  transform:translate(-50%,-50%);
  transition:transform .28s var(--ease-out);
}
/* the keeper wears the flood */
.formation-dot:last-child{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 34 34'%3E%3Ccircle cx='17' cy='17' r='16.2' fill='%23d40f2c' stroke='%23ffffff' stroke-opacity='.75' stroke-width='1' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E");
  color:#fff;
}
@media (hover:hover) and (pointer:fine){
  .formation-viz:hover .formation-dot{transform:translate(-50%,-50%) scale(1.1)}
}

.split-right{
  padding:clamp(64px, 6.4vw, 112px) var(--gutter) clamp(64px, 6.4vw, 112px) clamp(36px, 4vw, 72px);
}
.split-right .section-sub{max-width:58ch;font-size:16px}
.split-right .values-grid{
  grid-template-columns:1fr 1fr;
  gap:0;
  margin:34px 0 32px;
  border-top:1px solid var(--rule);
}
.value-card{
  padding:20px 22px 20px 0;
  background:none;
  border:0;
  border-bottom:1px solid var(--rule);
}
.value-card:nth-child(even){padding-left:22px;border-left:1px solid var(--rule)}
.value-title{
  font-family:var(--font-display);
  font-stretch:76%;
  font-weight:700;
  font-size:16px;
  letter-spacing:.005em;
  text-transform:uppercase;
  color:var(--paper);
  margin-bottom:5px;
}
.value-card p{color:var(--muted);font-size:14px;line-height:1.6;margin:0}


/* --- 9. Buttons ------------------------------------------------------------
   Square, condensed, uppercase. No radius, no lift, no shadow: the press is
   the only motion, at 110ms, because these are read far more than pressed.  */

.btn-primary,.btn-outline,.btn-white,.btn-outline-white,.btn-outline-light,.f-submit,.nav-cta{
  font-family:var(--font-display);
  font-stretch:82%;
  font-weight:700;
  font-size:12px;
  letter-spacing:.14em;
  text-transform:uppercase;
  border-radius:0;
  line-height:1;
}
.btn-primary,.btn-outline,.btn-white,.btn-outline-white,.btn-outline-light{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  align-self:flex-start;
  min-height:48px;
  padding:15px 30px;
  transition:background-color .16s var(--ease-out),border-color .16s var(--ease-out),color .16s var(--ease-out);
}
.btn-primary{background:var(--red-flood);color:#fff;border:1px solid var(--red-flood)}
.btn-primary:hover{background:var(--red-flood-hi);border-color:var(--red-flood-hi);transform:none}
.btn-primary:active{transform:translateY(1px)}

.btn-outline{background:none;color:var(--paper);border:1px solid var(--rule-2)}
.btn-outline:hover{border-color:var(--paper);background:rgba(244,244,246,.05);transform:none}
.btn-outline:active{transform:translateY(1px)}

.btn-white{background:var(--red-flood);color:#fff;border:1px solid var(--red-flood)}
.btn-white:hover{background:var(--red-flood-hi);border-color:var(--red-flood-hi);color:#fff;opacity:1}
.btn-white:active{transform:translateY(1px)}

.btn-outline-white,.btn-outline-light{
  background:none;
  color:var(--paper);
  border:1px solid var(--rule-2);
}
.btn-outline-white:hover,.btn-outline-light:hover{background:rgba(244,244,246,.05);color:var(--paper);border-color:var(--paper)}
.btn-outline-white:active,.btn-outline-light:active{transform:translateY(1px)}

/* the small action link: a ruled label, not a sixteenth pill on the page */
.btn-sm{
  display:inline-flex;
  align-items:center;
  min-height:40px;
  padding:0 0 8px;
  background:none;
  border:0;
  border-bottom:1px solid var(--rule-2);
  border-radius:0;
  font-family:var(--font-display);
  font-stretch:84%;
  font-weight:700;
  font-size:11px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--paper);
  white-space:nowrap;
  transition:color .16s var(--ease-out),border-color .16s var(--ease-out);
}
.btn-sm:hover{background:none;color:var(--red-mark);border-bottom-color:var(--red-flood)}
.btn-sm:active{transform:translateY(1px)}


/* --- 10. Programme entries -------------------------------------------------
   The frozen markup hands over three-up card grids. Rather than three floating
   panels with a shadow each, they become one ruled band aligned to the page
   gutter: elevation declared once, in rules.                                */

.prog-header{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:8px;
  margin-bottom:clamp(36px, 4vw, 56px);
}
.prog-header .section-sub{max-width:62ch !important;margin-bottom:0}

.prog-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:0;
  border-top:1px solid var(--rule);
  border-bottom:1px solid var(--rule);
}
.prog-card{
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  padding:clamp(30px, 3vw, 46px) clamp(22px, 2.4vw, 34px);
  background:none;
  border:0;
  border-left:1px solid var(--rule);
  border-radius:0;
  overflow:visible;
  transition:background-color .22s var(--ease-out);
}
.prog-card:first-child{border-left:0;padding-left:0}
.prog-card:last-child{padding-right:0}
.prog-card:hover{transform:none;box-shadow:none;border-color:var(--rule);background:rgba(244,244,246,.022)}
.prog-card:first-child:hover,.prog-card:last-child:hover{background:rgba(244,244,246,.022)}

/* the squad number, set as an outline numeral in the corner */
.prog-number{
  position:absolute;
  top:clamp(14px, 1.6vw, 22px);
  right:clamp(4px, 1vw, 12px);
  font-family:var(--font-display);
  font-stretch:62%;
  font-weight:800;
  font-size:clamp(52px, 5.4vw, 82px);
  line-height:.8;
  letter-spacing:-.02em;
  color:transparent;
  -webkit-text-stroke:1px rgba(244,244,246,.14);
  font-variant-numeric:tabular-nums;
  pointer-events:none;
}
.prog-card:last-child .prog-number{right:0}

.prog-icon{
  display:flex;
  align-items:center;
  justify-content:center;
  width:46px;
  height:46px;
  margin-bottom:20px;
  background:var(--plate);
  border:1px solid var(--rule);
  border-radius:0;
}
.prog-icon svg,.prog-icon-svg{width:21px;height:21px;color:var(--red-mark);stroke:var(--red-mark);fill:none;stroke-width:1.4px}

.prog-age{
  display:inline-block;
  margin-bottom:14px;
  padding:5px 9px;
  background:var(--red-flood);
  color:#fff;
  font-family:var(--font-display);
  font-stretch:84%;
  font-weight:700;
  font-size:10px;
  line-height:1.2;
  letter-spacing:.14em;
  text-transform:uppercase;
}
.prog-name{
  font-family:var(--font-display);
  font-stretch:72%;
  font-weight:800;
  font-size:clamp(20px, 1.7vw, 25px);
  line-height:1.02;
  letter-spacing:-.005em;
  color:var(--paper);
  margin-bottom:8px;
  text-transform:none;
}
.prog-range{
  color:var(--muted);
  margin-bottom:18px;
  font-size:13px;
  letter-spacing:.02em;
  font-variant-numeric:tabular-nums;
}
.prog-desc{color:var(--muted-2);margin-bottom:20px;font-size:14.5px;line-height:1.72}
.prog-list{width:100%;margin-bottom:24px;list-style:none;border-top:1px solid var(--rule)}
.prog-list li{
  position:relative;
  padding:10px 0 10px 18px;
  border-bottom:1px solid var(--rule);
  color:var(--muted-2);
  font-size:13.5px;
}
.prog-list li:before{
  content:"";
  position:absolute;
  left:0;
  top:50%;
  width:8px;
  height:1px;
  border-radius:0;
  background:var(--red-mark);
  transform:translateY(-50%);
}
.prog-card .btn-sm{margin-top:auto}

/* The one flooded entry: the package the pricing page marks as best value.
   Only that card leads with its badge, which is what this selector reads. */
.prog-card:has(> .prog-age:first-child){
  background:var(--red-flood);
  border-left-color:var(--rule-on-red);
  padding-left:clamp(22px, 2.4vw, 34px);
  padding-right:clamp(22px, 2.4vw, 34px);
  margin:-1px 0;
  border-top:1px solid var(--red-flood);
  border-bottom:1px solid var(--red-flood);
}
.prog-card:has(> .prog-age:first-child):hover{background:var(--red-flood)}
.prog-card:has(> .prog-age:first-child) .prog-age{background:#fff;color:var(--red-flood)}
.prog-card:has(> .prog-age:first-child) .prog-name,
.prog-card:has(> .prog-age:first-child) p.section-title{color:#fff}
.prog-card:has(> .prog-age:first-child) .prog-range{color:rgba(255,255,255,.82)}
.prog-card:has(> .prog-age:first-child) .prog-desc{color:rgba(255,255,255,.92)}
.prog-card:has(> .prog-age:first-child) .prog-number{-webkit-text-stroke-color:rgba(255,255,255,.3)}
.prog-card:has(> .prog-age:first-child) .prog-list li{color:rgba(255,255,255,.92);border-bottom-color:var(--rule-on-red)}
.prog-card:has(> .prog-age:first-child) .prog-list{border-top-color:var(--rule-on-red)}
.prog-card:has(> .prog-age:first-child) .prog-list li:before{background:#fff}
.prog-card:has(> .prog-age:first-child) .btn-sm{color:#fff;border-bottom-color:rgba(255,255,255,.5)}
.prog-card:has(> .prog-age:first-child) .btn-sm:hover{color:#fff;border-bottom-color:#fff}


/* --- 11. Values, pillars, trainers ----------------------------------------- */

.values-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:0;
  margin-top:clamp(36px, 4vw, 56px);
  border-top:1px solid var(--rule);
  border-bottom:1px solid var(--rule);
}
.val-card{
  padding:clamp(26px, 2.8vw, 40px) clamp(20px, 2.2vw, 32px);
  background:none;
  border:0;
  border-left:1px solid var(--rule);
  border-radius:0;
}
.val-card:first-child{border-left:0;padding-left:0}
.val-card:last-child{padding-right:0}
.val-num{
  font-family:var(--font-display);
  font-stretch:64%;
  font-weight:800;
  font-size:clamp(36px, 3.4vw, 50px);
  line-height:.82;
  letter-spacing:-.02em;
  color:var(--red-mark);
  margin-bottom:16px;
  font-variant-numeric:tabular-nums;
}
.val-title{
  font-family:var(--font-display);
  font-stretch:76%;
  font-weight:700;
  font-size:17px;
  letter-spacing:.005em;
  text-transform:uppercase;
  color:var(--paper);
  margin-bottom:8px;
}
.val-desc{color:var(--muted);font-size:14.5px;line-height:1.7;margin-bottom:0}

.about-pillars{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:0;
  margin-top:clamp(32px, 3.4vw, 48px);
  border-top:1px solid var(--rule);
}
.about-pillars .pillar{
  padding:24px 26px 24px 0;
  border:0;
  border-bottom:1px solid var(--rule);
}
.about-pillars .pillar:nth-child(even){padding-left:26px;border-left:1px solid var(--rule)}

/* the legal pages carry their own inline padding; here .pillar is a document
   section, ruled off rather than boxed */
.pillar{background:none;border-radius:0}
.pillar[style*="padding:26px"]{
  border:0;
  border-top:1px solid var(--rule);
  margin-bottom:0 !important;
}
.pillar[style*="padding:26px"]:last-of-type{border-bottom:1px solid var(--rule)}
.pillar-title{
  font-family:var(--font-display);
  font-stretch:78%;
  font-weight:700;
  font-size:17px;
  line-height:1.24;
  letter-spacing:.02em;
  text-transform:uppercase;
  color:var(--paper);
  margin-bottom:8px;
}
.pillar-desc{color:var(--muted-2);font-size:15.5px;line-height:1.75;max-width:74ch;margin-bottom:0}
.pillar-desc a{color:var(--red-mark)}

.trainers-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:0;
  margin-top:clamp(36px, 4vw, 56px);
  border-top:1px solid var(--rule);
  border-bottom:1px solid var(--rule);
}
.trainer-card{
  padding:clamp(30px, 3vw, 46px) clamp(22px, 2.4vw, 34px);
  background:none;
  border:0;
  border-left:1px solid var(--rule);
  border-radius:0;
}
.trainer-card:first-child{border-left:0;padding-left:0}
.trainer-card:last-child{padding-right:0}
.trainer-card:hover{transform:none}
.trainer-card:before{content:none;display:none}
.trainer-initials{
  display:flex;
  align-items:center;
  justify-content:center;
  width:56px;
  height:56px;
  margin-bottom:20px;
  background:var(--red-flood);
  border-radius:0;
  font-family:var(--font-display);
  font-stretch:70%;
  font-weight:800;
  font-size:20px;
  letter-spacing:.06em;
  color:#fff;
}
.trainer-name{
  font-family:var(--font-display);
  font-stretch:72%;
  font-weight:800;
  font-size:22px;
  line-height:1.05;
  color:var(--paper);
  margin-bottom:6px;
}
.trainer-role{
  font-family:var(--font-display);
  font-stretch:86%;
  font-weight:600;
  font-size:10.5px;
  letter-spacing:.17em;
  text-transform:uppercase;
  color:var(--red-mark);
  margin-bottom:18px;
}
.trainer-bio{color:var(--muted-2);font-size:14.5px;line-height:1.75;margin-bottom:16px}


/* --- 12. Fixture list ------------------------------------------------------
   Schedules, price lines and FAQ rows all share .ev-row. Set as a fixture
   list: ruled rows, a date column, tabular figures in the meta line.        */

.events-list{
  display:block;
  gap:0;
  background:none;
  border-top:1px solid var(--rule);
  border-radius:0;
  overflow:visible;
}
.ev-row{
  position:relative;
  display:grid;
  grid-template-columns:118px minmax(0,1fr) auto;
  align-items:center;
  gap:clamp(18px, 2.6vw, 40px);
  padding:24px 0 24px 22px;
  background:none;
  border-bottom:1px solid var(--rule);
  transition:background-color .2s var(--ease-out);
}
.ev-row:before{
  content:"";
  position:absolute;
  left:0;
  top:0;
  bottom:0;
  width:3px;
  background:var(--red-flood);
  transform:scaleY(0);
  transform-origin:50% 100%;
  transition:transform .24s var(--ease-out);
}
@media (hover:hover) and (pointer:fine){
  .ev-row:hover{background:rgba(244,244,246,.025)}
  .ev-row:hover:before{transform:scaleY(1)}
}
.ev-date{text-align:left;padding-right:12px;border-right:1px solid var(--rule)}
.ev-day{
  display:block;
  font-family:var(--font-display);
  font-stretch:68%;
  font-weight:800;
  font-size:30px;
  line-height:.9;
  letter-spacing:.005em;
  text-transform:uppercase;
  color:var(--paper);
}
.ev-month{
  display:block;
  margin-top:5px;
  font-family:var(--font-display);
  font-stretch:88%;
  font-weight:500;
  font-size:9.5px;
  letter-spacing:.17em;
  text-transform:uppercase;
  color:var(--muted);
}
.ev-type-tag{
  display:inline-block;
  margin-bottom:7px;
  font-family:var(--font-display);
  font-stretch:86%;
  font-weight:700;
  font-size:9.5px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--red-mark);
}
.ev-title{
  font-family:var(--font-display);
  font-stretch:74%;
  font-weight:700;
  font-size:clamp(17px, 1.4vw, 21px);
  line-height:1.1;
  color:var(--paper);
  margin-bottom:6px;
}
.ev-meta{
  color:var(--muted);
  font-size:13.5px;
  line-height:1.55;
  margin-bottom:0;
  font-variant-numeric:tabular-nums;
}
.ev-right{display:flex;flex-direction:column;align-items:flex-end;gap:6px;text-align:right}


/* --- 13. Forms -------------------------------------------------------------
   An entry form on a printed page: ruled blocks, uppercase field labels,
   square inputs, a red rule under the field that has focus.                 */

.form-wrap{max-width:760px;margin:0 auto}
.f-notice{
  background:var(--stock);
  border:1px solid var(--rule);
  border-left:1px solid var(--red-flood);
  border-radius:0;
  margin-bottom:32px;
  padding:16px 20px;
  color:var(--muted-2);
  font-size:13.5px;
  line-height:1.65;
}
.f-notice strong{
  color:var(--red-mark);
  font-family:var(--font-display);
  font-stretch:86%;
  font-weight:700;
  letter-spacing:.1em;
  text-transform:uppercase;
  font-size:11.5px;
}
.f-block{margin-bottom:38px;padding:0}
.f-block-title{
  display:block;
  width:100%;
  margin-bottom:22px;
  padding-bottom:13px;
  border-bottom:1px solid var(--rule);
  font-family:var(--font-display);
  font-stretch:80%;
  font-weight:700;
  font-size:12px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--paper);
}
.f-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.f-grid.full{grid-template-columns:1fr 1fr}
.f-grid > .f-field:only-child{grid-column:1 / -1}
.f-field{display:flex;flex-direction:column;gap:8px}
.f-field label{
  font-family:var(--font-display);
  font-stretch:88%;
  font-weight:600;
  font-size:10.5px;
  letter-spacing:.15em;
  text-transform:uppercase;
  color:var(--muted-2);
}
.f-field input,.f-field select,.f-field textarea{
  width:100%;
  padding:14px 15px;
  background:var(--plate);
  color:var(--paper);
  font-family:var(--font-text);
  font-size:15px;
  line-height:1.4;
  border:1px solid var(--rule-2);
  border-radius:0;
  outline:none;
  transition:border-color .16s var(--ease-out),background-color .16s var(--ease-out),box-shadow .16s var(--ease-out);
  appearance:none;
  -webkit-appearance:none;
}
.f-field select{
  padding-right:38px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%23f4f4f6' stroke-opacity='.6' stroke-width='1.4'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 15px center;
  background-size:11px 7px;
}
.f-field input::placeholder,.f-field textarea::placeholder{color:rgba(244,244,246,.55)}
.f-field input:focus,.f-field select:focus,.f-field textarea:focus{
  border-color:var(--red-flood);
  background:var(--plate-hi);
  box-shadow:inset 0 -2px 0 0 var(--red-flood);
}
.f-field select option{background:#141418;color:var(--paper)}
.f-field textarea{resize:vertical;min-height:130px}
.priv-check{display:flex;align-items:flex-start;gap:12px;margin-top:14px}
.priv-check input[type=checkbox]{width:19px;height:19px;accent-color:var(--red-flood);flex:none;margin-top:2px;border-radius:0}
.priv-check label{color:var(--muted-2);font-size:14px;line-height:1.6;cursor:pointer}
.priv-check label a{color:var(--red-mark);text-decoration:underline}
.form-privacy-note{color:var(--muted);font-size:13px;line-height:1.65;margin-top:20px}
.form-privacy-note a{color:var(--red-mark)}
.form-honeypot{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}
.f-submit{
  width:100%;
  margin-top:28px;
  padding:19px 0;
  background:var(--red-flood);
  color:#fff;
  border:1px solid var(--red-flood);
  border-radius:0;
  cursor:pointer;
  transition:background-color .16s var(--ease-out),border-color .16s var(--ease-out);
}
.f-submit:hover{background:var(--red-flood-hi);border-color:var(--red-flood-hi)}
.f-submit:active{transform:translateY(1px)}
.f-submit:disabled{opacity:.6;cursor:wait}
.f-success{background:var(--stock);border:1px solid var(--rule);border-radius:0;padding:60px 32px}
.f-success-mark{border-radius:0;background:var(--red-flood);border:0;color:#fff}


/* --- 14. Community + photo slots -------------------------------------------
   The gallery slots are honest about being slots: crop marks and a caption,
   the way an unplaced image sits in a layout before the photography lands.  */

.soc-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:0;
  margin-top:clamp(36px, 4vw, 56px);
  border-top:1px solid var(--rule);
  border-bottom:1px solid var(--rule);
}
.soc-card{
  display:flex;
  flex-direction:column;
  gap:10px;
  padding:clamp(30px, 3vw, 44px) clamp(22px, 2.4vw, 34px);
  background:none;
  border:0;
  border-left:1px solid var(--rule);
  border-radius:0;
  color:var(--paper);
  transition:background-color .22s var(--ease-out);
}
.soc-card:first-child{border-left:0;padding-left:0}
.soc-card:last-child{padding-right:0}
.soc-card:hover{transform:none;background:rgba(244,244,246,.025)}
.soc-platform-icon{
  display:flex;
  align-items:center;
  justify-content:center;
  width:46px;
  height:46px;
  margin-bottom:6px;
  background:var(--plate);
  border:1px solid var(--rule);
  border-radius:0;
  font-family:var(--font-display);
  font-stretch:72%;
  font-weight:800;
  font-size:15px;
  letter-spacing:.06em;
  color:var(--red-mark);
}
.soc-name{
  font-family:var(--font-display);
  font-stretch:74%;
  font-weight:800;
  font-size:21px;
  line-height:1.05;
  color:var(--paper);
}
.soc-handle{color:var(--muted);font-size:13px;letter-spacing:.02em}
.soc-desc{flex:1;color:var(--muted-2);font-size:14px;line-height:1.7;margin-bottom:14px}
.soc-link{
  font-family:var(--font-display);
  font-stretch:84%;
  font-weight:700;
  font-size:11px;
  letter-spacing:.15em;
  text-transform:uppercase;
  color:var(--red-mark);
  transition:transform .2s var(--ease-out);
}
@media (hover:hover) and (pointer:fine){
  .soc-card:hover .soc-link{transform:translateX(5px)}
}

.media-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:1px;
  margin-top:clamp(36px, 4vw, 56px);
  background:var(--rule);
  border:1px solid var(--rule);
}
.media-item{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  aspect-ratio:4 / 3;
  background:var(--stock);
  border:0;
  border-radius:0;
  overflow:hidden;
  transition:background-color .22s var(--ease-out);
}
.media-item:hover{transform:none;background:var(--plate-hi)}
/* crop marks: the register a layout carries while it waits for its picture */
.media-item:before{
  content:"";
  position:absolute;
  inset:12px;
  pointer-events:none;
  background:
    linear-gradient(var(--rule-2) 0 0) 0 0/1px 13px,
    linear-gradient(var(--rule-2) 0 0) 0 0/13px 1px,
    linear-gradient(var(--rule-2) 0 0) 100% 0/1px 13px,
    linear-gradient(var(--rule-2) 0 0) 100% 0/13px 1px,
    linear-gradient(var(--rule-2) 0 0) 0 100%/1px 13px,
    linear-gradient(var(--rule-2) 0 0) 0 100%/13px 1px,
    linear-gradient(var(--rule-2) 0 0) 100% 100%/1px 13px,
    linear-gradient(var(--rule-2) 0 0) 100% 100%/13px 1px;
  background-repeat:no-repeat;
}
.media-placeholder{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;width:100%;height:100%}
.media-placeholder-icon{
  display:flex;
  align-items:center;
  justify-content:center;
  width:38px;
  height:38px;
  background:none;
  border:1px solid var(--rule-2);
  border-radius:0;
}
.media-placeholder-icon svg{width:17px;height:17px;fill:none;stroke:var(--red-mark);stroke-width:1.5px}
.media-placeholder-lbl{
  font-family:var(--font-display);
  font-stretch:88%;
  font-weight:500;
  font-size:10px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--muted);
}
.media-overlay{
  background:var(--red-flood);
  color:#fff;
  padding:11px 14px;
  font-family:var(--font-display);
  font-stretch:86%;
  font-weight:600;
  font-size:10.5px;
  letter-spacing:.14em;
  text-transform:uppercase;
  transition:transform .26s var(--ease-out);
}


/* --- 15. Contact ------------------------------------------------------------ */

.contact-cols{
  display:grid;
  grid-template-columns:.82fr 1.18fr;
  gap:clamp(36px, 5vw, 76px);
  margin-top:clamp(32px, 3.6vw, 48px);
}
.c-item{
  display:grid;
  grid-template-columns:44px minmax(0,1fr);
  align-items:start;
  gap:16px;
  padding:18px 0;
  border-bottom:1px solid var(--rule);
}
.c-icon{
  display:flex;
  align-items:center;
  justify-content:center;
  width:40px;
  height:40px;
  background:var(--plate);
  border:1px solid var(--rule);
  border-radius:0;
  font-family:var(--font-display);
  font-stretch:72%;
  font-weight:800;
  font-size:15px;
  color:var(--red-mark);
}
.c-title{
  font-family:var(--font-display);
  font-stretch:88%;
  font-weight:600;
  font-size:10.5px;
  letter-spacing:.17em;
  text-transform:uppercase;
  color:var(--muted);
  margin-bottom:5px;
}
.c-val{color:var(--paper);font-size:15.5px;line-height:1.55;margin-bottom:0}
.c-val a{color:var(--paper);text-decoration:none;transition:color .16s var(--ease-out)}
.c-val a:hover{color:var(--red-mark);text-decoration:underline;text-decoration-color:var(--red-flood)}

.route-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:1px;
  background:var(--rule);
  border:1px solid var(--rule);
}


/* --- 16. The flood ---------------------------------------------------------
   One block per page runs the spot colour edge to edge. It is the page's
   loudest moment and it carries the only action that matters there.        */

.cta-strip{
  display:grid;
  grid-template-columns:minmax(0,1.5fr) auto;
  align-items:center;
  gap:clamp(28px, 4vw, 72px);
  padding:clamp(54px, 6vw, 88px) var(--gutter);
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 400'%3E%3Ccircle cx='200' cy='200' r='199' fill='none' stroke='%23ffffff' stroke-opacity='.18' stroke-width='1' vector-effect='non-scaling-stroke'/%3E%3Ccircle cx='200' cy='200' r='120' fill='none' stroke='%23ffffff' stroke-opacity='.14' stroke-width='1' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E") right -110px center / auto 190% no-repeat,
    var(--red-flood);
  border-top:0;
  border-bottom:0;
  color:#fff;
}
.cta-strip-text{max-width:none}
.cta-strip-text h2{
  font-family:var(--font-display);
  font-stretch:66%;
  font-weight:800;
  font-size:clamp(30px, 3.6vw, 54px);
  line-height:.96;
  letter-spacing:-.014em;
  color:#fff;
  margin-bottom:14px;
  max-width:16ch;
  text-wrap:balance;
}
.cta-strip-text p{color:rgba(255,255,255,.92);font-size:16px;line-height:1.65;margin-bottom:0;max-width:54ch}
.cta-strip-btns{display:flex;flex-wrap:wrap;gap:12px}
.cta-strip .btn-white{background:#fff;color:var(--red-flood);border-color:#fff}
.cta-strip .btn-white:hover{background:var(--ink);color:#fff;border-color:var(--ink)}
.cta-strip .btn-outline-white,.cta-strip .btn-outline-light{color:#fff;border-color:rgba(255,255,255,.46)}
.cta-strip .btn-outline-white:hover,.cta-strip .btn-outline-light:hover{background:#fff;color:var(--red-flood);border-color:#fff}


/* --- 17. Footer + related links -------------------------------------------- */

.related-links{
  padding:26px var(--gutter);
  background:var(--ink);
  border-top:1px solid var(--rule);
}
.rl-inner{max-width:none}
.rl-title{
  margin:0;
  font-family:var(--font-display);
  font-stretch:88%;
  font-weight:500;
  font-size:11.5px;
  letter-spacing:.13em;
  text-transform:uppercase;
  color:var(--muted);
}
.rl-link{
  color:var(--paper);
  text-decoration:none;
  border-bottom:1px solid var(--rule-2);
  padding-bottom:2px;
  transition:color .16s var(--ease-out),border-color .16s var(--ease-out);
}
.rl-link:hover{color:var(--red-mark);border-bottom-color:var(--red-flood)}
.rl-sep{color:rgba(244,244,246,.3)}

footer{
  background:var(--ink-2);
  border-top:1px solid var(--rule);
  padding:clamp(52px, 5.6vw, 84px) var(--gutter) 26px;
}
.foot-grid{
  display:grid;
  grid-template-columns:1.6fr 1fr 1fr 1.15fr;
  gap:0;
}
.foot-grid > *{padding:0 clamp(20px, 2.4vw, 40px);border-left:1px solid var(--rule)}
.foot-grid > *:first-child{padding-left:0;border-left:0}
.foot-grid > *:last-child{padding-right:0}
.foot-logo{
  position:relative;
  padding-left:17px;
  margin-bottom:16px;
  font-family:var(--font-display);
  font-stretch:72%;
  font-weight:800;
  font-size:21px;
  letter-spacing:.03em;
  text-transform:uppercase;
  color:var(--paper);
}
.foot-logo:before{
  content:"";
  position:absolute;
  left:0;
  top:5px;
  bottom:5px;
  width:5px;
  background:var(--red-flood);
}
.foot-logo span.foot-logo-accent{color:var(--red)}
.foot-tag{color:var(--muted);max-width:32ch;font-size:14px;line-height:1.68}
.foot-col-title{
  margin-bottom:16px;
  padding-bottom:11px;
  border-bottom:1px solid var(--rule);
  font-family:var(--font-display);
  font-stretch:88%;
  font-weight:600;
  font-size:10px;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:rgba(244,244,246,.5);
}
.foot-col ul li{margin-bottom:9px}
.foot-col ul li a{
  color:var(--muted-2);
  font-size:14px;
  transition:color .16s var(--ease-out);
}
.foot-col ul li a:hover{color:var(--paper);text-decoration:underline;text-decoration-color:var(--red-flood)}
.foot-bottom{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:20px;
  margin-top:clamp(40px, 4.4vw, 60px);
  padding-top:22px;
  border-top:1px solid var(--rule);
}
.foot-bottom p{color:rgba(244,244,246,.46);font-size:12.5px;margin:0}
.foot-legal{display:flex;gap:26px}
.foot-legal a{
  color:rgba(244,244,246,.46);
  font-family:var(--font-display);
  font-stretch:88%;
  font-weight:500;
  font-size:10.5px;
  letter-spacing:.15em;
  text-transform:uppercase;
  min-height:44px;
  display:inline-flex;
  align-items:center;
}
.foot-legal a:hover{color:var(--paper);text-decoration:none}


/* --- 18. Plates written inline in the frozen markup -------------------------
   Several blocks carry style="background:var(--card)" or var(--navy) straight
   in the snapshot. The tokens above already re-skin them; these rules give
   them the rule the rest of the page is built from.                         */

main.page div[style*="background:var(--card)"],
main.page div[style*="background:var(--navy)"]{border:1px solid var(--rule)}
main.page .media-item[style*="background:var(--card)"]{border:0}
main.page .route-grid > div[style*="background:var(--card)"]{border:0}
main.page div[style*="border-radius:var(--radius)"]{border-radius:0}
main.page section[style*="padding-top:120px"]{padding-top:clamp(112px, 11vw, 152px)}
main.page [style*="text-align:center"] :is(h1,h2,h3).section-title,
main.page [style*="text-align:center"] .section-sub,
main.page [style*="text-align:center"] .cta-strip-text h2{margin-left:auto;margin-right:auto}
main.page [style*="text-align:center"] :is(h1,h2,h3).section-title:before{margin-left:auto;margin-right:auto}
main.page iframe{border:0;filter:grayscale(86%) contrast(1.08) brightness(.9)}

/* photo slots written inline in the snapshot, given the register the gallery
   slots carry so an unplaced image reads as a reserved plate, not a gap */
main.page div[style*="place-items:center"]{
  position:relative;
  background:var(--stock) !important;
  border:1px solid var(--rule) !important;
  font-family:var(--font-display);
  font-stretch:88%;
  font-weight:500;
  font-size:11px !important;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--muted) !important;
}
main.page div[style*="place-items:center"]:before{
  content:"";
  position:absolute;
  inset:12px;
  pointer-events:none;
  background:
    linear-gradient(var(--rule-2) 0 0) 0 0/1px 14px,
    linear-gradient(var(--rule-2) 0 0) 0 0/14px 1px,
    linear-gradient(var(--rule-2) 0 0) 100% 0/1px 14px,
    linear-gradient(var(--rule-2) 0 0) 100% 0/14px 1px,
    linear-gradient(var(--rule-2) 0 0) 0 100%/1px 14px,
    linear-gradient(var(--rule-2) 0 0) 0 100%/14px 1px,
    linear-gradient(var(--rule-2) 0 0) 100% 100%/1px 14px,
    linear-gradient(var(--rule-2) 0 0) 100% 100%/14px 1px;
  background-repeat:no-repeat;
}


/* --- 19. Motion ------------------------------------------------------------
   One authored moment: the hero. The red panel wipes in from the outside
   edge, the crest settles behind it, the left column steps up in four beats.
   Everything else is a state change under 250ms.                            */

@keyframes floodWipe{
  from{clip-path:inset(0 0 0 100%)}
  to{clip-path:inset(0 0 0 0)}
}
@keyframes crestIn{
  from{opacity:0;transform:scale(.94)}
  to{opacity:1;transform:scale(1)}
}
@keyframes stepUp{
  from{opacity:0;transform:translateY(14px)}
  to{opacity:1;transform:translateY(0)}
}
@keyframes bandIn{
  from{opacity:0}
  to{opacity:1}
}

.hero-right{
  animation:floodWipe .9s var(--ease-out) both;
  will-change:clip-path;
}
.hero-logo-ring{animation:crestIn .8s var(--ease-out) .42s both}
.hero-trust{animation:bandIn .5s var(--ease-out) .86s both}
.hero-left > *{animation:stepUp .62s var(--ease-out) both}
.hero-left > :nth-child(1){animation-delay:.06s}
.hero-left > :nth-child(2){animation-delay:.13s}
.hero-left > :nth-child(3){animation-delay:.2s}
.hero-left > :nth-child(4){animation-delay:.27s}

/* No scroll reveal. A ruled band that starts at opacity 0 is a page that can
   fail to arrive; the hero wipe is the one authored moment and everything
   below it is present the moment it paints. */

/* The same argument, applied to the hero's own entry on a phone.
   `both` means every one of these beats starts from nothing, and an animation
   clock does not advance while the main thread is blocked — so the window
   between the first paint and the last beat is a window in which the hero can
   be caught blank. On a desk that window is 1.22s of idle time. On a phone it
   is 1.22s that the 3D chunk's parse and the debris build land in the middle
   of, and the panel, the crest and the credentials band freeze wherever they
   stood: measured at 390x844, .hero-trust held opacity 0 for 41 seconds.

   The mount now waits for these to finish before it builds anything (see
   HERO_ENTRY_MS in CrestFieldMount), and the beats are tightened here so what
   it waits on is short. Same choreography, half the exposure. */
@media (max-width:700px){
  .hero-right{
    display:flex !important;
    flex-direction:column !important;
    justify-content:flex-start !important;
    align-items:center !important;
    min-height:420px !important;
    max-height:none !important;
    height:auto !important;
    background:var(--red-flood) !important;
    position:relative !important;
    overflow:visible !important;
    clip-path:none !important;
    opacity:1 !important;
    visibility:visible !important;
    transform:none !important;
    padding-top:48px !important;
    padding-bottom:48px !important;
  }
  .hero-logo-ring{animation-duration:.42s;animation-delay:.14s}
  .hero-trust{animation-duration:.3s;animation-delay:.32s}
  .hero-left > *{animation-duration:.42s}
  .hero-left > :nth-child(1){animation-delay:.04s}
  .hero-left > :nth-child(2){animation-delay:.09s}
  .hero-left > :nth-child(3){animation-delay:.14s}
  .hero-left > :nth-child(4){animation-delay:.19s}

  .hero-logo-wrap{
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    width:100% !important;
    min-height:240px !important;
    padding:24px 0 !important;
    position:relative !important;
    z-index:10 !important;
    opacity:1 !important;
    visibility:visible !important;
    transform:none !important;
  }
  .hero-logo-ring{
    display:flex !important;
    flex-direction:column !important;
    align-items:center !important;
    justify-content:center !important;
    width:230px !important;
    height:230px !important;
    min-width:230px !important;
    min-height:230px !important;
    padding:20px !important;
    background:linear-gradient(135deg, #c8102e 0%, #a00d22 100%) !important;
    border:2px solid rgba(255,255,255,0.85) !important;
    border-radius:50% !important;
    opacity:1 !important;
    visibility:visible !important;
    transform:none !important;
    position:relative !important;
    z-index:11 !important;
    box-shadow:0 20px 60px rgba(0,0,0,0.4) !important;
  }
}

/* --- 24. Purposeful interaction and scroll motion -------------------------
   The hero remains the single authored opening moment. Below it, selected
   marketing groups reveal once as they enter the reading flow. Interactive
   motion stays short and physical; hover lift only exists for precise
   pointers. PageWrapper adds the data attributes after mount, so content is
   fully visible when JavaScript or IntersectionObserver is unavailable. */

html[data-motion-ready="true"] [data-motion-reveal]{
  opacity:0;
  transform:translateY(12px);
  transition:
    opacity 520ms var(--ease-out),
    transform 520ms var(--ease-out);
  transition-delay:calc(var(--motion-order, 0) * 55ms);
}
html[data-motion-ready="true"] [data-motion-reveal][data-motion-order="0"]{--motion-order:0}
html[data-motion-ready="true"] [data-motion-reveal][data-motion-order="1"]{--motion-order:1}
html[data-motion-ready="true"] [data-motion-reveal][data-motion-order="2"]{--motion-order:2}
html[data-motion-ready="true"] [data-motion-reveal][data-motion-order="3"]{--motion-order:3}
html[data-motion-ready="true"] [data-motion-reveal][data-motion-visible="true"]{
  opacity:1;
  transform:translateY(0);
}

:is(.btn-primary,.btn-outline,.btn-white,.btn-outline-white,.btn-outline-light,.btn-sm,.nav-cta,.filter-btn,.f-submit){
  transition-property:transform,background-color,border-color,color,opacity;
  transition-duration:140ms;
  transition-timing-function:var(--ease-out);
}
:is(.btn-primary,.btn-outline,.btn-white,.btn-outline-white,.btn-outline-light,.btn-sm,.nav-cta,.filter-btn,.f-submit):active{
  transform:scale(.97);
}

:is(.prog-card,.price-card,.trainer-card,.soc-card,.media-item):hover{transform:none}
@media (hover:hover) and (pointer:fine){
  :is(.prog-card,.price-card,.trainer-card,.soc-card){
    transition:
      transform 240ms var(--ease-out),
      background-color 240ms var(--ease-out),
      border-color 240ms var(--ease-out),
      box-shadow 240ms var(--ease-out);
  }
  :is(.prog-card,.price-card,.trainer-card,.soc-card):hover{
    transform:translateY(-4px);
    border-color:rgba(200,16,46,.38);
    box-shadow:0 16px 40px rgba(0,0,0,.28);
  }
  .media-item:hover{transform:scale(1.02)}
}

@media (prefers-reduced-motion:reduce){
  html[data-motion-ready="true"] [data-motion-reveal],
  html[data-motion-ready="true"] [data-motion-reveal][data-motion-visible="true"]{
    opacity:1;
    transform:none;
    transition:none;
  }
  :is(.btn-primary,.btn-outline,.btn-white,.btn-outline-white,.btn-outline-light,.btn-sm,.nav-cta,.filter-btn,.f-submit):active,
  :is(.prog-card,.price-card,.trainer-card,.soc-card,.media-item):hover{
    transform:none;
  }
}


/* --- 20. Responsive --------------------------------------------------------- */

@media (max-width:1180px){
  .hero{grid-template-columns:1.14fr 1fr}
  .hero-title{font-size:clamp(34px, 4.4vw, 56px)}
  .contact-cols{grid-template-columns:1fr}
  .media-grid{grid-template-columns:repeat(3,1fr)}
}

@media (max-width:1000px){
  .hero{grid-template-columns:1fr;min-height:auto}
  .hero-left{padding:clamp(56px, 9vw, 88px) var(--gutter) clamp(48px, 7vw, 72px)}
  .hero-right{min-height:min(560px, 78vw);border-left:0;border-top:1px solid var(--rule)}
  .hero-title{max-width:20ch}
  .hero-sub{max-width:56ch}
  .section-split{grid-template-columns:1fr}
  .split-left{min-height:440px;border-right:0;border-bottom:1px solid var(--rule)}
  .split-right{padding:clamp(56px, 8vw, 80px) var(--gutter)}
  .prog-grid,.trainers-grid,.soc-grid{grid-template-columns:1fr 1fr}
  .prog-card:nth-child(2n+1),.trainer-card:nth-child(2n+1),.soc-card:nth-child(2n+1){border-left:0;padding-left:0}
  .prog-card:nth-child(n+3),.trainer-card:nth-child(n+3),.soc-card:nth-child(n+3){border-top:1px solid var(--rule)}
  .prog-card:last-child,.trainer-card:last-child,.soc-card:last-child{padding-right:clamp(22px, 2.4vw, 34px)}
  .prog-card:has(> .prog-age:first-child){margin:0;border-top:1px solid var(--red-flood)}
  .cta-strip{grid-template-columns:1fr;gap:30px}
  .cta-strip-text{max-width:none}
  .route-grid{grid-template-columns:1fr 1fr}
}

/* The nav hands over to the drawer well before the rest of the layout does:
   the eight-link row needs ~1150px before the gutter starts being eaten, and
   every width below that was showing a collided wordmark and an edge-to-edge
   CTA. The section grids below still break at 900, where they actually need
   to — this is a nav-only switch, deliberately at its own breakpoint. */
@media (max-width:1150px){
  nav{height:64px}
  .nav-links,.nav-cta{display:none}
  .nav-item-mobile-only{display:block}
  .hamburger{display:flex;z-index:1002;margin-right:-11px}
  .mob-nav{inset:64px 0 0}
}

@media (max-width:900px){
  .stats-bar{grid-template-columns:1fr 1fr;padding:0 var(--gutter)}
  .stat{padding:20px 18px}
  .stat:nth-child(odd){border-left:0;padding-left:0}
  .stat:nth-child(2){padding-right:0}
  .stat:nth-child(n+3){border-top:1px solid var(--rule)}
  .stat:last-child{padding-right:0}
  .values-grid,.split-right .values-grid{grid-template-columns:1fr 1fr}
  .val-card:nth-child(odd){border-left:0;padding-left:0}
  .val-card:nth-child(n+3){border-top:1px solid var(--rule)}
  .val-card:last-child{padding-right:clamp(20px, 2.2vw, 32px)}
  .about-pillars{grid-template-columns:1fr}
  .about-pillars .pillar:nth-child(even){padding-left:0;border-left:0}
  .foot-grid{grid-template-columns:1fr 1fr;row-gap:34px}
  .foot-grid > *:nth-child(odd){padding-left:0;border-left:0}
  .foot-grid > *:nth-child(even){padding-right:0}
  .media-grid{grid-template-columns:repeat(2,1fr)}
  .ev-row{grid-template-columns:96px minmax(0,1fr);row-gap:14px;padding-left:18px}
  .ev-right{grid-column:1 / -1;flex-direction:row;align-items:center;justify-content:flex-start;text-align:left}
  /* the frozen markup hard-codes a 3-column grid inline with no fallback */
  main.page section > div[style*="repeat(3, 1fr)"],
  main.page section > div[style*="repeat(auto-fit, minmax(280px, 1fr))"]{grid-template-columns:1fr !important}
}

@media (max-width:700px){
  /* The phone hero. Section 6 already builds this — one column here, the copy
     first and the red crest panel second, both in normal document flow — so
     this block only carries the numbers that are genuinely different on a
     phone. The display/visibility restatements that used to sit here were
     neutralising a hero that no longer exists anywhere in this file.

     minmax(0,1fr) rather than the 1fr inherited from the 1000px block: a
     single unbreakable word in the headline should shrink the track, not
     widen the page. */
  .hero{grid-template-columns:minmax(0,1fr)}
  .hero-left{
    min-width:0;
    /* 66px of the padding above is the fixed nav's own height (section 6), so
       the copy needs less of its own here than the 1000px block gives it. The
       36px this returns is what puts the whole crest inside the first screen
       below. */
    padding:clamp(34px, 6vw, 48px) var(--gutter) clamp(34px, 6vw, 48px);
  }
  .hero-title{font-size:clamp(32px, 8.6vw, 46px);max-width:none}
  .hero-sub{font-size:16px;max-width:none;margin-bottom:28px}
  .hero-btns{flex-direction:column;align-items:stretch;gap:10px}
  .hero-btns .btn-primary,.hero-btns .btn-outline{width:100%}
  /* The flood is the other half of the argument, so on a phone it gets a real
     share of the screen rather than a strip. It stays the `1fr auto` grid it is
     at every other width: the wrap takes the slack, the credentials band closes
     the panel. That slack is also the crest's hold — the scene measures the gap
     between the ring and the band live (see pinLength in crestDriver), and the
     block this replaced pinned the wrap to 280px and the panel to 320px, which
     left 26px of it. The hold was gone on phones for that reason alone. */
  .hero-right{
    grid-template-rows:minmax(340px,1fr) auto;
    min-height:clamp(430px, 62svh, 560px);
    /* The one number the phone hero turns on. Centred in this panel the crest
       hangs half a ring below the fold — the reader's first screen is the copy
       and an empty red band, which is the reported "the logo is not visible on
       phones". Lifting it out of the centre puts the whole mark on the first
       screen, and because the credentials band does not move, the same lift
       lengthens the gap the hold is measured from: ~115px before, ~170px now.
       The pitch and the halo pool are both offset by this same token, so the
       halfway line still runs through the mark and the pool stays behind it. */
    --crest-lift:56px;
  }
  /* An equal-padding flex centre plus twice the lift on the bottom is what
     moves the ring up by exactly --crest-lift without taking height out of the
     panel. */
  .hero-logo-wrap{
    padding:24px clamp(20px, 3vw, 40px) calc(24px + var(--crest-lift, 0px) * 2);
  }
  .hero-logo-ring{
    width:min(238px, 58vw);
    height:min(238px, 58vw);
    flex:none;
    padding:20px;
  }
  .hero-trust{gap:8px 18px;justify-content:flex-start;padding:14px var(--gutter)}
  :is(h1,h2,h3).section-title{font-size:clamp(29px, 8vw, 40px);max-width:none}
  .section-sub{font-size:15.5px}
  .prog-grid,.trainers-grid,.soc-grid,.values-grid,.split-right .values-grid,.route-grid{grid-template-columns:1fr}
  .prog-card,.trainer-card,.soc-card,.val-card{
    border-left:0 !important;
    border-top:1px solid var(--rule);
    padding-left:0 !important;
    padding-right:0 !important;
  }
  .prog-card:first-child,.trainer-card:first-child,.soc-card:first-child,.val-card:first-child{border-top:0}
  .prog-card:has(> .prog-age:first-child){
    padding-left:22px !important;
    padding-right:22px !important;
    border-top:1px solid var(--red-flood);
  }
  .value-card,.value-card:nth-child(even){padding-left:0;border-left:0}
  .prog-number{font-size:64px;top:10px;right:0}
  .split-left{min-height:400px}
  .foot-grid{grid-template-columns:1fr}
  .foot-grid > *{padding:0 !important;border-left:0}
  .foot-bottom{flex-direction:column;align-items:flex-start;gap:14px}
  .media-grid{grid-template-columns:1fr 1fr}
  .f-grid,.f-grid.full{grid-template-columns:1fr}
  /* 16px keeps iOS Safari from zooming the viewport on focus */
  .f-field input,.f-field select,.f-field textarea{font-size:16px}
  .cta-strip{background-position:right -180px center}
  .cta-strip-btns .btn-white,.cta-strip-btns .btn-outline-light,.cta-strip-btns .btn-outline-white{flex:1 1 220px}
}

@media (max-width:460px){
  .section-tag,.hero-tag{font-size:9.5px;letter-spacing:.18em;gap:11px}
  .section-tag:before,.hero-tag:before{width:18px;height:5px}
  .ev-row{grid-template-columns:1fr;padding-left:16px}
  .ev-date{display:flex;align-items:baseline;gap:10px;padding:0 0 4px;border-right:0;border-bottom:1px solid var(--rule)}
  .ev-day{font-size:22px}
  .ev-month{margin-top:0}
  .stats-bar{grid-template-columns:1fr 1fr}
  .media-grid{grid-template-columns:1fr}
  .hero-logo-main{font-size:clamp(32px, 11vw, 44px)}
  .hero-logo-top{font-size:11px}
}


/* --- 21. Reduced motion (authoritative, last word) -------------------------- */

@media (prefers-reduced-motion:reduce){
  .hero-right{animation:bandIn .3s ease both;clip-path:none}
  .hero-logo-ring,.hero-left > *,.hero-trust{animation:bandIn .3s ease both;animation-delay:0s}
  .formation-viz:hover .formation-dot,
  .soc-card:hover .soc-link,
  .btn-primary:active,.btn-outline:active,.btn-white:active,
  .btn-outline-light:active,.btn-outline-white:active,.f-submit:active,
  .btn-sm:active,.nav-cta:active{transform:none !important}
  .ev-row:before{transition:none}
  *,:before,:after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
  .hero-right,.hero-logo-ring,.hero-left > *,.hero-trust{opacity:1 !important;transform:none !important}
}


/* --- 22. The crest, breaking ------------------------------------------------
   The hero's mark is the crest printed right here in section 6: a real SVG
   circle with the wordmark set inside it, in the right-hand flood. It is the
   logo at the top of the page and it is the logo if anything at all goes
   wrong. Nothing below replaces it.

   What the 3D layer in src/components does is take it apart on scroll. The
   ring holds its place on screen while the page runs up behind it, then breaks
   into several hundred red and white chips which fall out of the flood and
   reassemble, in the band below, as a B1 roundel on the formation diagram's
   centre spot. Both ends are measured off this stylesheet's own geometry
   (--crest is r=118 of 240; the roundel is r=128 in the .formation-viz
   diagram's 300-wide viewBox, centred on its printed centre spot), so
   re-sizing either mark here re-aims the sequence with no code change.

   Section 19 gives the crest one authored entry (crestIn) and then leaves it
   alone. When the layer is running it needs to take the crest's opacity over,
   and a CSS animation with fill-mode:both outranks a normal declaration, so
   the handover is where this stylesheet's !important lives. The hold needs no
   such thing: it is put on .hero-logo-wrap, which section 19 never animates.

   data-crest3d only lands after load and after the gate passes, which is well
   past the 1.22s crestIn ends at, so forcing opacity here is the state the
   crest was already sitting in.

   --crest-print and --crest-pin are then driven from the scene's own frame
   loop, and only while they are actually changing. print is 1 for the whole
   hold and 0 by the time the chips are loose. pin is the scroll the mark has
   swallowed, in px; it converges rather than being clamped, and it converges
   on a distance the scene measures live from the gap between the ring and the
   credentials band, because .hero-right clips its contents twice over — once
   with overflow and once with the flood wipe's clip-path — and a ring pushed
   past that band is simply cut in half.

   No WebGL, no idle callback, or prefers-reduced-motion: the attribute is
   never written, this block never applies, and the printed crest stands. */

html[data-crest3d="on"] .hero-logo-ring{
  opacity:var(--crest-print, 1) !important;
  will-change:opacity;
}
/* The hold moves the wrap rather than the ring, so the pool below travels with
   the mark it exists to back. The ring is the thing that fades; the wrap is the
   thing that is held. */
html[data-crest3d="on"] .hero-logo-wrap{
  transform:translate3d(0, var(--crest-pin, 0px), 0);
  will-change:transform;
}

/* Belt and braces. The mount declines to run under reduced motion, so this
   block should already be inert there — but if the attribute ever survives a
   preference changing mid-session, the crest must not be left held or faded.
   Section 21 zeroes .hero-logo-ring's transform and not the wrap's, and loses
   on specificity to the rules above in any case, so both are restated here. */
@media (prefers-reduced-motion:reduce){
  html[data-crest3d="on"] .hero-logo-ring{
    opacity:1 !important;
    will-change:auto;
  }
  html[data-crest3d="on"] .hero-logo-wrap{
    transform:none;
    will-change:auto;
  }
}

/* Red chips on a red flood is the one thing the printed crest never had to
   survive. --crest-halo is written from the scene's frame loop alongside the
   other two: it comes up as the crest breaks and is back to zero by the time
   the debris has left the flood for the band below, so the hero is plain flood
   again before it scrolls away. At the top of the page it is zero — there is
   no debris yet, and the crest never wanted a pool behind it.

   It sits on .hero-logo-wrap, which is already the positioned box the crest is
   centred in, so the pool is centred on the mark with no markup change. The
   canvas is fixed at z-index 900 and this is z-index 2 inside the hero, so the
   chips are always lit against it rather than tinted by it. */

html[data-crest3d="on"] .hero-logo-wrap::before{
  content:"";
  position:absolute;
  left:50%;
  /* --crest-lift is 0 everywhere except the phone block, where the crest is
     biased above the centre of the panel; the pool is centred on the mark, not
     on the box, so it has to carry the same offset. */
  top:calc(50% - var(--crest-lift, 0px));
  width:190%;
  aspect-ratio:1;
  transform:translate(-50%, -50%);
  border-radius:50%;
  background:radial-gradient(circle closest-side,
    rgba(9,9,11,.90) 0%,
    rgba(9,9,11,.78) 38%,
    rgba(9,9,11,.42) 62%,
    rgba(9,9,11,0) 78%);
  opacity:var(--crest-halo, 0);
  pointer-events:none;
  z-index:-1;
}


/* --- 23. B1 on the centre spot ----------------------------------------------
   The formation diagram printed the pitch and the eleven, and left its centre
   spot empty. This puts the club's own mark on it: the B1 roundel, in print,
   at every width — a spot-red disc with a white hairline round it and the B1
   set in white inside, exactly the roundel the debris in section 22 lands as.

   Same letterform, same two colours, same centre. The numbers in the glyph
   below are the ones CrestField draws its distance field with, transcribed at
   1 roundel radius = 49 units in a 100 viewBox: the B's stem at -.31 with two
   elliptical bowls hung off it (rx .32 above, .33 below, ry .25 — ellipses,
   because circular bowls wide enough to hold an open counter stack into a
   letter three times taller than it is wide), the 1's stem at +.31 with its
   flag reaching .15 left and .19 down, and a stroke half-weight of .075. Round
   caps, because a distance field to a segment has round caps and this is the
   same mark, printed rather than cobbled.

   Size. Not the printed centre circle's r=46, and not the debris emblem's
   r=128 either. Those two dots at 30%/52% and 70%/52% are 34px across at every
   viewport while the pitch is fluid, so they close in on the centre circle as
   the panel narrows and a roundel registered to it is nicked by them below
   about 1200px wide. r=36 of the diagram's 300-wide viewBox is sized off the
   worst case instead: at 320px, where the panel bottoms out at 84% of a 272px
   column, it still keeps clear air between itself and both of them (measured:
   16px at 1440, 9px at 1100, 4.5px at 390, 2px at 320). It also leaves a ring
   of pitch showing between the mark and the centre circle, which is what makes
   it read as a badge placed on the spot rather than a fill poured into it.

   24.5% rather than 24% of the width because the disc is drawn at r=49 in a
   100 viewBox, not r=50: the rim is a non-scaling hairline like every other
   ring in this stylesheet, and half of it would be clipped by the viewBox edge
   otherwise. 100/98 of 24% opens the box back out so the painted radius is
   36/300 exactly.

   Section 8 turned both of .formation-viz's pseudo-elements off; this turns
   ::before back on, and it stays behind the eleven because a pseudo-element
   paints before its element's children. The debris emblem is roughly three and
   a half times this across and opaque where it overlaps, so the sequence in
   section 22 covers this while it is seated and uncovers it as it dissolves —
   the mark it hands back to is now the mark that was always printed here. */

.formation-viz:before{
  content:"";
  display:block;
  position:absolute;
  left:50%;
  top:50%;
  width:24.5%;
  aspect-ratio:1;
  transform:translate(-50%,-50%);
  pointer-events:none;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ccircle cx='50' cy='50' r='49' fill='%23d40f2c'/%3E%3Ccircle cx='50' cy='50' r='49' fill='none' stroke='%23f4f4f6' stroke-opacity='.85' stroke-width='1' vector-effect='non-scaling-stroke'/%3E%3Cg fill='none' stroke='%23f4f4f6' stroke-width='7.35' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M34.81 25.5V74.5'/%3E%3Cpath d='M34.81 25.5A15.68 12.25 0 0 1 34.81 50'/%3E%3Cpath d='M34.81 50A16.17 12.25 0 0 1 34.81 74.5'/%3E%3Cpath d='M65.19 25.5V74.5'/%3E%3Cpath d='M65.19 25.5L57.84 34.81'/%3E%3C/g%3E%3C/svg%3E") 50% 50% / 100% 100% no-repeat;
}

/* Point 3 polish: football-specific card marks and a tighter phone hero.
   Desktop geometry, brand tokens, typography, and visible content stay intact. */
.prog-icon-svg circle,
.prog-icon-svg rect,
.prog-icon-svg path{
  stroke:currentColor;
  stroke-width:1.4;
  stroke-linecap:round;
  stroke-linejoin:round;
  vector-effect:non-scaling-stroke;
}

@media (max-width:700px){
  .hero-left{
    padding:20px var(--gutter) 22px;
  }
  .hero-tag{margin-bottom:16px}
  .hero-title{font-size:clamp(30px, 8vw, 42px)}
  .hero-sub{margin-bottom:22px}
  .hero-right{
    grid-template-rows:minmax(280px,1fr) auto;
    min-height:360px !important;
    --crest-lift:20px;
  }
  .hero-logo-wrap{
    padding:14px 20px 54px;
  }
  .hero-trust{
    position:absolute;
    right:0;
    bottom:0;
    left:0;
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:8px;
    padding:10px var(--gutter);
  }
  .trust-pill{
    align-items:flex-start;
    font-size:9px;
    line-height:1.35;
  }
  .trust-pill svg{display:none}
}