* { box-sizing:border-box } html { scroll-behavior:smooth } body { margin:0; font-family:Arial, Helvetica, sans-serif; color:#111; background:#fff; overflow-x:hidden } .container { width:min(100% - 32px, 1120px); margin:0 auto } .narrow { max-width:930px } img { display:block; max-width:100%; height:auto } .section-picture, .section-picture img { position:absolute; inset:0; width:100%; height:100% } .section-picture img { object-fit:cover; object-position:center top } .site-nav { position:absolute; inset:0 0 auto; z-index:10; display:flex; justify-content:center; align-items:flex-start; min-height:36px; padding:0; border-bottom:2px solid rgba(255, 255, 255, .86); background:transparent } .site-nav nav { display:flex; justify-content:center; align-items:center; gap:34px; padding-top:12px } .site-nav nav a, .site-nav nav .nav-disabled { display:inline-flex; align-items:center; justify-content:center; min-height:20px; padding:0; color:#fff; background:transparent; border-radius:0; font-size:15px; line-height:1; font-weight:700; text-decoration:none; text-shadow:0 1px 2px rgba(0, 0, 0, .45) } .site-nav nav .nav-disabled { pointer-events: none; cursor: default; color: #fff; } .site-nav nav a.active { color:red; background:transparent } .na-hero, .club-story, .tech-story { position:relative; min-height:800px; height:650px; display:grid; align-items:center; overflow:hidden; color:#fff; background:#050505 } .club-story, .tech-story { min-height:650px; height:650px } .section-overlay { position:absolute; inset:0; z-index:1; width:100%; height:100%; background:linear-gradient(180deg, rgba(0, 0, 0, .34), rgba(0, 0, 0, .46)), radial-gradient(circle at 50% 48%, rgba(0, 0, 0, .05), rgba(0, 0, 0, .36) 78%) } .section-overlay.dark { background:linear-gradient(180deg, rgba(0, 0, 0, .58), rgba(0, 0, 0, .64)), radial-gradient(circle at center, rgba(0, 0, 0, .12), transparent 42%) } .hero-content, .club-content { position:relative; z-index:3; width:min(100% - 40px, 900px); margin:0 auto; padding:128px 0 44px; text-align:center } .hero-content h1 { margin:0 0 18px; color:#fff; font-size:clamp(3rem, 5.8vw, 4.95rem); line-height:1; letter-spacing:-.035em; font-weight:900; text-shadow:0 2px 8px rgba(0, 0, 0, .35) } .hero-subtitle { margin:0 auto 28px; color:#fff; font-size:clamp(1.45rem, 2.1vw, 1.95rem); line-height:1.25; font-weight:900; text-shadow:0 2px 8px rgba(0, 0, 0, .4) } .pill-btn { display:inline-flex; align-items:center; justify-content:center; gap:10px; min-height:50px; padding:0 20px; color:#fff; background:#5542c9; border-radius:999px; text-decoration:none; font-size:15px; font-weight:800; box-shadow:0 12px 28px rgba(0, 0, 0, .22) } .play-icon { display:grid; place-items:center; width:22px; height:22px; color:#fff; border:2px solid currentColor; border-radius:50%; font-size:10px } .down-arrow { position:absolute; left:50%; bottom:30px; transform:translateX(-50%); display:flex; flex-direction:column; color:#fff; font-size:54px; line-height:.32; text-decoration:none; text-shadow:0 2px 8px rgba(0, 0, 0, .45) } .down-arrow span { display:block; height:28px } .crest-row { display:flex; justify-content:center; gap:16px; margin-bottom:22px } .crest-placeholder { display:grid; place-items:center; width:86px; height:98px; color:#fff; background:linear-gradient(135deg, rgba(226, 35, 26, .84), rgba(33, 135, 105, .74)), #333; border:2px solid rgba(255, 255, 255, .75); border-radius:12px; font-size:12px; font-weight:900; line-height:1.05; text-transform:uppercase } .club-content h2 { margin:0 0 8px; font-size:clamp(2rem, 4vw, 4.1rem); line-height:1; letter-spacing:-.045em } .location { margin:0 0 26px; font-size:1.35rem; font-weight:800 } .strong-copy { margin:0 auto 20px; max-width:790px; font-size:1.22rem; font-weight:800 } .club-content p:not(.location):not(.strong-copy) { max-width:760px; margin:0 auto 12px; color:rgba(255, 255, 255, .92); font-size:1.02rem } .legacy-section { padding:58px 0 46px; background:#fff; text-align:center } .eyebrow { margin:0 0 12px; color:#e2231a; font-size:.82rem; font-weight:900; text-transform:uppercase; letter-spacing:.14em } .legacy-section h2 { margin:0 auto 18px; max-width:860px; font-size:clamp(2rem, 3vw, 3.2rem); line-height:1; letter-spacing:-.045em } .legacy-section p { margin:0 auto 14px; max-width:780px; color:#333; font-size:1.03rem; line-height:1.55 } .kit-section { padding:34px 0 46px; background:#fff } .section-heading { margin-bottom:28px; text-align:center } .section-heading h2 { margin:0 0 8px; font-size:clamp(2rem, 3vw, 3.1rem); line-height:1; letter-spacing:-.045em } .section-heading p { margin:0; color:#555; font-size:.98rem } .kit-layout { display:grid; grid-template-columns:70px 1.22fr 1.45fr; gap:24px; align-items:stretch; max-width:1405px; margin:0 auto } .thumb-strip { display:grid; gap:12px } .thumb-strip button { display:grid; place-items:center; width:70px; height:82px; padding:0; background:#eee; border:2px solid #e5e5e5; cursor:pointer; overflow:hidden } .thumb-strip img { width:100%; height:100%; object-fit:cover; object-position:center top } .kit-main-card { position:relative; background:#eee; border-radius:0; overflow:hidden; min-height:640px } .kit-main-card picture, .kit-main-card img, .gallery-large, .gallery-large img, .small-img, .small-img img { display:block; width:100%; height:100% } .kit-main-card img, .gallery-large img, .small-img img { object-fit:cover; object-position:center top } .kit-arrows { position:absolute; right:16px; bottom:14px; display:flex; gap:8px } .kit-arrows button { display:grid; place-items:center; width:34px; height:34px; background:#fff; border:0; border-radius:50%; cursor:pointer; font-size:24px } .kit-gallery { display:grid; grid-template-columns:1.35fr .8fr; gap:14px } .gallery-large, .small-img { min-height:100%; overflow:hidden; background:#eee } .gallery-stack { display:grid; gap:14px } .small-img { min-height:204px } .impact-section { padding:56px 0; background:#f5f5f5 } .impact-grid { display:grid; grid-template-columns:1.15fr .85fr; gap:44px; align-items:center } .impact-grid picture { overflow:hidden; border-radius:6px; background:#ddd } .impact-grid img { width:100%; aspect-ratio:16/9; object-fit:cover; object-position:center top } .impact-copy h2 { margin:0 0 18px; font-size:clamp(1.8rem, 3vw, 3rem); line-height:1; letter-spacing:-.045em } .impact-copy p { margin:0 0 14px; color:#333; font-size:1rem; line-height:1.55 } .more-stories { padding:42px 0 46px; background:#eee } .more-stories h2 { margin:0 0 22px; font-size:clamp(2rem, 3vw, 3rem); letter-spacing:-.04em } .more-story-grid { display:grid; grid-template-columns:1fr 1fr; gap:26px } .more-card { position:relative; min-height:330px; overflow:hidden; color:#fff; background:#222 } .more-img, .more-img img { position:absolute; inset:0; width:100%; height:100% } .more-img img { object-fit:cover; object-position:center top } .more-copy { position:relative; z-index:2; max-width:290px; padding:34px } .more-card:after { content:""; position:absolute; inset:0; background:linear-gradient(90deg, rgba(0, 0, 0, .7), rgba(0, 0, 0, .2)); z-index:1 } .coming-btn { display:inline-flex; margin-top:16px; min-height:38px; align-items:center; padding:0 22px; color:#fff; background:rgba(255, 255, 255, .45); border-radius:999px; text-decoration:none; font-weight:800 } .faq-section { padding:46px 0 64px; background:#fff } .faq-section h2 { margin:0 0 22px; font-size:clamp(2rem, 3vw, 3rem); letter-spacing:-.04em } .faq-list { display:grid; gap:10px } .faq-list details { border:1px solid #d9d9d9; border-radius:7px; background:#fff } .faq-list summary { position:relative; cursor:pointer; padding:18px 52px 18px 20px; font-weight:900; list-style:none } .faq-list summary::-webkit-details-marker { display:none } .faq-list summary:after { content:"+"; position:absolute; right:22px; top:50%; transform:translateY(-50%); font-size:26px; font-weight:400 } .faq-list details[open] summary:after { content:"−" } .faq-list details p { margin:0; padding:0 20px 16px; color:#333; font-size:.95rem; line-height:1.5 } .site-footer { min-height:128px; display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:30px; padding:26px clamp(22px, 6vw, 120px); color:#fff; background:#050505 } .footer-brand { color:#fff; text-decoration:none; font-weight:900; font-size:24px; line-height:.88; letter-spacing:-.04em; justify-self:start } .footer-brand:after { content:""; display:inline-block; width:16px; height:12px; margin-left:4px; background:#e2231a; clip-path:polygon(0 0, 100% 0, 0 100%) } .site-footer nav { display:flex; gap:clamp(18px, 4vw, 60px) } .site-footer nav a { color:#fff; text-decoration:none; font-size:14px } .site-footer p { justify-self:end; margin:0; color:rgba(255, 255, 255, .75); font-size:13px } @media(max-width:980px) { .site-nav nav { width:100%; justify-content:center; gap:24px; overflow-x:auto; white-space:nowrap; padding:12px 12px 0 } .kit-layout { grid-template-columns:1fr } .thumb-strip { grid-template-columns:repeat(5, 58px); justify-content:center } .kit-main-card { min-height:520px } .kit-gallery { grid-template-columns:1fr } .gallery-stack { grid-template-columns:repeat(3, 1fr) } .impact-grid { grid-template-columns:1fr } .more-story-grid { grid-template-columns:1fr } .site-footer { grid-template-columns:1fr; text-align:center } .footer-brand, .site-footer p { justify-self:center } .site-footer nav { flex-wrap:wrap; justify-content:center } } @media(max-width:640px) { .na-hero, .club-story, .tech-story { min-height:900px; height:750px } .site-nav { min-height:46px } .site-nav nav { justify-content:center; gap:18px } .site-nav nav a, .site-nav nav .nav-disabled { font-size:12px } .hero-content, .club-content { width:min(100% - 28px, 680px); padding-top:120px } .hero-content h1 { font-size:clamp(3rem, 13vw, 4.3rem) } .hero-subtitle { font-size:clamp(1.3rem, 6vw, 1.9rem) } .legacy-section { padding:44px 0 } .thumb-strip { overflow-x:auto; justify-content:flex-start } .kit-main-card { min-height:620px } .gallery-stack { grid-template-columns:1fr } .small-img { min-height:240px } .impact-grid img { aspect-ratio:3/4 } .more-card { min-height:430px } } .hero-content { transform:translateY(34px) } .pill-btn:hover, .pill-btn:focus { background:#5542c9; color:#fff } .club-copy-updated { max-width:940px } .club-copy-updated p:not(.location):not(.strong-copy) { max-width:860px; line-height:1.45 } .kit-section .container { width:min(100% - 32px, 1500px) } .kit-gallery .gallery-large img { object-position:center top } .kit-gallery .small-img img { object-position:center top } @media(max-width:980px) { .kit-layout { max-width:720px } .kit-main-card { min-height:560px } .kit-gallery { grid-template-columns:1fr } .gallery-stack { grid-template-columns:repeat(3, 1fr) } .small-img { min-height:210px } } @media(max-width:640px) { .na-hero { min-height:740px; height:740px } .hero-content { transform:translateY(45px) } .club-content { padding-top:54px } .kit-main-card { min-height:620px } .gallery-stack { grid-template-columns:1fr } .small-img { min-height:260px } .thumb-strip button { width:64px; height:74px } } .kit-layout .thumb-strip, .thumb-strip { display: flex  !important; flex-direction: column  !important; gap: 6px  !important; width: 70px  !important; min-width: 70px  !important; align-items: flex-start  !important; justify-content: flex-start  !important; overflow: visible  !important; } .kit-layout .thumb-strip button, .kit-layout .thumb-strip .kit-thumb, .thumb-strip button, .thumb-strip .kit-thumb { box-sizing: border-box  !important; width: 70px  !important; height: 70px  !important; min-width: 70px  !important; min-height: 70px  !important; max-width: 70px  !important; max-height: 70px  !important; padding: 0  !important; margin: 0  !important; border: 2px solid #e5e5e5  !important; background: #eee  !important; display: block  !important; line-height: 0  !important; font-size: 0  !important; overflow: hidden  !important; flex: 0 0 70px  !important; appearance: none  !important; } .kit-layout .thumb-strip button.active, .kit-layout .thumb-strip .kit-thumb.active, .thumb-strip button.active, .thumb-strip .kit-thumb.active { border-color: #0b6cff  !important; transform: none  !important; } .kit-layout .thumb-strip button img, .kit-layout .thumb-strip .kit-thumb img, .thumb-strip button img, .thumb-strip .kit-thumb img { width: 100%  !important; height: 100%  !important; max-width: none  !important; max-height: none  !important; display: block  !important; object-fit: cover  !important; object-position: center top  !important; margin: 0  !important; padding: 0  !important; } @media (max-width: 980px) { .kit-layout .thumb-strip, .thumb-strip { flex-direction: row  !important; width: auto  !important; min-width: 0  !important; gap: 6px  !important; overflow-x: auto  !important; } .kit-layout .thumb-strip button, .kit-layout .thumb-strip .kit-thumb, .thumb-strip button, .thumb-strip .kit-thumb { width: 64px  !important; height: 64px  !important; min-width: 64px  !important; min-height: 64px  !important; max-width: 64px  !important; max-height: 64px  !important; flex: 0 0 64px  !important; } } .kit-thumb { transition: transform .2s ease, border-color .2s ease, opacity .2s ease; cursor: pointer; } .kit-thumb.active { border: 2px solid #0b6cff; transform: scale(1.04); } .kit-layout .thumb-strip { gap: 6px; width: 88px; min-width: 88px; } .kit-layout .thumb-strip button, .kit-layout .thumb-strip .kit-thumb { width: 86px; height: 86px; padding: 0; margin: 0; border: 0; background: #f3f3f3; display: block; line-height: 0; overflow: hidden; } .kit-layout .thumb-strip img { width: 100%; height: 100%; display: block; object-fit: cover; } .kit-layout .kit-thumb.active { border: 2px solid #0b6cff; transform: none; } @media (max-width: 900px) { .kit-layout .thumb-strip { width: auto; min-width: 0; gap: 6px; } .kit-layout .thumb-strip button, .kit-layout .thumb-strip .kit-thumb { width: 72px; height: 72px; flex: 0 0 72px; } } .kit-layout .thumb-strip { gap:6px  !important; } @media (max-width:767px) { .kit-layout .thumb-strip { gap:6px  !important; } } .kit-main-card { position: relative; } .kit-main-card picture, .kit-main-card img { display: block; } .kit-arrows { position: absolute; right: 16px; bottom: 14px; z-index: 20; display: flex; gap: 8px; pointer-events: auto; } .kit-arrows button { cursor: pointer; pointer-events: auto; } .kit-thumb { cursor: pointer; } .kit-thumb.active { border-color: #0b6cff  !important; } .kit-section { position: relative; } .kit-main-card { position: relative; } .kit-main-card picture, .kit-main-card img { display: block; } .kit-arrows { position: absolute; right: 16px; bottom: 14px; z-index: 50; display: flex; gap: 8px; pointer-events: auto; } .kit-arrows button, .kit-thumb { cursor: pointer; pointer-events: auto; } .kit-arrows button { position: relative; z-index: 51; } .kit-thumb.active { border-color: #0b6cff  !important; } .crest-row { display:flex; align-items:center; gap:20px; margin-bottom:32px; } .crest-row img { width:80px; height:80px; object-fit:contain; } @media (max-width:768px) { .crest-row { gap:16px; } .crest-row img { width:64px; height:64px; } } .video-modal{ position:fixed; inset:0; background:rgba(0,0,0,.85); display:flex; align-items:center; justify-content:center; opacity:0; visibility:hidden; transition:.3s; z-index:9999; } .video-modal.active{ opacity:1; visibility:visible; } .video-modal-content{ position:relative; width:min(90vw,960px); aspect-ratio:16/9; } .video-modal iframe{ width:100%; height:100%; border:0; border-radius:8px; } .video-close{ position:absolute; top:-45px; right:0; width:38px; height:38px; border:0; border-radius:50%; background:#fff; color:#000; font-size:28px; cursor:pointer; line-height:1; } .video-close:hover{ background:#e2231a; color:#fff; } body.modal-open{ overflow:hidden; }