/**
 * Washnah Home — Natural Hero + Sector-Aware Project Map
 * 2026-06-25
 * Loaded after home-red-identity.css.
 */

/* ========================================================================
   Hero: restore the earlier cinematic neutral overlay and natural video color
   ======================================================================== */
.home-page .hero-home::before {
  background:
    radial-gradient(circle at 18% 74%, rgba(128, 25, 34, .18), transparent 36%),
    linear-gradient(
      110deg,
      rgba(5, 9, 13, .88) 8%,
      rgba(5, 9, 13, .50) 52%,
      rgba(5, 9, 13, .76) 100%
    ) !important;
}

.home-page .hero-home::after {
  background: none !important;
  background-image: none !important;
  opacity: 0 !important;
  mix-blend-mode: normal !important;
}

.home-page .hero-home .hero-video {
  filter: saturate(1) contrast(1.035) brightness(.97) !important;
  transition: filter .55s ease;
}

/* Keep the call-to-action hierarchy red without tinting the full hero. */
.home-page .hero-kicker {
  background: rgba(17, 21, 26, .34);
  border-color: rgba(255, 255, 255, .20);
  box-shadow: inset 0 1px rgba(255,255,255,.10), 0 12px 28px rgba(0,0,0,.12);
}

.home-page .btn-secondary-pro {
  background: rgba(10, 14, 18, .28);
}

.home-page .btn-secondary-pro:hover {
  background: rgba(255, 255, 255, .17);
}

/* ========================================================================
   Project map: neutral by default, blue for Water, green for Environment
   ======================================================================== */
.home-page .project-outreach {
  --outreach-brand: #801922;
  --outreach-water: #4994b9;
  --outreach-environment: #08756a;
  --map-theme-rgb: 128, 25, 34;
  --map-theme-deep: #07161b;
  --map-theme-mid: #10262d;
  --map-theme-edge: #180d12;
  --map-panel-bg: rgba(5, 20, 26, .88);
  --map-panel-bg-deep: rgba(3, 14, 18, .96);
  background-color: var(--map-theme-deep) !important;
  background-image:
    radial-gradient(circle at 13% 18%, rgba(var(--map-theme-rgb), .16), transparent 28%),
    radial-gradient(circle at 88% 20%, rgba(var(--map-theme-rgb), .22), transparent 30%),
    radial-gradient(circle at 70% 82%, rgba(255,255,255,.045), transparent 27%),
    linear-gradient(135deg, var(--map-theme-deep) 0%, var(--map-theme-mid) 52%, var(--map-theme-edge) 100%) !important;
  transition: background-color .65s ease, color .35s ease;
}

.home-page .project-outreach.is-filter-water,
.home-page .project-outreach.is-active-water {
  --outreach-active: var(--outreach-water);
  --map-theme-rgb: 73, 148, 185;
  --map-theme-deep: #041923;
  --map-theme-mid: #12394b;
  --map-theme-edge: #07141d;
  --map-panel-bg: rgba(5, 31, 43, .88);
  --map-panel-bg-deep: rgba(3, 22, 31, .96);
}

.home-page .project-outreach.is-filter-environment,
.home-page .project-outreach.is-active-environment {
  --outreach-active: var(--outreach-environment);
  --map-theme-rgb: 0, 112, 99;
  --map-theme-deep: #031915;
  --map-theme-mid: #075047;
  --map-theme-edge: #071610;
  --map-panel-bg: rgba(3, 39, 34, .88);
  --map-panel-bg-deep: rgba(2, 27, 23, .96);
}

.home-page .project-outreach__backdrop {
  opacity: .94;
  background:
    radial-gradient(circle at 70% 48%, rgba(var(--map-theme-rgb), .18), transparent 35%),
    linear-gradient(120deg, transparent 30%, rgba(255,255,255,.045) 50%, transparent 70%);
  transition: opacity .55s ease, filter .55s ease;
}

.home-page .project-outreach__veil {
  background:
    linear-gradient(
      90deg,
      color-mix(in srgb, var(--map-theme-deep), transparent 3%),
      color-mix(in srgb, var(--map-theme-mid), transparent 26%) 43%,
      color-mix(in srgb, var(--map-theme-edge), transparent 66%)
    ) !important;
  transition: opacity .55s ease;
}

.home-page .project-outreach__map-glow {
  background: radial-gradient(
    circle,
    rgba(var(--map-theme-rgb), .28),
    transparent 62%
  );
  transition: background .55s ease, opacity .55s ease;
}

.home-page .project-outreach__picker-button,
.home-page .project-outreach__project-card,
.home-page .project-outreach__map-tooltip,
.home-page .project-outreach__point-label {
  background-color: var(--map-panel-bg) !important;
  background-image: linear-gradient(145deg, rgba(var(--map-theme-rgb), .17), rgba(1, 10, 13, .34)) !important;
  border-color: rgba(255, 255, 255, .16) !important;
  box-shadow: 0 24px 58px rgba(0, 0, 0, .28) !important;
  transition: background-color .5s ease, border-color .35s ease, box-shadow .35s ease, transform .25s ease, opacity .25s ease;
}

.home-page .project-outreach__picker-list {
  background-color: var(--map-panel-bg-deep) !important;
  background-image: linear-gradient(145deg, rgba(var(--map-theme-rgb), .14), rgba(1, 10, 13, .52)) !important;
  border-color: rgba(255, 255, 255, .15) !important;
  box-shadow: 0 28px 70px rgba(0, 0, 0, .42) !important;
}

.home-page .project-outreach__filter.is-active {
  background: linear-gradient(135deg, #a92f3b, #801922) !important;
}

.home-page .project-outreach.is-filter-water .project-outreach__filter.is-active,
.home-page .project-outreach.is-active-water .project-outreach__filter[data-map-filter="water"].is-active {
  background: linear-gradient(135deg, #69b8da, #347e9d) !important;
  box-shadow: 0 14px 34px rgba(21, 99, 132, .34) !important;
}

.home-page .project-outreach.is-filter-environment .project-outreach__filter.is-active,
.home-page .project-outreach.is-active-environment .project-outreach__filter[data-map-filter="environment"].is-active {
  background: linear-gradient(135deg, #159487, #00594f) !important;
  box-shadow: 0 14px 34px rgba(0, 71, 65, .34) !important;
}

.home-page .project-outreach__project-point.is-water {
  --point-color: #55b5df !important;
}

.home-page .project-outreach__project-point.is-environment {
  --point-color: #18a99a !important;
}

.home-page .project-outreach__dot.is-water {
  color: #55b5df;
  background: currentColor;
}

.home-page .project-outreach__dot.is-environment {
  color: #18a99a;
  background: currentColor;
}

.home-page .project-outreach__precise-map .project-outreach__province {
  stroke: color-mix(in srgb, var(--outreach-active), #ffffff 28%) !important;
}

.home-page .project-outreach.is-project-changing .project-outreach__backdrop,
.home-page .project-outreach.is-project-changing .project-outreach__map-glow {
  animation: mapThemeBreath .62s ease both;
}

@keyframes mapThemeBreath {
  0% { opacity: .62; filter: saturate(.82); }
  52% { opacity: 1; filter: saturate(1.22); }
  100% { opacity: .94; filter: saturate(1); }
}

@media (prefers-reduced-motion: reduce) {
  .home-page .project-outreach,
  .home-page .project-outreach__backdrop,
  .home-page .project-outreach__veil,
  .home-page .project-outreach__map-glow,
  .home-page .project-outreach__picker-button,
  .home-page .project-outreach__project-card,
  .home-page .project-outreach__map-tooltip,
  .home-page .project-outreach__point-label {
    transition: none !important;
    animation: none !important;
  }
}


/* ========================================================================
   Project map filter themes v3
   All projects = Partners-style white, Water = sector blue,
   Environment = sector green. The chosen FILTER controls the section theme.
   ======================================================================== */
.home-page .project-outreach.is-filter-all {
  --outreach-active: #801922;
  --map-theme-rgb: 128, 25, 34;
  --map-theme-deep: #ffffff;
  --map-theme-mid: #fffafa;
  --map-theme-edge: #fff5f6;
  --map-panel-bg: rgba(255, 255, 255, .92);
  --map-panel-bg-deep: rgba(255, 255, 255, .985);
  color: #27232a;
  background-color: #ffffff !important;
  background-image:
    radial-gradient(circle at 12% 22%, rgba(128, 25, 34, .075), transparent 27%),
    radial-gradient(circle at 88% 74%, rgba(189, 69, 81, .065), transparent 28%),
    linear-gradient(180deg, #ffffff 0%, #fff8f9 100%) !important;
}

.home-page .project-outreach.is-filter-all::before {
  opacity: .34;
  background-image:
    linear-gradient(rgba(128, 25, 34, .035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(128, 25, 34, .035) 1px, transparent 1px);
}

.home-page .project-outreach.is-filter-all .project-outreach__backdrop {
  opacity: 1;
  background:
    radial-gradient(circle at 72% 47%, rgba(128, 25, 34, .075), transparent 34%),
    linear-gradient(120deg, transparent 30%, rgba(128,25,34,.025) 50%, transparent 70%);
}

.home-page .project-outreach.is-filter-all .project-outreach__veil {
  background:
    linear-gradient(90deg, rgba(255,255,255,.98), rgba(255,250,250,.80) 44%, rgba(255,245,246,.28)) !important;
}

.home-page .project-outreach.is-filter-all .project-outreach__map-glow {
  background: radial-gradient(circle, rgba(128,25,34,.10), transparent 62%);
  opacity: .78;
}

.home-page .project-outreach.is-filter-all .project-outreach__eyebrow {
  color: #801922;
}

.home-page .project-outreach.is-filter-all .project-outreach__eyebrow i {
  color: #a92f3b;
}

.home-page .project-outreach.is-filter-all .project-outreach__intro h1,
.home-page .project-outreach.is-filter-all .project-outreach__intro h2,
.home-page .project-outreach.is-filter-all .project-outreach__lead,
.home-page .project-outreach.is-filter-all .project-outreach__project-card h3,
.home-page .project-outreach.is-filter-all .project-outreach__picker-button,
.home-page .project-outreach.is-filter-all .project-outreach__picker-option,
.home-page .project-outreach.is-filter-all .project-outreach__sector-badge,
.home-page .project-outreach.is-filter-all .project-outreach__map-header strong,
.home-page .project-outreach.is-filter-all .project-outreach__region-status strong {
  color: #27232a !important;
}

.home-page .project-outreach.is-filter-all .project-outreach__summary,
.home-page .project-outreach.is-filter-all .project-outreach__project-card > p,
.home-page .project-outreach.is-filter-all .project-outreach__map-header,
.home-page .project-outreach.is-filter-all .project-outreach__map-footer {
  color: #6e666d !important;
}

.home-page .project-outreach.is-filter-all .project-outreach__filter {
  color: #554d54;
  background: rgba(255,255,255,.78);
  border-color: rgba(128,25,34,.13);
  box-shadow: 0 8px 22px rgba(95,16,24,.05);
}

.home-page .project-outreach.is-filter-all .project-outreach__filter:hover {
  color: #801922;
  background: #ffffff;
  border-color: rgba(128,25,34,.28);
}

.home-page .project-outreach.is-filter-all .project-outreach__filter[data-map-filter="all"].is-active {
  color: #ffffff;
  background: linear-gradient(135deg, #b43a46, #801922) !important;
  border-color: rgba(128,25,34,.22) !important;
  box-shadow: 0 14px 32px rgba(95,16,24,.18) !important;
}

.home-page .project-outreach.is-filter-all .project-outreach__picker-button,
.home-page .project-outreach.is-filter-all .project-outreach__project-card,
.home-page .project-outreach.is-filter-all .project-outreach__map-tooltip,
.home-page .project-outreach.is-filter-all .project-outreach__point-label {
  background-color: rgba(255,255,255,.94) !important;
  background-image: linear-gradient(145deg, rgba(255,255,255,.99), rgba(255,247,248,.93)) !important;
  border-color: rgba(128,25,34,.12) !important;
  box-shadow: 0 24px 58px rgba(95,16,24,.09) !important;
}

.home-page .project-outreach.is-filter-all .project-outreach__picker-list {
  background-color: rgba(255,255,255,.99) !important;
  background-image: linear-gradient(145deg, #ffffff, #fff8f9) !important;
  border-color: rgba(128,25,34,.13) !important;
  box-shadow: 0 28px 70px rgba(95,16,24,.13) !important;
}

.home-page .project-outreach.is-filter-all .project-outreach__picker-button small,
.home-page .project-outreach.is-filter-all .project-outreach__picker-option small,
.home-page .project-outreach.is-filter-all .project-outreach__card-topline > span,
.home-page .project-outreach.is-filter-all .project-outreach__meta dt,
.home-page .project-outreach.is-filter-all .project-outreach__map-tooltip span,
.home-page .project-outreach.is-filter-all .project-outreach__region-status small {
  color: #81777f !important;
}

.home-page .project-outreach.is-filter-all .project-outreach__picker-option:hover,
.home-page .project-outreach.is-filter-all .project-outreach__picker-option.is-selected {
  background: rgba(128,25,34,.065);
}

.home-page .project-outreach.is-filter-all .project-outreach__picker-empty,
.home-page .project-outreach.is-filter-all .project-outreach__sector-badge,
.home-page .project-outreach.is-filter-all .project-outreach__meta div {
  color: #554d54;
  background: rgba(128,25,34,.05);
}

.home-page .project-outreach.is-filter-all .project-outreach__meta dd {
  color: #3f383e;
}

.home-page .project-outreach.is-filter-all .project-outreach__nav button,
.home-page .project-outreach.is-filter-all .project-outreach__region-reset {
  color: #801922;
  background: rgba(255,255,255,.86);
  border-color: rgba(128,25,34,.16);
}

.home-page .project-outreach.is-filter-all .project-outreach__nav button:hover:not(:disabled),
.home-page .project-outreach.is-filter-all .project-outreach__region-reset:hover {
  color: #ffffff;
  background: #801922;
}

.home-page .project-outreach.is-filter-all .project-outreach__nav > div {
  background: rgba(128,25,34,.12);
}

.home-page .project-outreach.is-filter-all .project-outreach__precise-outline path {
  stroke: rgba(128,25,34,.52);
  filter: drop-shadow(0 0 6px rgba(128,25,34,.08));
}

.home-page .project-outreach.is-filter-all .project-outreach__precise-map .project-outreach__province {
  stroke: rgba(128,25,34,.42) !important;
}

.home-page .project-outreach.is-filter-all .project-outreach__map-shell {
  filter: drop-shadow(0 25px 42px rgba(95,16,24,.10));
}

/* Filter choice is authoritative: a selected project must not override the
   white all-projects theme. */
.home-page .project-outreach.is-filter-all.is-active-water,
.home-page .project-outreach.is-filter-all.is-active-environment {
  --outreach-active: #801922;
  --map-theme-rgb: 128, 25, 34;
  --map-theme-deep: #ffffff;
  --map-theme-mid: #fffafa;
  --map-theme-edge: #fff5f6;
  --map-panel-bg: rgba(255,255,255,.92);
  --map-panel-bg-deep: rgba(255,255,255,.985);
}

/* =========================================================
   2026-06-25 — Selected project label readability
   Keep the project name red in the small label above the active marker,
   regardless of the current map-sector theme.
   ========================================================= */
.home-page .project-outreach .project-outreach__point-label,
.home-page .project-outreach.is-filter-all .project-outreach__point-label,
.home-page .project-outreach.is-filter-water .project-outreach__point-label,
.home-page .project-outreach.is-filter-environment .project-outreach__point-label {
  color: #9f1d2a !important;
  background-color: rgba(255, 255, 255, .97) !important;
  background-image: linear-gradient(145deg, rgba(255,255,255,.99), rgba(255,244,246,.96)) !important;
  border-color: rgba(159, 29, 42, .28) !important;
  box-shadow:
    0 18px 46px rgba(48, 7, 13, .20),
    0 0 24px color-mix(in srgb, var(--point-color), transparent 68%),
    inset 0 1px rgba(255,255,255,.96) !important;
  text-shadow: none !important;
}

.home-page .project-outreach .project-outreach__point-label::after,
.home-page .project-outreach.is-filter-all .project-outreach__point-label::after,
.home-page .project-outreach.is-filter-water .project-outreach__point-label::after,
.home-page .project-outreach.is-filter-environment .project-outreach__point-label::after {
  background: #fff7f8 !important;
  border-color: rgba(159, 29, 42, .28) !important;
}