/* H8 2026-11-05 (owner): Mission s2 eyebrow 'Sứ mệnh của ICS' centred on the page midline (Figma 2029:3294, VI 133 + EN 2903). Live before: eyebrow 243px wide at left 169px, heading box centre 720px. Section background is already var(--neutral-50) (#faf6ed) via global class ics-bg-cream; not changed here. */
html body #mis-s2 #mis-s2-eyebrow#mis-s2-eyebrow { width: 100% !important; max-width: none !important; flex: 0 0 100% !important; align-self: center !important; margin-inline: auto !important; text-align: center !important; }

/* H28 (2026-11-05, owner): text and card grids of the mission/vision page (133 + 2903) sit inside the boxed container: width var(--container-w) 87.5%, max var(--container-max) 1440px, margin-inline auto, no padding-inline. Torn colour bands stay full-bleed (section background, band ::before). Causes: ics-frow.css gave band text 24px side padding at <=991 and a 1312px grid at >=992; ics-vision.css #vs-stage at <=991 is width 100% with padding 16px; intro wrapper was 87.5% without the token. Ids are Bricks ids (checked in served HTML). Manifest scope limits this file to pages 133 + 2903. */
html body #brxe-mfm4nb,
html body #brxe-mfojtk {
  width: var(--container-w, 87.5%) !important;
  max-width: var(--container-max, 1440px) !important;
  margin-inline: auto !important;
  padding-inline: 0 !important;
  box-sizing: border-box !important;
}
html body #brxe-92s4qm {
  max-width: var(--measure-intro, 54rem);
  margin-inline: auto;
  text-align: center;
  text-wrap: balance;
}
html body #mis-fr1 > .ics-frow__in,
html body #mis-fr2 > .ics-frow__in {
  width: var(--container-w, 87.5%) !important;
  max-width: var(--container-max, 1440px) !important;
  margin-inline: auto !important;
  box-sizing: border-box !important;
}
@media (max-width: 991px) {
  html body #mis-fr1 .ics-frow__txt,
  html body #mis-fr2 .ics-frow__txt {
    padding-inline: calc((100% - var(--container-w, 87.5%)) / 2) !important;
  }
}
html body section#mis-s3#mis-s3 #vs-stage {
  width: var(--container-w, 87.5%) !important;
  max-width: var(--container-max, 1440px) !important;
  min-width: 0 !important;
  margin-inline: auto !important;
  padding-inline: 0 !important;
  box-sizing: border-box !important;
}

/* H48 mission hero yellow (2026-11-05, owner: "make this hero Yellow all the way to top"). Pages 133 + 2903.
   The hero text block (section.ics-hero--text, cream before) and the collage band (#mis-banner.ics-hero--band) read as ONE yellow field:
   - hero paints the yellow + halftone from the top of the page (bleeds above y=0, so no cream strip under the fixed header); its top torn edge is gone.
   - collage band keeps only its torn BOTTOM edge (band-torn-bottom.svg, same technique as .ics-band-torn--bottom).
   - dot grids meet at the hero/band junction: hero dots anchored to its bottom edge, band dots to its top edge (6px grid, layers 0 and 3px), so the phase is continuous.
   Tokens: --yellow-500 (colour), --ht-img (halftone). No hard-coded colours. */
html body.page-id-133 section.ics-hero--text.ics-hero,
html body.page-id-2903 section.ics-hero--text.ics-hero {
  background-color: transparent !important;
  background-image: none !important;
  isolation: isolate !important;
}
html body.page-id-133 section.ics-hero--text.ics-hero::before,
html body.page-id-2903 section.ics-hero--text.ics-hero::before {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  top: -240px !important;
  right: 0 !important;
  bottom: 0 !important;
  left: 0 !important;
  z-index: -1 !important;
  pointer-events: none !important;
  background-color: var(--yellow-500) !important;
  background-image: var(--ht-img) !important;
  background-size: 6px 6px !important;
  background-position: left 0 bottom 0, left 3px bottom 3px !important;
  background-repeat: repeat !important;
}
html body.page-id-133 #mis-banner.ics-hero--band::before,
html body.page-id-2903 #mis-banner.ics-hero--band::before {
  top: 0 !important;
  height: calc(100% + 14px) !important;
  -webkit-mask: url("/wp-content/uploads/ics-hero/band-torn-bottom.svg") 0 100% / 100% 140px no-repeat, linear-gradient(#000, #000) 0 0 / 100% calc(100% - 140px) no-repeat !important;
  mask: url("/wp-content/uploads/ics-hero/band-torn-bottom.svg") 0 100% / 100% 140px no-repeat, linear-gradient(#000, #000) 0 0 / 100% calc(100% - 140px) no-repeat !important;
}

/* H123 C20 (2026-11-11, Figma 2133:2838 + 2136:16794 + 2136:16798): mission rows #mis-fr1/#mis-fr2 follow the design frame 1440. Desktop: container min(1312px, 100% - 128px), image 752x600, text 528, gap 32 (same numbers as ics-activities.css C18); --right row swaps the columns; band = design vector aspect (1237x506 pink, 1237x480 blue), flat colour (no halftone). Overrides the H28 87.5 percent container on >=992 only. Quote lines 32/40 italic as in the design (2166:26244). */
@media (min-width:992px) {
html body #mis-fr1 > .ics-frow__in, html body #mis-fr2 > .ics-frow__in { width:min(1312px, calc(100% - 128px)) !important; max-width:1312px !important; }
html body #mis-fr2 > .ics-frow__in { grid-template-columns:minmax(0,528fr) minmax(0,752fr) !important; }
html body #mis-fr1 .ics-quote, html body #mis-fr2 .ics-quote { font-size:32px !important; line-height:40px !important; font-style:italic !important; }
}
html body #mis-fr1 > .ics-frow__band, html body #mis-fr2 > .ics-frow__band { background-image:none !important; }
html body #mis-fr1 > .ics-frow__band { aspect-ratio:1237 / 506 !important; }
html body #mis-fr2 > .ics-frow__band { aspect-ratio:1237 / 480 !important; }