/*
 * A code component's Shadow DOM doesn't inherit the prototype's global
 * resets (box-sizing) — see the same note in ../PageHero/PageHero.module.css.
 */
.tWLr_uk6K8l4tgj9VLC9,
.tWLr_uk6K8l4tgj9VLC9 *,
.tWLr_uk6K8l4tgj9VLC9 *::before,
.tWLr_uk6K8l4tgj9VLC9 *::after {
  box-sizing: border-box;
}

/*
 * The hero: the service pages' light one. Room above for the floating header
 * and below as the Page Hero has it; at least the art's shape (2000 × 680),
 * growing with the window until about 2360px wide (802px tall), then holding.
 * The text is centered down it.
 */
.tWLr_uk6K8l4tgj9VLC9 {
  --pad-top: clamp(150px, 13.95vw, 241px);
  --pad-bottom: clamp(64px, 6vw, 104px);
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: min(34vw, 802px);
  padding: var(--pad-top) var(--page-gutter) var(--pad-bottom);
  /* The art stops at the hero's foot. */
  overflow: clip;
  background: #fff;
  color: var(--text-primary);
  font-family: var(--type-family-base, 'Raleway', system-ui, sans-serif);
}

/* The art, edge to edge, behind the text: a custom image covers the box; the pattern (an SVG) covers it, held to its lower right (the author and the shapes), on phones and takes the board's own shape from tablets up (below). */
.UB5KQLw1yKxwk_h3TgVS {
  position: absolute;
  inset: 0;
  z-index: -1;
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/* A custom image (the pattern's SVG fits itself): covering the box, held to its lower right. */
/* The ultra-wide cap below is for the generated board only: it puts the head at a fixed share of the board's height. A custom banner is the designer's own picture (it may be opaque), so it keeps filling the hero's width; its author sits where the designer put them (about 42px under the floating header at 3440 with the recommended 4000 x 1360 image). */
img.UB5KQLw1yKxwk_h3TgVS {
  object-fit: cover;
  object-position: 100% 100%;
}

/*
 * From tablets up the pattern keeps the board's own shape (2000 × 680, see ../../shared/InsightArt/boards.ts) at the full width of the
 * hero, held to its foot. A covering crop would trim the board's left side whenever the title wraps (the hero is then taller than
 * 2000:680) and push shapes under the heading; this way the left 60% stays free of shapes at any height, and one board serves every
 * width. Above the board is plain white. (A custom image still covers the box.)
 */
@media (min-width: 768px) {
  svg.UB5KQLw1yKxwk_h3TgVS {
    inset: auto 0 0 auto;
    height: auto;
    /* No taller than the hero stops growing (802px, see .hero's min-height): 802 / (680 / 2000). On a wider window the art stays this size, held to the right, so the board's top never rises above the hero and the head stays clear of the floating header. */
    max-width: calc(802px / 0.34);
  }
}

/* The title: Heading XL, Light, its bold words Medium, up to 13em wide. */
.IgNHj03g_siLpGTOFpc9 {
  max-width: 13em;
  margin: 0;
  font-size: var(--type-heading-xl-size);
  font-weight: var(--type-heading-xl-weight);
  line-height: var(--type-heading-xl-lh);
  letter-spacing: var(--type-heading-xl-ls);
  text-wrap: balance;
  /* WordReveal's words are inline-blocks: only `anywhere` lets one very long word shrink and wrap instead of being clipped. */
  overflow-wrap: anywhere;
}

.IgNHj03g_siLpGTOFpc9 strong {
  font-weight: 500;
}

/* The topic under the title: Utility / Eyebrow Small in a 1px soft-black outline, only as wide as its words. */
.C994xsSoGQntTKz6b7pm {
  align-self: flex-start;
  max-width: 100%;
  margin: max(14px, 1.27vw) 0 0;
  padding: 4px 10px;
  border: 1px solid var(--text-primary);
  color: var(--text-primary);
  font-size: var(--type-eyebrow-small-size);
  font-weight: var(--type-eyebrow-small-weight);
  line-height: var(--type-eyebrow-small-lh);
  letter-spacing: var(--type-eyebrow-small-ls);
  text-transform: uppercase;
  overflow-wrap: anywhere;
}

/* The byline under the topic (Body / Default): the author and role, then under it the date. */
.mikmd4SzN5VdIk0LX8RA {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: max(14px, 1.27vw) 0 0;
  color: var(--neutral-700);
  font-size: var(--type-default-size);
  line-height: var(--type-default-lh);
  overflow-wrap: anywhere;
}

.mikmd4SzN5VdIk0LX8RA p {
  margin: 0;
}

/* The author and role a size up, Body / Large (the date stays Default). */
.rb3Rf6RfKbBY6UKpMC3P {
  font-size: var(--type-large-size);
  line-height: var(--type-large-lh);
  letter-spacing: var(--type-large-ls);
}

.mikmd4SzN5VdIk0LX8RA strong {
  color: var(--text-primary);
  font-weight: 600;
}

/* From tablets up the art shares the hero with the text: keep the title, topic and byline to the left 60%, the side the art leaves free of shapes. */
@media (min-width: 768px) {
  .IgNHj03g_siLpGTOFpc9 {
    max-width: min(13em, 60%);
  }

  .C994xsSoGQntTKz6b7pm,
  .mikmd4SzN5VdIk0LX8RA {
    max-width: 60%;
  }
}

/* Phones: the art under the text, the hero's full width, cropped to its lower right (the author). */
@media (max-width: 767px) {
  .tWLr_uk6K8l4tgj9VLC9 {
    min-height: 0;
  }

  .UB5KQLw1yKxwk_h3TgVS {
    order: 1;
    position: static;
    width: calc(100% + 2 * var(--page-gutter));
    height: 280px;
    /* Bleeds through the hero's bottom padding, which stays for a hero with no art. */
    margin: 32px calc(-1 * var(--page-gutter)) calc(-1 * var(--pad-bottom));
  }
}