:root {
--navy: #0a1d3d;
--gold: #d4af37;
--white: #fff;
--gray: #f2f2f2;
--ink: #152641;
--muted: #526178;
--line: #dde2e9;
--radius: 16px;
--header-offset: 110px;
color-scheme: light;
}
* {
box-sizing: border-box;
}
html {
scroll-behavior: smooth;
scroll-padding-top: var(--header-offset);
}
body {
margin: 0;
font-family: Arial, Helvetica, sans-serif;
color: var(--ink);
background: var(--white);
font-size: 16px;
line-height: 1.65;
}
img {
display: block;
max-width: 100%;
height: auto;
}
button,
input,
select,
textarea {
font: inherit;
}
button,
a,
input,
select,
textarea {
-webkit-tap-highlight-color: transparent;
}
a {
color: inherit;
text-decoration: none;
}
button {
cursor: pointer;
}
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex="-1"]:focus-visible {
outline: 3px solid #3275bf;
outline-offset: 5px;
}
.dark :focus-visible,
.hero :focus-visible,
.nav :focus-visible,
.footer :focus-visible {
outline-color: #f4d977;
}
h1,
h2,
h3,
p {
margin: 0;
}
h1,
h2,
h3 {
line-height: 1.15;
letter-spacing: -0.035em;
}
h1 {
font-size: clamp(2.65rem, 4vw, 4.1rem);
font-weight: 750;
}
h1 em {
font-style: normal;
color: var(--gold);
}
h2 {
font-size: clamp(2rem, 3.3vw, 3.2rem);
font-weight: 700;
}
h2 span {
color: #947418;
}
.dark h2 span,
.hero h2 span,
.contact h2 span {
color: var(--gold);
}
h3 {
font-size: 1.22rem;
letter-spacing: -0.02em;
}
p {
margin-top: 18px;
}
p,
.smallnote {
overflow-wrap: break-word;
}
.container {
width: min(1240px, calc(100% - 96px));
margin: auto;
}
.section {
padding: 100px 0;
scroll-margin-top: 16px;
}
.white {
background: #fff;
}
.cream {
background: var(--gray);
}
.dark {
background: var(--navy);
color: var(--white);
}
.kicker {
font-size: 0.73rem;
letter-spacing: 0.17em;
font-weight: 700;
color: #806619;
margin-bottom: 22px;
}
.dark .kicker {
color: var(--gold);
}
.lead {
font-size: 1.12rem;
line-height: 1.85;
color: var(--muted);
}
.skip-link {
position: fixed;
top: 8px;
left: 16px;
z-index: 100;
transform: translateY(-160%);
padding: 12px 18px;
color: var(--navy);
background: #fff;
border: 2px solid var(--gold);
}
.skip-link:focus {
transform: translateY(0);
}
.topline {
background: #06152c;
color: #cbd3df;
padding: 10px 48px;
display: flex;
justify-content: space-between;
font-size: 0.64rem;
letter-spacing: 0.14em;
}
.topline span:first-child {
color: var(--gold);
font-weight: 700;
}
.nav {
position: sticky;
top: 0;
z-index: 50;
background: var(--navy);
padding: 18px max(24px, calc((100vw - 1240px) / 2));
display: flex;
align-items: center;
gap: 26px;
border-bottom: 1px solid #ffffff16;
}
.brand {
flex: 0 0 252px;
}
.brand img {
width: 252px;
border-radius: 7px;
}
.nav nav {
display: flex;
align-items: center;
justify-content: flex-end;
gap: 20px;
flex: 1;
}
.nav nav a {
font-size: 0.75rem;
color: #e1e6ee;
white-space: nowrap;
padding: 8px 0;
}
.nav nav a:hover {
color: var(--gold);
}
.nav nav .navcta {
border: 1px solid #d4af3770;
border-radius: 5px;
padding: 9px 13px;
color: var(--gold);
}
.menu {
display: none;
border: 1px solid #ffffff55;
color: #fff;
background: transparent;
padding: 8px 12px;
border-radius: 5px;
font-size: 1.4rem;
line-height: 1.2;
}
.hero {
position: relative;
overflow: hidden;
background: var(--navy);
color: #fff;
padding: 92px 0 84px;
}
.hero-glow {
position: absolute;
inset: 0;
background: radial-gradient(ellipse at 85% 40%, #16365b 0, transparent 60%);
pointer-events: none;
}
.hero-grid {
position: relative;
display: grid;
grid-template-columns: 1.15fr 1fr;
gap: 54px;
align-items: center;
}
.eyebrow {
font-size: 0.66rem;
letter-spacing: 0.14em;
color: #d9c680;
margin-bottom: 25px;
display: flex;
align-items: center;
gap: 10px;
}
.dot {
width: 7px;
height: 7px;
border-radius: 50%;
background: var(--gold);
box-shadow: 0 0 0 5px #d4af3718;
}
.hero-copy > p {
color: #c5cedd;
max-width: 540px;
font-size: 1.07rem;
line-height: 1.85;
margin-top: 27px;
}
.actions {
display: flex;
gap: 14px;
flex-wrap: wrap;
margin-top: 32px;
}
.btn {
display: inline-flex;
align-items: center;
justify-content: space-between;
gap: 24px;
border: 1px solid transparent;
border-radius: 5px;
padding: 14px 20px;
font-size: 0.85rem;
font-weight: 700;
line-height: 1.5;
min-height: 48px;
transition:
background 0.18s,
transform 0.18s;
}
.btn:hover {
transform: translateY(-2px);
}
.btn span {
font-size: 1.1rem;
}
.gold {
background: var(--gold);
color: var(--navy);
}
.gold:hover {
background: #e5c45b;
}
.outline {
border-color: #ffffff50;
color: #fff;
}
.outline:hover {
background: #ffffff0d;
}
.hero-proof {
display: flex;
flex-wrap: wrap;
gap: 14px 18px;
margin-top: 44px;
border-top: 1px solid #ffffff20;
padding-top: 22px;
font-size: 0.55rem;
letter-spacing: 0.08em;
color: #bcc7d7;
}
.hero-art {
position: relative;
min-height: 430px;
display: flex;
align-items: center;
justify-content: center;
}
.orbit {
position: absolute;
border: 1px solid #d4af3738;
border-radius: 50%;
width: 390px;
height: 390px;
}
.orbit1 {
transform: rotate(-30deg) scaleX(0.85);
}
.orbit2 {
width: 310px;
height: 310px;
border-style: dashed;
transform: rotate(25deg);
}
.africa {
position: absolute;
top: 65px;
left: 50%;
transform: translateX(-50%);
letter-spacing: 0.4em;
font-size: 2.3rem;
font-weight: 800;
color: #d4af3740;
}
.hero-art:before,
.hero-art:after {
content: "";
position: absolute;
width: 9px;
height: 9px;
border-radius: 50%;
background: var(--gold);
box-shadow: 0 0 20px #d4af3760;
}
.hero-art:before {
top: 52px;
left: 32%;
}
.hero-art:after {
bottom: 72px;
right: 13%;
}
.hero-panel {
position: relative;
background: linear-gradient(140deg, #193554, #0c203e);
border: 1px solid #d4af3750;
border-radius: 18px;
padding: 36px 32px;
box-shadow: 0 24px 80px #0004;
width: 90%;
}
.hero-panel > span {
font-size: 0.62rem;
letter-spacing: 0.19em;
color: var(--gold);
}
.hero-panel strong {
display: block;
font-size: 1.9rem;
line-height: 1.3;
margin: 19px 0 24px;
letter-spacing: -0.03em;
}
.hero-panel small {
display: block;
font-size: 0.7rem;
color: #c2cfdf;
border-top: 1px solid #ffffff20;
padding-top: 20px;
}
.floating {
position: absolute;
background: #102b49;
border: 1px solid #ffffff24;
border-radius: 8px;
padding: 12px 17px;
font-size: 0.75rem;
color: #e6dba7;
box-shadow: 0 12px 25px #0003;
}
.floating.one {
top: 38px;
right: -8px;
}
.floating.two {
bottom: 31px;
left: -8px;
}
.trust {
background: #f7f8fa;
border-bottom: 1px solid var(--line);
padding: 28px 0;
}
.trust-grid {
display: grid;
grid-template-columns: 0.8fr 1.5fr 0.9fr 1fr;
gap: 25px;
}
.trust-grid > div + div {
border-left: 1px solid var(--line);
padding-left: 25px;
}
.trust b {
display: block;
font-size: 0.65rem;
letter-spacing: 0.11em;
margin-bottom: 5px;
}
.trust span {
font-size: 0.73rem;
color: var(--muted);
}
.two-col {
display: grid;
grid-template-columns: 1fr 1.15fr;
gap: 75px;
align-items: start;
}
.text-link {
display: inline-block;
color: #806619;
font-weight: 700;
font-size: 0.87rem;
margin-top: 25px;
border-bottom: 1px solid #d4af3780;
padding-bottom: 4px;
}
.mission-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 22px;
}
.mission-grid article {
padding: 25px;
border: 1px solid var(--line);
border-radius: var(--radius);
}
.mini-icon {
color: #806619;
font-size: 1.6rem;
margin-bottom: 18px;
}
.mission-grid p {
color: var(--muted);
font-size: 0.88rem;
margin-top: 12px;
}
.section-head {
display: flex;
align-items: end;
justify-content: space-between;
gap: 70px;
margin-bottom: 42px;
}
.section-head > p {
max-width: 470px;
font-size: 0.95rem;
color: #c6d0de;
margin-top: 0;
}
.lighthead > p {
color: var(--muted);
}
.tech-flow {
display: grid;
grid-template-columns: 1fr 24px 1fr 24px 1fr 24px 1fr;
align-items: center;
gap: 14px;
}
.tech-card {
position: relative;
padding: 30px 24px;
background: #ffffff05;
border: 1px solid #ffffff20;
border-radius: var(--radius);
min-height: 255px;
height: 100%;
}
.tech-num {
position: absolute;
right: 20px;
top: 20px;
color: #8f9fb4;
font-size: 0.7rem;
}
.tech-icon {
color: var(--gold);
font-size: 2rem;
margin-bottom: 24px;
}
.tech-card p {
font-size: 0.88rem;
color: #c6d0de;
margin-top: 14px;
}
.arrow {
color: var(--gold);
font-size: 1.5rem;
text-align: center;
}
.tech-bottom {
display: grid;
grid-template-columns: repeat(3, 1fr);
padding: 25px 0;
margin-top: 30px;
border-top: 1px solid #ffffff25;
border-bottom: 1px solid #ffffff25;
}
.tech-bottom > div {
text-align: center;
}
.tech-bottom > div + div {
border-left: 1px solid #ffffff25;
}
.tech-bottom strong,
.tech-bottom span {
display: block;
}
.tech-bottom strong {
font-size: 0.88rem;
}
.tech-bottom span {
font-size: 0.76rem;
color: #becbdb;
margin-top: 5px;
}
.disclaimer {
font-size: 0.76rem;
color: #b9c6d7;
max-width: 860px;
line-height: 1.8;
margin-top: 23px;
}
.impact-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 22px;
}
.impact-card {
background: #fff;
border: 1px solid var(--line);
border-radius: var(--radius);
overflow: hidden;
display: flex;
flex-direction: column;
}
.impact-visual {
height: 140px;
display: grid;
place-items: center;
font-size: 3.1rem;
color: #d6b94e;
background: radial-gradient(circle at 50% 50%, #254866, var(--navy));
position: relative;
}
.impact-visual:after {
content: "";
position: absolute;
width: 90px;
height: 90px;
border: 1px solid #ffffff25;
border-radius: 50%;
}
.animal {
background: radial-gradient(circle, #35544a, #163530);
}
.plant {
background: radial-gradient(circle, #4e6348, #263b2b);
}
.environment {
background: radial-gradient(circle, #365969, #193442);
}
.impact-content {
padding: 26px 22px;
display: flex;
flex-direction: column;
flex: 1;
}
.impact-content > span {
font-size: 0.58rem;
letter-spacing: 0.12em;
color: #806619;
font-weight: 700;
}
.impact-content h3 {
margin-top: 13px;
}
.impact-content p {
font-size: 0.86rem;
color: var(--muted);
margin: 15px 0 22px;
}
.impact-content button {
background: none;
border: 0;
border-top: 1px solid var(--line);
color: #755b12;
text-align: left;
font-weight: 700;
font-size: 0.77rem;
line-height: 1.7;
padding: 16px 0 0;
margin-top: auto;
min-height: 44px;
}
.impact-content button:hover {
text-decoration: underline;
}
.network-layout {
display: grid;
grid-template-columns: 1fr 1.2fr;
gap: 80px;
align-items: center;
}
.network-center {
display: grid;
place-items: center;
min-height: 365px;
background: radial-gradient(circle, #d4af370c 0, transparent 65%);
}
.ring {
border: 1px solid #d4af3780;
border-radius: 50%;
width: 270px;
height: 270px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
background: var(--navy);
box-shadow:
0 0 0 20px #d4af3709,
0 0 0 21px #d4af3730,
0 0 0 49px #d4af3705,
0 0 0 50px #d4af3720;
}
.ring strong {
font-size: 1.8rem;
line-height: 1.2;
color: var(--gold);
letter-spacing: 0.04em;
}
.ring span {
font-size: 0.51rem;
letter-spacing: 0.15em;
color: #d7dfeb;
margin-top: 18px;
}
.network-list > div {
display: grid;
grid-template-columns: 34px 1fr;
gap: 3px 16px;
padding: 17px 0;
border-bottom: 1px solid var(--line);
}
.network-list b {
grid-row: span 2;
color: #92721b;
font-size: 0.8rem;
padding-top: 3px;
}
.network-list strong {
font-size: 0.95rem;
}
.network-list p {
font-size: 0.85rem;
color: var(--muted);
margin: 0;
}
.country-strip {
border-top: 1px solid var(--line);
margin-top: 45px;
padding-top: 30px;
}
.country-strip > span {
font-size: 0.64rem;
letter-spacing: 0.15em;
font-weight: 700;
color: #806619;
}
.country-strip > div {
font-weight: 700;
font-size: 1.15rem;
margin: 12px 0;
}
.country-strip i {
font-style: normal;
color: #967519;
margin: 0 16px;
}
.country-strip small {
color: var(--muted);
font-size: 0.82rem;
display: block;
max-width: 900px;
}
.country-strip small + small {
margin-top: 10px;
}
.road-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 30px;
margin-top: 45px;
}
.road-grid article {
border-top: 2px solid #d4af3760;
padding-top: 24px;
}
.road-grid article > span {
color: var(--gold);
font-size: 0.61rem;
letter-spacing: 0.14em;
}
.road-grid h3 {
margin-top: 18px;
}
.road-grid p {
color: #c5cfde;
font-size: 0.88rem;
margin-top: 13px;
}
.roadnote {
border-top: 1px solid #ffffff20;
margin-top: 36px;
padding-top: 24px;
color: #c4cddd;
font-size: 0.82rem;
}
.event {
background: #f5f3ed;
}
.event-grid {
display: grid;
grid-template-columns: 1.1fr 1fr;
gap: 90px;
align-items: center;
}
.event-details {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 24px;
margin: 30px 0;
}
.event-details b {
font-size: 0.61rem;
letter-spacing: 0.13em;
color: #755f1e;
display: block;
}
.event-details strong {
font-size: 0.88rem;
display: block;
margin-top: 7px;
}
.smallnote {
font-size: 0.77rem;
color: var(--muted);
line-height: 1.8;
}
.event-poster {
background: var(--navy);
color: #fff;
padding: 40px;
border: 1px solid #d4af3770;
border-radius: var(--radius);
box-shadow: 0 20px 40px #0a1d3d15;
}
.poster-top {
font-size: 2.6rem;
font-weight: 800;
line-height: 1.1;
letter-spacing: -0.04em;
}
.poster-orbit {
height: 160px;
display: grid;
place-items: center;
font-size: 5rem;
color: var(--gold);
background: radial-gradient(circle, #d4af3712, transparent 65%);
}
.poster-text {
font-size: 1rem;
color: #d8e0eb;
padding-bottom: 30px;
}
.poster-foot {
border-top: 1px solid #ffffff25;
padding-top: 22px;
font-size: 0.64rem;
letter-spacing: 0.12em;
display: flex;
align-items: center;
justify-content: space-between;
gap: 14px;
}
.poster-foot span {
color: var(--gold);
}
.contact {
background: var(--navy);
color: #fff;
}
.contact .kicker {
color: var(--gold);
}
.contact-grid {
display: grid;
grid-template-columns: 0.9fr 1.1fr;
gap: 90px;
align-items: start;
}
.contact .lead {
color: #c5cfde;
}
.contact-points {
margin-top: 30px;
color: #d8e0eb;
font-size: 0.88rem;
}
.contact-points > div {
padding: 11px 0;
border-bottom: 1px solid #ffffff18;
}
.contact-form {
background: #fff;
color: var(--ink);
border-radius: var(--radius);
padding: 32px;
box-shadow: 0 18px 60px #0002;
}
.form-head {
border-bottom: 1px solid var(--line);
padding-bottom: 22px;
margin-bottom: 23px;
}
.form-head strong,
.form-head span {
display: block;
}
.form-head strong {
font-size: 1.15rem;
}
.form-head span {
font-size: 0.76rem;
color: var(--muted);
margin-top: 5px;
}
.fields {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 19px 16px;
}
.fields label {
font-size: 0.76rem;
font-weight: 700;
}
.wide {
grid-column: 1/-1;
}
input,
select,
textarea {
display: block;
width: 100%;
margin-top: 7px;
border: 1px solid #b8c2d0;
border-radius: 5px;
background: #fbfcfd;
padding: 11px 12px;
font-weight: 400;
font-size: 0.88rem;
color: var(--ink);
min-height: 46px;
}
textarea {
resize: vertical;
min-height: 115px;
}
input::placeholder,
textarea::placeholder {
color: #677487;
}
input:user-invalid {
border-color: #b12828;
}
.submit {
width: 100%;
margin-top: 23px;
}
.privacy {
font-size: 0.75rem;
color: var(--muted);
line-height: 1.7;
margin-top: 14px;
}
.form-feedback:empty {
display: none;
}
.form-feedback {
padding: 14px;
margin-top: 17px;
border: 1px solid #b0c8b9;
background: #f1f7f3;
border-radius: 5px;
font-size: 0.85rem;
color: #21452e;
}
.contact-form:has(button[disabled]) .privacy {
color: var(--muted);
}
.footer {
background: #06152c;
color: #d0d9e6;
padding: 45px 0 22px;
}
.footer-grid {
display: grid;
grid-template-columns: 2fr 1fr 1fr;
gap: 70px;
}
.footer img {
width: 280px;
}
.footer p {
font-size: 0.76rem;
color: #bac7d8;
}
.footer strong {
display: block;
color: var(--gold);
font-size: 0.63rem;
letter-spacing: 0.15em;
margin-bottom: 16px;
}
.footer a {
display: block;
font-size: 0.8rem;
padding: 5px 0;
width: fit-content;
}
.footer a:hover {
color: var(--gold);
}
.footer-bottom {
margin-top: 35px;
border-top: 1px solid #ffffff20;
padding-top: 20px;
display: flex;
justify-content: space-between;
gap: 30px;
font-size: 0.65rem;
color: #aab9ce;
}
.ownership {
font-size: 0.9rem;
color: var(--muted);
line-height: 1.8;
}
.partnership-intro {
color: #c5cfde;
max-width: 760px;
}
.partnership-cta {
margin-top: 24px;
}
button:disabled {
cursor: not-allowed;
opacity: 0.65;
}
@media (min-width: 1800px) {
.nav {
padding-left: calc((100vw - 1240px) / 2);
padding-right: calc((100vw - 1240px) / 2);
}
}
@media (max-width: 1190px) {
.container {
width: calc(100% - 64px);
}
.nav {
padding: 16px 32px;
gap: 20px;
}
.brand {
flex-basis: 220px;
}
.brand img {
width: 220px;
}
.nav nav {
gap: 12px;
}
.nav nav a {
font-size: 0.68rem;
}
.hero-grid {
gap: 30px;
}
.hero-panel {
padding: 30px 24px;
}
.hero-panel strong {
font-size: 1.7rem;
}
.hero-art .orbit {
max-width: 95%;
}
.two-col,
.event-grid,
.contact-grid {
gap: 45px;
}
.impact-grid {
gap: 16px;
}
.impact-content {
padding: 23px 18px;
}
.tech-card {
padding: 25px 18px;
}
.network-layout {
gap: 45px;
}
.country-strip i {
margin: 0 10px;
}
}
@media (max-width: 1020px) {
:root {
--header-offset: 100px;
}
.nav {
flex-wrap: wrap;
justify-content: space-between;
gap: 0;
}
.js .menu {
display: block;
}
.nav nav {
flex-basis: 100%;
flex-wrap: wrap;
justify-content: flex-start;
gap: 4px 20px;
padding-top: 16px;
}
.nav nav a {
font-size: 0.85rem;
padding: 10px 0;
}
.js .nav nav {
display: none;
}
.js .nav nav.is-open {
display: flex;
}
.hero {
padding: 65px 0;
}
.hero-grid {
grid-template-columns: 1.2fr 1fr;
gap: 20px;
}
.hero-art {
min-height: 350px;
}
.hero-panel strong {
font-size: 1.5rem;
}
.hero-panel small {
font-size: 0.65rem;
}
.floating {
font-size: 0.64rem;
padding: 10px;
}
.floating.one {
right: 0;
top: 0;
}
.floating.two {
left: 0;
bottom: 0;
}
.orbit {
width: 300px;
height: 300px;
}
.orbit2 {
width: 250px;
height: 250px;
}
.africa {
top: 45px;
font-size: 1.8rem;
}
.hero-proof {
font-size: 0.5rem;
gap: 10px;
}
.section {
padding: 75px 0;
}
.trust-grid {
grid-template-columns: 1fr 1fr;
gap: 20px;
}
.trust-grid > div + div {
padding-left: 0;
border: 0;
}
.trust-grid > div:nth-child(even) {
border-left: 1px solid var(--line);
padding-left: 25px;
}
.two-col {
grid-template-columns: 1fr;
gap: 35px;
}
.two-col > div:first-child {
max-width: 680px;
}
.section-head {
gap: 35px;
align-items: start;
}
.section-head > p {
max-width: 360px;
}
.tech-flow {
grid-template-columns: 1fr 22px 1fr;
}
.tech-flow > .arrow:nth-child(4) {
display: none;
}
.tech-card {
min-height: 220px;
}
.impact-grid {
grid-template-columns: 1fr 1fr;
gap: 24px;
}
.impact-visual {
height: 145px;
}
.network-layout {
grid-template-columns: 0.8fr 1.2fr;
gap: 30px;
}
.ring {
width: 210px;
height: 210px;
}
.ring strong {
font-size: 1.5rem;
}
.ring span {
font-size: 0.43rem;
}
.road-grid {
grid-template-columns: 1fr 1fr;
}
.event-grid,
.contact-grid {
gap: 35px;
}
.event-poster {
padding: 30px;
}
.poster-top {
font-size: 2.1rem;
}
.contact-form {
padding: 25px;
}
.fields {
grid-template-columns: 1fr;
}
.wide {
grid-column: auto;
}
.footer-grid {
gap: 40px;
}
}
@media (max-width: 700px) {
:root {
--header-offset: 90px;
}
.container {
width: calc(100% - 40px);
}
.topline {
padding: 9px 20px;
font-size: 0.55rem;
}
.topline span:last-child {
display: none;
}
.nav {
padding: 14px 20px;
}
.brand {
flex-basis: 205px;
}
.brand img {
width: 205px;
}
.nav nav {
flex-direction: column;
align-items: stretch;
gap: 0;
max-height: calc(100dvh - 100px);
overflow: auto;
}
.nav nav a {
padding: 11px 0;
border-bottom: 1px solid #ffffff15;
font-size: 0.87rem;
}
.nav nav .navcta {
margin-top: 10px;
padding: 10px 12px;
text-align: center;
}
.hero {
padding: 50px 0 35px;
}
.hero-grid {
grid-template-columns: 1fr;
gap: 26px;
}
.hero-copy > p {
font-size: 1rem;
}
.eyebrow {
font-size: 0.59rem;
letter-spacing: 0.1em;
}
.hero-proof {
margin-top: 30px;
font-size: 0.54rem;
}
.hero-art {
min-height: 340px;
max-width: 440px;
width: 100%;
margin: auto;
}
.hero-panel {
width: 85%;
padding: 29px;
}
.hero-panel strong {
font-size: 1.8rem;
}
.hero-panel small {
font-size: 0.7rem;
}
.floating.one {
top: 0;
right: 0;
}
.floating.two {
bottom: 0;
left: 0;
}
.africa {
top: 35px;
}
.trust {
padding: 25px 0;
}
.trust-grid {
gap: 20px 14px;
}
.trust-grid > div:nth-child(even) {
padding-left: 14px;
}
.trust b {
font-size: 0.58rem;
letter-spacing: 0.07em;
}
.trust span {
font-size: 0.7rem;
}
.section {
padding: 60px 0;
}
.kicker {
font-size: 0.63rem;
letter-spacing: 0.12em;
margin-bottom: 18px;
}
.mission-grid {
gap: 14px;
}
.mission-grid article {
padding: 20px 17px;
}
.mission-grid h3 {
font-size: 1.07rem;
}
.mission-grid p {
font-size: 0.82rem;
}
.lead {
font-size: 1rem;
}
.section-head {
display: block;
margin-bottom: 30px;
}
.section-head > p {
max-width: none;
margin-top: 20px;
font-size: 0.9rem;
}
.tech-flow {
gap: 12px;
}
.tech-card {
padding: 22px 16px;
min-height: 235px;
}
.tech-card h3 {
font-size: 1.05rem;
}
.tech-card p {
font-size: 0.82rem;
}
.tech-num {
right: 14px;
top: 14px;
}
.tech-bottom {
gap: 10px;
}
.tech-bottom strong {
font-size: 0.76rem;
}
.tech-bottom span {
font-size: 0.66rem;
}
.tech-bottom > div + div {
padding-left: 10px;
}
.impact-grid {
gap: 16px;
}
.impact-content {
padding: 22px 18px;
}
.impact-content h3 {
font-size: 1.12rem;
}
.impact-content p {
font-size: 0.82rem;
}
.impact-content button {
font-size: 0.73rem;
}
.network-layout {
grid-template-columns: 1fr;
gap: 15px;
}
.network-center {
min-height: 320px;
}
.ring {
width: 225px;
height: 225px;
}
.network-list strong {
font-size: 0.9rem;
}
.country-strip > div {
font-size: 1rem;
line-height: 2;
}
.country-strip i {
margin: 0 7px;
}
.road-grid {
gap: 28px 22px;
}
.road-grid p {
font-size: 0.83rem;
}
.event-grid,
.contact-grid {
grid-template-columns: 1fr;
gap: 35px;
}
.event-poster {
max-width: 480px;
width: 100%;
margin: auto;
}
.poster-top {
font-size: 2.4rem;
}
.event-details {
gap: 20px 16px;
}
.contact-form {
padding: 25px;
}
.fields {
grid-template-columns: 1fr 1fr;
}
.wide {
grid-column: 1/-1;
}
.footer-grid {
grid-template-columns: 1fr 1fr;
gap: 30px;
}
.footer-grid > div:first-child {
grid-column: 1/-1;
}
.footer-bottom {
flex-direction: column;
gap: 10px;
}
.footer img {
width: 250px;
}
}
@media (max-width: 420px) {
h1 {
font-size: 2.5rem;
}
.actions {
flex-direction: column;
}
.actions .btn {
width: 100%;
}
.mission-grid,
.impact-grid {
grid-template-columns: 1fr;
}
.mission-grid article {
padding: 24px;
}
.impact-visual {
height: 130px;
}
.impact-content h3 {
font-size: 1.3rem;
}
.impact-content p {
font-size: 0.9rem;
}
.tech-flow {
grid-template-columns: 1fr;
}
.tech-flow > .arrow {
display: none;
}
.tech-card {
min-height: auto;
padding: 25px;
}
.tech-icon {
margin-bottom: 12px;
}
.tech-bottom {
grid-template-columns: 1fr;
gap: 16px;
}
.tech-bottom > div + div {
border-left: 0;
padding-left: 0;
}
.hero-panel strong {
font-size: 1.5rem;
}
.hero-panel {
padding: 25px 22px;
}
.hero-panel small {
font-size: 0.64rem;
}
.fields {
grid-template-columns: 1fr;
}
.wide {
grid-column: auto;
}
.road-grid {
grid-template-columns: 1fr 1fr;
gap: 24px 18px;
}
.event-details {
grid-template-columns: 1fr;
}
.poster-top {
font-size: 2rem;
}
.poster-foot {
font-size: 0.55rem;
}
.contact-form {
padding: 22px;
}
.brand {
flex-basis: 190px;
}
.brand img {
width: 190px;
}
}
@media (prefers-reduced-motion: reduce) {
html {
scroll-behavior: auto;
}
*,
*:before,
*:after {
transition: none !important;
animation: none !important;
}
.btn:hover {
transform: none;
}
}
[hidden] {
display: none !important;
}
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
.nav nav a[aria-current="page"] {
color: var(--gold);
text-decoration: underline;
text-underline-offset: 7px;
text-decoration-thickness: 2px;
}
.page-hero {
padding: 30px 0 80px;
background:
radial-gradient(ellipse at 90% 20%, #16365b, transparent 60%), var(--navy);
color: #fff;
}
.breadcrumbs {
display: flex;
flex-wrap: wrap;
gap: 12px;
font-size: 0.73rem;
color: #c5cfde;
margin-bottom: 40px;
}
.breadcrumbs a {
border-bottom: 1px solid #ffffff50;
}
.breadcrumbs a:hover {
color: var(--gold);
}
.page-hero h1 {
max-width: 1000px;
font-size: clamp(2.5rem, 4.2vw, 4.1rem);
}
.page-hero > div > p {
max-width: 820px;
font-size: 1.08rem;
line-height: 1.85;
color: #c5cfde;
margin-top: 26px;
}
.page-hero .eyebrow {
margin-bottom: 24px;
}
.content-cards {
display: grid;
gap: 25px;
margin-top: 38px;
}
.cols-2 {
grid-template-columns: repeat(2, 1fr);
}
.cols-3 {
grid-template-columns: repeat(3, 1fr);
}
.content-card {
padding: 30px;
border: 1px solid var(--line);
border-radius: var(--radius);
display: flex;
flex-direction: column;
}
.card-index {
font-size: 0.66rem;
font-weight: 700;
letter-spacing: 0.1em;
color: #806619;
margin-bottom: 22px;
}
.content-card p {
font-size: 0.96rem;
color: var(--muted);
line-height: 1.8;
}
.dark .content-card {
background: #ffffff04;
border-color: #ffffff25;
}
.dark .content-card p {
color: #c5cfde;
}
.dark .card-index {
color: var(--gold);
}
.editorial-panel {
background: #fff;
border: 1px solid var(--line);
border-left: 3px solid var(--gold);
padding: 35px;
border-radius: var(--radius);
}
.editorial-panel p {
color: var(--muted);
font-size: 0.96rem;
line-height: 1.85;
}
.page-split {
align-items: center;
}
.page-cta p {
color: #c5cfde;
max-width: 800px;
font-size: 1rem;
}
.page-cta {
padding: 70px 0;
}
.science-workflow {
padding: 0;
margin: 38px 0 0;
list-style: none;
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 22px;
}
.science-workflow li {
border: 1px solid var(--line);
border-radius: var(--radius);
padding: 26px;
position: relative;
}
.science-workflow li:last-child {
background: var(--gray);
}
.step-index {
display: grid;
place-items: center;
width: 36px;
height: 36px;
border-radius: 50%;
background: var(--navy);
color: var(--gold);
font-size: 0.75rem;
font-weight: 700;
margin-bottom: 22px;
}
.science-workflow h3 {
font-size: 1.1rem;
}
.science-workflow p {
font-size: 0.88rem;
color: var(--muted);
}
.readiness-note {
padding: 20px 24px;
border-left: 3px solid var(--gold);
background: var(--gray);
color: var(--muted);
font-size: 0.9rem;
line-height: 1.85;
margin-top: 30px;
}
.maturity-list {
margin: 36px 0 0;
}
.maturity-list > div {
display: grid;
grid-template-columns: 1fr 1.6fr;
gap: 30px;
padding: 24px 0;
border-bottom: 1px solid var(--line);
}
.maturity-list dt {
font-weight: 700;
display: flex;
gap: 20px;
align-items: baseline;
}
.maturity-list dt span {
font-size: 0.7rem;
color: #806619;
}
.maturity-list dd {
margin: 0;
color: var(--muted);
font-size: 0.94rem;
}
.application-pathways {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 28px;
margin-top: 40px;
}
.application-pathway {
border: 1px solid var(--line);
border-radius: var(--radius);
overflow: hidden;
scroll-margin-top: 120px;
display: flex;
flex-direction: column;
}
.application-pathway .impact-visual {
height: 150px;
}
.application-detail {
padding: 30px;
display: flex;
flex-direction: column;
flex: 1;
}
.application-detail h3 {
font-size: 1.5rem;
margin-top: 18px;
}
.application-detail p {
color: var(--muted);
font-size: 0.94rem;
}
.application-caveat {
border-top: 1px solid var(--line);
padding-top: 18px;
font-size: 0.83rem !important;
margin-bottom: 20px;
}
.status-label {
display: inline-block;
color: #755b12;
background: #f8f1d9;
border: 1px solid #d4af3770;
font-size: 0.69rem;
line-height: 1.7;
padding: 6px 10px;
border-radius: 4px;
width: fit-content;
}
.text-button {
padding: 12px 0;
color: #755b12;
border-top: 1px solid var(--line);
border-radius: 0;
margin-top: auto;
}
.text-button:hover {
transform: none;
text-decoration: underline;
}
.country-panels {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 28px;
margin-top: 38px;
}
.country-panels article {
padding: 30px;
border: 1px solid #ffffff25;
border-radius: var(--radius);
background: #ffffff04;
}
.country-panels .status-label {
background: #d4af3715;
color: #ecd27c;
border-color: #d4af3750;
}
.country-panels h3 {
font-size: 1.4rem;
margin-top: 20px;
line-height: 1.35;
}
.country-panels p {
font-size: 0.9rem;
line-height: 1.85;
color: #c5cfde;
}
.country-tags {
list-style: none;
padding: 0;
display: flex;
flex-wrap: wrap;
gap: 9px;
margin-top: 24px;
}
.country-tags li {
font-size: 0.79rem;
padding: 6px 11px;
border: 1px solid #ffffff25;
border-radius: 4px;
background: #ffffff08;
}
.pathway-grid .text-link {
margin-top: auto;
padding-top: 24px;
width: fit-content;
}
.inquiry-prompt {
font-size: 0.84rem !important;
background: var(--gray);
padding: 15px;
border-radius: 6px;
margin-bottom: 18px;
}
.editorial-categories {
padding: 0;
list-style: none;
display: flex;
flex-wrap: wrap;
gap: 12px;
margin-top: 30px;
}
.editorial-categories li {
border: 1px solid var(--line);
padding: 10px 16px;
border-radius: 5px;
font-size: 0.85rem;
color: var(--muted);
}
.editorial-empty {
background: var(--gray);
border-radius: var(--radius);
padding: 35px;
margin-top: 30px;
}
.editorial-empty p {
max-width: 800px;
color: var(--muted);
font-size: 0.94rem;
}
.event-status {
margin-top: 22px;
}
.event-details dt {
font-size: 0.61rem;
letter-spacing: 0.13em;
font-weight: 700;
text-transform: uppercase;
color: #755f1e;
}
.event-details dd {
font-weight: 700;
font-size: 0.88rem;
margin: 7px 0 0;
}
.required-note {
font-size: 0.65rem;
font-weight: 400;
color: var(--muted);
}
.inquiry-context {
background: var(--gray);
color: var(--muted);
font-size: 0.78rem;
padding: 12px;
margin: 0 0 20px;
border-radius: 5px;
}
.contact .smallnote {
color: #c5cfde;
}
.fields label {
line-height: 1.6;
}
@media (max-width: 1020px) {
.science-workflow {
grid-template-columns: repeat(2, 1fr);
}
.cols-3 {
grid-template-columns: 1fr 1fr;
}
.country-panels {
gap: 20px;
}
.country-panels article {
padding: 25px;
}
.page-hero {
padding-bottom: 65px;
}
.application-detail {
padding: 25px;
}
.content-card {
padding: 26px;
}
}
@media (max-width: 700px) {
.page-hero {
padding: 24px 0 55px;
}
.breadcrumbs {
margin-bottom: 30px;
}
.page-hero h1 {
font-size: 2.5rem;
}
.page-hero > div > p {
font-size: 1rem;
}
.content-cards,
.application-pathways,
.country-panels {
grid-template-columns: 1fr;
gap: 20px;
margin-top: 30px;
}
.page-cta {
padding: 55px 0;
}
.maturity-list > div {
grid-template-columns: 1fr;
gap: 12px;
padding: 23px 0;
}
.maturity-list dd {
font-size: 0.88rem;
}
.application-detail h3 {
font-size: 1.3rem;
}
.country-panels h3 {
font-size: 1.25rem;
}
.content-card p {
font-size: 0.9rem;
}
.science-workflow li {
padding: 22px;
}
.science-workflow h3 {
font-size: 1.03rem;
}
.editorial-panel {
padding: 26px;
}
.editorial-empty {
padding: 25px;
}
}
@media (max-width: 420px) {
.science-workflow {
grid-template-columns: 1fr;
}
.page-hero h1 {
font-size: 2.35rem;
}
.page-hero .eyebrow {
font-size: 0.57rem;
}
.application-detail,
.country-panels article,
.content-card {
padding: 24px;
}
.readiness-note {
padding: 18px;
}
.status-label {
font-size: 0.64rem;
}
}
.notice-copy { max-width: 880px; }
.notice-block + .notice-block { margin-top: 42px; }
.notice-block h2 { font-size: clamp(1.35rem, 3vw, 1.8rem); margin-bottom: 16px; }
.notice-block p + p { margin-top: 16px; }
.notice-block ul { padding-left: 24px; margin-top: 16px; }
.notice-block li + li { margin-top: 10px; }
.notice-copy a { text-decoration: underline; text-underline-offset: 3px; overflow-wrap: anywhere; }
.footer-links { display: flex; flex-wrap: wrap; column-gap: 28px; row-gap: 6px; margin-top: 24px; }
.footer-links a { overflow-wrap: anywhere; max-width: 100%; }