/* ==========================================================================
   Mpangane Consulting — stylesheet
   Palette drawn from the Mpangane brand mark: deep navy ink, sky-teal, warm coral.
   Type: Fraunces (display) + Inter (text/UI).
   ========================================================================== */

:root{
  --ink:        #16213E;
  --ink-soft:   #4B5568;
  --ink-faint:  #7C8797;
  --teal:       #2CB58E;
  --teal-deep:  #1B8D6D;
  --coral:      #D9694A;
  --coral-deep: #B84F34;
  --paper:      #FAF7F2;
  --paper-alt:  #F1ECE2;
  --card:       #FFFFFF;
  --line:       #E3DCCF;
  --panel-dark: #16213E;

  --serif: 'Fraunces', 'Iowan Old Style', Georgia, serif;
  --sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --maxw: 1180px;
  --radius: 4px;
}

*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; scroll-padding-top: 84px; }

body{
  margin: 0;
  background: var(--paper);
  color: var(--ink-soft);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img{ max-width: 100%; display: block; }

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

.container{
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 32px;
}

h1, h2, h3, h4{
  font-family: var(--serif);
  color: var(--ink);
  margin: 0;
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -0.01em;
}

h1{ font-size: clamp(2.4rem, 4.6vw, 3.8rem); }
h2{ font-size: clamp(1.9rem, 3.4vw, 2.6rem); }
h3{ font-size: 1.35rem; }

p{ margin: 0 0 1em; max-width: 62ch; }

.eyebrow{
  font-family: var(--sans);
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--teal-deep);
  margin: 0 0 14px;
}

.lede{
  font-size: 1.1rem;
  color: var(--ink-soft);
  max-width: 58ch;
}

.section{
  padding: 96px 0;
  border-bottom: 1px solid var(--line);
}
.section--alt{ background: var(--paper-alt); }
.section-head{
  max-width: 640px;
  margin-bottom: 52px;
}
.section-head.center{ margin-left: auto; margin-right: auto; text-align: center; }

/* ---------- buttons ---------- */
.btn{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 13px 26px;
  border-radius: var(--radius);
  font-family: var(--sans);
  font-weight: 600;
  font-size: 0.95rem;
  border: 1.5px solid transparent;
  cursor: pointer;
  transition: transform 0.15s ease, background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.btn:active{ transform: translateY(1px); }
.btn--primary{ background: var(--coral); color: #fff; }
.btn--primary:hover{ background: var(--coral-deep); }
.btn--ghost{ border-color: var(--ink); color: var(--ink); background: transparent; }
.btn--ghost:hover{ background: var(--ink); color: #fff; }
.btn--ghost-light{ border-color: rgba(255,255,255,0.55); color: #fff; }
.btn--ghost-light:hover{ background: rgba(255,255,255,0.12); border-color: #fff; }

/* ---------- header / nav ---------- */
.site-header{
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgba(250, 247, 242, 0.92);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}
.nav{
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 32px;
  max-width: var(--maxw);
  margin: 0 auto;
}
.nav__logo{ display: flex; align-items: center; }
.nav__logo img{ height: 40px; width: auto; }
.nav__links{
  display: flex;
  gap: 32px;
  list-style: none;
  margin: 0; padding: 0;
  font-size: 0.95rem;
  font-weight: 500;
}
.nav__links a{
  color: var(--ink-soft);
  padding-bottom: 4px;
  border-bottom: 2px solid transparent;
  transition: color 0.2s ease, border-color 0.2s ease;
}
.nav__links a:hover, .nav__links a.is-active{
  color: var(--ink);
  border-color: var(--coral);
}
.nav__cta{ display: flex; align-items: center; gap: 18px; }
.nav__toggle{
  display: none;
  background: none; border: none; cursor: pointer;
  width: 40px; height: 40px;
  flex-direction: column; align-items: center; justify-content: center; gap: 5px;
}
.nav__toggle span{ width: 22px; height: 2px; background: var(--ink); display: block; }

@media (max-width: 860px){
  .nav__links{
    position: fixed; inset: 68px 0 0 0;
    background: var(--paper);
    flex-direction: column;
    padding: 32px;
    gap: 22px;
    font-size: 1.15rem;
    transform: translateY(-8px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease, transform 0.2s ease;
  }
  .nav__links.is-open{ opacity: 1; transform: translateY(0); pointer-events: auto; }
  .nav__toggle{ display: flex; }
  .nav__cta .btn--ghost{ display: none; }
}

/* ---------- hero ---------- */
.hero{
  background: var(--panel-dark);
  color: #EDEFF5;
  position: relative;
  overflow: hidden;
  padding: 88px 0 0;
}
.hero::after{
  content: "";
  position: absolute;
  right: -12%;
  top: 10%;
  width: 620px;
  height: 620px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, rgba(44,143,181,0.35), transparent 65%);
  pointer-events: none;
}
.hero__grid{
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 48px;
  align-items: end;
  position: relative;
}
.hero__copy .eyebrow{ color: #8FD1EE; }
.hero__copy h1{ color: #fff; margin-bottom: 22px; }
.hero__copy p.lede{ color: #C7CCDA; }
.hero__actions{ display: flex; gap: 16px; margin-top: 32px; flex-wrap: wrap; }

.hero__stats{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: rgba(255,255,255,0.14);
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: var(--radius);
  overflow: hidden;
  margin-bottom: 8px;
}
.stat{
  background: rgba(255,255,255,0.03);
  padding: 26px 22px;
}
.stat strong{
  display: block;
  font-family: var(--serif);
  font-size: 2.1rem;
  color: #fff;
  line-height: 1;
  margin-bottom: 8px;
}
.stat span{ font-size: 0.85rem; color: #AEB4C3; }

.hero__strip{
  border-top: 1px solid rgba(255,255,255,0.14);
  margin-top: 64px;
  padding: 18px 0;
}
.hero__strip .container{
  display: flex;
  flex-wrap: wrap;
  gap: 10px 36px;
  font-size: 0.82rem;
  color: #AEB4C3;
  letter-spacing: 0.03em;
}

@media (max-width: 860px){
  .hero__grid{ grid-template-columns: 1fr; }
  .hero__stats{ grid-template-columns: 1fr 1fr; }
}

/* ---------- about ---------- */
.about__grid{
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 64px;
  align-items: start;
}
.about__body p{ max-width: 60ch; }
.founder-card{
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 32px;
}
.founder-card__top{ display: flex; gap: 16px; align-items: center; margin-bottom: 20px; }
.monogram{
  width: 58px; height: 58px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--serif); font-weight: 600; font-size: 1.2rem;
  color: #fff;
  flex-shrink: 0;
  background: linear-gradient(135deg, var(--teal), var(--ink));
}
.founder-card h3{ margin-bottom: 2px; }
.founder-card .role{ font-size: 0.88rem; color: var(--coral-deep); font-weight: 600; }
.founder-card ul{ margin: 18px 0 0; padding-left: 18px; font-size: 0.94rem; }
.founder-card li{ margin-bottom: 8px; }

.credential-row{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 28px;
}
.credential-row span{
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--ink);
  background: var(--paper-alt);
  border: 1px solid var(--line);
  padding: 7px 12px;
  border-radius: 100px;
}

@media (max-width: 860px){
  .about__grid{ grid-template-columns: 1fr; }
}

/* ---------- vision / mission / values ---------- */
.pillars{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}
.pillar{
  background: var(--paper);
  padding: 40px 34px;
}
.pillar svg{ width: 34px; height: 34px; margin-bottom: 22px; }
.pillar h3{ margin-bottom: 12px; }
.pillar p{ font-size: 0.96rem; }
.pillar ul{ padding-left: 18px; margin: 0; font-size: 0.96rem; }
.pillar li{ margin-bottom: 8px; }

@media (max-width: 860px){
  .pillars{ grid-template-columns: 1fr; }
}

/* ---------- services (tabs) ---------- */
.services__tabs{
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 40px;
  border-bottom: 1px solid var(--line);
}
.tab-btn{
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--sans);
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--ink-faint);
  padding: 12px 4px;
  margin-right: 28px;
  border-bottom: 2px solid transparent;
  transition: color 0.2s ease, border-color 0.2s ease;
}
.tab-btn:hover{ color: var(--ink); }
.tab-btn.is-active{ color: var(--ink); border-color: var(--coral); }

.tab-panel{ display: none; }
.tab-panel.is-active{ display: block; animation: fadeIn 0.35s ease; }
@keyframes fadeIn{ from{ opacity: 0; transform: translateY(6px); } to{ opacity: 1; transform: translateY(0); } }

.tab-panel__intro{ display: flex; justify-content: space-between; gap: 24px; margin-bottom: 32px; flex-wrap: wrap; }
.tab-panel__intro p{ margin: 0; }

.service-list{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px 40px;
  list-style: none;
  margin: 0; padding: 0;
}
.service-list li{
  display: flex;
  gap: 12px;
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
  font-size: 0.97rem;
  color: var(--ink);
}
.service-list li svg{ flex-shrink: 0; width: 18px; height: 18px; margin-top: 2px; color: var(--teal-deep); }

@media (max-width: 700px){
  .service-list{ grid-template-columns: 1fr; }
}

/* ---------- team ---------- */
.team__lead{
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 30px 32px;
  display: flex;
  gap: 20px;
  align-items: center;
  margin-bottom: 28px;
}
.team-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-bottom: 40px;
}
.team-card{
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 24px;
}
.team-card .monogram{ width: 46px; height: 46px; font-size: 0.95rem; margin-bottom: 16px; }
.team-card h4{ font-family: var(--sans); font-size: 1rem; color: var(--ink); margin-bottom: 2px; }
.team-card .role{ font-size: 0.85rem; color: var(--teal-deep); font-weight: 600; }

.team-support{
  border-top: 1px solid var(--line);
  padding-top: 28px;
}
.team-support h4{ font-family: var(--sans); font-size: 0.95rem; color: var(--ink-faint); margin-bottom: 14px; font-weight: 600; }
.team-support ul{ list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px 28px; }
.team-support li{ font-size: 0.95rem; color: var(--ink); }

@media (max-width: 860px){
  .team-grid{ grid-template-columns: 1fr 1fr; }
  .team__lead{ flex-direction: column; align-items: flex-start; }
}
@media (max-width: 560px){
  .team-grid{ grid-template-columns: 1fr; }
}

/* ---------- testimonials ---------- */
.quote-scroller{
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(280px, 360px);
  gap: 20px;
  overflow-x: auto;
  padding-bottom: 12px;
  scroll-snap-type: x proximity;
}
.quote-card{
  scroll-snap-align: start;
  background: var(--panel-dark);
  color: #EDEFF5;
  border-radius: var(--radius);
  padding: 30px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 220px;
}
.quote-card p{ font-family: var(--serif); font-size: 1.08rem; line-height: 1.5; color: #fff; margin: 0 0 20px; max-width: none; }
.quote-card footer{ font-size: 0.85rem; color: #9FA6BA; }
.quote-card footer strong{ color: #D9BDA5; display: block; font-size: 0.9rem; margin-bottom: 2px; }

/* ---------- contact ---------- */
.contact__grid{
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 64px;
}
.contact-details dl{ margin: 28px 0 0; }
.contact-details .field{ margin-bottom: 22px; }
.contact-details dt{ font-size: 0.78rem; font-weight: 600; letter-spacing: 0.03em; color: var(--ink-faint); margin-bottom: 4px; }
.contact-details dd{ margin: 0; font-size: 1rem; color: var(--ink); }

.badge-row{ display: flex; gap: 10px; margin-top: 28px; flex-wrap: wrap; }
.badge{
  font-size: 0.78rem; font-weight: 600; color: var(--ink);
  border: 1px solid var(--line); border-radius: 100px; padding: 7px 14px;
  background: var(--card);
}

.contact-form{
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 36px;
}
.form-row{ display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.field-group{ margin-bottom: 20px; }
.field-group label{ display: block; font-size: 0.85rem; font-weight: 600; color: var(--ink); margin-bottom: 7px; }
.field-group input, .field-group select, .field-group textarea{
  width: 100%;
  font-family: var(--sans);
  font-size: 0.97rem;
  padding: 11px 13px;
  border: 1.5px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper);
  color: var(--ink);
}
.field-group textarea{ resize: vertical; min-height: 110px; }
.field-group input:focus, .field-group select:focus, .field-group textarea:focus{
  outline: 2px solid var(--teal);
  outline-offset: 1px;
  border-color: var(--teal);
}
.form-note{ font-size: 0.83rem; color: var(--ink-faint); margin-top: 14px; margin-bottom: 0; }
.form-success{
  display: none;
  background: var(--paper-alt);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 16px 18px;
  font-size: 0.92rem;
  color: var(--ink);
  margin-top: 18px;
}
.form-success.is-visible{ display: block; }

@media (max-width: 860px){
  .contact__grid{ grid-template-columns: 1fr; }
  .form-row{ grid-template-columns: 1fr; }
}

/* ---------- footer ---------- */
/* ---------- Light Footer Styling ---------- */
.site-footer {
  background: #f8fafc; /* Clean light backdrop so the dark blue logo stands out */
  color: #475569; /* Darker gray body text for optimal contrast */
  padding: 56px 0 28px;
  border-top: 1px solid #e2e8f0;
}

.footer__top {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  padding-bottom: 32px;
}

.footer__brand img {
  max-width: 220px;
  height: auto;
  margin-bottom: 16px;
  display: block;
}

.footer__brand p {
  color: #475569;
  font-size: 0.95rem;
  line-height: 1.6;
}

.footer__links {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
}

.footer__links h5 {
  color: #0f172a; /* Dark heading text */
  font-size: 0.9rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 16px;
}

.footer__links ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer__links li {
  margin-bottom: 10px;
}

.footer__links a {
  color: #475569;
  text-decoration: none;
  transition: color 0.2s ease;
}

.footer__links a:hover {
  color: #0284c7; /* Subtle primary accent on hover */
}

/* Horizontal Map Section */
.footer__map-section {
  padding: 24px 0 32px;
  border-top: 1px solid #e2e8f0;
  border-bottom: 1px solid #e2e8f0;
}

.footer__map-section h5 {
  font-family: var(--sans);
  font-size: 0.85rem;
  color: #0f172a;
  margin: 0 0 12px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 700;
}

.map-container-full {
  width: 100%;
  border-radius: var(--radius, 8px);
  overflow: hidden;
  border: 1px solid #cbd5e1;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  line-height: 0;
}

.map-container-full iframe {
  filter: none; /* Clean map colors without dark filters */
}

/* Footer Bottom Bar & High-Visibility Signature */
.footer__bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
  padding-top: 24px;
  font-size: 0.85rem;
  color: #64748b;
}

.footer__credentials {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* Prominent SDS Signature Badge on Light Background */
.footer__signature {
  background: #0f172a; /* Dark pill badge to keep SDS branding high contrast */
  border: 1px solid #1e293b;
  padding: 8px 18px;
  border-radius: 20px;
  color: #ffffff;
  font-size: 0.88rem;
  font-weight: 500;
  letter-spacing: 0.02em;
}

.footer__signature a {
  color: #38bdf8; /* Bright link text inside the dark badge */
  font-weight: 700;
  text-decoration: none;
  border-bottom: 1px solid #38bdf8;
  padding-bottom: 1px;
  transition: color 0.2s ease, border-color 0.2s ease;
}

.footer__signature a:hover {
  color: #f43f5e;
  border-color: #f43f5e;
}

@media (max-width: 768px) {
  .footer__top {
    grid-template-columns: 1fr;
  }
  .footer__bottom {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* ---------- misc ---------- */
:focus-visible{ outline: 2px solid var(--teal); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce){
  *{ animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
}
/* restored feature styling */
.form-submit-frame{position:absolute;width:1px;height:1px;border:0;opacity:0;pointer-events:none}.modal{display:flex;position:fixed;inset:0;z-index:1000;align-items:center;justify-content:center;padding:20px;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .3s ease,visibility 0s linear .3s}.modal.is-open{opacity:1;visibility:visible;pointer-events:auto;transition:opacity .3s ease,visibility 0s linear 0s}.modal__backdrop{position:absolute;inset:0;background:rgba(10,20,40,.72);backdrop-filter:blur(5px)}.modal__dialog{position:relative;z-index:1;background:#fff;width:min(720px,100%);max-height:90vh;overflow:auto;padding:34px;border-radius:14px;box-shadow:0 30px 80px rgba(0,0,0,.25);transform:translateY(22px) scale(.96);opacity:0;transition:transform .38s cubic-bezier(.22,1,.36,1),opacity .3s ease}.modal.is-open .modal__dialog{transform:translateY(0) scale(1);opacity:1}.modal__close{position:absolute;right:18px;top:14px;border:0;background:none;font-size:30px;cursor:pointer;transition:transform .2s ease}.modal__close:hover{transform:rotate(90deg)}@media(prefers-reduced-motion:reduce){.modal,.modal__dialog,.modal__close{transition:none!important;transform:none!important}}.modal-form{display:grid;gap:16px}.consent-check{display:flex;gap:8px;align-items:flex-start;font-size:.9rem}.form-success{display:none}.form-success.is-visible{display:block}.estimate-result{margin-top:20px;padding:18px;border-radius:8px;background:#f2f6f8}.brochure-link{margin-top:22px}.whatsapp-link{display:inline-block;margin:20px 0;padding:11px 16px;border-radius:7px;border:1px solid var(--line);text-decoration:none}.rooted-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:36px}.rooted-grid figure{margin:0;border-radius:12px;overflow:hidden;border:1px solid var(--line)}.rooted-grid img{width:100%;height:220px;object-fit:cover;display:block}@media(max-width:760px){.rooted-grid{grid-template-columns:1fr 1fr}}@media(max-width:480px){.rooted-grid{grid-template-columns:1fr}}
.insights-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}.insight-card{padding:26px;border:1px solid var(--line);border-radius:10px;background:var(--card)}.insight-card span{font-size:.78rem;text-transform:uppercase;letter-spacing:.12em;color:var(--teal-deep);font-weight:700}.faq-list{max-width:850px;margin:auto}.faq-list details{border-bottom:1px solid var(--line);padding:18px 0}.faq-list summary{cursor:pointer;font-weight:700}.faq-list p{margin:12px 0 0}.estimator-card{display:flex;align-items:center;justify-content:space-between;gap:30px;padding:35px;border:1px solid var(--line);border-radius:12px;background:var(--card)}.footer-privacy{border:0;background:none;padding:0;cursor:pointer;font:inherit;color:inherit}.count-up{display:inline-block}@media(max-width:760px){.insights-grid{grid-template-columns:1fr}.estimator-card{display:block}.estimator-card .btn{margin-top:20px}.modal__dialog{padding:28px 20px}}

/* ================================================================
   PREMIUM MOTION LAYER
   All reveal motion uses transforms rather than opacity, so content
   remains visible even when the page is refreshed or JS is delayed.
   ================================================================ */
.site-header .nav,
.hero__copy,
.hero__stats,
.hero__strip,
.section-head,
.about__body,
.founder-card,
.pillar,
.team-card,
.team-support,
.quote-card,
.insight-card,
.faq-list,
.estimator-card,
.contact-details,
.contact-form,
.map-container-full {
  will-change: transform;
}

.btn,
.tab-btn,
.team-card,
.insight-card,
.quote-card,
.founder-card,
.pillar,
.whatsapp-link,
.map-container-full {
  transform-style: preserve-3d;
  backface-visibility: hidden;
}

.hero__stats .stat {
  transition: transform .28s ease, box-shadow .28s ease;
}
.hero__stats .stat:hover {
  transform: translateY(-6px) scale(1.015);
}

.service-list li {
  transition: transform .2s ease, padding-left .2s ease;
}
.service-list li:hover {
  transform: translateX(6px);
  padding-left: 4px;
}

.tab-btn {
  position: relative;
  overflow: hidden;
}
.tab-btn::after {
  content: '';
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 5px;
  height: 2px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: center;
  transition: transform .28s ease;
}
.tab-btn:hover::after,
.tab-btn.is-active::after {
  transform: scaleX(1);
}

.insight-card,
.team-card,
.quote-card,
.founder-card {
  transition: box-shadow .3s ease, border-color .3s ease;
}
.insight-card:hover,
.team-card:hover,
.quote-card:hover,
.founder-card:hover {
  box-shadow: 0 18px 45px rgba(15, 23, 42, .12);
}

.pillar svg {
  transform-origin: center;
  will-change: transform;
}

.faq-list details summary {
  transition: transform .22s ease, color .22s ease;
}
.faq-list details summary:hover {
  transform: translateX(4px);
}

.contact-form .field-group input:focus,
.contact-form .field-group textarea:focus,
.contact-form .field-group select:focus,
.modal-form .field-group input:focus,
.modal-form .field-group textarea:focus,
.modal-form .field-group select:focus {
  box-shadow: 0 0 0 4px rgba(2, 132, 199, .09);
}

.whatsapp-link {
  will-change: transform;
}

@media (max-width: 768px) {
  .hero__copy,
  .hero__stats,
  .section-head,
  .about__body,
  .founder-card,
  .pillar,
  .team-card,
  .team-support,
  .quote-card,
  .insight-card,
  .faq-list,
  .estimator-card,
  .contact-details,
  .contact-form,
  .map-container-full {
    will-change: auto;
  }
}

/* ================================================================
   BUSINESS NETWORK HERO — Mpangane Consulting
   Professional consulting/data-intelligence motion, not generic particles.
   ================================================================ */
.hero{position:relative;overflow:hidden;isolation:isolate}
#business-network-canvas{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}
.hero__grid,.hero__strip{position:relative;z-index:3}
.hero-network-hud{position:absolute!important;right:6%;top:18%;width:350px;height:350px;z-index:1!important;pointer-events:none;opacity:.72}
.network-ring{position:absolute;inset:18px;border:1px solid rgba(44,143,181,.25);border-radius:50%;box-shadow:0 0 55px rgba(44,143,181,.08);animation:networkRotate 24s linear infinite}
.network-ring--inner{inset:66px;border-style:dashed;border-color:rgba(217,105,74,.25);animation-duration:17s;animation-direction:reverse;transform:scaleY(.7)}
.network-core{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:128px;height:128px;border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;color:#fff;text-align:center;background:radial-gradient(circle at 35% 25%,rgba(44,143,181,.9),rgba(22,33,62,.96));border:1px solid rgba(255,255,255,.28);box-shadow:0 0 45px rgba(44,143,181,.25),0 22px 55px rgba(22,33,62,.18);backdrop-filter:blur(10px)}
.network-core small{font-size:10px;letter-spacing:.22em;opacity:.7}.network-core strong{font-size:19px;letter-spacing:.08em}.network-core span{font-size:6px;letter-spacing:.14em;opacity:.65}
.network-node{position:absolute;width:10px;height:10px;border-radius:50%;background:#fff;box-shadow:0 0 0 6px rgba(44,143,181,.10),0 0 20px rgba(44,143,181,.8);animation:networkPulse 2.5s ease-in-out infinite}
.n1{left:16%;top:30%}.n2{right:10%;top:44%;animation-delay:.55s}.n3{left:29%;bottom:10%;animation-delay:1s}.n4{right:27%;top:8%;animation-delay:1.55s;background:#ffd7ce;box-shadow:0 0 0 6px rgba(217,105,74,.10),0 0 20px rgba(217,105,74,.75)}
@keyframes networkRotate{to{transform:rotate(360deg)}}
@keyframes networkPulse{50%{transform:scale(1.45);opacity:.55}}
@media(max-width:860px){.hero-network-hud{right:-110px;top:20%;transform:scale(.82);opacity:.34}}
@media(max-width:600px){.hero-network-hud{display:none}}
@media(prefers-reduced-motion:reduce){.network-ring,.network-node{animation:none!important}}

.nav__company-mark {
  width: 78px;
  height: 48px;
  margin-left: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  background: #ffffff;
  border-radius: 6px;
  padding: 4px 6px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.nav__company-mark img {
  display: block;
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}

.nav__company-mark:hover {
  opacity: 0.95;
  transform: scale(1.02);
}

@media (max-width: 760px) {
  .nav__company-mark {
    width: 58px;
    height: 38px;
    margin-left: 8px;
    padding: 3px 4px;
  }
}
/* Restored / upgraded Mpangane features */
.nav__tools{display:flex;align-items:center;gap:6px}.nav__tools select,.access-tool{height:34px;border:1px solid var(--line);border-radius:7px;background:var(--card);color:var(--ink);font:600 .75rem var(--sans);padding:0 7px;cursor:pointer}.access-tool{min-width:34px}.founder-video-card{grid-column:1/-1;border:1px solid var(--line);border-radius:12px;background:var(--card);padding:18px;margin-top:4px}.founder-video{aspect-ratio:16/7;background:#0f172a;border-radius:9px;overflow:hidden}.founder-video video{width:100%;height:100%;object-fit:cover}.founder-video-card p{margin:12px 0 5px}.founder-video-card small{color:var(--ink-soft)}.team-specialism{font-size:.82rem;color:var(--ink-soft);margin-top:6px}.recognition-strip{margin-top:50px;padding-top:34px;border-top:1px solid var(--line)}.recognition-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.recognition-grid>div{padding:22px;border:1px solid var(--line);border-radius:10px;background:var(--card);text-align:center}.recognition-grid strong{display:block;letter-spacing:.1em;font-size:1.05rem}.recognition-grid span{display:block;color:var(--ink-soft);font-size:.8rem;margin-top:7px}.service-finder-card{max-width:850px;margin:auto;padding:30px;border:1px solid var(--line);border-radius:14px;background:var(--card);box-shadow:0 18px 45px rgba(15,23,42,.07)}.finder-step{display:none}.finder-step.is-active{display:block}.finder-progress{font-size:.72rem;text-transform:uppercase;letter-spacing:.12em;color:var(--teal-deep);font-weight:700}.finder-options{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:18px}.finder-options button{padding:16px;border:1px solid var(--line);border-radius:9px;background:transparent;color:var(--ink);text-align:left;font:600 .9rem var(--sans);cursor:pointer}.finder-options button:hover{border-color:var(--teal-deep);background:var(--paper-alt)}.finder-result{display:none;margin-top:18px;padding:18px;border-radius:9px;background:var(--paper-alt)}.finder-result.is-visible{display:block}.reach-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:22px;align-items:stretch}.reach-visual{border:1px solid var(--line);border-radius:22px;background:var(--card);padding:22px;box-shadow:0 14px 40px rgba(15,23,42,.06)}.reach-visual__title{display:flex;justify-content:space-between;font-weight:800;font-size:.82rem;text-transform:uppercase;letter-spacing:.08em}.reach-visual__title small{font-size:.7rem;color:var(--ink-soft);font-weight:600;text-transform:none;letter-spacing:0}.sa-silhouette{height:390px;max-width:360px;margin:auto;position:relative;clip-path:polygon(27% 0,63% 4%,89% 22%,84% 45%,94% 68%,77% 91%,51% 100%,27% 89%,13% 69%,5% 43%,14% 17%);background:#edf1f3}.sa-province{position:absolute;padding:5px 7px;border-radius:6px;background:rgba(255,255,255,.8);font-size:.65rem;color:#53616a;border:1px solid #cbd3d7;text-align:center}.sa-province span{display:block;font-size:.54rem;font-weight:800}.sa-province.gp{left:48%;top:39%;background:#2CB58E;color:#fff;border-color:#2CB58E}.sa-province.mp{left:61%;top:29%;background:#2CB58E;color:#fff;border-color:#2CB58E}.sa-province.kzn{left:65%;top:55%;background:#2CB58E;color:#fff;border-color:#2CB58E}.sa-province.wc{left:13%;top:68%}.sa-province.fs{left:42%;top:62%}.sa-province.ec{left:52%;top:80%}.sa-province.lim{left:52%;top:13%}.sa-province.nw{left:27%;top:39%}.sa-province.nc{left:25%;top:82%}.reach-legend{display:flex;gap:20px;border-top:1px solid var(--line);padding-top:13px;font-size:.8rem;color:var(--ink-soft)}.reach-legend i{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:6px}.reach-legend .in{background:#2CB58E}.reach-legend .digital{background:#cfd7db}.reach-cards{display:grid;grid-template-columns:1fr 1fr;gap:14px}.reach-card{padding:23px;border:1px solid var(--line);border-radius:16px;background:var(--card)}.reach-card>span{font-size:.65rem;letter-spacing:.12em;font-weight:800;color:var(--teal-deep)}.reach-card h3{margin:9px 0 7px}.reach-card p{font-size:.84rem;color:var(--ink-soft);line-height:1.55}.reach-card a{font-size:.78rem;font-weight:800;text-decoration:none;color:var(--ink)}.reach-card--digital{grid-column:1/-1;background:#17283d;color:#fff;border-color:#17283d}.reach-card--digital p{color:#d4dde3}.reach-card--digital a{color:#fff}.prep-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;max-width:900px;margin:auto}.prep-card{padding:26px;border:1px solid var(--line);border-radius:12px;background:var(--card)}.prep-card>span{display:inline-flex;width:38px;height:38px;align-items:center;justify-content:center;border-radius:50%;background:var(--ink);color:#fff;font-weight:800}.prep-card h3{margin-top:15px}.prep-card p{color:var(--ink-soft)}.privacy-consent{display:flex;gap:8px;align-items:flex-start;font-size:.8rem;line-height:1.45;color:var(--ink-soft)}.privacy-consent input{margin-top:3px}.privacy-note{margin:5px 0 10px;padding:13px 15px;border-left:3px solid var(--teal-deep);background:var(--paper-alt);font-size:.8rem;line-height:1.5;color:var(--ink-soft)}.footer-accessibility{display:flex;justify-content:center;align-items:center;gap:10px;flex-wrap:wrap;padding:20px 0;border-top:1px solid rgba(255,255,255,.12);color:rgba(255,255,255,.75);font-size:.8rem}.footer-accessibility button{border:1px solid rgba(255,255,255,.3);background:transparent;color:#fff;border-radius:6px;padding:6px 9px;cursor:pointer}body.text-large{font-size:18px}body.high-contrast{--paper:#fff;--paper-alt:#f0f0f0;--ink:#000;--ink-soft:#222;--line:#333;--card:#fff}
body.theme-green{--ink:#F3F1E7;--ink-soft:#C9D3C9;--ink-faint:#93A398;--teal:#34D399;--teal-deep:#20B37E;--coral:#E08659;--coral-deep:#C86A3D;--paper:#0F1D17;--paper-alt:#16261E;--card:#14231C;--line:#24352C;--panel-dark:#0C1F16}
body.theme-green .access-tool#theme-toggle,body.theme-green #footer-theme{background:var(--teal-deep);color:#0F1D17;border-color:var(--teal-deep)}
body.theme-green .site-header{background:rgba(15,29,23,.92)}
body.theme-green .quote-card p{color:#F3F1E7}
body.theme-green .reach-card--digital{background:#0A140F;border-color:#24352C}
body.theme-green .modal__dialog{background:var(--card);color:var(--ink)}
body.theme-green .sa-silhouette{background:#1B2A22}
body.theme-green .sa-province{background:rgba(255,255,255,.09);color:#E7EFE9;border-color:rgba(255,255,255,.22)}
body.theme-green .sa-province.gp,body.theme-green .sa-province.mp,body.theme-green .sa-province.kzn{background:#34D399;color:#0C1F16;border-color:#34D399}.sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}@media(max-width:900px){.reach-grid{grid-template-columns:1fr}.reach-visual{max-width:680px;margin:auto;width:100%}}@media(max-width:700px){.recognition-grid,.prep-grid,.reach-cards,.finder-options{grid-template-columns:1fr}.reach-card--digital{grid-column:auto}.founder-video-card{grid-column:auto}.nav__tools{display:none}.sa-silhouette{height:330px}}
.form-success.is-error{background:#fbeaea;border-color:#d9534f;color:#8a1f1a}