/* ICS unified hero components (11-05). Global classes: ics-hero (base, cream + halftone dots), ics-hero--art (text left + torn-photo collage right), ics-hero--text (text only). Figma base: no yellow band, no torn bottom, no 100svh. Element children carry ics-hero__text / ics-hero__art. Loaded after tear-guard.css (mu-plugin ics-hero.php, priority 120). */
html body section.ics-hero.ics-hero {
  box-sizing: border-box !important;
  position: relative !important;
  display: block !important;
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  margin: 0 !important;
  border: 0 !important;
  overflow: visible !important;
  background-color: var(--neutral-50) !important;
  background-image: var(--ht-img) !important;
  background-size: 6px 6px !important;
  background-position: 0 0, 3px 3px !important;
  background-repeat: repeat !important;
  padding-top: calc(96px + var(--sp-xl)) !important;
  padding-right: max(6.25%, calc((100% - var(--global-content-max-width, 1440px)) / 2)) !important;
  padding-bottom: var(--sp-2xl) !important;
  padding-left: max(6.25%, calc((100% - var(--global-content-max-width, 1440px)) / 2)) !important;
}
html body section.ics-hero.ics-hero::before,
html body section.ics-hero.ics-hero::after { content: none !important; display: none !important; }
/* no yellow band / parallax band / hero-only decor images */
html body section.ics-hero.ics-hero [id$="-dec-band"],
html body section.ics-hero.ics-hero [id$="-band"]:not(.ics-hero__art):not(.ics-hero__art *),
html body section.ics-hero.ics-hero [id$="-band-wrap"] { display: none !important; }
html body section.ics-hero.ics-hero h1 {
  font-family: "EB Garamond", serif !important;
  font-size: var(--fs-h1) !important;
  line-height: var(--lh-h1) !important;
  font-weight: 500 !important;
  letter-spacing: 0 !important;
  color: var(--heading) !important;
  margin: 0 !important;
}
html body section.ics-hero.ics-hero p {
  font-family: "Inter", sans-serif !important;
  font-size: 16px !important;
  line-height: var(--lh-body) !important;
  letter-spacing: -0.08px !important;
  color: var(--text) !important;
  margin: 0 !important;
}
/* ---- ics-hero--art : 2 columns >=992 ---- */
html body section.ics-hero--art.ics-hero {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
  column-gap: var(--sp-xl) !important;
  align-items: center !important;
  min-height: 516px !important;
}
html body section.ics-hero--art.ics-hero .ics-hero__text {
  position: relative !important;
  z-index: 1 !important;
  flex: none !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: var(--sp-m) !important;
  text-align: left !important;
}
html body section.ics-hero--art.ics-hero .ics-hero__text p {}
html body section.ics-hero--art.ics-hero .ics-hero__art {
  position: relative !important;
  z-index: 1 !important;
  flex: none !important;
  width: 100% !important;
  max-width: 526px !important;
  height: auto !important;
  min-width: 0 !important;
  aspect-ratio: 5 / 4 !important;
  margin: 0 0 0 auto !important;
  padding: 0 !important;
  overflow: visible !important;
  justify-self: end !important;
}
html body section.ics-hero--art.ics-hero .ics-hero__art img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  object-fit: cover !important;
}
/* optional row wrapper (pages with an inner container): the row takes the grid */
html body section.ics-hero--art.ics-hero > .ics-hero__row {
  grid-column: 1 / -1 !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
  column-gap: var(--sp-xl) !important;
  align-items: center !important;
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  box-sizing: border-box !important;
}
/* ---- ics-hero--text : single column ---- */
html body section.ics-hero--text.ics-hero {
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: flex-start !important;
  min-height: 264px !important;
  gap: var(--sp-m) !important;
}
html body section.ics-hero--text.ics-hero .ics-hero__text {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: var(--sp-m) !important;
  text-align: left !important;
}
html body section.ics-hero--text.ics-hero p {}
/* ---- <=991: single column, art below text, centred ---- */
@media (max-width: 991px) {
  html body section.ics-hero--art.ics-hero > .ics-hero__row, html body section.ics-hero--art.ics-hero .ics-hero__row {
    display: flex !important;
    flex-direction: column !important;
    gap: var(--sp-l) !important;
  }
  html body section.ics-hero--art.ics-hero {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    min-height: 0 !important;
    gap: var(--sp-l) !important;
  }
  html body section.ics-hero--art.ics-hero .ics-hero__art {
    max-width: 520px !important;
    margin: 0 auto !important;
    width: 100% !important;
  }
  html body section.ics-hero--art.ics-hero .ics-hero__text p {}
}
/* tear-guard.css has html body section#wn-hero#wn-hero {padding-inline:0 !important} (ID rule): same specificity here, loads later, wins. */
html body section.ics-hero.ics-hero#wn-hero#wn-hero {
  padding-left: max(6.25%, calc((100% - var(--global-content-max-width, 1440px)) / 2)) !important;
  padding-right: max(6.25%, calc((100% - var(--global-content-max-width, 1440px)) / 2)) !important;
}
/* tear-guard.css H2 pass sets html body #wn-hero-inner#wn-hero-inner {width:87.5%; margin-inline:auto} (ID, !important): restore full-width row for the art variant. */
html body section.ics-hero--art.ics-hero #wn-hero-inner#wn-hero-inner.ics-hero__row {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* ---- wave 2 (2026-11-04): ID-specific overrides for hero sections converted to ics-hero--art/--text.
   tear-guard.css ID rules (#act-hero padding-inline/padding-top !important, #mis-intro, #p132-hero-in width 87.5%, #act-hero-h 48px !important, p 24px !important, nw/ev hero padding-inline 0 !important) beat class rules; these re-state the component values with equal ID specificity, loaded later. */
html body section.ics-hero.ics-hero#act-hero#act-hero,
html body section.ics-hero.ics-hero#mis-intro#mis-intro,
html body section.ics-hero.ics-hero#p132-hero#p132-hero,
html body section.ics-hero.ics-hero#brxe-nwhero#brxe-nwhero,
html body section.ics-hero.ics-hero#brxe-evhero#brxe-evhero,
html body section.ics-hero.ics-hero#brxe-srhero#brxe-srhero {
  padding-top: calc(96px + var(--sp-xl)) !important;
  padding-bottom: var(--sp-2xl) !important;
  padding-left: max(6.25%, calc((100% - var(--global-content-max-width, 1440px)) / 2)) !important;
  padding-right: max(6.25%, calc((100% - var(--global-content-max-width, 1440px)) / 2)) !important;
  min-height: 0 !important;
  height: auto !important;
  border-top: 0 !important;
  background-color: var(--neutral-50) !important;
}
html body section.ics-hero.ics-hero#act-hero#act-hero > #act-hero-in#act-hero-in,
html body section.ics-hero.ics-hero#mis-intro#mis-intro > #mis-intro-in#mis-intro-in,
html body section.ics-hero.ics-hero#p132-hero#p132-hero > #p132-hero-in#p132-hero-in,
html body section.ics-hero.ics-hero#brxe-srhero#brxe-srhero > #brxe-srhwrp#brxe-srhwrp {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
}
html body section.ics-hero.ics-hero#act-hero#act-hero #act-hero-h#act-hero-h,
html body section.ics-hero.ics-hero#mis-intro#mis-intro #mis-intro-h#mis-intro-h,
html body section.ics-hero.ics-hero#p132-hero#p132-hero #p132-h1#p132-h1 {
  font-family: "EB Garamond", serif !important;
  font-size: var(--fs-h1) !important;
  line-height: var(--lh-h1) !important;
  font-weight: 500 !important;
  text-align: left !important;
}
html body section.ics-hero.ics-hero#act-hero#act-hero #act-hero-p#act-hero-p,
html body section.ics-hero.ics-hero#mis-intro#mis-intro #mis-intro-p#mis-intro-p,
html body section.ics-hero.ics-hero#p132-hero#p132-hero #p132-lead#p132-lead {
  font-family: "Inter", sans-serif !important;
  font-size: 16px !important;
  line-height: var(--lh-body) !important;
  letter-spacing: -0.08px !important;
  font-weight: 400 !important;
  width: auto !important;
  text-align: left !important;
}
/* ---- wave 2 (11-04): ID overrides for #mv-hero, #lib-hero, #jn-hero. Beat tear-guard.css + wide.css ID rules (yellow gradient, padding-inline, band, row width, 39.5px gutter). Same colour/gutter as pilot. ---- */
html body section.ics-hero.ics-hero#mv-hero#mv-hero, html body section.ics-hero.ics-hero#lib-hero#lib-hero, html body section.ics-hero.ics-hero#jn-hero#jn-hero {
  background-image: none !important;
  background-color: var(--neutral-50) !important;
  background-size: auto !important;
  border: 0 !important;
  height: auto !important;
  min-height: 0 !important;
  overflow: visible !important;
  padding-top: calc(96px + var(--sp-xl)) !important;
  padding-bottom: var(--sp-2xl) !important;
  padding-left: max(6.25%, calc((100% - var(--global-content-max-width, 1440px)) / 2)) !important;
  padding-right: max(6.25%, calc((100% - var(--global-content-max-width, 1440px)) / 2)) !important;
}
html body section.ics-hero--art.ics-hero#mv-hero#mv-hero, html body section.ics-hero--art.ics-hero#lib-hero#lib-hero, html body section.ics-hero--art.ics-hero#jn-hero#jn-hero {
  min-height: 516px !important;
}
html body section.ics-hero.ics-hero#mv-hero .ics-hero__text#mv-hero-text, html body section.ics-hero.ics-hero#lib-hero .ics-hero__text#lib-hero-copy, html body section.ics-hero.ics-hero#jn-hero .ics-hero__text#jn-hero-text {
  width: auto !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
}
html body section.ics-hero.ics-hero#mv-hero .ics-hero__art#mv-hero-art, html body section.ics-hero.ics-hero#lib-hero .ics-hero__art#lib-hero-art, html body section.ics-hero.ics-hero#jn-hero .ics-hero__art#jn-hero-art {
  width: 100% !important;
  max-width: 526px !important;
  height: auto !important;
  aspect-ratio: 5 / 4 !important;
  overflow: visible !important;
  margin: 0 0 0 auto !important;
}
html body section.ics-hero.ics-hero#lib-hero > .ics-hero__row#lib-hero-row#lib-hero-row, html body section.ics-hero.ics-hero#jn-hero > .ics-hero__row#jn-hero-inner#jn-hero-inner {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  column-gap: var(--sp-xl) !important;
}
/* wave 2 (11-04): <=991 the row (grid align-items:center) centred the text column; stretch it so the text sits on the container edge. */
@media (max-width: 991px) {
  html body section.ics-hero.ics-hero#lib-hero > .ics-hero__row#lib-hero-row#lib-hero-row, html body section.ics-hero.ics-hero#jn-hero > .ics-hero__row#jn-hero-inner#jn-hero-inner {
    align-items: stretch !important;
    justify-items: stretch !important;
  }
}

/* task1 (11-04): pilot About hero: cancel leftover tear-guard yellow strip (ID rule) */
html body section.ics-hero.ics-hero#ab-hero#ab-hero{background-image:none!important;background-size:auto!important}

/* task1b (11-04, owner): About hero = solid yellow + halftone dots (supersedes the none rule above) */
html body section.ics-hero.ics-hero#ab-hero#ab-hero{background-color:var(--yellow-500)!important;background-image:var(--ht-img)!important;background-size:6px 6px!important;background-position:0 0,3px 3px!important;background-repeat:repeat!important}

/* task2 (11-04): hero p font = IBM Plex Sans on pilot/template heroes that used Inter or Plex Mono */
html body #act-hero p, html body #mis-intro p, html body #p132-hero p, html body #brxe-nwhero p, html body #brxe-evhero p, html body #brxe-srhero p{font-family:"IBM Plex Sans",system-ui,-apple-system,"Segoe UI",sans-serif!important}

/* task2b (11-04): raise specificity over tear-guard :is() p rule (Inter) for act/mis/p132 heroes */
html body #act-hero#act-hero p, html body #mis-intro#mis-intro p, html body #p132-hero#p132-hero p{font-family:"IBM Plex Sans",system-ui,-apple-system,"Segoe UI",sans-serif!important}

/* ---- band variants (2026-11-04, Figma audit): ics-hero--yellow = full-width yellow torn band from the hero top (behind the fixed nav) to a torn bottom edge at ~563px, cream below (Figma: Progress 503:3730, Library 294:2170, Support 441:4361, Join 441:5568, News 438:5026). ics-hero--band = yellow torn band behind the art, art row (Mission 760:6359: starts 29px above the art, 564px tall). Mask = band-torn.svg (Figma silhouette, fill #FFEF6B). Applied through Bricks _cssClasses. #ab-hero keeps its owner-ordered solid yellow (no modifier). ---- */
html body .ics-hero--yellow,
html body .ics-hero--band {
  position: relative !important;
  isolation: isolate !important;
}
html body .ics-hero--yellow::before,
html body .ics-hero--band::before {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  z-index: -1 !important;
  pointer-events: none !important;
  background-color: #FFEF6B !important;
  background-image: var(--ht-img) !important;
  background-size: 6px 6px !important;
  background-position: 0 0, 3px 3px !important;
  background-repeat: repeat !important;
  -webkit-mask: url("/wp-content/uploads/ics-hero/band-torn.svg") 0 0 / 100% 100% no-repeat !important;
  mask: url("/wp-content/uploads/ics-hero/band-torn.svg") 0 0 / 100% 100% no-repeat !important;
}
html body .ics-hero--yellow::before { top: -120px !important; height: 683px !important; }
html body .ics-hero--band::before { top: -29px !important; height: 564px !important; }
@media (max-width: 991px) {
  html body .ics-hero--yellow::before { height: calc(100% + 48px) !important; }
}

/* band (2026-11-04): page 133 wrapper #mis-s1 clips overflow (Bricks overflow:clip, height 801/900px), which cut the bottom torn edge of the .ics-hero--band behind the collage. Keep horizontal clip, let the band show vertically. */
html body.page-id-133 #mis-s1#mis-s1 { overflow-x: clip !important; overflow-y: visible !important; }

/* band (2026-11-04): the hero reset above (html body section.ics-hero.ics-hero::before {content:none;display:none}) beats the generic modifier; re-enable the yellow band pseudo on section.ics-hero--yellow (higher specificity, two props only). */
html body section.ics-hero.ics-hero.ics-hero--yellow::before { content: "" !important; display: block !important; }

/* task2c (11-04): hero lead p by its own ID (act-hero-p, mis-intro-p, p132-lead) -> IBM Plex Sans, beats the ID rule that set Inter */
html body section.ics-hero.ics-hero#act-hero#act-hero #act-hero-p#act-hero-p, html body #mis-intro#mis-intro #mis-intro-p#mis-intro-p, html body #p132-hero#p132-hero #p132-lead#p132-lead{font-family:"IBM Plex Sans",system-ui,-apple-system,"Segoe UI",sans-serif!important}

/* band (2026-11-04): <=991 the art is smaller than 564px: size the .ics-hero--band to the art box (top -29px, bottom +14px kept). */
@media (max-width: 991px) {
  html body .ics-hero--band::before { height: calc(100% + 43px) !important; }
}

/* task3 (11-04): About hero moved to shared .ics-hero--yellow band; neutralise the solid-yellow fill on section (ID rule above). Only ::before paints yellow. */
html body section.ics-hero.ics-hero#ab-hero#ab-hero{background-image:none!important;background-color:transparent!important}

/* task2d (11-04): same selectors as the wave-1 Inter !important block (act/mis/p132 lead p), later in file -> IBM Plex Sans */
html body section.ics-hero.ics-hero#act-hero#act-hero #act-hero-p#act-hero-p,
html body section.ics-hero.ics-hero#mis-intro#mis-intro #mis-intro-p#mis-intro-p,
html body section.ics-hero.ics-hero#p132-hero#p132-hero #p132-lead#p132-lead {
  font-family: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif !important;
}

/* ICS hero component (ICS / Hero, Bricks component 975987): empty eyebrow is not rendered (About has no eyebrow). */
html body section.ics-hero .ics-hero__eyebrow:empty { display: none !important; }

/* ICS / Hero component: layout=text (text-only heroes) hides the art column. */
html body section.ics-hero.ics-hero--text .ics-hero__art { display: none !important; }

/* ===== ICS / Hero component v3 (round 3). Scoped to .ics-hero-c so non-component heroes are unaffected. ===== */
html body section.ics-hero-c.ics-hero--text .ics-hero__text { gap: var(--sp-l) !important; }
html body section.ics-hero-c .ics-hero__lead2:empty, html body section.ics-hero-c .ics-hero__sticker:empty { display: none !important; }
html body section.ics-hero-c .ics-hero-lead-serif { font-family: "EB Garamond", serif !important; font-size: var(--fs-sub2) !important; line-height: var(--lh-body) !important; letter-spacing: var(--ls-h4) !important; font-weight: 400 !important; color: var(--text) !important; }
html body section.ics-hero-c.ics-hero-c--copyart > .ics-hero__text { grid-column: 2 !important; grid-row: 1 !important; position: relative !important; z-index: 2 !important; }
html body section.ics-hero-c.ics-hero-c--copyart > .ics-hero__art { grid-column: 2 !important; grid-row: 1 !important; }
html body section.ics-hero-c.ics-hero-c--contain .ics-hero__art img { width: 100% !important; height: 100% !important; object-fit: contain !important; }
html body section.ics-hero-c.ics-hero-c--wide .ics-hero__art img { position: absolute !important; width: 568px !important; height: 438.5px !important; left: -23px !important; top: 50% !important; transform: translateY(-50%) !important; max-width: none !important; object-fit: cover !important; }
html body section.ics-hero-c.ics-hero-c--join .ics-hero__art img { position: absolute !important; width: 547.5px !important; height: 432.5px !important; left: -10.75px !important; top: -6.25px !important; max-width: none !important; object-fit: cover !important; }
@media (max-width: 1199px) { html body section.ics-hero-c.ics-hero-c--join .ics-hero__art img { left: 0 !important; top: 0 !important; width: 100% !important; height: 100% !important; } }
/* H53: hero sticker uses the global ICS badge look (tokens from ics-badge.css :root, fallbacks inline). Placement and -5deg tilt kept. */
html body section.ics-hero-c .ics-hero__sticker { position: absolute !important; left: 8px; bottom: 12px; transform: rotate(-5deg); font-family: inherit !important; font-weight: 500 !important; font-size: calc(var(--ics-badge-font-size, var(--fs-xs)) * var(--text-scale, 1)) !important; line-height: var(--lh-xs) !important; letter-spacing: normal !important; text-transform: none !important; padding: var(--ics-badge-pad-y, var(--sp-2xs)) var(--ics-badge-pad-x, var(--sp-xs)) !important; box-sizing: border-box !important; background: var(--ics-badge-bg, var(--pink-500)) !important; color: var(--ics-badge-fg, var(--neutral-1000)) !important; border: var(--ics-badge-edge-w, 1px) solid var(--ics-badge-edge, var(--neutral-1000)) !important; border-radius: 0 !important; box-shadow: var(--ics-badge-shadow, 2px) var(--ics-badge-shadow, 2px) 0 var(--ics-badge-edge, var(--neutral-1000)) !important; width: fit-content !important; max-width: 70% !important; white-space: nowrap; z-index: 3; }
html body section.ics-hero-c .ics-hero__sticker.ics-hero-st--events { bottom: 16px; transform: rotate(-6deg); }
/* v4 (round 3): wide/join art and copy paddings as on the old Library/Join heroes */
html body section.ics-hero-c.ics-hero-c--wide { overflow: hidden !important; }
html body section.ics-hero-c.ics-hero-c--wide .ics-hero__art { max-width: 526px !important; }
html body section.ics-hero-c.ics-hero-c--wide > .ics-hero__text { gap: 0 !important; }
html body section.ics-hero-c.ics-hero-c--wide p:has(+ .ics-hero__lead2) { margin-bottom: var(--sp-2xs) !important; }
html body section.ics-hero-c.ics-hero-c--wide .ics-hero__text > h1 { margin-bottom: 12px !important; }
@media (max-width: 1199px) { html body section.ics-hero-c.ics-hero-c--wide .ics-hero__art img { left: 0 !important; top: 0 !important; width: 100% !important; height: 100% !important; transform: none !important; } }
html body section.ics-hero-c.ics-hero-c--wide > .ics-hero__text { z-index: 3 !important; }
html body section.ics-hero-c.ics-hero-c--wide > .ics-hero__text { z-index: 10 !important; position: relative !important; }
html body section.ics-hero-c.ics-hero-c--join .ics-hero__art { max-width: 526px !important; }
html body section.ics-hero-c.ics-hero-c--pad > .ics-hero__text { padding-top: var(--sp-3xl) !important; padding-bottom: var(--sp-3xl) !important; }
html body section.ics-hero-c .brxe-a944a8:empty { display: none !important; }
html body section.ics-hero-c.ics-hero-c--cap526 .ics-hero__art { max-width: 526px !important; }
/* v8 (round 3): search form in the component slot (Search results template, was #brxe-srsrch). */
html body section.ics-hero-c .ics-hero-search { width: 100% !important; max-width: 720px !important; }
html body section.ics-hero-c .ics-hero-search input { width: 100%; min-height: 52px; padding: var(--sp-s) var(--sp-m); background: var(--yellow-0); border: 1px solid var(--neutral-1000); border-radius: var(--radius-m); font-size: var(--fs-body); }
html body section.ics-hero-c .ics-hero-search button { display: inline-flex; align-items: center; width: auto; height: auto; min-height: 2.75rem; min-width: 2.75rem; padding: var(--sp-s) var(--sp-m); margin-left: var(--sp-s); border: 0; border-radius: var(--radius-m); background: var(--btn-bg); color: var(--btn-text); font-weight: 600; line-height: var(--lh-body); letter-spacing: var(--ls-btn-m); white-space: nowrap; cursor: pointer; }
html body section.ics-hero-c .ics-hero__text:has(.ics-hero-search) { gap: var(--sp-m) !important; }
/* v9 (round 3): back link in the component top slot (was #p132-back). */
html body section.ics-hero-c .ics-hero-back { display: inline-flex !important; align-items: center; gap: var(--sp-s); min-height: calc(var(--sp-xl) * 1.375); margin-top: calc(var(--sp-s) * -1); margin-bottom: calc(var(--sp-s) * -1); text-decoration: none; color: var(--neutral-600); }
html body section.ics-hero-c .ics-hero-back img { display: block; width: 20px; height: 20px; }
html body section.ics-hero-c .ics-hero-back__text { font-family: Inter, sans-serif; font-size: var(--fs-small); line-height: var(--lh-body); letter-spacing: var(--ls-body); white-space: nowrap; }
html body section.ics-hero-c .ics-hero__text:has(.ics-hero-back) { gap: var(--sp-xl) !important; }

/* p69 2026-11-05: EN twin rules (copy of VI page-id/postid rules, append-only, generated by P69). */
html body.page-id-2903 #mis-s1#mis-s1 { overflow-x: clip !important; overflow-y: visible !important; }