/* =========================================================
   CWH Homepage Styling — CLEANED
   Purpose:
   - Preserve existing top hero and bottom Support Healthy Watersheds CTA.
   - Keep only the latest homepage middle-section reset.
   - Remove the older conflicting homepage experiments.
   ========================================================= */

:root {
  --cwh-navy: #063b5c;
  --cwh-navy-dark: #042f49;
  --cwh-light-blue: #a8cfdb;
  --cwh-soft-blue: #dceef3;
  --cwh-orange: #f49a45;
  --cwh-cream: #f2eadc;
  --cwh-green: #6f8f3f;
  --cwh-text: #17384d;
  --cwh-muted: #536b78;
  --cwh-border: #b8d5df;
  --cwh-white: #ffffff;
  --cwh-max-width: 1120px;
}


/* ---------- Home page full-width hero ---------- */

body.canvas-page:has(#block-consistent-mainnavigation a[href$="/"][aria-current="page"]) #block-consistent-content {
  overflow-x: clip !important;
}

body.canvas-page:has(#block-consistent-mainnavigation a[href$="/"][aria-current="page"]) #block-consistent-content > .stwl-container:first-child:has(img[data-component-id="canvas:image"]) {
  width: 100vw !important;
  max-width: none !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

body.canvas-page:has(#block-consistent-mainnavigation a[href$="/"][aria-current="page"]) #block-consistent-content > .stwl-container:first-child:has(img[data-component-id="canvas:image"]) > .grid {
  width: 100% !important;
  max-width: none !important;
  position: relative !important;
  overflow: hidden !important;
}

body.canvas-page:has(#block-consistent-mainnavigation a[href$="/"][aria-current="page"]) #block-consistent-content > .stwl-container:first-child:has(img[data-component-id="canvas:image"]) img[data-component-id="canvas:image"] {
  width: 100% !important;
  max-width: none !important;
  min-height: 560px !important;
  height: 64vh !important;
  object-fit: cover !important;
  object-position: center center !important;
  display: block !important;
}

body.canvas-page:has(#block-consistent-mainnavigation a[href$="/"][aria-current="page"]) #block-consistent-content > .stwl-container:first-child:has(img[data-component-id="canvas:image"]) > .grid::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(4, 47, 73, 0.58), rgba(4, 47, 73, 0.12));
  pointer-events: none;
  z-index: 1;
}

body.canvas-page:has(#block-consistent-mainnavigation a[href$="/"][aria-current="page"]) #block-consistent-content > .stwl-container:first-child:has(img[data-component-id="canvas:image"]) img[data-component-id="canvas:image"] + div {
  position: relative !important;
  z-index: 2 !important;
  max-width: 560px !important;
  margin-left: clamp(1.5rem, 7vw, 5.5rem) !important;
  margin-bottom: clamp(1.5rem, 6vw, 4rem) !important;
  background: rgba(6, 59, 92, 0.92) !important;
  color: #ffffff !important;
  border-radius: 18px !important;
}

body.canvas-page:has(#block-consistent-mainnavigation a[href$="/"][aria-current="page"]) #block-consistent-content > .stwl-container:first-child:has(img[data-component-id="canvas:image"]) img[data-component-id="canvas:image"] + div h1,
body.canvas-page:has(#block-consistent-mainnavigation a[href$="/"][aria-current="page"]) #block-consistent-content > .stwl-container:first-child:has(img[data-component-id="canvas:image"]) img[data-component-id="canvas:image"] + div p {
  color: #ffffff !important;
}

/* ---------- Home page full-width Support Healthy Watersheds CTA ---------- */

body.canvas-page:has(#block-consistent-mainnavigation a[href$="/"][aria-current="page"]) #block-consistent-content > .stwl-container:last-child:has(> .flex) {
  width: 100vw !important;
  max-width: none !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

body.canvas-page:has(#block-consistent-mainnavigation a[href$="/"][aria-current="page"]) #block-consistent-content > .stwl-container:last-child:has(> .flex) > .flex {
  width: 100% !important;
  max-width: none !important;
  border-radius: 0 !important;
  min-height: 360px !important;
}

body.canvas-page:has(#block-consistent-mainnavigation a[href$="/"][aria-current="page"]) #block-consistent-content > .stwl-container:last-child:has(> .flex) > .flex > div:first-child {
  padding-left: clamp(1.5rem, 8vw, 6rem) !important;
  padding-right: clamp(1.5rem, 6vw, 4rem) !important;
}

body.canvas-page:has(#block-consistent-mainnavigation a[href$="/"][aria-current="page"]) #block-consistent-content > .stwl-container:last-child:has(> .flex) h2 {
  font-size: clamp(2rem, 4vw, 3.45rem) !important;
  line-height: 1.05 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.04em !important;
}

body.canvas-page:has(#block-consistent-mainnavigation a[href$="/"][aria-current="page"]) #block-consistent-content > .stwl-container:last-child:has(> .flex) img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

/* Mobile homepage fallback */
@media (max-width: 949px) {
  body.canvas-page:has(#block-consistent-mainnavigation a[href$="/"][aria-current="page"]) #block-consistent-content > .stwl-container:first-child:has(img[data-component-id="canvas:image"]) img[data-component-id="canvas:image"] {
    min-height: 420px !important;
    height: 52vh !important;
  }

  body.canvas-page:has(#block-consistent-mainnavigation a[href$="/"][aria-current="page"]) #block-consistent-content > .stwl-container:first-child:has(img[data-component-id="canvas:image"]) img[data-component-id="canvas:image"] + div {
    margin: 1rem !important;
  }

  body.canvas-page:has(#block-consistent-mainnavigation a[href$="/"][aria-current="page"]) #block-consistent-content > .stwl-container:last-child:has(> .flex) > .flex {
    min-height: 0 !important;
  }
}

/* =========================================================
   CWH Home Page — Middle Page Reset
   Keeps hero and bottom Support Healthy Watersheds section untouched.
   Redoes only the homepage middle content sections.
   ========================================================= */

/* Scope ONLY the homepage */
@media (min-width: 950px) {
  body.path-frontpage #block-consistent-content {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    column-gap: 0 !important;
    overflow-x: clip !important;
  }

  body.path-frontpage #block-consistent-content > * {
    grid-column: 1 / -1 !important;
  }

  /* Remove homepage search section if it still exists */
  body.path-frontpage #block-consistent-content > section.py-10:has(form[action="/search"]) {
    display: none !important;
  }

  /* Shared middle-section rhythm.
     This does NOT target the hero or the bottom Support Healthy Watersheds container. */
  body.path-frontpage #block-consistent-content > section.py-10 {
    padding: 3rem 0 !important;
  }

  body.path-frontpage #block-consistent-content > section.py-10 > .stwl-container {
    width: 100% !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: clamp(3.5rem, 4.5vw, 4.75rem) !important;
    padding-right: clamp(3.5rem, 4.5vw, 4.75rem) !important;
    box-sizing: border-box !important;
  }

  /* Shared section headers: normal size, aligned inward from page edge */
  body.path-frontpage #block-consistent-content > section.py-10 .mb-6 {
    max-width: none !important;
    margin: 0 0 1.5rem !important;
    padding: 0 !important;
    text-align: left !important;
  }

  body.path-frontpage #block-consistent-content > section.py-10 h2 {
    margin: 0 !important;
    color: var(--cwh-navy, #063b5c) !important;
    font-size: clamp(1.85rem, 2.6vw, 2.25rem) !important;
    line-height: 1.15 !important;
    font-weight: 800 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
  }

  body.path-frontpage #block-consistent-content > section.py-10 h2::after {
    display: none !important;
    content: none !important;
  }
/* =========================================================
     WHO WE ARE + WHAT IS A WATERSHED
     First two visible sections after hero.
     Handles both cases:
     - search section removed
     - search section still present but hidden
     ========================================================= */

  /* No search section version: hero + section 1 */
  body.path-frontpage #block-consistent-content > .stwl-container:first-child + section.py-10:not(:has(form[action="/search"])) {
    grid-column: 1 !important;
    background: #ffffff !important;
    padding-top: 3rem !important;
    padding-bottom: 3.25rem !important;
  }

  /* No search section version: hero + section 2 */
  body.path-frontpage #block-consistent-content > .stwl-container:first-child + section.py-10:not(:has(form[action="/search"])) + section.py-10 {
    grid-column: 2 !important;
    background: #ffffff !important;
    padding-top: 3rem !important;
    padding-bottom: 3.25rem !important;
  }

  /* Search section still in DOM version */
  body.path-frontpage #block-consistent-content > .stwl-container:first-child + section.py-10:has(form[action="/search"]) + section.py-10 {
    grid-column: 1 !important;
    background: #ffffff !important;
    padding-top: 3rem !important;
    padding-bottom: 3.25rem !important;
  }

  body.path-frontpage #block-consistent-content > .stwl-container:first-child + section.py-10:has(form[action="/search"]) + section.py-10 + section.py-10 {
    grid-column: 2 !important;
    background: #ffffff !important;
    padding-top: 3rem !important;
    padding-bottom: 3.25rem !important;
  }

  /* Left card container */
  body.path-frontpage #block-consistent-content > .stwl-container:first-child + section.py-10:not(:has(form[action="/search"])) > .stwl-container,
  body.path-frontpage #block-consistent-content > .stwl-container:first-child + section.py-10:has(form[action="/search"]) + section.py-10 > .stwl-container {
    max-width: 560px !important;
    margin-left: auto !important;
    margin-right: 0 !important;
    padding-left: clamp(3.5rem, 4.5vw, 4.75rem) !important;
    padding-right: 0.75rem !important;
  }

  /* Right card container */
  body.path-frontpage #block-consistent-content > .stwl-container:first-child + section.py-10:not(:has(form[action="/search"])) + section.py-10 > .stwl-container,
  body.path-frontpage #block-consistent-content > .stwl-container:first-child + section.py-10:has(form[action="/search"]) + section.py-10 + section.py-10 > .stwl-container {
    max-width: 560px !important;
    margin-left: 0 !important;
    margin-right: auto !important;
    padding-left: 0.75rem !important;
    padding-right: clamp(3.5rem, 4.5vw, 4.75rem) !important;
  }

  /* Equal card sizing without making them huge */
  body.path-frontpage #block-consistent-content > .stwl-container:first-child + section.py-10:not(:has(form[action="/search"])) article,
  body.path-frontpage #block-consistent-content > .stwl-container:first-child + section.py-10:not(:has(form[action="/search"])) + section.py-10 article,
  body.path-frontpage #block-consistent-content > .stwl-container:first-child + section.py-10:has(form[action="/search"]) + section.py-10 article,
  body.path-frontpage #block-consistent-content > .stwl-container:first-child + section.py-10:has(form[action="/search"]) + section.py-10 + section.py-10 article {
    display: flex !important;
    flex-direction: column !important;
    min-height: 430px !important;
    height: 100% !important;
    border-radius: 18px !important;
    border: 1px solid rgba(6, 59, 92, 0.14) !important;
    background: #ffffff !important;
    box-shadow: 0 10px 24px rgba(6, 59, 92, 0.08) !important;
  }

  body.path-frontpage #block-consistent-content > .stwl-container:first-child + section.py-10:not(:has(form[action="/search"])) article .aspect-video,
  body.path-frontpage #block-consistent-content > .stwl-container:first-child + section.py-10:not(:has(form[action="/search"])) + section.py-10 article .aspect-video,
  body.path-frontpage #block-consistent-content > .stwl-container:first-child + section.py-10:has(form[action="/search"]) + section.py-10 article .aspect-video,
  body.path-frontpage #block-consistent-content > .stwl-container:first-child + section.py-10:has(form[action="/search"]) + section.py-10 + section.py-10 article .aspect-video {
    height: 220px !important;
    min-height: 220px !important;
    max-height: 220px !important;
  }

  body.path-frontpage #block-consistent-content > .stwl-container:first-child + section.py-10:not(:has(form[action="/search"])) article img,
  body.path-frontpage #block-consistent-content > .stwl-container:first-child + section.py-10:not(:has(form[action="/search"])) + section.py-10 article img,
  body.path-frontpage #block-consistent-content > .stwl-container:first-child + section.py-10:has(form[action="/search"]) + section.py-10 article img,
  body.path-frontpage #block-consistent-content > .stwl-container:first-child + section.py-10:has(form[action="/search"]) + section.py-10 + section.py-10 article img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
  }

  body.path-frontpage #block-consistent-content article .p-5 {
    padding: 1.25rem !important;
  }

  body.path-frontpage #block-consistent-content article h3 {
    margin: 0 0 0.65rem !important;
    color: var(--cwh-navy, #063b5c) !important;
    font-size: 1rem !important;
    line-height: 1.25 !important;
    font-weight: 800 !important;
    letter-spacing: 0 !important;
  }

  body.path-frontpage #block-consistent-content article p {
    margin: 0 !important;
    color: var(--cwh-text, #17384d) !important;
    font-size: 1rem !important;
    line-height: 1.55 !important;
  }
/* =========================================================
     OUR WORK
     Target by its actual content instead of fragile section numbers.
     ========================================================= */

  body.path-frontpage #block-consistent-content > section.py-10:has(a[href="/our-work"]) {
    grid-column: 1 / -1 !important;
    background: var(--cwh-soft-blue, #dceef3) !important;
    padding: 3.25rem 0 !important;
  }

  body.path-frontpage #block-consistent-content > section.py-10:has(a[href="/our-work"]) > .stwl-container {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding-left: clamp(3.5rem, 4.5vw, 4.75rem) !important;
    padding-right: clamp(3.5rem, 4.5vw, 4.75rem) !important;
  }

  body.path-frontpage #block-consistent-content > section.py-10:has(a[href="/our-work"]) .grid {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 1.5rem !important;
    align-items: stretch !important;
    width: min(100%, 1120px) !important;
    margin-left: 0 !important;
    margin-right: auto !important;
  }

  body.path-frontpage #block-consistent-content > section.py-10:has(a[href="/our-work"]) article {
    min-height: 160px !important;
    height: 100% !important;
    border-radius: 18px !important;
    border: 1px solid rgba(6, 59, 92, 0.12) !important;
    background: #ffffff !important;
    box-shadow: 0 10px 24px rgba(6, 59, 92, 0.08) !important;
  }

  body.path-frontpage #block-consistent-content > section.py-10:has(a[href="/our-work"]) article h3 {
    margin-bottom: 0.65rem !important;
    padding-bottom: 0.65rem !important;
    border-bottom: 1px solid rgba(6, 59, 92, 0.16) !important;
    text-transform: uppercase !important;
  }
/* =========================================================
     LOWER HOMEPAGE SECTIONS
     Keep normal sizing, just align them consistently.
     ========================================================= */

  body.path-frontpage #block-consistent-content > section.py-10:not(:has(a[href="/our-work"])):not(:has(form[action="/search"])) {
    grid-column: 1 / -1 !important;
  }

  body.path-frontpage #block-consistent-content > section.py-10:not(:has(a[href="/our-work"])):not(:has(form[action="/search"])) > .stwl-container {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding-left: clamp(3.5rem, 4.5vw, 4.75rem) !important;
    padding-right: clamp(3.5rem, 4.5vw, 4.75rem) !important;
  }

  /* Keep lower section cards normal, not oversized */
  body.path-frontpage #block-consistent-content > section.py-10:not(:has(a[href="/our-work"])) article {
    border-radius: 18px !important;
    box-shadow: 0 10px 24px rgba(6, 59, 92, 0.07) !important;
  }
}

/* Tablet and mobile: stack cleanly */
@media (max-width: 949px) {
  body.path-frontpage #block-consistent-content {
    display: block !important;
  }

  body.path-frontpage #block-consistent-content > section.py-10:has(form[action="/search"]) {
    display: none !important;
  }

  body.path-frontpage #block-consistent-content > section.py-10 {
    padding: 2.75rem 0 !important;
  }

  body.path-frontpage #block-consistent-content > section.py-10 > .stwl-container {
    width: 100% !important;
    max-width: none !important;
    padding-left: 1.5rem !important;
    padding-right: 1.5rem !important;
  }

  body.path-frontpage #block-consistent-content article {
    min-height: 0 !important;
  }
}

/* =========================================================
   CWH HOMEPAGE — STAGING VISUAL OVERRIDE
   Based on the actual staged homepage DOM:
   section 1 = Search
   section 2 = Who We Are
   section 3 = What Is a Watershed
   section 4 = Our Work

   Goals:
   - Keep Who We Are + What Is a Watershed equal-width and centered.
   - Prevent What Is a Watershed from collapsing into a narrow tall card.
   - Keep both cards compact/proportional.
   - Make Our Work align and theme consistently with lower sections.
   ========================================================= */

@media (min-width: 950px) {

  /* Identify the homepage by its leading Canvas hero rather than URL/body classes. */
  body.canvas-page
  #block-consistent-content:has(
    > .stwl-container:first-child img[data-component-id="canvas:image"]
  ) {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    column-gap: 0 !important;
    align-items: stretch !important;
    overflow-x: clip !important;
  }

  body.canvas-page
  #block-consistent-content:has(
    > .stwl-container:first-child img[data-component-id="canvas:image"]
  ) > * {
    grid-column: 1 / -1 !important;
  }

  /* Search remains in the DOM but should not occupy space. */
  body.canvas-page
  #block-consistent-content:has(
    > .stwl-container:first-child img[data-component-id="canvas:image"]
  ) > section.py-10:nth-of-type(1) {
    display: none !important;
  }

  /* WHO WE ARE = left half */
  body.canvas-page
  #block-consistent-content:has(
    > .stwl-container:first-child img[data-component-id="canvas:image"]
  ) > section.py-10:nth-of-type(2) {
    grid-column: 1 !important;
    display: flex !important;
    align-items: stretch !important;
    min-width: 0 !important;
    padding: 3rem 0 3.25rem !important;
    background: #ffffff !important;
  }

  /* WHAT IS A WATERSHED = right half */
  body.canvas-page
  #block-consistent-content:has(
    > .stwl-container:first-child img[data-component-id="canvas:image"]
  ) > section.py-10:nth-of-type(3) {
    grid-column: 2 !important;
    display: flex !important;
    align-items: stretch !important;
    min-width: 0 !important;
    padding: 3rem 0 3.25rem !important;
    background: #ffffff !important;
  }

  /*
   * Center the two cards as one 1120px pair:
   * left card hugs the center from the left,
   * right card hugs the center from the right.
   */
  body.canvas-page
  #block-consistent-content:has(
    > .stwl-container:first-child img[data-component-id="canvas:image"]
  ) > section.py-10:nth-of-type(2) > .stwl-container,
  body.canvas-page
  #block-consistent-content:has(
    > .stwl-container:first-child img[data-component-id="canvas:image"]
  ) > section.py-10:nth-of-type(3) > .stwl-container {
    display: flex !important;
    flex-direction: column !important;
    width: min(100%, 560px) !important;
    max-width: 560px !important;
    min-width: 0 !important;
    padding-left: 0.75rem !important;
    padding-right: 0.75rem !important;
    box-sizing: border-box !important;
  }

  body.canvas-page
  #block-consistent-content:has(
    > .stwl-container:first-child img[data-component-id="canvas:image"]
  ) > section.py-10:nth-of-type(2) > .stwl-container {
    margin-left: auto !important;
    margin-right: 0 !important;
  }

  body.canvas-page
  #block-consistent-content:has(
    > .stwl-container:first-child img[data-component-id="canvas:image"]
  ) > section.py-10:nth-of-type(3) > .stwl-container {
    margin-left: 0 !important;
    margin-right: auto !important;
  }

  /* Remove any inherited one-column sizing that can collapse the right card. */
  body.canvas-page
  #block-consistent-content:has(
    > .stwl-container:first-child img[data-component-id="canvas:image"]
  ) > section.py-10:nth-of-type(2) > .stwl-container > .grid,
  body.canvas-page
  #block-consistent-content:has(
    > .stwl-container:first-child img[data-component-id="canvas:image"]
  ) > section.py-10:nth-of-type(3) > .stwl-container > .grid {
    display: flex !important;
    flex: 1 1 auto !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  /* Equal, proportional card shells. */
  body.canvas-page
  #block-consistent-content:has(
    > .stwl-container:first-child img[data-component-id="canvas:image"]
  ) > section.py-10:nth-of-type(2) article,
  body.canvas-page
  #block-consistent-content:has(
    > .stwl-container:first-child img[data-component-id="canvas:image"]
  ) > section.py-10:nth-of-type(3) article {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 1 auto !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 430px !important;
    height: 100% !important;
    border-radius: 18px !important;
    overflow: hidden !important;
    background: #ffffff !important;
    border: 1px solid rgba(6, 59, 92, 0.14) !important;
    box-shadow: 0 10px 24px rgba(6, 59, 92, 0.08) !important;
  }

  /* Give both image areas identical proportions instead of allowing a tall/narrow crop. */
  body.canvas-page
  #block-consistent-content:has(
    > .stwl-container:first-child img[data-component-id="canvas:image"]
  ) > section.py-10:nth-of-type(2) article > .aspect-video,
  body.canvas-page
  #block-consistent-content:has(
    > .stwl-container:first-child img[data-component-id="canvas:image"]
  ) > section.py-10:nth-of-type(3) article > .aspect-video {
    flex: 0 0 220px !important;
    width: 100% !important;
    height: 220px !important;
    min-height: 220px !important;
    max-height: 220px !important;
    aspect-ratio: auto !important;
    overflow: hidden !important;
  }

  body.canvas-page
  #block-consistent-content:has(
    > .stwl-container:first-child img[data-component-id="canvas:image"]
  ) > section.py-10:nth-of-type(2) article > .aspect-video img,
  body.canvas-page
  #block-consistent-content:has(
    > .stwl-container:first-child img[data-component-id="canvas:image"]
  ) > section.py-10:nth-of-type(3) article > .aspect-video img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
  }

  body.canvas-page
  #block-consistent-content:has(
    > .stwl-container:first-child img[data-component-id="canvas:image"]
  ) > section.py-10:nth-of-type(2) article > .p-5,
  body.canvas-page
  #block-consistent-content:has(
    > .stwl-container:first-child img[data-component-id="canvas:image"]
  ) > section.py-10:nth-of-type(3) article > .p-5 {
    flex: 1 1 auto !important;
    padding: 1.25rem !important;
  }

  /* =======================================================
     OUR WORK
     Let the existing bg-muted theme behave like the other
     alternating homepage sections and align it to their x-axis.
     ======================================================= */

  body.canvas-page
  #block-consistent-content:has(
    > .stwl-container:first-child img[data-component-id="canvas:image"]
  ) > section.py-10:has(a[href$="/our-work"]) {
    grid-column: 1 / -1 !important;
    padding: 3rem 0 !important;
    background: var(--color-muted) !important;
  }

  body.canvas-page
  #block-consistent-content:has(
    > .stwl-container:first-child img[data-component-id="canvas:image"]
  ) > section.py-10:has(a[href$="/our-work"]) > .stwl-container {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding-left: 4rem !important;
    padding-right: 4rem !important;
    box-sizing: border-box !important;
  }

  body.canvas-page
  #block-consistent-content:has(
    > .stwl-container:first-child img[data-component-id="canvas:image"]
  ) > section.py-10:has(a[href$="/our-work"]) .mb-6 {
    margin: 0 0 1.5rem !important;
    padding: 0 !important;
    text-align: left !important;
  }

  body.canvas-page
  #block-consistent-content:has(
    > .stwl-container:first-child img[data-component-id="canvas:image"]
  ) > section.py-10:has(a[href$="/our-work"]) h2 {
    margin: 0 !important;
    color: var(--cwh-navy, #063b5c) !important;
    font-size: clamp(1.85rem, 2.6vw, 2.25rem) !important;
    line-height: 1.15 !important;
    font-weight: 800 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
  }

  body.canvas-page
  #block-consistent-content:has(
    > .stwl-container:first-child img[data-component-id="canvas:image"]
  ) > section.py-10:has(a[href$="/our-work"]) h2::after {
    display: none !important;
    content: none !important;
  }

  body.canvas-page
  #block-consistent-content:has(
    > .stwl-container:first-child img[data-component-id="canvas:image"]
  ) > section.py-10:has(a[href$="/our-work"]) .grid {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 1.5rem !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    align-items: stretch !important;
  }

  body.canvas-page
  #block-consistent-content:has(
    > .stwl-container:first-child img[data-component-id="canvas:image"]
  ) > section.py-10:has(a[href$="/our-work"]) article {
    min-height: 160px !important;
    height: 100% !important;
    border-radius: 18px !important;
    border: 1px solid rgba(6, 59, 92, 0.12) !important;
    background: #ffffff !important;
    box-shadow: 0 10px 24px rgba(6, 59, 92, 0.07) !important;
  }
}


/* Tablet/mobile remains stacked and avoids fixed card heights. */
@media (max-width: 949px) {
  body.canvas-page
  #block-consistent-content:has(
    > .stwl-container:first-child img[data-component-id="canvas:image"]
  ) {
    display: block !important;
  }

  body.canvas-page
  #block-consistent-content:has(
    > .stwl-container:first-child img[data-component-id="canvas:image"]
  ) > section.py-10:nth-of-type(1) {
    display: none !important;
  }

  body.canvas-page
  #block-consistent-content:has(
    > .stwl-container:first-child img[data-component-id="canvas:image"]
  ) > section.py-10:nth-of-type(2),
  body.canvas-page
  #block-consistent-content:has(
    > .stwl-container:first-child img[data-component-id="canvas:image"]
  ) > section.py-10:nth-of-type(3) {
    padding: 2.75rem 0 !important;
  }

  body.canvas-page
  #block-consistent-content:has(
    > .stwl-container:first-child img[data-component-id="canvas:image"]
  ) > section.py-10:nth-of-type(2) > .stwl-container,
  body.canvas-page
  #block-consistent-content:has(
    > .stwl-container:first-child img[data-component-id="canvas:image"]
  ) > section.py-10:nth-of-type(3) > .stwl-container {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding-left: 1.5rem !important;
    padding-right: 1.5rem !important;
  }

  body.canvas-page
  #block-consistent-content:has(
    > .stwl-container:first-child img[data-component-id="canvas:image"]
  ) > section.py-10:nth-of-type(2) article,
  body.canvas-page
  #block-consistent-content:has(
    > .stwl-container:first-child img[data-component-id="canvas:image"]
  ) > section.py-10:nth-of-type(3) article {
    min-height: 0 !important;
    height: auto !important;
  }

  body.canvas-page
  #block-consistent-content:has(
    > .stwl-container:first-child img[data-component-id="canvas:image"]
  ) > section.py-10:has(a[href$="/our-work"]) > .stwl-container {
    width: 100% !important;
    max-width: none !important;
    padding-left: 1.5rem !important;
    padding-right: 1.5rem !important;
  }
}

/* =========================================================
   CWH HOMEPAGE — CONSOLIDATED LANDING PAGE V2
   Loaded after cwh-homepage.css.

   Requires: cwh-homepage-enhancements.js
   The JS adds stable classes to copied Canvas sections and
   creates the Featured Project Areas carousel controls.
   ========================================================= */

:root {
  --cwh-navy: #063b5c;
  --cwh-navy-dark: #042f49;
  --cwh-light-blue: #a8cfdb;
  --cwh-soft-blue: #dceef3;
  --cwh-orange: #f49a45;
  --cwh-cream: #f2eadc;
  --cwh-green: #6f8f3f;
  --cwh-text: #17384d;
  --cwh-muted: #536b78;
  --cwh-border: #b8d5df;
  --cwh-white: #ffffff;
  --cwh-max-width: 1180px;
}

/* ---------- Homepage only ---------- */
body.canvas-page #block-consistent-content.cwh-homepage-enhanced {
  overflow-x: clip !important;
}

body.canvas-page #block-consistent-content.cwh-homepage-enhanced > .cwh-home-search {
  display: none !important;
}

/* Anchor destinations should clear the header/nav. */
body.canvas-page #block-consistent-content.cwh-homepage-enhanced > section[id] {
  scroll-margin-top: 9rem;
}

/* ---------- Shared section rhythm ---------- */
body.canvas-page #block-consistent-content.cwh-homepage-enhanced > section.py-10:not(.cwh-home-search):not(.cwh-home-who):not(.cwh-home-watershed) {
  grid-column: 1 / -1 !important;
  width: 100% !important;
  padding: 4rem 0 !important;
  box-sizing: border-box !important;
}

body.canvas-page #block-consistent-content.cwh-homepage-enhanced > section.py-10:not(.cwh-home-search):not(.cwh-home-who):not(.cwh-home-watershed) > .stwl-container {
  width: 100% !important;
  max-width: var(--cwh-max-width) !important;
  margin: 0 auto !important;
  padding-left: 1.5rem !important;
  padding-right: 1.5rem !important;
  box-sizing: border-box !important;
}

body.canvas-page #block-consistent-content.cwh-homepage-enhanced > section.py-10 > .stwl-container > .mb-6 {
  margin: 0 0 1.6rem !important;
  padding: 0 !important;
  text-align: left !important;
}

body.canvas-page #block-consistent-content.cwh-homepage-enhanced > section.py-10 > .stwl-container > .mb-6 > h2,
body.canvas-page #block-consistent-content.cwh-homepage-enhanced > section.py-10 > .stwl-container > .mb-6 > h3 {
  margin: 0 !important;
  color: var(--cwh-navy) !important;
  font-size: clamp(1.9rem, 3vw, 2.55rem) !important;
  line-height: 1.08 !important;
  font-weight: 800 !important;
  letter-spacing: -0.015em !important;
  text-transform: none !important;
}

body.canvas-page #block-consistent-content.cwh-homepage-enhanced > section.py-10 > .stwl-container > .mb-6 > .stwl-text-content {
  max-width: 780px !important;
  margin-top: 0.85rem !important;
  color: var(--cwh-text) !important;
}

/* ---------- Shared card polish for transplanted sections ---------- */
body.canvas-page #block-consistent-content.cwh-homepage-enhanced > :is(
  .cwh-home-learn-more,
  .cwh-home-our-work,
  .cwh-home-events,
  .cwh-home-event-resources,
  .cwh-home-get-involved
) article {
  border: 1px solid rgba(6, 59, 92, 0.14) !important;
  border-radius: 18px !important;
  overflow: hidden !important;
  background: #ffffff !important;
  box-shadow: 0 10px 25px rgba(6, 59, 92, 0.07) !important;
  transition: transform 180ms ease, box-shadow 180ms ease !important;
}

@media (hover: hover) {
  body.canvas-page #block-consistent-content.cwh-homepage-enhanced > :is(
    .cwh-home-learn-more,
    .cwh-home-our-work,
    .cwh-home-events,
    .cwh-home-get-involved
  ) article:hover {
    transform: translateY(-3px) !important;
    box-shadow: 0 15px 32px rgba(6, 59, 92, 0.12) !important;
  }
}

body.canvas-page #block-consistent-content.cwh-homepage-enhanced > :is(
  .cwh-home-learn-more,
  .cwh-home-our-work,
  .cwh-home-events,
  .cwh-home-event-resources,
  .cwh-home-get-involved
) article .p-5 {
  padding: 1.45rem !important;
}

body.canvas-page #block-consistent-content.cwh-homepage-enhanced > :is(
  .cwh-home-learn-more,
  .cwh-home-our-work,
  .cwh-home-events,
  .cwh-home-event-resources,
  .cwh-home-get-involved
) article h3 {
  margin: 0 0 0.7rem !important;
  color: var(--cwh-navy) !important;
  font-size: 1.03rem !important;
  line-height: 1.25 !important;
  font-weight: 800 !important;
}

body.canvas-page #block-consistent-content.cwh-homepage-enhanced > :is(
  .cwh-home-learn-more,
  .cwh-home-our-work,
  .cwh-home-events,
  .cwh-home-event-resources,
  .cwh-home-get-involved
) article p {
  color: var(--cwh-text) !important;
  line-height: 1.58 !important;
}

/* =========================================================
   WHO WE ARE + WHAT IS A WATERSHED
   Preserve the working desktop pair and fix <=949px stacking.
   ========================================================= */
@media (max-width: 949px) {
  body.canvas-page #block-consistent-content.cwh-homepage-enhanced > .cwh-home-who,
  body.canvas-page #block-consistent-content.cwh-homepage-enhanced > .cwh-home-watershed {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    padding: 2.5rem 0 !important;
    background: #ffffff !important;
  }

  body.canvas-page #block-consistent-content.cwh-homepage-enhanced > .cwh-home-who > .stwl-container,
  body.canvas-page #block-consistent-content.cwh-homepage-enhanced > .cwh-home-watershed > .stwl-container {
    display: block !important;
    width: 100% !important;
    max-width: 760px !important;
    min-width: 0 !important;
    margin: 0 auto !important;
    padding: 0 1.5rem !important;
    box-sizing: border-box !important;
  }

  body.canvas-page #block-consistent-content.cwh-homepage-enhanced > .cwh-home-who .grid,
  body.canvas-page #block-consistent-content.cwh-homepage-enhanced > .cwh-home-watershed .grid {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  body.canvas-page #block-consistent-content.cwh-homepage-enhanced > .cwh-home-who article,
  body.canvas-page #block-consistent-content.cwh-homepage-enhanced > .cwh-home-watershed article {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    min-height: 0 !important;
    height: auto !important;
    border-radius: 18px !important;
    overflow: hidden !important;
  }

  body.canvas-page #block-consistent-content.cwh-homepage-enhanced > .cwh-home-who article .aspect-video,
  body.canvas-page #block-consistent-content.cwh-homepage-enhanced > .cwh-home-watershed article .aspect-video {
    width: 100% !important;
    height: clamp(210px, 46vw, 350px) !important;
    min-height: 0 !important;
    max-height: none !important;
    aspect-ratio: auto !important;
  }

  body.canvas-page #block-consistent-content.cwh-homepage-enhanced > .cwh-home-who article img,
  body.canvas-page #block-consistent-content.cwh-homepage-enhanced > .cwh-home-watershed article img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
  }
}

/* =========================================================
   LEARN MORE ABOUT CWH
   4 across desktop / 2 tablet / 1 mobile.
   ========================================================= */
body.canvas-page #block-consistent-content.cwh-homepage-enhanced > .cwh-home-learn-more {
  background: #ffffff !important;
}

body.canvas-page #block-consistent-content.cwh-homepage-enhanced > .cwh-home-learn-more .grid {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 1.25rem !important;
  align-items: stretch !important;
}

body.canvas-page #block-consistent-content.cwh-homepage-enhanced > .cwh-home-learn-more article {
  min-height: 190px !important;
  border-top: 4px solid var(--cwh-orange) !important;
}

body.canvas-page #block-consistent-content.cwh-homepage-enhanced > .cwh-home-learn-more article a {
  color: var(--cwh-navy) !important;
  text-decoration-thickness: 2px !important;
  text-underline-offset: 4px !important;
}

/* =========================================================
   OUR WORK — stakeholder-required 3-card section
   ========================================================= */
body.canvas-page #block-consistent-content.cwh-homepage-enhanced > .cwh-home-our-work {
  background: var(--cwh-soft-blue) !important;
}

body.canvas-page #block-consistent-content.cwh-homepage-enhanced > .cwh-home-our-work .grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 1.5rem !important;
  align-items: stretch !important;
}

body.canvas-page #block-consistent-content.cwh-homepage-enhanced > .cwh-home-our-work article {
  min-height: 210px !important;
  border-top: 5px solid var(--cwh-green) !important;
}

body.canvas-page #block-consistent-content.cwh-homepage-enhanced > .cwh-home-our-work article h3 {
  padding-bottom: 0.65rem !important;
  border-bottom: 1px solid rgba(6, 59, 92, 0.15) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.025em !important;
}

/* =========================================================
   FEATURED PROJECT AREAS — carousel
   ========================================================= */
body.canvas-page #block-consistent-content.cwh-homepage-enhanced > .cwh-home-featured-projects {
  background: var(--cwh-cream) !important;
}

body.canvas-page #block-consistent-content.cwh-homepage-enhanced > .cwh-home-featured-projects > .stwl-container {
  max-width: 1050px !important;
}

body.canvas-page #block-consistent-content.cwh-homepage-enhanced > .cwh-home-featured-projects .cwh-project-carousel__track {
  position: relative !important;
  display: block !important;
  width: 100% !important;
  min-height: 270px !important;
  margin: 0 !important;
}

body.canvas-page #block-consistent-content.cwh-homepage-enhanced > .cwh-home-featured-projects .cwh-project-carousel__slide {
  position: absolute !important;
  inset: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  min-height: 270px !important;
  margin: 0 !important;
  padding: clamp(1.8rem, 4vw, 3.25rem) !important;
  border: 0 !important;
  border-radius: 22px !important;
  overflow: hidden !important;
  background:
    radial-gradient(circle at 92% 15%, rgba(168, 207, 219, 0.28), transparent 30%),
    linear-gradient(125deg, var(--cwh-navy-dark), var(--cwh-navy)) !important;
  color: #ffffff !important;
  box-shadow: 0 18px 40px rgba(4, 47, 73, 0.18) !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transform: translateX(24px) !important;
  transition: opacity 380ms ease, transform 380ms ease, visibility 380ms ease !important;
}

body.canvas-page #block-consistent-content.cwh-homepage-enhanced > .cwh-home-featured-projects .cwh-project-carousel__slide::before {
  content: "Featured Project";
  display: inline-block;
  width: fit-content;
  margin-bottom: 1rem;
  padding: 0.35rem 0.7rem;
  border-radius: 999px;
  background: var(--cwh-orange);
  color: var(--cwh-navy-dark);
  font-size: 0.76rem;
  line-height: 1;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

body.canvas-page #block-consistent-content.cwh-homepage-enhanced > .cwh-home-featured-projects .cwh-project-carousel__slide.is-active {
  position: relative !important;
  inset: auto !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  transform: translateX(0) !important;
}

body.canvas-page #block-consistent-content.cwh-homepage-enhanced > .cwh-home-featured-projects .cwh-project-carousel__slide .p-5 {
  padding: 0 !important;
}

body.canvas-page #block-consistent-content.cwh-homepage-enhanced > .cwh-home-featured-projects .cwh-project-carousel__slide h3 {
  margin: 0 0 0.85rem !important;
  max-width: 800px !important;
  font-size: clamp(1.55rem, 3vw, 2.35rem) !important;
  line-height: 1.1 !important;
  font-weight: 800 !important;
}

body.canvas-page #block-consistent-content.cwh-homepage-enhanced > .cwh-home-featured-projects .cwh-project-carousel__slide h3 a {
  color: #ffffff !important;
  text-decoration: none !important;
}

body.canvas-page #block-consistent-content.cwh-homepage-enhanced > .cwh-home-featured-projects .cwh-project-carousel__slide h3 a:hover,
body.canvas-page #block-consistent-content.cwh-homepage-enhanced > .cwh-home-featured-projects .cwh-project-carousel__slide h3 a:focus {
  text-decoration: underline !important;
  text-decoration-color: var(--cwh-orange) !important;
  text-underline-offset: 5px !important;
}

body.canvas-page #block-consistent-content.cwh-homepage-enhanced > .cwh-home-featured-projects .cwh-project-carousel__slide p {
  max-width: 760px !important;
  margin: 0 !important;
  color: rgba(255, 255, 255, 0.92) !important;
  font-size: 1.05rem !important;
  line-height: 1.65 !important;
}

.cwh-project-carousel__controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  margin-top: 1.25rem;
}

.cwh-project-carousel__arrow,
.cwh-project-carousel__dot {
  appearance: none;
  border: 0;
  cursor: pointer;
}

.cwh-project-carousel__arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border: 1px solid rgba(6, 59, 92, 0.2);
  border-radius: 999px;
  background: #ffffff;
  color: var(--cwh-navy);
  font-size: 1.25rem;
  font-weight: 800;
  box-shadow: 0 5px 13px rgba(6, 59, 92, 0.08);
}

.cwh-project-carousel__arrow:hover,
.cwh-project-carousel__arrow:focus-visible {
  background: var(--cwh-navy);
  color: #ffffff;
  outline: 3px solid rgba(244, 154, 69, 0.45);
  outline-offset: 2px;
}

.cwh-project-carousel__dots {
  display: flex;
  gap: 0.55rem;
  align-items: center;
}

.cwh-project-carousel__dot {
  width: 10px;
  height: 10px;
  padding: 0;
  border-radius: 999px;
  background: rgba(6, 59, 92, 0.28);
  transition: width 180ms ease, background 180ms ease;
}

.cwh-project-carousel__dot[aria-current="true"] {
  width: 28px;
  background: var(--cwh-orange);
}

.cwh-project-carousel__dot:focus-visible {
  outline: 3px solid rgba(6, 59, 92, 0.35);
  outline-offset: 3px;
}

/* =========================================================
   OUR IMPACT + LAND + RESOURCES
   Keep existing content, normalize width/rhythm.
   ========================================================= */
body.canvas-page #block-consistent-content.cwh-homepage-enhanced > .cwh-home-impact {
  background: #ffffff !important;
}

body.canvas-page #block-consistent-content.cwh-homepage-enhanced > .cwh-home-land {
  background: var(--cwh-soft-blue) !important;
}

body.canvas-page #block-consistent-content.cwh-homepage-enhanced > .cwh-home-resources {
  background: #ffffff !important;
}

/* =========================================================
   FIND EVENTS — dominant Upcoming card + smaller Past card
   ========================================================= */
body.canvas-page #block-consistent-content.cwh-homepage-enhanced > .cwh-home-events {
  background: var(--cwh-soft-blue) !important;
}

body.canvas-page #block-consistent-content.cwh-homepage-enhanced > .cwh-home-events .grid {
  display: grid !important;
  grid-template-columns: minmax(0, 2fr) minmax(260px, 1fr) !important;
  gap: 1.5rem !important;
  align-items: stretch !important;
}

body.canvas-page #block-consistent-content.cwh-homepage-enhanced > .cwh-home-events article:first-child {
  min-height: 270px !important;
  justify-content: center !important;
  background:
    radial-gradient(circle at 90% 10%, rgba(168, 207, 219, 0.27), transparent 33%),
    var(--cwh-navy) !important;
  border-color: transparent !important;
  color: #ffffff !important;
}

body.canvas-page #block-consistent-content.cwh-homepage-enhanced > .cwh-home-events article:first-child .p-5 {
  justify-content: center !important;
  padding: clamp(1.6rem, 3vw, 2.5rem) !important;
}

body.canvas-page #block-consistent-content.cwh-homepage-enhanced > .cwh-home-events article:first-child h3,
body.canvas-page #block-consistent-content.cwh-homepage-enhanced > .cwh-home-events article:first-child h3 a,
body.canvas-page #block-consistent-content.cwh-homepage-enhanced > .cwh-home-events article:first-child p {
  color: #ffffff !important;
}

body.canvas-page #block-consistent-content.cwh-homepage-enhanced > .cwh-home-events article:first-child h3 {
  font-size: clamp(1.45rem, 2.5vw, 2.05rem) !important;
}

body.canvas-page #block-consistent-content.cwh-homepage-enhanced > .cwh-home-events article:first-child h3 a {
  text-decoration-color: var(--cwh-orange) !important;
  text-underline-offset: 5px !important;
}

body.canvas-page #block-consistent-content.cwh-homepage-enhanced > .cwh-home-events article:nth-of-type(2) {
  min-height: 220px !important;
  align-self: center !important;
  border-top: 5px solid var(--cwh-orange) !important;
}

/* =========================================================
   EVENT RESOURCES + REGISTRATION
   Canvas generates: article, button, article, button.
   Pair each card with its button using CSS grid areas.
   ========================================================= */
body.canvas-page #block-consistent-content.cwh-homepage-enhanced > .cwh-home-event-resources {
  background: #ffffff !important;
}

body.canvas-page #block-consistent-content.cwh-homepage-enhanced > .cwh-home-event-resources .grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  grid-template-rows: auto auto !important;
  gap: 1rem 1.5rem !important;
  align-items: stretch !important;
}

body.canvas-page #block-consistent-content.cwh-homepage-enhanced > .cwh-home-event-resources .grid > article:nth-of-type(1) {
  grid-column: 1 !important;
  grid-row: 1 !important;
  border-top: 4px solid var(--cwh-green) !important;
}

body.canvas-page #block-consistent-content.cwh-homepage-enhanced > .cwh-home-event-resources .grid > a[href$="/resources/webinar-recordings"] {
  grid-column: 1 !important;
  grid-row: 2 !important;
}

body.canvas-page #block-consistent-content.cwh-homepage-enhanced > .cwh-home-event-resources .grid > article:nth-of-type(2) {
  grid-column: 2 !important;
  grid-row: 1 !important;
  border-top: 4px solid var(--cwh-orange) !important;
}

body.canvas-page #block-consistent-content.cwh-homepage-enhanced > .cwh-home-event-resources .grid > a[href$="/events/upcoming"] {
  grid-column: 2 !important;
  grid-row: 2 !important;
}

body.canvas-page #block-consistent-content.cwh-homepage-enhanced > .cwh-home-event-resources .grid > a {
  justify-self: start !important;
  align-self: start !important;
  border-radius: 999px !important;
  background: var(--cwh-navy) !important;
  color: #ffffff !important;
}

body.canvas-page #block-consistent-content.cwh-homepage-enhanced > .cwh-home-event-resources .grid > a:hover,
body.canvas-page #block-consistent-content.cwh-homepage-enhanced > .cwh-home-event-resources .grid > a:focus {
  background: var(--cwh-orange) !important;
  color: var(--cwh-navy-dark) !important;
}

/* =========================================================
   WAYS TO GET INVOLVED — 4 cards
   ========================================================= */
body.canvas-page #block-consistent-content.cwh-homepage-enhanced > .cwh-home-get-involved {
  background: var(--cwh-cream) !important;
}

body.canvas-page #block-consistent-content.cwh-homepage-enhanced > .cwh-home-get-involved .grid {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 1.25rem !important;
  align-items: stretch !important;
}

body.canvas-page #block-consistent-content.cwh-homepage-enhanced > .cwh-home-get-involved article {
  min-height: 205px !important;
  border-top: 4px solid var(--cwh-green) !important;
}

body.canvas-page #block-consistent-content.cwh-homepage-enhanced > .cwh-home-get-involved article:has(a[href$="/donate"]) {
  background: var(--cwh-orange) !important;
  border-top-color: var(--cwh-navy) !important;
}

body.canvas-page #block-consistent-content.cwh-homepage-enhanced > .cwh-home-get-involved article:has(a[href$="/donate"]) h3,
body.canvas-page #block-consistent-content.cwh-homepage-enhanced > .cwh-home-get-involved article:has(a[href$="/donate"]) h3 a,
body.canvas-page #block-consistent-content.cwh-homepage-enhanced > .cwh-home-get-involved article:has(a[href$="/donate"]) p {
  color: var(--cwh-navy-dark) !important;
}

/* Stay Connected can remain a quieter lead-in to the final donate CTA. */
body.canvas-page #block-consistent-content.cwh-homepage-enhanced > .cwh-home-stay-connected {
  background: var(--cwh-soft-blue) !important;
}

/* =========================================================
   RESPONSIVE LAYOUTS
   ========================================================= */
@media (max-width: 1099px) {
  body.canvas-page #block-consistent-content.cwh-homepage-enhanced > .cwh-home-learn-more .grid,
  body.canvas-page #block-consistent-content.cwh-homepage-enhanced > .cwh-home-get-involved .grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 849px) {
  body.canvas-page #block-consistent-content.cwh-homepage-enhanced > section.py-10:not(.cwh-home-search):not(.cwh-home-who):not(.cwh-home-watershed) {
    padding: 3rem 0 !important;
  }

  body.canvas-page #block-consistent-content.cwh-homepage-enhanced > .cwh-home-our-work .grid,
  body.canvas-page #block-consistent-content.cwh-homepage-enhanced > .cwh-home-events .grid,
  body.canvas-page #block-consistent-content.cwh-homepage-enhanced > .cwh-home-event-resources .grid {
    grid-template-columns: 1fr !important;
  }

  body.canvas-page #block-consistent-content.cwh-homepage-enhanced > .cwh-home-events article:first-child,
  body.canvas-page #block-consistent-content.cwh-homepage-enhanced > .cwh-home-events article:nth-of-type(2) {
    min-height: 0 !important;
  }

  body.canvas-page #block-consistent-content.cwh-homepage-enhanced > .cwh-home-event-resources .grid > article:nth-of-type(1),
  body.canvas-page #block-consistent-content.cwh-homepage-enhanced > .cwh-home-event-resources .grid > a[href$="/resources/webinar-recordings"],
  body.canvas-page #block-consistent-content.cwh-homepage-enhanced > .cwh-home-event-resources .grid > article:nth-of-type(2),
  body.canvas-page #block-consistent-content.cwh-homepage-enhanced > .cwh-home-event-resources .grid > a[href$="/events/upcoming"] {
    grid-column: 1 !important;
    grid-row: auto !important;
  }

  body.canvas-page #block-consistent-content.cwh-homepage-enhanced > .cwh-home-featured-projects .cwh-project-carousel__slide {
    min-height: 300px !important;
  }
}

@media (max-width: 599px) {
  body.canvas-page #block-consistent-content.cwh-homepage-enhanced > section.py-10:not(.cwh-home-search):not(.cwh-home-who):not(.cwh-home-watershed) > .stwl-container {
    padding-left: 1.1rem !important;
    padding-right: 1.1rem !important;
  }

  body.canvas-page #block-consistent-content.cwh-homepage-enhanced > .cwh-home-learn-more .grid,
  body.canvas-page #block-consistent-content.cwh-homepage-enhanced > .cwh-home-get-involved .grid {
    grid-template-columns: 1fr !important;
  }

  body.canvas-page #block-consistent-content.cwh-homepage-enhanced > .cwh-home-learn-more article,
  body.canvas-page #block-consistent-content.cwh-homepage-enhanced > .cwh-home-get-involved article {
    min-height: 0 !important;
  }

  body.canvas-page #block-consistent-content.cwh-homepage-enhanced > .cwh-home-featured-projects .cwh-project-carousel__slide {
    min-height: 330px !important;
    padding: 1.5rem !important;
  }

  .cwh-project-carousel__controls {
    gap: 0.75rem;
  }
}

/* Respect reduced-motion preferences. */
@media (prefers-reduced-motion: reduce) {
  body.canvas-page #block-consistent-content.cwh-homepage-enhanced *,
  body.canvas-page #block-consistent-content.cwh-homepage-enhanced *::before,
  body.canvas-page #block-consistent-content.cwh-homepage-enhanced *::after {
    scroll-behavior: auto !important;
  }

  body.canvas-page #block-consistent-content.cwh-homepage-enhanced > .cwh-home-featured-projects .cwh-project-carousel__slide,
  body.canvas-page #block-consistent-content.cwh-homepage-enhanced > :is(
    .cwh-home-learn-more,
    .cwh-home-our-work,
    .cwh-home-events,
    .cwh-home-get-involved
  ) article {
    transition: none !important;
  }
}

/* =========================================================
   HOMEPAGE INTRO CARDS — RESPONSIVE TABLET FIX
   Keeps Who We Are + What Is a Watershed side-by-side
   on desktop/tablet, while stacking cleanly on phones.
   ========================================================= */

@media (min-width: 700px) and (max-width: 949px) {

  body.path-frontpage #block-consistent-content {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    column-gap: 0 !important;
    overflow-x: clip !important;
  }

  /* Keep everything else full width */
  body.path-frontpage #block-consistent-content > * {
    grid-column: 1 / -1 !important;
  }

  /* WHO WE ARE — left */
  body.path-frontpage #block-consistent-content
  > .stwl-container:first-child
  + section.py-10:not(:has(form[action="/search"])) {
    grid-column: 1 !important;
    padding-top: 2.5rem !important;
    padding-bottom: 2.75rem !important;
  }

  /* WHAT IS A WATERSHED — right */
  body.path-frontpage #block-consistent-content
  > .stwl-container:first-child
  + section.py-10:not(:has(form[action="/search"]))
  + section.py-10 {
    grid-column: 2 !important;
    padding-top: 2.5rem !important;
    padding-bottom: 2.75rem !important;
  }

  /* Same layout if hidden search section is still in the DOM */
  body.path-frontpage #block-consistent-content
  > .stwl-container:first-child
  + section.py-10:has(form[action="/search"])
  + section.py-10 {
    grid-column: 1 !important;
    padding-top: 2.5rem !important;
    padding-bottom: 2.75rem !important;
  }

  body.path-frontpage #block-consistent-content
  > .stwl-container:first-child
  + section.py-10:has(form[action="/search"])
  + section.py-10
  + section.py-10 {
    grid-column: 2 !important;
    padding-top: 2.5rem !important;
    padding-bottom: 2.75rem !important;
  }

  /* Left card spacing */
  body.path-frontpage #block-consistent-content
  > .stwl-container:first-child
  + section.py-10:not(:has(form[action="/search"]))
  > .stwl-container,

  body.path-frontpage #block-consistent-content
  > .stwl-container:first-child
  + section.py-10:has(form[action="/search"])
  + section.py-10
  > .stwl-container {
    width: 100% !important;
    height: 100% !important;
    padding-left: 1.5rem !important;
    padding-right: 0.65rem !important;
  }

  /* Right card spacing */
  body.path-frontpage #block-consistent-content
  > .stwl-container:first-child
  + section.py-10:not(:has(form[action="/search"]))
  + section.py-10
  > .stwl-container,

  body.path-frontpage #block-consistent-content
  > .stwl-container:first-child
  + section.py-10:has(form[action="/search"])
  + section.py-10
  + section.py-10
  > .stwl-container {
    width: 100% !important;
    height: 100% !important;
    padding-left: 0.65rem !important;
    padding-right: 1.5rem !important;
  }

  /* Equal card sizing */
  body.path-frontpage #block-consistent-content
  > .stwl-container:first-child
  ~ section.py-10 article {
    height: 100% !important;
  }

  /* Keep intro-card images proportional on tablets */
  body.path-frontpage #block-consistent-content
  > .stwl-container:first-child
  + section.py-10 article .aspect-video,

  body.path-frontpage #block-consistent-content
  > .stwl-container:first-child
  + section.py-10
  + section.py-10 article .aspect-video {
    height: clamp(180px, 23vw, 220px) !important;
    min-height: 180px !important;
    max-height: 220px !important;
  }

  body.path-frontpage #block-consistent-content
  > .stwl-container:first-child
  ~ section.py-10 article img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
  }
}


/* Phones: intentionally stack the intro cards */
@media (max-width: 699px) {

  body.path-frontpage #block-consistent-content {
    display: block !important;
  }

  body.path-frontpage #block-consistent-content > section.py-10 {
    padding-top: 1.75rem !important;
    padding-bottom: 1.75rem !important;
  }

  body.path-frontpage #block-consistent-content > section.py-10 > .stwl-container {
    padding-left: 1.25rem !important;
    padding-right: 1.25rem !important;
  }

  body.path-frontpage #block-consistent-content article {
    width: 100% !important;
    min-height: 0 !important;
  }
}

/* =========================================================
   WHAT IS A WATERSHED — PRESERVE FULL DIAGRAM
   ========================================================= */

body.canvas-page.path-frontpage
#block-consistent-content.cwh-homepage-enhanced
> section.py-10.cwh-home-watershed
> .stwl-container
> .grid
article
> .aspect-video {
  background: #f5fafb !important;
}

body.canvas-page.path-frontpage
#block-consistent-content.cwh-homepage-enhanced
> section.py-10.cwh-home-watershed
> .stwl-container
> .grid
article
> .aspect-video
> img.object-cover[data-component-id="canvas:image"] {
  width: 100% !important;
  height: 100% !important;

  object-fit: contain !important;
  object-position: center center !important;

  padding: 10px !important;
  background: #f5fafb !important;
}

/* WHAT IS A WATERSHED — show full diagram */

body.canvas-page
#block-consistent-content.cwh-homepage-enhanced
> .cwh-home-watershed
.aspect-video {
  background: #f5fafb !important;
}

body.canvas-page
#block-consistent-content.cwh-homepage-enhanced
> .cwh-home-watershed
.aspect-video
img {
  width: 100% !important;
  height: 100% !important;

  object-fit: contain !important;
  object-position: center center !important;

  padding: 10px !important;
  box-sizing: border-box !important;
  background: #f5fafb !important;
}