/* ==========================================================================
   DANNAK CIVIL & STRUCTURAL SOLUTIONS
   Layout patterns modeled on Consar Ltd / Knight Piésold corporate sites.
   ========================================================================== */

:root{
  /* Dannak brand tokens , construction green + safety amber */
  --text:          #1C242B;
  --grey-700:      #4C5761;
  --grey-500:      #7C8791;
  --grey-200:      #E3E6E8;
  --grey-100:      #F4F5F6;
  --grey-50:       #FAFBFA;
  --white:         #FFFFFF;
  --surface:       #FFFFFF;

  --primary:       #2F6B3F;
  --primary-dark:  #234E2F;
  --primary-tint:  #E9F2EA;
  --secondary:     #C97A2B;
  --secondary-tint:#F5EBDD;
  --success:       #2F6B3F;
  --success-tint:  #E9F2EA;
  --warning:       #C97A2B;
  --warning-tint:  #F5EBDD;
  --danger:        #B3372C;
  --danger-tint:   #FBEAE8;
  --safety:        #E8A62E;
  --line:          #E1E4E6;

  --font-display: "Archivo", sans-serif;
  --font-body:    "Inter", sans-serif;
  --font-mono:    "Inconsolata", monospace;

  --maxw: 1280px;
  --gutter: clamp(20px, 5vw, 56px);

  /* 8pt spacing scale */
  --space-1: 8px;  --space-2: 16px; --space-3: 24px; --space-4: 32px;
  --space-5: 40px; --space-6: 48px; --space-7: 64px; --space-8: 88px;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--white);
  color:var(--text);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
::selection{ background:var(--primary); color:var(--white); }
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ margin:0; padding:0; list-style:none; }
h1,h2,h3,h4{ margin:0; font-family:var(--font-display); font-weight:700; }
p{ margin:0; }
button{ font-family:inherit; }

.wrap{ max-width:var(--maxw); margin:0 auto; padding-left:var(--gutter); padding-right:var(--gutter); }

a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible{
  outline:2px solid var(--primary);
  outline-offset:3px;
}
@media (prefers-reduced-motion: reduce){
  *{ animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; scroll-behavior:auto !important; }
}

/* ==========================================================================
   Utility bar + header (Knight Piésold pattern)
   ========================================================================== */

.utility-bar{
  background:var(--grey-100);
  border-bottom:1px solid var(--line);
}
.utility-bar--bottom{
  border-bottom:none;
  border-top:1px solid var(--line);
}
.utility-bar .wrap{
  display:flex; justify-content:flex-end; align-items:center;
  height:38px; gap:24px;
}
.utility-bar a{
  font-size:12.5px; color:var(--grey-700); letter-spacing:0.01em;
  display:inline-flex; align-items:center; gap:6px;
}
.utility-bar a:hover{ color:var(--primary-dark); }
.utility-bar .u-sep{ width:1px; height:12px; background:var(--line); }
@media (max-width:640px){ .utility-bar .wrap{ justify-content:center; gap:16px; } }

.site-header{
  position:sticky; top:0; z-index:60;
  background:var(--white);
  border-bottom:1px solid var(--line);
  transition:box-shadow 0.25s ease, border-color 0.25s ease;
}
.site-header.is-scrolled{
  box-shadow:0 12px 32px rgba(16,24,31,0.08);
  border-bottom-color:transparent;
}
.site-header .wrap{
  display:flex; align-items:center; justify-content:space-between;
  height:82px;
}
.brand{ display:flex; align-items:center; gap:10px; color:var(--text); }
.brand-logo{ height:32px; width:auto; display:block; }
.brand-mark{
  font-family:var(--font-display);
  font-size:23px; font-weight:800; letter-spacing:0.01em;
}
.brand-mark .dot{ color:var(--primary); }
.brand-sub{
  font-size:10.5px; letter-spacing:0.09em; text-transform:uppercase; color:var(--grey-500);
  border-left:1px solid var(--line); padding-left:10px; line-height:1.3; max-width:110px;
}

.main-nav{ display:flex; align-items:stretch; gap:2px; height:100%; }
.main-nav > li{ position:relative; display:flex; align-items:center; }
.main-nav > li > a{
  font-size:13.5px; font-weight:600; color:var(--grey-700);
  padding:10px 16px; display:inline-flex; align-items:center; gap:6px;
  transition:color 0.15s ease;
}
.main-nav > li > a:hover, .main-nav > li > a.active{ color:var(--primary-dark); }
.main-nav > li > a.active{ position:relative; }
.main-nav > li > a.active::after{
  content:""; position:absolute; left:16px; right:16px; bottom:0; height:2px; background:var(--primary);
}
.caret{ font-size:9px; transform:translateY(1px); opacity:0.7; }

.dropdown{
  position:absolute; top:100%; left:0; min-width:250px;
  background:var(--white);
  border:1px solid var(--line);
  box-shadow:0 18px 40px rgba(20,24,28,0.10);
  padding:10px 0;
  opacity:0; visibility:hidden; transform:translateY(6px);
  transition:opacity 0.15s ease, transform 0.15s ease, visibility 0.15s;
  z-index:70;
}
.main-nav > li:hover .dropdown,
.main-nav > li:focus-within .dropdown{ opacity:1; visibility:visible; transform:translateY(0); }
.dropdown a{
  display:block; padding:11px 22px; font-size:13.5px; color:var(--text); font-weight:500;
  border-left:2px solid transparent;
}
.dropdown a:hover{ background:var(--grey-100); border-left-color:var(--primary); color:var(--primary-dark); }

.nav-contact-btn{
  margin-left:14px;
  background:var(--primary);
  color:var(--white) !important;
  padding:11px 20px !important;
  font-weight:700 !important;
  border-radius:2px;
}
.nav-contact-btn:hover{ background:var(--primary-dark); color:var(--white) !important; }

.nav-toggle{ display:none; }

@media (max-width:960px){
  .main-nav{
    position:fixed; inset:120px 0 0 0; height:auto;
    background:var(--white);
    flex-direction:column; align-items:stretch;
    padding:8px var(--gutter) 32px;
    transform:translateX(100%);
    transition:transform 0.25s ease;
    overflow:auto; gap:0;
  }
  .main-nav.open{ transform:translateX(0); }
  .main-nav > li{ display:block; border-bottom:1px solid var(--line); }
  .main-nav > li > a{ padding:16px 4px; justify-content:space-between; width:100%; color:var(--text); }
  .main-nav > li > a.active::after{ display:none; }
  .dropdown{ position:static; box-shadow:none; opacity:1; visibility:visible; transform:none; display:none; padding:0 0 10px; background:transparent; border:none; }
  .main-nav > li.nav-open .dropdown{ display:block; }
  .dropdown a{ color:var(--grey-700); padding:10px 14px; }
  .dropdown a:hover{ background:transparent; color:var(--primary-dark); }
  .nav-contact-btn{ margin:16px 0 0; text-align:center; justify-content:center; display:block; }
  .nav-toggle{
    display:flex; flex-direction:column; gap:5px;
    background:none; border:none; padding:8px; cursor:pointer;
  }
  .nav-toggle span{ width:24px; height:2px; background:var(--text); display:block; }
}

/* ==========================================================================
   Eyebrow / section heads
   ========================================================================== */

.eyebrow{
  font-size:12.5px; font-weight:700; letter-spacing:0.1em; text-transform:uppercase;
  color:var(--primary-dark);
}

.section-head{ max-width:920px; margin-bottom:40px; }
.section-head h2{ font-size:clamp(28px,3.6vw,42px); margin-top:10px; line-height:1.15; }
.section-head p{ margin-top:16px; color:var(--grey-700); font-size:16px; max-width:none; }
.section-head.center{ margin-left:auto; margin-right:auto; text-align:center; }

/* ==========================================================================
   Buttons
   ========================================================================== */

.btn{
  display:inline-flex; align-items:center; gap:10px;
  font-size:14px; font-weight:700;
  padding:14px 26px;
  border:1px solid transparent;
  cursor:pointer;
  border-radius:3px;
  transition:background 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
.btn-primary{ background:var(--primary); color:var(--white); box-shadow:0 1px 2px rgba(20,40,18,0.15); }
.btn-primary:hover{ background:var(--primary-dark); transform:translateY(-2px); box-shadow:0 14px 28px rgba(47,95,44,0.28); }
.btn-primary:active{ transform:translateY(0); }
.btn-outline-light{ background:transparent; color:var(--white); border-color:rgba(255,255,255,0.4); }
.btn-outline-light:hover{ border-color:var(--white); background:rgba(255,255,255,0.08); transform:translateY(-2px); }
.btn-outline-dark{ background:transparent; color:var(--text); border-color:var(--line); }
.btn-outline-dark:hover{ border-color:var(--primary); color:var(--primary-dark); transform:translateY(-2px); }
.link-arrow{
  display:inline-flex; align-items:center; gap:8px;
  font-size:13.5px; font-weight:700; letter-spacing:0.03em; text-transform:uppercase;
  color:var(--primary-dark);
  border-bottom:1px solid transparent;
}
.link-arrow:hover{ border-color:var(--primary-dark); }

/* ==========================================================================
   Hero (Consar pattern , heading + stacked checkmark fact blocks)
   ========================================================================== */

.hero{
  background:
    linear-gradient(180deg, rgba(9,14,12,0.78) 0%, rgba(9,14,12,0.62) 38%, rgba(9,14,12,0.88) 100%),
    url('https://images.pexels.com/photos/2219024/pexels-photo-2219024.jpeg?auto=compress&cs=tinysrgb&w=1920') center 30% / cover no-repeat;
  color:var(--white);
  position:relative;
  overflow:hidden;
  padding:150px 0 96px;
}
.hero::before{
  content:"";
  position:absolute; inset:0;
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,0.035) 0px, rgba(255,255,255,0.035) 1px, transparent 1px, transparent 88px),
    repeating-linear-gradient(0deg, rgba(255,255,255,0.035) 0px, rgba(255,255,255,0.035) 1px, transparent 1px, transparent 88px);
  pointer-events:none;
  opacity:0.5;
}
.hero-inner{ position:relative; z-index:2; }
.hero-grid{ display:block; padding-bottom:0; }
.hero-facts-row{
  display:grid; grid-template-columns:1fr 1fr;
  background:rgba(12,18,15,0.55);
  border:1px solid rgba(255,255,255,0.14);
  margin-top:56px;
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border-radius:14px;
  overflow:hidden;
  box-shadow:0 32px 64px rgba(0,0,0,0.3);
  position:relative;
}
.hero-facts-row::before{
  content:"";
  position:absolute; top:14%; bottom:14%; left:50%;
  width:1px; background:rgba(255,255,255,0.14);
}
@media (max-width:760px){
  .hero-facts-row{ grid-template-columns:1fr; }
  .hero-facts-row::before{ display:none; }
}

.hero .eyebrow{
  color:#B7E6B0;
  display:inline-flex; align-items:center; gap:10px;
}
.hero .eyebrow::before{ content:""; width:28px; height:2px; background:#7FCB77; display:inline-block; }

.hero h1{
  font-size:clamp(42px,6vw,68px);
  line-height:1.06;
  color:var(--white);
  margin-top:16px;
  letter-spacing:-0.01em;
}
.hero h1 .accent{ color:#7FCB77; }
.hero-lede{ margin-top:22px; color:rgba(255,255,255,0.82); font-size:18px; max-width:640px; }
.hero-cta{ display:flex; gap:14px; margin-top:36px; flex-wrap:wrap; }

.fact-stack{ display:contents; }
.fact-block{ padding:34px 38px; background:transparent; }
.fact-block h3{
  font-size:14.5px; font-weight:700; text-transform:uppercase; letter-spacing:0.08em; margin-bottom:20px; color:#9FD79A;
}
.fact-item{ display:flex; align-items:center; gap:13px; margin-top:16px; font-size:15px; color:rgba(255,255,255,0.92); line-height:1.4; }
.fact-item:first-of-type{ margin-top:0; }
.check{
  flex:none; width:18px; height:18px; margin-top:2px;
  color:var(--primary);
}
.hero .fact-item .check{
  width:28px; height:28px; margin-top:0; padding:7px; box-sizing:border-box;
  color:#0E1512; background:#7FCB77; border-radius:50%;
}

.scroll-cue{
  position:absolute; left:50%; bottom:28px; transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:8px;
  color:rgba(255,255,255,0.6); font-size:10.5px; letter-spacing:0.12em; text-transform:uppercase;
  z-index:2;
}
.scroll-cue .line{ width:1px; height:34px; background:linear-gradient(180deg, rgba(255,255,255,0.7), transparent); animation:scroll-cue-move 1.8s ease-in-out infinite; }
@keyframes scroll-cue-move{
  0%{ transform:scaleY(0.3); transform-origin:top; opacity:0.4; }
  50%{ transform:scaleY(1); transform-origin:top; opacity:1; }
  100%{ transform:scaleY(0.3); transform-origin:bottom; opacity:0.4; }
}
@media (max-width:640px){ .scroll-cue{ display:none; } }

/* ==========================================================================
   Page banner (interior pages)
   ========================================================================== */

.page-banner{
  background:
    linear-gradient(180deg, rgba(9,14,12,0.82) 0%, rgba(9,14,12,0.72) 100%),
    var(--pb-img, url('https://images.pexels.com/photos/1216589/pexels-photo-1216589.jpeg?auto=compress&cs=tinysrgb&w=1600')) center 40% / cover no-repeat;
  color:var(--white);
  padding:96px 0 68px;
  position:relative;
}
.page-banner h1{ font-size:clamp(34px,5.4vw,52px); margin-top:12px; color:var(--white); }
.page-banner .lede{ max-width:640px; margin-top:16px; color:rgba(255,255,255,0.82); font-size:16.5px; }
.page-banner .eyebrow{ color:#9FD79A; }
.breadcrumb{ font-size:12.5px; color:rgba(255,255,255,0.6); margin-bottom:16px; }
.breadcrumb a:hover{ color:#9FD79A; }

/* ==========================================================================
   Sections
   ========================================================================== */

section{ padding:88px 0; }
.section-tight{ padding:56px 0; }
.on-grey{ background:var(--grey-100); }

/* ==========================================================================
   Service cards (Consar "Our Services" pattern)
   ========================================================================== */

.service-grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:22px;
}
@media (max-width:900px){ .service-grid{ grid-template-columns:1fr; } }
.service-card{
  background:var(--white); border:1px solid var(--line); border-radius:6px;
  display:flex; flex-direction:column; overflow:hidden;
  transition:transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}
.service-card:hover{
  transform:translateY(-6px);
  box-shadow:0 24px 48px rgba(16,24,31,0.14);
  border-color:transparent;
}
.service-card .sc-figure{
  aspect-ratio:16/10; background-size:cover; background-position:center; background-repeat:no-repeat;
  position:relative; overflow:hidden;
  transition:background-size 0.5s ease;
}
.service-card:hover .sc-figure{ background-size:112%; }
.service-card .sc-figure::after{
  content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(16,24,31,0) 50%, rgba(16,24,31,0.5) 100%);
}
.service-card .sc-body{ padding:26px 28px 32px; }
.service-card h3{ font-size:18px; margin-bottom:10px; line-height:1.3; }
.service-card p{ font-size:14px; color:var(--grey-700); }
.service-card .link-arrow{ margin-top:16px; opacity:0; transform:translateX(-6px); transition:opacity 0.25s ease, transform 0.25s ease; }
.service-card:hover .link-arrow{ opacity:1; transform:translateX(0); }

/* alternating service rows (Services page) */
.service-row{ display:grid; grid-template-columns:0.9fr 1.1fr; gap:56px; align-items:center; padding:52px 0; border-bottom:1px solid var(--line); }
.service-row:first-child{ padding-top:0; }
.service-row:last-child{ border-bottom:none; }
.service-row.reverse{ direction:rtl; }
.service-row.reverse > *{ direction:ltr; }
@media (max-width:860px){ .service-row, .service-row.reverse{ grid-template-columns:1fr; direction:ltr; gap:24px; } }
.service-row-figure{
  aspect-ratio:4/3; border:1px solid var(--line); position:relative; overflow:hidden;
  background-size:cover; background-position:center;
}
.service-row-figure::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(16,24,31,0.05) 0%, rgba(16,24,31,0.45) 100%);
}
.service-row-figure .tag{
  position:absolute; top:16px; left:16px; background:var(--primary); color:var(--white);
  font-size:11px; font-weight:700; letter-spacing:0.05em; text-transform:uppercase; padding:5px 11px;
  z-index:2;
}
.service-row-figure img{ width:100%; height:100%; object-fit:cover; display:block; }
.photo-credit{
  position:absolute; bottom:8px; right:10px; z-index:2;
  font-size:10px; color:rgba(255,255,255,0.75); letter-spacing:0.02em;
}
.photo-credit a{ color:rgba(255,255,255,0.85); }
.service-row h3{ font-size:26px; margin-bottom:14px; }
.service-row p{ color:var(--grey-700); font-size:15px; }
.service-row .bullets{ margin-top:18px; display:flex; flex-direction:column; gap:10px; }
.service-row .bullets li{ display:flex; gap:10px; align-items:flex-start; font-size:14.5px; color:var(--text); }
.service-row .bullets .check{ color:var(--primary); }

/* ==========================================================================
   Presence section (Consar "Building a Better Future for Africa")
   ========================================================================== */

.presence-grid{ display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center; }
@media (max-width:900px){ .presence-grid{ grid-template-columns:1fr; } }
.presence-map-panel{ border:1px solid var(--line); border-radius:8px; overflow:hidden; box-shadow:0 24px 48px rgba(16,24,31,0.08); }
.presence-map-panel-head{ display:flex; justify-content:space-between; align-items:center; padding:14px 20px; border-bottom:1px solid var(--line); background:var(--grey-100); flex-wrap:wrap; gap:8px; }
.presence-map-panel-head h4{ font-size:12.5px; font-weight:700; text-transform:uppercase; letter-spacing:0.05em; }
.presence-map-panel-head .note{ font-size:11.5px; color:var(--grey-500); }
.presence-list{ margin-top:22px; display:flex; flex-direction:column; gap:0; }

/* ==========================================================================
   Featured projects (Consar link-list pattern)
   ========================================================================== */

.feature-list{ display:flex; flex-direction:column; }
.feature-row{
  display:flex; justify-content:space-between; align-items:center; gap:24px;
  padding:30px 0; border-top:1px solid var(--line);
  flex-wrap:wrap;
}
.feature-row:last-child{ border-bottom:1px solid var(--line); }
.feature-row .f-index{ font-size:13px; color:var(--grey-500); font-weight:700; width:36px; flex:none; }
.feature-row .f-title{ flex:1; min-width:240px; }
.feature-row h3{ font-size:22px; font-weight:700; }
.feature-row .f-meta{ font-size:13px; color:var(--grey-500); margin-top:6px; }
.feature-row:hover h3{ color:var(--primary-dark); }

/* ==========================================================================
   Team strip
   ========================================================================== */

.team-grid{ display:grid; grid-template-columns:repeat(5,1fr); gap:24px; }
@media (max-width:980px){ .team-grid{ grid-template-columns:repeat(3,1fr); } }
@media (max-width:640px){ .team-grid{ grid-template-columns:repeat(2,1fr); } }
.team-card{ text-align:left; }
.team-avatar{
  aspect-ratio:1; background-color:var(--grey-100); background-size:cover; background-position:center top;
  border:1px solid var(--line); border-radius:6px;
  margin-bottom:16px;
  position:relative; overflow:hidden;
  filter:grayscale(45%);
  transition:filter 0.4s ease, background-size 0.5s ease, box-shadow 0.4s ease;
}
.team-card:hover .team-avatar{ filter:grayscale(0%); background-size:110%; box-shadow:0 20px 40px rgba(16,24,31,0.16); }
.team-card h4{ font-size:15.5px; transition:color 0.2s ease; }
.team-card:hover h4{ color:var(--primary-dark); }
.team-card .role{ font-size:12.5px; color:var(--grey-500); margin-top:4px; }

/* ==========================================================================
   Stats band (Consar statistics pattern)
   ========================================================================== */

.stats-band{ background:var(--grey-100); color:var(--text); padding:64px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.stats-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line); }
@media (max-width:760px){ .stats-grid{ grid-template-columns:repeat(2,1fr); } }
.stat-item{ background:var(--grey-100); padding:8px 28px 8px 0; }
.stat-item .label-top{ font-size:12px; color:var(--grey-500); text-transform:uppercase; letter-spacing:0.06em; }
.stat-item .num{ font-family:var(--font-display); font-size:clamp(36px,4.4vw,54px); font-weight:800; color:var(--primary-dark); line-height:1.1; margin-top:6px; }
.stat-item .label-bottom{ font-size:13.5px; color:var(--grey-700); margin-top:6px; max-width:none; }

/* ==========================================================================
   CTA band
   ========================================================================== */

.cta-band{
  background:linear-gradient(120deg, #14201A 0%, #1B2A22 100%);
  color:var(--white); padding:72px 0; position:relative; overflow:hidden;
}
.cta-band::after{
  content:""; position:absolute; inset:0;
  background:repeating-linear-gradient(115deg, transparent 0px, transparent 58px, rgba(255,255,255,0.03) 59px, transparent 60px);
  pointer-events:none;
}
.cta-band .wrap{ position:relative; display:flex; justify-content:space-between; align-items:center; gap:28px; flex-wrap:wrap; }
.cta-band h2{ font-size:clamp(24px,3.4vw,36px); max-width:20ch; color:var(--white); }
.cta-band p{ margin-top:10px; color:rgba(255,255,255,0.65); font-size:15px; }

/* ==========================================================================
   Projects page , filter sidebar + list (Knight Piésold pattern)
   ========================================================================== */

.map-panel{ border:1px solid var(--line); border-radius:8px; overflow:hidden; box-shadow:0 24px 48px rgba(16,24,31,0.08); }
.map-panel-head{
  display:flex; justify-content:space-between; align-items:center;
  padding:16px 22px; border-bottom:1px solid var(--line); background:var(--grey-100);
  flex-wrap:wrap; gap:8px;
}
.map-panel-head h3{ font-size:14px; font-weight:700; text-transform:uppercase; letter-spacing:0.04em; }
.map-panel-head .note{ font-size:12px; color:var(--grey-500); }
#project-map{ height:480px; width:100%; }
@media (max-width:640px){ #project-map{ height:340px; } }
.map-legend{ display:flex; gap:22px; padding:14px 22px; border-top:1px solid var(--line); flex-wrap:wrap; font-size:12px; text-transform:uppercase; letter-spacing:0.04em; color:var(--grey-700); }
.map-legend span{ display:inline-flex; align-items:center; gap:8px; }
.map-legend .dot{ width:9px; height:9px; border-radius:50%; display:inline-block; }
.dot-active{ background:var(--primary); }
.dot-complete{ background:var(--warning); }
.dot-planned{ background:var(--grey-500); }

.project-layout{ display:grid; grid-template-columns:260px 1fr; gap:52px; align-items:start; }
@media (max-width:860px){ .project-layout{ grid-template-columns:1fr; } }

.filter-panel{ position:sticky; top:100px; }
.filter-group{ padding:22px 0; border-bottom:1px solid var(--line); }
.filter-group:first-child{ padding-top:0; }
.filter-group h4{ font-size:12.5px; text-transform:uppercase; letter-spacing:0.06em; margin-bottom:14px; color:var(--grey-700); }
.filter-option{
  display:flex; align-items:center; gap:10px; width:100%;
  background:none; border:none; padding:7px 0; cursor:pointer;
  font-size:14px; color:var(--text); text-align:left;
}
.filter-option .box{ width:15px; height:15px; border:1.5px solid var(--grey-500); flex:none; position:relative; }
.filter-option.active .box{ background:var(--primary); border-color:var(--primary); }
.filter-option.active .box::after{ content:"✓"; color:var(--white); font-size:11px; position:absolute; inset:0; display:flex; align-items:center; justify-content:center; }
.filter-option:hover{ color:var(--primary-dark); }

.project-list-row{
  display:grid; grid-template-columns:1fr auto; gap:18px; align-items:flex-start;
  padding:26px 0; border-bottom:1px solid var(--line);
}
.project-list-row:first-child{ padding-top:0; }
.project-list-row h3{ font-size:19px; font-weight:700; }
.project-list-row h3 a:hover{ color:var(--primary-dark); }
.project-list-row .p-location{ font-size:13px; color:var(--grey-500); margin-top:5px; }
.project-list-row .p-desc{ font-size:14.5px; color:var(--grey-700); margin-top:10px; max-width:none; }
.project-list-row .p-tag{
  font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:0.05em;
  padding:5px 11px; white-space:nowrap; height:fit-content;
}
.p-tag.active{ background:var(--primary-tint); color:var(--primary-dark); }
.p-tag.complete{ background:var(--success-tint); color:var(--success); }
.p-tag.planned{ background:var(--grey-100); color:var(--grey-500); }

/* Project cards with images (placeholder photos, clearly labelled) */
.project-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:28px; }
@media (max-width:980px){ .project-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:640px){ .project-grid{ grid-template-columns:1fr; } }
.project-card{
  border:1px solid var(--line); background:var(--white); border-radius:6px; overflow:hidden;
  display:flex; flex-direction:column;
  transition:transform 0.3s ease, box-shadow 0.3s ease;
}
.project-card:hover{ transform:translateY(-6px); box-shadow:0 24px 48px rgba(16,24,31,0.14); }
.project-figure{ aspect-ratio:4/3; position:relative; overflow:hidden; background-size:cover; background-position:center; transition:background-size 0.5s ease; }
.project-card:hover .project-figure{ background-size:112%; }
.project-figure .p-status{
  position:absolute; top:14px; left:14px; z-index:2;
  font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:0.05em;
  padding:5px 11px;
}
.project-figure .p-status.active{ background:var(--primary); color:var(--white); }
.project-figure .p-status.planned{ background:var(--grey-700); color:var(--white); }
.project-figure .placeholder-badge{
  position:absolute; top:14px; right:14px; z-index:2;
  font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:0.04em;
  background:rgba(16,24,31,0.78); color:var(--white); padding:5px 10px;
}
.project-card-body{ padding:22px 22px 26px; }
.project-card-body h3{ font-size:18px; margin-bottom:6px; }
.project-card-body .p-location{ font-size:13px; color:var(--grey-500); }
.project-card-body .p-desc{ font-size:14px; color:var(--grey-700); margin-top:12px; }

/* ==========================================================================
   About page bits
   ========================================================================== */

.placeholder-note{
  font-size:12.5px; color:var(--warning);
  background:var(--warning-tint); border:1px dashed var(--warning);
  padding:13px 18px; margin-bottom:32px; max-width:760px;
}
.two-col{ display:grid; grid-template-columns:1.15fr 0.85fr; gap:64px; align-items:start; }
@media (max-width:900px){ .two-col{ grid-template-columns:1fr; gap:36px; } }
.prose p + p{ margin-top:18px; }
.prose p{ color:var(--grey-700); font-size:15.5px; }
.prose h3{ font-size:15px; margin-top:26px; margin-bottom:10px; }

.fact-panel{ background:var(--grey-100); border:1px solid var(--line); border-radius:8px; padding:28px; }
.fact-panel .fp-row{ padding:14px 0; border-top:1px solid var(--line); }
.fact-panel .fp-row:first-child{ border-top:none; padding-top:0; }
.fact-panel .fp-k{ font-size:11.5px; text-transform:uppercase; letter-spacing:0.05em; color:var(--grey-500); }
.fact-panel .fp-v{ font-size:15px; margin-top:4px; font-weight:600; }

.value-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
@media (max-width:860px){ .value-grid{ grid-template-columns:1fr; } }
.value-card{
  background:var(--white); border:1px solid var(--line); border-radius:6px; padding:32px;
  transition:transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}
.value-card:hover{ transform:translateY(-6px); box-shadow:0 24px 48px rgba(16,24,31,0.12); border-color:transparent; }
.value-card .check{
  color:var(--white); width:24px; height:24px; margin-bottom:18px;
  background:var(--primary); border-radius:50%; padding:9px; width:40px; height:40px; box-sizing:border-box;
}
.value-card h3{ font-size:18px; margin-bottom:10px; }
.value-card p{ font-size:14.5px; color:var(--grey-700); }

.history-list{ display:flex; flex-direction:column; }
.history-row{ display:grid; grid-template-columns:110px 1fr; gap:24px; padding:22px 0; border-top:1px solid var(--line); }
.history-row:first-child{ border-top:none; padding-top:0; }
.history-row .year{ font-family:var(--font-display); font-weight:800; font-size:20px; color:var(--primary-dark); }
.history-row p{ font-size:14.5px; color:var(--grey-700); }

/* ==========================================================================
   Contact page
   ========================================================================== */

.contact-grid{ display:grid; grid-template-columns:0.85fr 1.15fr; gap:0; border:1px solid var(--line); border-radius:8px; overflow:hidden; box-shadow:0 32px 64px rgba(16,24,31,0.08); }
@media (max-width:900px){ .contact-grid{ grid-template-columns:1fr; } }
.contact-info{ background:var(--grey-100); color:var(--text); padding:48px 40px; border-right:1px solid var(--line); }
.contact-info h3{ font-size:20px; margin-bottom:10px; }
.contact-info .lede{ color:var(--grey-700); font-size:14.5px; margin-bottom:30px; }
.contact-row{ padding:16px 0; border-top:1px solid var(--line); }
.contact-row:first-of-type{ border-top:none; }
.contact-row .k{ font-size:10.5px; letter-spacing:0.08em; text-transform:uppercase; color:var(--grey-500); }
.contact-row .v{ margin-top:6px; font-size:15px; }
.contact-row .v a:hover{ color:var(--primary-dark); }
.contact-form{ padding:48px 40px; background:var(--white); }
.field{ margin-bottom:20px; }
.field label{ display:block; font-size:12px; font-weight:600; color:var(--grey-700); margin-bottom:8px; }
.field input, .field textarea, .field select{
  width:100%; border:1px solid var(--line); background:var(--white);
  padding:12px 14px; font-family:var(--font-body); font-size:14.5px; color:var(--text); border-radius:4px;
  transition:border-color 0.2s ease, box-shadow 0.2s ease;
}
.field input:focus, .field textarea:focus, .field select:focus{
  outline:none; border-color:var(--primary); box-shadow:0 0 0 3px var(--primary-tint);
}
.field textarea{ resize:vertical; min-height:120px; }
.field-row{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
@media (max-width:520px){ .field-row{ grid-template-columns:1fr; } }
.form-note{ font-size:12px; color:var(--grey-500); margin-top:6px; }
.mini-map{ height:240px; border:1px solid var(--line); margin-top:28px; }

/* ==========================================================================
   Footer (Consar pattern: brand / quick links / services / contact / find us)
   ========================================================================== */

.site-footer{ background:#0E1512; color:rgba(255,255,255,0.62); padding:72px 0 0; }
.footer-grid{
  display:grid; grid-template-columns:1.3fr 1fr 1fr 1.2fr;
  gap:40px; padding-bottom:48px; border-bottom:1px solid rgba(255,255,255,0.1);
}
@media (max-width:860px){ .footer-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:520px){ .footer-grid{ grid-template-columns:1fr; } }
.footer-brand .brand-mark{ font-size:22px; color:var(--white); }
.footer-brand .brand-mark .dot{ color:#7FCB77; }
.footer-brand .footer-logo{ height:30px; }
.footer-brand p{ margin-top:14px; font-size:13.5px; color:rgba(255,255,255,0.45); max-width:none; }
.footer-social{ display:flex; gap:10px; margin-top:20px; }
.footer-social a{
  width:34px; height:34px; border:1px solid rgba(255,255,255,0.16); border-radius:50%;
  display:flex; align-items:center; justify-content:center; color:rgba(255,255,255,0.7);
  transition:border-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}
.footer-social a:hover{ border-color:#7FCB77; color:#7FCB77; transform:translateY(-3px); }
.footer-col h4{ font-size:11.5px; text-transform:uppercase; letter-spacing:0.07em; color:rgba(255,255,255,0.4); margin-bottom:16px; }
.footer-col li{ margin-bottom:10px; }
.footer-col a{ font-size:14px; color:rgba(255,255,255,0.62); }
.footer-col a:hover{ color:#7FCB77; }
.footer-bottom{
  display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:10px;
  padding:22px 0; font-size:12px; color:rgba(255,255,255,0.35);
}
.footer-bottom a{ color:rgba(255,255,255,0.35); }
.footer-bottom a:hover{ color:#7FCB77; }

/* ==========================================================================
   Presence map (real Leaflet + GeoJSON boundary data)
   ========================================================================== */

#presence-map{ height:420px; width:100%; border:1px solid var(--line); }
@media (max-width:640px){ #presence-map{ height:320px; } }
/* Mute the raw OSM tiles (grayscale + brightened + flattened contrast) so
   the basemap reads as a simple, calm backdrop, not the busy default OSM
   style. Only the tile pane is filtered , the Ghana coverage overlay,
   markers, and popups above it stay full-color. */
#presence-map .leaflet-tile-pane{ filter:grayscale(0.85) brightness(1.12) contrast(0.9); }

/* ==========================================================================
   Construction hover effect: the heading cracks apart letter by letter,
   then reassembles, and a plaster/mortar pass smooths the seams away,
   settling into a clean, finished state.
   ========================================================================== */

.construct-text{
  position:relative;
  display:inline-block;
  cursor:default;
}
.construct-text .cw{
  display:inline-block;
  will-change:transform, opacity;
}
.construct-text::before{
  content:"";
  position:absolute;
  inset:-8px -12px;
  background:
    repeating-linear-gradient(115deg, transparent 0px, transparent 9px, rgba(90,58,30,0.45) 10px, transparent 11px, transparent 27px),
    repeating-linear-gradient(35deg, transparent 0px, transparent 15px, rgba(90,58,30,0.3) 16px, transparent 17px, transparent 42px),
    repeating-linear-gradient(-60deg, transparent 0px, transparent 21px, rgba(90,58,30,0.2) 22px, transparent 23px, transparent 55px);
  opacity:0;
  pointer-events:none;
  mix-blend-mode:multiply;
  z-index:2;
}
.construct-text::after{
  content:"";
  position:absolute;
  inset:-8px -22px;
  background:linear-gradient(100deg, transparent 32%, rgba(255,255,255,0.95) 46%, rgba(255,255,255,0.95) 54%, transparent 68%);
  transform:translateX(-130%);
  opacity:0;
  pointer-events:none;
  mix-blend-mode:overlay;
  z-index:3;
}

/* Each letter cracks outward to its own scatter position, then is drawn
   back into alignment, using per-letter --dx / --dy / --rot custom
   properties (set inline by JS) so every character moves differently. */
.construct-text:hover .cw, .construct-text.construct-active .cw{
  animation:construct-letter-reassemble 0.85s cubic-bezier(.3,.9,.3,1) both;
  animation-delay:var(--d, 0ms);
}
.construct-text:hover::before, .construct-text.construct-active::before{
  animation:construct-crack-fade 1.05s ease forwards;
}
.construct-text:hover::after, .construct-text.construct-active::after{
  animation:construct-plaster-sweep 0.9s ease-in-out 0.35s forwards;
}

@keyframes construct-letter-reassemble{
  0%{ transform:translate(0,0) rotate(0deg); }
  18%{ transform:translate(var(--dx,0), var(--dy,0)) rotate(var(--rot,0deg)); }
  65%{ transform:translate(calc(var(--dx,0) * 0.12), calc(var(--dy,0) * 0.12)) rotate(calc(var(--rot,0deg) * 0.12)); }
  100%{ transform:translate(0,0) rotate(0deg); }
}
@keyframes construct-crack-fade{
  0%{ opacity:0; }
  16%{ opacity:1; }
  58%{ opacity:1; }
  100%{ opacity:0; }
}
@keyframes construct-plaster-sweep{
  0%{ transform:translateX(-130%); opacity:0.95; }
  55%{ opacity:0.95; }
  100%{ transform:translateX(130%); opacity:0; }
}

@media (prefers-reduced-motion: reduce){
  .construct-text:hover .cw,
  .construct-text.construct-active .cw,
  .construct-text:hover::before,
  .construct-text:hover::after{ animation:none; }
}

/* ==========================================================================
   Scroll reveal , elements fade + rise into view as the user scrolls.
   JS toggles .in-view once an element crosses the viewport threshold.
   ========================================================================== */

.reveal{
  opacity:0;
  transform:translateY(28px);
  transition:opacity 0.7s cubic-bezier(.2,.7,.2,1), transform 0.7s cubic-bezier(.2,.7,.2,1);
}
.reveal.in-view{ opacity:1; transform:translateY(0); }
.reveal-stagger > *{
  opacity:0;
  transform:translateY(28px);
  transition:opacity 0.6s cubic-bezier(.2,.7,.2,1), transform 0.6s cubic-bezier(.2,.7,.2,1);
}
.reveal-stagger.in-view > *{ opacity:1; transform:translateY(0); }
.reveal-stagger.in-view > *:nth-child(1){ transition-delay:0ms; }
.reveal-stagger.in-view > *:nth-child(2){ transition-delay:70ms; }
.reveal-stagger.in-view > *:nth-child(3){ transition-delay:140ms; }
.reveal-stagger.in-view > *:nth-child(4){ transition-delay:210ms; }
.reveal-stagger.in-view > *:nth-child(5){ transition-delay:280ms; }
.reveal-stagger.in-view > *:nth-child(6){ transition-delay:350ms; }
.reveal-stagger.in-view > *:nth-child(7){ transition-delay:420ms; }
.reveal-stagger.in-view > *:nth-child(8){ transition-delay:490ms; }
@media (prefers-reduced-motion: reduce){
  .reveal, .reveal-stagger > *{ opacity:1; transform:none; transition:none; }
}

/* ==========================================================================
   Stats band accent + count-up support
   ========================================================================== */

.stats-band{ position:relative; border-top:1px solid var(--line); }
.stats-band::before{
  content:""; position:absolute; top:-1px; left:0; right:0; height:3px;
  background:linear-gradient(90deg, var(--primary) 0%, var(--primary) 70%, var(--safety) 100%);
}
.stat-item{ transition:transform 0.3s ease; }
.stat-item:hover{ transform:translateY(-4px); }