/*
 * Unified content-page hero system
 *
 * The page families keep their own imagery, palette and decorative details.
 * This final stylesheet only normalizes the desktop information structure and
 * the About / Contact mobile variants to the approved website-production hero.
 */

@media (min-width: 681px) {
  body[data-site-section] {
    --content-hero-height: clamp(720px, calc(100svh - 72px), 920px);
    --content-hero-inline: max(64px, calc((100vw - 1720px) / 2 + 64px));
    --content-hero-copy-top: clamp(240px, 31vh, 282px);
    --content-hero-topline-top: clamp(38px, 5vh, 45px);
    --content-hero-copy-width: min(76.4%, 55rem);
  }

  body[data-site-section] main#main :is(
    .marketing-hero,
    .search-service-hero,
    .us-editorial-hero,
    .reg-hero,
    .wp-hero,
    .un-hero,
    .at-hero,
    .av-hero-stage,
    .cb-hero,
    .cp-hero,
    .ev-hero,
    .sf-hero,
    .about-hero,
    .contact-hero
  ) {
    box-sizing: border-box;
    height: var(--content-hero-height);
    min-height: var(--content-hero-height);
    max-height: var(--content-hero-height);
  }

  body[data-site-section] main#main :is(
    .us-editorial-hero-copy,
    .reg-hero-copy,
    .wp-hero-copy,
    .un-hero-copy,
    .at-hero-copy,
    .av-hero-copy,
    .cb-hero-copy,
    .cp-hero-copy,
    .ev-hero-copy,
    .sf-hero-copy,
    .about-hero-copy,
    .contact-hero-copy
  ) {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 3;
    display: flex;
    box-sizing: border-box;
    width: calc(var(--content-hero-copy-width) + (var(--content-hero-inline) * 2));
    max-width: calc(55rem + (var(--content-hero-inline) * 2));
    min-width: 0;
    height: 100%;
    min-height: 100%;
    align-items: flex-start;
    justify-content: flex-start;
    flex-direction: column;
    padding: var(--content-hero-copy-top) var(--content-hero-inline) 56px;
    animation: none;
    opacity: 1;
    transform: none;
  }

  body[data-site-section] main#main :is(
    .us-editorial-hero-copy,
    .reg-hero-copy,
    .wp-hero-copy,
    .un-hero-copy,
    .at-hero-copy,
    .av-hero-copy,
    .cb-hero-copy,
    .cp-hero-copy,
    .ev-hero-copy,
    .sf-hero-copy,
    .about-hero-copy,
    .contact-hero-copy
  ) > :is(.service-hero-heading, .service-hero-details) {
    display: block;
    width: 100%;
  }

  body[data-site-section] main#main :is(
    .us-editorial-hero,
    .reg-hero,
    .wp-hero,
    .un-hero,
    .at-hero,
    .av-hero,
    .cb-hero,
    .cp-hero,
    .ev-hero,
    .sf-hero
  ) .service-hero-heading {
    position: relative;
  }

  body[data-site-section] main#main :is(
    .us-editorial-hero,
    .reg-hero,
    .wp-hero,
    .un-hero,
    .at-hero,
    .av-hero,
    .cb-hero,
    .cp-hero,
    .ev-hero,
    .sf-hero
  ) .service-hero-heading::before,
  body[data-site-section] main#main :is(.about-hero, .contact-hero) .service-hero-heading::before {
    position: absolute;
    top: calc(var(--content-hero-topline-top) - var(--content-hero-copy-top));
    left: 0;
    display: block;
    width: calc(100vw - (var(--content-hero-inline) * 2));
    padding-bottom: 24px;
    border-bottom: 1px solid currentColor;
    color: currentColor;
    content: "MANPRPOWER / SERVICES";
    font-family: var(--font-sans);
    font-size: 10px;
    font-weight: 850;
    letter-spacing: 0.18em;
    line-height: 1.45;
    opacity: 0.72;
  }

  body[data-site-section] main#main :is(
    .marketing-hero,
    .search-service-hero,
    .us-editorial-hero,
    .reg-hero,
    .wp-hero,
    .un-hero,
    .at-hero,
    .av-hero,
    .cb-hero,
    .cp-hero,
    .ev-hero,
    .sf-hero,
    .about-hero,
    .contact-hero
  ) .service-hero-heading > p:first-child {
    margin: 0;
    font-family: var(--font-sans);
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 0.17em;
    line-height: 1.45;
  }

  body[data-site-section] main#main :is(
    .marketing-hero,
    .search-service-hero,
    .us-editorial-hero,
    .reg-hero,
    .wp-hero,
    .un-hero,
    .at-hero,
    .av-hero,
    .cb-hero,
    .cp-hero,
    .ev-hero,
    .sf-hero,
    .about-hero,
    .contact-hero
  ) .service-hero-heading h1 {
    width: 100%;
    max-width: 52.5rem;
    min-height: 0;
    margin: 24px 0 0;
    font-family: var(--font-serif);
    font-size: clamp(46px, 5.6vw, 88px);
    font-weight: 900;
    letter-spacing: -0.065em;
    line-height: 1.08;
    text-wrap: balance;
  }

  body[data-site-section] main#main :is(
    .marketing-hero,
    .search-service-hero,
    .us-editorial-hero,
    .reg-hero,
    .wp-hero,
    .un-hero,
    .at-hero,
    .av-hero,
    .cb-hero,
    .cp-hero,
    .ev-hero,
    .sf-hero,
    .about-hero,
    .contact-hero
  ) .service-hero-details {
    margin-top: 0;
    padding: 0;
  }

  body[data-site-section] main#main :is(
    .marketing-hero,
    .search-service-hero,
    .us-editorial-hero,
    .reg-hero,
    .wp-hero,
    .un-hero,
    .at-hero,
    .av-hero,
    .cb-hero,
    .cp-hero,
    .ev-hero,
    .sf-hero,
    .about-hero,
    .contact-hero
  ) .service-hero-details > .service-hero-summary:first-child {
    display: none;
  }

  body[data-site-section] main#main :is(
    .marketing-hero,
    .search-service-hero,
    .us-editorial-hero,
    .reg-hero,
    .wp-hero,
    .un-hero,
    .at-hero,
    .av-hero,
    .cb-hero,
    .cp-hero,
    .ev-hero,
    .sf-hero,
    .about-hero,
    .contact-hero
  ) .service-hero-details > p:nth-of-type(2) {
    width: 100%;
    max-width: 42.5rem;
    margin: 16px 0 0;
    font-family: var(--font-sans);
    font-size: clamp(17px, 1.35vw, 21px);
    font-weight: 400;
    letter-spacing: normal;
    line-height: 1.72;
  }

  body[data-site-section] main#main :is(
    .marketing-hero,
    .search-service-hero,
    .us-editorial-hero,
    .reg-hero,
    .wp-hero,
    .un-hero,
    .at-hero,
    .av-hero,
    .cb-hero,
    .cp-hero,
    .ev-hero,
    .sf-hero,
    .about-hero,
    .contact-hero
  ) .service-hero-details > :is(div, nav)[class*="action"],
  body[data-site-section] main#main .wp-hero .service-hero-details > .wp-cta-wrap {
    margin-top: 36px;
  }

  /* The two approved cover families already have a real top line. */
  body[data-site-section] main#main .marketing-hero .marketing-hero__content {
    position: relative;
    display: block;
    width: 100%;
    max-width: none;
    min-height: var(--content-hero-height);
    padding: 0 var(--content-hero-inline);
  }

  body[data-site-section] main#main .marketing-hero .marketing-hero__topline,
  body[data-site-section] main#main .search-service-hero .search-service-hero__topline {
    position: absolute;
    top: var(--content-hero-topline-top);
    right: var(--content-hero-inline);
    left: var(--content-hero-inline);
  }

  body[data-site-section] main#main .marketing-hero .marketing-hero__copy {
    position: absolute;
    top: var(--content-hero-copy-top);
    left: var(--content-hero-inline);
    width: var(--content-hero-copy-width);
    max-width: 55rem;
    padding: 0;
    animation: none;
    opacity: 1;
    transform: none;
  }

  body[data-site-section] main#main .marketing-hero .marketing-hero__copy::before {
    display: none;
    content: none;
  }

  body[data-site-section] main#main .marketing-hero .marketing-hero__tags {
    position: absolute;
    right: var(--content-hero-inline);
    bottom: clamp(28px, 4vh, 52px);
    left: var(--content-hero-inline);
  }

  body[data-site-section] main#main .search-service-hero .search-service-hero__copy {
    position: absolute;
    top: 0;
    left: 0;
    box-sizing: border-box;
    width: calc(var(--content-hero-copy-width) + (var(--content-hero-inline) * 2));
    max-width: calc(55rem + (var(--content-hero-inline) * 2));
    height: 100%;
    padding: var(--content-hero-copy-top) var(--content-hero-inline) 56px;
    animation: none;
    opacity: 1;
    transform: none;
  }

  body[data-site-section] main#main .search-service-hero .search-service-hero__copy h1 {
    max-width: 52.5rem;
    margin-top: 24px;
  }

  body[data-site-section] main#main .search-service-hero > .search-service-container {
    height: 100%;
    min-height: 100%;
  }

  body[data-site-section] main#main .search-service-hero .search-service-hero__inner {
    height: 100%;
    min-height: 100%;
    padding: 0;
  }

  body[data-site-section] main#main .reg-hero {
    padding: 0;
  }

  body[data-site-section] main#main .wp-hero {
    display: block;
    padding: 0;
  }

  body[data-site-section] main#main .wp-hero :is(.wp-route-nav, .wp-scroll-rail, .wp-phase-track) {
    display: none;
  }

  body[data-site-section] main#main .wp-hero .wp-art-stage {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    display: grid;
    width: 56%;
    min-height: 100%;
    place-items: center;
  }

  body[data-site-section] main#main .at-hero {
    position: relative;
    display: block;
  }

  body[data-site-section] main#main .at-hero .at-hero-visual {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 50%;
    min-height: 100%;
  }

  body[data-site-section] main#main .cb-hero {
    width: 100%;
    margin: 0;
  }

  /* About and Contact use the same live text stack while keeping their assets. */
  body[data-site-section="about"] main#main .about-hero {
    margin: 0 0 clamp(76px, 8vw, 124px);
  }

  body[data-site-section] main#main :is(.about-hero-actions, .contact-hero-actions) {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 36px;
  }

  body[data-site-section="about"] main#main .about-hero-copy h1 span:last-child {
    margin-top: 0;
    padding-left: 0;
  }

  body[data-site-section="about"] main#main .about-hero-copy h1 span:last-child::before {
    display: none;
  }

  body[data-site-section="contact"] main#main .contact-hero {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    background: #f7f5f0;
    color: #171a1b;
  }

  body[data-site-section="contact"] main#main .contact-hero-media,
  body[data-site-section="contact"] main#main .contact-hero-veil {
    position: absolute;
    inset: 0;
    margin: 0;
  }

  body[data-site-section="contact"] main#main .contact-hero-media {
    z-index: -2;
    overflow: hidden;
  }

  body[data-site-section="contact"] main#main .contact-hero-media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
  }

  body[data-site-section="contact"] main#main .contact-hero-veil {
    z-index: -1;
    background: linear-gradient(90deg, rgb(247 245 240 / 98%) 0%, rgb(247 245 240 / 95%) 30%, rgb(247 245 240 / 78%) 49%, rgb(247 245 240 / 24%) 68%, transparent 100%);
  }

  body[data-site-section="contact"] main#main .contact-hero-copy h1 {
    color: #171a1b;
  }

  body[data-site-section="contact"] main#main .contact-hero-copy > .service-hero-heading > p,
  body[data-site-section="contact"] main#main .contact-hero-copy .content-hero-primary {
    color: var(--coral-deep);
  }

  body[data-site-section] main#main :is(.about-hero, .contact-hero) :is(.content-hero-primary, .content-hero-secondary) {
    display: inline-flex;
    min-height: 54px;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 14px 20px;
    border: 1px solid transparent;
    font-size: 14px;
    font-weight: 850;
    line-height: 1.25;
    text-decoration: none;
    transition: background 180ms ease, border-color 180ms ease, color 180ms ease, transform 180ms ease;
  }

  body[data-site-section] main#main :is(.about-hero, .contact-hero) .content-hero-primary {
    background: #a93631;
    color: #fff;
  }

  body[data-site-section] main#main :is(.about-hero, .contact-hero) .content-hero-secondary {
    border-color: currentColor;
    background: rgb(255 255 255 / 18%);
    color: inherit;
  }

  body[data-site-section] main#main :is(.about-hero, .contact-hero) :is(.content-hero-primary, .content-hero-secondary):is(:hover, :focus-visible) {
    transform: translateY(-2px);
  }
}

@media (max-width: 680px) {
  body[data-site-section] {
    --content-mobile-cover-height: 292px;
    --content-mobile-gutter: 22px;
  }

  body[data-site-section] main#main :is(.about-hero, .contact-hero) {
    position: relative;
    display: block;
    min-height: 0;
    overflow: hidden;
    margin: 0;
    background: #fff;
    color: #171a1b;
  }

  body[data-site-section] main#main :is(.about-hero-media, .contact-hero-media) {
    position: absolute;
    inset: 0 0 auto;
    display: block;
    width: 100%;
    height: var(--content-mobile-cover-height);
    margin: 0;
  }

  body[data-site-section] main#main :is(.about-hero-media, .contact-hero-media) :is(picture, img, video),
  body[data-site-section] main#main .contact-hero-media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  body[data-site-section] main#main :is(.about-hero, .contact-hero)::before,
  body[data-site-section] main#main .contact-hero-veil {
    position: absolute;
    z-index: 1;
    inset: 0 0 auto;
    width: 100%;
    height: var(--content-mobile-cover-height);
    background: linear-gradient(90deg, rgb(8 16 25 / 82%) 0%, rgb(8 16 25 / 56%) 58%, rgb(8 16 25 / 14%) 100%);
    content: "";
  }

  body[data-site-section] main#main :is(.about-hero-copy, .contact-hero-copy) {
    position: relative;
    z-index: 2;
    display: block;
    width: 100%;
    min-height: 0;
    padding: 0;
  }

  body[data-site-section] main#main :is(.about-hero, .contact-hero) .service-hero-heading {
    display: flex;
    min-height: var(--content-mobile-cover-height);
    justify-content: center;
    flex-direction: column;
    padding: 0 var(--content-mobile-gutter);
    color: #fff;
  }

  body[data-site-section] main#main :is(.about-hero, .contact-hero) .service-hero-heading::before {
    display: none;
  }

  body[data-site-section] main#main :is(.about-hero, .contact-hero) .service-hero-heading > p:first-child {
    margin: 0 0 22px;
    color: #ff8275;
    font-size: 0.78rem;
    font-weight: 850;
    letter-spacing: 0.18em;
    line-height: 1.55;
  }

  body[data-site-section] main#main :is(.about-hero, .contact-hero) .service-hero-heading h1 {
    width: 100%;
    margin: 0;
    color: #fff;
    font-family: var(--font-serif);
    font-size: clamp(1.8rem, 8.8vw, 2.45rem);
    font-weight: 900;
    letter-spacing: -0.055em;
    line-height: 1.04;
  }

  body[data-site-section] main#main :is(.about-hero, .contact-hero) .service-hero-details {
    padding: 34px var(--content-mobile-gutter) 42px;
    background: #fff;
    color: #171a1b;
  }

  body[data-site-section] main#main :is(.about-hero, .contact-hero) .service-hero-summary {
    margin: 0;
    font-size: clamp(1.2rem, 5.35vw, 1.45rem);
    font-weight: 900;
    letter-spacing: -0.025em;
    line-height: 1.52;
  }

  body[data-site-section] main#main :is(.about-hero, .contact-hero) .service-hero-details > p:nth-of-type(2) {
    margin: 14px 0 0;
    color: #5f6261;
    font-size: 0.98rem;
    line-height: 1.75;
  }

  body[data-site-section] main#main :is(.about-hero-actions, .contact-hero-actions) {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 28px;
  }

  body[data-site-section] main#main :is(.about-hero, .contact-hero) :is(.content-hero-primary, .content-hero-secondary) {
    display: inline-flex;
    min-height: 52px;
    align-items: center;
    justify-content: center;
    gap: 9px;
    padding: 13px 18px;
    border: 1px solid transparent;
    font-size: 0.9rem;
    font-weight: 850;
    text-decoration: none;
  }

  body[data-site-section] main#main :is(.about-hero, .contact-hero) .content-hero-primary {
    background: #a93631;
    color: #fff;
  }

  body[data-site-section] main#main :is(.about-hero, .contact-hero) .content-hero-secondary {
    border-color: #cbc8c0;
    background: #fff;
    color: #171a1b;
  }
}