@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 400 800;
font-display: swap;
src: url(../fonts/inter-greek-ext.woff2) format('woff2');
unicode-range: U+1F00-1FFF;
}
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 400 800;
font-display: swap;
src: url(../fonts/inter-greek.woff2) format('woff2');
unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 400 800;
font-display: swap;
src: url(../fonts/inter-latin-ext.woff2) format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 400 800;
font-display: swap;
src: url(../fonts/inter-latin.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Roboto Condensed';
font-style: normal;
font-weight: 400 900;
font-display: swap;
src: url(../fonts/roboto-condensed-greek-ext.woff2) format('woff2');
unicode-range: U+1F00-1FFF;
}
@font-face {
font-family: 'Roboto Condensed';
font-style: normal;
font-weight: 400 900;
font-display: swap;
src: url(../fonts/roboto-condensed-greek.woff2) format('woff2');
unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
@font-face {
font-family: 'Roboto Condensed';
font-style: normal;
font-weight: 400 900;
font-display: swap;
src: url(../fonts/roboto-condensed-latin-ext.woff2) format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: 'Roboto Condensed';
font-style: normal;
font-weight: 400 900;
font-display: swap;
src: url(../fonts/roboto-condensed-latin.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
:root{
--ink:        #0B0B0D;
--ink-2:      #101014;
--panel:      #15151A;
--panel-2:    #1C1C22;
--line:       rgba(255,255,255,.10);
--line-2:     rgba(255,255,255,.18);
--bone:       #F4F2EF;
--bone-dim:   #A8A6A3;
--bone-mute:  #76747A;
--red:        #E6102A;
--red-hot:    #FF2B45;
--red-deep:   #A50C1E;
--wood:       #C2874A;
--display: "Roboto Condensed", "Arial Narrow", system-ui, sans-serif;
--body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
--gut: clamp(1.25rem, 4vw, 2.5rem);
--shell: 1480px;
--sect: clamp(4rem, 7.5vw, 7rem);
--r: 4px;
--ease: cubic-bezier(.22,1,.36,1);
--ease-io: cubic-bezier(.65,0,.35,1);
--nav-h: 76px;
}
*,*::before,*::after{ box-sizing:border-box; }
html{
-webkit-text-size-adjust:100%;
scroll-behavior:smooth;
scroll-padding-top: calc(var(--nav-h) + 1rem);
}
body{
margin:0;
background:var(--ink);
color:var(--bone);
font-family:var(--body);
font-size:clamp(1rem,.95rem + .25vw,1.0625rem);
line-height:1.65;
font-weight:400;
-webkit-font-smoothing:antialiased;
text-rendering:optimizeLegibility;
overflow-x:hidden;
}
body::after{
content:""; position:fixed; inset:-50%; z-index:9999;
pointer-events:none; opacity:.028; mix-blend-mode:overlay;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
animation:grain 7s steps(6) infinite;
}
@keyframes grain{
0%,100%{transform:translate(0,0)}      16%{transform:translate(-4%,-4%)}
33%{transform:translate(3%,-2%)}       50%{transform:translate(-2%,3%)}
66%{transform:translate(4%,2%)}        83%{transform:translate(-3%,1%)}
}
img,video,svg{ display:block; max-width:100%; height:auto; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
ul,ol{ margin:0; padding:0; list-style:none; }
figure,figcaption,blockquote{ margin:0; }
::selection{ background:var(--red); color:#fff; }
:focus-visible{
outline:2px solid var(--red-hot);
outline-offset:3px;
border-radius:2px;
}
h1,h2,h3,h4,.display{
overflow-wrap:break-word;
font-family:var(--display);
font-weight:800;
line-height:.92;
letter-spacing:-.015em;
text-transform:uppercase;
margin:0;
text-wrap:balance;
}
.d-xxl{ font-size:clamp(2.8rem, 9vw, 7.5rem); font-weight:900; letter-spacing:-.025em; }
.d-xl { font-size:clamp(2.2rem, 5.6vw, 4.6rem);  font-weight:900; letter-spacing:-.022em; }
.d-l  { font-size:clamp(1.75rem, 3.6vw, 2.9rem); }
.d-m  { font-size:clamp(1.5rem, 2.6vw, 2.15rem); }
.d-s  { font-size:clamp(1.15rem, 1.7vw, 1.4rem); letter-spacing:.005em; }
.lead{
font-size:clamp(1.0625rem, .98rem + .55vw, 1.3rem);
line-height:1.6; color:var(--bone-dim); max-width:62ch; text-wrap:pretty;
}
p{ margin:0 0 1.1em; text-wrap:pretty; }
p:last-child{ margin-bottom:0; }
.eyebrow{
font-family:var(--display);
font-size:.8125rem; font-weight:700;
letter-spacing:.22em; text-transform:uppercase;
color:var(--red-hot);
display:flex; align-items:center; gap:.7rem;
margin:0 0 1.4rem;
}
.eyebrow::before{
content:""; width:28px; height:2px; background:var(--red); flex:none;
}
.eyebrow--plain::before{ display:none; }
.eyebrow--mute{ color:var(--bone-mute); }
.eyebrow--mute::before{ background:var(--bone-mute); }
.num{
font-family:var(--display); font-weight:900;
font-variant-numeric:tabular-nums; letter-spacing:-.02em;
}
.hl{ color:var(--red-hot); }
.outline-txt{
color:transparent;
-webkit-text-stroke:1.5px var(--line-2);
}
.shell{
width:min(100% - (var(--gut) * 2), var(--shell));
margin-inline:auto;
}
.shell--wide{ width:min(100% - (var(--gut) * 2), 1760px); }
.section{ padding-block:var(--sect); position:relative; }
.section--tight{ padding-block:clamp(3.5rem,7vw,6rem); }
.section--panel{ background:var(--ink-2); }
.grid{ display:grid; gap:clamp(1.5rem,3vw,2.75rem); }
.g-2{ grid-template-columns:repeat(2,1fr); }
.g-3{ grid-template-columns:repeat(3,1fr); }
.g-4{ grid-template-columns:repeat(4,1fr); }
.g-5{ grid-template-columns:repeat(5,1fr); }
.g-12{ grid-template-columns:repeat(12,1fr); }
@media (max-width:1100px){
.g-5{ grid-template-columns:repeat(3,1fr); }
}
@media (max-width:1000px){
.g-4{ grid-template-columns:repeat(2,1fr); }
.g-3{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:760px){
.g-5{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:640px){
.g-2,.g-3,.g-4{ grid-template-columns:1fr; }
}
@media (max-width:460px){
.g-5{ grid-template-columns:1fr; }
}
.rule{ height:1px; background:var(--line); border:0; margin:0; }
.sect-head{
display:grid; grid-template-columns:minmax(0,.5fr) minmax(0,2fr);
gap:clamp(1rem,3vw,3.5rem); align-items:start;
margin-bottom:clamp(2.5rem,5vw,4.5rem);
}
@media (max-width:860px){ .sect-head{ grid-template-columns:1fr; align-items:start; } }
.btn{
--bg:var(--red); --fg:#fff;
position:relative; display:inline-flex; align-items:center; gap:.7rem;
padding:1.05rem 1.9rem;
background:var(--bg); color:var(--fg);
font-family:var(--display); font-weight:700; font-size:.9375rem;
letter-spacing:.11em; text-transform:uppercase;
border-radius:2px; overflow:hidden; isolation:isolate;
transition:transform .4s var(--ease), box-shadow .4s var(--ease);
}
.btn span{ position:relative; z-index:2; }
.btn::before{
content:""; position:absolute; inset:0; z-index:1;
background:var(--bone); transform:translateY(101%);
transition:transform .45s var(--ease);
}
.btn:hover{ transform:translateY(-2px); box-shadow:0 14px 34px -14px var(--red); }
.btn:hover::before{ transform:translateY(0); }
.btn:hover span{ color:var(--ink); }
.btn svg{ position:relative; z-index:2; transition:transform .4s var(--ease); }
.btn:hover svg{ transform:translateX(4px); }
.btn--ghost{ --bg:transparent; --fg:var(--bone); box-shadow:inset 0 0 0 1px var(--line-2); }
.btn--ghost:hover{ box-shadow:inset 0 0 0 1px var(--bone); }
.btn--bone{ --bg:var(--bone); --fg:var(--ink); }
.btn--bone::before{ background:var(--red); }
.btn--bone:hover span{ color:#fff; }
.tlink{
display:inline-flex; align-items:center; gap:.55rem;
font-family:var(--display); font-weight:700; font-size:.875rem;
letter-spacing:.14em; text-transform:uppercase;
padding-bottom:.35rem; position:relative; color:var(--bone);
}
.tlink::after{
content:""; position:absolute; left:0; bottom:0; height:1.5px; width:100%;
background:var(--line-2);
}
.tlink::before{
content:""; position:absolute; left:0; bottom:0; height:1.5px; width:100%;
background:var(--red); transform:scaleX(0); transform-origin:left;
transition:transform .45s var(--ease); z-index:1;
}
.tlink:hover::before{ transform:scaleX(1); }
.tlink svg{ transition:transform .4s var(--ease); }
.tlink:hover svg{ transform:translate(3px,-3px); }
[data-reveal]{
opacity:0; transform:translateY(26px);
transition:opacity .9s var(--ease), transform .9s var(--ease);
transition-delay:var(--d,0ms);
}
[data-reveal].in{ opacity:1; transform:none; }
[data-reveal="mask"]{ opacity:1; transform:none; }
[data-reveal="mask"] .ln{
display:block; overflow:hidden;
padding:.06em .18em; margin:-.06em -.18em;
}
[data-reveal="mask"] .ln > span{
display:block; transform:translateY(103%);
transition:transform 1.05s var(--ease);
transition-delay:var(--d,0ms);
}
[data-reveal="mask"].in .ln > span{ transform:none; }
[data-reveal="scale"]{
opacity:0; transform:scale(.97);
transition:opacity 1.1s var(--ease), transform 1.3s var(--ease);
transition-delay:var(--d,0ms);
}
[data-reveal="scale"].in{ opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){
*,*::before,*::after{
animation-duration:.001ms !important; animation-iteration-count:1 !important;
transition-duration:.001ms !important; scroll-behavior:auto !important;
}
[data-reveal]{ opacity:1 !important; transform:none !important; clip-path:none !important; }
[data-reveal="mask"] .ln > span{ transform:none !important; }
body::after{ display:none; }
}
.sr-only{
position:absolute; width:1px; height:1px; padding:0; margin:-1px;
overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}
.skip{
position:fixed; top:.5rem; left:.5rem; z-index:2000;
background:var(--red); color:#fff; padding:.75rem 1.25rem;
font-family:var(--display); letter-spacing:.1em; text-transform:uppercase;
transform:translateY(-200%); transition:transform .3s var(--ease);
}
.skip:focus{ transform:none; }
.nav{
position:fixed; inset:0 0 auto 0; z-index:1000;
height:var(--nav-h);
display:flex; align-items:center;
transition:background .45s var(--ease), box-shadow .45s var(--ease),
backdrop-filter .45s var(--ease), transform .5s var(--ease);
}
.nav::before{
content:""; position:absolute; inset:0; z-index:-1;
background:linear-gradient(to bottom, rgba(0,0,0,.72), transparent);
opacity:1; transition:opacity .4s var(--ease);
}
.nav.stuck{
background:rgba(11,11,13,.82);
backdrop-filter:blur(18px) saturate(140%);
-webkit-backdrop-filter:blur(18px) saturate(140%);
box-shadow:0 1px 0 var(--line);
}
.nav.stuck::before{ opacity:0; }
.nav.hide{ transform:translateY(-100%); }
.nav__in{
width:min(100% - (var(--gut) * 2), 1760px);
margin-inline:auto;
display:flex; align-items:center; gap:clamp(1rem,3vw,2.75rem);
}
.nav__logo{ display:flex; align-items:center; gap:.7rem; flex:none; margin-right:auto; }
.nav__logo img{ height:42px; width:auto; filter:drop-shadow(0 2px 10px rgba(0,0,0,.85)); }
.nav__logo-txt{
font-family:var(--display); font-weight:800; text-transform:uppercase;
font-size:.9375rem; letter-spacing:.04em; line-height:1.05;
}
.nav__logo-txt small{
display:block; font-size:.5625rem; letter-spacing:.2em;
color:var(--bone-mute); font-weight:600;
}
@media (max-width:420px){ .nav__logo-txt{ display:none; } }
.nav__menu{ display:flex; align-items:center; gap:clamp(.6rem,1.6vw,1.6rem); }
@media (max-width:1100px){ .nav__menu{ display:none; } }
.nav__link{
position:relative; padding:.5rem 0;
font-family:var(--display); font-weight:600; font-size:.8125rem;
letter-spacing:.11em; text-transform:uppercase;
color:var(--bone-dim); white-space:nowrap;
transition:color .3s var(--ease);
}
.nav__link::after{
content:""; position:absolute; left:0; right:0; bottom:0; height:1.5px;
background:var(--red); transform:scaleX(0); transform-origin:right;
transition:transform .4s var(--ease);
}
.nav__link:hover{ color:var(--bone); }
.nav__link:hover::after{ transform:scaleX(1); transform-origin:left; }
.nav__link[aria-current="page"]{ color:var(--bone); }
.nav__link[aria-current="page"]::after{ transform:scaleX(1); }
.nav__right{ display:flex; align-items:center; gap:.9rem; flex:none; }
.lang{
display:flex; align-items:center; gap:2px; flex:none;
box-shadow:inset 0 0 0 1px var(--line); border-radius:2px; padding:2px;
}
.lang a{
font-family:var(--display); font-weight:700; font-size:.75rem;
letter-spacing:.1em; border-radius:1px;
min-width:40px; min-height:38px; padding:0 .6rem;
display:inline-flex; align-items:center; justify-content:center;
color:var(--bone-mute); transition:color .3s, background .3s;
}
@media (max-width:860px){ .lang a{ min-height:40px; } }
.lang a:hover{ color:var(--bone); }
.lang a[aria-current]{ background:var(--red); color:#fff; }
.nav__cta{ padding:.7rem 1.3rem; font-size:.8125rem; }
@media (max-width:760px){ .nav__cta{ display:none; } }
.burger{
display:none; width:44px; height:44px; flex:none;
align-items:center; justify-content:center; position:relative; z-index:1200;
}
@media (max-width:1100px){ .burger{ display:flex; } }
.burger i{
position:absolute; left:11px; width:22px; height:2px; background:var(--bone);
transition:transform .45s var(--ease), opacity .25s var(--ease), width .45s var(--ease);
}
.burger i:nth-child(1){ transform:translateY(-6px); }
.burger i:nth-child(3){ transform:translateY(6px); width:14px; }
.burger[aria-expanded="true"] i:nth-child(1){ transform:rotate(45deg); }
.burger[aria-expanded="true"] i:nth-child(2){ opacity:0; }
.burger[aria-expanded="true"] i:nth-child(3){ transform:rotate(-45deg); width:22px; }
.drawer{
position:fixed; inset:0; z-index:1100;
background:var(--ink); padding:calc(var(--nav-h) + 2rem) var(--gut) 2rem;
display:flex; flex-direction:column;
clip-path:circle(0% at calc(100% - 46px) 38px);
transition:clip-path .75s var(--ease);
overflow-y:auto; visibility:hidden;
}
.drawer.open{ clip-path:circle(150% at calc(100% - 46px) 38px); visibility:visible; }
.drawer__nav{ display:flex; flex-direction:column; gap:.15rem; margin-top:auto; margin-bottom:auto; }
.drawer__nav a{
font-family:var(--display); font-weight:800; text-transform:uppercase;
font-size:clamp(1.75rem,8vw,3rem); line-height:1.12; letter-spacing:-.015em;
color:var(--bone); padding:.18rem 0;
opacity:0; transform:translateY(22px);
transition:opacity .5s var(--ease), transform .5s var(--ease), color .3s;
}
.drawer.open .drawer__nav a{ opacity:1; transform:none; }
.drawer__nav a:hover{ color:var(--red-hot); }
.drawer__nav a .idx{
font-size:.75rem; color:var(--red); vertical-align:super;
margin-right:.6rem; letter-spacing:.1em;
}
.drawer__foot{
display:flex; flex-wrap:wrap; gap:1rem 2rem;
padding-top:1.75rem; border-top:1px solid var(--line);
font-size:.875rem; color:var(--bone-dim);
}
.drawer__foot a:hover{ color:var(--red-hot); }
body.locked{ overflow:hidden; }
.hero{
position:relative; min-height:100svh;
display:flex; align-items:flex-end;
padding-top:var(--nav-h); overflow:hidden; isolation:isolate;
}
@media (max-width:980px){ .hero{ min-height:92svh; } }
@media (max-width:860px){
.hero__scrim{
background:
linear-gradient(to top, var(--ink) 2%, rgba(11,11,13,.95) 34%, rgba(11,11,13,.72) 64%, rgba(11,11,13,.6) 100%),
radial-gradient(130% 60% at 10% 100%, rgba(230,16,42,.3), transparent 65%);
}
.hero__eyebrow{ letter-spacing:.14em; font-size:.6875rem; }
}
@media (max-width:640px){
.hero__sub{ font-size:.9375rem; line-height:1.55; max-width:40ch; }
.hero__acts{ margin-top:1.5rem; gap:.6rem; }
.hero__acts .btn{ flex:1 1 100%; justify-content:center; }
.hero__facts li{ padding:.75rem 1rem; }
.hero__facts .k{ font-size:1.15rem; }
}
.hero__media{ position:absolute; inset:0; z-index:-2; overflow:hidden; }
.hero__media img,.hero__media video{
width:100%; height:100%; object-fit:cover; object-position:center 55%;
transform:scale(1.08);
animation:heroIn 2.2s var(--ease) forwards, heroDrift 26s ease-in-out 2.2s infinite alternate;
}
@keyframes heroIn{ to{ transform:scale(1.02); } }
@keyframes heroDrift{ to{ transform:scale(1.1) translate3d(-1.2%,-1%,0); } }
.hero__scrim{
position:absolute; inset:0; z-index:-1;
background:
linear-gradient(to top, var(--ink) 1%, rgba(11,11,13,.9) 20%, rgba(11,11,13,.42) 55%, rgba(11,11,13,.58) 100%),
radial-gradient(120% 75% at 12% 100%, rgba(230,16,42,.26), transparent 62%);
}
.hero__in{
width:min(100% - (var(--gut) * 2), 1760px);
margin-inline:auto; padding-block:clamp(2.5rem,6vw,5rem);
position:relative;
}
.hero__title{
font-size:clamp(2.25rem, 5.4vw, 4.75rem);
font-weight:900; line-height:.92; letter-spacing:-.028em;
text-transform:uppercase; margin:0 0 1.35rem; max-width:18ch;
}
@media (min-width:861px) and (max-height:820px){
.hero__title{ font-size:clamp(2rem,3.9vw,3.4rem); margin-bottom:1rem; }
.hero__sub{ font-size:1rem; }
}
.hero__title .ln{ display:block; overflow:hidden; }
.hero__title .ln > span{
display:block; transform:translateY(102%);
animation:lineUp 1.15s var(--ease) forwards;
animation-delay:calc(var(--i) * 110ms + 260ms);
}
@keyframes lineUp{ to{ transform:none; } }
.hero__grid{
display:grid; grid-template-columns:minmax(0,1.35fr) minmax(0,.65fr);
gap:clamp(1.75rem,4vw,4rem); align-items:end;
}
@media (max-width:980px){ .hero__grid{ grid-template-columns:1fr; } }
.hero__sub{
max-width:46ch; color:var(--bone-dim); font-size:clamp(1rem,.95rem + .35vw,1.1875rem);
opacity:0; animation:fadeUp .9s var(--ease) .95s forwards;
}
.hero__acts{
display:flex; flex-wrap:wrap; gap:.85rem; margin-top:2rem;
opacity:0; animation:fadeUp .9s var(--ease) 1.1s forwards;
}
@keyframes fadeUp{ from{opacity:0; transform:translateY(20px);} to{opacity:1; transform:none;} }
.hero__eyebrow{
opacity:0; animation:fadeUp .8s var(--ease) .15s forwards;
}
.hero__facts{
display:grid; gap:1px; background:var(--line);
box-shadow:inset 0 0 0 1px var(--line);
opacity:0; animation:fadeUp .9s var(--ease) 1.25s forwards;
}
.hero__facts li{
background:rgba(11,11,13,.58); backdrop-filter:blur(10px);
padding:.9rem 1.15rem; display:flex; align-items:baseline; gap:.85rem;
}
.hero__facts .k{
font-family:var(--display); font-weight:900; font-size:1.3rem;
color:var(--red-hot); flex:none; min-width:3.6ch;
}
.hero__facts .v{
font-size:.8125rem; letter-spacing:.06em; text-transform:uppercase;
color:var(--bone-dim); font-weight:500; line-height:1.3;
}
.scroll-cue{
position:absolute; right:calc(var(--gut) * .35); bottom:clamp(2.5rem,6vw,5rem);
display:flex; align-items:center; gap:.7rem;
font-family:var(--display); font-size:.6875rem; letter-spacing:.2em;
text-transform:uppercase; color:var(--bone-mute);
writing-mode:vertical-rl;
opacity:0; animation:fadeUp .9s var(--ease) 1.5s forwards;
}
@media (max-width:1280px){ .scroll-cue{ display:none; } }
.scroll-cue::after{
content:""; width:1px; height:56px;
background:linear-gradient(var(--red), transparent);
animation:cue 2.2s var(--ease-io) infinite;
}
@keyframes cue{ 0%{transform:scaleY(0);transform-origin:top} 50%{transform:scaleY(1);transform-origin:top} 51%{transform-origin:bottom} 100%{transform:scaleY(0);transform-origin:bottom} }
.marquee{
overflow:clip; max-width:100vw; border-block:1px solid var(--line);
background:var(--ink-2); padding-block:1.1rem;
display:flex; user-select:none;
}
.marquee--red{ background:var(--red); border-color:transparent; }
.marquee__track{
display:flex; flex:none; gap:0;
animation:slide 44s linear infinite;
}
.marquee:hover .marquee__track{ animation-play-state:paused; }
@keyframes slide{ to{ transform:translateX(-50%); } }
.marquee__track span{
display:inline-flex; align-items:center; gap:clamp(1.5rem,3vw,3rem);
padding-right:clamp(1.5rem,3vw,3rem);
font-family:var(--display); font-weight:800; font-size:clamp(1rem,1.8vw,1.5rem);
letter-spacing:.06em; text-transform:uppercase; white-space:nowrap;
color:var(--bone);
}
.marquee--red .marquee__track span{ color:#fff; }
.marquee__dot{ width:7px; height:7px; border-radius:50%; background:var(--red); flex:none; }
.marquee--red .marquee__dot{ background:rgba(255,255,255,.55); }
.marquee--ghost .marquee__track span{ color:transparent; -webkit-text-stroke:1px var(--line-2); }
.stats{
display:grid; grid-template-columns:repeat(4,1fr);
gap:1px; background:var(--line);
box-shadow:inset 0 0 0 1px var(--line);
}
@media (max-width:860px){ .stats{ grid-template-columns:repeat(2,1fr); } }
.stat{
background:var(--ink); padding:clamp(1.5rem,3vw,2.5rem);
display:flex; flex-direction:column; gap:.5rem;
position:relative; overflow:hidden;
}
.stat::after{
content:""; position:absolute; left:0; bottom:0; height:2px; width:100%;
background:var(--red); transform:scaleX(0); transform-origin:left;
transition:transform .7s var(--ease);
}
.stat.in::after{ transform:scaleX(1); transition-delay:var(--d,0ms); }
.stat__k{
font-family:var(--display); font-weight:900;
font-size:clamp(2.6rem,5.2vw,4.4rem); line-height:.92;
letter-spacing:-.03em; font-variant-numeric:tabular-nums;
}
.stat__k sup{ font-size:.42em; color:var(--red-hot); vertical-align:super; margin-left:.1em; }
.stat__v{
font-size:.8125rem; letter-spacing:.11em; text-transform:uppercase;
color:var(--bone-mute); font-weight:600; font-family:var(--display);
}
.card{
position:relative; background:var(--panel);
box-shadow:inset 0 0 0 1px var(--line);
padding:clamp(1.6rem,3vw,2.4rem);
display:flex; flex-direction:column; gap:1rem;
overflow:hidden; isolation:isolate;
transition:transform .55s var(--ease), box-shadow .55s var(--ease);
}
.card::before{
content:""; position:absolute; inset:0; z-index:-1;
background:radial-gradient(90% 100% at 50% 0%, rgba(230,16,42,.16), transparent 70%);
opacity:0; transition:opacity .55s var(--ease);
}
.card:hover{ transform:translateY(-5px); box-shadow:inset 0 0 0 1px var(--line-2); }
.card:hover::before{ opacity:1; }
.card__n{
font-family:var(--display); font-weight:900; font-size:.8125rem;
letter-spacing:.16em; color:var(--red-hot);
}
.card__t{ font-size:clamp(1.25rem,2vw,1.55rem); }
.card__b{ color:var(--bone-dim); font-size:.9375rem; line-height:1.62; }
.card__b:last-child{ margin-top:auto; }
.stage{
display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
gap:clamp(1.5rem,4vw,3.5rem); align-items:center;
padding-block:clamp(2.5rem,5vw,4rem);
border-top:1px solid var(--line);
}
.stage:last-child{ border-bottom:1px solid var(--line); }
@media (max-width:880px){ .stage{ grid-template-columns:1fr; } }
.stage__media{ position:relative; overflow:hidden; aspect-ratio:4/3; }
.stage__media img{
width:100%; height:100%; object-fit:cover;
filter:grayscale(.55) contrast(1.08);
transition:transform 1.2s var(--ease), filter .7s var(--ease);
}
.stage:hover .stage__media img{ transform:scale(1.06); filter:grayscale(0) contrast(1.05); }
.stage__badge{
position:absolute; top:1rem; left:1rem; z-index:2;
background:var(--red); color:#fff; padding:.4rem .8rem;
font-family:var(--display); font-weight:800; font-size:.75rem;
letter-spacing:.12em; text-transform:uppercase;
}
.stage__n{
font-family:var(--display); font-weight:900;
font-size:clamp(3.5rem,8vw,7rem); line-height:.8;
color:transparent; -webkit-text-stroke:1.5px var(--line-2);
margin-bottom:.6rem;
}
.stage__age{
display:inline-flex; align-items:center; gap:.5rem;
font-family:var(--display); font-weight:700; font-size:.8125rem;
letter-spacing:.14em; text-transform:uppercase; color:var(--red-hot);
margin-bottom:.9rem;
}
.stage__list{ display:grid; gap:.55rem; margin-top:1.3rem; }
.stage__list li{
display:flex; gap:.75rem; align-items:flex-start;
font-size:.9375rem; color:var(--bone-dim); line-height:1.55;
}
.stage__list li::before{
content:""; flex:none; width:6px; height:6px; margin-top:.58em;
background:var(--red); transform:rotate(45deg);
}
.gal{
display:grid; grid-template-columns:repeat(12,1fr);
grid-auto-rows:clamp(52px,4.4vw,74px);
gap:clamp(.5rem,1vw,.85rem);
}
.gal--6{ grid-template-columns:repeat(6,1fr); }
.r-4{ grid-row:span 4; } .r-5{ grid-row:span 5; } .r-6{ grid-row:span 6; }
.shot{ height:100%; }
.shot{
position:relative; overflow:hidden; background:var(--panel);
display:block; isolation:isolate;
}
.shot img{
width:100%; height:100%; object-fit:cover;
transition:transform 1.3s var(--ease), filter .8s var(--ease);
filter:brightness(.88) saturate(1.05);
}
.shot:hover img{ transform:scale(1.05); filter:brightness(1) saturate(1.1); }
.shot__cap{
position:absolute; inset:auto 0 0 0; z-index:2;
padding:1.6rem 1.15rem .95rem;
background:linear-gradient(to top, rgba(0,0,0,.88), transparent);
font-family:var(--display); font-weight:700; font-size:.8125rem;
letter-spacing:.13em; text-transform:uppercase;
transform:translateY(6px); opacity:.85;
transition:transform .5s var(--ease), opacity .5s var(--ease);
}
.shot:hover .shot__cap{ transform:none; opacity:1; }
.c-6{ grid-column:span 6; } .c-4{ grid-column:span 4; }
.c-8{ grid-column:span 8; } .c-3{ grid-column:span 3; }
.c-12{ grid-column:span 12; } .c-5{ grid-column:span 5; }
.c-7{ grid-column:span 7; }
@media (max-width:860px){
.c-6,.c-4,.c-8,.c-3,.c-5,.c-7{ grid-column:span 1; }
.c-12{ grid-column:span 2; }
}
.ar-sq{ aspect-ratio:1; } .ar-w{ aspect-ratio:16/10; }
.ar-t{ aspect-ratio:3/4; } .ar-p{ aspect-ratio:4/5; }
.ar-ultra{ aspect-ratio:21/9; }
@media (max-width:860px){ .ar-ultra{ aspect-ratio:16/10; } }
.person{ position:relative; display:block; }
.person__ph{
position:relative; overflow:hidden; aspect-ratio:1; background:var(--panel-2);
margin-bottom:1.1rem;
}
.person__ph img{
width:100%; height:100%; object-fit:cover;
filter:grayscale(1) contrast(1.12) brightness(.92);
transition:transform 1.1s var(--ease), filter .6s var(--ease);
}
.person:hover .person__ph img{ filter:grayscale(0) contrast(1.02) brightness(1); transform:scale(1.045); }
.person__ph::after{
content:""; position:absolute; inset:0; z-index:1;
background:linear-gradient(to top, rgba(230,16,42,.4), transparent 55%);
opacity:0; transition:opacity .6s var(--ease);
}
.person:hover .person__ph::after{ opacity:1; }
.person__name{ font-size:1.1875rem; margin-bottom:.3rem; }
.person__role{
font-family:var(--display); font-size:.75rem; font-weight:600;
letter-spacing:.14em; text-transform:uppercase; color:var(--red-hot);
}
.person__bio{ font-size:.875rem; color:var(--bone-mute); line-height:1.6; margin-top:.6rem; }
.acc{ border-top:1px solid var(--line); }
.acc__item{ border-bottom:1px solid var(--line); }
.acc__btn{
width:100%; display:flex; align-items:flex-start; gap:1.25rem;
padding:clamp(1.3rem,2.6vw,1.9rem) 0; text-align:left;
transition:color .35s var(--ease);
}
.acc__btn:hover{ color:var(--red-hot); }
.acc__n{
font-family:var(--display); font-weight:900; font-size:.8125rem;
color:var(--red); flex:none; padding-top:.4em; letter-spacing:.08em;
}
.acc__q{
flex:1; font-family:var(--display); font-weight:700;
font-size:clamp(1.0625rem,2vw,1.45rem); line-height:1.25;
text-transform:uppercase; letter-spacing:-.005em;
}
.acc__ic{
flex:none; width:26px; height:26px; position:relative; margin-top:.3em;
}
.acc__ic::before,.acc__ic::after{
content:""; position:absolute; top:50%; left:50%; background:currentColor;
transform:translate(-50%,-50%);
}
.acc__ic::before{ width:14px; height:1.5px; }
.acc__ic::after{ width:1.5px; height:14px; transition:transform .45s var(--ease); }
.acc__btn[aria-expanded="true"] .acc__ic::after{ transform:translate(-50%,-50%) scaleY(0); }
.acc__btn[aria-expanded="true"]{ color:var(--red-hot); }
.acc__panel{
display:grid; grid-template-rows:0fr;
transition:grid-template-rows .55s var(--ease);
}
.acc__panel.open{ grid-template-rows:1fr; }
.acc__panel > div{ overflow:hidden; }
.acc__body{
padding:0 0 clamp(1.4rem,2.6vw,2rem) clamp(0px,4vw,3.1rem);
color:var(--bone-dim); max-width:78ch; font-size:.96875rem;
}
.acc__body ul{ display:grid; gap:.45rem; margin-top:.9rem; }
.acc__body li{ display:flex; gap:.7rem; }
.acc__body li::before{ content:""; flex:none; width:5px; height:5px; margin-top:.62em; background:var(--red); transform:rotate(45deg); }
.partners{
display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr));
gap:1px; background:var(--line); box-shadow:inset 0 0 0 1px var(--line);
}
.partner{
background:var(--ink); aspect-ratio:16/9;
display:grid; place-items:center; padding:1.4rem;
transition:background .4s var(--ease);
}
.partner:hover{ background:var(--panel); }
.partner img{
max-height:52px; width:auto; object-fit:contain;
filter:grayscale(1) brightness(1.9) contrast(.85); opacity:.5;
transition:filter .45s var(--ease), opacity .45s var(--ease);
}
.partner:hover img{ filter:none; opacity:1; }
.partner span{
font-family:var(--display); font-weight:700; font-size:.8125rem;
letter-spacing:.1em; text-transform:uppercase; color:var(--bone-mute);
text-align:center; transition:color .4s;
}
.partner:hover span{ color:var(--bone); }
.cta{ position:relative; overflow:hidden; isolation:isolate; }
.cta__bg{ position:absolute; inset:0; z-index:-2; }
.cta__bg img{ width:100%; height:100%; object-fit:cover; }
.cta__bg::after{
content:""; position:absolute; inset:0;
background:linear-gradient(105deg, var(--ink) 18%, rgba(11,11,13,.88) 48%, rgba(165,12,30,.58));
}
.cta__in{ padding-block:clamp(4.5rem,10vw,8.5rem); position:relative; }
.cinfo{ display:grid; gap:1px; background:var(--line); box-shadow:inset 0 0 0 1px var(--line); }
.cinfo__row{
background:var(--ink); padding:clamp(1.3rem,2.6vw,1.9rem);
display:grid; grid-template-columns:minmax(0,.5fr) minmax(0,1fr);
gap:1rem; align-items:baseline;
}
@media (max-width:560px){ .cinfo__row{ grid-template-columns:1fr; gap:.3rem; } }
.cinfo__k{
font-family:var(--display); font-weight:700; font-size:.75rem;
letter-spacing:.16em; text-transform:uppercase; color:var(--bone-mute);
}
.cinfo__v{ font-size:1.0625rem; line-height:1.5; }
.cinfo__v a:hover{ color:var(--red-hot); }
.map{
width:100%; aspect-ratio:16/10; border:0; display:block;
filter:grayscale(1) invert(.92) contrast(.88);
}
@media (max-width:760px){ .map{ aspect-ratio:4/3; } }
.foot{ background:var(--ink-2); border-top:1px solid var(--line); padding-top:clamp(3.5rem,7vw,5.5rem); }
.foot__grid{
display:grid; grid-template-columns:minmax(0,1.5fr) repeat(3,minmax(0,1fr));
gap:clamp(2rem,4vw,3.5rem); padding-bottom:clamp(2.5rem,5vw,4rem);
}
@media (max-width:980px){ .foot__grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .foot__grid{ grid-template-columns:1fr; } }
.foot__h{
font-family:var(--display); font-weight:700; font-size:.75rem;
letter-spacing:.17em; text-transform:uppercase; color:var(--bone-mute);
margin-bottom:1.15rem;
}
.foot__list{ display:grid; gap:.6rem; }
.foot__list a, .foot__list span{ font-size:.9375rem; color:var(--bone-dim); transition:color .3s; }
.foot__list a:hover{ color:var(--red-hot); }
.foot__logo img{ height:60px; width:auto; margin-bottom:1.25rem; }
.foot__bar{
border-top:1px solid var(--line); padding-block:1.6rem;
display:flex; flex-wrap:wrap; gap:1rem 2rem; justify-content:space-between;
align-items:center; font-size:.8125rem; color:var(--bone-mute);
}
.social{ display:flex; gap:.5rem; }
.social a{
width:40px; height:40px; display:grid; place-items:center;
box-shadow:inset 0 0 0 1px var(--line); border-radius:2px;
color:var(--bone-dim);
transition:background .35s var(--ease), color .35s var(--ease), transform .35s var(--ease);
}
.social a:hover{ background:var(--red); color:#fff; transform:translateY(-2px); }
.social svg{ width:17px; height:17px; }
.foot__word{
font-family:var(--display); font-weight:900; line-height:.78;
font-size:clamp(3rem,15.5vw,14rem); letter-spacing:-.035em;
text-transform:uppercase; text-align:center;
color:transparent; -webkit-text-stroke:1px rgba(255,255,255,.1);
padding-bottom:.08em; user-select:none; overflow:hidden;
}
.phead{
position:relative; padding-top:calc(var(--nav-h) + clamp(3.5rem,8vw,7rem));
padding-bottom:clamp(2.5rem,6vw,5rem);
overflow:hidden; isolation:isolate;
}
.phead__bg{ position:absolute; inset:0; z-index:-2; }
.phead__bg img{ width:100%; height:100%; object-fit:cover; }
.phead__bg::after{
content:""; position:absolute; inset:0;
background:linear-gradient(to top, var(--ink) 4%, rgba(11,11,13,.9) 38%, rgba(11,11,13,.68));
}
.crumb{
display:flex; gap:.6rem; align-items:center; margin-bottom:1.5rem;
font-family:var(--display); font-size:.75rem; letter-spacing:.14em;
text-transform:uppercase; color:var(--bone-mute);
}
.crumb a:hover{ color:var(--red-hot); }
.crumb span{ color:var(--red); }
.pill{
display:inline-flex; align-items:center; gap:.5rem;
padding:.45rem .9rem; box-shadow:inset 0 0 0 1px var(--line-2);
border-radius:100px; font-family:var(--display); font-weight:600;
font-size:.75rem; letter-spacing:.12em; text-transform:uppercase;
color:var(--bone-dim);
}
.pill i{ width:6px; height:6px; border-radius:50%; background:var(--red); flex:none; }
.pill--live i{ animation:pulse 2s ease-in-out infinite; }
@keyframes pulse{ 0%,100%{opacity:1; box-shadow:0 0 0 0 rgba(230,16,42,.6)} 50%{opacity:.75; box-shadow:0 0 0 6px rgba(230,16,42,0)} }
.quote{
font-family:var(--display); font-weight:700; text-transform:uppercase;
font-size:clamp(1.5rem,4vw,3rem); line-height:1.08; letter-spacing:-.015em;
max-width:20ch;
}
.quote__t{ display:block; }
.quote-wrap{ position:relative; }
.quote-wrap::before{
content:"”"; position:absolute; right:0; top:-.42em; z-index:0;
font-family:var(--display); font-weight:900; line-height:1;
font-size:clamp(9rem,26vw,22rem); color:rgba(255,255,255,.14);
pointer-events:none; user-select:none;
}
.quote{ position:relative; z-index:1; }
@media (max-width:860px){ .quote-wrap::before{ font-size:12rem; top:auto; bottom:-.3em; opacity:.6; } }
.quote__by{
font-family:var(--body); font-weight:500; text-transform:none;
font-size:.875rem; letter-spacing:.06em; color:var(--bone-mute);
margin-top:1.5rem; display:block;
}
.split-line{
display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr);
gap:clamp(1.5rem,4vw,4rem);
}
@media (max-width:860px){ .split-line{ grid-template-columns:1fr; } }
.sticky-col{ position:sticky; top:calc(var(--nav-h) + 2.5rem); align-self:start; }
@media (max-width:860px){ .sticky-col{ position:static; } }
@media (max-width:860px){
.gal,.gal--6{ grid-template-columns:repeat(2,1fr); grid-auto-rows:auto; }
.r-4,.r-5,.r-6{ grid-row:auto; }
.shot{
aspect-ratio:4/3; height:auto; width:100%;
align-self:start; justify-self:stretch;
}
.shot__cap{
font-size:.6875rem; letter-spacing:.07em;
padding:1.2rem .7rem .7rem; overflow-wrap:anywhere;
}
}
@media (max-width:420px){
.gal,.gal--6{ grid-template-columns:1fr; }
.shot{ aspect-ratio:16/10; }
.shot__cap{ font-size:.75rem; letter-spacing:.1em; padding:1.4rem 1rem .9rem; }
}
.cform__fallback{
color:var(--red-hot); text-decoration:underline;
text-underline-offset:3px; white-space:nowrap;
}
.cform__fallback:hover{ color:var(--bone); }