/*==================================================
RESET
==================================================*/

*{
margin:0;
padding:0;
box-sizing:border-box;
}

html{
scroll-behavior:smooth;
}

body{
background:#050505;
color:#ECECEC;
font-family:'Inter',sans-serif;
overflow-x:hidden;
}

img{
display:block;
max-width:100%;
}

a{
text-decoration:none;
color:inherit;
}

.container{
width:min(92%,1280px);
margin:auto;
}

/*==================================================
GLOBAL
==================================================*/

:root{

--gold:#D4AF37;
--goldLight:#F5DEA0;
--dark:#050505;
--dark2:#090909;
--text:#ECECEC;

}

section{
padding:72px 0;
position:relative;
}

.section-divider{
padding:14px 0;
background:#080808;
text-align:center;
}

.section-divider img{
width:min(960px,95%);
margin:auto;
}

/*==================================================
TYPOGRAPHY
==================================================*/

.section-label{

font-size:15px;
letter-spacing:5px;
text-transform:uppercase;
color:#C8A74D;
font-weight:600;

}

.section-title{

font-family:"Cormorant Garamond",serif;
font-size:64px;
font-weight:600;
line-height:1;
color:var(--goldLight);
margin:14px 0 18px;

}

.section-copy{

font-size:18px;
line-height:1.9;
color:#D8D8D8;

}

/*==================================================
ANIMATION
==================================================*/

.fade{

opacity:0;
transform:translateY(30px);
transition:
opacity .8s ease,
transform .8s ease;

}

.fade.show{

opacity:1;
transform:none;

}

/*==================================================
HERO
==================================================*/

.hero{

padding:0;
background:#050505;

}

.hero-wrap{

position:relative;
overflow:hidden;

}

.hero-image{

display:block;
width:100%;
height:auto;

}

.hero-overlay{

position:absolute;

top:50%;
left:58%;

transform:translate(-50%,-50%);

width:min(42%,560px);

text-align:center;

z-index:5;

}

.hero-title{

width:100%;
max-width:520px;

margin:0 auto 28px;

filter:drop-shadow(0 6px 18px rgba(0,0,0,.45));

}

.hero-text{

font-size:19px;
line-height:1.85;

text-shadow:0 2px 10px rgba(0,0,0,.8);

margin-bottom:28px;

}

.hero-logo{

width:82px;

margin:auto;

opacity:.95;

}

/* subtle overlay */

.hero-wrap:after{

content:"";

position:absolute;

inset:0;

background:
linear-gradient(
90deg,
rgba(0,0,0,.03),
rgba(0,0,0,.08),
rgba(0,0,0,.28));

pointer-events:none;

}

/*==================================================
TRANSITION
==================================================*/

.transition{

background:#080808;

padding:16px 0 12px;

text-align:center;

}

.transition-seal{

width:150px;

margin:0 auto 16px;

filter:drop-shadow(0 0 20px rgba(212,175,55,.28));

}

.transition-divider{

width:min(980px,95%);

margin:auto;

}

/*==================================================
TABLET
==================================================*/

@media(max-width:991px){

.hero-overlay{

left:63%;
width:42%;

}

.hero-title{

max-width:400px;

}

.hero-text{

font-size:16px;

}

}

/*==================================================
MOBILE
==================================================*/

@media(max-width:768px){

.hero-image{

height:620px;

object-fit:cover;

object-position:28% center;

}

.hero-wrap:after{

background:
linear-gradient(
180deg,
rgba(0,0,0,.05),
rgba(0,0,0,.15),
rgba(0,0,0,.92));

}

.hero-overlay{

left:50%;
top:auto;
bottom:28px;

transform:translateX(-50%);

width:90%;
max-width:360px;

}

.hero-title{

max-width:280px;

margin-bottom:18px;

}

.hero-text{

font-size:15px;
line-height:1.65;
margin-bottom:18px;

}

.hero-logo{

width:58px;

}

.transition{

padding:12px 0;

}

.transition-seal{

width:110px;

margin-bottom:10px;

}

}

.nomination{

background:#090909;
padding:70px 0 75px;
overflow:hidden;

}

.nomination:before{

content:"";

position:absolute;

left:50%;
top:110px;

transform:translateX(-50%);

width:900px;
height:650px;

background:
radial-gradient(circle,
rgba(212,175,55,.055),
transparent 72%);

pointer-events:none;

}

.nomination-header{

position:relative;
z-index:2;

text-align:center;

max-width:760px;

margin:0 auto 55px;

}

.nomination-header h2{

font-family:"Cormorant Garamond",serif;

font-size:64px;

font-weight:600;

line-height:1;

color:#F5DEA0;

margin-bottom:18px;

}

.nomination-header .divider{

width:170px;

margin:0 auto 24px;

}

.nomination-header p{

font-size:18px;

line-height:1.85;

color:#DDDDDD;

}

/*========================================

Recognition Row

========================================*/

.recognition-row{

position:relative;

z-index:2;

display:grid;

grid-template-columns:repeat(4,1fr);

gap:40px;

max-width:1180px;

margin:auto;

}

.recognition{

text-align:center;

padding:0 12px;

}

.recognition-number{

font-family:"Cormorant Garamond",serif;

font-size:58px;

font-weight:700;

line-height:1;

color:#D4AF37;

margin-bottom:10px;

}

.recognition-title{

font-family:"Cormorant Garamond",serif;

font-size:30px;

font-weight:600;

line-height:1.25;

color:#F5DEA0;

margin-bottom:16px;

}

.recognition-divider{

width:90px;

margin:0 auto 18px;

}

.recognition p{

font-size:15px;

line-height:1.8;

color:#D2D2D2;

}

/*========================================

Quote

========================================*/

.nomination-quote{

position:relative;

z-index:2;

max-width:760px;

margin:60px auto 0;

text-align:center;

}

.nomination-quote p{

font-family:"Cormorant Garamond",serif;

font-size:34px;

line-height:1.55;

font-style:italic;

color:#F2F2F2;

}

/*========================================

Responsive

========================================*/

@media(max-width:991px){

.recognition-row{

grid-template-columns:repeat(2,1fr);

gap:55px 35px;

}

}

@media(max-width:768px){

.nomination{

padding:55px 0 60px;

}

.nomination-header{

margin-bottom:40px;

}

.nomination-header h2{

font-size:44px;

}

.nomination-header p{

font-size:16px;

}

.recognition-row{

grid-template-columns:1fr;

gap:42px;

}

.recognition-number{

font-size:46px;

}

.recognition-title{

font-size:27px;

}

.nomination-quote{

margin-top:45px;

}

.nomination-quote p{

font-size:24px;

}

}

.message{

background:#060606;
padding:70px 0 75px;
overflow:hidden;

}

.message:before{

content:"";

position:absolute;

left:50%;
top:45%;

transform:translate(-50%,-50%);

width:900px;
height:900px;

background:
radial-gradient(circle,
rgba(212,175,55,.05),
transparent 72%);

pointer-events:none;

}

/*========================================
Heading
========================================*/

.message-header{

position:relative;
z-index:2;

text-align:center;

max-width:900px;

margin:0 auto 45px;

}

.message-label{

font-family:Inter,sans-serif;

font-size:15px;

font-weight:600;

letter-spacing:5px;

text-transform:uppercase;

color:#C8A74D;

margin-bottom:10px;

}

.message-header h2{

font-family:"Cormorant Garamond",serif;

font-size:68px;

font-weight:600;

line-height:1;

color:#F5DEA0;

margin-bottom:22px;

}

.message-header img{

width:170px;

margin:auto;

}

/*========================================
Portrait
========================================*/

.message-photo{

position:relative;
z-index:2;

max-width:920px;

margin:50px auto;

}

.message-photo iframe{width:100%;aspect-ratio:16/9;border:0;border-radius:18px;display:block;}

.message-photo img{

width:100%;

border-radius:18px;

box-shadow:

0 30px 80px rgba(0,0,0,.45),
0 0 40px rgba(212,175,55,.08);

}

/*========================================
Copy
========================================*/

.message-copy{

position:relative;
z-index:2;

max-width:690px;

margin:auto;

text-align:center;

}

.message-copy p{

font-size:18px;

line-height:2;

color:#E5E5E5;

margin-bottom:24px;

}

.message-copy strong{

color:#F5DEA0;

font-weight:600;

}

/*========================================
Signature
========================================*/

.signature{

width:240px;

margin:40px auto 18px;

}

.signature-divider{

width:170px;

margin:0 auto;

}

/*========================================
Responsive
========================================*/

@media(max-width:991px){

.message-header h2{

font-size:56px;

}

.message-photo{

max-width:760px;

}

}

@media(max-width:768px){

.message{

padding:55px 0;

}

.message-header{

margin-bottom:35px;

}

.message-label{

font-size:13px;

letter-spacing:4px;

}

.message-header h2{

font-size:42px;

}

.message-header img{

width:130px;

}

.message-photo{

margin:35px auto;

}

.message-copy{

max-width:92%;

}

.message-copy p{

font-size:16px;

line-height:1.8;

}

.signature{

width:180px;

margin-top:30px;

}

.signature-divider{

width:130px;

}

}

/*==================================================
FINAL CTA
==================================================*/

.final{

background:#080808;
padding:70px 0 60px;
overflow:hidden;

}

.final:before{

content:"";

position:absolute;

left:50%;
top:40%;

transform:translate(-50%,-50%);

width:850px;
height:850px;

background:
radial-gradient(circle,
rgba(212,175,55,.05),
transparent 72%);

pointer-events:none;

}

.final-content{

position:relative;
z-index:2;

max-width:760px;

margin:auto;

text-align:center;

}

.final-label{

font-size:15px;

letter-spacing:5px;

text-transform:uppercase;

font-weight:600;

color:#C8A74D;

margin-bottom:12px;

}

.final h2{

font-family:"Cormorant Garamond",serif;

font-size:62px;

font-weight:600;

line-height:1;

color:#F5DEA0;

margin-bottom:18px;

}

.final-divider{

width:170px;

margin:0 auto 28px;

}

.final p{

font-size:18px;

line-height:2;

color:#E4E4E4;

margin-bottom:35px;

}

/*==================================================
Vote Button
==================================================*/

.vote-button{

display:inline-block;

transition:.35s ease;

}

.vote-button:hover{

transform:translateY(-4px) scale(1.02);

}

.vote-button img{

width:340px;

display:block;

margin:auto;

}

/*==================================================
Footer
==================================================*/

.footer{

background:#050505;

padding:40px 0 35px;

text-align:center;

}

.footer-logo{

width:110px;

margin:0 auto 18px;

}

.footer-tag{

font-size:13px;

letter-spacing:4px;

text-transform:uppercase;

color:#C8A74D;

margin-bottom:18px;

}

.footer-copy{

max-width:760px;

margin:auto;

font-size:14px;

line-height:1.9;

color:#AFAFAF;

}

.footer-small{

margin-top:18px;

font-size:12px;

color:#707070;

}

/*==================================================
Responsive
==================================================*/

@media(max-width:768px){

.final{

padding:55px 0;

}

.final-label{

font-size:13px;

letter-spacing:4px;

}

.final h2{

font-size:42px;

}

.final-divider{

width:130px;

}

.final p{

font-size:16px;

line-height:1.8;

}

.vote-button img{

width:210px;

}

.footer-logo{

width:85px;

}

}


.vote-modal{position:fixed;inset:0;background:rgba(0,0,0,.75);display:none;align-items:center;justify-content:center;z-index:9999;padding:20px}.vote-modal.active{display:flex}.vote-box{background:#111;max-width:640px;width:100%;padding:36px;border:1px solid #D4AF37;border-radius:16px;color:#eee}.vote-box h3{font-family:"Cormorant Garamond",serif;color:#F5DEA0;font-size:42px;text-align:center}.vote-box ol{line-height:1.8;margin:20px}.vote-actions{text-align:center;margin-top:16px}.vote-actions a{display:inline-block;background:#D4AF37;color:#111;padding:14px 26px;border-radius:8px;font-weight:bold}