/* Staffing composition; the shared marketing baseline owns typography and layout measures. */
body:has(.staffing-page) #header .headerImageNormal { display: none !important; }
body:has(.staffing-page) #header .headerImageWhite { display: block !important; }
body:has(.staffing-page) #header :is(#menu > ul > li > a, #mobileMenuIcon > i) { color: white !important; }

.staffing-page {
    --content-accent-color: #126726;
    --content-band-background: #f2f6f3;
    --staffing-navy: #0d2035;
    --staffing-mint: #86db98;
    --code-color-action: #126726;
    --code-color-action-hover: #0c501c;
    line-height: 1.6;
}
#page .staffing-page p { margin: 0 0 1.2rem; font-size: 1rem; line-height: 1.6; }
#page .staffing-page h3 { margin: 0 0 .65rem; padding: 0; font-size: 1.25rem; line-height: 1.3; }
.staffing-page a:focus-visible { outline: 3px solid #126726; outline-offset: 5px; }
.staffing-page :is(section[id], #inquirySection) { scroll-margin-top: 80px; }
#page .staffing-page.marketing-page a.marketing-button { color: white; }
#page .staffing-page .staffing-eyebrow { margin-bottom: 1rem; color: #126726; font-size: .75rem; font-weight: 700; letter-spacing: .15em; text-transform: uppercase; }

.staffing-hero { position: relative; isolation: isolate; overflow: hidden; background: var(--staffing-navy); color: white; }
.staffing-hero-art { position: absolute; inset: 0 0 0 28%; z-index: -2; }
.staffing-hero-art img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center top; }
.staffing-hero::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(90deg, #0d2035 25%, rgb(13 32 53 / .9) 37%, rgb(13 32 53 / .3) 65%, rgb(13 32 53 / .08)), linear-gradient(0deg, #0d2035, transparent 45%); }
.staffing-hero .marketing-hero-inner { min-height: clamp(550px, 47vw, 700px); padding-bottom: 80px; }
.staffing-hero .marketing-hero-copy { width: 54%; }
#page .staffing-hero h1 { font-size: clamp(2.6rem, 4.4vw, 4.3rem); }
#page .staffing-hero h1 span, #page .staffing-hero .staffing-eyebrow { color: var(--staffing-mint); }
#page .staffing-hero .marketing-hero-copy > p:not(.staffing-eyebrow) { max-width: 39ch; color: #e1eaf0; font-size: 1.125rem; }
.staffing-actions { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 1.75rem; }
#page .staffing-hero a.marketing-button:not(.marketing-button-outline) { background: var(--staffing-mint); color: #0d2035; }
#page .staffing-hero a.marketing-button:not(.marketing-button-outline):hover { background: #b2edbd; }
.staffing-hero a:focus-visible { outline-color: white; }
@media (min-width: 1200px) {
    .staffing-hero .marketing-hero-copy { width: 66%; }
}
.staffing-page .staffing-section { max-width: var(--content-pattern-max-width); margin-block: 0; padding: 4rem var(--content-pattern-gutter); }
.staffing-page .content-with-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(2rem, 5vw, 5rem); }
.staffing-page .content-summary { padding: 0; border: 0; }
#page .staffing-page .staffing-labels { display: flex; flex-wrap: wrap; gap: .5rem 1rem; margin: 1.5rem 0; padding: 0; list-style: none; }
#page .staffing-page .staffing-labels li { margin: 0; padding: 0; color: #395d49; font-size: .75rem; line-height: 1.6; }
#page .staffing-page a.staffing-link { display: inline-flex; align-items: center; gap: 1rem; min-height: 44px; color: #126726; font-weight: 700; text-decoration: underline; text-underline-offset: .25em; }

@media (max-width: 700px) {
    .staffing-hero-art { inset: 0 0 auto; height: clamp(300px, 68vw, 450px); }
    .staffing-hero::after { background: linear-gradient(0deg, #0d2035 45%, transparent 80%), linear-gradient(180deg, rgb(13 32 53 / .6), transparent 25%); }
    .staffing-hero .marketing-hero-inner { min-height: 0; padding-block: max(280px, 60vw) 4rem; }
    .staffing-hero .marketing-hero-copy { width: 100%; }
    #page .staffing-hero h1 { font-size: clamp(2.1rem, 8vw, 3rem); }
    .staffing-page .content-with-summary { grid-template-columns: minmax(0, 1fr); gap: 2rem; }
    .staffing-page .staffing-section { padding-block: 2.5rem; }
}
@media (max-width: 420px) {
    .staffing-actions { flex-direction: column; align-items: stretch; }
}