/*
 * Swiftaid Logistics — Brand Override
 * Loaded after style.css. Overrides all template defaults.
 * Primary colour: Deep Institutional Blue #0A1F5C
 * Typography: Montserrat
 */

/* ── Variables ──────────────────────────────────────────── */
:root {
  --thm-font:           "Montserrat", Arial, Helvetica, sans-serif;
  --thm-b-font:         "Montserrat", Arial, Helvetica, sans-serif;
  --thm-base:           #0A1F5C;
  --thm-base-hover:     #0d2875;
  --thm-base-rgb:       10, 31, 92;
  --thm-base-hue:       #e8ecf7;
  --thm-secondary:      #1a2f6e;
  --thm-secondary-rgb:  26, 47, 110;
  --thm-b-text:         #4a5568;
  --thm-border:         #d8e0f0;
  --sw-blue:            #0A1F5C;
  --sw-blue-mid:        #1a3380;
  --sw-blue-light:      #2d5be3;
  --sw-text-muted:      #6b7a99;
}

/* ── Typography ─────────────────────────────────────────── */
body {
  font-family: var(--thm-b-font);
  letter-spacing: 0.01em;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: var(--thm-font);
  font-weight: 700;
  letter-spacing: -0.01em;
}

p {
  font-family: var(--thm-b-font);
  font-weight: 400;
  line-height: 1.75;
  color: var(--thm-b-text);
}

/* ── Template components to suppress ───────────────────── */

/* Disable auto-firing newsletter popup */
#sigma_popup-newsletter { display: none !important; }

/* Hide desktop right sidebar — not appropriate for an institutional site */
.sigma_aside.sigma_aside-desktop,
.aside-trigger-right.desktop-toggler,
.sigma_aside-overlay.aside-trigger-right { display: none !important; }

/* ── Primary colour propagation ─────────────────────────── */
.primary-color,
.sigma_post-category,
.subtitle,
.sigma_service .sigma_service-body h5 a:hover,
.sigma_info-title h5 a { color: var(--sw-blue) !important; }

.btn-link.primary-color { color: var(--sw-blue) !important; }

.sigma_btn,
.sigma_btn-custom,
button[type="submit"],
.sigma_header-top-cta a {
  background-color: var(--sw-blue) !important;
  border-color: var(--sw-blue) !important;
  font-family: var(--thm-font) !important;
  font-weight: 600 !important;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  font-size: 12px;
  padding: 12px 28px;
  border-radius: 2px;
}

.sigma_btn:hover,
.sigma_btn-custom:hover,
button[type="submit"]:hover {
  background-color: var(--sw-blue-mid) !important;
  border-color: var(--sw-blue-mid) !important;
}

.sigma_btn.light {
  background-color: transparent !important;
  border: 2px solid var(--sw-blue) !important;
  color: var(--sw-blue) !important;
}

.sigma_btn.light:hover {
  background-color: var(--sw-blue) !important;
  color: #fff !important;
}

/* ── Header — Institutional Masthead ─────────────────────────
   One plane. No zones. No layers.

   Logo and navigation are companions on a single horizontal
   field. The composition communicates institutional authority
   through proportion, restraint, and deliberate whitespace.

   The call to action is an invitation — text behind a hairline
   rule. No border. No fill. The restraint is the message.
   ─────────────────────────────────────────────────────────── */

/* Suppress template utility bar */
.sigma_header .sigma_header-top { display: none !important; }

/* Reset template middle */
.sigma_header .sigma_header-middle,
.sigma_header .sigma_header-middle .navbar {
  min-height: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  display: block !important;
}

/* Header background */
.sigma_header,
.sigma_header.can-sticky { background-color: #0A1F5C !important; }

.sigma_header.sticky,
.sigma_header.is-sticky {
  background-color: #0A1F5C !important;
  box-shadow: 0 4px 48px rgba(10,31,92,0.42);
}

/* ── Utility bar ─────────────────────────────────────────────
   A slim institutional-grade strip above the masthead.
   Carries the operational enquiries contact signal on the left
   and a language selector on the right.
   Collapses when the header goes sticky — the masthead alone
   is sufficient for a compact fixed state.
   ─────────────────────────────────────────────────────────── */
.sw-util-bar {
  background-color: #071540;
  border-bottom: 1px solid rgba(255,255,255,0.07);
  padding: 7px 0;
}

.sigma_header.is-sticky .sw-util-bar { display: none; }

.sw-util-bar .container {
  max-width: 1100px;
  padding-left: 2.5rem;
  padding-right: 2.5rem;
}

.sw-util-inner {
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.sw-util-contact {
  font-family: var(--thm-font);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.58);
  text-decoration: none;
  transition: color 0.18s ease;
  white-space: nowrap;
}

.sw-util-contact:hover { color: rgba(255,255,255,0.82); }

/* ── Masthead shell ──────────────────────────────────────── */
.sw-masthead {
  padding: 18px 0;
  border-bottom: 1px solid rgba(255,255,255,0.07);
  transition: padding 0.25s ease;
}

.sigma_header.is-sticky .sw-masthead { padding: 12px 0; }

/* Refined container — pulled inward, curated rather than filled */
.sw-masthead .container {
  max-width: 1300px;
  padding-left: 2.5rem;
  padding-right: 2.5rem;
}

.sw-masthead-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* ── Brand mark ──────────────────────────────────────────── */
.sw-masthead-brand {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 5px;
  text-decoration: none;
  flex-shrink: 0;
  margin-left: clamp(0px, calc(50vw - 557px), 100px);
}

.sw-masthead-brand img {
  height: 64px;
  width: auto;
  filter: brightness(0) invert(1);
  display: block;
  transition: height 0.25s ease;
}

.sigma_header.is-sticky .sw-masthead-brand img { height: 46px; }

/* Supporting brand descriptor — collapsed when sticky */
.sw-brand-tagline {
  font-family: var(--thm-font);
  font-size: 8px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.46);
  line-height: 1;
  white-space: nowrap;
  transition: opacity 0.2s ease;
}

.sigma_header.is-sticky .sw-brand-tagline { display: none; }

/* ── Right side: navigation + CTA as one cohesive unit ────── */
.sw-masthead-right {
  display: flex;
  align-items: center;
}

/* Navigation */
.sw-masthead-nav {
  display: flex;
  align-items: center;
  list-style: none;
  margin: 0;
  padding: 0;
}

.sw-masthead-nav .menu-item { position: relative; }

.sw-masthead-nav .menu-item > a {
  font-family: var(--thm-font);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.68);
  padding: 0 16px;
  display: block;
  text-decoration: none;
  transition: color 0.18s ease;
  white-space: nowrap;
  line-height: 1;
}

.sw-masthead-nav .menu-item:first-child > a { padding-left: 0; }

.sw-masthead-nav .menu-item > a:hover,
.sw-masthead-nav .menu-item.active > a { color: rgba(255,255,255,0.92); }

/* ── CTA — an invitation, not a solicitation ─────────────── */
.sw-masthead-cta {
  font-family: var(--thm-font);
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.78);
  text-decoration: none;
  padding: 9px 16px;
  border: 1px solid rgba(255,255,255,0.28);
  white-space: nowrap;
  transition: color 0.18s ease, border-color 0.18s ease, background-color 0.18s ease;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  margin-left: 28px;
}

.sw-masthead-cta + .sw-masthead-cta { margin-left: 8px; }
.sw-masthead-cta i { font-size: 12px; opacity: 0.82; flex-shrink: 0; }

.sw-masthead-cta:hover {
  color: #fff;
  border-color: rgba(255,255,255,0.62);
  background-color: rgba(255,255,255,0.06);
}

/* Supplier Registration — same language, slightly more recessive.
   Secondary operational action; present but not competing. */
.sw-masthead-cta-secondary {
  border-color: rgba(255,255,255,0.16);
  color: rgba(255,255,255,0.54);
  margin-left: 8px;
}
.sw-masthead-cta-secondary:hover {
  color: rgba(255,255,255,0.88);
  border-color: rgba(255,255,255,0.42);
  background-color: rgba(255,255,255,0.04);
}

.sw-aside-cta-secondary {
  margin-top: -16px;
  border-color: rgba(255,255,255,0.18);
  color: rgba(255,255,255,0.6) !important;
}

/* ── Mobile burger ───────────────────────────────────────── */
.sw-burger {
  display: none;
  flex-direction: column;
  gap: 5px;
  cursor: pointer;
  padding: 4px 0;
  background: none;
  border: none;
}

.sw-burger span {
  display: block;
  width: 22px;
  height: 1.5px;
  background: rgba(255,255,255,0.70);
  transition: background 0.2s;
}

.sw-burger:hover span { background: rgba(255,255,255,0.95); }

/* ── Responsive ──────────────────────────────────────────── */
@media (max-width: 991.98px) {
  .sw-masthead-right { display: none; }
  .sw-burger { display: flex; }
}

@media (max-width: 767px) {
  /* Utility bar not useful on mobile — nav collapses to aside */
  .sw-util-bar { display: none; }
}

/* ── Mobile aside — clean, dark ──────────────────────────── */
.sigma_aside { background-color: #0A1F5C !important; }

.sigma_aside .sigma_logo-wrapper {
  border-bottom: 1px solid rgba(255,255,255,0.08);
  padding: 28px 24px !important;
}

.sigma_aside .navbar-nav .menu-item > a {
  color: rgba(255,255,255,0.78) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  padding: 16px 24px !important;
  border-bottom: 1px solid rgba(255,255,255,0.06) !important;
}

.sigma_aside .navbar-nav .menu-item > a:hover,
.sigma_aside .navbar-nav .menu-item.active > a { color: #fff !important; }

.sigma_aside .sub-menu { background-color: rgba(0,0,0,0.18) !important; }

.sigma_aside .sub-menu li a {
  color: rgba(255,255,255,0.65) !important;
  font-size: 12px !important;
  font-weight: 400 !important;
  letter-spacing: 0.05em !important;
  padding: 12px 32px !important;
  border-bottom: 1px solid rgba(255,255,255,0.04) !important;
}

/* Mobile CTA */
.sw-aside-cta {
  display: block;
  margin: 28px 24px;
  padding: 14px 20px;
  border: 1px solid rgba(255,255,255,0.3);
  color: rgba(255,255,255,0.85) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-align: center;
  text-decoration: none;
  transition: all 0.2s ease;
}

.sw-aside-cta:hover {
  background: #fff;
  color: #0A1F5C !important;
  border-color: #fff;
}

.sigma_header-top-cta a:hover {
  background-color: var(--sw-blue) !important;
  color: #fff !important;
  border-color: var(--sw-blue) !important;
}

/* ── Logo sizing ─────────────────────────────────────────── */
.sigma_logo-wrapper .sigma_logo img {
  height: 42px;
  width: auto;
}

/* ── Hero ────────────────────────────────────────────────────
   Split-field design: solid navy left (text), terrain photo right.
   The photo div sits behind content, revealed through a CSS mask
   so the left panel is completely opaque — no dark-overlay hacks.
   Height: ~45 vh (≈49% shorter than the original 88 vh hero).
   ──────────────────────────────────────────────────────────── */

.sw-hero {
  position: relative;
  min-height: 52vh;
  max-height: 600px;
  background-color: #0A1F5C;   /* solid fallback + left-panel colour */
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* Photo layer — sits behind everything, masked to the right half */
.sw-hero-photo {
  position: absolute;
  inset: 0;
  background-image: url('../img/hero-ops.jpg');
  background-size: cover;
  background-position: center;
  /* Mask: transparent (hidden) left → opaque (revealed) right  */
  -webkit-mask-image: linear-gradient(
    to right,
    transparent 0%,
    transparent 42%,
    rgba(0,0,0,0.45) 55%,
    rgba(0,0,0,0.88) 66%,
    black 76%
  );
  mask-image: linear-gradient(
    to right,
    transparent 0%,
    transparent 42%,
    rgba(0,0,0,0.45) 55%,
    rgba(0,0,0,0.88) 66%,
    black 76%
  );
  /* Darken + desaturate further so the message lands first and the
     navy field reads as the dominant tone — the photo supports the
     declaration rather than competing with it */
  filter: brightness(0.40) saturate(0.74);
}

/* Inner layout */
.sw-hero-body {
  flex: 1;
  display: flex;
  align-items: center;
  position: relative;
  z-index: 1;
  padding-top: 60px;
  padding-bottom: 104px;
  max-width: 1100px;
  padding-left: 2.5rem;
  padding-right: 2.5rem;
}

.sw-hero-content { max-width: 580px; }

.sw-hero-eyebrow {
  font-family: var(--thm-font);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.82);
  text-shadow: 0 1px 10px rgba(4,13,48,0.45);
  margin: 0 0 20px;
  line-height: 1;
}

.sw-hero-heading {
  font-family: var(--thm-font);
  font-weight: 800;
  font-size: clamp(34px, 4.8vw, 60px);
  line-height: 1.05;
  letter-spacing: -0.03em;
  color: #fff;
  margin: 0 0 24px;
}

.sw-hero-desc {
  font-family: var(--thm-font);
  font-size: clamp(14px, 1.35vw, 16px);
  line-height: 1.74;
  color: rgba(255,255,255,0.76);
  max-width: 500px;
  margin: 0 0 24px;
  font-weight: 400;
}

.sw-hero-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  align-items: center;
}

.sw-hero-cta-primary {
  font-family: var(--thm-font);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 13px 26px;
  background: #fff;
  color: #0A1F5C !important;
  text-decoration: none;
  border-radius: 2px;
  transition: opacity 0.18s ease;
  white-space: nowrap;
  display: inline-block;
  border: none;
}

.sw-hero-cta-primary:hover { opacity: 0.88; }

.sw-hero-cta-ghost {
  font-family: var(--thm-font);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 13px 24px;
  background: transparent;
  color: rgba(255,255,255,0.76) !important;
  text-decoration: none;
  border: 1px solid rgba(255,255,255,0.28);
  border-radius: 2px;
  transition: color 0.18s ease, border-color 0.18s ease;
  white-space: nowrap;
  display: inline-block;
}

.sw-hero-cta-ghost:hover {
  color: #fff !important;
  border-color: rgba(255,255,255,0.60);
}

/* Trust signal bar — bottom strip of the hero.
   Displays operational standards or verified credentials.
   IMPORTANT: only populate with substantiated claims.
   Replace descriptors with verified cert/registration details
   once UNGM status, ISO certification, or compliance frameworks
   are confirmed. */
.sw-hero-trust {
  position: relative;
  z-index: 2;
  flex-shrink: 0;
  padding: 10px 0;
  background: rgba(4,13,48,0.45);
  border-top: 1px solid rgba(255,255,255,0.08);
}

.sw-hero-trust .container {
  max-width: 1100px;
  padding-left: 2.5rem;
  padding-right: 2.5rem;
}

.sw-hero-trust-text {
  font-family: var(--thm-font);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.46);
  line-height: 1.6;
  text-align: center;
  margin: 0;
}

/* Mobile: gradient mask flips to top→bottom so photo shows below text */
@media (max-width: 767px) {
  .sw-hero {
    min-height: auto;
    max-height: none;
  }

  .sw-hero-photo {
    -webkit-mask-image: linear-gradient(
      to bottom,
      transparent 0%,
      transparent 45%,
      rgba(0,0,0,0.55) 65%,
      black 82%
    );
    mask-image: linear-gradient(
      to bottom,
      transparent 0%,
      transparent 45%,
      rgba(0,0,0,0.55) 65%,
      black 82%
    );
    filter: brightness(0.34) saturate(0.66);
  }

  .sw-hero-body {
    padding-top: 48px;
    padding-bottom: 52px;
  }
}

/* ── Section titles ─────────────────────────────────────── */
.section-title .subtitle {
  font-family: var(--thm-font);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--sw-blue);
}

.section-title .title {
  font-weight: 700;
  color: #0f1c3f;
  font-size: clamp(26px, 3vw, 38px);
  line-height: 1.2;
}

/* ── Who We Support ─────────────────────────────────────────
   Replaces the old icon-card grid. Left column: narrative
   explaining why this audience matters. Right column: clean
   ruled text list — no icons, the names carry their own weight.
   ─────────────────────────────────────────────────────────── */
.sw-serve-section {
  background: #fff;
  padding: 96px 0;
}

.sw-serve-label {
  font-family: var(--thm-font);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--sw-text-muted);
  margin: 0 0 20px;
  display: block;
}

.sw-serve-heading {
  font-family: var(--thm-font);
  font-weight: 700;
  font-size: clamp(22px, 2.6vw, 32px);
  color: #0f1c3f;
  letter-spacing: -0.02em;
  line-height: 1.18;
  margin: 0 0 24px;
}

.sw-serve-body {
  font-family: var(--thm-font);
  font-size: 15px;
  line-height: 1.78;
  color: var(--thm-b-text);
  margin: 0;
}

.sw-serve-list {
  border-top: 1px solid #d8e0f0;
}

.sw-serve-item {
  font-family: var(--thm-font);
  font-size: 16px;
  font-weight: 600;
  color: #0f1c3f;
  padding: 20px 0;
  border-bottom: 1px solid #d8e0f0;
  letter-spacing: -0.01em;
  line-height: 1;
}

/* ── East Africa Operational Footprint ──────────────────────
   Full-bleed section. The terrain photograph becomes the canvas —
   not a contained image beside text, but the environment itself.
   Dark overlay preserves legibility while the landscape remains
   visible underneath.

   Five countries presented with operational descriptors. Geography
   as a capability argument: these environments demand specialist
   field knowledge, and Swiftaid's operations are structured
   around their specific realities.

   Position: between Capabilities (what) and Framework (how).
   Visual role: breathing room, geographic anchor, immersive moment.
   ─────────────────────────────────────────────────────────── */
.sw-ea-section {
  position: relative;
  padding: 72px 0;
  overflow: hidden;
}

.sw-ea-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url('../img/about-us/logistics.png');
  background-size: cover;
  background-position: center 40%;
  filter: grayscale(1);
  z-index: 0;
}

/* Overlay: navy gradient — dark enough for text legibility,
   light enough that the terrain photograph remains a presence
   beneath the content rather than an invisible layer. */
.sw-ea-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    135deg,
    rgba(5,16,52,0.88) 0%,
    rgba(10,31,92,0.76) 100%
  );
}

.sw-ea-inner {
  position: relative;
  z-index: 1;
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 2.5rem;
}

/* Section header: left-aligned, constrained width.
   The landscape is the right half of the visual composition. */
.sw-ea-header {
  max-width: 600px;
  margin-bottom: 40px;
}

.sw-ea-eyebrow {
  font-family: var(--thm-font);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.62);
  margin: 0 0 20px;
  line-height: 1;
}

/* Two-line heading: each line reads as a separate statement.
   The period after "Five Countries." is intentional — a pause
   before the second declaration lands. */
.sw-ea-heading {
  font-family: var(--thm-font);
  font-weight: 800;
  font-size: clamp(28px, 3.6vw, 44px);
  color: #fff;
  letter-spacing: -0.03em;
  line-height: 1.06;
  margin: 0 0 18px;
}

.sw-ea-context {
  font-family: var(--thm-font);
  font-size: 15px;
  line-height: 1.76;
  color: rgba(255,255,255,0.60);
  margin: 0;
}

/* Five-country grid: full width, equal columns, separated
   by hairline vertical rules. Each column: name + descriptor. */
.sw-ea-countries {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  border-top: 1px solid rgba(255,255,255,0.14);
  border-bottom: 1px solid rgba(255,255,255,0.14);
  margin-bottom: 32px;
}

.sw-ea-country {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 18px 20px 18px 0;
  border-right: 1px solid rgba(255,255,255,0.1);
}

.sw-ea-country:first-child { padding-left: 0; }
.sw-ea-country:last-child { border-right: none; }

/* Country name: white, prominent — size elevated to give
   each country the visual weight it deserves as a core
   operational territory, not simply a location tag */
.sw-ea-cname {
  font-family: var(--thm-font);
  font-weight: 700;
  font-size: 17px;
  color: #fff;
  letter-spacing: -0.01em;
  line-height: 1;
}

/* Operational descriptor: what Swiftaid does in this country —
   type of work, not claims about specific clients or contracts */
.sw-ea-crole {
  font-family: var(--thm-font);
  font-size: 13px;
  font-weight: 400;
  line-height: 1.48;
  color: rgba(255,255,255,0.48);
}

/* Quiet link — the photograph is the visual anchor;
   the link is an invitation, not a CTA */
.sw-ea-link {
  font-family: var(--thm-font);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.52);
  text-decoration: none;
  transition: color 0.18s ease;
}

.sw-ea-link:hover { color: #fff; }

/* Responsive: collapse country grid to ruled list on small screens */
@media (max-width: 991px) {
  .sw-ea-countries { grid-template-columns: repeat(3, 1fr); }
  /* reset first/last padding for tablet reflow */
  .sw-ea-country { padding-left: 0; }
  .sw-ea-country:nth-child(3) { border-right: none; }
  .sw-ea-country:nth-child(n+4) {
    border-top: 1px solid rgba(255,255,255,0.1);
  }
}

@media (max-width: 767px) {
  .sw-ea-section { padding: 56px 0; }
  .sw-ea-header { margin-bottom: 32px; }
  /* Single column: each country becomes a horizontal row */
  .sw-ea-countries {
    grid-template-columns: 1fr;
    border-top: 1px solid rgba(255,255,255,0.14);
  }
  .sw-ea-country {
    flex-direction: row;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    padding: 13px 0;
    border-right: none;
    border-bottom: 1px solid rgba(255,255,255,0.1);
    border-top: none;
  }
  .sw-ea-country:last-child { border-bottom: none; }
  .sw-ea-country:nth-child(n+4) { border-top: none; }
}

/* ── Operational Footprint (homepage, redesigned) ─────────────
   Two-column institutional layout: contained image set against
   operational information. Information leads, image supports —
   the inverse of the previous full-bleed treatment. Lighter,
   denser, less homepage real estate. */
.sw-ops-section {
  padding: 56px 0;
  background-color: #F4F7FD;
}

.sw-ops-grid {
  display: grid;
  grid-template-columns: 1fr 1.08fr;
  column-gap: 56px;
  align-items: start;
}

.sw-ops-media {
  position: relative;
  border-radius: 4px;
  overflow: hidden;
  aspect-ratio: 4 / 5;
}
.sw-ops-media::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.35);
  pointer-events: none;
}

.sw-ops-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(0.25);
}

.sw-ops-eyebrow {
  font-family: var(--thm-font);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--sw-text-muted);
  margin: 0 0 14px;
  line-height: 1;
}

.sw-ops-rule {
  display: block;
  width: 32px;
  height: 2px;
  background: #0A1F5C;
  margin: 0 0 18px;
}

.sw-ops-heading {
  font-family: var(--thm-font);
  font-weight: 800;
  font-size: clamp(26px, 3vw, 38px);
  color: var(--sw-blue);
  letter-spacing: -0.03em;
  line-height: 1.1;
  margin: 0 0 14px;
}

.sw-ops-context {
  font-family: var(--thm-font);
  font-size: 14px;
  line-height: 1.7;
  color: var(--thm-b-text);
  max-width: 480px;
  margin: 0 0 22px;
}

/* Country list: compact ruled rows — proof points that support
   the headline without competing with it. Tight rhythm, smaller
   type, and a label keep the block visually subordinate. */
.sw-ops-countries-label {
  font-family: var(--thm-font);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--sw-text-muted);
  margin: 0 0 8px;
  line-height: 1;
}

.sw-ops-countries {
  border-top: 1px solid #e8edf5;
  margin-bottom: 18px;
}

.sw-ops-country {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 24px;
  padding: 8px 0;
  border-bottom: 1px solid #e8edf5;
}

.sw-ops-cname {
  font-family: var(--thm-font);
  font-weight: 700;
  font-size: 13px;
  color: var(--sw-blue);
  letter-spacing: -0.01em;
  flex: 0 0 auto;
}

.sw-ops-crole {
  font-family: var(--thm-font);
  font-size: 12px;
  font-weight: 400;
  color: var(--sw-text-muted);
  text-align: right;
}

.sw-ops-link {
  font-family: var(--thm-font);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--sw-blue);
  text-decoration: none;
  transition: color 0.18s ease;
}

.sw-ops-link:hover { color: var(--sw-blue-light); }

@media (max-width: 991px) {
  .sw-ops-grid {
    grid-template-columns: 1fr;
    row-gap: 28px;
  }
  .sw-ops-media { aspect-ratio: 16 / 9; }
}

@media (max-width: 575px) {
  .sw-ops-section { padding: 48px 0; }
  .sw-ops-country {
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
  }
  .sw-ops-crole { text-align: left; }
}

/* ── Operational pull quote ─────────────────────────────────
   Replaces the warehouse image in the Why Swiftaid section.
   The copy is strong enough to stand without photography.
   ─────────────────────────────────────────────────────────── */
.sw-pullquote {
  background: var(--sw-blue);
  padding: 52px 48px;
  border-radius: 4px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 380px;
  height: 100%;
}

.sw-pullquote-label {
  font-family: var(--thm-font);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.38);
  margin: 0 0 28px;
}

.sw-pullquote-text {
  font-family: var(--thm-font);
  font-weight: 700;
  font-size: clamp(20px, 2.4vw, 28px);
  line-height: 1.32;
  color: #fff;
  letter-spacing: -0.02em;
  margin: 0 0 32px;
  padding: 0;
  border: none;
}

.sw-pullquote-attr {
  font-family: var(--thm-font);
  font-size: 13px;
  line-height: 1.68;
  color: rgba(255,255,255,0.46);
  margin: 0;
  font-weight: 400;
}

/* ── Capability cards (legacy — still active on services.html) */
.sigma_service.style-4 {
  border: 1px solid #e8edf5;
  border-radius: 4px;
  transition: border-color 0.22s ease, box-shadow 0.22s ease;
  padding: 28px 24px 26px;
}

/* Restrained hover: border shift and a gentle shadow only —
   no physical lift, which reads as commercial/SaaS */
.sigma_service.style-4:hover {
  border-color: rgba(10,31,92,0.28);
  box-shadow: 0 4px 18px rgba(10,31,92,0.07);
}

.sigma_service .sigma_service-body h5 {
  font-family: var(--thm-font);
  font-weight: 700;
  font-size: 15px;
  color: #0f1c3f;
  margin-bottom: 10px;
  letter-spacing: -0.01em;
}

.sigma_service .sigma_service-body p {
  font-size: 14px;
  line-height: 1.70;
  color: var(--thm-b-text);
  margin-bottom: 0;
}

.sigma_service .sigma_service-footer { display: none; }

/* ── Info boxes ─────────────────────────────────────────── */
.sigma_info.style-9 {
  border: 1px solid #e8edf5;
  padding: 24px;
  border-radius: 4px;
}

.sigma_info.style-9 .sigma_info-icon {
  background-color: var(--thm-base-hue) !important;
  color: var(--sw-blue) !important;
}

/* ── Counter/stats ──────────────────────────────────────── */
.sigma_counter { text-align: center; }
.sigma_counter span { color: var(--sw-blue); }

/* ── About section ──────────────────────────────────────── */
.sigma_about-exp {
  background-color: var(--sw-blue);
}

/* ── Breadcrumb subheader ───────────────────────────────── */
.sigma_subheader .sigma_subheader-inner h1 {
  font-weight: 700;
  letter-spacing: -0.01em;
}

/* ── Footer ─────────────────────────────────────────────── */
.sigma_footer.style-4 {
  background-color: #0a1122;
  padding-top: 48px;
}

.sigma_footer .sigma_footer-top {
  border-bottom: 1px solid rgba(255,255,255,0.1);
  padding-bottom: 24px;
  margin-bottom: 24px;
}

.sigma_footer-links li a,
.sigma_footer-copyright p,
.sigma_footer-copyright a {
  font-size: 13px;
  color: rgba(255,255,255,0.6);
}

.sigma_footer-links li a:hover { color: #fff; }

.sigma_footer .widget-title {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.45);
  margin-bottom: 16px;
}

/* Hide newsletter in footer — not appropriate for B2B institutional */
.sigma_footer .sigma_footer-middle { display: none; }

/* ── Preloader: suppressed — template artifact not needed ── */
.sigma_preloader { display: none !important; }

/* ── Mission statement block ──────────────────────────────
   Integrated, institutional treatment — clean white background,
   generous top spacing so the section reads as a calm continuation
   of the page rather than a highlighted feature block.
   ─────────────────────────────────────────────────────────── */
.sw-mission-block {
  background-color: #F8FAFF;
  padding: 132px 0 96px;
}

.sw-mission-label {
  font-family: var(--thm-font);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--sw-text-muted);
  margin: 0 0 16px;
  line-height: 1;
}

.sw-mission-block .sw-mission-quote {
  font-family: var(--thm-font);
  font-weight: 700;
  font-size: clamp(26px, 3.2vw, 42px);
  line-height: 1.1;
  color: #0f1c3f;
  letter-spacing: -0.02em;
  max-width: 640px;
  margin: 0 0 20px;
}

/* Each declaration on its own line, reading as one continuous
   statement — spacing comes from line-height alone so the two
   lines feel unified rather than like separate blocks. */
.sw-mission-line {
  display: block;
}

.sw-mission-block .sw-mission-sub {
  font-family: var(--thm-font);
  font-size: 15px;
  line-height: 1.78;
  color: var(--thm-b-text);
  max-width: 640px;
  margin: 0;
  font-weight: 400;
}

/* ── Architectural structure ───────────────────────────────
   Asymmetric, left-anchored composition — a narrow "marker"
   column carrying the section label and a structural rule,
   set against a wider statement column. This gives the
   statement a deliberate point of origin and a left-aligned
   institutional posture, rather than a centred caption block
   floating in open space. */
.sw-mission-single {
  display: grid;
  grid-template-columns: 140px 1fr;
  column-gap: 40px;
  align-items: start;
  text-align: left;
}

.sw-mission-marker {
  display: flex;
  flex-direction: column;
}

/* Short structural rule beneath the label — anchors the
   statement to a fixed point rather than letting it float;
   reads as a marker, not a decorative flourish. */
.sw-mission-rule {
  display: block;
  width: 34px;
  height: 2px;
  background: var(--sw-blue);
}

/* Divider between headline and supporting copy — sequences
   the two ideas as distinct movements (declaration, then
   context) rather than one continuous block of text. */
.sw-mission-divider {
  display: block;
  width: 100%;
  max-width: 640px;
  height: 1px;
  background: #e3e9f3;
  margin: 0 0 20px;
}

@media (max-width: 767px) {
  .sw-mission-single {
    grid-template-columns: 1fr;
    row-gap: 28px;
  }
  .sw-mission-marker {
    flex-direction: row;
    align-items: center;
    gap: 16px;
    padding-top: 0;
  }
  .sw-mission-label { margin: 0; }
}

/* ── Mission Support Services — operational chain transition ──
   Single-line sequence bridging "Our Purpose" and the
   Operational Footprint. Functions as a transition, not a
   standalone section — kept minimal and low-height using the
   existing typography scale and colour palette. */
.sw-services-block {
  background-color: #EDF2FA;
  padding: 24px 0;
}

.sw-services-flow {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px 14px;
  margin-bottom: 12px;
}

.sw-services-stage {
  font-family: var(--thm-font);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #0f1c3f;
  white-space: nowrap;
}

.sw-services-arrow {
  font-size: 14px;
  line-height: 1;
  color: var(--sw-text-muted);
  flex-shrink: 0;
}

.sw-services-statement {
  font-family: var(--thm-font);
  font-size: 13px;
  line-height: 1.6;
  color: var(--sw-text-muted);
  max-width: 640px;
  margin: 0 auto;
  font-weight: 400;
  text-align: center;
}

@media (max-width: 767px) {
  .sw-services-flow {
    gap: 8px 10px;
  }
  .sw-services-stage {
    font-size: 11px;
  }
}

/* ── Client type cards ──────────────────────────────────── */
.sw-client-card {
  border: 1px solid #e8edf5;
  border-radius: 4px;
  padding: 24px 20px;
  text-align: center;
  transition: all 0.25s ease;
}

.sw-client-card:hover {
  border-color: var(--sw-blue);
  background-color: var(--thm-base-hue);
}

.sw-client-card i {
  font-size: 28px;
  color: var(--sw-blue);
  display: block;
  margin-bottom: 12px;
}

.sw-client-card h6 {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #0f1c3f;
  margin: 0;
}

/* ── Differentiator items ───────────────────────────────── */
.sw-diff-item {
  display: flex;
  gap: 20px;
  align-items: flex-start;
  padding: 20px 0;
  border-bottom: 1px solid #e8edf5;
}

.sw-diff-item:last-child { border-bottom: none; }

.sw-diff-no {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.15em;
  color: var(--sw-blue);
  min-width: 28px;
  padding-top: 3px;
}

.sw-diff-title {
  font-weight: 700;
  font-size: 15px;
  color: #0f1c3f;
  margin-bottom: 6px;
}

.sw-diff-desc {
  font-size: 14px;
  line-height: 1.65;
  color: var(--thm-b-text);
  margin: 0;
}

/* ── Coverage region tags ───────────────────────────────── */
.sw-region-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  background-color: var(--thm-base-hue);
  border: 1px solid #d0dbf0;
  border-radius: 2px;
  font-size: 13px;
  font-weight: 600;
  color: var(--sw-blue);
  letter-spacing: 0.03em;
}

/* ── Footer — institutional signature ──────────────────────
   Three zones. No columns. No descriptors. No conversion.
   The footer is the calmest part of the page.

   Zone 1: Logo left · navigation right (one horizontal row)
   Zone 2: Brand seal — "Not moving cargo. Enabling missions."
   Zone 3: Copyright left · contact email + social right

   Background: #0A1F5C — the brand navy. Consistent with all
   other dark sections; lighter than the previous near-black.
   ─────────────────────────────────────────────────────────── */
.sw-footer {
  background: #0A1F5C;
  padding: 48px 0 0;
}

.sw-footer-inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 2.5rem;
}

/* Zone 1: logo + inline navigation */
.sw-footer-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 40px;
  border-bottom: 1px solid rgba(255,255,255,0.16);
}

.sw-footer-brand-link {
  display: inline-block;
  flex-shrink: 0;
  text-decoration: none;
}

.sw-footer-logo {
  height: 48px;
  width: auto;
  display: block;
  filter: brightness(0) invert(1);
  opacity: 0.94;
}

/* Inline nav: four links, no column labels, no list structure */
.sw-footer-nav {
  display: flex;
  align-items: center;
  gap: 28px;
}

.sw-footer-nav-link {
  font-family: var(--thm-font);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.72);
  text-decoration: none;
  transition: color 0.16s ease;
  white-space: nowrap;
}

.sw-footer-nav-link:hover { color: rgba(255,255,255,0.96); }

/* Zone 2: brand seal — the closing institutional statement */
.sw-footer-seal {
  padding: 28px 0;
  border-bottom: 1px solid rgba(255,255,255,0.14);
  text-align: center;
}

.sw-footer-seal-text {
  font-family: var(--thm-font);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: rgba(223,229,242,0.86);
  margin: 0;
  line-height: 1;
}

/* Zone 3: base bar */
.sw-footer-base {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 0;
  flex-wrap: wrap;
  gap: 12px;
}

.sw-footer-copy {
  font-family: var(--thm-font);
  font-size: 12px;
  color: rgba(223,229,242,0.78);
  margin: 0;
}

/* Legal links — Privacy Policy & Terms of Use.
   Inline with copyright. Small, understated, present.
   Signal organisational maturity, not navigation. */
.sw-footer-legal-link {
  font-family: var(--thm-font);
  font-size: 12px;
  color: rgba(223,229,242,0.84);
  text-decoration: none;
  transition: color 0.16s ease;
}

.sw-footer-legal-link:hover { color: rgba(223,229,242,0.98); }

.sw-footer-base-right {
  display: flex;
  align-items: center;
  gap: 20px;
}

.sw-footer-email {
  font-family: var(--thm-font);
  font-size: 12px;
  color: rgba(223,229,242,0.88);
  text-decoration: none;
  transition: color 0.16s ease;
}

.sw-footer-email:hover { color: rgba(223,229,242,0.99); }

.sw-footer-social {
  display: flex;
  gap: 14px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.sw-footer-social li a {
  font-size: 12px;
  color: rgba(255,255,255,0.52);
  text-decoration: none;
  transition: color 0.16s ease;
}

.sw-footer-social li a:hover { color: rgba(255,255,255,0.82); }

/* Responsive */
@media (max-width: 767px) {
  .sw-footer-top {
    flex-direction: column;
    align-items: flex-start;
    gap: 22px;
    padding-bottom: 32px;
  }
  .sw-footer-nav { flex-wrap: wrap; gap: 16px 20px; }
  .sw-footer-base { flex-direction: column; align-items: flex-start; }
  .sw-footer-base-right { flex-direction: column; align-items: flex-start; gap: 10px; }
}

/* ── Closing engagement zone ────────────────────────────────
   Single continuous light-grey section carrying the trust
   statement and the dual operational CTA together as one
   cohesive closing experience — credibility flowing directly
   into action, with no background break or separator between
   them. Replaces the previously separate trust-statement and
   dual-CTA blocks.
   ─────────────────────────────────────────────────────────── */
.sw-closing-zone {
  background: #F8FAFF;
  padding: 88px 0 96px;
}

.sw-closing-zone .container {
  max-width: 1100px;
  padding-left: 2.5rem;
  padding-right: 2.5rem;
}

/* Section label — frames the statement and cards beneath it as
   one grouped engagement gateway, styled to the same hierarchy
   as "Our Purpose" / "Operational Footprint" eyebrow labels so
   the closing zone reads as a deliberate section, not a loose
   block of content sharing a background. */
.sw-closing-label {
  font-family: var(--thm-font);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--sw-text-muted);
  text-align: center;
  margin: 0 0 14px;
  line-height: 1;
}

/* Short architectural rule anchoring the label to the statement
   beneath it — a structural marker, not a decorative flourish.
   Echoes the navy rule used in the Our Purpose section, keeping
   the institutional vocabulary consistent across the homepage. */
.sw-closing-rule {
  display: block;
  width: 48px;
  height: 2px;
  background: var(--sw-blue);
  margin: 0 auto 28px;
}

/* Trust statement — answers "why credible" between the section
   label above and the two operational pathways below. Sits
   inside the same background as the cards, with spacing tuned
   to read as part of one grouped sequence rather than an
   isolated statement floating in open space. */
.sw-trust-statement {
  font-family: var(--thm-font);
  font-size: 14px;
  line-height: 1.74;
  color: var(--sw-text-muted);
  text-align: center;
  max-width: 620px;
  margin: 0 auto 48px;
}

@media (min-width: 992px) {
  .sw-trust-statement { font-size: 15px; margin-bottom: 56px; }
}

.sw-dualcta-card {
  height: 100%;
  background: #F8FAFF;
  border: 1px solid #e0e6f1;
  padding: 40px 36px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.sw-dualcta-eyebrow {
  font-family: var(--thm-font);
  font-weight: 700;
  font-size: 17px;
  color: #0f1c3f;
  letter-spacing: -0.01em;
  margin: 0 0 14px;
}

.sw-dualcta-text {
  font-family: var(--thm-font);
  font-size: 14px;
  line-height: 1.7;
  color: var(--thm-b-text);
  max-width: 360px;
  margin: 0 0 28px;
}

.sw-dualcta-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-family: var(--thm-font);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--sw-blue);
  background: #F8FAFF;
  border: 1px solid var(--sw-blue);
  padding: 15px 34px;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
  margin-top: auto;
}

.sw-dualcta-btn::after {
  content: '\2192';
  font-weight: 400;
  transition: transform 0.18s ease;
}

.sw-dualcta-btn:hover,
.sw-dualcta-btn:focus-visible {
  background: var(--sw-blue);
  color: #ffffff;
  border-color: var(--sw-blue);
}

.sw-dualcta-btn:hover::after,
.sw-dualcta-btn:focus-visible::after {
  transform: translateX(3px);
}

.sw-dualcta-btn:focus-visible {
  outline: 2px solid var(--sw-blue);
  outline-offset: 2px;
}

@media (max-width: 767.98px) {
  .sw-closing-zone { padding: 64px 0; }
  .sw-closing-label { margin-bottom: 14px; }
  .sw-trust-statement { margin-bottom: 36px; }
  .sw-dualcta-card { padding: 32px 26px; }
}

/* ── Contact CTA block ──────────────────────────────────── */
.sw-cta-block {
    background: #f4f7fd;
  border-top: none;
  border-bottom: none;
  padding: 72px 0;
}



.sw-cta-block h2 {
  font-weight: 700;
  font-size: clamp(26px, 3vw, 36px);
  color: #0f1c3f;
  margin-bottom: 16px;
}

.sw-cta-block p {
  color: var(--thm-b-text);
  max-width: 520px;
  margin: 0 auto 32px;
  font-size: 15px;
}

/* CTA section eyebrow */
.sw-cta-eyebrow {
  font-family: var(--thm-font);
  font-weight: 600;
  font-size: 10px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--sw-text-muted);
  margin-bottom: 14px;
  line-height: 1;
}

.sw-cta-rule {
  display: block;
  width: 32px;
  height: 2px;
  background: #0A1F5C;
  margin: 0 auto 18px;
}

/* CTA primary button -- outlined style with arrow, consistent across all pages. */
.sw-cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--thm-font);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 15px 34px;
  background: #f4f7fd;
  color: #0A1F5C;
  border: 1px solid #0A1F5C;
  transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
  white-space: nowrap;
}

.sw-cta-btn::after {
  content: '\2192';
  font-weight: 400;
  transition: transform 0.18s ease;
}

.sw-cta-btn:hover,
.sw-cta-btn:focus {
  background: #0A1F5C;
  color: #ffffff;
  border-color: #0A1F5C;
  outline: none;
}

.sw-cta-btn:hover::after,
.sw-cta-btn:focus::after {
  transform: translateX(3px);
}

.sw-cta-btn:focus-visible {
  outline: 2px solid rgba(10,31,92,0.50);
  outline-offset: 3px;
}

/* ── Responsive helpers (≤ 767px) ──────────────────────────
   Consolidated from three separate blocks. All mobile
   overrides for sections below the hero live here.
   ─────────────────────────────────────────────────────────── */
@media (max-width: 767px) {

  /* Mission statement */
  .sw-mission-block { padding: 88px 0 64px; }

  /* Who we serve */
  .sw-serve-section { padding: 64px 0; }

  /* Pull quote */
  .sw-pullquote {
    min-height: auto;
    padding: 40px 32px;
    margin-bottom: 40px;
  }

  /* CTA block and legacy service cards */
  .sw-cta-block { padding: 56px 0; }
  .sw-cta-btn {
    white-space: normal;
    text-align: center;
    flex-wrap: wrap;
    justify-content: center;
    row-gap: 6px;
  }
  .sigma_service.style-4 { margin-bottom: 20px; }
}

/* ═══════════════════════════════════════════════════════════
   CAPABILITIES PAGE — services.html  (v5)
   Six sections. Structurally distinct. Interactive middle.

   1. Header         — dark navy, left-aligned declaration
   2. Field Dispatch — white, left-bordered horizontal stripes
   3. Framework      — off-white, tabbed capability explorer
   4. Field Reality  — dark, full-bleed photograph + geography
   5. Declaration    — darkest dark, centered, sparse
   6. CTA            — white, centered (shared sw-cta-block)
   ═══════════════════════════════════════════════════════════ */

/* ══ 1. HEADER ═══════════════════════════════════════════════ */
.sw-cap-header {
  background:
    linear-gradient(rgba(10, 31, 92, 0.72), rgba(10, 31, 92, 0.72)),
    url('../img/services-hero.jpg') center / cover no-repeat;
  padding: 72px 0 80px;
}

.sw-cap-header-inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 2.5rem;
}

.sw-cap-doc-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 24px;
}

.sw-cap-doc-label,
.sw-cap-doc-region {
  font-family: var(--thm-font);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.44);
}

.sw-cap-doc-sep { color: rgba(255,255,255,0.18); }

.sw-cap-h1 {
  font-size: clamp(28px, 4vw, 52px);
  font-weight: 800;
  color: #fff;
  letter-spacing: -0.03em;
  line-height: 1.07;
  margin-bottom: 20px;
  max-width: 620px;
}

.sw-cap-lead {
  font-size: 15px;
  line-height: 1.65;
  color: rgba(255,255,255,0.54);
  max-width: 500px;
  margin: 0;
}


/* ══ 2. FIELD DISPATCH ═══════════════════════════════════════
   Full width. No section-level columns.
   Heading at top. Left-bordered horizontal stripes below.
   Each stripe: country label (left) + field reality (right).
   Establishes environmental credibility before any
   capability claim is made.
   ══════════════════════════════════════════════════════════ */
.sw-cap-dispatch {
  background: #fff;
  border-bottom: 1px solid #d0d8ec;
  padding: 80px 0;
}

.sw-cap-dispatch-inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 2.5rem;
}

.sw-cap-dispatch-eyebrow {
  display: block;
  font-family: var(--thm-font);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--sw-text-muted);
  margin-bottom: 20px;
}

.sw-cap-dispatch-heading {
  font-size: clamp(18px, 2.4vw, 28px);
  font-weight: 700;
  color: #0f1c3f;
  letter-spacing: -0.02em;
  line-height: 1.25;
  max-width: 560px;
  margin-bottom: 44px;
}

.sw-cap-dispatch-list {
  border-top: 1px solid #d0d8ec;
  list-style: none;
  padding: 0;
  margin: 0;
}

.sw-cap-dispatch-item {
  display: grid;
  grid-template-columns: 160px 1fr;
  align-items: baseline;
  gap: 0 48px;
  padding: 22px 0 22px 20px;
  border-bottom: 1px solid #d0d8ec;
  border-left: 2px solid rgba(10,31,92,0.14);
  margin-left: -2px;
}

.sw-cap-dispatch-region {
  font-family: var(--thm-font);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #0A1F5C;
  padding-top: 2px;
}

.sw-cap-dispatch-fact {
  font-size: 14px;
  line-height: 1.65;
  color: var(--thm-b-text);
  margin: 0;
}


/* ══ 3. TABBED CAPABILITY FRAMEWORK ══════════════════════════
   Off-white container. Eyebrow + heading at top.
   Tab bar beneath. Single content panel below the bar.
   Five capabilities — one container.
   ══════════════════════════════════════════════════════════ */
.sw-cap-capabilities {
  background: #F8FAFF;
  border-bottom: 1px solid #d0d8ec;
  padding: 80px 0;
}

.sw-cap-capabilities-inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 2.5rem;
}

.sw-cap-capabilities-eyebrow {
  display: block;
  font-family: var(--thm-font);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--sw-text-muted);
  margin-bottom: 14px;
}

.sw-cap-capabilities-rule {
  display: block;
  width: 32px;
  height: 2px;
  background: #0A1F5C;
  margin-bottom: 18px;
}

.sw-cap-capabilities-heading {
  font-size: clamp(20px, 2.6vw, 30px);
  font-weight: 700;
  color: #0f1c3f;
  letter-spacing: -0.02em;
  line-height: 1.25;
  margin-bottom: 44px;
}

/* Capability framework — six modules, three columns / two rows.
   Pillars, not cards: no borders, no boxes, generous whitespace. */
.sw-cap-capability-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  column-gap: 64px;
  row-gap: 56px;
  list-style: none;
  padding: 0;
  margin: 0;
}

.sw-cap-capability-mod {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  max-width: 360px;
}

.sw-cap-capability-icon {
  font-size: 34px;
  line-height: 1;
  color: #0A1F5C;
  margin-bottom: 22px;
}

.sw-cap-capability-name {
  display: block;
  font-family: var(--thm-font);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: #0f1c3f;
  margin-bottom: 10px;
}

.sw-cap-capability-desc {
  display: block;
  font-size: 14px;
  line-height: 1.65;
  color: var(--sw-text-muted);
}


/* ══ FEATURE BAND — OPERATIONAL STANDARD ═════════════════════════
   Architectural anchor between Capabilities and Requirements.
   Dark navy. Composed left/right — statement paired with a
   field-operations photograph. Not a CTA; no buttons.
   ════════════════════════════════════════════════════════════ */
.sw-cap-feature {
  background: #0A1F5C;
}

.sw-cap-feature-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: stretch;
}

.sw-cap-feature-text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 116px 4rem 116px calc(50vw - 620px + 4rem);
}

.sw-cap-feature-label {
  display: block;
  font-family: var(--thm-font);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.40);
  margin-bottom: 24px;
}

.sw-cap-feature-statement {
  font-size: clamp(32px, 4.4vw, 56px);
  font-weight: 800;
  color: #fff;
  letter-spacing: -0.03em;
  line-height: 1.08;
  margin-bottom: 28px;
}

.sw-cap-feature-note {
  font-size: 15px;
  line-height: 1.75;
  color: rgba(255,255,255,0.56);
  max-width: 420px;
  margin: 0;
}

.sw-cap-feature-indicators {
  display: flex;
  flex-wrap: wrap;
  gap: 28px;
  list-style: none;
  margin: 24px 0 0;
  padding: 0;
}

.sw-cap-feature-indicator {
  font-family: var(--thm-font);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.68);
  padding-left: 14px;
  border-left: 2px solid rgba(255,255,255,0.28);
}

.sw-cap-feature-cta {
  margin-top: 32px;
  align-self: flex-start;
}

.sw-cap-feature-media {
  position: relative;
  min-height: 480px;
  overflow: hidden;
}
.sw-cap-feature-media::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(6, 33, 106, 0.3);
  pointer-events: none;
}

.sw-cap-feature-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 92% 62%;
  display: block;
  filter: brightness(0.9) contrast(1.08) saturate(0.85);
}


/* ══ 3. OPERATIONAL FRAMEWORK — COMPOSED LEFT/RIGHT ══════════════
   Off-white. Left: framing column (sticky on desktop).
   Right: five structured scenario modules, each split into
   Challenge / Swiftaid's Response columns. Numbers as anchors.
   ════════════════════════════════════════════════════════════ */
.sw-cap-requirements {
  background: #f8faff;
  padding: 112px 0;
}

.sw-cap-requirements-inner {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 2.5rem;
}

/* Editorial intro — sets context, then steps back. The selected
   capability inside the panel carries the section's primary weight. */
.sw-cap-req-intro {
  max-width: 580px;
  margin: 0 auto 72px;
  text-align: center;
}

.sw-cap-requirements-eyebrow {
  display: block;
  font-family: var(--thm-font);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: rgba(10,31,92,0.45);
  margin-bottom: 18px;
}

.sw-cap-requirements-heading {
  font-size: clamp(22px, 2.4vw, 28px);
  font-weight: 700;
  color: #0f1c3f;
  letter-spacing: -0.02em;
  line-height: 1.2;
  margin-bottom: 20px;
}

.sw-cap-req-intro-rule {
  display: block;
  width: 40px;
  height: 2px;
  background: #0A1F5C;
  margin: 0 auto 28px;
}

.sw-cap-req-frame-note {
  font-size: 14px;
  line-height: 1.74;
  color: var(--sw-text-muted);
  max-width: 480px;
  margin: 0 auto;
}

/* Five operational realities — standalone modules, numbering as primary anchor */
/* Operational realities — split-panel (desktop) / accordion (mobile).
   Single source of copy lives in .sw-cap-reality-source; the desktop
   display panel is populated from it via JS so only one reality is
   ever visible at a time — editorial, not card-stacked. */
.sw-cap-reality-interactive {
  display: grid;
  grid-template-columns: minmax(0, 27%) 1fr;
  gap: 0 110px;
  align-items: start;
}

.sw-cap-reality-nav {
  list-style: none;
  padding: 45px 0 0;
  margin: 0;
  display: flex;
  flex-direction: column;
}

/* Thin item separators only — no framing lines around the component */
.sw-cap-reality-item {
  border-bottom: 1px solid #e9eef7;
}

.sw-cap-reality-item:last-child {
  border-bottom: none;
}

.sw-cap-reality-trigger {
  display: flex;
  align-items: center;
  gap: 16px;
  width: 100%;
  background: transparent;
  box-shadow: none;
  border: 0;
  border-left: 1.5px solid transparent;
  cursor: pointer;
  text-align: left;
  padding: 9px 12px;
  font-family: var(--thm-font);
  transition: border-color 0.25s ease;
}

/* Hover: white text and icon on navy background */
.sw-cap-reality-trigger:hover {
  background-color: #0A1F5C;
  color: #fff;
  box-shadow: none;
}

.sw-cap-reality-trigger:hover .sw-cap-reality-trigger-icon {
  color: #fff;
}

.sw-cap-reality-trigger:hover .sw-cap-reality-trigger-name {
  color: #fff;
}

.sw-cap-reality-item.is-active .sw-cap-reality-trigger:hover .sw-cap-reality-trigger-icon {
  color: #fff;
}

.sw-cap-reality-item.is-active .sw-cap-reality-trigger:hover .sw-cap-reality-trigger-name {
  color: #fff;
  font-weight: 500;
}

/* Focus ring sits flush against the inner edge as a thin accent rather
   than an outline that could cut across descenders/ascenders in the label. */
.sw-cap-reality-trigger:focus-visible {
  outline: none;
}

/* Fixed-width icon column — every label begins from the same horizontal
   position regardless of each icon's internal shape or proportions. */
.sw-cap-reality-trigger-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 34px;
  height: 34px;
  color: rgba(10,31,92,0.36);
  transition: color 0.25s ease;
}

.sw-cap-reality-trigger-icon svg {
  display: block;
  width: 17px;
  height: 17px;
}

.sw-cap-reality-trigger-name {
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0.01em;
  color: #54648a;
  transition: color 0.25s ease, font-weight 0.25s ease;
}

.sw-cap-reality-trigger-sign {
  display: none;
}

/* Active state — restrained: thin accent line and slightly stronger type
   only. No background tint — text and icon sit directly on the page. */
.sw-cap-reality-item.is-active .sw-cap-reality-trigger {
  border-left-color: #0A1F5C;
}

.sw-cap-reality-item.is-active .sw-cap-reality-trigger-icon {
  color: #0A1F5C;
}

.sw-cap-reality-item.is-active .sw-cap-reality-trigger-name {
  color: #0A1F5C;
  font-weight: 500;
}

/* Right column — the focal point. Number + title carry primary weight;
   Challenge / Response read as operational briefing sections. */
.sw-cap-reality-display {
  padding: 8px 0 0 8px;
}

.sw-cap-reality-display-num {
  display: block;
  font-family: var(--thm-font);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.18em;
  color: rgba(10,31,92,0.40);
  margin-bottom: 14px;
}

.sw-cap-reality-display-title {
  font-family: var(--thm-font);
  font-size: clamp(24px, 2.5vw, 32px);
  font-weight: 800;
  letter-spacing: -0.03em;
  color: #0A1F5C;
  margin: 0 0 24px;
  line-height: 1.15;
}

.sw-cap-reality-display-rule {
  display: block;
  width: 48px;
  height: 2px;
  background: rgba(10,31,92,0.18);
  margin: 0 0 44px;
}

.sw-cap-reality-display-pair {
  max-width: 640px;
}

.sw-cap-reality-display-pair + .sw-cap-reality-display-pair {
  margin-top: 36px;
  padding-top: 36px;
  border-top: 1px solid #e2e8f4;
}

.sw-cap-reality-display-label {
  display: block;
  font-family: var(--thm-font);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(10,31,92,0.45);
  margin-bottom: 14px;
}

.sw-cap-reality-display-pair--response .sw-cap-reality-display-label {
  color: #0A1F5C;
}

.sw-cap-reality-display-text {
  font-size: 15px;
  line-height: 1.78;
  color: var(--thm-b-text);
  margin: 0;
}

/* Shared Challenge / Response head treatment — circular outline icon
   beside the label + copy column. Used in both the desktop display
   panel and the mobile accordion source content. */
.sw-cap-reality-pair-head {
  display: flex;
  align-items: flex-start;
  gap: 18px;
}

.sw-cap-reality-icon-wrap {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  margin-top: 2px;
  color: rgba(10,31,92,0.55);
}

.sw-cap-reality-display-pair--response .sw-cap-reality-icon-wrap,
.sw-cap-reality-source-pair--response .sw-cap-reality-icon-wrap {
  color: #0A1F5C;
}

.sw-cap-reality-icon {
  display: block;
}

.sw-cap-reality-pair-copy {
  flex: 1 1 auto;
  min-width: 0;
}

.sw-cap-reality-pair-copy .sw-cap-reality-display-label,
.sw-cap-reality-pair-copy .sw-cap-reality-source-label {
  margin-bottom: 10px;
}

/* Calm, restrained transition — fade with a short rise, no aggressive motion */
.sw-cap-reality-display.is-fading {
  animation: sw-reality-fade 0.4s ease both;
}

@keyframes sw-reality-fade {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Source content — hidden on desktop (cloned into the display panel),
   becomes the accordion body on mobile/tablet. */
.sw-cap-reality-source {
  display: none;
}


/* ══ 4. FIELD REALITY — PHOTOGRAPH ══════════════════════════ */
.sw-cap-field {
  position: relative;
  background: #051034;
  overflow: hidden;
  padding: 96px 0;
}

.sw-cap-field-bg {
  position: absolute;
  inset: 0;
  background-image: url('../img/hero-ops.jpg');
  background-size: cover;
  background-position: center 38%;
}

.sw-cap-field-overlay {
  position: absolute;
  inset: 0;
  background: rgba(5,16,52,0.88);
}

.sw-cap-field-inner {
  position: relative;
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 2.5rem;
}

.sw-cap-field-eyebrow {
  display: block;
  font-family: var(--thm-font);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.36);
  margin-bottom: 20px;
}

.sw-cap-field-heading {
  font-size: clamp(26px, 3.8vw, 48px);
  font-weight: 800;
  color: #fff;
  letter-spacing: -0.03em;
  line-height: 1.1;
  margin-bottom: 18px;
  max-width: 660px;
}

.sw-cap-field-context {
  font-size: 15px;
  line-height: 1.7;
  color: rgba(255,255,255,0.54);
  max-width: 520px;
  margin-bottom: 0;
}

.sw-cap-field-countries {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  border-top: 1px solid rgba(255,255,255,0.10);
  border-bottom: 1px solid rgba(255,255,255,0.10);
  margin-bottom: 36px;
}

.sw-cap-field-country {
  display: flex;
  flex-direction: column;
  padding: 24px 20px 24px 0;
  border-right: 1px solid rgba(255,255,255,0.07);
}

.sw-cap-field-country:last-child { border-right: none; }

.sw-cap-field-cname {
  font-size: 16px;
  font-weight: 700;
  color: #fff;
  letter-spacing: -0.01em;
  margin-bottom: 6px;
}

.sw-cap-field-crole {
  font-size: 11px;
  line-height: 1.4;
  color: rgba(255,255,255,0.38);
}

.sw-cap-field-link {
  font-family: var(--thm-font);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.42);
  text-decoration: none;
  transition: color 0.18s ease;
}

.sw-cap-field-link:hover { color: rgba(255,255,255,0.80); }


/* ══ 5. DECLARATION ══════════════════════════════════════════ */
.sw-cap-declaration {
  background: #071540;
  padding: 96px 0;
  text-align: center;
}

.sw-cap-declaration-inner {
  max-width: 720px;
  margin: 0 auto;
  padding: 0 2.5rem;
}

.sw-cap-declaration-label {
  font-family: var(--thm-font);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.28);
  margin-bottom: 28px;
}

.sw-cap-declaration-text {
  font-size: clamp(24px, 3.4vw, 44px);
  font-weight: 700;
  color: #fff;
  letter-spacing: -0.025em;
  line-height: 1.18;
  margin-bottom: 28px;
}

.sw-cap-declaration-note {
  font-size: 14px;
  line-height: 1.72;
  color: rgba(255,255,255,0.38);
  max-width: 500px;
  margin: 0 auto;
}


/* == RESPONSIVE == */
@media (max-width: 1199px) {
  .sw-cap-field-countries { grid-template-columns: repeat(3, 1fr); }
  .sw-cap-field-country:nth-child(3)   { border-right: none; }
  .sw-cap-field-country:nth-child(n+4) { border-top: 1px solid rgba(255,255,255,0.07); }
}

@media (max-width: 991px) {
  .sw-cap-header    { padding: 56px 0 64px; }
  .sw-cap-capabilities,
  .sw-cap-requirements { padding: 60px 0; }
  .sw-cap-capability-grid {
    grid-template-columns: repeat(2, 1fr);
    column-gap: 48px;
    row-gap: 48px;
  }
  /* Split-panel collapses into an accordion: nav becomes the list of
     headers, the desktop display panel is hidden, and each reality's
     source content expands inline beneath its own trigger. */
  .sw-cap-reality-interactive {
    grid-template-columns: 1fr;
    gap: 0;
  }
  .sw-cap-reality-display {
    display: none;
  }
  .sw-cap-reality-trigger {
    align-items: center;
    padding: 22px 4px;
  }
  .sw-cap-reality-trigger-name {
    font-size: 16px;
  }
  .sw-cap-reality-trigger-sign {
    display: block;
    margin-left: auto;
    position: relative;
    width: 16px;
    height: 16px;
    flex: none;
  }
  .sw-cap-reality-trigger-sign::before,
  .sw-cap-reality-trigger-sign::after {
    content: "";
    position: absolute;
    background: rgba(10,31,92,0.45);
    transition: transform 0.2s ease, background 0.2s ease;
  }
  .sw-cap-reality-trigger-sign::before {
    top: 50%; left: 0;
    width: 100%; height: 1.5px;
    transform: translateY(-50%);
  }
  .sw-cap-reality-trigger-sign::after {
    left: 50%; top: 0;
    width: 1.5px; height: 100%;
    transform: translateX(-50%);
  }
  .sw-cap-reality-item.is-active .sw-cap-reality-trigger-sign::before,
  .sw-cap-reality-item.is-active .sw-cap-reality-trigger-sign::after {
    background: #0A1F5C;
  }
  .sw-cap-reality-item.is-active .sw-cap-reality-trigger-sign::after {
    transform: translateX(-50%) rotate(90deg);
    opacity: 0;
  }
  .sw-cap-reality-source {
    display: block;
    overflow: hidden;
    max-height: 0;
    opacity: 0;
    transition: max-height 0.36s ease, opacity 0.28s ease, padding 0.36s ease;
    padding: 0 4px;
  }
  .sw-cap-reality-item.is-active .sw-cap-reality-source {
    max-height: 900px;
    opacity: 1;
    padding: 4px 4px 30px;
  }
  .sw-cap-reality-source-title {
    display: none;
  }
  .sw-cap-reality-source-pair + .sw-cap-reality-source-pair {
    margin-top: 28px;
  }
  .sw-cap-reality-source-label {
    display: block;
    font-family: var(--thm-font);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: rgba(10,31,92,0.42);
    margin-bottom: 12px;
  }
  .sw-cap-reality-source-pair--response .sw-cap-reality-source-label {
    color: #0A1F5C;
  }
  .sw-cap-reality-source-text {
    font-size: 14px;
    line-height: 1.7;
    color: var(--thm-b-text);
    margin: 0;
  }
  .sw-cap-feature-inner {
    grid-template-columns: 1fr;
  }
  .sw-cap-feature-text {
    padding: 64px 2.5rem;
  }
  .sw-cap-feature-media {
    min-height: 320px;
    order: -1;
  }
}

@media (max-width: 767px) {
  .sw-cap-header        { padding: 48px 0 56px; }
  .sw-cap-capabilities,
  .sw-cap-requirements  { padding: 48px 0; }
  .sw-cap-capabilities-inner,
  .sw-cap-requirements-inner { padding: 0 1.5rem; }
  .sw-cap-capability-grid {
    grid-template-columns: 1fr;
    row-gap: 40px;
  }
  .sw-cap-capability-mod { max-width: none; }
  .sw-cap-reality-trigger { padding: 18px 4px; }
  .sw-cap-feature-text  { padding: 48px 1.5rem; }
  .sw-cap-feature-media { min-height: 260px; }
  .sw-cap-field         { padding: 72px 0; }
  .sw-cap-field-countries { grid-template-columns: 1fr; }
  .sw-cap-field-country {
    flex-direction: row;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    padding: 14px 0;
    border-right: none;
    border-bottom: 1px solid rgba(255,255,255,0.07);
  }
  .sw-cap-field-country:last-child    { border-bottom: none; }
  .sw-cap-field-country:nth-child(3)  { border-right: none; }
  .sw-cap-field-country:nth-child(n+4){ border-top: none; }
  .sw-cap-declaration   { padding: 72px 0; }
}


/* ═══════════════════════════════════════════════════════════
   EAST AFRICA PAGE — portfolio.html
   Five sections. Operational realities precede geography.
   Countries support the story; they do not become it.

   1. Header        — dark navy, declarative
   2. Realities     — white, five numbered operational themes
   3. Photograph    — dark, full-bleed (reuses sw-cap-field)
   4. Country Ref   — off-white, compressed five-country reference
   5. Commitment    — darkest dark (reuses sw-cap-declaration)
   6. CTA           — white (shared sw-cta-block)
   ═══════════════════════════════════════════════════════════ */

/* ══ 1. HEADER ═══════════════════════════════════════════════ */
.sw-page-ea .sw-ea-header {
  background: #0A1F5C;
  overflow: hidden;
}

.sw-page-ea .sw-ea-header-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: stretch;
  min-height: 0;
}

.sw-page-ea .sw-ea-header-text {
  padding: 72px 3rem 80px calc(50vw - 620px + 2.5rem);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.sw-page-ea .sw-ea-header-photo {
  overflow: hidden;
}

.sw-page-ea .sw-ea-header-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}

@media (max-width: 1100px) {
  .sw-page-ea .sw-ea-header-text { padding: 72px 2.5rem 80px 2.5rem; }
}

@media (max-width: 991px) {
  .sw-page-ea .sw-ea-header-inner {
    grid-template-columns: 1fr;
  }
  .sw-page-ea .sw-ea-header-text { padding: 56px 2.5rem 40px; }
  .sw-page-ea .sw-ea-header-photo { height: 280px; }
}

@media (max-width: 767px) {
  .sw-page-ea .sw-ea-header-text { padding: 48px 1.5rem 32px; }
  .sw-page-ea .sw-ea-header-photo { height: 220px; }
}

.sw-ea-doc-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 24px;
}

.sw-ea-doc-label,
.sw-ea-doc-region {
  font-family: var(--thm-font);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.44);
}

.sw-ea-doc-sep { color: rgba(255,255,255,0.18); }

.sw-ea-h1 {
  font-size: clamp(28px, 4vw, 52px);
  font-weight: 800;
  color: #fff;
  letter-spacing: -0.03em;
  line-height: 1.07;
  margin-bottom: 20px;
  max-width: 620px;
}

.sw-ea-lead {
  font-size: 15px;
  line-height: 1.68;
  color: rgba(255,255,255,0.54);
  max-width: 520px;
  margin: 0;
}


/* ══ 2. OPERATIONAL REALITIES ════════════════════════════════
   White. Full width. Five numbered entries.
   Each entry: muted number gutter / heading / body / countries.
   Countries appear at the END of each item as evidence,
   not at the beginning as headings.
   Visual shape at 50% zoom: numbered list, wide headings.
   ══════════════════════════════════════════════════════════ */
.sw-ea-realities {
  background: #fff;
  border-bottom: 1px solid #d0d8ec;
  padding: 80px 0;
}

.sw-ea-realities-inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 2.5rem;
}

.sw-ea-realities-eyebrow {
  display: block;
  font-family: var(--thm-font);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--sw-text-muted);
  margin-bottom: 20px;
}

.sw-ea-realities-heading {
  font-size: clamp(20px, 2.6vw, 30px);
  font-weight: 700;
  color: #0f1c3f;
  letter-spacing: -0.02em;
  line-height: 1.22;
  max-width: 580px;
  margin-bottom: 52px;
}

.sw-ea-reality-list {
  border-top: 1px solid #d0d8ec;
  list-style: none;
  padding: 0;
  margin: 0;
}

.sw-ea-reality {
  display: grid;
  grid-template-columns: 52px 1fr;
  gap: 0 40px;
  padding: 40px 0;
  border-bottom: 1px solid #d0d8ec;
  align-items: start;
}

.sw-ea-reality:last-child { border-bottom: none; }

.sw-ea-reality-num {
  font-family: var(--thm-font);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: rgba(10,31,92,0.22);
  padding-top: 4px;
  text-align: right;
  user-select: none;
}

.sw-ea-reality-h {
  font-size: clamp(17px, 2vw, 22px);
  font-weight: 800;
  color: #0f1c3f;
  letter-spacing: -0.02em;
  line-height: 1.18;
  margin-bottom: 12px;
}

.sw-ea-reality-body {
  font-size: 14px;
  line-height: 1.75;
  color: var(--thm-b-text);
  max-width: 740px;
  margin-bottom: 16px;
}

.sw-ea-reality-where {
  font-family: var(--thm-font);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: rgba(10,31,92,0.34);
}


/* ══ 3. PHOTOGRAPH ═══════════════════════════════════════════
   Reuses sw-cap-field classes defined in capabilities CSS.
   No additional CSS needed — already in swiftaid.css.
   ══════════════════════════════════════════════════════════ */


/* ══ 4. COUNTRY REFERENCE ════════════════════════════════════
   Off-white. Five countries as a compressed reference.
   Not chapters — reference entries.
   Three-column layout: name | category | context.
   Visual shape: clean horizontal table, light background.
   ══════════════════════════════════════════════════════════ */
.sw-page-ea .sw-ea-countries {
  background: #f8faff;
  border-bottom: 1px solid #d0d8ec;
  padding: 72px 0;
}

.sw-page-ea .sw-ea-countries-inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 2.5rem;
}

.sw-ea-countries-eyebrow {
  display: block;
  font-family: var(--thm-font);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--sw-text-muted);
  margin-bottom: 16px;
}

.sw-ea-countries-heading {
  font-size: clamp(20px, 2.4vw, 28px);
  font-weight: 800;
  color: #0f1c3f;
  letter-spacing: -0.025em;
  line-height: 1.15;
  margin-bottom: 44px;
}

.sw-ea-country-list {
  border-top: 1px solid #d0d8ec;
  list-style: none;
  padding: 0;
  margin: 0;
}

.sw-page-ea .sw-ea-country {
  display: grid;
  grid-template-columns: 200px 180px 1fr;
  align-items: baseline;
  gap: 0 40px;
  padding: 22px 0;
  border-bottom: 1px solid #d0d8ec;
}

.sw-page-ea .sw-ea-country:last-child { border-bottom: none; }

.sw-ea-country-name {
  font-family: var(--thm-font);
  font-size: 15px;
  font-weight: 700;
  color: #0f1c3f;
  letter-spacing: -0.01em;
}

.sw-ea-country-cat {
  font-family: var(--thm-font);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(10,31,92,0.38);
  padding-top: 3px;
}

.sw-ea-country-context {
  font-size: 13px;
  line-height: 1.62;
  color: var(--thm-b-text);
}


/* ══ 5. COMMITMENT ═══════════════════════════════════════════
   Reuses sw-cap-declaration classes.
   Different content from services.html — same visual treatment.
   ══════════════════════════════════════════════════════════ */


/* ══ EAST AFRICA PAGE RESPONSIVE ════════════════════════════ */
@media (max-width: 991px) {
  .sw-page-ea .sw-ea-realities { padding: 60px 0; }
  .sw-page-ea .sw-ea-country {
    grid-template-columns: 180px 1fr;
    grid-template-rows: auto auto;
    gap: 4px 32px;
  }
  .sw-page-ea .sw-ea-country-cat { grid-column: 2; grid-row: 1; }
  .sw-page-ea .sw-ea-country-context { grid-column: 2; grid-row: 2; }
}

@media (max-width: 767px) {
  .sw-page-ea .sw-ea-realities { padding: 48px 0; }
  .sw-page-ea .sw-ea-realities-inner,
  .sw-page-ea .sw-ea-countries-inner { padding: 0 1.5rem; }
  .sw-page-ea .sw-ea-reality {
    grid-template-columns: 36px 1fr;
    gap: 0 20px;
    padding: 32px 0;
  }
  .sw-page-ea .sw-ea-countries { padding: 52px 0; }
  .sw-page-ea .sw-ea-country {
    grid-template-columns: 1fr;
    gap: 3px 0;
    padding: 20px 0;
  }
  .sw-page-ea .sw-ea-country-cat,
  .sw-page-ea .sw-ea-country-context { grid-column: 1; }
}

/* ── Google reCAPTCHA badge clearance ──────────────────────────────────
   Pages with form submission (Contact, Procurement & Logistics Request)
   load the invisible reCAPTCHA script, which injects a fixed bottom-right
   badge (.grecaptcha-badge, 60px tall, anchored ~14px from the bottom).
   The site-wide back-to-top control (.sigma_top, 60px, anchored 40px from
   the bottom) occupies the same corner, so the two overlap — and in
   environments where the reCAPTCHA site key's domain isn't authorised,
   Google renders an "Invalid domain for site key" notice inside that
   badge, which reads as an error sitting on top of the back-to-top button.
   Raising the badge above the back-to-top control keeps both visible and
   independently functional without hiding Google's required branding. */
.grecaptcha-badge {
  bottom: 112px !important;
}

@media (max-width: 767px) {
  .grecaptcha-badge {
    bottom: 96px !important;
  }
}

/* ── Contact form honeypot ──────────────────────────────────────────────
   Visually hidden from sighted users, but present in the DOM so that
   automated submission scripts fill it in. Left blank by humans; the
   backend screens out submissions where this field is non-empty
   (see sendmail.php). */
.sw-contact-hp {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ═══════════════════════════════════════════════════════════
   EAST AFRICA PAGE — HERO (sw-eahero)
   Split layout: navy text left | photo right.
   Photo fills the right half edge-to-edge.
   Fresh class names — no legacy rules anywhere in this file.
═══════════════════════════════════════════════════════════ */
.sw-eahero {
  background: #0A1F5C;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: stretch;
  overflow: hidden;
}

.sw-eahero-text {
  padding: 72px 5rem 80px max(2.5rem, calc((100vw - 1100px) / 2 + 2.5rem));
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.sw-eahero-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 24px;
}

.sw-eahero-label,
.sw-eahero-region {
  font-family: var(--thm-font);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.40);
}

.sw-eahero-sep {
  color: rgba(255,255,255,0.18);
}

.sw-eahero-h1 {
  font-size: clamp(28px, 3.6vw, 48px);
  font-weight: 800;
  color: #fff;
  letter-spacing: -0.03em;
  line-height: 1.08;
  margin: 0 0 24px;
}

.sw-eahero-lead {
  font-size: 15px;
  line-height: 1.75;
  color: rgba(255,255,255,0.64);
  margin: 0;
  max-width: 480px;
}

.sw-eahero-photo {
  position: relative;
  overflow: hidden;
  min-height: 360px;
}

.sw-eahero-photo::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.38);
  pointer-events: none;
  z-index: 1;
}

.sw-eahero-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 72%;
  position: absolute;
  inset: 0;
}

@media (max-width: 991px) {
  .sw-eahero {
    grid-template-columns: 1fr;
  }
  .sw-eahero-text {
    padding: 56px 2.5rem 40px;
    max-width: none;
    margin-left: 0;
  }
  .sw-eahero-photo {
    min-height: 260px;
  }
}

@media (max-width: 767px) {
  .sw-eahero-text {
    padding: 48px 1.5rem 32px;
  }
  .sw-eahero-photo {
    min-height: 200px;
  }
}

/* ═══════════════════════════════════════════════════════════
   EAST AFRICA — WHY EAST AFRICA IS DIFFERENT (sw-ereals)
   2-column card grid. Each card: navy top accent, large faded
   number, bold title, body, country tags as pills.
   Card 05 spans both columns.
═══════════════════════════════════════════════════════════ */
.sw-ereals {
  background: #F8FAFF;
  padding: 88px 0 96px;
}

.sw-ereals-inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 2.5rem;
}

.sw-ereals-header {
  max-width: 640px;
  margin-bottom: 56px;
}

.sw-ereals-eyebrow {
  display: block;
  font-family: var(--thm-font);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #1a3a8f;
  margin-bottom: 14px;
}

.sw-ereals-rule {
  display: block;
  width: 32px;
  height: 2px;
  background: #0A1F5C;
  margin-bottom: 18px;
}

.sw-ereals-heading {
  font-size: clamp(20px, 2.4vw, 28px);
  font-weight: 700;
  color: #0f1c3f;
  line-height: 1.3;
  margin: 0;
}

.sw-ereals-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  align-items: start;
}

.sw-ereals-card {
  position: relative;
  background: #fff;
  border-top: 1px solid rgba(10,31,92,0.7);
  border-radius: 2px;
  padding: 36px 36px 28px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-height: 240px;
}

.sw-ereals-card--wide {
  grid-column: 1 / -1;
}

.sw-ereals-num {
  position: absolute;
  top: 16px;
  right: 24px;
  font-family: var(--thm-font);
  font-size: 64px;
  font-weight: 800;
  color: #0A1F5C;
  opacity: 0.05;
  line-height: 1;
  user-select: none;
  pointer-events: none;
}

.sw-ereals-title {
  font-size: 16px;
  font-weight: 800;
  color: #0f1c3f;
  line-height: 1.35;
  margin: 0 0 14px;
  padding-right: 48px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: calc(1.35em * 2);
}

.sw-ereals-body {
  font-size: 14px;
  line-height: 1.78;
  color: #4a5568;
  margin: 0 0 20px;
  flex: 1;
}

.sw-ereals-summary {
  font-size: 14px;
  line-height: 1.7;
  font-weight: 500;
  color: #0f1c3f;
  margin: 0 0 16px;
  padding-right: 48px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: calc(1.7em * 3);
}

.sw-ereals-details {
  margin-top: auto;
}

.sw-ereals-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--thm-font);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #1a3a8f;
  cursor: pointer;
  background: none;
  border: none;
  box-shadow: none;
  padding: 0;
  margin: 0;
  transition: none;
}

.sw-ereals-toggle:hover,
.sw-ereals-toggle:focus,
.sw-ereals-toggle:active {
  color: #1a3a8f;
  background: none;
  box-shadow: none;
  outline: none;
  text-decoration: none;
  transform: none;
}

.sw-ereals-toggle:focus-visible {
  outline: 2px solid rgba(10,31,92,0.35);
  outline-offset: 4px;
  border-radius: 1px;
}

.sw-ereals-toggle::after {
  content: '+';
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
}

.sw-ereals-toggle[aria-expanded="true"]::after {
  content: '\2212';
}

.sw-ereals-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.sw-ereals-content-inner {
  padding-top: 16px;
}

.sw-ereals-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 16px;
}

.sw-ereals-tag {
  font-family: var(--thm-font);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #1a3a8f;
  background: #eef1fb;
  border: 1px solid #d0d8ec;
  border-radius: 2px;
  padding: 4px 10px;
}

@media (max-width: 767px) {
  .sw-ereals { padding: 64px 0 72px; }
  .sw-ereals-inner { padding: 0 1.5rem; }
  .sw-ereals-grid { grid-template-columns: 1fr; }
  .sw-ereals-card--wide { grid-column: 1; }
  .sw-ereals-card { padding: 28px 24px 22px; min-height: 226px; }
  .sw-ereals-num { font-size: 48px; }
}

/* ═══════════════════════════════════════════════════════════
   EAST AFRICA — OPERATIONAL FOOTPRINT (sw-footprint)
   Editorial panel layout. Each country: large bold name as
   anchor, category pill right-aligned, context beneath.
   2px navy top rule opens the list; hairlines divide entries.
═══════════════════════════════════════════════════════════ */
.sw-footprint {
  background: #F8FAFF;
  padding: 88px 0 96px;
  border-bottom: 1px solid #d0d8ec;
}

.sw-footprint-inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 2.5rem;
}

.sw-footprint-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 40px;
  margin-bottom: 56px;
}

.sw-footprint-eyebrow {
  font-family: var(--thm-font);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #1a3a8f;
  white-space: nowrap;
}

.sw-footprint-heading {
  font-size: clamp(22px, 2.6vw, 32px);
  font-weight: 800;
  color: #0f1c3f;
  line-height: 1.2;
  margin: 0;
  text-align: right;
}

.sw-footprint-list {
  border-top: 2px solid #0A1F5C;
}

.sw-footprint-item {
  border-bottom: 1px solid #d0d8ec;
  padding: 36px 0 32px;
}

.sw-footprint-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 18px;
}

.sw-footprint-identity {
  display: flex;
  align-items: baseline;
  gap: 18px;
}

.sw-footprint-num {
  font-family: var(--thm-font);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: rgba(10, 31, 92, 0.30);
  user-select: none;
}

.sw-footprint-name {
  font-size: clamp(26px, 3.2vw, 42px);
  font-weight: 800;
  color: #0A1F5C;
  letter-spacing: -0.03em;
  line-height: 1;
}

.sw-footprint-cat {
  font-family: var(--thm-font);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #fff;
  background: #0A1F5C;
  padding: 7px 18px;
  border-radius: 2px;
  white-space: nowrap;
  flex-shrink: 0;
}

.sw-footprint-context {
  font-size: 14px;
  line-height: 1.78;
  color: #4a5568;
  margin: 0;
  max-width: 720px;
  padding-left: 48px;
}

@media (max-width: 767px) {
  .sw-footprint { padding: 64px 0 72px; }
  .sw-footprint-inner { padding: 0 1.5rem; }
  .sw-footprint-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 40px;
  }
  .sw-footprint-heading { text-align: left; }
  .sw-footprint-top {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
  .sw-footprint-context { padding-left: 0; }
}


/* ============================================
   Legal Pages (Privacy Policy / Terms of Use)
   ============================================ */
.sw-legal-page {
  background: #ffffff;
  padding: 80px 0 100px;
}

.sw-legal-heading {
  font-family: 'Montserrat', sans-serif;
  font-size: clamp(28px, 3.2vw, 40px);
  font-weight: 800;
  color: #0f1c3f;
  letter-spacing: -0.02em;
  margin: 0 0 10px;
}

.sw-legal-updated {
  font-family: 'Montserrat', sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #1a3a8f;
  margin: 0 0 36px;
  padding-bottom: 28px;
  border-bottom: 1px solid #e4e9f5;
}

.sw-legal-body {
  max-width: 800px;
}

.sw-legal-body h2 {
  font-family: 'Montserrat', sans-serif;
  font-size: clamp(18px, 2vw, 22px);
  font-weight: 800;
  color: #0A1F5C;
  letter-spacing: -0.01em;
  line-height: 1.3;
  margin: 56px 0 18px;
  padding-top: 28px;
  border-top: 1px solid #e4e9f5;
}

.sw-legal-body h2:first-child {
  margin-top: 0;
  padding-top: 0;
  border-top: none;
}

.sw-legal-body h3 {
  font-family: 'Montserrat', sans-serif;
  font-size: 15px;
  font-weight: 700;
  color: #0f1c3f;
  letter-spacing: -0.01em;
  margin: 28px 0 12px;
}

.sw-legal-body p {
  font-family: 'Montserrat', sans-serif;
  font-size: 14px;
  line-height: 1.9;
  color: #4a5568;
  margin: 0 0 20px;
}

.sw-legal-body ul {
  margin: 0 0 20px;
  padding-left: 20px;
}

.sw-legal-body li {
  font-family: 'Montserrat', sans-serif;
  font-size: 14px;
  line-height: 1.9;
  color: #4a5568;
  margin-bottom: 10px;
}

.sw-legal-body a {
  color: #1a3a8f;
  font-weight: 600;
  text-decoration: underline;
}

.sw-legal-back {
  display: inline-block;
  margin-top: 48px;
  font-family: 'Montserrat', sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #0A1F5C;
  text-decoration: none;
  transition: color 0.2s ease;
}

.sw-legal-back:hover {
  color: #1a3a8f;
}

@media (max-width: 599px) {
  .sw-legal-page {
    padding: 56px 0 64px;
  }

  .sw-legal-body h2 {
    margin: 44px 0 14px;
    padding-top: 22px;
  }

  .sw-legal-body h3 {
    margin: 22px 0 10px;
  }

  .sw-legal-body p,
  .sw-legal-body ul {
    margin: 0 0 18px;
  }
}

/* ── Keyboard focus states — accessibility / procurement-review requirement ── */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
.swpr-input:focus-visible,
.swpr-select:focus-visible,
.swpr-textarea:focus-visible,
.swpr-btn:focus-visible,
.sw-masthead-nav .menu-item > a:focus-visible,
.sigma_aside .navbar-nav .menu-item > a:focus-visible,
.sw-hero-cta-primary:focus-visible,
.sw-hero-cta-ghost:focus-visible,
.sw-masthead-cta:focus-visible,
.sw-aside-cta:focus-visible {
  outline: 2px solid var(--sw-blue-light);
  outline-offset: 2px;
}