/* Approved opening palette for About, Employers, Agencies and How we work.
   Layout, typography and the white navigation remain in their page styles. */
.hero-colour { background: var(--teal); color: var(--white); }
/* Keep the existing white transitions inside the opening wrappers. */
.hero-colour--teal { background: linear-gradient(to bottom, var(--teal) calc(100% - 24px), var(--white) 0); }
.hero-colour--sky { background: linear-gradient(to bottom, var(--teal) calc(100% - 32px), var(--white) 0); }

.hero-colour h1,
.hero-colour h2,
.hero-colour h3,
.hero-colour p,
.hero-colour strong,
.hero-colour .lead,
.hero-colour .emp-login,
.hero-colour .ag-login,
.hero-colour .hw-opening-note,
.hero-colour .ab-operator,
.hero-colour .ab-operator strong { color: var(--white); opacity: 1; }
.hero-colour a:not(.btn),
.hero-colour .linkbtn { color: var(--white); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1.5px; }
.hero-colour a:not(.btn):hover,
.hero-colour .linkbtn:hover { color: var(--white); text-decoration-thickness: 2px; }
.hero-colour .ag-opportunity { border-top-color: var(--white); }

/* About and How we work retain a restrained outlined identifier. */
.hero-colour .eyebrow { background: transparent; color: var(--white); box-shadow: inset 0 0 0 1px var(--white); }
.hero-colour--teal .eyebrow::before { background: var(--white); }
.hero-colour--sky .eyebrow::before { background: var(--sky); }
/* Joseph's audience identifiers use the full light-option accent fill.
   The decorative square blends into the pill, preserving its footprint. */
.hero-colour--turquoise .eyebrow { background: var(--turquoise); color: var(--graphite); box-shadow: inset 0 0 0 1px var(--turquoise); }
.hero-colour--turquoise .eyebrow::before { background: var(--turquoise); }
.hero-colour--coral .eyebrow { background: var(--coral); color: var(--graphite); box-shadow: inset 0 0 0 1px var(--coral); }
.hero-colour--coral .eyebrow::before { background: var(--coral); }

.hero-colour .btn.primary { background: var(--white); border-color: var(--white); color: var(--teal); }
.hero-colour .btn.primary:hover,
.hero-colour .btn.primary:active { background: var(--sky); border-color: var(--sky); color: var(--teal); }
.hero-colour .btn.secondary { background: transparent; border-color: var(--white); color: var(--white); }
.hero-colour .btn.secondary:hover,
.hero-colour .btn.secondary:active { background: var(--white); border-color: var(--white); color: var(--teal); }
.hero-colour :focus-visible { outline: 3px solid var(--amber); outline-offset: 3px; }

/* Preserve About's approved extra breathing room. */
.hero-colour .ab-opening { padding-bottom: 88px; }
@media (max-width: 600px) {
 .hero-colour--sky { background: linear-gradient(to bottom, var(--teal) calc(100% - 24px), var(--white) 0); }
 .hero-colour .ab-opening { padding-bottom: 64px; }
}