/* R3.17: Susen's supplied 1 November headers. Scoped to these five pages.
   Wide source pictures remain unaltered and are never cropped around people. */
.page-hero.oc-r317-hero {
  position: relative; isolation: isolate; display: block;
  width: 100%; max-width: none; margin: 0; padding: 0 !important;
  overflow: hidden; background: var(--oc-r317-hero-surface, #f6f6f6);
}
.oc-r317-hero > .hero-image {
  display: block; position: absolute !important; inset: auto 0 0 !important;
  z-index: 0 !important; width: 100%; height: auto !important;
  max-height: none; min-height: 0; margin: 0; padding: 0;
  border: 0; border-radius: 0; aspect-ratio: 2048 / 603; overflow: hidden;
}
.oc-r317-hero > .hero-image picture,
.oc-r317-hero > .hero-image img {
  display: block; width: 100%; height: auto !important;
  min-height: 0; max-height: none; aspect-ratio: 2048 / 603;
  object-fit: contain !important; object-position: center bottom; border-radius: 0;
}
/* Override R3.8 functional-page 12rem limits without changing image positioning
   or the responsive text/image order below. */
.page-hero.oc-r317-hero > .hero-image,
.page-hero.oc-r317-hero > .hero-image picture,
.page-hero.oc-r317-hero > .hero-image img {
  height: auto !important;
  max-height: none !important;
}
.oc-r317-hero > .hero-image::after { display: none !important; }
.oc-r317-hero > .hero-grid {
  position: relative; z-index: 1; display: flex; align-items: center;
  width: calc(100% - 4rem); max-width: 77.5rem;
  min-height: clamp(25rem, 29.4434vw, 39rem) !important;
  padding: 2.5rem 0 !important; margin-inline: auto;
}
.oc-r317-hero .hero-copy {
  display: flex; flex-direction: column; align-items: flex-start;
  width: 51% !important; max-width: 39rem !important; min-width: 0; gap: 1.15rem;
}
.oc-r317-hero .hero-copy h1 {
  font-family: "Open Sans", Arial, sans-serif; font-weight: 400;
  font-size: clamp(2rem, 3.1vw, 3rem); line-height: 1.22;
  letter-spacing: -.025em; max-width: 25ch; margin: 0; text-wrap: balance;
  word-break: normal; overflow-wrap: break-word; hyphens: auto;
}
.oc-r317-hero .hero-copy .eyebrow { margin: 0; font-weight: 400; }
.oc-r317-hero .hero-copy .lead,
#P010 .oc-r317-hero .hero-copy .oc-r310-intro {
  margin: 0; max-width: 48ch; font: 400 1.125rem/1.7 "Open Sans", Arial, sans-serif;
  color: #445a68;
}
/* The complaints introduction and navigator form one continuous blue surface.
   #243949 is sampled from Susen's new source, not a global CI replacement. */
#P010 .oc-r317-hero,
#P010 .oc-r317-hero + .oc-navigator-panel { background: #243949; color: #fff; }
#P010 .oc-r317-hero .hero-copy h1,
#P010 .oc-r317-hero .hero-copy .eyebrow,
#P010 .oc-r317-hero .hero-copy .lead,
#P010 .oc-r317-hero .hero-copy .oc-r310-intro,
#P010 .oc-r317-hero .hero-copy a { color: #fff; }
#P010 .oc-r317-hero .hero-copy a:focus-visible {
  outline: 3px solid #f38b1c; outline-offset: 5px;
}
#P010 .oc-r317-hero + .oc-navigator-panel { padding-top: 1.5rem; }
/* Susen 01 November, 22:06: use supplied mobile originals below the copy. */
@media (max-width: 48rem) {
  .page-hero.oc-r317-hero { display: flex; flex-direction: column; }
  .oc-r317-hero > .hero-grid {
    order: 0; width: calc(100% - 2rem); min-height: 0 !important;
    padding: 2rem 0 1.25rem !important;
  }
  .oc-r317-hero .hero-copy { width: 100% !important; max-width: none !important; }
  .oc-r317-hero .hero-copy h1 { font-size: 2rem; max-width: 28ch; }
  .oc-r317-hero .hero-copy .lead,
  #P010 .oc-r317-hero .hero-copy .oc-r310-intro { font-size: 1.0625rem; }
  .oc-r317-hero > .hero-image {
    position: relative !important; inset: auto !important; order: 1;
  }
}
/* The existing large-text preference also uses the uncropped mobile layout. */
body.oc-large-text .page-hero.oc-r317-hero { display: flex; flex-direction: column; }
body.oc-large-text .oc-r317-hero > .hero-grid { order: 0; min-height: 0 !important; }
body.oc-large-text .oc-r317-hero .hero-copy { width: 100% !important; max-width: 60rem !important; }
body.oc-large-text .oc-r317-hero > .hero-image {
  position: relative !important; inset: auto !important; order: 1;
}
@media print {
  .page-hero.oc-r317-hero { background: #fff !important; color: #000 !important; }
  .oc-r317-hero > .hero-image { display: none !important; }
  .oc-r317-hero > .hero-grid { min-height: 0 !important; padding: 1rem 0 !important; }
  .oc-r317-hero .hero-copy { width: 100% !important; max-width: none !important; }
  #P010 .oc-r317-hero .hero-copy h1,
  #P010 .oc-r317-hero .hero-copy .eyebrow,
  #P010 .oc-r317-hero .hero-copy .lead,
  #P010 .oc-r317-hero .hero-copy .oc-r310-intro,
  #P010 .oc-r317-hero .hero-copy a { color: #000 !important; }
}


/* R3.19: preserve original mobile framing; no overlay or fixed crop. */
@media screen and (max-width: 48rem) {
  .page-hero.oc-r317-hero > .hero-image,
  .page-hero.oc-r317-hero > .hero-image picture,
  .page-hero.oc-r317-hero > .hero-image img {
    aspect-ratio: 1080 / 754;
    height: auto !important;
  }
}
/* A quiet one-pixel boundary between the supplied header and content surfaces. */
#P060 .page-hero.oc-r317-hero,
#P070 .page-hero.oc-r317-hero,
#P120 .page-hero.oc-r317-hero { border-bottom: 1px solid #445a68; }
/* Space between the subheading and the first row of service cards. */
#P120 .oc-r38-service-support > h2 { margin: 0 0 1.5rem; }
/* Scale the supplied negative logo, keeping its original proportions and colours. */
.footer .footer-static-logo.oc-negative-logo { width: 12rem; max-width: 100%; height: auto; }
@media (max-width: 48rem) {
  .footer .footer-static-logo.oc-negative-logo { width: 10.5rem; }
}