:root {
  --navy: #0b172a;
  --navy-2: #101f35;
  --navy-3: #162941;
  --green: #10b981;
  --green-dark: #07865e;
  --accent: #c99a49;
  --amber: #f2a93b;
  --paper: #f7f9fc;
  --surface: #ffffff;
  --surface-2: #edf2f7;
  --ink: #101b2d;
  --muted: #667386;
  --line: #dbe2ea;
  --soft-line: rgba(11, 23, 42, .09);
  --featured-surface: #e9f9f3;
  --featured-accent: #07865e;
  --shadow: 0 30px 90px rgba(22, 38, 61, .14);
  --serif: "Newsreader", Georgia, serif;
  --sans: "Manrope", sans-serif;
  --mono: "DM Mono", monospace;
  --radius: 22px;
}

[data-theme="dark"] {
  --paper: #07111f;
  --surface: #0e1b2d;
  --surface-2: #13243a;
  --ink: #eff5fb;
  --muted: #94a3b7;
  --line: #263950;
  --soft-line: rgba(255,255,255,.1);
  --featured-surface: #12332b;
  --featured-accent: #59daa9;
  --shadow: 0 30px 90px rgba(0,0,0,.35);
}

* { box-sizing: border-box; }
html { width: 100%; max-width: 100%; overflow-x: hidden; scroll-behavior: smooth; }
body { width: 100%; max-width: 100%; margin: 0; overflow-x: hidden; overscroll-behavior-x: none; background: var(--paper); color: var(--ink); font-family: var(--sans); line-height: 1.55; -webkit-font-smoothing: antialiased; transition: background .3s ease, color .3s ease; }
body.modal-open, body.menu-open { overflow: hidden; }
button, input, textarea, select { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button { color: inherit; }
a { color: inherit; }
img, svg { display: block; }
::selection { background: var(--green); color: #fff; }
:focus-visible { outline: 3px solid color-mix(in srgb, var(--green), transparent 55%); outline-offset: 3px; }
.skip-link { position: fixed; z-index: 999; top: 12px; left: 12px; padding: 10px 16px; border-radius: 10px; background: var(--green); color: #fff; font-weight: 700; transform: translateY(-160%); transition: transform .2s; }
.skip-link:focus { transform: translateY(0); }

.site-header { position: absolute; inset: 0 0 auto; z-index: 50; padding: 0 32px; }
.nav-wrap { width: min(1440px, 100%); min-height: 86px; margin: auto; display: grid; grid-template-columns: auto 1fr auto; align-items: center; border-bottom: 1px solid var(--soft-line); }
.brand { display: inline-flex; align-items: center; gap: 11px; width: fit-content; color: var(--ink); font-size: 21px; font-weight: 700; letter-spacing: -.04em; text-decoration: none; }
.brand-logo { width: 142px; height: auto; padding: 0; border-radius: 8px; background: transparent; object-fit: contain; }
.desktop-nav { justify-self: center; display: flex; align-items: center; gap: clamp(18px, 2vw, 31px); }
.desktop-nav a, .sign-in { color: var(--muted); font-size: 12px; font-weight: 600; text-decoration: none; transition: color .2s; }
.desktop-nav a:hover, .sign-in:hover { color: var(--ink); }
.nav-actions { display: flex; align-items: center; gap: 18px; }
.theme-toggle, .menu-toggle { width: 38px; height: 38px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 50%; background: var(--surface); cursor: pointer; }
.theme-toggle svg { width: 17px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-width: 1.7; }
.moon-icon { display: none; }
[data-theme="dark"] .sun-icon { display: none; }
[data-theme="dark"] .moon-icon { display: block; }
.button { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 45px; padding: 0 20px; border: 1px solid transparent; border-radius: 12px; font-size: 12px; font-weight: 700; text-decoration: none; cursor: pointer; transition: transform .2s, box-shadow .2s, background .2s; }
.button:hover { transform: translateY(-2px); }
.button-primary { background: var(--green); color: #fff; box-shadow: 0 10px 25px rgba(16,185,129,.2); }
.button-primary:hover { background: #0da773; box-shadow: 0 14px 30px rgba(16,185,129,.28); }
.button-large { min-height: 56px; padding-inline: 25px; font-size: 13px; }
.button-ghost { border-color: var(--line); background: var(--surface); color: var(--ink); box-shadow: 0 8px 24px rgba(11,23,42,.05); }
.button-light { background: #fff; color: var(--navy); }
.button-outline-light { border-color: rgba(255,255,255,.22); color: #fff; background: rgba(255,255,255,.06); }
.menu-toggle, .mobile-menu { display: none; }

.eyebrow { display: inline-flex; align-items: center; gap: 10px; margin-bottom: 28px; color: var(--green-dark); font-family: var(--mono); font-size: 11px; letter-spacing: .05em; text-transform: uppercase; }
.status-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 5px rgba(16,185,129,.12); }
h1, h2, h3, p { margin-top: 0; }
h1 em, h2 em { color: var(--green); font-family: var(--serif); font-weight: 500; }

.decision-strip { width: min(1440px, calc(100% - 64px)); margin: 0 auto 150px; padding: 58px 0; display: grid; grid-template-columns: 1fr 1.1fr; gap: 10vw; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.section-number { display: block; margin-bottom: 24px; color: var(--green-dark); font-family: var(--mono); font-size: 10px; letter-spacing: .08em; }.section-number.light { color: #53d5a5; }
.decision-copy p { max-width: 580px; margin: 0; font-family: var(--serif); font-size: clamp(26px, 3vw, 42px); line-height: 1.18; letter-spacing: -.03em; }
.decision-list > div { display: grid; grid-template-columns: 30px 1fr; gap: 18px; padding: 20px 0; border-bottom: 1px solid var(--line); }.decision-list > div:first-child { padding-top: 0; }.decision-list span { color: var(--green-dark); font-family: var(--mono); font-size: 9px; }.decision-list p { margin: 0; color: var(--muted); font-size: 15px; }

.story-section { width: min(1280px, calc(100% - 64px)); margin: 0 auto 160px; display: grid; grid-template-columns: .8fr 1.2fr; gap: 10vw; align-items: start; }
.story-sticky { position: sticky; top: 120px; }
.story-sticky h2 { margin: 0 0 25px; font-size: clamp(48px, 5.8vw, 80px); line-height: .99; letter-spacing: -.066em; }
.story-sticky p { max-width: 490px; color: var(--muted); font-size: 16px; line-height: 1.75; }

.section-pad { padding: 145px max(32px, calc((100vw - 1440px) / 2)); }

.site-footer { padding: 80px max(32px, calc((100vw - 1440px) / 2)) 28px; background: #07111f; color: white; }.footer-top { display: grid; grid-template-columns: 1fr 1.4fr; gap: 9vw; padding-bottom: 80px; }.footer-brand .brand { color: white; }.footer-brand p { max-width: 340px; margin: 28px 0; color: #899aaf; font-family: var(--serif); font-size: 24px; line-height: 1.25; }.footer-brand > span { color: var(--green); font-family: var(--mono); font-size: 8px; text-transform: uppercase; letter-spacing: .08em; }.footer-links { display: grid; grid-template-columns: repeat(4,1fr); gap: 25px; }.footer-links div { display: flex; flex-direction: column; gap: 12px; }.footer-links b { margin-bottom: 5px; color: #dbe4ee; font-size: 9px; }.footer-links a { color: #8293a8; font-size: 9px; text-decoration: none; }.footer-links a:hover { color: white; }.footer-bottom { display: flex; justify-content: space-between; padding-top: 25px; border-top: 1px solid rgba(255,255,255,.1); color: #65768b; font-size: 8px; }.system-status { display: flex; align-items: center; gap: 8px; }.system-status i { width: 6px; height: 6px; border-radius: 50%; background: var(--green); }

.reveal { opacity: 0; transform: translateY(22px); transition: opacity .7s ease, transform .7s ease; }.reveal[data-delay="1"] { transition-delay: .12s; }.reveal[data-delay="2"] { transition-delay: .24s; }.reveal.visible { opacity: 1; transform: translateY(0); }
@keyframes marquee { to { transform: translateX(-50%); } }
@keyframes panelIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }

.coverage { position: relative; overflow: hidden; background: #091827; color: #f2f6f9; isolation: isolate; }
.coverage::before { content: ""; position: absolute; z-index: -1; width: 780px; height: 780px; right: -280px; top: -360px; border-radius: 50%; background: radial-gradient(circle, rgba(16,185,129,.14), transparent 66%); pointer-events: none; }
.coverage::after { content: ""; position: absolute; z-index: -1; inset: 0; opacity: .14; background-image: linear-gradient(rgba(255,255,255,.055) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.055) 1px, transparent 1px); background-size: 64px 64px; mask-image: linear-gradient(to bottom, black, transparent 82%); pointer-events: none; }
.coverage-heading { display: grid; grid-template-columns: 1.15fr .85fr; gap: 100px; align-items: end; margin-bottom: 70px; }
.coverage-heading h2 { margin: 0; color: #f4f8fb; font-size: clamp(54px, 6vw, 86px); line-height: .98; letter-spacing: -.065em; }
.coverage-heading h2 em { color: #52d6a7; }
.coverage-heading p { max-width: 520px; margin: 0 0 22px; color: #9cadbd; font-size: 14px; line-height: 1.8; }
.coverage-signal { display: inline-flex; align-items: center; gap: 9px; color: #c5d1db; font-family: var(--mono); font-size: 8px; letter-spacing: .08em; text-transform: uppercase; }
.coverage-signal i { width: 8px; height: 8px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 6px rgba(16,185,129,.12); animation: coveragePulse 2.2s ease-in-out infinite; }
@keyframes coveragePulse { 50% { box-shadow: 0 0 0 11px rgba(16,185,129,0); } }
.coverage-stage { min-height: 690px; display: grid; grid-template-columns: minmax(290px, .72fr) minmax(0, 1.6fr); overflow: hidden; border: 1px solid rgba(255,255,255,.13); border-radius: 26px; background: #102338; box-shadow: 0 45px 100px rgba(0,0,0,.28); }
.coverage-summary { position: relative; z-index: 5; padding: 52px 42px 40px; border-right: 1px solid rgba(255,255,255,.11); background: linear-gradient(155deg, #122a42 0%, #0c1d2f 100%); }
.coverage-kicker { color: #52d6a7; font-family: var(--mono); font-size: 8px; letter-spacing: .1em; }
.coverage-summary h3 { margin: 16px 0 18px; font-family: var(--serif); font-size: 40px; font-weight: 500; line-height: 1.04; letter-spacing: -.04em; }
.coverage-summary > p { max-width: 350px; margin: 0; color: #91a4b7; font-size: 11px; line-height: 1.75; }
.coverage-cities { display: flex; flex-wrap: wrap; gap: 8px; }
.coverage-cities button { padding: 9px 11px; border: 1px solid rgba(255,255,255,.13); border-radius: 99px; background: rgba(255,255,255,.035); color: #9fb0c0; font-family: var(--mono); font-size: 7px; cursor: pointer; transition: color .2s, border-color .2s, background .2s, transform .2s; }
.coverage-cities button:hover, .coverage-cities button:focus-visible { color: white; border-color: rgba(82,214,167,.55); transform: translateY(-1px); }
.coverage-cities button.active { border-color: #52d6a7; background: rgba(16,185,129,.14); color: #dffff3; }
.coverage-cta { width: 100%; margin-top: 34px; justify-content: space-between; background: #52d6a7; color: #0c2630; }
.coverage-map-card { position: relative; min-width: 0; min-height: 690px; background: #dce4e7; }
#nigeriaCoverageMap { position: absolute; inset: 0; z-index: 1; background: #dce4e7; }
.coverage-map-toolbar { position: absolute; z-index: 500; top: 20px; left: 20px; right: 20px; display: flex; justify-content: space-between; align-items: center; pointer-events: none; }
.map-style-switch, .map-locate, .map-reset { pointer-events: auto; border: 1px solid rgba(12,31,48,.14); background: rgba(250,252,252,.94); box-shadow: 0 10px 28px rgba(10,29,44,.16); backdrop-filter: blur(12px); }
.map-style-switch { display: flex; padding: 4px; border-radius: 10px; }
.map-style-switch button { min-width: 76px; padding: 9px 13px; border: 0; border-radius: 7px; background: transparent; color: #667484; font-size: 9px; font-weight: 700; cursor: pointer; }
.map-style-switch button.active { background: #10283d; color: white; box-shadow: 0 5px 14px rgba(12,31,48,.19); }
.map-toolbar-actions { display: flex; gap: 8px; pointer-events: none; }
.map-locate, .map-reset { display: flex; align-items: center; gap: 7px; padding: 11px 13px; border-radius: 10px; color: #23384b; font-size: 8px; font-weight: 700; cursor: pointer; transition: color .2s, background .2s, transform .2s; }
.map-locate:hover, .map-reset:hover { transform: translateY(-1px); }
.map-locate.active { border-color: #0c8e67; background: #0f7558; color: white; }
.map-locate svg, .map-reset svg { width: 14px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.coverage-map-loading { position: absolute; z-index: 450; inset: 0; display: flex; justify-content: center; align-items: center; gap: 10px; background: #dfe7e8; color: #405465; font-family: var(--mono); font-size: 8px; letter-spacing: .06em; pointer-events: none; transition: opacity .35s, visibility .35s; }
.coverage-map-loading.loaded { visibility: hidden; opacity: 0; }
.coverage-map-loading span { width: 14px; height: 14px; border: 2px solid rgba(15,87,69,.18); border-top-color: #0f7558; border-radius: 50%; animation: mapSpin .8s linear infinite; }
@keyframes mapSpin { to { transform: rotate(360deg); } }
.coverage-map-note { position: absolute; z-index: 500; left: 20px; right: 20px; bottom: 20px; display: flex; align-items: center; gap: 18px; width: fit-content; max-width: calc(100% - 40px); padding: 11px 14px; border: 1px solid rgba(12,31,48,.12); border-radius: 10px; background: rgba(250,252,252,.94); color: #536779; font-size: 7px; box-shadow: 0 10px 28px rgba(10,29,44,.14); backdrop-filter: blur(12px); }
.coverage-map-note span { display: flex; align-items: center; gap: 7px; white-space: nowrap; }
.coverage-map-note i { display: inline-block; flex: 0 0 auto; }
.legend-coverage { width: 14px; height: 8px; border: 1px solid #07865e; border-radius: 2px; background: rgba(16,185,129,.16); }
.legend-hub { width: 8px; height: 8px; border: 2px solid white; border-radius: 50%; background: #0d9c70; box-shadow: 0 0 0 1px #0b694f; }
.building-detail-status { padding-left: 16px; border-left: 1px solid #d6dee3; color: #30495d; }
.coverage-map-fallback { position: absolute; z-index: 600; inset: 0; display: grid; place-items: center; margin: 0; padding: 40px; background: #e4eaeb; color: #243c4f; text-align: center; }
.coverage-marker { width: 20px; height: 20px; display: grid; place-items: center; border: 2px solid white; border-radius: 50% 50% 50% 0; background: #0b9d70; box-shadow: 0 4px 14px rgba(7,61,48,.32); transform: rotate(-45deg); }
.coverage-marker::after { content: ""; width: 5px; height: 5px; border-radius: 50%; background: white; }
.user-location-marker { width: 20px; height: 20px; border: 4px solid white; border-radius: 50%; background: #1769e0; box-shadow: 0 0 0 7px rgba(23,105,224,.2), 0 5px 18px rgba(13,54,112,.3); }
.leaflet-popup-content-wrapper { border-radius: 12px; box-shadow: 0 16px 40px rgba(13,35,50,.23); }
.leaflet-popup-content { margin: 15px 17px; font-family: var(--sans); }
.map-popup span, .map-popup strong, .map-popup small { display: block; }
.map-popup span { margin-bottom: 5px; color: #07865e; font-family: var(--mono); font-size: 7px; letter-spacing: .08em; }
.map-popup strong { color: #12283b; font-size: 14px; }
.map-popup small { margin: 5px 0 12px; color: #718291; font-size: 9px; line-height: 1.45; }
.map-popup a { color: #087c59; font-size: 9px; font-weight: 700; text-decoration: none; }
.leaflet-control-zoom { margin-right: 20px !important; margin-bottom: 72px !important; border: 0 !important; box-shadow: 0 8px 25px rgba(10,29,44,.18) !important; }
.leaflet-control-zoom a { border-color: #e0e6e9 !important; color: #193348 !important; }
.leaflet-control-attribution { color: #5d6d79; font-size: 8px !important; background: rgba(255,255,255,.86) !important; }
.leaflet-control-attribution a { color: #286a59; }
.leaflet-interactive:focus { outline: 2px solid #07865e; outline-offset: 2px; }

@media (max-width: 1180px) {
  .desktop-nav { display: none; }.nav-wrap { grid-template-columns: 1fr auto; }.menu-toggle { display: grid; }.menu-toggle span { width: 15px; height: 1px; background: currentColor; }.menu-toggle span:last-child { transform: translateY(-4px); }.mobile-menu { position: absolute; left: 24px; right: 24px; top: 78px; padding: 22px; flex-direction: column; gap: 4px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); box-shadow: var(--shadow); }.mobile-menu.open { display: flex; }.mobile-menu a { padding: 9px; color: var(--muted); font-size: 13px; text-decoration: none; }
  .story-section { gap: 6vw; }
}

@media (max-width: 900px) {
  .decision-strip, .story-section { width: min(100% - 40px, 720px); }.section-pad { padding: 105px 20px; }.decision-strip, .story-section { grid-template-columns: 1fr; }.decision-strip, .story-section { gap: 60px; }.story-sticky { position: static; }.footer-top { grid-template-columns: 1fr; }
  .coverage-heading { grid-template-columns: 1fr; gap: 28px; }
  .coverage-heading p { max-width: 620px; }
  .coverage-stage { grid-template-columns: 1fr; }
  .coverage-summary { border-right: 0; border-bottom: 1px solid rgba(255,255,255,.11); }
  .coverage-map-card { min-height: 590px; }
}

@media (max-width: 620px) {
  .site-header { padding: 0 17px; }.nav-wrap { min-height: 72px; }.nav-actions { gap: 8px; }.sign-in { display: none; }.mobile-menu { left: 12px; right: 12px; top: 68px; }.eyebrow { margin-bottom: 20px; }.hero-actions .button { width: 100%; }
  .decision-strip { width: calc(100% - 34px); margin-bottom: 100px; padding: 45px 0; }.decision-copy p { font-size: 29px; }.story-section { width: calc(100% - 34px); margin-bottom: 100px; }.story-sticky h2 { font-size: 43px; }.section-pad { padding: 85px 17px; }.footer-top { padding-bottom: 50px; }.footer-links { grid-template-columns: 1fr 1fr; gap: 38px 20px; }.footer-bottom { flex-direction: column; gap: 12px; }
  .coverage-heading { margin-bottom: 45px; }
  .coverage-heading h2 { font-size: 43px; }
  .coverage-stage { min-height: 0; border-radius: 18px; }
  .coverage-summary { padding: 35px 22px 30px; }
  .coverage-summary h3 { font-size: 33px; }
  .coverage-map-card { min-height: 500px; }
  .coverage-map-toolbar { top: 12px; left: 12px; right: 12px; }
  .map-style-switch button { min-width: 62px; padding-inline: 10px; }
  .map-locate, .map-reset { width: 38px; height: 38px; justify-content: center; padding: 0; }
  .map-locate span, .map-reset span { display: none; }
  .coverage-map-note { left: 12px; right: 12px; bottom: 12px; max-width: calc(100% - 24px); flex-wrap: wrap; gap: 8px 14px; }
  .building-detail-status { width: 100%; padding: 8px 0 0; border-top: 1px solid #d6dee3; border-left: 0; }
  .leaflet-control-zoom { margin-right: 12px !important; margin-bottom: 95px !important; }

  html, body { overflow-x: hidden; touch-action: pan-y; }
  body > header, body > main, body > footer, main > section { width: 100%; max-width: 100%; }
  .decision-strip > *, .story-section > *, .coverage-heading > *, .coverage-stage > * { min-width: 0; }
  .brand-logo { width: 116px; }
  .mobile-menu { max-height: calc(100vh - 82px); overflow-y: auto; }

}

@media (max-width: 380px) {
  .site-header { padding-inline: 12px; }
  .decision-strip, .story-section { width: calc(100% - 24px); }
  .section-pad { padding-inline: 12px; }
  .brand-logo { width: 106px; }
  .story-sticky h2 { font-size: 38px; }
}

@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } .reveal { opacity: 1; transform: none; } }