.c--banner {
  --_banner_m-h: var(--banner_m-h, auto);

  --_banner-overlay_bg: var(--banner_overlay_bg, linear-gradient(83.85deg, #007BBD 0%, #00ABF1 33%, #00ABF1 66%, #4DCBFF 100%));

  --_banner-inner_c: var(--banner-inner_c, var(--c-black));
  --_banner-inner_p-b: var(--banner-inner_p-b, 120px 20px);
  --_banner-inner_p-i: var(--banner-inner_p-i, 0px);

  --_banner-title_m-w: var(--banner-title_m-w, 860px);
  --_banner-title_f-f: var(--banner-title_f-f, inherit);
  --_banner-title_f-w: var(--banner-title_f-w, inherit);
  --_banner-title_f-s: var(--banner-title_f-s, inherit);
  --_banner-title_l-h: var(--banner-title_l-h, inherit);

  --_banner-content_m-w: var(--banner-content_m-w, 860px);
  --_banner-content_m-b-s: var(--banner-content_m-b-s, 24px);
  --_banner-content_f-s: var(--banner-content_f-s, inherit);

  min-height: var(--_banner_m-h);
  isolation: isolate;
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-areas: "stack";
}

  .c--banner > * {
    -ms-grid-row: 1;
    -ms-grid-column: 1;
    grid-area: stack;
  }

  .c--banner.has-image {
    --_banner-inner_c:var(--banner-inner_hasImg_c, var(--c-white));
    --_banner-overlay_bg: var(--banner-inner_hasImg_overlay_bg, linear-gradient(360deg, rgba(0, 0, 0, 0.25) -0.84%, rgba(0, 0, 0, 0) 100.84%), linear-gradient(0deg, rgba(0, 0, 0, 0.75) 29.81%, rgba(0, 0, 0, 0) 100%));
    --_banner-content_m-b-s: var(--banner-inner_hasImg_content_m-b-s, 40px);
    --_banner_m-h: var(--banner_hasImg_m-h, 500px);
    --_banner-inner_p-b: var(--banner-inner_hasImg_p-b, 140px 90px);
  }

/* Banner overlay */
.c--banner__overlay {
  position: absolute;
  inset: 0;
  background: var(--_banner-overlay_bg);
}

/* Banner media */
.c--banner__media {
  position: absolute;
  inset: 0;
  z-index: -1;
}
.c--banner__media * {
    height: 100% !important;
    padding: 0 !important;
  }
.c--banner__media img,
  .c--banner__media picture {
    -o-object-fit: cover;
    object-fit: cover;
    width: 100%;
    height: 100%;
    padding: 0;
  }

/* Banner row — lays the text column and decorative graphic out side by side. */
.c--banner__row {
  display: flex;
  align-items: flex-end;
  gap: 2.5rem;
}

.c--banner__text {
  flex: 0 1 auto;
  min-width: 0;
}

/* Banner graphic — decorative photo cluster for the page-header banner. */
.c--banner__graphic {
  position: relative;
  flex: 1 1 0%;
  min-width: 0;
  align-self: stretch;
}
.c--banner__graphic img {
    position: absolute;
    inset-block-end: 0;
    inset-inline-end: 0;
    display: block;
    max-width: 100%;
    height: auto;
  }
@media (max-width: 61.9375rem) {
.c--banner__graphic {
    display: none
}
  }

/* Glossary — the "AZ" letterform cutouts */
.c--banner__graphic--glossary img {
  max-width: min(43.125rem, 100%);
  aspect-ratio: 1377 / 746;
}

/* Case Studies — three overlapping rounded photo tiles */
.c--banner__graphic--case-studies img {
  max-width: min(30.125rem, 100%);
  aspect-ratio: 482 / 507;
}

/* Sponge measures catalogue — two overlapping photo circles, pre-masked with alpha */
.c--banner__graphic--sponge-measures img {
  max-width: min(31.25rem, 100%);
  aspect-ratio: 656 / 655;
}

/* Knowledge library — three half-circle domes forming two adjacent full
   circles (a grayscale photo, a photo/tint split circle) */
.c--banner__graphic--knowledge img {
  max-width: min(34.375rem, 100%);
  aspect-ratio: 735 / 490;
}

/* Benefits Matrix — a single pre-composited graphic */
.c--banner__graphic--benefits-matrix img {
  max-width: min(25rem, 100%);
  aspect-ratio: 1 / 1;
}

/* Banner inner */
.c--banner__inner {
  color: var(--_banner-inner_c);
  width: var(--container_m-w);
  padding-block: var(--_banner-inner_p-b);
  padding-inline: var(--_banner-inner_p-i);

  z-index: 1;
  align-self: flex-end;
  margin-inline: auto;
}

/* Banner title */
.c--banner__title {
  font-family: var(--_banner-title_f-f);
  font-weight: var(--_banner-title_f-w);
  font-size: var(--_banner-title_f-s);
  line-height: var(--_banner-title_l-h);
  max-width: var(--_banner-content_m-w);
}

/* Banner content */
.c--banner__content {
  margin-block-start: var(--_banner-content_m-b-s);
  max-width: var(--_banner-content_m-w);
  font-size: var(--_banner-content_f-s);
}

/* Banner call to action */
.c--banner__cta {
  margin-block-start: var(--_banner-content_m-b-s);
}

/* CTA button: solid white pill, dark text, regardless of banner variant */
.c--banner__cta-btn {
  --btn_bg: var(--c-white);
  --btn_c: #222222;
}

/* Variant: Hero */
/* Variant: Minimal — plain Basic page header (title + content, no media); background color set via a field-banner-style--* modifier */
.banner_minimal {
  --_banner_m-h: var(--banner-minimal_m-h, auto);
  --_banner-inner_p-b: var(--banner-minimal_p-b, calc(120px + var(--header_h)) 2.5rem);
  --_banner-title_f-f: var(--banner-minimal_title_f-f, var(--f-f_s));
  --_banner-title_f-w: var(--banner-minimal_title_f-w, var(--f-w_bold));
  /* 28px -> 44px, same fluid curve as the CTA and hero-header titles. */
  --_banner-title_f-s: var(--banner-minimal_title_f-s, clamp(1.75rem, 1.35rem + 1.6vw, 2.75rem));
  --_banner-title_l-h: var(--banner-minimal_title_l-h, 1.1);
  --_banner-content_m-w: var(--banner-minimal_content_m-w, 670px);
  --_banner-content_m-b-s: var(--banner-minimal_content_m-b-s, 40px);

  margin-block-start: calc(var(--header_h) * -1);
}
/* field_banner_style modifiers — a white-fade gradient over a flat
     page-header color, per Figma. Each option is a specific basic page and
     carries that page's own .c--banner__graphic-- composition (see
     edwtfe_preprocess_node() and node--page--full.html.twig):
       cyan   -> Glossary
       blue_1 -> Case Studies
       blue_2 -> Benefits Matrix
       green  -> Sponge measures catalogue
       cream  -> Knowledge library
       */
.banner_minimal.field-banner-style--cyan {
    --_banner-overlay_bg: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, var(--c-white) 100%), linear-gradient(90deg, #CBF6F1 0%, #CBF6F1 100%);
  }
.banner_minimal.field-banner-style--blue_1,
  .banner_minimal.field-banner-style--blue_2 {
    --_banner-overlay_bg: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, var(--c-white) 100%), linear-gradient(90deg, #CBE4F6 0%, #CBE4F6 100%);
  }
.banner_minimal.field-banner-style--green {
    --_banner-overlay_bg: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, var(--c-white) 100%), linear-gradient(90deg, #E7F3CE 0%, #E7F3CE 100%);
  }
.banner_minimal.field-banner-style--cream {
    --_banner-overlay_bg: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, var(--c-white) 100%), linear-gradient(90deg, #F3E7CE 0%, #F3E7CE 100%);
  }

/* Variant: Cta — an inset, rounded promo block (not an edge-to-edge hero) */
.banner_cta {
  --_banner_m-h: var(--banner-cta_m-h, 420px);
  /* Figma renders the CTA card as the bare photo: no scrim. The heavy
     bottom-up black gradient inherited from .has-image crushed the lower
     half of the image (see the "Home" CTA card). */
  --banner-inner_hasImg_overlay_bg: none;
  --_banner-title_f-f: var(--banner-cta_title_f-f, var(--f-f_s));
  --_banner-title_f-w: var(--banner-cta_title_f-w, var(--f-w_bold));
  /* 28px -> 44px between 400px and 1400px viewports, matching the
     hero-header title so the two hero-scale headings track together. */
  --_banner-title_f-s: var(--banner-cta_title_f-s, clamp(1.75rem, 1.35rem + 1.6vw, 2.75rem));
  --_banner-title_l-h: var(--banner-cta_title_l-h, 1.1);
  --_banner-content_m-w: var(--banner-cta_content_m-w, 560px);
  --_banner-content_f-s: var(--banner-cta_content_f-s, 18px);
  border-radius: var(--b-r_xl);
}
.banner_cta.has-image {
    --_banner_m-h: var(--banner-cta-inner_hasImg_m-h, 420px);
    --_banner-inner_p-b: var(--banner-cta-inner_hasImg_p-b, 0px 48px);
    --_banner-inner_p-i-s: var(--banner-cta-inner_hasImg_p-i-s, 32px);

    /* With no scrim, the white copy would sit on the section tint for as long
       as the lazy-loaded photo takes to arrive. .c--banner isolates, so this
       paints under the z-index:-1 media and is invisible once it loads. */
    background-color: #1b2a17;
  }

/* Responsive adjustments */
@media (min-width: 62rem) {
  .banner_cta.has-image {
    --_banner_m-h: var(--banner-cta-inner_hasImg_m-h_desk, 600px);
    --_banner-inner_p-b: var(--banner-cta-inner_hasImg_p-b_desk, 0px 90px);
    --_banner-inner_p-i-s: var(--banner-cta-inner_hasImg_p-i-s_desk, 80px);
  }
}