/* ics-frow (2026-11-04): reusable feature row. Figma 760:7272 rows: 1440 frame, row 728 high, collage 752x600, text column 528, gap 32, band 1237x568 (85.9%) bleeding to the viewport edge, halftone dots over the colour. Classes: section.ics-frow + --left (collage left, band right) or --right (collage right, band left), colour --yellow|--blue|--pink, shape --s1..--s4 (band-N.svg masks). Children: .ics-frow__band, .ics-frow__in > .ics-frow__fig + .ics-frow__txt (.ics-frow__h, .ics-frow__copy). <992: stacked, image first, band behind the text. Loaded by mu-plugin ics-frow.php (priority 125). */
:root {
  --frow-yellow: #FFEF6B;
  --frow-blue: #A1BFFB;
  --frow-pink: #FFC7E5;
  --frow-ink: #302f29;
  --frow-dot: rgba(40, 30, 10, 0.10);
}
html body section.ics-frow--yellow { --frow-c: var(--frow-yellow); }
html body section.ics-frow--blue { --frow-c: var(--frow-blue); }
html body section.ics-frow--pink { --frow-c: var(--frow-pink); }
html body section.ics-frow--s1 { --frow-mask: url(/wp-content/uploads/ics-hero/frow-band-1.svg); }
html body section.ics-frow--s2 { --frow-mask: url(/wp-content/uploads/ics-hero/frow-band-2.svg); }
html body section.ics-frow--s3 { --frow-mask: url(/wp-content/uploads/ics-hero/frow-band-3.svg); }
html body section.ics-frow--s4 { --frow-mask: url(/wp-content/uploads/ics-hero/frow-band-4.svg); }
html body section.ics-frow {
  position: relative !important; box-sizing: border-box !important; display: block !important;
  width: 100% !important; min-height: 728px !important; height: auto !important; margin: 0 !important; padding: 0 !important;
  border: 0 !important; overflow: hidden !important; background: var(--cream, #faf6ed) !important; box-shadow: none !important;
}
html body section.ics-frow > .ics-frow__band {
  position: absolute !important; z-index: 0 !important; top: 50% !important; bottom: auto !important; left: auto !important; right: 0 !important;
  width: 85.9% !important; height: auto !important; aspect-ratio: 1237 / 568 !important; transform: translateY(-50%) !important; margin: 0 !important;
  pointer-events: none !important; box-sizing: border-box !important; border: 0 !important;
  background-color: var(--frow-c) !important;
  background-image: radial-gradient(circle at center, var(--frow-dot) 0 0.9px, transparent 1.2px), radial-gradient(circle at center, var(--frow-dot) 0 0.9px, transparent 1.2px) !important;
  background-size: 6px 6px !important; background-position: 0 0, 3px 3px !important; background-repeat: repeat !important;
  -webkit-mask: var(--frow-mask) center / 100% 100% no-repeat !important; mask: var(--frow-mask) center / 100% 100% no-repeat !important;
}
html body section.ics-frow--right > .ics-frow__band { left: 0 !important; right: auto !important; }
html body section.ics-frow > .ics-frow__in {
  position: relative !important; z-index: 1 !important; box-sizing: border-box !important; display: grid !important;
  grid-template-columns: minmax(0, 752fr) minmax(0, 528fr) !important; column-gap: 32px !important; align-items: center !important;
  width: var(--container-w,87.5%) !important; max-width: var(--container-max,1440px) !important; min-height: 728px !important; margin: 0 auto !important; padding: 0 !important;
}
html body section.ics-frow .ics-frow__fig { grid-column: 1 !important; grid-row: 1 !important; margin: 0 !important; padding: 0 !important; width: 100% !important; min-width: 0 !important; }
html body section.ics-frow--right .ics-frow__fig { grid-column: 2 !important; }
html body section.ics-frow .ics-frow__fig img { display: block !important; width: 100% !important; height: auto !important; max-width: none !important; aspect-ratio: 752 / 600 !important; object-fit: cover !important; }
html body section.ics-frow .ics-frow__txt { grid-column: 2 !important; grid-row: 1 !important; min-width: 0 !important; display: flex !important; flex-direction: column !important; justify-content: center !important; gap: 16px !important; margin: 0 !important; padding: 0 !important; text-align: left !important; }
html body section.ics-frow--right .ics-frow__txt { grid-column: 1 !important; }
html body section.ics-frow .ics-frow__h { font-family: 'EB Garamond', Georgia, serif !important; font-size: 48px !important; line-height: 56px !important; font-weight: 600 !important; color: var(--frow-ink) !important; margin: 0 !important; padding: 0 !important; border: 0 !important; overflow-wrap: anywhere !important; }
html body section.ics-frow .ics-frow__copy { display: flex !important; flex-direction: column !important; gap: 4px !important; margin: 0 !important; padding: 0 !important; }
html body section.ics-frow .ics-frow__copy p { font-family: Inter, system-ui, sans-serif !important; font-size: 16px !important; line-height: 24px !important; letter-spacing: -0.08px !important; color: var(--frow-ink) !important; margin: 0 !important; max-width: var(--measure-intro,54rem); }
@media (max-width: 991px) {
  html body section.ics-frow { display: grid !important; grid-template-columns: minmax(0, 1fr) !important; grid-template-areas: 'fig' 'txt' !important; row-gap: 0 !important; min-height: 0 !important; padding: 48px 0 !important; }
  html body section.ics-frow > .ics-frow__in { display: contents !important; }
  html body section.ics-frow > .ics-frow__band { display: none !important; }
  html body section.ics-frow .ics-frow__fig, html body section.ics-frow--right .ics-frow__fig { grid-area: fig !important; grid-column: auto !important; grid-row: auto !important; position: relative !important; z-index: 1 !important; width: var(--container-w,87.5%) !important; padding: 0 !important; margin: 0 auto -32px !important; }
  html body section.ics-frow .ics-frow__txt, html body section.ics-frow--right .ics-frow__txt { grid-area: txt !important; grid-column: auto !important; grid-row: auto !important; position: relative !important; isolation: isolate !important; padding: 56px calc((100% - var(--container-w,87.5%)) / 2) 64px !important; margin: 0 !important; min-height: 400px !important; }
  html body section.ics-frow .ics-frow__txt::before { content: '' !important; display: block !important; position: absolute !important; top: 0 !important; bottom: 0 !important; left: 0 !important; right: 0 !important; z-index: 0 !important; pointer-events: none !important; background-color: var(--frow-c) !important; background-image: radial-gradient(circle at center, var(--frow-dot) 0 0.9px, transparent 1.2px), radial-gradient(circle at center, var(--frow-dot) 0 0.9px, transparent 1.2px) !important; background-size: 6px 6px !important; background-position: 0 0, 3px 3px !important; background-repeat: repeat !important; -webkit-mask-image: url('/wp-content/uploads/ics-hero/band-torn-top.svg'), url('/wp-content/uploads/ics-hero/band-torn-bottom.svg'), linear-gradient(#000, #000) !important; mask-image: url('/wp-content/uploads/ics-hero/band-torn-top.svg'), url('/wp-content/uploads/ics-hero/band-torn-bottom.svg'), linear-gradient(#000, #000) !important; -webkit-mask-size: 100% 140px, 100% 140px, 100% calc(100% - 280px) !important; mask-size: 100% 140px, 100% 140px, 100% calc(100% - 280px) !important; -webkit-mask-position: 0 0, 0 100%, 0 140px !important; mask-position: 0 0, 0 100%, 0 140px !important; -webkit-mask-repeat: no-repeat !important; mask-repeat: no-repeat !important; }
  html body section.ics-frow .ics-frow__txt > * { position: relative !important; z-index: 1 !important; }
  html body section.ics-frow .ics-frow__h { font-size: 32px !important; line-height: 40px !important; }
}