@import url('/branding.css');
.brand-mark{background-image:url('/assets/stickers/static/autocollant-hps.png')}.membership-offer{display:grid;grid-template-columns:minmax(220px,380px) 1fr;gap:7vw;align-items:center;margin-bottom:100px;padding:45px;background:#17101f;color:#fff}.membership-offer img{width:100%;max-width:340px;justify-self:center;filter:drop-shadow(0 18px 30px rgba(0,0,0,.4))}.membership-offer h2{margin:5px 0 15px;font-size:clamp(70px,9vw,130px);color:#fff}.membership-offer h2 small{font-size:.22em;color:#b36cff;letter-spacing:.12em}.membership-offer p:not(.kicker){max-width:520px;color:#aaa3b1;line-height:1.7}.membership-offer .button{margin-top:20px;width:max-content}@media(max-width:850px){.membership-offer{grid-template-columns:1fr;margin-bottom:70px;text-align:center}.membership-offer p{margin-left:auto;margin-right:auto}.membership-offer .button{margin-left:auto;margin-right:auto}}@media(max-width:520px){.membership-offer{padding:30px 20px}.membership-offer img{max-width:230px}.membership-offer .button{width:100%}}
.page-hero{padding:155px clamp(24px,7vw,110px) 75px;background:radial-gradient(circle at 80% 20%,#35145b,transparent 35%),#0d0a11;border-bottom:1px solid var(--line)}
.page-hero h1{max-width:1050px;margin:25px 0 18px;font:800 clamp(55px,8vw,116px)/.84 var(--display);letter-spacing:-.03em}
.page-hero h1 span{color:var(--purple2)}.page-hero>p:last-child{max-width:650px;color:#aaa3b1;line-height:1.75}
.content-section{background:var(--paper);color:#151119}.intro-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:8vw}
.intro-grid h2,.content-section h2{font:800 clamp(42px,5vw,76px)/.9 var(--display);text-transform:uppercase;margin:0}.prose{color:#655f68;line-height:1.8}
.info-cards,.event-grid,.roster-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:55px}.info-card,.event-card,.roster-card{padding:30px;border:1px solid #d5d0d8;background:#f7f5f8}
.info-card h3,.event-card h3,.roster-card h3{font:700 29px var(--display);text-transform:uppercase;margin:15px 0 10px}.info-card p,.event-card p,.roster-card p{font-size:14px;line-height:1.7;color:#6e6871}
.event-card{min-height:330px;display:flex;flex-direction:column}.event-card .tag,.roster-card .tag{font:600 10px var(--display);color:var(--purple);letter-spacing:.18em;text-transform:uppercase}.event-card .button{margin-top:auto;width:max-content;color:#fff}
.roster-card{padding:0;overflow:hidden}.roster-visual{height:220px;display:grid;place-items:center;background:linear-gradient(145deg,#251137,#0b0810);font:800 76px var(--display);color:rgba(255,255,255,.12)}.roster-body{padding:25px}.players{display:flex;flex-wrap:wrap;gap:7px;margin-top:18px}.players span{padding:6px 9px;background:#e8e3eb;font-size:11px}
.contact-layout{display:grid;grid-template-columns:.75fr 1.25fr;gap:8vw}.contact-direct{padding:30px;border-left:3px solid var(--purple);background:#ebe7ed}.contact-direct a{display:block;margin-top:12px;color:var(--purple);font-weight:700;word-break:break-all}
.steps{counter-reset:steps;display:grid;gap:1px;background:#d5d0d8;margin-top:45px}.step{counter-increment:steps;background:var(--paper);padding:30px;display:grid;grid-template-columns:55px 1fr;gap:15px}.step:before{content:"0" counter(steps);font:700 13px var(--display);color:var(--purple)}.step h3{margin:0;font:700 25px var(--display);text-transform:uppercase}.step p{grid-column:2;color:#6c6670;line-height:1.65}.legal h2{font:700 31px var(--display);margin-top:45px}.legal p,.legal li{line-height:1.8;color:#5f5962}
.callout{padding:45px;background:#17101f;color:#fff;margin-top:60px;display:flex;align-items:center;justify-content:space-between;gap:30px}.callout h2{font-size:45px}.callout p{color:#aaa3b1}.callout .button{flex-shrink:0}.contact-form{padding-top:0}
@media(max-width:850px){.intro-grid,.contact-layout{grid-template-columns:1fr}.info-cards,.event-grid,.roster-grid{grid-template-columns:1fr}.page-hero{padding-top:125px}.callout{display:block}.callout .button{margin-top:20px}.site-header nav{max-height:calc(100vh - 70px);overflow:auto}.page-hero h1{font-size:clamp(52px,16vw,86px)}}
@media(max-width:520px){.page-hero{padding:120px 20px 60px}.page-hero h1{font-size:52px}.callout{padding:30px 22px}.callout h2{font-size:38px}}