/* Preserve the supplied brand colours on the dark navigation and footer. */
.brand img {
  filter: drop-shadow(0 2px 8px rgba(0, 0, 0, .24));
}

.footer-brand img {
  filter: opacity(.92);
}

.brand img, .footer-brand img {
  background: transparent;
  border-radius: 0;
  padding: 0;
}

.map-placeholder { height: 230px; display: block; padding: 0; overflow: hidden; background: #f7f8fa; }
.map-placeholder::before, .map-placeholder::after { display: none; }
.nigeria-map { position: absolute; top: 4px; left: 50%; width: min(100%, 250px); height: 205px; object-fit: contain; transform: translateX(-50%); }
.map-placeholder i { display: block; position: absolute; z-index: 2; top: 173px; left: 38%; width: 13px; height: 13px; border: 2px solid #fff; border-radius: 50% 50% 50% 0; background: var(--gold); box-shadow: 0 2px 5px rgba(6,31,61,.32); transform: rotate(-45deg); }
.map-placeholder small { position: absolute; z-index: 3; bottom: 8px; left: 0; right: 0; color: #557364; font-size: 8px; font-weight: 700; letter-spacing: .1em; text-shadow: 0 1px 2px #fff; }
:root[data-theme='dark'] .map-placeholder { background: #eef2f0; }
:root[data-theme='dark'] .map-placeholder small { color: #355447; }

/* The source mark stays transparent; this soft halo keeps its dark green details legible on dark surfaces. */
.brand, .footer-brand { position: relative; isolation: isolate; }
.brand::before, .footer-brand::before {
  content: '';
  position: absolute;
  z-index: -1;
  inset: 7px -10px;
  border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(255,255,255,.92) 0%, rgba(255,255,255,.76) 45%, rgba(255,255,255,0) 73%);
}
.brand img, .footer-brand img {
  position: relative;
  z-index: 1;
  filter: brightness(1.14) contrast(1.05) drop-shadow(0 2px 3px rgba(0,0,0,.38));
}
.footer-brand { position: relative; display: inline-block; }
:root[data-theme='dark'] .brand::before, :root[data-theme='dark'] .footer-brand::before {
  background: radial-gradient(ellipse at center, rgba(255,255,255,.96) 0%, rgba(255,255,255,.8) 46%, rgba(255,255,255,0) 74%);
}
@media (max-width: 760px) {
  .brand { position: absolute; }
}

/* Clear logo card for reliable contrast on the header and footer. */
.brand::before, .footer-brand::before { display: none; }
.brand, .footer-brand {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 3px;
  background: #fff;
  border: 1px solid rgba(255,255,255,.72);
  border-radius: 8px;
  box-shadow: 0 3px 12px rgba(0,0,0,.18);
}
.brand img, .footer-brand img {
  width: auto;
  filter: none;
}
.brand img { height: 70px; }
.footer-brand img { height: 80px; }
@media (min-width: 761px) {
  .brand { padding-left: 3px; border-left: 1px solid rgba(255,255,255,.72); }
  .brand img { width: auto; height: 70px; }
}
@media (max-width: 760px) {
  .brand img { width: auto; height: 58px; }
  .footer-brand img { width: auto; height: 74px; }
}

.theme-toggle { order: 2; position: relative; display: grid; place-items: center; width: 38px; height: 38px; padding: 0; margin-left: auto; margin-right: 22px; color: #fff; background: rgba(6,31,61,.5); border: 1px solid rgba(255,255,255,.42); border-radius: 50%; box-shadow: 0 4px 14px rgba(0,0,0,.18); cursor: pointer; transition: transform .2s ease, background .2s ease, border-color .2s ease; }
.theme-toggle:hover { transform: translateY(-1px); background: rgba(6,31,61,.72); border-color: rgba(255,255,255,.8); }
.theme-toggle:focus-visible { outline: 3px solid var(--gold-light); outline-offset: 3px; }
.theme-toggle span { position: absolute; display: grid; place-items: center; font-size: 18px; line-height: 1; transition: opacity .2s ease, transform .2s ease; }
.theme-toggle .sun { color: #f4c860; opacity: 0; transform: scale(.65) rotate(-35deg); }
.theme-toggle .moon { color: #fff; opacity: 1; transform: scale(1) rotate(0); }

/* Header layout: navigation leads on desktop; controls frame a centred mobile logo. */
@media (min-width: 761px) {
  .nav { gap: 26px; }
  .nav-links { order: 1; margin-right: auto; }
  .theme-toggle { order: 2; margin: 0; }
  .brand { order: 3; padding-left: 26px; border-left: 1px solid rgba(255,255,255,.22); }
  .brand img { width: 148px; height: 76px; }
}

:root[data-theme='dark'] { --ink: #e6edf5; --muted: #b3c0ce; --cream: #0b1c2e; --white: #101f31; --line: #294158; }
:root[data-theme='dark'] body { background: #101f31; }
:root[data-theme='dark'] .about, :root[data-theme='dark'] .contact, :root[data-theme='dark'] .service-card { background: #101f31; }
:root[data-theme='dark'] .section-tint { background: #0b1c2e; }
:root[data-theme='dark'] .service-card { border-color: #294158; box-shadow: 0 8px 25px rgba(0,0,0,.18); }
:root[data-theme='dark'] .service-card:hover { box-shadow: 0 15px 32px rgba(0,0,0,.35); }
:root[data-theme='dark'] .service-card h3, :root[data-theme='dark'] .contact-form label { color: #f2f5f9; }
:root[data-theme='dark'] .contact-form input, :root[data-theme='dark'] .contact-form textarea { color: #f2f5f9; border-color: #496078; }
:root[data-theme='dark'] .theme-toggle { background: rgba(255,255,255,.12); }
:root[data-theme='dark'] .theme-toggle .sun { opacity: 1; transform: scale(1) rotate(0); }
:root[data-theme='dark'] .theme-toggle .moon { opacity: 0; transform: scale(.65) rotate(35deg); }
@media (max-width: 760px) {
  .nav { position: relative; justify-content: space-between; }
  .brand { position: absolute; left: 50%; transform: translateX(-50%); }
  .brand img { width: 112px; height: 62px; }
  .menu-toggle { order: 1; }
  .theme-toggle { order: 2; margin: 0; }
}

/* Final logo-card sizing: never stretch with the flex/grid layout. */
.brand, .footer-brand {
  width: fit-content;
  min-width: 0;
  justify-self: start;
  align-self: center;
  flex: 0 0 auto;
  padding: 2px;
  border: 1px solid #e7e9ec;
  border-radius: 7px;
  box-sizing: border-box;
}
.brand img, .footer-brand img {
  display: block;
  width: auto;
  max-width: none;
  object-fit: contain;
}
.brand img { height: 70px; }
.footer-brand img { height: 78px; }
@media (min-width: 761px) {
  .brand { padding-left: 2px; border-left: 1px solid #e7e9ec; }
  .brand img { width: auto; height: 70px; }
}
@media (max-width: 760px) {
  .brand img { width: auto; height: 56px; }
  .footer-brand img { width: auto; height: 70px; }
}

/* Nigeria-focused development scene for the hero. */
.hero {
  background-image: url('assets/nigeria-development-hero.png');
  background-position: center;
}