@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Space+Grotesk:wght@400;500;600;700&display=swap');

:root {
    --black: #151515;
    --black-2: #202020;
    --cream: #f3f0e8;
    --cream-2: #e8e4da;
    --red: #ff493d;
    --red-dark: #d9362e;
    --white: #ffffff;
    --grey: #aaa69d;
    --max: 1500px;
}

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

html {
    scroll-behavior: smooth;
}

body {
    background: var(--cream);
    color: var(--black);
    font-family: "DM Sans", sans-serif;
    overflow-x: hidden;
}

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

img,
video {
    display: block;
    width: 100%;
}

/* -------------------------
   NAVBAR & MOBILE MENU
------------------------- */
.nav {
    width: 100%;
    min-height: 80px;
    padding: 0 5%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
    z-index: 9999;
    background: #000;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
}
.logo {
    display: inline-block;
    text-decoration: none;
    /* Add your base font styles here */
}
.logo {
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: #fff;
    line-height: 1.05;
    flex-shrink: 0;
}

.logo span:first-child {
    font-size: 18px;
    font-weight: 700;
    letter-spacing: 2px;color: #fff;
}

.logo span:last-child {
    font-size: 18px;
    font-weight: 700;
    letter-spacing: 2px;
    margin-top: 5px;
    color: #fff;
}

.nav-links {
    display: flex;
    align-items: center;
    gap: 32px;
}

.nav-links a {
    position: relative;
    color: #fff;
    text-decoration: none;
    font-size: 18px;
    font-weight: 500;
    white-space: nowrap;
    padding: 8px 0;
    transition: 0.3s ease;
}

.nav-links a:hover {
    color: #ff493d;
}

.nav-links a::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 0;
    height: 2px;
    background: #c40000;
    transition: width 0.3s ease;
}

.nav-links a:hover::after {
    width: 100%;
}

.menu-btn {
    display: none;
    width: 45px;
    height: 45px;
    padding: 8px;
    border: 0;
    background: transparent;
    cursor: pointer;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
}

.menu-btn span {
    display: block;
    width: 25px;
    height: 2px;
    background: #fff;
    transition: all 0.3s ease;
}


/* ==========================================
   MOBILE RESPONSIVE STYLES (Max Width: 768px)
   ========================================== */
@media (max-width: 768px) {
    
        .nav-links a {
        width: 100%;
        padding: 10px 5px;
      
      
        font-size: 20px;
        color: #fff;
}
    .menu-btn {
        display: flex; /* Shows the hamburger button on mobile */
    }

    .nav-links {
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        background: #fff;
        flex-direction: column;
        align-items: center;
        gap: 20px;
        padding: 24px 0;
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.3s ease, padding 0.3s ease;
        box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.3);
    }

    /* Toggle class to open menu via JavaScript (e.g., .nav-links.active) */
    .nav-links.active {
        max-height: 300px; /* Adjust based on number of links */
    }

    .nav-links a {
        font-size: 18px;
    }
}
/* -------------------------
   HERO
------------------------- */
.hero {
    min-height: 100vh;
    background: var(--black);
    color: var(--cream);
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: flex-end;
    padding: 8vw 4vw 5vw;
}

.hero-video {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.hero-video video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: .48;
}

.hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(0,0,0,.8), rgba(0,0,0,.15));
}

.hero-content {
    position: relative;
    z-index: 2;
    width: 100%;
}

.kicker {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: 25px;
}

.hero-title {
    font-family: "Space Grotesk", sans-serif;
    font-size: clamp(70px, 12vw, 190px);
    line-height: .78;
    letter-spacing: -9px;
    font-weight: 600;
    max-width: 1100px;
}

.hero-title span {
    color: var(--red);
}

.hero-bottom {
    margin-top: 55px;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
}

.hero-date {
    font-size: 15px;
    text-transform: uppercase;
    line-height: 1.5;
}

.buttons {
    display: flex;
    gap: 10px;
}

.btn {
    display: inline-flex;
    padding: 15px 24px;
    background: var(--red);
    color: var(--black);
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    transition: .3s;
}

.btn:hover {
    background: var(--cream);
    transform: translateY(-3px);
}

.btn-dark {
    background: var(--cream);
}

/* -------------------------
   GENERAL SECTIONS
------------------------- */
.section {
    padding: 9vw 4vw;
}

.section-inner {
    max-width: var(--max);
    margin: auto;
}

.section-number {
    font-size: 12px;
    font-weight: 700;
    margin-bottom: 50px;
}

.big-title {
    font-family: "Space Grotesk", sans-serif;
    font-size: clamp(60px, 9vw, 145px);
    line-height: .82;
    letter-spacing: -7px;
    font-weight: 600;
}

.small-copy {
    max-width: 550px;
    font-size: 18px;
    line-height: 1.55;
}

.intro { background: var(--cream); }
.intro-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 7vw;
    align-items: end;
}
.intro-title { max-width: 850px; }
.intro-copy { padding-bottom: 5px; }

.statement { background: var(--red); color: var(--black); }
.statement .big-title { max-width: 1100px; }
.statement-word { display: inline-block; }

.split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    min-height: 700px;
}
.split-box {
    padding: 6vw 4vw;
    position: relative;
    overflow: hidden;
}
.split-box.dark { background: var(--black); color: var(--cream); }
.split-box.light { background: var(--cream-2); }
.split-number { font-size: 12px; font-weight: 700; margin-bottom: 100px; }
.split-title { font-family: "Space Grotesk"; font-size: clamp(55px, 7vw, 110px); line-height: .82; letter-spacing: -5px; }
.split-copy { max-width: 350px; margin-top: 45px; font-size: 17px; line-height: 1.5; }

.circle {
    position: absolute;
    width: 280px;
    height: 280px;
    border-radius: 50%;
    background: var(--red);
    right: 99px;
    bottom: -50px;
    overflow: hidden;
    z-index: 3;
}

.photo-section { background: var(--black); color: var(--cream); }
.photo-grid { display: grid; grid-template-columns: 1.25fr .75fr; gap: 20px; }
.photo-large { height: 779px; overflow: hidden; }
.photo-small-stack { display: grid; grid-template-rows: 1fr 1fr; gap: 20px; }
.photo-small { min-height: 320px; overflow: hidden; }
.photo-grid img { height: 100%; object-fit: cover; transition: transform .7s ease; }
.photo-grid div:hover img { transform: scale(1.04); }

.market { background: var(--cream-2); }
.market-layout { display: grid; grid-template-columns: .8fr 1.2fr; gap: 7vw; }
.market-list { border-top: 1px solid #aaa69d; }
.market-item {
    border-bottom: 1px solid #aaa69d;
    padding: 25px 0;
    letter-spacing: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-family: "Space Grotesk";
    font-size: clamp(28px, 4vw, 60px);
}
.market-item span { font-family: "DM Sans"; font-size: 13px; }

.categories { background: var(--black); color: var(--cream); }
.category-grid {
    margin-top: 70px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 15px;
}
.category { height: 430px; position: relative; overflow: hidden; background: var(--black-2); }
.category:nth-child(2), .category:nth-child(6) { border-radius: 50%; }
.category:nth-child(3) { height: 300px; }
.category:nth-child(4) { height: 500px; }
.category img { width: 100%; height: 100%; object-fit: cover; opacity: .75; transition: .6s; }
.category:hover img { transform: scale(1.06); }
.category-name {
    position: absolute;
    left: 111px;
    bottom: 20px;
    font-family: "Space Grotesk";
    font-size: 25px;
    font-weight: 600;
    z-index: 2;
}
.category::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(transparent 45%, rgba(0,0,0,.75));
}

.numbers { background: var(--red); color: var(--black); }
.number-grid { display: grid; grid-template-columns: repeat(4, 1fr); margin-top: 80px; }
.number { padding: 30px 20px; border-left: 1px solid rgba(0,0,0,.35); }
.number-value { font-family: "Space Grotesk"; font-size: clamp(60px, 8vw, 130px); line-height: .8; letter-spacing: -6px; }
.number-label { margin-top: 30px; font-size: 12px; font-weight: 700; text-transform: uppercase; }

.copenhagen { background: var(--cream); }
.copenhagen-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 5vw; align-items: center; }
.copenhagen-image { height: 650px; position: relative; }
.copenhagen-image img { width: 85%; height: 100%; object-fit: cover; }
.copenhagen-image::after {
    content: "";
    position: absolute;
    width: 220px;
    height: 220px;
    border-radius: 50%;
    background: var(--red);
    right: 0;
    bottom: -40px;
    z-index: 2;
}

.final-cta {
    min-height: 80vh;
    background: var(--black);
    color: var(--cream);
    display: flex;
    align-items: center;
    padding: 8vw 4vw;
}
.final-title { font-family: "Space Grotesk"; font-size: clamp(70px, 11vw, 180px); line-height: .78; letter-spacing: -9px; }
.final-title span { color: var(--red); }
.final-buttons { margin-top: 60px; }

/* -------------------------
   FOOTER
------------------------- */

footer {
    background: var(--black);
    color: var(--grey);
    padding: 50px 4vw;
    border-top: 1px solid #333;
}

.footer-grid {
    display: flex;
    justify-content: space-between;
    gap: 40px;
}

.footer-logo {
    color: var(--cream);
    font-family: "Space Grotesk";
    font-size: 24px;
    font-weight: 700;
}

.footer-links {
       display: flex;
    gap: 30px;
    font-size: 17px;
    text-transform: uppercase;
    color: #fff;
}
.reveal { opacity: 0; transform: translateY(40px); transition: opacity .8s ease, transform .8s ease; }
.reveal.visible { opacity: 1; transform: translateY(0); }

/* Additional components */
.equal-photo-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.photo-box { width: 100%; aspect-ratio: 16 / 9; overflow: hidden; }
.photo-box img { width: 100%; height: 100%; object-fit: cover; }

.slider-container { width: 100%; height: 500px; overflow: hidden; position: relative; }
.slider-track { display: flex; width: 300%; height: 100%; animation: slideAnimation 12s infinite; }
.slide { width: 100%; height: 100%; }
.slide img { width: 100%; height: 100%; object-fit: cover; }

@keyframes slideAnimation {
    0% { transform: translateX(0); }
    30% { transform: translateX(0); }
    35% { transform: translateX(-33.333%); }
    65% { transform: translateX(-33.333%); }
    70% { transform: translateX(-66.666%); }
    100% { transform: translateX(-66.666%); }
}

.expo-gallery-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 24px; padding: 20px 0; }
.expo-gallery-item { overflow: hidden; position: relative; }
.expo-gallery-img {
    width: 100%;
    height: auto;
    object-fit: cover;
    display: block;
    filter: grayscale(100%) contrast(115%) brightness(95%);
    transform: scale(1);
    transition: filter 0.6s cubic-bezier(0.25, 1, 0.5, 1), transform 0.6s cubic-bezier(0.25, 1, 0.5, 1);
}
.expo-gallery-item:hover .expo-gallery-img { filter: grayscale(0%) contrast(100%) brightness(100%); transform: scale(1.03); }
.expo-gallery-caption { font-size: 14px; font-weight: 400; color: #111; margin-top: 12px; text-transform: uppercase; letter-spacing: 1px; }

.rotate-year {
    color: #0000; /* This is transparent */
    display: inline-block;
    
    transition: transform 0.3s ease;
 }


/* -------------------------
   RESPONSIVE / MOBILE MENU FIX
------------------------- */
@media (max-width: 800px) {
    .nav {
        padding: 18px 20px;
        min-height: 70px;
    }

    /* Show hamburger button correctly */
    .menu-btn {
        display: flex;
        position: relative;
        z-index: 10001;
    }

    /* Mobile Links Dropdown Menu */
    .nav-links {
        position: absolute;
        top: 70px;
        left: 0;
        width: 100%;
        padding: 20px;
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        background: #000;
        opacity: 0;
        visibility: hidden;
        transform: translateY(-15px);
        pointer-events: none;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
        transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease;
    }

    /* Active State triggered by JS (.active class) */
    .nav-links.active {
        opacity: 1;
        visibility: hidden; /* Fix visibility override */
        visibility: visible;
        transform: translateY(0);
        pointer-events: auto;
    }

    .nav-links a {
        width: 100%;
        padding:5px 84px;
       
        font-size: 20px;
    }

    .nav-links a:last-child {
        border-bottom: none;
    }

    .nav-links a::after {
        display: none;
    }

    /* Hamburger Animation to Cross */
    .menu-btn.active span:nth-child(1) {
        transform: translateY(7px) rotate(45deg);
    }

    .menu-btn.active span:nth-child(2) {
        opacity: 0;
    }

    .menu-btn.active span:nth-child(3) {
        transform: translateY(-7px) rotate(-45deg);
    }

    /* Rest of mobile grid layouts */
    .hero { padding: 130px 20px 40px; }
    .hero-title { font-size: 18vw; letter-spacing: -5px; }
    .hero-bottom { display: block; }
    .buttons { margin-top: 30px; flex-wrap: wrap; }
    .section { padding: 80px 20px; }
    .intro-grid, .market-layout, .copenhagen-grid, .split, .photo-grid { grid-template-columns: 1fr; }
    .big-title { letter-spacing: -4px; }
    .split-box { min-height: 500px; padding: 60px 20px; }
    .photo-large { height: 779px; }
    .photo-small-stack { grid-template-rows: 350px 350px; }
    .category-grid { grid-template-columns: 1fr 1fr; }
    .category, .category:nth-child(3), .category:nth-child(4) { height: 280px; }
    .number-grid { grid-template-columns: 1fr 1fr; }
    .number { border-bottom: 1px solid rgba(0,0,0,.35); }
    .copenhagen-image { height: 500px; }
    .final-title { letter-spacing: -5px; }
    .footer-grid { display: block; }
    .footer-links { margin-top: 30px; flex-wrap: wrap;color: #fff; }
}
.circle-image {
    position: absolute;
    width: 280px;
    height: 280px;
    border-radius: 50%;
    right: 8%;
    bottom: 8%;
    top: 59%;
    overflow: hidden;}
    
     .social-links {
            display: flex;
            gap: 10px;
        }

        .social-links a {
            width: 40px;
            height: 40px;
            border: 1px solid #333;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #ffffff;
            transition: .3s ease;
        }

        .social-links a: hover {
            background: var(--gold);
            color: #ff493d;
            border-color: var(--gold);
        }
.rotate-year {
  display: inline-block;
  color: #2563eb; /* Vibrant Indigo/Blue */
  transition: transform 0.4s ease, color 0.3s ease;
}

.logo:hover .rotate-year {
  transform: rotate(15deg) scale(1.1);
  color: #1d4ed8; /* Darker blue on hover */
}
    .partners-logo {
  max-height: 70px;   /* Adjust this value to make logos taller or shorter */
  width: auto;        /* Keeps the original aspect ratio */
  object-fit: contain; /* Prevents distortion */
  display: block;
  margin: 0 auto;     /* Centers the logo inside the column */
}