@font-face {
  font-family:Inter;
  src:url("fonts/InterVariable.woff2") format("woff2");
  font-style:normal;
  font-weight:100 900;
  font-display:swap;
}

:root { --ink:#071321; --blue:#0874f9; font-family:Inter,Arial,sans-serif; color:var(--ink); font-synthesis:none; }
* { box-sizing:border-box; }
html, body { margin:0; min-width:320px; background:#fff; }
a { color:inherit; }
.skip-link { position:fixed; z-index:20; top:8px; left:8px; padding:10px 12px; color:#fff; background:var(--ink); transform:translateY(-150%); }
.skip-link:focus { transform:translateY(0); }
.site-page { width:100%; overflow:hidden; background:#fff; }

.site-header { min-height:76px; padding:0 clamp(24px,4vw,64px); display:flex; align-items:center; justify-content:space-between; gap:24px; border-bottom:1px solid #e3e7ec; background:#fff; }
.brand { min-height:46px; display:inline-flex; align-items:center; font-size:32px; font-weight:900; letter-spacing:-.075em; text-decoration:none; }
.header-actions { display:flex; align-items:center; gap:24px; }
.header-actions a { min-height:46px; display:inline-flex; align-items:center; justify-content:center; text-decoration:none; }
.call-action { gap:8px; color:#526176; font-size:12px; font-weight:760; }
.call-action svg { width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:1.75; stroke-linecap:round; stroke-linejoin:round; }
.call-action b { color:#071321; font-weight:780; }
.header-date { padding:0 18px; border:1.5px solid var(--blue); color:#0067e8; background:#fff; font-size:12px; font-weight:820; }

.hero { min-height:calc(100dvh - 76px); position:relative; overflow:hidden; color:#fff; background:var(--ink) url("xlr-hero-dj-stock-poster.jpg") center 44%/cover no-repeat; }
.hero > img,.hero > video { width:100%; height:100%; position:absolute; inset:0; display:block; object-fit:cover; object-position:center 44%; }
.hero-shade { position:absolute; inset:0; background:linear-gradient(90deg,rgba(2,7,14,.92) 0%,rgba(2,7,14,.6) 42%,rgba(2,7,14,.12) 72%),linear-gradient(0deg,rgba(2,7,14,.5),transparent 48%); }
.hero-copy { width:min(620px,48vw); position:absolute; bottom:clamp(56px,8vh,94px); left:clamp(28px,5vw,80px); }
.hero-copy > p { margin:0 0 18px; color:#a8cfff; font-size:11px; font-weight:850; letter-spacing:.14em; text-transform:uppercase; }
.hero h1 { margin:0; font-size:clamp(66px,7vw,100px); line-height:.88; letter-spacing:-.072em; }
.hero-copy > span { display:block; margin:24px 0 26px; color:#c4cedb; font-size:15px; line-height:1.45; }
.hero-copy > a { width:240px; min-height:54px; padding:0 17px; display:flex; align-items:center; justify-content:space-between; color:#fff; background:var(--blue); font-size:13px; font-weight:820; text-decoration:none; }
.hero-copy > a b { font-size:17px; font-weight:500; }

a:focus-visible { outline:3px solid #88beff; outline-offset:2px; }

@media (max-width:820px) {
  .site-header { min-height:70px; padding-inline:22px; }
  .brand { font-size:29px; }
  .header-actions { gap:14px; }
  .call-action b { display:none; }
  .hero { min-height:calc(100dvh - 70px); }
  .hero-copy { width:min(620px,72vw); bottom:58px; left:32px; }
  .hero h1 { font-size:clamp(58px,10vw,78px); }
}

@media (max-width:520px) {
  .site-header { min-height:66px; padding:0 16px; gap:14px; }
  .brand { min-height:44px; font-size:26px; }
  .header-actions { gap:10px; }
  .call-action { min-width:44px; min-height:44px; gap:5px; font-size:10.5px; }
  .call-action svg { width:14px; height:14px; }
  .header-date { min-height:44px; padding:0 11px; font-size:11px; }
  .hero { min-height:calc(100dvh - 66px); }
  .hero > img,.hero > video { object-position:center; }
  .hero-shade { background:linear-gradient(180deg,rgba(2,7,14,.16),rgba(2,7,14,.92)); }
  .hero-copy { width:auto; right:22px; bottom:46px; left:22px; }
  .hero-copy > p { margin-bottom:12px; font-size:9px; }
  .hero h1 { max-width:340px; font-size:clamp(44px,12.5vw,56px); line-height:.92; }
  .hero-copy > span { margin:15px 0 20px; font-size:13px; }
  .hero-copy > a { width:100%; min-height:52px; padding-inline:16px; }
}

@media (max-width:350px) {
  .site-header { padding-inline:12px; }
  .header-actions { gap:7px; }
  .call-action span { display:none; }
  .header-date { padding-inline:9px; font-size:10.5px; }
}

@media (prefers-reduced-motion:reduce) {
  .hero > video { display:none; }
}