/* V234 — Consistent editorial hero descriptions and uncropped hero media.
   The CMS Hero descriptions role controls the paragraphs. The right panel
   remains fully occupied; an uncropped foreground is placed above a softly
   blurred copy so no portrait/footage details are cropped out. */

/* Long About Us story titles can use all available width, rather than the
   former fixed 24-character text measure. Percent columns previously exceeded
   the grid's width after adding a column gap. */
@media (min-width:901px) {
  body[data-design-system="2026"] main#main .on[data-p="about"] .about-origin-container {
    grid-template-columns: minmax(0, 36fr) minmax(0, 64fr) !important;
    gap: clamp(25px,3.2vw,56px) !important;
  }
}
body[data-public-design][data-design-system="2026"] main#main .on[data-p="about"] .about-origin-copy h2 {
  max-width: none !important;
  width: 100% !important;
  text-wrap: pretty !important;
  overflow-wrap: normal;
  letter-spacing: -.01em !important;
}

/* All five hero descriptions now share an editable CMS role. Its default is
   exactly the ordinary 17px / 16px Inter body style instead of a condensed,
   bold display font. H1 titles, kickers and buttons keep their own hierarchy. */
body[data-public-design][data-design-system="2026"] main#main .on[data-p="home"] > .hero .hero-copy > p.hero-summary,
body[data-public-design][data-design-system="2026"] main#main .on[data-p="about"] > .about-hero .about-hero-copy > p:not(.eyebrow),
body[data-public-design][data-design-system="2026"] main#main .on[data-p="standards"] > .standards-hero .standards-hero-copy > p:not(.eyebrow),
body[data-public-design][data-design-system="2026"] main#main .on[data-p="careers"] > .careers-hero-v188 .careers-hero-copy > p:not(.eyebrow),
body[data-public-design][data-design-system="2026"] main#main .on[data-p="partner"] > .partner-hero-v196 .partner-hero-copy > p:not(.partner-hero-kicker) {
  font-family: var(--helprite-hero-copy-font,var(--helprite-font-body,Inter,sans-serif)) !important;
  font-size: var(--helprite-hero-copy-size,17px) !important;
  font-weight: var(--helprite-hero-copy-weight,400) !important;
  line-height: var(--helprite-hero-copy-line-height,1.58) !important;
  letter-spacing: var(--helprite-hero-copy-tracking,0em) !important;
  text-transform: none !important;
  max-width: 63ch !important;
  text-wrap: pretty;
}
body[data-public-design][data-design-system="2026"] main#main .on[data-p="home"] > .hero .hero-copy > p.hero-summary {
  max-width: 56ch !important;
}
body[data-public-design][data-design-system="2026"] main#main .on[data-p="careers"] .careers-hero-copy > h2 {
  margin-bottom: clamp(12px,1.5vw,20px) !important;
}
body[data-public-design][data-design-system="2026"] main#main .on[data-p="careers"] .careers-hero-copy > p + p,
body[data-public-design][data-design-system="2026"] main#main .on[data-p="about"] .about-hero-copy > p + p {
  margin-top: 2px !important;
}

/* Keep the uncropped foreground positioned inside its own hero panel on
   BOTH desktop and mobile. Without this containing block an absolute child
   can escape the mobile grid and cover the text. */
body[data-design-system="2026"] main#main .on[data-p="about"] .about-hero-media,
body[data-design-system="2026"] main#main .on[data-p="standards"] .standards-hero-media,
body[data-design-system="2026"] main#main .on[data-p="careers"] .careers-hero-media,
body[data-design-system="2026"] main#main .on[data-p="partner"] .partner-hero-media {
  position: relative !important;
  isolation: isolate;
}

/* The right-hand media's existing cover background provides a visually full
   backdrop. Its foreground pseudo-element displays the entire ORIGINAL image
   with contain, preserving people and image edges even when aspect ratios differ.
   The backdrop is softened to avoid distracting repeated edges. */
body[data-design-system="2026"] main#main .on[data-p="about"] .about-hero-image,
body[data-design-system="2026"] main#main .on[data-p="standards"] .standards-hero-image,
body[data-design-system="2026"] main#main .on[data-p="careers"] .careers-hero-image,
body[data-design-system="2026"] main#main .on[data-p="partner"] .partner-hero-image {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  overflow: hidden !important;
  isolation: isolate;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
}
body[data-design-system="2026"] main#main .on[data-p="about"] .about-hero-image::before,
body[data-design-system="2026"] main#main .on[data-p="standards"] .standards-hero-image::before,
body[data-design-system="2026"] main#main .on[data-p="careers"] .careers-hero-image::before,
body[data-design-system="2026"] main#main .on[data-p="partner"] .partner-hero-image::before {
  content: "" !important;
  display: block !important;
  position: absolute;
  z-index: 1;
  inset: -1px;
  background: rgba(16,44,77,.24);
  -webkit-backdrop-filter: blur(27px) saturate(.75);
  backdrop-filter: blur(27px) saturate(.75);
  pointer-events: none;
}
body[data-design-system="2026"] main#main .on[data-p="about"] .about-hero-image::after,
body[data-design-system="2026"] main#main .on[data-p="standards"] .standards-hero-image::after,
body[data-design-system="2026"] main#main .on[data-p="careers"] .careers-hero-image::after,
body[data-design-system="2026"] main#main .on[data-p="partner"] .partner-hero-image::after {
  content: "" !important;
  display: block !important;
  position: absolute;
  z-index: 2;
  inset: 0;
  background-image: inherit !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  background-size: contain !important;
  pointer-events: none;
}

/* A separately rendered poster under the video provides visual coverage,
   while the actual footage is no longer zoom-cropped. */
body[data-design-system="2026"] main#main .on[data-p="home"] .hero-video-frame {
  isolation: isolate;
  background: #173454 !important;
}
body[data-design-system="2026"] main#main .on[data-p="home"] .hero-video-frame > .hero-video-backdrop {
  position: absolute !important;
  inset: -4% !important;
  z-index: 0;
  width: 108% !important;
  height: 108% !important;
  min-height: 0 !important;
  max-width: none !important;
  object-fit: cover !important;
  filter: blur(12px) brightness(.76) saturate(.9);
  pointer-events: none;
}
body[data-design-system="2026"] main#main .on[data-p="home"] .hero-video-frame > :is(video.hero-feature-video,img.hero-video-placeholder) {
  position: absolute !important;
  inset: 0 !important;
  z-index: 2;
  width: 100% !important;
  height: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  min-height: 0 !important;
  max-height: none !important;
  object-fit: contain !important;
  object-position: center !important;
  background: transparent !important;
}

/* On short desktops the first-screen trust row still takes priority. Instead
   of condensed copy, retain the same typeface with a small responsive size
   ceiling to keep headings, descriptions and primary actions visible. */
@media(min-width:901px) and (max-height:720px) {
  body[data-public-design][data-design-system="2026"] main#main .on[data-p="home"] > .hero .hero-copy > p.hero-summary,
  body[data-public-design][data-design-system="2026"] main#main .on[data-p="about"] > .about-hero .about-hero-copy > p:not(.eyebrow),
  body[data-public-design][data-design-system="2026"] main#main .on[data-p="standards"] > .standards-hero .standards-hero-copy > p:not(.eyebrow),
  body[data-public-design][data-design-system="2026"] main#main .on[data-p="careers"] > .careers-hero-v188 .careers-hero-copy > p:not(.eyebrow),
  body[data-public-design][data-design-system="2026"] main#main .on[data-p="partner"] > .partner-hero-v196 .partner-hero-copy > p:not(.partner-hero-kicker) {
    font-size: min(var(--helprite-hero-copy-size,17px),16px) !important;
    line-height: 1.48 !important;
    margin-bottom: 10px !important;
  }
}

/* Mobile: keep the whole source visible and avoid stretching/cropping frames.
   The video aspect ratio is filled in from its metadata where possible. */
@media(max-width:900px) {
  body[data-public-design][data-design-system="2026"] main#main .on[data-p="home"] > .hero .hero-copy > p.hero-summary,
  body[data-public-design][data-design-system="2026"] main#main .on[data-p="about"] > .about-hero .about-hero-copy > p:not(.eyebrow),
  body[data-public-design][data-design-system="2026"] main#main .on[data-p="standards"] > .standards-hero .standards-hero-copy > p:not(.eyebrow),
  body[data-public-design][data-design-system="2026"] main#main .on[data-p="careers"] > .careers-hero-v188 .careers-hero-copy > p:not(.eyebrow),
  body[data-public-design][data-design-system="2026"] main#main .on[data-p="partner"] > .partner-hero-v196 .partner-hero-copy > p:not(.partner-hero-kicker) {
    font-size: var(--helprite-hero-copy-mobile-size,16px) !important;
    line-height: var(--helprite-hero-copy-line-height,1.58) !important;
  }
  body[data-design-system="2026"] main#main .on[data-p="home"] .hero-video-frame {
    aspect-ratio: var(--helprite-source-aspect,1.6) !important;
    max-width: 100% !important;
    max-height: none !important;
    min-height: 0 !important;
    border-radius: 0 !important;
  }
  body[data-design-system="2026"] main#main .on[data-p="home"] .hero-stage,
  body[data-design-system="2026"] main#main .on[data-p="about"] .about-hero-media,
  body[data-design-system="2026"] main#main .on[data-p="standards"] .standards-hero-media,
  body[data-design-system="2026"] main#main .on[data-p="careers"] .careers-hero-media,
  body[data-design-system="2026"] main#main .on[data-p="partner"] .partner-hero-media {
    border-radius: 0 !important;
    overflow: hidden !important;
  }
  body[data-design-system="2026"] main#main .on[data-p="about"] .about-hero-media,
  body[data-design-system="2026"] main#main .on[data-p="standards"] .standards-hero-media,
  body[data-design-system="2026"] main#main .on[data-p="careers"] .careers-hero-media,
  body[data-design-system="2026"] main#main .on[data-p="partner"] .partner-hero-media {
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    aspect-ratio: var(--helprite-media-aspect,1.6) !important;
  }

  /* The image fills the full mobile viewport width, not a narrow inset card. */
  body[data-design-system="2026"] main#main .on[data-p="home"] .hero-stage,
  body[data-design-system="2026"] main#main .on[data-p="about"] .about-hero-media,
  body[data-design-system="2026"] main#main .on[data-p="standards"] .standards-hero-media,
  body[data-design-system="2026"] main#main .on[data-p="careers"] .careers-hero-media,
  body[data-design-system="2026"] main#main .on[data-p="partner"] .partner-hero-media {
    width: calc(100% + 2 * var(--gutter,20px)) !important;
    max-width: none !important;
    margin-left: calc(-1 * var(--gutter,20px)) !important;
    margin-right: 0 !important;
  }
}