* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: "Host Grotesk", sans-serif;
}

html {
    overflow-x: hidden;
}

body {
    background-color: black;
    overflow-x: hidden;
}

body:has(#nav-toggle:checked) {
    overflow: hidden;
    position: fixed;
    width: 100%;
}

/*                               CHECKBOX                        */
#enter {
    display: none;
}

/*                              SHOW/HIDE                         */
.main {
    display: none;
}

#enter:checked ~ .preloader {
    display: none;
}

#enter:checked ~ .main {
    display: block;
}


/*                          PRELOADER                            */
.preloader {
    position: fixed;
    inset: 0;
    background: #000;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    /* justify-content: center; */
    z-index: 20;
    padding: 5dvh 20dvw 20dvh;
}

.preloader h3 {
    font-size: 12px;
    letter-spacing: 2px;
    position: fixed;
    top: 5dvh;
    left: 50%;
    transform: translateX(-50%);
}

.pre-image {
    margin-top: 15dvh;
    animation: preImageAni 3.5s ease-out forwards;
}

.pre-image img {
    width: 35dvw;
    height: auto;
}

.pre-image p {
    font-size: 11px;
    letter-spacing: 3px;
    color: #F9CD1A;
    animation: yellow-to-black 3.5s infinite;
    margin-top: 5dvh;

}

.pre-progress {
  width: 12dvw;
  height: 0.3dvh;
  background: #f9cc1a75;
  border-radius: 0;
}

.pre-progress-fill {
  width: 0%;
  height: 100%;
  background-color: #F9CD1A;
  border-radius: 0;
  animation: loadFill 3.5s linear forwards;
}

@keyframes loadFill {
  0%   { width: 0%; }
  100% { width: 100%; }
}

@keyframes yellow-to-black {
    0% {
        color: #F9CD1A;
    }
    25% {
        color: #171717;
    }
    50% {
        color: #F9CD1A;
    }
    75% {
        color: #171717;
    }
    100% {
        color: #F9CD1A;
    }
}

@keyframes preImageAni {
    0%   {
        opacity: 0;
    }
    60%  {
        opacity: 1;
    }
    85%  {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}

.pre-text {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    font-family: "Cormorant Garamond", serif;
    color: white;
    text-align: center;
    opacity: 0;
    animation: textCycle 2.5s ease-in forwards;
}

.pre-text-1 {    
    animation-delay: 3.5s;
}

.pre-text-1 h1:last-of-type {
    color: #F9CD1A;
    opacity: 0;
    animation: textBodyFade 0.6s ease-out forwards;
    animation-fill-mode: both;
    animation-delay: 4s;
    transition: ease-in;
}

.pre-text-1 h1 {
    font-size: 90px;
    font-family: "Cormorant Garamond", serif;
}

.pre-text-2 {
    animation-delay: 6s;
    animation-duration: 7s;
}

.pre-text-2 h2 {
    font-size: 50px;
    font-family: "Cormorant Garamond", serif;
}

.pre-text-2 h2:nth-of-type(2) {
    animation: textBodyFade 0.6s ease-out forwards;
    animation-fill-mode: both;
    animation-delay: 7s;
    transition: ease-in;
}

.pre-text-2 h2:nth-of-type(3) {
    animation: textBodyFade 0.6s ease-out forwards;
    animation-fill-mode: both;
    animation-delay: 8s;
    transition: ease-in;
}

.pre-text-2 h2:nth-of-type(4) {
    color: #F9CD1A;
    animation: textBodyFade 0.6s ease-out forwards;
    animation-fill-mode: both;
    animation-delay: 9s;
    transition: ease-in;
}

.pre-text-2 h2:nth-of-type(5) {
    color: #F9CD1A;
    animation: textBodyFade 0.6s ease-out forwards;
    animation-fill-mode: both;
    animation-delay: 10s;
    transition: ease-in;
    margin-bottom: 10dvh;
}

.pre-text-2 span {
    font-size: 12px;
    color: #F9CD1A;
    letter-spacing: 2px;
    animation: textBodyFade 0.6s ease-out forwards;
    animation-fill-mode: both;
    animation-delay: 11s;
    transition: ease-in;
}

.pre-text-3 {
    animation: textCycle2 2.5s ease-in forwards;
    animation-delay: 13s;
}

.pre-text-3-accent {
    width: 4dvw;
    border-top: 1px solid #f9cc1ab9;
    margin-bottom: 5dvh;
    justify-self: center;
}

.pre-text-3 h2 {
    font-family: "Cormorant Garamond", serif;
    color: #a6a6a6e1;
    font-style: italic;
    font-size: 40px;
}

.pre-text-3 h2:last-of-type {
    margin-bottom: 10dvh;
}

@keyframes textCycle {
    0% {
        opacity: 0;
    }
    20% {
        opacity: 1;
    }
    70% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}

@keyframes textBodyFade {
  0%   {
        opacity: 0;
    }
  100% {
        opacity: 1;
    }
}

@keyframes textCycle2 {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

.enter-button {
    font-family: "Host Grotesk", sans-serif;
    font-size: 13px;
}

.enter-button:hover {
    background: #f9cc1a25;
}



/*                                  NAVBAR                         */
#nav-toggle {
    display: none;
}

.nav-menu-icon {
    display: none;
}

.nav-mobile-menu {
    display: none;
}

nav {
    height: 10dvh;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 5dvw;
    letter-spacing: 2px;
    position: fixed;
    z-index: 10;
    top: 0;
    left: 0;
    right: 0;
    background: transparent;
    animation: nav-bg linear forwards;
    animation-timeline: scroll();
    animation-range: 5dvh 10dvh;
}

@keyframes nav-bg {
    from {
        background: transparent;
    }

    to {
        background: #0A0A0A;
        backdrop-filter: blur(10px);
    }
}

.nav-right {
    display: flex;
    align-items: center;
    gap: 2dvw;
}

.nav-links-desktop {
    display: flex;
    gap: 2dvw;
    list-style: none;
    align-items: center;
    margin-bottom: 0;
    padding-left: 0;
}

.nav-dropdown-item {
    position: relative;
}

.nav-dropdown {
    display: none;
    position: absolute;
    top: 5dvh;
    left: -5dvw;
    background: #0A0A0A;
    border: 1px solid #a6a6a620;
    padding: 2dvh 0;
    list-style: none;
    min-width: 220px;
    z-index: 100;
}

.nav-dropdown li {
    padding: 1dvh 2dvw;
    white-space: nowrap;
}

.nav-dropdown li a {
    font-size: 11px;
    letter-spacing: 2px;
    color: #a6a6a6;
}

.nav-dropdown li a:hover {
    color: #F9CD1A;
    transition: ease 0.3s;
}

.nav-dropdown-item:hover .nav-dropdown {
    display: block;
}

.nav-dropdown-item:hover > a {
    color: white;
}

nav a {
    text-decoration: none;
    font-size: 12px;
    color: #f5f5f5a2;
}

nav > a {
    font-size: 14px;
    color: #f5f5f5;
}

.nav-links-desktop li a {
    position: relative;
}

.nav-links-desktop li a::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    height: 2px;
    width: 0;
    background-color: #F9CD1A;
}

nav li a:hover {
    color: white;
    transition: ease 0.5s;
}

nav li a:hover::before {
    width: 100%;
    transition: ease-in-out 0.5s;
}

/*                                HERO SECTION                             */


#hero {
    padding: 10dvh 4dvw;
    position: relative;
    min-height: 100dvh;
}

.hero-video-wrap {
    position: absolute;
    inset: 0;
    background: #000;
    overflow: hidden;
    pointer-events: none;
}

.hero-video-wrap iframe {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: max(100vw, 177.778vh);
    height: max(100vh, 56.25vw);
    pointer-events: none;
}

.hero-black-gradient {
    position: absolute;
    inset: 0;
    background: linear-gradient(360deg, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.6) 40%, rgba(0,0,0,0.3) 100%);
}

.hero-content {
    color: white;
    position: absolute;
    top: 47%;
}

.hero-accent {
    border-top: 2px solid #F9CD1A;
    width: 3.5dvw;
    margin-bottom: 3dvh;
}

.hero-heading h1 {
    font-size: 60px;
    margin-bottom: 4dvh;
}

.hero-subtext {
    font-family: "Cormorant Garamond", serif;
    font-style: italic;
    font-size: 14px;
    font-weight: 100;
    width: 95%;
    color: rgba(255, 255, 255, 0.788);
    margin-bottom: 10dvh;
}

.hero-scroll a {
    font-size: 12px;
    letter-spacing: 2px;
    color: #ffffff9f;
    text-decoration: none;
}

.hero-scroll a:hover {
    color: white;
    transition: ease 0.5s;
}

.hero-scroll img {
    animation: scrollArrow 1s infinite linear;
    transition: ease-in-out;
}

@keyframes scrollArrow {
    0% {
        transform: translateY(-0.5dvh);
    }

    50% {
        transform: translateY(0.2dvh);
    }

    100% {
        transform: translateY(-0.5dvh);
    }


}


/*                              ABOUT SECTION                           */

#about {
    /* min-height: 100dvh; */
    background: #0A0A0A;
    padding: 15dvh 7dvw;
}

.about-accent {
    border-top: 2px solid #F9CD1A;
    height: 0.6dvh;
    width: 3.5dvw;
    display: inline-flex;
}

.about-wwa {
    margin-left: 1dvw;
    display: inline-flex;
    color: #A6A6A6;
    font-size: 11px;
    letter-spacing: 4px;
    font-weight: 550;
}

.about-body1 {
    display: flex;
    justify-content: space-between;
    margin-top: 8dvh;
}

.about-left {
    color: #F5F5F5;
    width: 55%;
}

.about-left h2 {
    font-size: 48px;
    word-spacing: -5px;
    line-height: 7dvh;
}

.about-right {
    width: 37%;
    padding-top: 3dvh;
}

.about-right-first {
    color: #A6A6A6;
    font-family: "Cormorant Garamond", serif;
    font-size: 20px;
    line-height: 4dvh;
}

.about-right hr {
    border: 1px solid #a6a6a644;
    margin: 5dvh 0;
}

.about-right-second {
    color: #A6A6A6;
    font-family: "Cormorant Garamond", serif;
    font-size: 15px;
    line-height: 4dvh;
    font-weight: 400;
}

/*                          CHALLENGE SECTION                         */

#challenge {
    background: #0A0A0A;
    min-height: 50dvh;
    padding: 10dvh 4dvw 15dvh;
}

.challenge-accent {
    border-top: 2px solid #F9CD1A;
    height: 0.6dvh;
    width: 3.5dvw;
    display: inline-flex;
}

.challenge-wwa {
    margin-left: 1dvw;
    display: inline-flex;
    color: #A6A6A6;
    font-size: 11px;
    letter-spacing: 4px;
    font-weight: 550;
}

.challenge-body {
    display: flex;
    justify-content: space-between;
    margin-top: 8dvh;
}

.challenge-body-first {
    width: 55%;
    padding-top: 20dvh;
}

.challenge-body-first h2 {
    color: #F5F5F5;
    font-size: 62px;
    word-spacing: -5px;
    margin-bottom: 5dvh;
}

.challenge-body-first p {
    color: #E0E0E0;
    font-size: 21px;
    line-height: 4dvh;
    margin-bottom: 5dvh;
    word-spacing: -2px;
}

.challenge-body-first p:first-of-type {
    font-family: "Cormorant Garamond", serif;

}

.challenge-body-first p span {
    color: #B8B8B8;
    font-size: 20px;
    font-family: "Cormorant Garamond", serif;
}

.challenge-body-first p:nth-of-type(2) {
    font-family: "Cormorant Garamond", serif;
    color: #B8B8B8;
    font-size: 17px;
}

.challenge-body-first p:last-of-type {
    color: #F5F5F5;

}

#challenge hr {
    border: 1px solid #a6a6a644;
    height: 110dvh;
}

.challenge-body-second {
    width: 32%;   
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 5dvh;
}

.cities-stream {
    height: 105dvh;
    overflow: hidden;
    position: relative;
    -webkit-mask-image: linear-gradient (
        to bottom,
        transparent 0%,
        black 22%,
        black 78%,
        transparent 100%
    );
    mask-image: linear-gradient (
        to bottom,
        transparent 0%,
        black 22%,
        black 78%,
        transparent 100%
    );
}

.cities-track {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2dvh;
    animation: scrollCities 18s linear infinite;
}

@keyframes scrollCities {
  0%   { transform: translateY(0); }
  100% { transform: translateY(-50%); }
}

.city-line {
    font-family: "Cormorant Garamond", serif;
    color: #f5f5f583;
}


/*                           RESEARCH SECTION                          */


#research {
    background: black;   
    min-height: 50dvh;
    padding: 20dvh 4dvw;
    border-top: 1px solid #a6a6a636;
    border-bottome: 1px solid #a6a6a636;
}

#research > p:first-child {
    display: inline-flex;
    color: #A6A6A6;
    font-size: 11px;
    letter-spacing: 4px;
    font-weight: 550;
    margin-bottom: 3dvh;
}

#research > p {
    color: #E0E0E0;
    font-size: 23px;
    line-height: 5dvh;
    margin-bottom: 5dvh;
    word-spacing: -2px;
    font-family: "Cormorant Garamond", serif;
    width: 72%;
}

#research p span {
    font-family: "Cormorant Garamond", serif;
    color: #B8B8B8;
}

.research-hei {
    display: flex;
    justify-content: space-between;
    margin-top: 12dvh;
}

.research-hei-number {
    width: 40%;
    font-size: 250px;
    color: #F9CD1A;
    font-weight: 600;
    letter-spacing: -10px;
}

.research-hei-text {
    width: 40%;
    padding-top: 5dvh;
}

.research-hei-text > p {
    color: white;
    width: 70%;
    font-size: 17px;
    line-height: 4dvh;
    margin-bottom: 8dvh;
}

.research-hei-text-table {
    display: flex;
    justify-content: space-between;
    width: 100%;
    height: min-content;
}

.research-hei-country {
    color: #A6A6A6;
    font-size: 12px;
}

.research-hei-no-hei {
    color: white;
    font-size: 12px;
}

.research-hei-text hr {
    border: 1px solid #a6a6a675;
}

.research-secondary {
    display: flex;
    justify-content: space-between;
    margin-top: 12dvh;
    align-items: center;
}

.research-secondary-text > p {
    color: white;
    width: 70%;
    font-size: 17px;
    line-height: 4dvh;
    margin-bottom: 8dvh;   
    padding-top: 10dvh;
}

.research-secondary-number {
    width: 40%;
    font-size: 250px;
    color: #F9CD1A;
    font-weight: 600;
    letter-spacing: -10px;
}

#research > hr {
    border: 1px solid #a6a6a675;
}

.window {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding-top: 15dvh;
}

.window p:first-of-type {
    color: #A6A6A6;
    font-size: 10px;
    letter-spacing: 4px;
    font-weight: 550;
}

.window h1 {
    color: white;
    font-size: 60px;
}

.windowh1 {
    width: 80%;
    margin-top: 5dvh;
}

.window-grey-accent {
    width: 3dvw;
    border-top: 1px solid #a6a6a636;
    margin: 5dvh;
}

.window p:nth-of-type(2) {
    color: #E0E0E0;
    font-size: 26px;
    font-family: "Cormorant Garamond", serif;
    width: 55%;   
}

.window p:last-of-type {
    color: #9E9E9E;
    font-size: 18px;
    font-style: italic;
    font-family: "Cormorant Garamond", serif;
}


/*                              ASSETS SECTION                          */



#assets {
    background: #0A0A0A;   
    min-height: 50dvh;
    padding: 20dvh 4dvw;
    border-top: 1px solid #a6a6a636;
    border-bottome: 1px solid #a6a6a636;
}

.assets-heading {
    justify-self: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    margin-bottom: 10dvh;
}
.assets-heading h4 {
    color: #F9CD1A;
    font-size: 10px;
    letter-spacing: 3px;
    margin-bottom: 5dvh;
}

.assets-heading h1 {
    color: white;
    font-size: 68px;
    font-family: "Cormorant Garamond", serif;
    width: 70%;
}

.assets-heading h1 span {
    font-family: "Cormorant Garamond", serif;
    color: #999999;
}

.assets-flex {
    display: flex;
    gap: 1dvw;
}

.assets-flex-left {
    background: #120F0D;
    width: 50%;
    padding: 8dvh 4dvw;
    height: 60dvh;
    border-right: 1px solid #f9cc1a18;
}

.assets-flex-left h4 {
    color: #F9CD1A;
    font-size: 10px;
    letter-spacing: 4px;
    margin-bottom: 5dvh;
}

.assets-flex-left ul {
    margin-left: -1dvw;
}

.assets-flex-left li {
    color: white;
    margin-bottom: 5dvh;
    font-size: 20px;
    font-family: "Cormorant Garamond", serif;
}

.assets-flex-left li::marker {
    color: #F9CD1A;
}

.assets-flex-right {
    width: 50%;
    padding: 8dvh 4dvw;
    height: 60dvh;
}

.assets-flex-right h4 {
    color: #ffffff46;
    font-size: 10px;
    letter-spacing: 4px;
    margin-bottom: 5dvh;
}

.assets-flex-right ul {
    margin-left: -1dvw;
    list-style: circle;
}

.assets-flex-right li {
    color: #ffffff8c;
    margin-bottom: 5dvh;
    font-size: 20px;
    font-family: "Cormorant Garamond", serif;
}

.assets-flex-right li:hover {
    color: white;
}


/*                            WHAT WE DO SECTION                       */

#what-we-do {
    background: #171717;
    min-height: 50dvh;
    padding: 20dvh 7dvw;
}

.what-we-do-accent {
    border-top: 2px solid #F9CD1A;
    height: 0.6dvh;
    width: 3.5dvw;
    display: inline-flex;
}

.what-we-do-tiny-heading {
    margin-left: 1dvw;
    display: inline-flex;
    color: #A6A6A6;
    font-size: 11px;
    letter-spacing: 4px;
    font-weight: 550;
}

#what-we-do > h2 {
    font-size: 44px;
    word-spacing: -5px;
    line-height: 7dvh;
    margin-top: 8dvh;
    color: #F5F5F5;
    width: 55%;
}

.what-we-do-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    margin-top: 8dvh;
}

.what-we-do-grid a {
    text-decoration: none;
}

.what-we-do-block {
    width: 100%;
    height: 45dvh;
    background: black;
    border-top: 1px solid #a6a6a636;
    border-left: 1px solid #a6a6a636;
    border-top: 1px solid #a6a6a636;
    padding: 8dvh 4dvw;
    position: relative;
}

.what-we-do-block::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 3px;
    background-color: #F9CD1A;
    transition: width 1s ease-in-out;
}

.what-we-do-block:hover::before {
    width: 100%;
}

.what-we-do-block:hover {
    background: #1D1D1D;
    transition: 0.4s ease-in-out;
}

.what-we-do-block:hover h4 {
    color: #F9CD1A;
    transition: 0.4s ease-in-out;
}

.what-we-do-block:hover h2 {
    color: #F9CD1A;
    transition: 0.4s ease-in-out;
}

.what-we-do-block:hover p:last-of-type {
    color: #F9CD1A;
    transition: 0.4s ease-in-out;
}

.what-we-do-block:hover svg {
    transform: translateX(3px);
    transition: 0.4s ease-in-out;
}

.border-bottom-block {
    border-bottom: 1px solid #a6a6a636;
}

.border-right-block {
    border-right: 1px solid #a6a6a636;
}

.what-we-do-block h4 {
    font-size: 10px;
    letter-spacing: 3px;
    color: #a6a6a665;
}

.what-we-do-block h2 {
    margin: 3dvh 0;
    color: white;
}

.what-we-do-block p:first-of-type {
    font-family: "Cormorant Garamond", serif;
    color: #a6a6a6;
    margin-bottom: 7dvh;
}

.what-we-do-block p:last-of-type {
    font-size: 13px;
    color: #a6a6a6;
    letter-spacing: 2px;
}


/*                        WORKING PROOF SECTION                        */
#working-proof {
    background: black;
    min-height: 50dvh;
    padding: 20dvh 7dvw;
    border-bottom: 1px solid #a6a6a644;
}

.working-proof-accent {
    border-top: 3px solid #F9CD1A;
    height: 0.6dvh;
    width: 3.5dvw;
    display: inline-flex;
}

.working-proof-tiny-heading {
    margin-left: 1dvw;
    display: inline-flex;
    color: #A6A6A6;
    font-size: 13px;
    letter-spacing: 4px;
    font-weight: 550;
}

.working-proof-top-flex {
    display: flex;
    justify-content: space-between;
    margin-top: 8dvh;
    align-items: center;
}

.working-proof-h2 h2 {
    font-size: 60px;
    color: white;
    font-weight: 600;
    width: 40%;
}

.working-proof-h2 span {
    color: #fafafa75;
}

.working-proof-paragraph {
    width: 40%;
    color: #9E9E9E;
    font-family: "Cormorant Garamond", serif;
    line-height: 4dvh;
    font-size: 20px;
}

.working-proof-paragraph a {
    color: #9E9E9E;
    font-family: "Cormorant Garamond", serif;
    font-size: 20px;
    text-underline-offset: 3px;
    text-decoration-thickness: 1px;
}

.working-proof-data {
    width: 100%;
    display: flex;
    margin-top: 20dvh;
    border-top: 1px solid #a6a6a636;
    margin-bottom: 25dvh;
}

.working-proof-data-block {
    width: 25%;
    height: 30dvh;
    border-right: 1px solid #a6a6a636;
    padding-top: 7dvh;
    padding-left: 3dvw;
    position: relative;
}

.first-data-block {
    padding-left: 0;
}

.last-data-block {
    border-right: none;
}

.working-proof-data-block h1 {
    color: white;
    font-size: 60px;
    line-height: 8dvh;
    margin-bottom: 4dvh;
}

.working-proof-data-block p {
    color: #fafafad3;
    font-size: 12px;
    letter-spacing: 2px;
    font-weight: 600;
}

.working-proof-data-block::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 2px;
    background-color: #F9CD1A;
}

.working-proof-data-block:hover::before {
    width: 100%;
    transition: .5s ease-in-out;
}

.working-proof-data-block:hover h1 {
    color: #F9CD1A;
    transition: .5s ease-in-out;
}

.working-proof-accent2 {
    border-top: 3px solid #F9CD1A;
    height: 0.6dvh;
    width: 3.5dvw;
    display: inline-flex;
}

.working-proof-tiny-heading2 {
    margin-left: 1dvw;
    margin-bottom: 4dvh;
    display: inline-flex;
    color: #A6A6A6;
    font-size: 11px;
    letter-spacing: 4px;
    font-weight: 550;
}

.explore-ogb-contain {
    width: fit-content;
}

.explore-ogb {
    border-bottom: 1px solid #a6a6a636;
    position: relative;
    display: inline-block;
    align-items: center;
    padding-bottom: 1dvh;
}

.explore-ogb a {
    text-decoration: none;
    color: white;
}

.explore-ogb h3 {
    font-size: 30px;
}

.explore-ogb-arrow {
    display: inline-flex;
    margin-left: 1dvw;
}

.explore-ogb::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    height: 1px;
    width: 0;
    background-color: #F9CD1A;
}

.explore-ogb-contain:hover .explore-ogb::before {
    width: 100%;
    transition: 0.4s ease-in-out;
}

.explore-ogb-contain:hover img {
    transform: translateX(1dvw);
    transition: 0.4s ease-in-out;
}

.africa-nexus {
    width: 100%;
    height: 80dvh;
    display: flex;
    border: 1px solid #a6a6a636;
    margin-top: 40dvh;
}

.nexus-img {
    width: 25%;
    background-image: url(images/report-cover-Cka3ZykN.jpg);
    background-size: 134%;
    background-position: center;
    background-repeat: no-repeat;
}

.africa-nexus:hover .nexus-img {
    background-size: 145%;
    transition: 1s ease-in-out;
}

.nexus-a {
    text-decoration: none;
}

.nexus-text {
    display: flex;
    flex-direction: column;
    width: 75%;
    padding: 12dvh 7dvw;
    color: white;
}

.nexus-text h3 {
    text-transform: uppercase;
    font-size: 12px;
    letter-spacing: 4px;
    color: #a6a6a6;
}

.nexus-text h1 {
    width: 70%;
    font-size: 44px;
    margin: 4dvh 0;
    font-weight: 600;
}

.nexus-text p:first-of-type {
    margin-bottom: 5dvh;
    color: #a6a6a6d5;
    font-family: "Cormorant Garamond", serif;
    font-size: 18px;
    font-style: italic;
}

.nexus-text p:nth-of-type(2) {
    font-family: "Cormorant Garamond", serif;
    font-size: 14px;
    line-height: 4dvh;
    color: #A6A6A6;
    width: 75%;
    margin-bottom: 7dvh;
}

.nexus-text p:last-of-type {
    text-transform: uppercase;
    letter-spacing: 2px;
    font-size: 14px;
}

.nexus-text p:last-of-type  svg {
    transform: translateY(-.5dvh);
}

.africa-nexus:hover .nexus-text p:last-of-type {
    color: #F9CD1A;
    transition: .4s ease-in-out;
}

.africa-nexus:hover .nexus-text p:last-of-type svg {
    transform: translate(5px, -5px);
 
 
 
    transition: .4s ease-in-out;
}


/*                          FEATUED SECTION                          */

#featured {
    background: black;
    min-height: 50dvh;
    padding: 15dvh 7dvw;
}

.featured-accent {
    border-top: 2px solid #F9CD1A;
    height: 0.6dvh;
    width: 3.5dvw;
    display: inline-flex;
}

.featured-tiny-heading {
    margin-left: 1dvw;
    display: inline-flex;
    color: #A6A6A6;
    font-size: 13px;
    letter-spacing: 4px;
    font-weight: 550;
}

.featured-top-flex {
    display: flex;
    justify-content: space-between;
    margin-top: 8dvh;
    margin-bottom: 12dvh;
    align-items: center;
}

.featured-h2 {
    width: 40%;
}

.featured-h2 h2 {
    font-size: 55px;
    color: white;
    font-weight: 600;
}

.featured-h2 span {
    color: #F9CD1A;
}

.featured-paragraph {
    width: 30%;
    color: #9E9E9E;
    font-family: "Cormorant Garamond", serif;
    line-height: 4dvh;
    font-size: 20px;
    font-style: italic;
}

.featured-youtube-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
}

.featured-youtube-block {
    width: 100%;
    height: 70dvh;
    background: #242424;
    border-right: 1px solid #a6a6a636;
    border-bottom: 1px solid #a6a6a636;
    display: flex;
    flex-direction: column;
}

.featured-youtube-embed {
    height: 70%;
}

.yt-facade {
    position: relative;
    width: 100%;
    height: 100%;
    background-image: var(--thumb);
    background-size: cover;
    background-position: center;
    cursor: pointer;
}

.yt-facade::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: #F9CD1A url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M8 5v14l11-7z'/%3E%3C/svg%3E") center/40% no-repeat;
    transition: transform 0.2s ease;
}

.yt-facade:hover::after {
    transform: translate(-50%, -50%) scale(1.1);
}

.yt-facade iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

.yt-facade:hover iframe {
    opacity: 1;
    pointer-events: all;
}

.yt-facade:hover::after {
    opacity: 0;
}

.featured-youtube-text {
    height: 30%;
    padding: 4dvh 3dvw;
    background: #121212;
}

.featured-youtube-heading {
    text-transform: uppercase;
    color: #F9CD1A;
    font-size: 10px;
    letter-spacing: 2px;
    margin-bottom: 2dvh;
}

.featured-youtube-subtext {
    color: white;
    font-size: 20px;
    word-spacing: -3px;
    width: 63%;
}

.featured-youtube-block:hover .featured-youtube-subtext {
    color: #F9CD1A;
    transition: .5s ease-in-out;
}


/*                      PLACE PAPERS SECTIONS                    */


#place-papers {
    padding: 15dvh 0;
}

.place-papers {
    padding-left: 5dvw;
}

.place-papers-accent {
    border-top: 2px solid #F9CD1A;
    height: 0.6dvh;
    width: 3.5dvw;
    display: inline-flex;
}

.place-papers-tiny-heading {
    margin-left: 1dvw;
    display: inline-flex;
    color: #F9CD1A;
    font-size: 10px;
    letter-spacing: 2px;
    font-weight: 550;
    margin-bottom: 5dvh;
}

.place-papers-heading {
    width: 40%;
}

.place-papers-heading h2 {
    font-size: 80px;
    color: white;
    font-weight: 900;
}

.place-papers-heading span:first-of-type {
    color: #F9CD1A;
    font-style: italic;
    font-family: "Cormorant Garamond", serif;
    display: block;
    font-weight: normal;
}

.place-papers-heading span:last-of-type {
    color: #a6a6a644;
}

.place-papers-buttons {
    margin-top: 7dvh;
}


.place-papers-marquee {
    width: fit-content;
    border-top: 1px solid #a6a6a636;
    margin-top: 15dvh;
    display: flex;
    animation: placePapersMarquee 25s linear infinite;
}

 .place-papers-marquee:hover {
    animation-play-state: paused;
 }

@keyframes placePapersMarquee {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-50%);
    }
    
}

.place-papers-marquee a {
    width: 24dvw;
    text-decoration: none;
}

.place-papers-marquee-block {
    padding: 5dvh 3dvw;
    height: 30dvh;
    border-right: 1px solid #a6a6a636;
}

.place-papers-marquee-block-contents {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.place-papers-marquee-block-contents:hover {
    background: #121212;
    transition: 0.2s ease-in-out;
}

.place-papers-marquee-block-contents:hover .ppmbc-arrow {
    transform: translateX(3px);
}

.ppmbc-number {
    color: #f9cc1a85;
    font-size: 11px;
    letter-spacing: 2px;
}

.ppmbc-text {
    font-family: "Cormorant Garamond", serif;
    font-style: italic;
    word-spacing: -2px;
    color: #f5f5f5;
}

.ppmbc-arrow {
    justify-self: end;
}

.who-is-this-for {
    padding: 0 8dvw;
    margin-top: 15dvh;
}

.who-is-this-for-accent {
    border-top: 2px solid #F9CD1A;
    height: 0.6dvh;
    width: 3.5dvw;
    display: inline-flex;
}

.who-is-this-for-tiny-heading {
    margin-left: 1dvw;
    display: inline-flex;
    color: #a6a6a675;
    font-size: 14px;
    letter-spacing: 3px;
    font-weight: 550;
    margin-bottom: 10dvh;
}

.who-is-this-for-heading {
    width: 40%;
}

.who-is-this-for-heading h2 {
    font-size: 46px;
    color: white;
}

.who-is-this-for-flex {
    display: flex;
    margin-top: 8dvh;
    width: 100%;
    border-right: 1px solid #a6a6a636;
    border-bottom: 1px solid #a6a6a636;
}

.who-is-this-for-flex a {
    text-decoration: none;
    width: 34%;
}

.who-is-this-for-flex-block {
    height: 42dvh;
    background: black;
    border-top: 1px solid #a6a6a636;
    border-left: 1px solid #a6a6a636;
    padding: 8dvh 4dvw;
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 2dvh;
}

.who-is-this-for-flex-block::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 3px;
    background-color: #F9CD1A;
    transition: width .5s ease-in-out;
}

.who-is-this-for-flex-block:hover::before {
    width: 100%;
}

.who-is-this-for-flex-block:hover {
    background: #1D1D1D;
    transition: 0.4s ease-in-out;
}

.who-is-this-for-flex-block h4 {
    color: white;
}

.who-is-this-for-flex-block:hover h4 {
    color: #F9CD1A;
    transition: 0.4s ease-in-out;
}

.who-is-this-for-flex-block:hover p:last-of-type {
    color: #F9CD1A;
    transition: 0.4s ease-in-out;
}

.who-is-this-for-flex-block:hover svg {
    transform: translateX(5px);
    transition: 0.4s ease-in-out;
}

.who-is-this-for-flex-block p {
    color: #a6a6a6;
}

.who-is-this-for-flex-block p:first-of-type {
    font-family: "Cormorant Garamond", serif;
    font-size: 14px;
    line-height: 4dvh;
}

.who-is-this-for-flex-block p:last-of-type {
    font-size: 13px;
    letter-spacing: 2px;
}




/*                      INVITATION SECTION                       */
#invitation {
    background: #171717;
    padding: 30dvh 8dvw 20dvh;
    min-height: 50dvh;
}

#invitation h6 {
    font-size: 10px;
    letter-spacing: 3px;
    color: #a6a6a6;
}

#invitation h1 {
    font-size: 70px;
    word-spacing: -7px;
    margin-top: 7dvh;
    letter-spacing: -2px;
    color: white;
}

#invitation h2 {
    font-style: italic;
    font-family: "Cormorant Garamond", serif;
    color: #a6a6a6;
    font-size: 75px;
}

#invitation h3 {
    font-family: "Cormorant Garamond", serif;
    font-size: 25px;
    font-style: italic;
    margin-top: 10dvh;
    color: #A6A6A6;
}

.invitation-buttons {
    display: flex;
    gap: 1dvw;
    margin-top: 8dvh;
}

.invitation-button:hover {
    color: black;
    background: #f9cc1afa;
    border: none;
}

.invitation-button:hover .svg {
    transform: translateX(4px);
    transition: .5s ease-in-out;
}

.dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #f9cc1a81;
    margin-top: 10dvh;
    justify-self: end;
}



/*                                  FOOTER                           */
footer {
    background: black;
    height: 72dvh;
    border-top: 1px solid #a6a6a636;
    padding: 12dvh 8dvw;
}

.footer-grid {
    display: grid;
    grid-template-columns: 5fr 2fr 1fr;
}

.footer-grid h3 {
    color: white;
    font-size: 14px;
    letter-spacing: 2px;
    font-weight: lighter;
    margin-bottom: 4dvh;
}

.footer-grid-left p {
    font-family: "Cormorant Garamond", serif;
    font-size: 15px;
    color: #a6a6a6;
    width: 60%;
    line-height: 4dvh;
}

.footer-grid-left h6 {
    font-family: "Cormorant Garamond", serif;
    font-size: 12px;
    color: #a6a6a675;
}

.footer-icons {
    margin-top: 7dvh;
    display: flex;
    gap: 2dvw;
}

.footer-grid-middle h3 {
    margin-bottom: 2dvh;
}

.footer-grid-right h3 {
    margin-bottom: 2dvh;
}

.footer-grid ul {
    padding: 0;
}

.footer-grid li {
    list-style: none;
    line-height: 5dvh;
    position: relative;
    width: fit-content;
}

.footer-grid li::before {
    content: '';
    position: absolute;
    height: 2px;
    width: 0;
    bottom: 0;
    left: 0;
    background-color: #F9CD1A;
}

.footer-grid li:hover a {
    color: #F9CD1A;
    transition: .4s ease-in-out;
}

.footer-grid li:hover::before {
    width: 100%;
    transition: .4s ease-in-out;
}

.footer-grid a {
    font-family: "Cormorant Garamond", serif;
    font-size: 15px;
    color: #a6a6a6;
    text-decoration: none;
} 

footer hr {
    margin-top: 10dvh;
    border: 1px solid #a6a6a675;
}

.footer-copyright-flex {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 5dvh;
}

.footer-copyright-flex p {
    font-family: "Cormorant Garamond", serif;
    font-size: 12px;
    color: #a6a6a675;
}

/*                   MOBILE RESPONSIVE — MAX 768px                 */

@media (max-width: 768px) {

  /* ── PRELOADER ── */
  .preloader {
    padding: 5dvh 8vw 10dvh;
  }

  .pre-image img {
    width: 65vw;
  }

  .pre-progress {
    width: 40vw;
  }

  .pre-text-1 h1 {
    font-size: 42px;
  }

  .pre-text-2 h2 {
    font-size: 26px;
  }

  .pre-text-3 h2 {
    font-size: 22px;
  }

  .pre-text-3-accent {
    width: 10vw;
    margin-left: auto;
    margin-right: auto;
  }

  /* ── NAV ── */
  .nav-links-desktop {
    display: none;
  }

  .nav-menu-icon {
    display: flex;
    align-items: center;
    cursor: pointer;
    color: white;
  }

  .nav-mobile-menu {
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: fixed;
    /* top: 10dvh;
    left: 0;
    right: 0;
    bottom: 0; */
    inset: 0;
    background: #000;
    z-index: 999;
    padding: 6dvh 6vw 8dvh;
    opacity: 0;
    pointer-events: none;
    /* transition: opacity 0.3s ease; */
  }

  #nav-toggle:checked ~ nav .nav-mobile-menu {
    opacity: 1;
    pointer-events: all;
  }

  .nav-close {
    position: sticky;
    top: 0;
    z-index: 1001;
    background: #000;
    padding: 0dvh 0 2dvh;
    align-self: flex-end;
  }

  .nav-mobile-links {
    list-style: none;
    padding: 0;
    /* padding-top: 10dvh; */
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0;
  }

  .nav-mobile-main {
    border-bottom: none;
  }

  .nav-mobile-main > a {
    font-size: 30px;
    font-weight: 500;
    color: white;
    text-decoration: none;
    letter-spacing: -0.5px;
    display: block;
    padding: 1dvh 0;
    line-height: 1.2;
    transition: color 0.2s;
  }

  .nav-mobile-main > a:hover {
    color: #F9CD1A;
  }

  .nav-mobile-sub {
    list-style: none;
    padding: 0.5dvh 0 1dvh 1dvw;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.3dvh;
  }

  .nav-mobile-sub li a {
    font-size: 10px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: rgba(255,255,255,0.38);
    text-decoration: none;
    display: block;
    padding: 0.5dvh 0;
    transition: color 0.2s;
  }

  .nav-mobile-sub li a:hover {
    color: #F9CD1A;
  }

  .nav-mobile-cta {
    position: absolute;
    bottom: 1dvh;
    left: 6vw;
    font-size: 11px;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: rgba(255,255,255,0.5);
    text-decoration: none;
    transition: color 0.2s;
  }

  .nav-mobile-cta:hover {
    color: white;
  }

  /* keep the brand name visible above the overlay */
  #nav-toggle:checked ~ nav > a {
    position: relative;
    z-index: 1000;
  }

  nav {
    padding: 0 5vw;
    height: 10dvh;
  }

  nav > a {
    font-size: 11px;
    letter-spacing: 1.5px;
  }

  nav ul {
    display: none;
  }

  /* ── HERO ── */
  #hero {
    padding: 8dvh 5vw 6dvh;
    min-height: 100dvh;
  }

  .hero-content {
    top: auto;
    bottom: 6dvh;
    position: absolute;
    left: 5vw;
    right: 5vw;
  }

  .hero-accent {
    width: 8vw;
    margin-bottom: 2dvh;
  }

  .hero-heading h1 {
    font-size: 32px;
    margin-bottom: 2dvh;
    line-height: 1.15;
  }

  .hero-subtext {
    font-size: 13px;
    width: 100%;
    margin-bottom: 5dvh;
    line-height: 1.7;
  }

  .hero-scroll a {
    font-size: 10px;
    letter-spacing: 1.5px;
  }

  /* ── ABOUT ── */
  #about {
    padding: 10dvh 5vw 8dvh;
  }

  .about-accent {
    width: 8vw;
  }

  .about-wwa {
    font-size: 10px;
    letter-spacing: 3px;
  }

  .about-body1 {
    flex-direction: column;
    margin-top: 5dvh;
    gap: 5dvh;
  }

  .about-left {
    width: 100%;
  }

  .about-left h2 {
    font-size: 26px;
    line-height: 1.3;
    word-spacing: normal;
  }

  .about-right {
    width: 100%;
    padding-top: 0;
  }

  .about-right-first {
    font-size: 16px;
    line-height: 1.7;
  }

  .about-right-second {
    font-size: 14px;
    line-height: 1.7;
  }

  .about-right hr {
    margin: 3dvh 0;
  }

  /* ── CHALLENGE ── */
  #challenge {
    padding: 8dvh 5vw 10dvh;
  }

  .challenge-accent {
    width: 8vw;
  }

  .challenge-wwa {
    font-size: 10px;
    letter-spacing: 3px;
  }

  .challenge-body {
    flex-direction: column;
    margin-top: 5dvh;
    gap: 0;
  }

  #challenge hr {
    display: none;
  }

  .challenge-body-first {
    width: 100%;
    padding-top: 0;
  }

  .challenge-body-first h2 {
    font-size: 34px;
    word-spacing: normal;
    line-height: 1.2;
    margin-bottom: 3dvh;
  }

  .challenge-body-first p {
    font-size: 15px;
    line-height: 1.7;
    margin-bottom: 3dvh;
  }

  .challenge-body-first p span {
    font-size: 15px;
  }

  .challenge-body-first p:nth-of-type(2) {
    font-size: 14px;
  }

  .challenge-body-second {
    width: 100%;
    margin-top: 5dvh;
    padding-top: 0;
  }

  .cities-stream {
    height: 55dvh;
    -webkit-mask-image: linear-gradient(
      to bottom,
      transparent 0%,
      black 22%,
      black 78%,
      transparent 100%
    );
    mask-image: linear-gradient(
      to bottom,
      transparent 0%,
      black 22%,
      black 78%,
      transparent 100%
    );
  }

  .city-line {
    font-size: 14px;
  }

  .city-active {
    font-size: 38px !important;
    font-style: italic;
    font-weight: 700;
    color: #F9CD1A;
  }

  /* ── RESEARCH ── */
  #research {
    padding: 12dvh 5vw 10dvh;
  }

  #research > p:first-child {
    font-size: 10px;
    letter-spacing: 3px;
  }

  #research > p {
    font-size: 15px;
    line-height: 1.7;
    width: 100%;
    margin-bottom: 4dvh;
  }

  .research-hei {
    flex-direction: column;
    margin-top: 6dvh;
    gap: 3dvh;
  }

  .research-hei-number {
    width: 100%;
    font-size: 120px;
    letter-spacing: -5px;
  }

  .research-hei-text {
    width: 100%;
    padding-top: 0;
  }

  .research-hei-text > p {
    width: 100%;
    font-size: 15px;
    line-height: 1.6;
    margin-bottom: 4dvh;
  }

  .research-hei-country {
    font-size: 11px;
  }

  .research-hei-no-hei {
    font-size: 11px;
  }

  .research-secondary {
    flex-direction: column-reverse;
    margin-top: 8dvh;
    gap: 3dvh;
  }

  .research-secondary-number {
    width: 100%;
    font-size: 120px;
    letter-spacing: -5px;
  }

  .research-secondary-text > p {
    width: 100%;
    font-size: 15px;
    line-height: 1.6;
    margin-bottom: 0;
    padding-top: 0;
  }

  .window {
    padding-top: 8dvh;
  }

  .window p:first-of-type {
    font-size: 9px;
    letter-spacing: 3px;
  }

  .windowh1 {
    width: 100%;
    margin-top: 3dvh;
  }

  .window h1 {
    font-size: 30px;
    line-height: 1.2;
  }

  .window-grey-accent {
    width: 8vw;
    margin: 4dvh auto;
  }

  .window p:nth-of-type(2) {
    font-size: 16px;
    width: 100%;
    line-height: 1.6;
  }

  .window p:last-of-type {
    font-size: 15px;
  }

  /* ── ASSETS ── */
  #assets {
    padding: 10dvh 5vw;
  }

  .assets-heading h4 {
    font-size: 9px;
    letter-spacing: 2.5px;
    margin-bottom: 3dvh;
  }

  .assets-heading h1 {
    font-size: 32px;
    width: 100%;
    line-height: 1.2;
  }

  .assets-flex {
    flex-direction: column;
    gap: 0;
  }

  .assets-flex-left {
    width: 100%;
    height: auto;
    border-right: none;
    border-bottom: 1px solid #f9cc1a18;
    padding: 6dvh 5vw;
  }

  .assets-flex-left h4 {
    font-size: 9px;
    letter-spacing: 3px;
    margin-bottom: 3dvh;
  }

  .assets-flex-left li {
    font-size: 16px;
    margin-bottom: 3dvh;
  }

  .assets-flex-right {
    width: 100%;
    height: auto;
    padding: 6dvh 5vw;
  }

  .assets-flex-right h4 {
    font-size: 9px;
    letter-spacing: 3px;
    margin-bottom: 3dvh;
  }

  .assets-flex-right li {
    font-size: 16px;
    margin-bottom: 3dvh;
  }

  /* ── WHAT WE DO ── */
  #what-we-do {
    padding: 10dvh 5vw;
  }

  .what-we-do-accent {
    width: 8vw;
  }

  .what-we-do-tiny-heading {
    font-size: 10px;
    letter-spacing: 3px;
  }

  #what-we-do > h2 {
    font-size: 28px;
    width: 100%;
    line-height: 1.3;
    word-spacing: normal;
    margin-top: 5dvh;
  }

  .what-we-do-grid {
    grid-template-columns: 1fr;
    margin-top: 5dvh;
  }

  .what-we-do-block {
    height: auto;
    min-height: 35dvh;
    padding: 6dvh 5vw;
    border-left: none;
    border-top: 1px solid #a6a6a636;
  }

  .border-right-block {
    border-right: none;
  }

  .border-bottom-block {
    border-bottom: 1px solid #a6a6a636;
  }

  .what-we-do-block h4 {
    font-size: 9px;
    letter-spacing: 2.5px;
  }

  .what-we-do-block h2 {
    font-size: 28px;
    margin: 2dvh 0;
  }

  .what-we-do-block p:first-of-type {
    font-size: 14px;
    margin-bottom: 3dvh;
    line-height: 1.7;
  }

  .what-we-do-block p:last-of-type {
    font-size: 12px;
    letter-spacing: 1.5px;
  }

  /* ── WORKING PROOF ── */
  #working-proof {
    padding: 10dvh 5vw;
  }

  .working-proof-accent {
    width: 8vw;
  }

  .working-proof-tiny-heading {
    font-size: 11px;
    letter-spacing: 3px;
  }

  .working-proof-top-flex {
    flex-direction: column;
    gap: 4dvh;
    margin-top: 5dvh;
  }

  .working-proof-h2 h2 {
    font-size: 38px;
    width: 100%;
    line-height: 1.15;
  }

  .working-proof-paragraph {
    width: 100%;
    font-size: 16px;
    line-height: 1.7;
  }

  .working-proof-paragraph a {
    font-size: 16px;
  }

  .working-proof-data {
    flex-direction: column;
    margin-top: 8dvh;
    margin-bottom: 10dvh;
    border-top: 1px solid #a6a6a636;
  }

  .working-proof-data-block {
    width: 100%;
    height: auto;
    border-right: none;
    border-bottom: 1px solid #a6a6a636;
    padding: 5dvh 0;
    padding-left: 0;
  }

  .last-data-block {
    border-bottom: none;
  }

  .working-proof-data-block h1 {
    font-size: 48px;
    line-height: 1.2;
    margin-bottom: 1.5dvh;
  }

  .working-proof-data-block p {
    font-size: 11px;
    letter-spacing: 1.5px;
  }

  .working-proof-accent2 {
    width: 8vw;
  }

  .working-proof-tiny-heading2 {
    font-size: 10px;
    letter-spacing: 3px;
  }

  .explore-ogb h3 {
    font-size: 22px;
  }

  .africa-nexus {
    flex-direction: column;
    height: auto;
    width: 98%;
    margin-top: 15dvh;
  }

  .nexus-img {
    width: 100%;
    height: 62dvh;
    background-size: cover;
  }

  .nexus-text {
    width: 100%;
    padding: 6dvh 5vw;
  }

  .nexus-text h3 {
    font-size: 10px;
    letter-spacing: 3px;
  }

  .nexus-text h1 {
    font-size: 26px;
    width: 100%;
    margin: 3dvh 0;
  }

  .nexus-text p:first-of-type {
    font-size: 18px;
    margin-bottom: 3dvh;
  }

  .nexus-text p:nth-of-type(2) {
    font-size: 13px;
    width: 100%;
    line-height: 1.7;
    margin-bottom: 4dvh;
  }

  .nexus-text p:last-of-type {
    font-size: 12px;
    letter-spacing: 1.5px;
  }

  /* ── FEATURED ── */
  #featured {
    padding: 10dvh 5vw;
  }

  .featured-accent {
    width: 8vw;
  }

  .featured-tiny-heading {
    font-size: 11px;
    letter-spacing: 3px;
  }

  .featured-top-flex {
    flex-direction: column;
    gap: 3dvh;
    margin-top: 5dvh;
    margin-bottom: 6dvh;
  }

  .featured-h2 {
    width: 100%;
  }

  .featured-h2 h2 {
    font-size: 32px;
    line-height: 1.2;
    width: 80%;
  }

  .featured-paragraph {
    width: 100%;
    font-size: 16px;
    line-height: 1.6;
  }

  .featured-youtube-grid {
    grid-template-columns: 1fr;
  }

  .featured-youtube-block {
    height: auto;
    border-right: none;
  }

  .featured-youtube-embed {
    height: 25dvh;
  }

  .featured-youtube-text {
    height: auto;
    padding: 3dvh 4vw;
  }

  .featured-youtube-heading {
    font-size: 9px;
    letter-spacing: 1.5px;
    margin-bottom: 1.5dvh;
  }

  .featured-youtube-subtext {
    font-size: 16px;
    width: 100%;
  }

  /* ── PLACE PAPERS ── */
  #place-papers {
    padding: 10dvh 0 8dvh;
  }

  .place-papers {
    padding-left: 5vw;
    padding-right: 5vw;
  }

  .place-papers-accent {
    width: 8vw;
  }

  .place-papers-tiny-heading {
    font-size: 9px;
    letter-spacing: 1.5px;
    margin-bottom: 3dvh;
  }

  .place-papers-heading {
    width: 100%;
  }

  .place-papers-heading h2 {
    font-size: 52px;
    line-height: 1.0;
  }

  .place-papers-buttons {
    margin-top: 4dvh;
    display: flex;
    flex-wrap: wrap;
    gap: 2vw;
  }

  .place-paper-button {
    width: 100%
  }

  .place-papers-marquee {
    margin-top: 8dvh;
  }

  .place-papers-marquee a {
    width: 68vw;
  }

  .place-papers-marquee-block {
    height: auto;
    min-height: 20dvh;
    padding: 4dvh 5vw;
  }

  .ppmbc-number {
    font-size: 10px;
    letter-spacing: 1.5px;
    margin-bottom: 2dvh;
  }

  .ppmbc-text {
    font-size: 16px;
    line-height: 1.4;
    margin-bottom: 2dvh;
  }

  /* ── WHO IS THIS FOR ── */
  .who-is-this-for {
    padding: 0 5vw;
    margin-top: 10dvh;
  }

  .who-is-this-for-accent {
    width: 8vw;
  }

  .who-is-this-for-tiny-heading {
    font-size: 11px;
    letter-spacing: 2px;
    margin-bottom: 5dvh;
  }

  .who-is-this-for-heading {
    width: 100%;
  }

  .who-is-this-for-heading h2 {
    font-size: 28px;
    line-height: 1.3;
  }

  .who-is-this-for-flex {
    flex-direction: column;
    margin-top: 5dvh;
    border-right: none;
    border-bottom: none;
    width: 97%;
    border-left: 1px solid #a6a6a636;
    border-top: 1px solid #a6a6a636;
    border-right: 1px solid #a6a6a636;
  }

  .who-is-this-for-flex a {
    width: 100%;
  }

  .who-is-this-for-flex-block {
    height: auto;
    min-height: 28dvh;
    padding: 5dvh 5vw;
    gap: 2dvh;
    border-bottom: 1px solid #a6a6a636;
  }

  .who-is-this-for-flex-block h4 {
    font-size: 18px;
  }

  .who-is-this-for-flex-block p:first-of-type {
    font-size: 16px;
    line-height: 1.7;
  }

  .who-is-this-for-flex-block p:last-of-type {
    font-size: 11px;
    letter-spacing: 1.5px;
  }

  /* ── INVITATION ── */
  #invitation {
    padding: 15dvh 5vw 15dvh;
  }

  #invitation h6 {
    font-size: 9px;
    letter-spacing: 2.5px;
  }

  #invitation h1 {
    font-size: 36px;
    width: 60%;
    word-spacing: normal;
    letter-spacing: -1px;
    margin-top: 4dvh;
    line-height: 1.1;
  }

  #invitation h2 {
    font-size: 34px;
    line-height: 1.1;
  }

  #invitation h3 {
    font-size: 18px;
    margin-top: 7dvh;
  }

  .invitation-buttons {
    flex-direction: column;
    gap: 2dvh;
    margin-top: 7dvh;
  }

  .invitation-button {
    padding: 2dvh 5vw !important;
    font-size: 12px !important;
    letter-spacing: 1.5px !important;
    text-align: center;
    justify-content: center;
  }

  .dot {
    display: none;
  }

  /* ── FOOTER ── */
  footer {
    height: auto;
    padding: 8dvh 5vw 6dvh;
  }

  .footer-grid {
    grid-template-columns: 1fr;
    gap: 7dvh;
  }

  .footer-grid h3 {
    font-size: 14px;
    letter-spacing: 1.5px;
    margin-bottom: 2.5dvh;
  }

  .footer-grid-left p {
    width: 100%;
    font-size: 16px;
    line-height: 1.7;
  }

  .footer-grid-left h6 {
    font-size: 11px;
    margin-top: 1dvh;
  }

  .footer-icons {
    margin-top: 4dvh;
    gap: 5vw;
  }

  .footer-grid-middle,
  .footer-grid-right {
    margin-top: 0;
  }

  .footer-grid a {
    font-size: 14px;
  }

  .footer-grid li {
    line-height: 4dvh;
  }

  footer hr {
    margin-top: 6dvh;
  }

  .footer-copyright-flex {
    flex-direction: column;
    align-items: flex-start;
    gap: 1.5dvh;
    margin-top: 3dvh;
  }

  .footer-copyright-flex p {
    font-size: 11px;
  }
}