@font-face {
   font-family: Gotham;
   src: url('../fonts/Gotham-Book.otf') format('opentype');
   font-weight: 400;
   font-display: swap
}

@font-face {
   font-family: Gotham;
   src: url('../fonts/Gotham-Medium.otf') format('opentype');
   font-weight: 500;
   font-display: swap
}

@font-face {
   font-family: Gotham;
   src: url('../fonts/Gotham-Bold.otf') format('opentype');
   font-weight: 700;
   font-display: swap
}

@font-face {
   font-family: Gotham;
   src: url('../fonts/Gotham-Black.otf') format('opentype');
   font-weight: 900;
   font-display: swap
}

:root {
   --purple: #1b0b56;
   --lime: #c8ff24;
   --magenta: #a92778;
   --blue: #241e68;
   font-family: Gotham, Arial, sans-serif;
   color: #fff;
   background: var(--purple);
   font-size: clamp(10px, .833333333vw, 20px);
   scroll-behavior: smooth
}

* {
   box-sizing: border-box
}

body {
   margin: 0;
   overflow-x: clip
}

button,
input,
textarea {
   font: inherit
}

button,
a {
   -webkit-tap-highlight-color: transparent
}

button {
   cursor: pointer
}

button {
   color: inherit
}

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

button {
   background: none;
   border: 0;
   padding: 0
}

img {
   display: block
}

h1,
h2,
h3,
p {
   margin: 0
}

h1,
h2,
h3 {
   text-transform: uppercase
}

h1,
h2 {
   font-weight: 900;
   line-height: 1.06
}

h1 {
   font-size: 5rem;
   line-height: 1.125
}

h2 {
   font-size: 4rem
}

p {
   line-height: 1.5
}

button:focus-visible,
a:focus-visible,
input:focus-visible,
textarea:focus-visible,
summary:focus-visible {
   outline: 3px solid var(--lime);
   outline-offset: 5px
}

a,
button {
   touch-action: manipulation
}

section,
footer {
   scroll-margin-top: 2rem
}

.container {
   width: 95rem;
   max-width: 79.167%;
   margin-inline: auto
}

.lime {
   color: var(--lime)
}

.magenta {
   color: var(--magenta)
}

.underline {
   text-decoration: underline;
   text-decoration-color: var(--magenta);
   text-decoration-thickness: .115em;
   text-underline-offset: .02em;
   text-decoration-skip-ink: none
}

.indented {
   margin-left: 7.875rem
}

.button {
   display: inline-flex;
   align-items: center;
   justify-content: space-between;
   gap: 3.1875rem;
   min-height: 3.5rem;
   padding: .875rem 1.3125rem;
   background: var(--magenta);
   font-size: 1rem;
   font-weight: 700;
   text-align: left;
   transition: background .2s, transform .2s
}

.button:hover {
   background: #c22f8b;
   transform: translateY(-2px)
}

.arrow {
   width: .9375rem;
   height: 1.25rem;
   object-fit: contain;
   flex: none
}

.eyebrow {
   display: flex;
   align-items: center;
   gap: 7.125rem;
   color: var(--lime);
   font-size: 1.125rem;
   font-weight: 700;
   letter-spacing: .3375rem;
   text-transform: uppercase;
   line-height: 1.25
}

.eyebrow.center {
   flex-direction: column;
   gap: 1rem;
   letter-spacing: .3375rem;
   text-align: center
}

.eyebrow.center .arrow {
   transform: rotate(90deg)
}

.cover {
   width: 100%;
   height: 100%;
   object-fit: cover
}

.sr-only {
   position: absolute;
   width: 1px;
   height: 1px;
   padding: 0;
   overflow: hidden;
   clip: rect(0, 0, 0, 0);
   white-space: nowrap
}

.skip-link {
   position: fixed;
   z-index: 20;
   top: -5rem;
   left: 1rem;
   background: var(--lime);
   color: var(--purple);
   padding: 1rem
}

.skip-link:focus {
   top: 1rem
}

/* Shared navigation */
.site-header {
   position: fixed;
   inset: 0 0 auto;
   z-index: 15;
   height: 6.875rem;
   padding: 0 10.4167%;
   display: flex;
   align-items: center;
   gap: 3rem;
   background: linear-gradient(180deg, rgba(27, 11, 86, .12), transparent)
}

.brand {
   flex: none;
   width: 17.5rem
}

.brand img {
   width: 100%;
   height: auto
}

.site-header nav {
   margin-left: auto;
   display: flex;
   align-items: center;
   gap: 1.625rem;
   font-size: 1rem;
   font-weight: 500;
   white-space: nowrap;
   height: 100%
}

.site-header nav>a,
.site-header nav>button,
.nav-dropdown>summary {
   display: flex;
   align-items: center;
   height: 100%;
   position: relative
}

.site-header [aria-current=page] {
   color: var(--lime)
}

.site-header [aria-current=page]:after {
   content: '';
   height: 1px;
   background: var(--lime);
   position: absolute;
   bottom: 0;
   left: 0;
   right: 0
}

.site-header a:hover,
.site-header button:hover {
   color: var(--lime)
}

.nav-dropdown {
   height: 100%;
   position: relative
}

.nav-dropdown summary {
   cursor: pointer;
   list-style: none;
   gap: .5rem
}

.nav-dropdown summary::-webkit-details-marker {
   display: none
}

.nav-dropdown summary :is(img, svg.lucide) {
   width: .5rem;
   height: .5rem
}

.nav-dropdown>div {
   position: absolute;
   top: 100%;
   left: -1rem;
   padding: 1rem;
   background: var(--purple);
   min-width: 17rem;
   box-shadow: 0 .5rem 2rem #0004
}

.nav-dropdown>div a {
   display: block;
   padding: .8rem
}

.header-tools {
   display: flex;
   gap: 1.6rem;
   margin-left: 8.3rem;
   align-items: center
}

.header-tools>button {
   display: flex;
   align-items: center;
   justify-content: center;
   min-height: 2.75rem
}

.header-tools>button:first-child :is(img, svg.lucide) {
   width: 1.4rem;
   height: 1.4rem
}

.language {
   gap: .6rem;
   font-size: 1rem
}

.language :is(img, svg.lucide):first-child {
   width: 1.5rem;
   height: 1.5rem
}

.language :is(img, svg.lucide):last-child {
   width: .45rem;
   height: .45rem
}

.menu-toggle {
   display: none
}

/* Home */
.home-page {
   background-image: url('../images/2280-115-Uuid1E08462295F64752B5980492Facbb607.svg'), url('../images/2280-69-Uuid1E08462295F64752B5980492Facbb607.svg');
   background-position: 12.55vw 70.677vw, -14.375vw 289.01vw;
   background-size: 73.594vw 80.104vw, 89.01vw 99.167vw;
   background-repeat: no-repeat
}

.home-hero {
   position: relative;
   min-height: 67.5rem;
   isolation: isolate;
   overflow: hidden
}

.hero-background,
.hero-pattern {
   position: absolute;
   inset: 0;
   z-index: -1
}

.hero-background:after {
   content: '';
   position: absolute;
   inset: 0;
   background: linear-gradient(237.68deg, transparent 18.286%, rgba(27, 11, 86, .8) 98.54%), linear-gradient(#1b0b5699, #1b0b5699)
}

.hero-pattern {
   inset: -14.5625rem .6875rem -3.625rem 31rem;
   background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none" overflow="visible" style="display: block;" width="1413" height="1371" viewBox="0 0 1413 1371" fill="none"><g id="uuid-1e084622-95f6-4752-b598-0492facbb607" clip-path="url(%23clip0_0_157)"><path id="Vector" opacity="0" d="M587.229 0.799581L1412.18 825.99L592.185 1646.18L5.68662 1059.56L239.226 825.967L0.799324 587.464L587.229 0.799581Z" stroke="%23A92778" stroke-width="0.5" stroke-miterlimit="10"/><path id="Vector_2" opacity="0.05" d="M587.229 18.8244L1394.18 825.99L592.185 1628.18L23.7057 1059.56L257.223 825.967L18.8184 587.464L587.229 18.8244Z" stroke="%23A92778" stroke-width="0.5" stroke-miterlimit="10"/><path id="Vector_3" opacity="0.1" d="M587.229 36.8264L1376.19 825.99L592.185 1610.17L41.7019 1059.56L275.242 825.967L36.8146 587.464L587.229 36.8264Z" stroke="%23A92778" stroke-width="0.5" stroke-miterlimit="10"/><path id="Vector_4" opacity="0.14" d="M587.229 54.8284L1358.17 825.99L592.185 1592.17L59.6981 1059.56L293.238 825.967L54.8108 587.464L587.229 54.8284Z" stroke="%23A92778" stroke-width="0.5" stroke-miterlimit="10"/><path id="Vector_5" opacity="0.19" d="M587.229 72.8533L1340.17 825.99L592.185 1574.17L77.7172 1059.56L311.234 825.967L72.807 587.464L587.229 72.8533Z" stroke="%23A92778" stroke-width="0.5" stroke-miterlimit="10"/><path id="Vector_6" opacity="0.24" d="M587.229 90.8553L1322.15 825.99L592.185 1556.14L95.7134 1059.56L329.253 825.967L90.8261 587.464L587.229 90.8553Z" stroke="%23A92778" stroke-width="0.5" stroke-miterlimit="10"/><path id="Vector_7" opacity="0.29" d="M587.229 108.857L1304.15 825.99L592.185 1538.14L113.71 1059.56L347.249 825.967L108.822 587.464L587.229 108.857Z" stroke="%23A92778" stroke-width="0.5" stroke-miterlimit="10"/><path id="Vector_8" opacity="0.33" d="M587.229 126.859L1286.16 825.99L592.185 1520.14L131.729 1059.56L365.246 825.967L126.819 587.464L587.229 126.859Z" stroke="%23A92778" stroke-width="0.5" stroke-miterlimit="10"/><path id="Vector_9" opacity="0.38" d="M587.229 144.884L1268.14 825.99L592.185 1502.14L149.725 1059.56L383.242 825.967L144.815 587.464L587.229 144.884Z" stroke="%23A92778" stroke-width="0.5" stroke-miterlimit="10"/><path id="Vector_10" opacity="0.43" d="M587.229 162.886L1250.14 825.99L592.185 1484.11L167.721 1059.56L401.261 825.967L162.811 587.464L587.229 162.886Z" stroke="%23A92778" stroke-width="0.5" stroke-miterlimit="10"/><path id="Vector_11" opacity="0.48" d="M587.229 180.888L1232.15 825.99L592.185 1466.11L185.74 1059.56L419.257 825.967L180.83 587.464L587.229 180.888Z" stroke="%23A92778" stroke-width="0.5" stroke-miterlimit="10"/><path id="Vector_12" opacity="0.52" d="M587.229 198.913L1214.13 825.99L592.185 1448.11L203.736 1059.56L437.253 825.967L198.826 587.464L587.229 198.913Z" stroke="%23A92778" stroke-width="0.5" stroke-miterlimit="10"/><path id="Vector_13" opacity="0.57" d="M587.229 216.915L1196.13 825.99L592.185 1430.11L221.733 1059.56L455.272 825.967L216.822 587.464L587.229 216.915Z" stroke="%23A92778" stroke-width="0.5" stroke-miterlimit="10"/><path id="Vector_14" opacity="0.62" d="M587.229 234.917L1178.14 825.99L592.185 1412.08L239.752 1059.56L473.269 825.967L234.819 587.464L587.229 234.917Z" stroke="%23A92778" stroke-width="0.5" stroke-miterlimit="10"/><path id="Vector_15" opacity="0.67" d="M587.229 252.942L1160.12 825.99L592.185 1394.08L257.748 1059.56L491.265 825.967L252.838 587.464L587.229 252.942Z" stroke="%23A92778" stroke-width="0.5" stroke-miterlimit="10"/><path id="Vector_16" opacity="0.71" d="M587.229 270.944L1142.12 825.99L592.185 1376.08L275.767 1059.56L509.261 825.967L270.834 587.464L587.229 270.944Z" stroke="%23A92778" stroke-width="0.5" stroke-miterlimit="10"/><path id="Vector_17" opacity="0.76" d="M587.229 288.946L1124.1 825.99L592.185 1358.08L293.763 1059.56L527.28 825.99L288.83 587.464L587.229 288.946Z" stroke="%23A92778" stroke-width="0.5" stroke-miterlimit="10"/><path id="Vector_18" opacity="0.81" d="M587.229 306.948L1106.11 825.99L592.185 1340.05L311.759 1059.56L545.276 825.99L306.826 587.464L587.229 306.948Z" stroke="%23A92778" stroke-width="0.5" stroke-miterlimit="10"/><path id="Vector_19" opacity="0.86" d="M587.229 324.973L1088.11 825.99L592.185 1322.05L329.778 1059.56L563.272 825.99L324.845 587.464L587.229 324.973Z" stroke="%23A92778" stroke-width="0.5" stroke-miterlimit="10"/><path id="Vector_20" opacity="0.9" d="M587.229 342.975L1070.09 825.99L592.185 1304.05L347.775 1059.56L581.292 825.99L342.842 587.464L587.229 342.975Z" stroke="%23A92778" stroke-width="0.5" stroke-miterlimit="10"/><path id="Vector_21" opacity="0.95" d="M587.229 360.977L1052.09 825.99L592.185 1286.05L365.771 1059.56L599.288 825.99L360.838 587.464L587.229 360.977Z" stroke="%23A92778" stroke-width="0.5" stroke-miterlimit="10"/><path id="Vector_22" d="M587.229 379.001L1034.1 825.99L592.185 1268.04L383.79 1059.56L617.284 825.99L378.834 587.464L587.229 379.001Z" stroke="%23A92778" stroke-width="0.5" stroke-miterlimit="10"/></g><defs><clipPath id="clip0_0_157"><rect width="1413" height="1371" fill="white"/></clipPath></defs></svg>') center/100% 100% no-repeat
}

.hero-copy {
   position: absolute;
   top: 22.75rem;
   left: 10.4167%;
   width: 53rem
}

.hero-copy h1 {
   color: #fff;
   white-space: nowrap
}

.hero-subtitle {
   font-weight: 500;
   font-size: 1.75rem;
   text-transform: uppercase;
   margin-top: .625rem;
   line-height: 1.3
}

.hero-description {
   font-size: 1.25rem;
   line-height: 1.55;
   max-width: 49.375rem;
   margin-top: 1.875rem
}

.hero-copy>.button {
   margin-top: 2.5625rem
}

.register-card {
   position: absolute;
   top: 44.4375rem;
   right: 10%;
   background: #fff;
   color: var(--purple);
   width: 22rem;
   padding: 1.25rem;
   box-shadow: -.9375rem .9375rem 0 var(--lime)
}

.register-card>p:first-child {
   text-transform: uppercase;
   font-size: .75rem;
   font-weight: 500
}

.register-card h2 {
   font-size: 2rem;
   margin: .5rem 0
}

.register-card>p:nth-of-type(2) {
   font-size: .875rem;
   color: #1b0b5699;
   font-weight: 500
}

.register-card .button {
   margin-top: 1rem;
   width: 100%;
   color: #fff
}

.hero-pagination {
   position: absolute;
   bottom: 2.0625rem;
   left: 10.4167%;
   right: 10.4167%;
   display: flex;
   justify-content: space-between;
   align-items: center
}

.hero-pagination p {
   color: #ffffff87;
   font-size: 1rem
}

.hero-pagination p span {
   color: var(--lime)
}

.hero-pagination>div {
   display: flex;
   gap: .5625rem
}

.round {
   width: 3.5625rem;
   height: 3.5625rem;
   display: grid;
   place-items: center
}

.round :is(img, svg.lucide) {
   width: 3.5625rem;
   height: 3.5625rem
}

.round.prev img {
   transform: rotate(90deg)
}

.round.next img {
   transform: rotate(-90deg)
}

.round:hover {
   filter: brightness(1.25)
}

.overview {
   min-height: 48.1875rem;
   padding: 5rem 0 5rem 10.5208%;
   display: grid;
   grid-template-columns: 51.5625rem 1fr;
   gap: 2rem
}

.overview h2 {
   font-size: 4.25rem;
   line-height: 1;
   margin: 2.3125rem 0 1.25rem;
   white-space: nowrap
}

.overview .indented {
   margin-left: 7.625rem
}

.overview-copy p {
   width: 37rem;
   max-width: 100%;
   font-size: 1rem;
   line-height: 1.6875
}

.discover {
   display: flex;
   gap: 2.0625rem;
   align-items: center;
   margin-top: 1.875rem;
   font-size: 1rem;
   font-weight: 900;
   line-height: 1.1875
}

.discover>img {
   width: 3.5625rem;
   height: 3.5rem
}

.discover:hover {
   color: var(--lime)
}

.overview-image {
   position: relative;
   height: 38.1875rem
}

.overview-image>img {
   width: 100%;
   height: 100%;
   object-fit: cover
}

.play {
   position: absolute;
   top: 50%;
   left: 45%;
   transform: translate(-50%, -50%);
   width: 7.375rem;
   height: 7.375rem;
   background: var(--magenta);
   border-radius: 50%;
   display: grid;
   place-items: center
}

.play :is(img, svg.lucide) {
   width: 1.25rem;
   height: 1.75rem;
   margin-left: .3rem
}

.play:hover {
   background: #c22f8b
}

.participate {
   min-height: 38rem;
   background: linear-gradient(#1b0b5626, #1b0b5626), url('../images/2280-686-Frame216.png') center/cover;
   display: grid;
   grid-template-columns: 40rem 1fr;
   gap: 0;
   padding: 4.375rem 6.25% 5rem 10.4167%
}

.participate h2 {
   font-size: 4.25rem;
   line-height: 1;
   white-space: nowrap
}

.participate p {
   font-size: 1rem;
   max-width: 35.875rem;
   margin: 1.25rem 0 2.5rem
}

.numbers {
   min-height: 53.5rem;
   padding-top: 5rem
}

.numbers h2 {
   font-size: 4.5rem;
   text-align: center;
   margin: 2.5rem 0 3.75rem
}

.stats-grid {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   gap: 1.5rem
}

.stat-card {
   height: 25.75rem;
   background: #241e687a;
   backdrop-filter: blur(3px);
   padding: 2rem;
   position: relative
}

.stat-icon {
   height: 3rem;
   display: flex;
   align-items: center
}

.stat-icon :is(img, svg.lucide) {
   max-width: 2.6rem;
   max-height: 2.6rem;
   object-fit: contain
}

.stat-card h3 {
   font-weight: 700;
   font-size: 1.1875rem;
   margin: 1.6875rem 0 5.375rem;
   line-height: 1.2;
   min-height: 2.85rem
}

.stat-card>p {
   font-weight: 700;
   color: var(--lime);
   font-size: 5.0625rem;
   line-height: 1.2
}

.stat-line {
   position: absolute;
   bottom: 0;
   left: 1.25rem
}

.stat-line img {
   width: 4.3125rem;
   height: .5rem
}

.partners {
   min-height: 60.1875rem;
   background: #fff url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none" overflow="visible" style="display: block;" width="1621" height="753" viewBox="0 0 1621 753" fill="none"><g id="uuid-1e084622-95f6-4752-b598-0492facbb607" clip-path="url(%23clip0_0_5)"><path id="Vector" opacity="0" d="M673.672 -13.7974L1620.06 932.295L679.357 1872.65L6.52372 1200.08L274.442 932.269L0.916992 658.821L673.672 -13.7974Z" stroke="%23A92778" stroke-width="0.5" stroke-miterlimit="10"/><path id="Vector_2" opacity="0.05" d="M673.672 6.86816L1599.41 932.295L679.357 1852.01L27.1953 1200.08L295.087 932.268L21.5885 658.821L673.672 6.86816Z" stroke="%23A92778" stroke-width="0.5" stroke-miterlimit="10"/><path id="Vector_3" opacity="0.1" d="M673.672 27.5078L1578.77 932.295L679.358 1831.37L47.8406 1200.08L315.758 932.269L42.2339 658.821L673.672 27.5078Z" stroke="%23A92778" stroke-width="0.5" stroke-miterlimit="10"/><path id="Vector_4" opacity="0.14" d="M673.672 48.1472L1558.09 932.295L679.357 1810.73L68.4859 1200.08L336.404 932.268L62.8792 658.821L673.672 48.1472Z" stroke="%23A92778" stroke-width="0.5" stroke-miterlimit="10"/><path id="Vector_5" opacity="0.19" d="M673.672 68.813L1537.45 932.295L679.357 1790.09L89.1575 1200.08L357.049 932.268L83.5246 658.821L673.672 68.813Z" stroke="%23A92778" stroke-width="0.5" stroke-miterlimit="10"/><path id="Vector_6" opacity="0.24" d="M673.672 89.4524L1516.78 932.295L679.357 1769.43L109.803 1200.08L377.721 932.268L104.196 658.821L673.672 89.4524Z" stroke="%23A92778" stroke-width="0.5" stroke-miterlimit="10"/><path id="Vector_7" opacity="0.29" d="M673.672 110.092L1496.13 932.295L679.357 1748.79L130.448 1200.08L398.366 932.268L124.841 658.821L673.672 110.092Z" stroke="%23A92778" stroke-width="0.5" stroke-miterlimit="10"/><path id="Vector_8" opacity="0.33" d="M673.672 130.732L1475.49 932.295L679.357 1728.15L151.12 1200.08L419.011 932.269L145.487 658.821L673.672 130.732Z" stroke="%23A92778" stroke-width="0.5" stroke-miterlimit="10"/><path id="Vector_9" opacity="0.38" d="M673.672 151.397L1454.82 932.295L679.357 1707.51L171.765 1200.08L439.657 932.268L166.132 658.821L673.672 151.397Z" stroke="%23A92778" stroke-width="0.5" stroke-miterlimit="10"/><path id="Vector_10" opacity="0.43" d="M673.672 172.037L1434.17 932.295L679.357 1686.84L192.41 1200.08L460.328 932.269L186.777 658.821L673.672 172.037Z" stroke="%23A92778" stroke-width="0.5" stroke-miterlimit="10"/><path id="Vector_11" opacity="0.48" d="M673.672 192.677L1413.52 932.295L679.357 1666.2L213.082 1200.08L480.974 932.269L207.449 658.821L673.672 192.677Z" stroke="%23A92778" stroke-width="0.5" stroke-miterlimit="10"/><path id="Vector_12" opacity="0.52" d="M673.672 213.342L1392.85 932.295L679.357 1645.56L233.727 1200.08L501.619 932.269L228.094 658.821L673.672 213.342Z" stroke="%23A92778" stroke-width="0.5" stroke-miterlimit="10"/><path id="Vector_13" opacity="0.57" d="M673.672 233.981L1372.21 932.294L679.357 1624.92L254.373 1200.08L522.29 932.268L248.74 658.821L673.672 233.981Z" stroke="%23A92778" stroke-width="0.5" stroke-miterlimit="10"/><path id="Vector_14" opacity="0.62" d="M673.672 254.621L1351.56 932.294L679.357 1604.26L275.044 1200.08L542.936 932.268L269.385 658.821L673.672 254.621Z" stroke="%23A92778" stroke-width="0.5" stroke-miterlimit="10"/><path id="Vector_15" opacity="0.67" d="M673.672 275.287L1330.89 932.295L679.357 1583.62L295.69 1200.08L563.581 932.268L290.057 658.821L673.672 275.287Z" stroke="%23A92778" stroke-width="0.5" stroke-miterlimit="10"/><path id="Vector_16" opacity="0.71" d="M673.672 295.927L1310.25 932.295L679.357 1562.98L316.361 1200.08L584.227 932.268L310.702 658.821L673.672 295.927Z" stroke="%23A92778" stroke-width="0.5" stroke-miterlimit="10"/><path id="Vector_17" opacity="0.76" d="M673.672 316.566L1289.57 932.295L679.358 1542.34L337.006 1200.08L604.898 932.295L331.347 658.821L673.672 316.566Z" stroke="%23A92778" stroke-width="0.5" stroke-miterlimit="10"/><path id="Vector_18" opacity="0.81" d="M673.672 337.206L1268.93 932.295L679.357 1521.67L357.652 1200.08L625.543 932.295L351.993 658.821L673.672 337.206Z" stroke="%23A92778" stroke-width="0.5" stroke-miterlimit="10"/><path id="Vector_19" opacity="0.86" d="M673.672 357.871L1248.28 932.295L679.358 1501.03L378.323 1200.08L646.189 932.295L372.664 658.821L673.672 357.871Z" stroke="%23A92778" stroke-width="0.5" stroke-miterlimit="10"/><path id="Vector_20" opacity="0.9" d="M673.672 378.511L1227.61 932.295L679.357 1480.39L398.969 1200.08L666.86 932.295L393.309 658.821L673.672 378.511Z" stroke="%23A92778" stroke-width="0.5" stroke-miterlimit="10"/><path id="Vector_21" opacity="0.95" d="M673.672 399.15L1206.97 932.295L679.357 1459.76L419.614 1200.08L687.506 932.295L413.955 658.821L673.672 399.15Z" stroke="%23A92778" stroke-width="0.5" stroke-miterlimit="10"/><path id="Vector_22" d="M673.672 419.816L1186.32 932.294L679.357 1439.12L440.285 1200.08L708.151 932.294L434.6 658.821L673.672 419.816Z" stroke="%23A92778" stroke-width="0.5" stroke-miterlimit="10"/></g><defs><clipPath id="clip0_0_5"><rect width="1621" height="753" fill="white"/></clipPath></defs></svg>') center bottom/84.427% auto no-repeat;
   color: var(--blue);
   padding-top: 5rem
}

.partners .eyebrow {
   color: var(--magenta)
}

.partners .eyebrow .arrow {
   color: var(--magenta)
}

.partners h2 {
   margin-top: 2.875rem;
   line-height: 1.2
}

.partners h2 .underline {
   text-decoration-color: var(--lime)
}

.partner-card {
   text-align: center;
   margin-top: 4.9375rem
}

.partner-card h3 {
   font-size: 1.875rem;
   color: #000;
   font-weight: 900;
   margin-bottom: 2.75rem
}

.partner-card>a {
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: flex-end;
   gap: 3.25rem;
   background: #fff;
   box-shadow: .4055rem .4055rem 0 var(--lime);
   border: 1px solid #241e6824;
   margin: auto;
   width: 18.35rem;
   height: 14.396rem;
   padding: .625rem 3.3125rem
}

.partner-card img {
   width: 11.6875rem;
   height: auto
}

.partner-card span {
   font-size: .811rem;
   text-decoration: underline;
   text-decoration-color: var(--magenta);
   text-decoration-thickness: 2px
}

.news {
   min-height: 58.8125rem;
   background: var(--magenta);
   padding-top: 5rem
}

.news-heading {
   display: flex;
   justify-content: space-between;
   align-items: center;
   margin-top: 2rem
}

.news-heading h2 {
   line-height: 1.2
}

.all-news {
   display: flex;
   gap: 2rem;
   align-items: center;
   font-size: 1rem;
   font-weight: 700
}

.all-news :is(img, svg.lucide) {
   width: 3.5625rem;
   height: 3.5rem
}

.news-grid {
   display: flex;
   gap: 1.5rem;
   margin-top: 2.5rem;
   overflow-x: auto;
   scroll-snap-type: x mandatory;
   scrollbar-width: thin
}

.news-card {
   flex: 0 0 31.1875rem;
   border-right: 1px solid #ffffff26;
   padding-right: 1.5rem;
   scroll-snap-align: start
}

.news-card>:is(button, a) {
   display: block;
   width: 100%
}

.news-card>:is(button, a) img {
   width: 100%;
   height: 20.0625rem;
   object-fit: cover
}

.news-card h3 {
   font-size: 1.25rem;
   font-weight: 500;
   text-transform: none;
   line-height: 1.25;
   margin-top: .875rem;
   min-height: 3.375rem
}

.news-card h3 :is(button, a) {
   text-align: left
}

.news-card time {
   display: block;
   color: var(--lime);
   font-size: 1rem;
   margin-top: 2.125rem
}

.news-controls {
   display: flex;
   justify-content: space-between;
   margin-top: 3.5rem
}

.social-wall {
   min-height: 66.125rem;
   padding-top: 4.375rem
}

.social-wall h2 {
   text-align: center;
   letter-spacing: -.08rem;
   margin: 2.5625rem 0 4.3125rem
}

.social-grid {
   display: grid;
   grid-template-columns: repeat(5, 1fr);
   gap: 1.625rem
}

.social-card {
   background: var(--blue);
   min-width: 0;
   align-self: start
}

.social-copy {
   height: 11.3125rem;
   padding: 1.1875rem .875rem;
   font-size: .875rem;
   line-height: 1.2;
   overflow: hidden
}

.social-account {
   display: flex;
   gap: .8125rem;
   align-items: center;
   margin-bottom: .8125rem
}

.social-account .avatar {
   width: 2.1875rem;
   height: 2.1875rem;
   border-radius: 50%
}

.social-account>div {
   min-width: 0;
   flex: 1
}

.social-account strong {
   display: block;
   font-size: .875rem;
   white-space: nowrap;
   overflow: hidden;
   font-weight: 500
}

.social-account time {
   display: block;
   font-size: .875rem;
   color: #fff8;
   font-weight: 700;
   margin-top: .125rem
}

.platform {
   width: 1.25rem;
   height: 1.25rem;
   object-fit: contain
}

.social-copy>p {
   font-size: .875rem;
   line-height: 1.214;
   max-height: 5.3125rem;
   overflow: hidden
}

.social-copy>:is(button, a) {
   font-size: .875rem;
   color: #fff8;
   margin-top: .25rem
}

.post-image {
   width: 100%;
   height: 14.25rem;
   object-fit: cover
}

.social-card:nth-child(3) .post-image {
   height: 17rem
}

.post-reactions {
   height: 2rem;
   padding: .25rem
}

.post-reactions img {
   width: 100%;
   height: 1.25rem;
   object-fit: fill
}

/* About */
.about-page {
   background-image:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none" overflow="visible" style="display: block;" width="1709" height="1179" viewBox="0 0 1709 1179" fill="none"><g id="uuid-1e084622-95f6-4752-b598-0492facbb607" clip-path="url(%23clip0_0_203)"><path id="Vector" opacity="0" d="M710.244 0.966962L1708.01 998.9L716.238 1990.78L6.87787 1281.36L289.34 998.872L0.96677 710.441L710.244 0.966962Z" stroke="%23A92778" stroke-width="0.5" stroke-miterlimit="10"/><path id="Vector_2" opacity="0.05" d="M710.244 22.7651L1686.24 998.9L716.238 1969.01L28.6716 1281.36L311.106 998.872L22.7605 710.441L710.244 22.7651Z" stroke="%23A92778" stroke-width="0.5" stroke-miterlimit="10"/><path id="Vector_3" opacity="0.1" d="M710.244 44.5355L1664.47 998.9L716.238 1947.24L50.4377 1281.36L332.9 998.872L44.5266 710.441L710.244 44.5355Z" stroke="%23A92778" stroke-width="0.5" stroke-miterlimit="10"/><path id="Vector_4" opacity="0.14" d="M710.244 66.306L1642.68 998.9L716.238 1925.47L72.2039 1281.36L354.666 998.872L66.2928 710.441L710.244 66.306Z" stroke="%23A92778" stroke-width="0.5" stroke-miterlimit="10"/><path id="Vector_5" opacity="0.19" d="M710.244 88.1041L1620.91 998.9L716.238 1903.7L93.9976 1281.36L376.432 998.872L88.0589 710.441L710.244 88.1041Z" stroke="%23A92778" stroke-width="0.5" stroke-miterlimit="10"/><path id="Vector_6" opacity="0.24" d="M710.244 109.875L1599.12 998.9L716.238 1881.9L115.764 1281.36L398.226 998.872L109.853 710.441L710.244 109.875Z" stroke="%23A92778" stroke-width="0.5" stroke-miterlimit="10"/><path id="Vector_7" opacity="0.29" d="M710.244 131.645L1577.35 998.9L716.238 1860.13L137.53 1281.36L419.992 998.872L131.619 710.441L710.244 131.645Z" stroke="%23A92778" stroke-width="0.5" stroke-miterlimit="10"/><path id="Vector_8" opacity="0.33" d="M710.244 153.415L1555.59 998.9L716.238 1838.36L159.324 1281.36L441.758 998.872L153.385 710.441L710.244 153.415Z" stroke="%23A92778" stroke-width="0.5" stroke-miterlimit="10"/><path id="Vector_9" opacity="0.38" d="M710.244 175.214L1533.79 998.9L716.238 1816.59L181.09 1281.36L463.525 998.872L175.151 710.441L710.244 175.214Z" stroke="%23A92778" stroke-width="0.5" stroke-miterlimit="10"/><path id="Vector_10" opacity="0.43" d="M710.244 196.984L1512.03 998.9L716.238 1794.79L202.856 1281.36L485.318 998.872L196.917 710.441L710.244 196.984Z" stroke="%23A92778" stroke-width="0.5" stroke-miterlimit="10"/><path id="Vector_11" opacity="0.48" d="M710.244 218.755L1490.26 998.9L716.238 1773.02L224.65 1281.36L507.084 998.872L218.711 710.441L710.244 218.755Z" stroke="%23A92778" stroke-width="0.5" stroke-miterlimit="10"/><path id="Vector_12" opacity="0.52" d="M710.244 240.553L1468.47 998.9L716.238 1751.25L246.416 1281.36L528.851 998.872L240.477 710.441L710.244 240.553Z" stroke="%23A92778" stroke-width="0.5" stroke-miterlimit="10"/><path id="Vector_13" opacity="0.57" d="M710.244 262.323L1446.7 998.9L716.238 1729.48L268.182 1281.36L550.644 998.872L262.243 710.441L710.244 262.323Z" stroke="%23A92778" stroke-width="0.5" stroke-miterlimit="10"/><path id="Vector_14" opacity="0.62" d="M710.244 284.094L1424.94 998.9L716.238 1707.68L289.976 1281.36L572.41 998.872L284.009 710.441L710.244 284.094Z" stroke="%23A92778" stroke-width="0.5" stroke-miterlimit="10"/><path id="Vector_15" opacity="0.67" d="M710.244 305.892L1403.14 998.9L716.238 1685.91L311.742 1281.36L594.177 998.872L305.803 710.441L710.244 305.892Z" stroke="%23A92778" stroke-width="0.5" stroke-miterlimit="10"/><path id="Vector_16" opacity="0.71" d="M710.244 327.662L1381.38 998.9L716.238 1664.14L333.535 1281.36L615.943 998.872L327.569 710.441L710.244 327.662Z" stroke="%23A92778" stroke-width="0.5" stroke-miterlimit="10"/><path id="Vector_17" opacity="0.76" d="M710.244 349.433L1359.58 998.9L716.238 1642.37L355.302 1281.36L637.736 998.9L349.335 710.441L710.244 349.433Z" stroke="%23A92778" stroke-width="0.5" stroke-miterlimit="10"/><path id="Vector_18" opacity="0.81" d="M710.244 371.203L1337.82 998.9L716.238 1620.57L377.068 1281.36L659.503 998.9L371.101 710.441L710.244 371.203Z" stroke="%23A92778" stroke-width="0.5" stroke-miterlimit="10"/><path id="Vector_19" opacity="0.86" d="M710.244 393.001L1316.05 998.9L716.238 1598.8L398.861 1281.36L681.269 998.9L392.895 710.441L710.244 393.001Z" stroke="%23A92778" stroke-width="0.5" stroke-miterlimit="10"/><path id="Vector_20" opacity="0.9" d="M710.244 414.772L1294.26 998.9L716.238 1577.03L420.628 1281.36L703.062 998.9L414.661 710.441L710.244 414.772Z" stroke="%23A92778" stroke-width="0.5" stroke-miterlimit="10"/><path id="Vector_21" opacity="0.95" d="M710.244 436.542L1272.49 998.9L716.238 1555.26L442.394 1281.36L724.829 998.9L436.427 710.441L710.244 436.542Z" stroke="%23A92778" stroke-width="0.5" stroke-miterlimit="10"/><path id="Vector_22" d="M710.244 458.34L1250.72 998.9L716.238 1533.49L464.187 1281.36L746.595 998.9L458.194 710.441L710.244 458.34Z" stroke="%23A92778" stroke-width="0.5" stroke-miterlimit="10"/></g><defs><clipPath id="clip0_0_203"><rect width="1709" height="1179" fill="white"/></clipPath></defs></svg>');
   background-size: 89.01vw 61.406vw, 89.01vw 99.167vw;
   background-position: 5.52vw 50.9375vw, 21.77vw 126.406vw;
   background-repeat: no-repeat
}

.about-hero {
   min-height: 46.875rem;
   position: relative;
   isolation: isolate;
   display: flex;
   align-items: center;
   padding: 9.6875rem 10.4167% 3.875rem;
   gap: 5.25rem
}

.about-hero-background {
   position: absolute;
   inset: 0;
   z-index: -1
}

.about-hero-background img {
   position: absolute;
   inset: 0
}

.about-hero-background:after {
   content: '';
   position: absolute;
   inset: 0;
   background: #1b0b5680
}

.about-hero-copy {
   width: 56.1875rem;
   flex: none
}

.about-hero-copy>.eyebrow {
   font-weight: 400;
   margin-bottom: 1.875rem
}

.about-hero-copy>p:last-child {
   font-size: 1.25rem;
   line-height: 1.55;
   margin-top: 1.5rem
}

.about-chevron img {
   width: 25.214rem;
   height: 33.588rem
}

.about-intro {
   min-height: 67.5rem;
   padding-top: 6.8125rem
}

.about-intro-heading {
   text-align: center;
   width: 72.3125rem;
   max-width: 90%;
   margin: auto
}

.about-intro-heading h2 {
   font-size: 4.5rem;
   display: inline-block
}

.about-intro-heading>p {
   font-size: 2rem;
   line-height: 1.28125;
   margin-top: 3.875rem
}

.about-story {
   display: grid;
   grid-template-columns: 51rem 38.5rem;
   gap: 9.9375rem;
   align-items: center;
   margin-top: 4rem
}

.story-image {
   height: 32.3125rem;
   position: relative;
   isolation: isolate
}

.story-image:after {
   content: '';
   position: absolute;
   inset: 4.5625rem -1.6875rem -1.8125rem 0;
   background: var(--magenta);
   z-index: -1
}

.story-image img {
   width: 100%;
   height: 100%;
   object-fit: cover
}

.story-copy {
   font-size: 1.25rem;
   line-height: 1.25
}

.story-copy p {
   line-height: 1.25;
   margin-bottom: 1.25rem
}

.organizations {
   min-height: 111.125rem;
   padding-top: 11.6875rem;
   background: linear-gradient(180deg, #a9277866, transparent 83%)
}

.organization {
   display: grid;
   grid-template-columns: 39rem 46.75rem;
   gap: 9.375rem;
   align-items: center
}

.organization h2 {
   font-size: 4.5rem;
   margin-bottom: 3.125rem;
   white-space: nowrap
}

.organization-copy p {
   font-size: 1.25rem;
   line-height: 1.5;
   margin-bottom: 1.25rem
}

.organization-copy .lead {
   font-size: 1.5rem;
   line-height: 1.3333;
   font-weight: 500
}

.aspire .organization-copy>p:nth-of-type(2) {
   max-width: 31.6875rem
}

.organization .button {
   width: 14.5625rem
}

.organization-logo {
   height: 32.3125rem;
   background: var(--purple);
   box-shadow: -.9375rem .9375rem 0 var(--lime);
   display: flex;
   align-items: center;
   justify-content: center
}

.aspire-logo {
   width: 25.5rem;
   height: auto
}

.adnoc-logo {
   width: 22.6875rem;
   height: auto
}

.organization.adnoc {
   grid-template-columns: 46.75rem 40.875rem;
   gap: 7.5rem;
   margin-top: 6.875rem
}

/* Shared contact and footer */
.site-footer {
   position: relative;
   padding: 0 0 4.375rem 10.4167%
}

.contact-section {
   display: grid;
   grid-template-columns: 40rem 1fr;
   min-height: 35rem;
   gap: 0
}

.contact-copy h2 {
   margin: 3rem 0 0 7.875rem;
   line-height: 1.2
}

.contact-form {
   background: #fff;
   padding: 5rem 8rem 4rem;
   color: var(--purple);
   min-height: 34.75rem;
   display: flex;
   flex-direction: column;
   align-items: flex-start
}

.contact-form>label {
   font-size: .75rem;
   text-transform: uppercase;
   font-weight: 500;
   margin-top: 1.5rem
}

.contact-form>label:first-child {
   margin-top: 0
}

.contact-form input,
.contact-form textarea {
   display: block;
   width: 100%;
   border: 0;
   border-radius: 0;
   border-bottom: 1px solid #1b0b5633;
   padding: .3rem 0 .4rem;
   background: transparent;
   color: var(--purple);
   font-size: 2.25rem;
   font-weight: 700;
   letter-spacing: -.135rem;
   line-height: 1.2;
   resize: vertical
}

.contact-form ::placeholder {
   color: #1b0b5640;
   opacity: 1
}

.contact-form .button {
   margin-top: 3.5rem;
   color: #fff;
   width: 16.5rem
}

.contact-form .form-status {
   font-size: 1rem;
   letter-spacing: 0;
   margin-top: 1rem;
   line-height: 1.5
}

.contact-form .form-status:empty {
   display: none
}

.footer-bottom {
   width: 95rem;
   max-width: 88.372%;
   display: grid;
   grid-template-columns: 1fr 20.125rem 17rem;
   gap: 3rem;
   margin-top: 5.625rem
}

.footer-brand {
   display: flex;
   flex-direction: column;
   justify-content: space-between;
   min-height: 13rem
}

.footer-brand>img {
   width: 17.5rem;
   height: auto
}

.footer-brand small {
   font-size: 1rem;
   line-height: 1.5
}

.footer-nav {
   border-left: 1px solid #ffffff26;
   padding-left: 2rem;
   display: flex;
   flex-direction: column;
   align-items: flex-start;
   gap: .625rem;
   font-size: 1.5rem;
   font-weight: 700;
   letter-spacing: -.06rem
}

.footer-nav a {
   text-decoration: underline;
   text-decoration-color: var(--lime);
   text-decoration-thickness: .135em;
   text-underline-offset: .03em
}

.footer-legal {
   border-left: 1px solid #ffffff26;
   padding-left: 2rem;
   font-size: 1rem
}

.footer-legal>:is(button, a) {
   display: block;
   text-align: left;
   line-height: 1.5
}

.footer-legal p {
   font-weight: 700;
   margin: 1.8rem 0 1rem
}

.social-icons {
   display: flex;
   gap: .5rem
}

.social-icons img {
   width: 1.875rem;
   height: 1.875rem
}

.footer-legal :is(button, a):hover,
.footer-nav a:hover {
   color: var(--lime)
}

/* Accessible frontend dialogs */
dialog {
   background: #fff;
   color: var(--purple);
   width: min(600px, calc(100% - 32px));
   border: 0;
   padding: 40px;
   font-size: 16px;
   box-shadow: -8px 8px 0 var(--lime);
   max-height: 85dvh;
   overflow: auto
}

dialog::backdrop {
   background: #10072bd9;
   backdrop-filter: blur(5px)
}

dialog h2 {
   font-size: 28px;
   line-height: 1.15;
   padding-right: 24px;
   margin: 0 0 20px
}

dialog p {
   margin-bottom: 16px;
   line-height: 1.6
}

dialog .button {
   font-size: 14px;
   min-height: 44px;
   color: #fff
}

dialog .arrow {
   width: 12px;
   height: 16px
}

.dialog-close {
   position: absolute;
   top: 12px;
   right: 18px;
   font-size: 32px
}

.dialog-search {
   width: 100%;
   border: 1px solid #241e6855;
   padding: 12px;
   color: var(--purple);
   font-size: 16px
}

.search-results {
   list-style: none;
   padding: 0
}

.search-results a {
   display: block;
   padding: 12px 0;
   border-bottom: 1px solid #241e6822
}

.search-results a:hover {
   text-decoration: underline
}

dialog .dialog-image {
   width: 100%;
   height: auto;
   margin-bottom: 20px
}

@media(min-width:2400px) {
   body {
      max-width: 2400px;
      margin-inline: auto;
      position: relative
   }
}

@media(max-width:1500px) and (min-width:1001px) {
   .header-tools {
      margin-left: 3rem
   }

   .site-header {
      gap: 2rem
   }

   .site-header nav {
      gap: 1.3rem
   }
}

@media(max-width:1000px) {
   :root {
      font-size: 14px
   }

   .container {
      max-width: none;
      width: calc(100% - 48px)
   }

   h1 {
      font-size: 3.5rem
   }

   h2 {
      font-size: 2.8rem
   }

   .site-header {
      height: 90px;
      padding: 0 24px;
      gap: 16px
   }

   .brand {
      width: 320px
   }

   .menu-toggle {
      display: flex;
      align-items: center;
      gap: 12px;
      margin-left: auto;
      font-size: 14px;
      min-height: 44px
   }

   .site-header nav {
      display: none;
      position: absolute;
      top: 90px;
      left: 0;
      right: 0;
      height: auto;
      background: var(--purple);
      padding: 20px 24px;
      flex-direction: column;
      align-items: stretch;
      gap: 0;
      white-space: normal;
      box-shadow: 0 10px 20px #0005
   }

   .site-header nav.is-open {
      display: flex
   }

   .site-header nav>a,
   .site-header nav>button,
   .nav-dropdown summary {
      padding: 14px 0;
      min-height: 44px;
      text-align: left;
      justify-content: flex-start
   }

   .nav-dropdown {
      height: auto
   }

   .nav-dropdown>div {
      position: static;
      box-shadow: none;
      padding: 0 12px;
      border-left: 2px solid var(--lime)
   }

   .header-tools {
      margin-left: 0;
      gap: 16px
   }

   .language {
      font-size: 12px
   }

   .header-tools .language :is(img, svg.lucide):first-child {
      display: none
   }

   .site-header [aria-current=page]:after {
      display: none
   }

   .eyebrow {
      font-size: .85rem;
      letter-spacing: .2rem;
      gap: 1.8rem
   }

   .indented {
      margin-left: 2.75rem
   }

   .home-hero {
      min-height: 800px
   }

   .hero-copy {
      left: 24px;
      top: 200px;
      width: calc(100% - 48px)
   }

   .hero-copy h1 {
      white-space: normal
   }

   .hero-subtitle {
      font-size: 1.2rem
   }

   .hero-description {
      font-size: 1.1rem;
      max-width: 600px
   }

   .register-card {
      width: 270px;
      top: auto;
      bottom: 95px;
      right: 30px
   }

   .hero-pagination {
      left: 24px;
      right: 24px;
      bottom: 22px
   }

   .hero-pattern {
      inset: 0 0 0 15%
   }

   .overview {
      padding: 60px 24px;
      min-height: 0;
      gap: 40px;
      grid-template-columns: 1fr 1fr
   }

   .overview h2 {
      font-size: 2.4rem;
      white-space: normal
   }

   .overview .indented {
      margin-left: 2.75rem
   }

   .overview-copy p {
      width: auto;
      font-size: 1rem
   }

   .overview-image {
      height: 100%;
      min-height: 350px;
      margin-right: -24px
   }

   .play {
      width: 64px;
      height: 64px
   }

   .participate {
      padding: 55px 24px;
      grid-template-columns: 1fr 1.5fr;
      gap: 40px;
      min-height: 0
   }

   .participate h2 {
      font-size: 2.8rem;
      white-space: normal
   }

   .participate p {
      font-size: 1rem
   }

   .numbers {
      min-height: 0;
      padding-block: 60px
   }

   .numbers h2 {
      font-size: 3rem;
      margin: 35px 0
   }

   .stats-grid {
      gap: 16px
   }

   .stat-card {
      padding: 20px;
      height: 280px
   }

   .stat-card h3 {
      font-size: .9rem;
      margin: 20px 0 50px
   }

   .stat-card>p {
      font-size: 3.5rem
   }

   .partners {
      padding-block: 60px 140px;
      min-height: 0
   }

   .partners h2 {
      font-size: 2.6rem
   }

   .news {
      padding-block: 60px;
      min-height: 0
   }

   .news-grid {
      margin-top: 30px
   }

   .news-card {
      flex-basis: 45%
   }

   .news-card>:is(button, a) img {
      height: auto;
      aspect-ratio: 475/321
   }

   .news-card h3 {
      font-size: 1rem
   }

   .news-card time {
      font-size: .9rem
   }

   .social-wall {
      min-height: 0;
      padding-block: 60px 100px
   }

   .social-grid {
      grid-template-columns: repeat(5, 230px);
      gap: 20px;
      overflow-x: auto;
      padding-bottom: 10px;
      scroll-snap-type: x mandatory
   }

   .social-card {
      scroll-snap-align: start
   }

   .social-copy {
      height: 160px
   }

   .post-image {
      height: 190px
   }

   .social-card:nth-child(3) .post-image {
      height: 220px
   }

   .about-hero {
      padding: 170px 24px 70px;
      min-height: 500px;
      gap: 20px
   }

   .about-hero-copy {
      width: auto;
      flex: 1;
      position: relative;
      z-index: 1
   }

   .about-hero-copy h1 {
      font-size: 3.5rem
   }

   .about-hero-copy>p:last-child {
      font-size: 1.1rem;
      max-width: 500px
   }

   .about-chevron {
      width: 25%;
      flex: none
   }

   .about-chevron img {
      width: 100%;
      height: auto
   }

   .about-intro {
      padding-block: 65px 80px;
      min-height: 0
   }

   .about-intro-heading {
      width: 85%
   }

   .about-intro-heading h2 {
      font-size: 3rem
   }

   .about-intro-heading>p {
      font-size: 1.4rem;
      margin-top: 35px
   }

   .about-story {
      grid-template-columns: 1fr 1fr;
      gap: 45px;
      margin-top: 55px;
      padding-right: 24px
   }

   .story-image {
      height: 370px
   }

   .story-copy {
      font-size: 1rem
   }

   .story-copy p {
      line-height: 1.5;
      margin-bottom: 14px
   }

   .organizations {
      min-height: 0;
      padding-block: 80px 100px
   }

   .organization,
   .organization.adnoc {
      grid-template-columns: 1fr 1fr;
      gap: 50px
   }

   .organization h2 {
      font-size: 2.8rem;
      white-space: normal;
      margin-bottom: 30px
   }

   .organization-copy p {
      font-size: 1rem
   }

   .organization-copy .lead {
      font-size: 1.2rem
   }

   .organization-logo {
      height: 300px
   }

   .aspire-logo {
      width: 70%
   }

   .adnoc-logo {
      width: 65%;
      height: auto
   }

   .organization.adnoc {
      margin-top: 80px
   }

   .site-footer {
      padding: 0 0 40px 24px;
      min-height: 0
   }

   .contact-section {
      grid-template-columns: 1fr 1.5fr;
      min-height: 0
   }

   .contact-copy h2 {
      margin-left: 2.75rem;
      font-size: 2.5rem
   }

   .contact-form {
      padding: 40px;
      min-height: 0
   }

   .contact-form input,
   .contact-form textarea {
      font-size: 1.5rem;
      letter-spacing: -.04rem
   }

   .contact-form label {
      font-size: .7rem
   }

   .contact-form .button {
      margin-top: 30px
   }

   .footer-bottom {
      max-width: none;
      width: calc(100% - 24px);
      grid-template-columns: 1fr 1fr 1fr;
      gap: 24px;
      margin-top: 60px
   }

   .footer-brand>img {
      width: 280px
   }

   .footer-brand small {
      font-size: .75rem
   }

   .footer-nav {
      font-size: 1rem;
      padding-left: 20px
   }

   .footer-legal {
      font-size: .8rem;
      padding-left: 20px
   }

   .social-icons img {
      width: 22px;
      height: 22px
   }

   .social-icons {
      gap: 5px
   }
}

@media(max-width:600px) {
   :root {
      font-size: 16px
   }

   .container {
      width: calc(100% - 40px)
   }

   h1 {
      font-size: 2.6rem
   }

   h2 {
      font-size: 2rem
   }

   .site-header {
      padding: 0 20px;
      height: 80px
   }

   .brand {
      width: 214px
   }

   .site-header nav {
      top: 80px;
      padding-inline: 20px
   }

   .header-tools {
      gap: 10px
   }

   .header-tools .language {
      display: none
   }

   .menu-toggle {
      font-size: 0;
      gap: 0
   }

   .menu-toggle span {
      font-size: 24px
   }

   .header-tools>button:first-child :is(img, svg.lucide) {
      width: 20px;
      height: 20px
   }

   .home-hero {
      min-height: 850px
   }

   .hero-copy {
      left: 20px;
      top: 160px;
      width: calc(100% - 40px)
   }

   .hero-copy h1 {
      font-size: 2.65rem;
      letter-spacing: -.06rem
   }

   .hero-subtitle {
      font-size: .83rem;
      line-height: 1.6
   }

   .hero-description {
      font-size: .95rem;
      line-height: 1.6;
      margin-top: 20px
   }

   .hero-copy>.button {
      margin-top: 24px
   }

   .button {
      font-size: .85rem;
      min-height: 48px;
      padding: 13px 18px;
      gap: 30px
   }

   .register-card {
      left: 28px;
      right: auto;
      bottom: 100px;
      width: calc(100% - 56px);
      max-width: 340px;
      padding: 18px;
      box-shadow: -8px 8px 0 var(--lime)
   }

   .register-card h2 {
      font-size: 1.6rem
   }

   .register-card p:nth-of-type(2) {
      font-size: .75rem
   }

   .register-card .button {
      margin-top: 14px
   }

   .hero-pagination {
      left: 20px;
      right: 20px
   }

   .hero-pagination p {
      font-size: .8rem
   }

   .round,
   .round :is(img, svg.lucide) {
      width: 44px;
      height: 44px
   }

   .overview {
      display: flex;
      flex-direction: column;
      padding: 50px 20px;
      gap: 30px
   }

   .eyebrow {
      font-size: .7rem;
      letter-spacing: .19rem;
      gap: 18px
   }

   .eyebrow .arrow {
      width: 10px;
      height: 14px
   }

   .indented,
   .overview .indented {
      margin-left: 28px
   }

   .overview h2 {
      font-size: 2.1rem;
      margin: 28px 0 20px
   }

   .overview-copy p {
      font-size: .9rem;
      line-height: 1.7
   }

   .discover {
      gap: 18px;
      font-size: .75rem
   }

   .discover>img {
      width: 44px;
      height: 44px
   }

   .overview-image {
      height: 300px;
      min-height: 0;
      margin: 0 -20px 0 8px
   }

   .participate {
      display: block;
      padding: 45px 20px 50px;
      background-position: 40% center
   }

   .participate h2 {
      font-size: 2rem;
      margin-top: 30px
   }

   .participate p {
      font-size: .85rem;
      line-height: 1.7;
      max-width: none;
      margin: 22px 0
   }

   .numbers {
      padding-block: 50px
   }

   .numbers h2 {
      font-size: 2rem;
      margin: 30px 0
   }

   .stats-grid {
      grid-template-columns: repeat(2, 1fr);
      gap: 12px
   }

   .stat-card {
      height: 240px;
      padding: 18px
   }

   .stat-card h3 {
      font-size: .7rem;
      line-height: 1.4;
      margin: 16px 0 35px
   }

   .stat-icon :is(img, svg.lucide) {
      max-width: 30px;
      max-height: 30px
   }

   .stat-icon {
      height: 30px
   }

   .stat-card>p {
      font-size: 2.8rem
   }

   .stat-line img {
      width: 44px;
      height: 5px
   }

   .partners {
      padding-block: 50px 100px;
      background-size: 140% auto
   }

   .partners h2 {
      font-size: 1.85rem;
      line-height: 1.2;
      margin-top: 28px
   }

   .partners h2 br {
      display: none
   }

   .partner-card {
      margin-top: 50px
   }

   .partner-card h3 {
      font-size: 1.2rem;
      margin-bottom: 24px
   }

   .partner-card>a {
      width: 210px;
      height: 170px;
      padding: 15px 30px;
      gap: 28px
   }

   .partner-card img {
      width: 140px
   }

   .news {
      padding-block: 50px
   }

   .news-heading {
      margin-top: 28px;
      align-items: flex-end;
      gap: 14px
   }

   .news-heading h2 {
      font-size: 1.9rem
   }

   .all-news {
      font-size: .7rem;
      gap: 10px;
      flex-direction: column;
      flex: none
   }

   .all-news :is(img, svg.lucide) {
      width: 40px;
      height: 40px
   }

   .news-card {
      flex-basis: 85%;
      padding-right: 16px
   }

   .news-card h3 {
      font-size: .95rem;
      min-height: 0;
      line-height: 1.4
   }

   .news-card time {
      font-size: .8rem;
      margin-top: 20px
   }

   .news-controls {
      margin-top: 30px
   }

   .social-wall {
      padding-block: 50px 80px
   }

   .social-wall h2 {
      font-size: 1.85rem;
      letter-spacing: -.04rem;
      margin: 30px 0
   }

   .social-grid {
      grid-template-columns: repeat(5, 230px)
   }

   .social-copy {
      height: 162px;
      font-size: 12px;
      padding: 14px 12px
   }

   .social-copy>p {
      font-size: 12px;
      max-height: 72px
   }

   .social-account strong,
   .social-account time,
   .social-copy>:is(button, a) {
      font-size: 11px
   }

   .social-account .avatar {
      width: 28px;
      height: 28px
   }

   .platform {
      width: 16px;
      height: 16px
   }

   .post-reactions {
      height: 24px
   }

   .post-reactions img {
      height: 16px
   }

   .about-hero {
      padding: 160px 20px 60px;
      min-height: 490px;
      overflow: hidden
   }

   .about-hero-copy h1 {
      font-size: 2.55rem;
      letter-spacing: -.05rem
   }

   .about-hero-copy>.eyebrow {
      margin-bottom: 24px
   }

   .about-hero-copy>p:last-child {
      font-size: .9rem;
      line-height: 1.6;
      margin-top: 20px
   }

   .about-chevron {
      position: absolute;
      right: -25px;
      top: 120px;
      width: 160px;
      opacity: .45
   }

   .about-intro {
      padding-block: 50px 60px
   }

   .about-intro-heading {
      max-width: none;
      width: calc(100% - 40px)
   }

   .about-intro-heading h2 {
      font-size: 2.2rem
   }

   .about-intro-heading>p {
      font-size: 1.1rem;
      line-height: 1.6;
      margin-top: 28px
   }

   .about-story {
      display: flex;
      flex-direction: column;
      gap: 40px;
      padding-right: 0;
      margin-top: 40px
   }

   .story-image {
      width: calc(100% - 36px);
      height: auto;
      align-self: flex-start;
      margin: 0 auto;
   }

   .story-image:after {
      inset: 40px -12px -12px 0
   }

   .story-copy {
      padding: 0 24px;
      font-size: .9rem
   }

   .story-copy p {
      line-height: 1.65
   }

   .organizations {
      padding-block: 60px 80px
   }

   .organization,
   .organization.adnoc {
      display: flex;
      flex-direction: column;
      gap: 35px
   }

   .organization h2 {
      font-size: 2.25rem;
      margin-bottom: 28px
   }

   .organization-copy p {
      font-size: .9rem;
      line-height: 1.6
   }

   .organization-copy .lead {
      font-size: 1.05rem;
      line-height: 1.5
   }

   .organization-logo {
      width: calc(100% - 10px);
      height: 250px;
      align-self: flex-end;
      box-shadow: -8px 8px 0 var(--lime)
   }

   .organization.adnoc {
      margin-top: 65px
   }

   .adnoc .organization-logo {
      order: 2
   }

   .site-footer {
      padding: 0 0 30px
   }

   .contact-section {
      display: flex;
      flex-direction: column;
      gap: 32px
   }

   .contact-copy {
      padding: 0 20px
   }

   .contact-copy h2 {
      margin: 28px 0 0 28px;
      font-size: 2rem
   }

   .contact-form {
      padding: 36px 28px
   }

   .contact-form input,
   .contact-form textarea {
      font-size: 1.2rem;
      min-height: 44px;
      letter-spacing: -.03rem
   }

   .contact-form label {
      font-size: .65rem;
      margin-top: 20px
   }

   .contact-form .button {
      width: auto;
      margin-top: 26px
   }

   .contact-form .form-status {
      font-size: .85rem
   }

   .footer-bottom {
      width: auto;
      margin: 50px 24px 0;
      grid-template-columns: 1fr 1fr;
      gap: 32px 22px
   }

   .footer-brand {
      grid-column: 1/-1;
      min-height: 0;
      gap: 28px
   }

   .footer-brand>img {
      width: 280px
   }

   .footer-brand small {
      font-size: .65rem
   }

   .footer-nav {
      border-left: 0;
      padding-left: 0;
      font-size: .8rem;
      gap: 12px;
      letter-spacing: 0
   }

   .footer-legal {
      font-size: .62rem;
      padding-left: 18px
   }

   .footer-legal>:is(button, a) {
      line-height: 1.7
   }

   .footer-legal p {
      margin: 24px 0 12px
   }

   .social-icons {
      gap: 5px
   }

   .social-icons img {
      width: 20px;
      height: 20px
   }

   dialog {
      padding: 32px 24px
   }

   dialog h2 {
      font-size: 24px
   }

   .home-page,
   .about-page {
      background-size: 150% auto;
      background-position: center 950px
   }
}

@media(prefers-reduced-motion:reduce) {
   :root {
      scroll-behavior: auto
   }

   *,
   *:before,
   *:after {
      transition: none !important;
      animation: none !important
   }
}

/* Match the Figma header and keep the mobile hero in document flow. */
@media(min-width:1001px) {
   .site-header {
      gap: 11.875rem;
      background: #1b0b5633;
      border-bottom: 1px solid #ffffff2b;
      backdrop-filter: blur(5px)
   }

   .brand {
      width: 20.8125rem
   }

   .site-header nav {
      margin-left: 0;
      gap: 1.875rem
   }

   .header-tools {
      margin-left: auto
   }

   .about-hero {
      padding-top: 9.6rem;
      padding-bottom: 3.6875rem
   }

   .contact-form {
      padding-right: 19.0625rem
   }

   .contact-form>label {
      margin-top: 2.5rem
   }

   .contact-form .button {
      margin-top: 3.75rem
   }

   .contact-form textarea {
      resize: none
   }

   .contact-form {
      height: 34.6875rem;
      min-height: 0
   }

   .contact-section {
      min-height: 34.6875rem
   }

   .footer-bottom {
      margin-top: 5.4375rem
   }

   .footer-brand {
      min-height: 14rem
   }
}

@media(max-width:600px) {
   .home-hero {
      min-height: 0;
      padding: 0 20px 95px
   }

   .hero-copy {
      position: relative;
      left: auto;
      top: auto;
      width: 100%;
      padding-top: 150px
   }

   .register-card {
      position: relative;
      top: auto;
      bottom: auto;
      left: auto;
      right: auto;
      width: calc(100% - 16px);
      max-width: none;
      margin: 40px 8px 30px
   }

   .hero-copy h1 {
      font-size: clamp(2rem, 10.8vw, 2.65rem)
   }
}

@media(min-width:601px) and (max-width:1000px) {
   .home-hero {
      min-height: 900px
   }
}

@media(min-width:1001px) {
   .about-page {
      position: relative;
      isolation: isolate;
      background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none" overflow="visible" style="display: block;" width="1709" height="1179" viewBox="0 0 1709 1179" fill="none"><g id="uuid-1e084622-95f6-4752-b598-0492facbb607" clip-path="url(%23clip0_0_203)"><path id="Vector" opacity="0" d="M710.244 0.966962L1708.01 998.9L716.238 1990.78L6.87787 1281.36L289.34 998.872L0.96677 710.441L710.244 0.966962Z" stroke="%23A92778" stroke-width="0.5" stroke-miterlimit="10"/><path id="Vector_2" opacity="0.05" d="M710.244 22.7651L1686.24 998.9L716.238 1969.01L28.6716 1281.36L311.106 998.872L22.7605 710.441L710.244 22.7651Z" stroke="%23A92778" stroke-width="0.5" stroke-miterlimit="10"/><path id="Vector_3" opacity="0.1" d="M710.244 44.5355L1664.47 998.9L716.238 1947.24L50.4377 1281.36L332.9 998.872L44.5266 710.441L710.244 44.5355Z" stroke="%23A92778" stroke-width="0.5" stroke-miterlimit="10"/><path id="Vector_4" opacity="0.14" d="M710.244 66.306L1642.68 998.9L716.238 1925.47L72.2039 1281.36L354.666 998.872L66.2928 710.441L710.244 66.306Z" stroke="%23A92778" stroke-width="0.5" stroke-miterlimit="10"/><path id="Vector_5" opacity="0.19" d="M710.244 88.1041L1620.91 998.9L716.238 1903.7L93.9976 1281.36L376.432 998.872L88.0589 710.441L710.244 88.1041Z" stroke="%23A92778" stroke-width="0.5" stroke-miterlimit="10"/><path id="Vector_6" opacity="0.24" d="M710.244 109.875L1599.12 998.9L716.238 1881.9L115.764 1281.36L398.226 998.872L109.853 710.441L710.244 109.875Z" stroke="%23A92778" stroke-width="0.5" stroke-miterlimit="10"/><path id="Vector_7" opacity="0.29" d="M710.244 131.645L1577.35 998.9L716.238 1860.13L137.53 1281.36L419.992 998.872L131.619 710.441L710.244 131.645Z" stroke="%23A92778" stroke-width="0.5" stroke-miterlimit="10"/><path id="Vector_8" opacity="0.33" d="M710.244 153.415L1555.59 998.9L716.238 1838.36L159.324 1281.36L441.758 998.872L153.385 710.441L710.244 153.415Z" stroke="%23A92778" stroke-width="0.5" stroke-miterlimit="10"/><path id="Vector_9" opacity="0.38" d="M710.244 175.214L1533.79 998.9L716.238 1816.59L181.09 1281.36L463.525 998.872L175.151 710.441L710.244 175.214Z" stroke="%23A92778" stroke-width="0.5" stroke-miterlimit="10"/><path id="Vector_10" opacity="0.43" d="M710.244 196.984L1512.03 998.9L716.238 1794.79L202.856 1281.36L485.318 998.872L196.917 710.441L710.244 196.984Z" stroke="%23A92778" stroke-width="0.5" stroke-miterlimit="10"/><path id="Vector_11" opacity="0.48" d="M710.244 218.755L1490.26 998.9L716.238 1773.02L224.65 1281.36L507.084 998.872L218.711 710.441L710.244 218.755Z" stroke="%23A92778" stroke-width="0.5" stroke-miterlimit="10"/><path id="Vector_12" opacity="0.52" d="M710.244 240.553L1468.47 998.9L716.238 1751.25L246.416 1281.36L528.851 998.872L240.477 710.441L710.244 240.553Z" stroke="%23A92778" stroke-width="0.5" stroke-miterlimit="10"/><path id="Vector_13" opacity="0.57" d="M710.244 262.323L1446.7 998.9L716.238 1729.48L268.182 1281.36L550.644 998.872L262.243 710.441L710.244 262.323Z" stroke="%23A92778" stroke-width="0.5" stroke-miterlimit="10"/><path id="Vector_14" opacity="0.62" d="M710.244 284.094L1424.94 998.9L716.238 1707.68L289.976 1281.36L572.41 998.872L284.009 710.441L710.244 284.094Z" stroke="%23A92778" stroke-width="0.5" stroke-miterlimit="10"/><path id="Vector_15" opacity="0.67" d="M710.244 305.892L1403.14 998.9L716.238 1685.91L311.742 1281.36L594.177 998.872L305.803 710.441L710.244 305.892Z" stroke="%23A92778" stroke-width="0.5" stroke-miterlimit="10"/><path id="Vector_16" opacity="0.71" d="M710.244 327.662L1381.38 998.9L716.238 1664.14L333.535 1281.36L615.943 998.872L327.569 710.441L710.244 327.662Z" stroke="%23A92778" stroke-width="0.5" stroke-miterlimit="10"/><path id="Vector_17" opacity="0.76" d="M710.244 349.433L1359.58 998.9L716.238 1642.37L355.302 1281.36L637.736 998.9L349.335 710.441L710.244 349.433Z" stroke="%23A92778" stroke-width="0.5" stroke-miterlimit="10"/><path id="Vector_18" opacity="0.81" d="M710.244 371.203L1337.82 998.9L716.238 1620.57L377.068 1281.36L659.503 998.9L371.101 710.441L710.244 371.203Z" stroke="%23A92778" stroke-width="0.5" stroke-miterlimit="10"/><path id="Vector_19" opacity="0.86" d="M710.244 393.001L1316.05 998.9L716.238 1598.8L398.861 1281.36L681.269 998.9L392.895 710.441L710.244 393.001Z" stroke="%23A92778" stroke-width="0.5" stroke-miterlimit="10"/><path id="Vector_20" opacity="0.9" d="M710.244 414.772L1294.26 998.9L716.238 1577.03L420.628 1281.36L703.062 998.9L414.661 710.441L710.244 414.772Z" stroke="%23A92778" stroke-width="0.5" stroke-miterlimit="10"/><path id="Vector_21" opacity="0.95" d="M710.244 436.542L1272.49 998.9L716.238 1555.26L442.394 1281.36L724.829 998.9L436.427 710.441L710.244 436.542Z" stroke="%23A92778" stroke-width="0.5" stroke-miterlimit="10"/><path id="Vector_22" d="M710.244 458.34L1250.72 998.9L716.238 1533.49L464.187 1281.36L746.595 998.9L458.194 710.441L710.244 458.34Z" stroke="%23A92778" stroke-width="0.5" stroke-miterlimit="10"/></g><defs><clipPath id="clip0_0_203"><rect width="1709" height="1179" fill="white"/></clipPath></defs></svg>');
      background-size: 89.01vw 61.406vw;
      background-position: 5.52vw 50.9375vw
   }

   .about-page:before {
      content: '';
      position: absolute;
      z-index: -1;
      pointer-events: none;
      left: 21.77%;
      top: 151.6875rem;
      width: 106.8125rem;
      height: 119rem;
      transform: rotate(180deg);
      background: url('../images/about-Uuid1E08462295F64752B5980492Facbb609.svg') center/contain no-repeat
   }
}

@media(min-width:1001px) {
   .about-page:before {
      left: 0;
      width: 100%;
      background-size: 106.8125rem 119rem;
      background-position: -12.9375rem top
   }
}

/* Figma comparison pass: type rendering, source asset crops, and artboard rhythm. */
body {
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale
}

.social-card:nth-child(1) .post-image,
.social-card:nth-child(2) .post-image {
   height: auto;
   aspect-ratio: 281/181
}

.social-card:nth-child(3) .post-image {
   height: auto;
   aspect-ratio: 281/284
}

.social-card:nth-child(4) .post-image {
   height: auto;
   aspect-ratio: 281/187
}

.social-card:nth-child(5) .post-image {
   height: auto;
   aspect-ratio: 281/264
}

.social-card:nth-child(3) .social-copy {
   height: 9.0625rem
}

.social-card:nth-child(4) .social-copy {
   height: 12.3125rem
}

.social-card:nth-child(5) .social-copy {
   height: 10.1875rem
}

.post-reactions {
   height: 3rem;
   padding: .4056rem .1875rem 0
}

.post-reactions img {
   height: 1.6785rem;
   width: 96.96%;
   object-fit: fill
}

.social-copy {
   font-weight: 500;
   letter-spacing: -.0175rem
}

@media(min-width:1001px) {
   .hero-copy {
      top: 22.3125rem
   }

   .hero-subtitle {
      line-height: normal
   }

   .about-hero-copy {
      transform: translateY(.125rem)
   }

   .site-header {
      gap: 12.5rem
   }

   .nav-dropdown summary :is(img, svg.lucide) {
      width: 1.25rem;
      height: 1.25rem
   }

   .overview-image .play {
      left: 45%;
      top: 52.37%
   }

   .participate h2 {
      min-height: 13.5rem
   }

   .participate .button {
      gap: 4.4375rem
   }

   .eyebrow.center .arrow {
      margin-bottom: -.3125rem
   }

   .numbers h2 {
      line-height: 1.2;
      margin-top: 2.40625rem;
      margin-bottom: 1.2875rem
   }

   .stat-card h3 {
      position: absolute;
      top: 6.6875rem;
      left: 1.9375rem;
      margin: 0
   }

   .stat-card>p {
      position: absolute;
      top: 15.375rem;
      left: 2rem;
      line-height: normal
   }

   .stat-card:first-child>p {
      left: 1.25rem
   }

   .stat-line {
      left: 2rem
   }

   .stat-card:first-child .stat-line {
      left: 1.25rem
   }

   .news-heading {
      margin-top: 1.71875rem
   }

   .news-grid {
      margin-top: 2.03125rem
   }

   .news-controls {
      margin-top: 3rem
   }

   .all-news {
      transform: translateY(.5625rem)
   }

   .social-wall h2 {
      line-height: 1.2;
      margin-top: 3.5rem;
      margin-bottom: 3.6875rem
   }

   .social-grid {
      gap: 1.75rem;
      grid-template-columns: repeat(5, 17.5625rem)
   }

   .about-intro-heading h2 {
      line-height: 1.2
   }

   .about-intro-heading>p {
      margin-top: 4.125rem
   }

   .about-story {
      margin-top: 3.75rem;
      
   }

   .story-copy {
      padding-top: 1rem;
      padding-bottom: 1rem;
   }

   .organization h2 {
      line-height: 1.2
   }

   .organization.adnoc {
      margin-top: 6.875rem
   }

   .contact-copy h2 {
      margin-top: 3.25rem;
      margin-left: 7.5625rem
   }

   .contact-form {
      padding-left: 8.0625rem;
      padding-right: 19.0625rem
   }

   .contact-form input,
   .contact-form textarea {
      padding-top: .15rem;
      padding-bottom: .3rem
   }

   .contact-form .button {
      min-height: 4rem;
      height: 4rem
   }

   .footer-brand>img {
      width: 30.25rem
   }

   .footer-brand {
      min-height: 13.875rem
   }

   .footer-bottom {
      grid-template-columns: 1fr 20.5rem 18.5625rem
   }

   .footer-nav {
      gap: .875rem;
      line-height: 1.25;
      padding-top: .5rem
   }

   .footer-legal {
      padding-top: .125rem
   }

   .footer-legal p {
      margin-top: 2.5rem
   }
}

@media(max-width:600px) {
   .social-card:nth-child(3) .social-copy {
      height: 125px
   }

   .social-card:nth-child(4) .social-copy {
      height: 175px
   }

   .social-card:nth-child(5) .social-copy {
      height: 145px
   }

   .post-reactions {
      height: 36px;
      padding: 5px 3px
   }

   .post-reactions img {
      height: 20px
   }
}

@media(min-width:1001px) {
   .home-hero .hero-subtitle {
      margin-top: .875rem
   }

   .hero-copy>.button {
      margin-top: 2.6875rem
   }

   .about-hero-copy {
      transform: translateY(-.125rem)
   }

   .numbers h2 {
      margin-bottom: 1.2rem
   }

   .social-wall h2 {
      line-height: 1;
      margin-bottom: 3.9375rem
   }

   .social-copy {
      padding-top: 1.1875rem
   }

   .social-card:nth-child(3) .social-copy {
      height: 9.0625rem
   }

   .about-intro-heading h2.underline {
      text-underline-offset: .15em
   }

   .organization.aspire {
      min-height: 35.125rem
   }

   .footer-legal {
      font-weight: 500
   }

   .footer-legal p {
      line-height: 1.1875;
      margin-bottom: .75rem
   }

   .footer-brand small {
      font-weight: 500
   }
}

/* Local Lucide icons; company and social brand logos retain their original ... */
.lucide {
   display: inline-block;
   vertical-align: middle;
   flex-shrink: 0;
   width: 1.5rem;
   height: 1.5rem
}

.button .lucide,
.eyebrow .lucide,
.stat-icon .lucide {
   color: var(--lime)
}

.button .arrow,
.eyebrow .arrow {
   width: 1.25rem;
   height: 1.25rem
}

.stat-icon .lucide {
   width: 2.6rem;
   height: 2.6rem
}

.round .lucide {
   color: var(--lime);
   stroke-width: 1.25
}

.discover>.lucide {
   width: 3.5rem;
   height: 3.5rem;
   color: var(--lime)
}

.all-news>.lucide {
   color: var(--lime)
}

.menu-toggle .lucide {
   width: 22px;
   height: 22px
}

.dialog-close {
   display: grid;
   place-items: center;
   width: 40px;
   height: 40px
}

.dialog-close .lucide {
   width: 24px;
   height: 24px
}

.language .lucide-chevron-down {
   width: .75rem;
   height: .75rem
}

@media(max-width:600px) {
   .stat-icon .lucide {
      width: 30px;
      height: 30px
   }
}

/* Keep Lucide glyphs in the same shared design slots as the Home reference. */
.button .arrow,
.eyebrow .arrow {
   width: .9375rem;
   height: 1.25rem
}

.language svg.lucide:last-child {
   width: .75rem;
   height: .75rem
}

.nav-dropdown summary>.lucide {
   color: var(--lime)
}

/* Allow official news headlines to wrap while keeping date baselines aligned. */
.news-card {
   display: flex;
   flex-direction: column
}

.news-card h3 {
   flex: 1
}

.social-copy>a {
   display: inline-block
}

/* Mobile navigation: a spacious, scrollable panel with explicit open/close state. */
.mobile-menu-intro,
.mobile-menu-footer {
   display: none
}

.menu-symbol {
   display: grid;
   place-items: center
}

.menu-symbol .ui-icon {
   grid-area: 1/1
}

.menu-symbol .ui-x {
   display: none
}

@media(max-width:1000px) {
   html.menu-open {
      overflow: hidden
   }

   .menu-toggle {
      font-size: 13px;
      gap: 10px;
      border: 1px solid #ffffff40;
      border-radius: 4px;
      padding: 0 12px;
      min-height: 44px;
      color: var(--lime);
      position: relative;
      z-index: 2
   }

   .menu-toggle .menu-label {
      font-size: 13px;
      font-weight: 700
   }

   .menu-toggle .menu-symbol {
      font-size: inherit
   }

   .site-header .menu-toggle[aria-expanded=true] {
      background: var(--lime);
      border-color: var(--lime);
      color: var(--purple)
   }

   .menu-toggle[aria-expanded=true] .ui-menu {
      display: none
   }

   .menu-toggle[aria-expanded=true] .ui-x {
      display: block
   }

   html.menu-open .site-header {
      position: fixed;
      background: var(--purple);
      border-bottom: 1px solid #ffffff20;
      z-index: 30
   }

   .site-header #navigation {
      position: fixed;
      inset: 90px 0 0;
      margin: 0;
      height: auto;
      max-height: calc(100dvh - 90px);
      overflow-y: auto;
      overscroll-behavior: contain;
      padding: 30px max(28px, calc((100vw - 620px)/2)) 24px;
      background: var(--purple);
      box-shadow: none;
      gap: 0;
      align-items: stretch
   }

   .mobile-menu-intro {
      display: block;
      margin-bottom: 25px
   }

   .mobile-menu-intro>span {
      font-size: 11px;
      color: var(--lime);
      font-weight: 700;
      letter-spacing: .18em;
      text-transform: uppercase
   }

   .mobile-menu-intro>p {
      font-size: 14px;
      color: #ffffffa8;
      margin-top: 8px
   }

   .site-header #navigation>a,
   .site-header #navigation>.nav-dropdown>summary {
      font-size: clamp(19px, 3.4vw, 26px);
      font-weight: 700;
      line-height: 1.25;
      padding: 18px 0;
      min-height: 62px;
      height: auto;
      border-bottom: 1px solid #ffffff20;
      letter-spacing: -.03em
   }

   .site-header #navigation>a[aria-current=page]:after {
      display: none
   }

   .site-header #navigation>.nav-dropdown {
      height: auto
   }

   .site-header #navigation>.nav-dropdown>summary {
      justify-content: space-between;
      gap: 20px
   }

   .site-header #navigation .nav-dropdown summary>.lucide {
      width: 22px;
      height: 22px;
      flex: none
   }

   .site-header #navigation .nav-dropdown>div {
      border-left: 2px solid var(--lime);
      margin: 14px 0 16px;
      padding: 0 0 0 18px;
      background: transparent;
      min-width: 0
   }

   .site-header #navigation .nav-dropdown>div a {
      font-size: 15px;
      font-weight: 400;
      line-height: 1.5;
      padding: 10px 0;
      min-height: 44px
   }

   .mobile-menu-footer {
      display: block;
      margin-top: auto;
      padding-top: 30px;
      padding-bottom: env(safe-area-inset-bottom, 0px)
   }

   .mobile-menu-footer .button {
      font-size: 14px;
      width: 100%;
      min-height: 50px
   }

   .mobile-menu-footer>p {
      font-size: 11px;
      line-height: 1.65;
      color: #ffffff80;
      margin-top: 18px
   }
}

@media(max-width:600px) {
   .site-header #navigation {
      top: 80px;
      max-height: calc(100dvh - 80px);
      padding: 24px 24px 20px
   }

   .menu-toggle {
      padding: 0 10px;
      gap: 8px
   }

   .site-header .header-tools {
      margin-left: 0
   }
}

@media(max-width:1000px) {
   html.menu-open .header-tools {
      visibility: hidden
   }
}

/* Brand arrows and CTA graphics use the original local Figma SVGs.
   Lucide is reserved for pictograms in statistics/content cards. */
.ui-icon {
   display: inline-block;
   position: relative;
   vertical-align: middle;
   flex: none;
   width: 22px;
   height: 22px
}

.ui-icon:before,
.ui-icon:after {
   content: "";
   position: absolute;
   left: 3px;
   right: 3px;
   top: 10px;
   height: 2px;
   background: currentColor
}

.ui-menu:before {
   top: 6px;
   box-shadow: 0 5px 0 currentColor
}

.ui-menu:after {
   top: 16px
}

.ui-x:before {
   transform: rotate(45deg)
}

.ui-x:after {
   transform: rotate(-45deg)
}

.ui-plus:after {
   transform: rotate(90deg)
}

.ui-minus:after {
   display: none
}

.site-header #navigation .nav-dropdown summary>img {
   width: 20px;
   height: 20px;
   flex: none
}

.ui-plus:before,
.ui-plus:after,
.ui-minus:before {
   top: calc(50% - 1px)
}

.search-hint {
   font-size: .875rem;
   line-height: 1.5;
   margin: 18px 0 4px;
   color: var(--purple)
}

.search-results {
   margin-top: 0
}

/* Contact fields grow naturally as the shared form gains company details. */
.contact-form {
   height: auto
}

.contact-form .field-optional {
   text-transform: none;
   font-weight: 400
}

/* Persistent navigation: keep hero layout unchanged and offset native anchors. */
:root {
   --header-height: 6.875rem;
   scroll-padding-top: var(--header-height)
}

.site-header.is-scrolled {
   background: var(--purple);
   border-bottom: 1px solid #ffffff26;
   backdrop-filter: none;
   box-shadow: 0 6px 24px #10063226
}

@media(max-width:1000px) {
   :root {
      --header-height: 90px
   }
}

@media(max-width:600px) {
   :root {
      --header-height: 80px
   }
}

.nav-dropdown>div>button {
   display: block;
   padding: .8rem;
   width: 100%;
   text-align: left
}

@media(max-width:1000px) {
   .site-header #navigation .nav-dropdown>div>button {
      font-size: 15px;
      font-weight: 400;
      line-height: 1.5;
      padding: 10px 0;
      min-height: 44px
   }
}

/* Client feedback: static homepage banner, without carousel controls. */
@media(max-width:600px) {
   .home-hero {
      padding-bottom: 40px
   }

   .home-hero .register-card {
      margin-bottom: 0
   }
}

/* Homepage client review: Overview and sponsor lead into archive statistics. */
.participate[hidden] {
   display: none
}

.overview-heading {
   display: flex;
   align-items: center;
   gap: 7rem;
   margin-bottom: 2.5rem
}

.overview .overview-heading h2 {
   margin: 0;
   white-space: normal
}

.overview-heading>.arrow {
   flex: none
}

.partner-blurb {
   max-width: 42rem;
   margin: 2rem auto 0;
   font-size: 1.25rem;
   line-height: 1.6;
   text-align: center
}

@media(max-width:1000px) {
   .overview-heading {
      gap: 1.8125rem
   }

   .partner-blurb {
      font-size: 1rem;
      max-width: 36rem
   }
}

@media(max-width:600px) {
   .overview-heading {
      gap: 18px;
      margin-bottom: 24px
   }

   .overview-heading>.arrow {
      width: 10px;
      height: 14px
   }

   .partner-blurb {
      font-size: .95rem;
      margin-top: 28px;
      max-width: 30rem
   }
}

/* Card carousels scroll sideways (swipe, arrows, trackpad, keyboard) and snap per card, with the
   next card peeking in, so the browser scrollbar is redundant chrome. Hide it, keep the scroll. */
.news-grid,
.social-grid {
   scrollbar-width: none;
   -ms-overflow-style: none;
   overscroll-behavior-x: contain
}

.news-grid::-webkit-scrollbar,
.social-grid::-webkit-scrollbar {
   display: none
}

/* Mobile legibility and touch: shared contact form, footer and header tools (every page).
   Minimum 12px text and roughly 44px-tall tap targets. */
@media(max-width:600px) {

   .contact-form>label,
   .contact-form .field-optional {
      font-size: 12px
   }

   .footer-brand small {
      font-size: 12px
   }

   .footer-nav {
      gap: 0
   }

   .footer-nav a {
      padding-block: 14px
   }

   .footer-legal {
      font-size: 14px
   }

   .footer-legal>:is(button, a) {
      padding-block: 12px;
      line-height: 1.4
   }

   .footer-legal p {
      font-size: 12px
   }

   .header-tools>button {
      min-width: 44px;
      min-height: 44px
   }

   /* Social icons: 44px-tall tap areas that still fit five across the 153px footer column. */
   .social-icons {
      gap: 0;
      margin-left: -5px
   }

   .social-icons a {
      display: grid;
      place-items: center;
      width: 30px;
      height: 44px
   }
}

/* Smallest phones (320-360px): logo, menu and search need 358px at the 600px sizing; tighten
   them so the header fits without pushing the search button off-screen. */
@media(max-width:360px) {
   .site-header {
      padding: 0 16px;
      gap: 10px
   }

   .brand {
      width: 130px
   }

   .header-tools {
      gap: 6px
   }
}

/* Phone footer: one column (brand, site links, legal links, social) with horizontal dividers
   between groups instead of the desktop column rules. */
@media(max-width:600px) {
   .footer-bottom {
      grid-template-columns: 1fr;
      gap: 0
   }

   .footer-brand {
      min-height: 0;
      gap: 20px;
      padding-bottom: 24px
   }

   .footer-nav,
   .footer-legal {
      border-left: 0;
      padding-left: 0;
      border-top: 1px solid #ffffff26;
      padding-block: 10px 18px
   }

   .footer-legal p {
      margin: 20px 0 6px
   }
}

/* Phone/tablet header: icons only, search then menu at the right edge. The "Menu"/"Close" word
   stays in the button for screen readers (app.js swaps it) but is visually hidden. */
@media(max-width:1000px) {
   .site-header .header-tools {
      margin-left: auto
   }

   .site-header .menu-toggle {
      margin-left: 4px;
      border: 0;
      border-radius: 0;
      padding: 0;
      width: 44px;
      min-height: 44px;
      justify-content: center;
      background: none;
      color: var(--lime)
   }

   .site-header .menu-toggle[aria-expanded=true] {
      background: none;
      border: 0;
      color: var(--lime)
   }

   .site-header .menu-toggle .menu-label {
      position: absolute;
      width: 1px;
      height: 1px;
      overflow: hidden;
      clip: rect(0 0 0 0);
      clip-path: inset(50%);
      white-space: nowrap
   }
}



/* Homepage overview (desktop): no fixed 48rem min-height and a shorter image, centred against the
   copy, so the empty band under "Discover more" disappears. */
@media(min-width:1001px) {
   .overview {
      min-height: 0;
      padding-block: 5rem;
      align-items: center
   }

   .overview-image {
      height: 30rem
   }
}

/* Partners (redesign): headline on two full lines, then one wide "sponsor plate" aligned to the
   headline's indent - white logo panel + purple info panel, lime offset shadow (brand). The whole
   plate links to adnoc.ae; it lifts and the arrow nudges on hover. The brand diagonal-line pattern
   from the original design stays in the background. */
.partners {
   min-height: 0;
   background-color: #fff;
   background-size: auto 100%;
   background-position: center bottom;
   padding-block: clamp(4rem, 7vw, 7rem)
}

.partners h2 {
   text-wrap: balance
}

.sponsor-plate {
   display: grid;
   grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
   margin: clamp(2.5rem, 4vw, 3.75rem) 0 0 7.875rem;
   max-width: 64rem;
   border: 1px solid #241e6824;
   box-shadow: .9rem .9rem 0 var(--lime);
   background: #fff;
   color: #fff;
   transition: transform .55s var(--motion-ease), box-shadow .55s var(--motion-ease)
}

.sponsor-logo {
   display: grid;
   place-items: center;
   padding: clamp(1.75rem, 3vw, 3rem);
   min-height: 14rem
}

.sponsor-logo img {
   width: min(100%, 17rem);
   height: auto
}

.sponsor-info {
   display: flex;
   flex-direction: column;
   justify-content: center;
   gap: 1rem;
   background: var(--purple);
   padding: clamp(1.75rem, 3vw, 3rem) clamp(1.75rem, 3.2vw, 3.25rem)
}

.sponsor-info h3 {
   font-size: var(--type-overline-size, 1.125rem);
   letter-spacing: var(--type-overline-tracking, .3em);
   font-weight: 700;
   color: var(--lime);
   margin: 0
}

.sponsor-info .partner-blurb {
   margin: 0;
   max-width: 30rem;
   text-align: left;
   color: #fff;
   line-height: 1.55
}

.sponsor-link {
   display: inline-flex;
   align-items: center;
   gap: .75rem;
   margin-top: .5rem;
   font-weight: 700;
   font-size: 1rem;
   text-decoration: underline;
   text-decoration-color: var(--magenta);
   text-decoration-thickness: 2px;
   text-underline-offset: .3em
}

.sponsor-link .arrow {
   transition: transform .5s var(--motion-ease)
}

@media(hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference) {
   .sponsor-plate:hover {
      transform: translate(-4px, -4px);
      box-shadow: 1.25rem 1.25rem 0 var(--lime)
   }

   .sponsor-plate:hover .sponsor-link .arrow {
      transform: translateX(6px)
   }
}

.sponsor-plate:focus-visible {
   outline: 3px solid var(--magenta);
   outline-offset: 6px
}

@media(max-width:1000px) {
   .sponsor-plate {
      margin-left: 0;
      max-width: none
   }
}

@media(max-width:600px) {
   .sponsor-plate {
      grid-template-columns: 1fr;
      box-shadow: .55rem .55rem 0 var(--lime)
   }

   .sponsor-logo {
      min-height: 0;
      padding: 28px 24px
   }

   .sponsor-logo img {
      width: min(100%, 220px)
   }

   .sponsor-info {
      padding: 24px
   }
}

/* Desktop header: logo | nav centred | search, regardless of how many nav items are shown. */
@media(min-width:1001px) {
   .site-header {
      display: grid;
      grid-template-columns: 1fr auto 1fr;
      gap: 2rem
   }

   .site-header .brand {
      justify-self: start
   }

   .site-header nav {
      margin-left: 0;
      justify-self: center
   }

   .site-header .header-tools {
      margin-left: 0;
      justify-self: end
   }

   .site-header .menu-toggle {
      display: none
   }
}

/* Partners header: centred, brand purple on the white section (client, 21 Oct 2026). */
.partners h2.lime {
   color: var(--purple);
   text-align: center;
   margin-inline: auto
}

.partners .sponsor-plate {
   margin-inline: auto
}

/* Partners: tighter vertical rhythm (client, 21 Oct 2026). */
.partners {
   padding-block: clamp(2.5rem, 4.5vw, 4.5rem)
}

.partners h2 {
   margin-top: 0
}

/* Social wall: Elfsight feed replaces the hand-built cards (client, 21 Oct 2026). */
.social-wall {
   min-height: 0
}

.social-embed {
   margin-top: 2.5rem
}

/* Contact: the left column starts level with the form's first label instead of touching the top edge. */
@media(min-width:1001px) {
   .contact-section .contact-copy {
      padding-top: 5rem
   }
}

@media(max-width:1000px) {
   .contact-section .contact-copy {
      padding-top: 3rem
   }
}

@media(max-width:600px) {
   .contact-section .contact-copy {
      padding-top: 2.25rem
   }
}

/* Partners: arrow above the heading with the same breathing room as "Our Numbers". */
.partners .eyebrow.center {
   margin-bottom: 1.25rem
}

/* First fold: the home hero is exactly one screen tall at every size (100svh = the visible area on phones). */
.home-hero {
   min-height: 100vh;
   min-height: 100svh
}

@media(min-width:1001px) {
   .home-hero {
      display: flex;
      align-items: center;
      padding-top: 5.5rem
   }

   .home-hero .hero-copy {
      position: relative;
      top: auto;
      left: auto;
      margin-left: 10.4167%;
      width: min(53rem, 60%)
   }

   .home-hero .register-card {
      top: auto;
      bottom: clamp(2.5rem, 12vh, 9rem)
   }
}

@media(max-width:1000px) {
   .home-hero {
      min-height: max(100vh, 850px);
      min-height: max(100svh, 850px)
   }
}

@media(max-width:600px) {
   .home-hero {
      min-height: 100svh;
      display: flex;
      flex-direction: column;
      justify-content: center
   }

   .home-hero .hero-copy {
      padding-top: 110px
   }
}

/* Arrow above "Our Partner": magenta (lime is too faint on the white section). Same shape, drawn as a mask. */
.partners .arrow-mark {
   display: block;
   width: .9375rem;
   height: 1.25rem;
   background: var(--magenta);
   -webkit-mask: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none" overflow="visible" style="display: block;" width="15" height="20" viewBox="0 0 15 20" fill="none"><path id="Vector" d="M4.77102 0L15 10.056L4.88394 20L0.113446 15.3104L5.45849 10.056L0 4.6901L4.77102 0Z" fill="%23C8FF24"/></svg>') center/contain no-repeat;
   mask: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none" overflow="visible" style="display: block;" width="15" height="20" viewBox="0 0 15 20" fill="none"><path id="Vector" d="M4.77102 0L15 10.056L4.88394 20L0.113446 15.3104L5.45849 10.056L0 4.6901L4.77102 0Z" fill="%23C8FF24"/></svg>') center/contain no-repeat
}