/*
Theme Name: Mafaz Global Solutions
Theme URI: https://mafazglobal.org
Author: Mafaz Global Solutions
Author URI: https://mafazglobal.org
Description: A custom theme for Mafaz Global Solutions — a catalyst for institutional excellence, inclusive development, and sustainable peace across Somalia and the Horn of Africa. Includes templates for Home, About Us, What We Do, Our Projects, Impact, Insights, Resources, Careers and Contact.
Version: 1.5.0
Requires at least: 6.0
Tested up to: 6.6
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: mafaz-global-solutions
Tags: custom-menu, featured-images, translation-ready, threaded-comments, one-column, two-columns, right-sidebar, full-width-template
*/

/* ==========================================================================
   Mafaz Global Solutions — Stylesheet
   ========================================================================== */

:root {
  /* Brand colors */
  --navy-900: #0a2a54;
  --navy-800: #0d3266;
  --navy-700: #123c78;
  --blue-600: #1a56a8;
  --blue-500: #1f6fc4;
  --blue-100: #e8f1fb;
  --orange-500: #f2921a;
  --orange-600: #e07d0e;
  --orange-100: #fdf0dd;
  --green-500: #3fa757;
  --green-100: #e6f6ea;
  --teal-500: #1a8fa0;

  --ink-900: #101828;
  --ink-700: #344054;
  --ink-500: #667085;
  --ink-300: #98a2b3;
  --ink-100: #eaecf0;
  --ink-50: #f7f8fa;
  --white: #ffffff;

  --font-sans: "Inter", "Segoe UI", -apple-system, BlinkMacSystemFont, Arial, sans-serif;

  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;

  --shadow-sm: 0 1px 3px rgba(16, 24, 40, 0.08);
  --shadow-md: 0 4px 16px rgba(16, 24, 40, 0.10);
  --shadow-lg: 0 12px 32px rgba(16, 24, 40, 0.14);

  --container: 1200px;
  --container-header: 1360px; /* the header row gets more breathing room than body content, so a normal 8-9 item nav fits on one line before the auto-collapse in main.js/header.php kicks in */
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font-sans);
  color: var(--ink-700);
  background: var(--white);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, h4, h5 { margin: 0; color: var(--navy-900); font-weight: 700; line-height: 1.2; }
p { margin: 0; }
button { font-family: inherit; cursor: pointer; }

/* WordPress core */
.screen-reader-text {
  border: 0; clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%);
  height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; word-wrap: normal !important;
}
.alignwide { max-width: 1400px; margin-left: auto; margin-right: auto; }
.alignfull { max-width: none; }
.wp-caption, .wp-block-image { max-width: 100%; }

.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 24px;
}
/* Wider measure for image-heavy homepage sections (hero, expertise,
   projects, insights) so photos read as a real focal point rather than
   small tiles — body-copy pages keep the narrower --container for
   readability. */
.container--wide { max-width: var(--container-header); }

.section { padding: 64px 0; }
.section--tight { padding: 48px 0; }
.section--alt { background: var(--ink-50); }
.section--navy { background: var(--navy-900); color: var(--ink-100); }

.eyebrow {
  display: inline-block;
  color: var(--blue-600);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 10px;
}

.section-head { text-align: center; max-width: 700px; margin: 0 auto 32px; }
.section-head h2 {
  font-size: 34px;
  position: relative;
  padding-bottom: 18px;
}
.section-head h2::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 64px;
  height: 3px;
  background: var(--orange-500);
  border-radius: 2px;
}
.section-head.section-head--left { text-align: left; margin: 0; }
.section-head.section-head--left h2::after { left: 0; transform: none; }

.section-topline {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 28px;
  flex-wrap: wrap;
}

.link-arrow {
  color: var(--blue-600);
  font-weight: 700;
  font-size: 14px;
  white-space: nowrap;
}
.link-arrow::after { content: " →"; }

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 26px;
  border-radius: var(--radius-sm);
  font-weight: 700;
  font-size: 14px;
  border: 2px solid transparent;
  transition: all 0.2s ease;
  white-space: nowrap;
}
.btn-primary { background: var(--navy-900); color: var(--white); }
.btn-primary:hover { background: var(--navy-700); }
.btn-outline { background: transparent; color: var(--navy-900); border-color: var(--navy-900); }
.btn-outline:hover { background: var(--navy-900); color: var(--white); }
.btn-outline-light { background: transparent; color: var(--white); border-color: rgba(255,255,255,0.6); }
.btn-outline-light:hover { background: var(--white); color: var(--navy-900); }
.btn-accent { background: var(--orange-500); color: var(--white); }
.btn-accent:hover { background: var(--orange-600); }
.btn-block { width: 100%; }
.btn-sm { padding: 10px 18px; font-size: 13px; }

/* ==========================================================================
   Header
   ========================================================================== */
.topbar {
  background: var(--navy-900);
  color: rgba(255,255,255,0.85);
  font-size: 13px;
}
.topbar .container { max-width: var(--container-header); display: flex; justify-content: space-between; align-items: center; padding-top: 8px; padding-bottom: 8px; flex-wrap: wrap; gap: 8px; }
.topbar-contact { display: flex; gap: 20px; flex-wrap: wrap; }
.topbar-contact span { display: inline-flex; align-items: center; gap: 6px; }
.topbar-social { display: flex; gap: 12px; }
.topbar-social a {
  width: 26px; height: 26px; border-radius: 50%;
  background: rgba(255,255,255,0.12);
  display: flex; align-items: center; justify-content: center;
  font-size: 12px;
}
.topbar-social a:hover { background: var(--orange-500); }

.site-header {
  position: sticky; top: 0; z-index: 200;
  background: var(--white);
  box-shadow: var(--shadow-sm);
}
.site-header .container {
  max-width: var(--container-header);
  display: flex; align-items: center; justify-content: flex-start;
  padding-top: 14px; padding-bottom: 14px; gap: 24px;
}
.logo { display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 21px; color: var(--navy-900); min-width: 0; }
.logo span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.logo .logo-mark { flex-shrink: 0; }
.logo .logo-sub { display: block; font-size: 10px; letter-spacing: 0.14em; font-weight: 700; color: var(--orange-500); }
.custom-logo { max-height: 40px; width: auto; }

.main-nav { display: flex; align-items: center; gap: 4px; min-width: 0; }
.main-nav > ul, .main-nav .menu { display: flex; align-items: center; gap: 0; flex-wrap: nowrap; }
.main-nav > ul > li, .main-nav .menu > li { position: relative; flex-shrink: 0; }
.main-nav > ul > li > a, .main-nav .menu > li > a {
  display: flex; align-items: center; gap: 4px;
  padding: 10px 11px;
  font-weight: 600; font-size: 14.5px;
  color: var(--ink-700);
  border-radius: var(--radius-sm);
  white-space: nowrap;
}
.main-nav > ul > li > a:hover, .main-nav .menu > li > a:hover,
.main-nav > ul > li.active > a, .main-nav .menu > li.current-menu-item > a,
.main-nav .menu > li.current-menu-ancestor > a,
.main-nav .menu > li.current-menu-parent > a { color: var(--blue-600); }
.main-nav .caret { font-size: 10px; margin-top: 1px; }
.main-nav .menu-item-has-children > a::after { content: "▾"; font-size: 10px; margin-left: 4px; }

.dropdown, .main-nav .sub-menu {
  position: absolute; top: 100%; left: 0;
  min-width: 240px;
  background: var(--white);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  padding: 10px;
  opacity: 0; visibility: hidden; transform: translateY(8px);
  transition: all 0.18s ease;
  border-top: 3px solid var(--orange-500);
  z-index: 50;
}
.main-nav li:hover > .dropdown, .main-nav .menu li:hover > .sub-menu { opacity: 1; visibility: visible; transform: translateY(0); }
.dropdown li a, .main-nav .sub-menu li a {
  display: block; padding: 10px 14px; border-radius: var(--radius-sm);
  font-size: 14px; font-weight: 500; color: var(--ink-700);
}
.dropdown li a:hover, .main-nav .sub-menu li a:hover { background: var(--blue-100); color: var(--blue-600); }
.main-nav .sub-menu .sub-menu { left: 100%; top: 0; }

.header-search { border-top: 1px solid var(--ink-100); background: var(--white); padding: 16px 0; }
.header-search .container { max-width: var(--container-header); }
.header-search[hidden] { display: none; }
.header-search .search-form { display: flex; gap: 10px; }
.header-search .search-field { flex: 1; padding: 12px 16px; border: 1px solid var(--ink-100); border-radius: var(--radius-sm); font-size: 15px; font-family: inherit; }
.header-search .search-submit { padding: 12px 22px; border-radius: var(--radius-sm); border: none; background: var(--navy-900); color: var(--white); font-weight: 700; }

/* Nav renders before the logo in the DOM (see header.php); push actions
   (search/Donate/mobile toggle) to the far right on their own. */
.header-actions { display: flex; align-items: center; gap: 14px; margin-left: auto; }
.icon-btn {
  width: 38px; height: 38px; border-radius: 50%;
  border: 1px solid var(--ink-100);
  display: flex; align-items: center; justify-content: center;
  background: none; color: var(--ink-700);
}
.icon-btn:hover { background: var(--ink-50); }
.nav-toggle { display: none; }

@media (max-width: 1080px) {
  .main-nav { display: none; }
  .nav-toggle {
    display: flex; align-items: center; justify-content: center;
    width: 40px; height: 40px; border: 1px solid var(--ink-100); border-radius: var(--radius-sm);
    background: none;
  }
  .site-header.nav-open .main-nav {
    display: block;
    position: absolute; top: 100%; left: 0; right: 0;
    background: var(--white); box-shadow: var(--shadow-md);
    padding: 10px 20px 20px;
    max-height: 80vh; overflow-y: auto;
  }
  .site-header.nav-open .main-nav > ul, .site-header.nav-open .main-nav .menu { flex-direction: column; align-items: stretch; gap: 0; }
  .site-header.nav-open .main-nav > ul > li > a, .site-header.nav-open .main-nav .menu > li > a { padding: 14px 4px; border-bottom: 1px solid var(--ink-100); }
  .site-header.nav-open .dropdown, .site-header.nav-open .main-nav .sub-menu {
    position: static; opacity: 1; visibility: visible; transform: none;
    box-shadow: none; border-top: none; display: none; padding-left: 12px;
  }
  .site-header.nav-open li.dd-open .dropdown, .site-header.nav-open .main-nav li.dd-open .sub-menu { display: block; }
}

/* Auto-collapse: JS adds .nav-overflow to .site-header whenever the menu
   (however many items a client has added under Appearance > Menus) doesn't
   fit on one line, regardless of viewport width — so a long custom WordPress
   menu never wraps or breaks the header layout, it just becomes the same
   dropdown menu used on mobile. See assets/js/main.js: updateNavFit(). */
.site-header.nav-overflow .main-nav { display: none; }
/* Without the (now-hidden) nav to fill the row, pulling .header-actions
   back next to the logo avoids a large dead gap in the middle of the
   header — the leftover space trails naturally at the right edge instead. */
.site-header.nav-overflow .header-actions { margin-left: 16px; }
.site-header.nav-overflow .nav-toggle {
  display: flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border: 1px solid var(--ink-100); border-radius: var(--radius-sm);
  background: none;
}
.site-header.nav-overflow.nav-open .main-nav {
  display: block;
  position: absolute; top: 100%; left: 0; right: 0;
  background: var(--white); box-shadow: var(--shadow-md);
  padding: 10px 20px 20px;
  max-height: 80vh; overflow-y: auto;
}
.site-header.nav-overflow.nav-open .main-nav > ul,
.site-header.nav-overflow.nav-open .main-nav .menu { flex-direction: column; align-items: stretch; gap: 0; flex-wrap: wrap; }
.site-header.nav-overflow.nav-open .main-nav > ul > li > a,
.site-header.nav-overflow.nav-open .main-nav .menu > li > a { padding: 14px 4px; border-bottom: 1px solid var(--ink-100); white-space: normal; }
.site-header.nav-overflow.nav-open .dropdown,
.site-header.nav-overflow.nav-open .main-nav .sub-menu {
  position: static; opacity: 1; visibility: visible; transform: none;
  box-shadow: none; border-top: none; display: none; padding-left: 12px;
}
.site-header.nav-overflow.nav-open li.dd-open .dropdown,
.site-header.nav-overflow.nav-open .main-nav li.dd-open .sub-menu { display: block; }

/* ==========================================================================
   Hero
   ========================================================================== */
.hero { position: relative; overflow: hidden; background: linear-gradient(180deg, #f4f8fc 0%, #ffffff 100%); }
.hero-grid {
  display: grid; grid-template-columns: 0.92fr 1.18fr; align-items: center; gap: 48px;
  padding: 64px 0 40px;
}
.hero-copy .eyebrow { }
.hero-copy h1 { font-size: 44px; line-height: 1.15; margin-bottom: 18px; }
.hero-copy p { color: var(--ink-500); font-size: 17px; max-width: 480px; margin-bottom: 28px; }
.hero-actions { display: flex; gap: 14px; flex-wrap: wrap; }
.hero-media { position: relative; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-lg); aspect-ratio: 4/3; }
.hero-media img { width: 100%; height: 100%; object-fit: cover; }
.hero-media img.hero-slide {
  position: absolute; inset: 0;
  opacity: 0;
  transition: opacity 1s ease;
  pointer-events: none;
}
.hero-media img.hero-slide.active { opacity: 1; }

/* Overlaid on the hero image itself (not stacked below it in normal
   flow) so the floating .stats-bar card — which intentionally overlaps
   upward over the bottom of the hero via transform: translateY(-38px) —
   never covers the dots. z-index keeps them above the (opacity-faded)
   slide images. */
.hero-dots {
  position: absolute; left: 0; right: 0; bottom: 18px; z-index: 2;
  display: flex; justify-content: center; gap: 8px;
}
.hero-dots button {
  width: 9px; height: 9px; border-radius: 50%; border: none; padding: 0;
  background: rgba(255, 255, 255, 0.55);
  box-shadow: 0 0 0 1px rgba(16, 24, 40, 0.18);
}
.hero-dots button.active { background: var(--white); width: 24px; border-radius: 5px; }

/* Stats bar */
.stats-bar {
  background: var(--white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  margin: 0 auto 0;
  transform: translateY(-38px);
  padding: 30px 20px;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 20px;
}
.stat-item { display: flex; align-items: center; gap: 14px; padding: 0 10px; border-right: 1px solid var(--ink-100); }
.stat-item:last-child { border-right: none; }
.stat-icon {
  width: 46px; height: 46px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; font-size: 20px;
}
.stat-icon.c-blue { background: var(--blue-100); color: var(--blue-600); }
.stat-icon.c-orange { background: var(--orange-100); color: var(--orange-500); }
.stat-number { font-size: 24px; font-weight: 800; color: var(--navy-900); line-height: 1.1; }
.stat-label { font-size: 12.5px; color: var(--ink-500); margin-top: 2px; }

/* ==========================================================================
   Expertise grid
   ========================================================================== */
.expertise-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px;
}
.expertise-card {
  background: var(--white); border: 1px solid var(--ink-100); border-radius: var(--radius-md);
  overflow: hidden; box-shadow: var(--shadow-sm); transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.expertise-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.expertise-thumb { position: relative; aspect-ratio: 16/10; overflow: hidden; }
.expertise-thumb img { width: 100%; height: 100%; object-fit: cover; }
.expertise-icon {
  position: absolute; left: 16px; bottom: -20px;
  width: 44px; height: 44px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: var(--white); font-size: 18px; border: 3px solid var(--white);
}
.expertise-body { padding: 32px 18px 20px; }
.expertise-body h3 { font-size: 17px; margin-bottom: 8px; }
.expertise-body p { font-size: 14px; color: var(--ink-500); }

.icon-blue { background: var(--blue-600); }
.icon-orange { background: var(--orange-500); }
.icon-green { background: var(--green-500); }
.icon-navy { background: var(--navy-800); }

/* ==========================================================================
   Projects carousel
   ========================================================================== */
.carousel-wrap { position: relative; }
.project-grid, .carousel-track { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.project-card { background: var(--white); border-radius: var(--radius-md); overflow: hidden; box-shadow: var(--shadow-sm); border: 1px solid var(--ink-100); }
.project-thumb { aspect-ratio: 16/10; overflow: hidden; }
.project-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s ease; }
.project-card:hover .project-thumb img { transform: scale(1.05); }
.project-body { padding: 20px; }
.tag {
  display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: 0.03em;
  text-transform: uppercase; padding: 4px 10px; border-radius: 4px; margin-bottom: 12px;
}
.tag-orange { background: var(--orange-100); color: var(--orange-600); }
.tag-blue { background: var(--blue-100); color: var(--blue-600); }
.tag-green { background: var(--green-100); color: var(--green-500); }
.project-body h3 { font-size: 17px; margin-bottom: 10px; }
.project-body p { font-size: 14px; color: var(--ink-500); margin-bottom: 14px; }

.carousel-arrow {
  position: absolute; top: 40%; transform: translateY(-50%);
  width: 42px; height: 42px; border-radius: 50%;
  background: var(--white); box-shadow: var(--shadow-md); border: none;
  display: flex; align-items: center; justify-content: center; font-size: 16px; color: var(--navy-900);
  z-index: 5;
}
.carousel-arrow.prev { left: -21px; }
.carousel-arrow.next { right: -21px; }
.carousel-arrow:hover { background: var(--navy-900); color: var(--white); }

/* ==========================================================================
   Insights
   ========================================================================== */
.insight-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.insight-card { border-radius: var(--radius-md); overflow: hidden; box-shadow: var(--shadow-sm); border: 1px solid var(--ink-100); background: var(--white); }
.insight-thumb { aspect-ratio: 5/4; overflow: hidden; }
.insight-thumb img { width: 100%; height: 100%; object-fit: cover; }
.insight-body { padding: 16px 18px 20px; }
.insight-meta { display: flex; align-items: center; gap: 10px; font-size: 11px; color: var(--ink-500); margin-bottom: 10px; }
.insight-meta .tag { margin-bottom: 0; }
.insight-body h3 { font-size: 15.5px; margin-bottom: 12px; line-height: 1.35; }
.read-more { font-size: 13px; font-weight: 700; color: var(--blue-600); }
.read-more::after { content: " →"; }

/* ==========================================================================
   Partners strip
   ========================================================================== */
.partners-strip { padding: 40px 0 56px; }
.partners-label { text-align: center; font-size: 12px; font-weight: 700; letter-spacing: 0.1em; color: var(--ink-500); margin-bottom: 24px; text-transform: uppercase; }
.partners-row { display: flex; align-items: center; justify-content: center; gap: 44px; flex-wrap: wrap; opacity: 0.9; }
.partners-row img, .partners-row svg { height: 34px; width: auto; }

/* ==========================================================================
   CTA banner
   ========================================================================== */
.cta-banner { background: var(--navy-900); color: var(--white); }
.cta-banner .container { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 40px 24px; flex-wrap: wrap; }
.cta-left { display: flex; align-items: center; gap: 18px; }
.cta-icon { width: 54px; height: 54px; border-radius: 50%; background: rgba(255,255,255,0.12); display: flex; align-items: center; justify-content: center; font-size: 22px; flex-shrink: 0; }
.cta-left h3 { color: var(--white); font-size: 22px; margin-bottom: 4px; }
.cta-left p { color: rgba(255,255,255,0.7); font-size: 14px; max-width: 460px; }
.cta-actions { display: flex; gap: 12px; flex-wrap: wrap; }

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer { background: #071c3a; color: rgba(255,255,255,0.72); font-size: 14px; }
.footer-top { padding: 64px 0 40px; display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr 1.2fr; gap: 32px; }
.footer-brand .logo { color: var(--white); margin-bottom: 14px; }
.footer-brand p { font-size: 14px; line-height: 1.7; margin-bottom: 18px; }
.footer-social { display: flex; gap: 10px; }
.footer-social a { width: 34px; height: 34px; border-radius: 50%; background: rgba(255,255,255,0.08); display: flex; align-items: center; justify-content: center; }
.footer-social a:hover { background: var(--orange-500); }
.footer-col h4 { color: var(--white); font-size: 15px; margin-bottom: 18px; }
.footer-col ul li { margin-bottom: 11px; }
.footer-col ul li a:hover { color: var(--white); }
.footer-contact li { display: flex; gap: 10px; margin-bottom: 14px; align-items: flex-start; font-size: 13.5px; }
.footer-contact li span.ic { color: var(--orange-500); margin-top: 2px; }
.newsletter-form { display: flex; margin-top: 6px; border-radius: var(--radius-sm); overflow: hidden; border: 1px solid rgba(255,255,255,0.2); }
.newsletter-form input { flex: 1; border: none; background: transparent; color: var(--white); padding: 11px 12px; font-size: 13px; }
.newsletter-form input::placeholder { color: rgba(255,255,255,0.5); }
.newsletter-form button { border: none; background: var(--orange-500); color: var(--white); padding: 0 16px; font-weight: 700; }

.footer-bottom { border-top: 1px solid rgba(255,255,255,0.1); padding: 20px 0; }
.footer-bottom .container { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; font-size: 13px; }
.footer-bottom-links { display: flex; gap: 20px; }
.footer-bottom-links a:hover { color: var(--white); }

/* ==========================================================================
   Page hero (inner pages)
   ========================================================================== */
.page-hero {
  background: linear-gradient(135deg, var(--navy-900) 0%, var(--navy-700) 100%);
  color: var(--white);
  padding: 56px 0;
}
.breadcrumb { display: flex; gap: 8px; font-size: 13px; color: rgba(255,255,255,0.6); margin-bottom: 14px; }
.breadcrumb a:hover { color: var(--white); }
.page-hero h1 { color: var(--white); font-size: 38px; max-width: 720px; }
.page-hero p { color: rgba(255,255,255,0.75); max-width: 640px; margin-top: 14px; font-size: 16px; }

/* Generic content blocks */
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.two-col img { border-radius: var(--radius-lg); box-shadow: var(--shadow-md); }
.two-col h2 { font-size: 30px; margin-bottom: 16px; }
.two-col p { color: var(--ink-500); margin-bottom: 14px; }
.check-list li { display: flex; gap: 10px; margin-bottom: 12px; font-size: 15px; color: var(--ink-700); }
.check-list li .ic { color: var(--green-500); font-weight: 800; }

.value-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.value-card { text-align: center; padding: 30px 20px; border-radius: var(--radius-md); border: 1px solid var(--ink-100); background: var(--white); }
.value-card .value-icon { width: 56px; height: 56px; border-radius: 50%; background: var(--blue-100); color: var(--blue-600); display: flex; align-items: center; justify-content: center; margin: 0 auto 16px; font-size: 22px; }
.value-card h3 { font-size: 16px; margin-bottom: 8px; }
.value-card p { font-size: 13.5px; color: var(--ink-500); }

.team-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.team-card { text-align: center; }
.team-photo { border-radius: var(--radius-md); overflow: hidden; aspect-ratio: 1/1; margin-bottom: 14px; }
.team-photo img { width: 100%; height: 100%; object-fit: cover; }
.team-card h4 { font-size: 16px; margin-bottom: 2px; }
.team-card span { font-size: 13px; color: var(--blue-600); font-weight: 600; }

.timeline { position: relative; padding-left: 30px; border-left: 2px solid var(--ink-100); }
.timeline-item { position: relative; padding-bottom: 34px; }
.timeline-item::before { content: ""; position: absolute; left: -37px; top: 4px; width: 12px; height: 12px; border-radius: 50%; background: var(--orange-500); border: 3px solid var(--white); box-shadow: 0 0 0 2px var(--orange-500); }
.timeline-item h4 { font-size: 16px; margin-bottom: 4px; }
.timeline-item .yr { color: var(--blue-600); font-weight: 700; font-size: 13px; }
.timeline-item p { color: var(--ink-500); font-size: 14px; margin-top: 6px; }

.filter-bar { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 36px; justify-content: center; }
.filter-chip { padding: 9px 18px; border-radius: 30px; border: 1px solid var(--ink-100); font-size: 13.5px; font-weight: 600; background: var(--white); color: var(--ink-700); }
.filter-chip.active { background: var(--navy-900); color: var(--white); border-color: var(--navy-900); }

.impact-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.impact-card { background: var(--white); border-radius: var(--radius-md); border: 1px solid var(--ink-100); padding: 28px 22px; text-align: center; }
.impact-card .num { font-size: 30px; font-weight: 800; color: var(--navy-900); }
.impact-card .lbl { font-size: 13.5px; color: var(--ink-500); margin-top: 6px; }

.job-list { display: flex; flex-direction: column; gap: 14px; }
.job-item { display: flex; align-items: center; justify-content: space-between; padding: 22px; border: 1px solid var(--ink-100); border-radius: var(--radius-md); flex-wrap: wrap; gap: 14px; }
.job-item h4 { font-size: 16.5px; margin-bottom: 6px; }
.job-meta { display: flex; gap: 14px; font-size: 13px; color: var(--ink-500); flex-wrap: wrap; }
.job-meta span { display: flex; align-items: center; gap: 5px; }

.resource-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.resource-card { display: flex; gap: 16px; padding: 22px; border: 1px solid var(--ink-100); border-radius: var(--radius-md); background: var(--white); }
.resource-icon { width: 46px; height: 46px; border-radius: var(--radius-sm); background: var(--orange-100); color: var(--orange-600); display: flex; align-items: center; justify-content: center; font-size: 20px; flex-shrink: 0; }
.resource-card h4 { font-size: 15px; margin-bottom: 6px; }
.resource-card p { font-size: 13px; color: var(--ink-500); margin-bottom: 10px; }
.resource-meta { font-size: 12px; color: var(--ink-300); }

.contact-grid { display: grid; grid-template-columns: 1fr 1.2fr; gap: 48px; }
.contact-info-card { background: var(--navy-900); color: var(--white); border-radius: var(--radius-lg); padding: 36px; }
.contact-info-card h3 { color: var(--white); margin-bottom: 20px; }
.contact-info-item { display: flex; gap: 14px; margin-bottom: 22px; }
.contact-info-item .ic { width: 40px; height: 40px; border-radius: 50%; background: rgba(255,255,255,0.12); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.contact-info-item h5 { color: var(--white); font-size: 14px; margin-bottom: 4px; }
.contact-info-item p { color: rgba(255,255,255,0.7); font-size: 13.5px; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.form-field { display: flex; flex-direction: column; gap: 7px; margin-bottom: 18px; }
.form-field.full { grid-column: 1 / -1; }
.form-field label { font-size: 13.5px; font-weight: 600; color: var(--ink-700); }
.form-field input, .form-field select, .form-field textarea {
  padding: 12px 14px; border: 1px solid var(--ink-100); border-radius: var(--radius-sm); font-size: 14px; font-family: inherit; color: var(--ink-900);
}
.form-field textarea { resize: vertical; min-height: 120px; }
.map-embed { border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-md); aspect-ratio: 16/6; }
.map-embed iframe { width: 100%; height: 100%; border: 0; }

.faq-item { border: 1px solid var(--ink-100); border-radius: var(--radius-md); margin-bottom: 12px; overflow: hidden; }
.faq-q { display: flex; justify-content: space-between; align-items: center; padding: 18px 22px; font-weight: 700; color: var(--navy-900); cursor: pointer; font-size: 15px; }
.faq-a { padding: 0 22px 20px; color: var(--ink-500); font-size: 14px; display: none; }
.faq-item.open .faq-a { display: block; }
.faq-item.open .faq-q .plus::before { content: "−"; }

/* Blog / single post / comments (WordPress content areas) */
.entry-content { max-width: 800px; margin: 0 auto; }
.entry-content > * + * { margin-top: 18px; }
.entry-content img { border-radius: var(--radius-md); }
.entry-content h2 { font-size: 26px; margin-top: 34px; }
.entry-content h3 { font-size: 20px; margin-top: 26px; }
.entry-content a { color: var(--blue-600); text-decoration: underline; }
.entry-content blockquote { border-left: 3px solid var(--orange-500); padding-left: 18px; color: var(--ink-500); font-style: italic; }
.entry-content ul, .entry-content ol { padding-left: 22px; list-style: disc; }
.entry-content ol { list-style: decimal; }

.post-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.post-card { border-radius: var(--radius-md); overflow: hidden; box-shadow: var(--shadow-sm); border: 1px solid var(--ink-100); background: var(--white); }
.post-card-thumb { aspect-ratio: 4/3; overflow: hidden; background: var(--ink-50); }
.post-card-thumb img { width: 100%; height: 100%; object-fit: cover; }
.post-card-body { padding: 18px 20px 22px; }
.post-card-body .insight-meta { }
.post-card-body h3 { font-size: 16px; margin-bottom: 10px; }

.pagination { display: flex; justify-content: center; gap: 8px; margin-top: 48px; }
.pagination a, .pagination span { padding: 9px 15px; border-radius: var(--radius-sm); border: 1px solid var(--ink-100); font-size: 14px; font-weight: 600; color: var(--ink-700); }
.pagination .current { background: var(--navy-900); color: var(--white); border-color: var(--navy-900); }

.comments-area { max-width: 800px; margin: 56px auto 0; }
.comment-list { list-style: none; padding: 0; }
.comment-list .children { list-style: none; padding-left: 32px; }
.comment-form input, .comment-form textarea {
  width: 100%; padding: 12px 14px; border: 1px solid var(--ink-100); border-radius: var(--radius-sm); font-family: inherit; font-size: 14px; margin-bottom: 14px;
}

/* Utilities */
.mt-0 { margin-top: 0; }
.text-center { text-align: center; }
.badge-list { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 10px; }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 980px) {
  .hero-grid { grid-template-columns: 1fr; padding-top: 32px; }
  .hero-media { order: -1; }
  .stats-bar { grid-template-columns: repeat(2, 1fr); transform: none; margin-top: 30px; }
  .stat-item { border-right: none; border-bottom: 1px solid var(--ink-100); padding-bottom: 16px; }
  .expertise-grid, .project-grid, .carousel-track, .insight-grid, .value-grid, .team-grid, .impact-grid, .resource-grid, .post-list { grid-template-columns: repeat(2, 1fr); }
  .two-col, .contact-grid { grid-template-columns: 1fr; }
  .footer-top { grid-template-columns: repeat(2, 1fr); }
  .carousel-arrow { display: none; }
}
@media (max-width: 640px) {
  .hero-copy h1 { font-size: 32px; }
  .stats-bar { grid-template-columns: 1fr 1fr; }
  .expertise-grid, .project-grid, .carousel-track, .insight-grid, .value-grid, .team-grid, .impact-grid, .resource-grid, .post-list { grid-template-columns: 1fr; }
  .footer-top { grid-template-columns: 1fr; }
  .cta-banner .container { flex-direction: column; align-items: flex-start; }
  .form-grid { grid-template-columns: 1fr; }
  .topbar-contact span:nth-child(2) { display: none; }
  .section { padding: 56px 0; }
  .logo .logo-sub { display: none; }
}