.job-detail-page {
background: #fff3e8;
}
.job-detail-page main :where(h1, h2, p, dl, dd) {
margin: 0;
}
.job-detail-main {
padding-block: 60px 96px;
}
.job-container {
width: calc(100% - 152px); max-width: 1288px; margin-inline: auto;
}
.job-page-heading {
width: 900px; max-width: 100%; height: 64.4px; margin-bottom: 23.6px !important; font-size: 46px; font-weight: 900; line-height: 58px;
}
.job-detail-card {
display: flex; flex-direction: column; align-items: flex-start; gap: 36px; padding: 48px; border: 1px solid rgba(224,228,232,.8); border-radius: 28px; background: white;
}
.job-eyebrow {
color: var(--ao-orange); font-size: 13px; font-weight: 600; line-height: 20px;
}
.job-hero {
display: flex; flex-direction: column; align-items: flex-start; gap: 12px; padding-top: 4px;
}
.job-hero .job-eyebrow {
width: 100%;
}
.job-title {
width: 1000px; max-width: 100%; font-size: 46px; font-weight: 900; line-height: 58px;
}
.job-meta {
width: 1000px; max-width: 100%; font-size: 15px; line-height: 24px; color: #566570; white-space: pre-wrap;
}
.job-divider {
height: 1px; flex-shrink: 0; background: #e0e4e8;
}
.job-intro {
display: flex; flex-direction: column; gap: 16px;
}
.job-intro-title {
width: 1020px; max-width: 100%; font-size: 24px; font-weight: 600; line-height: 36px;
}
.job-intro-text {
width: 980px; max-width: 100%; color: #566570; font-size: 17px; line-height: 29px;
}
.job-intro-text > p + p {
margin-top: 29px;
}
.job-columns {
display: grid; grid-template-columns: 768px 360px; gap: 64px; align-items: start;
}
.job-main-copy {
display: flex; flex-direction: column; gap: 40px; min-width: 0;
}
.job-content-section {
display: flex; flex-direction: column; gap: 14px;
}
.job-section-title {
font-size: 27px; font-weight: 600; line-height: 38px;
}
.job-bullet-list {
display: flex; flex-direction: column; gap: 14px; margin: 0; padding: 8px 0 0; list-style: none;
}
.job-bullet-list li {
display: flex; align-items: flex-start; gap: 16px;
}
.job-bullet-list img {
display: block; flex: 0 0 8px;
}
.job-list-copy {
width: 736px; max-width: calc(100% - 24px); color: #17212b; font-size: 16px; line-height: 27px;
}
.job-sidebar {
display: flex; flex-direction: column; gap: 24px; min-width: 0;
}
.job-facts {
display: flex; flex-direction: column; gap: 22px; padding: 28px; border-radius: 20px; background: var(--ao-light-blue);
}
.job-fact-list {
display: flex; flex-direction: column; gap: 22px;
}
.job-fact {
display: flex; flex-direction: column; gap: 4px;
}
.job-fact-label {
color: #566570; font-size: 11px; font-weight: 600; line-height: 18px;
}
.job-fact-value {
font-size: 15px; font-weight: 600; line-height: 24px;
}
.job-direct-contact {
display: flex; flex-direction: column; gap: 14px; padding: 28px; border-radius: 20px; background: #fff3e8;
}
.job-contact-title {
font-size: 22px; font-weight: 600; line-height: 31px;
}
.job-contact-copy {
color: #566570; font-size: 15px; line-height: 25px;
}
.job-contact-email {
display: block; font-size: 14px; font-weight: 600; line-height: 22px; transition: color var(--ao-hover-normal) ease-out;
}
.job-contact-email:hover {
color: var(--ao-orange);
}
.job-about {
display: flex; flex-direction: column; gap: 12px;
}
.job-about-title {
width: 1060px; max-width: 100%; font-size: 28px; font-weight: 600; line-height: 40px;
}
.job-about-copy {
width: 1000px; max-width: 100%; color: #566570; font-size: 17px; line-height: 29px;
}
.job-application-panel {
display: flex; justify-content: space-between; align-items: center; padding: 28px 32px; border-radius: 20px; background: #fff3e8;
}
.job-application-copy {
display: flex; flex-direction: column; gap: 8px; width: 780px; max-width: 100%;
}
.job-application-title {
font-size: 26px; font-weight: 600; line-height: 37px;
}
.job-application-text {
color: #566570; font-size: 16px; line-height: 27px;
}
.job-detail-page main a:focus-visible {
outline: 2px solid var(--ao-orange); outline-offset: 4px;
}
@media (max-width: 1399px) {
.job-container {
width: calc(100% - 96px);
}
.job-columns {
grid-template-columns: minmax(0, 1fr) 320px; gap: 40px;
}
.job-application-panel {
gap: 32px;
}
.job-application-copy {
flex: 1; width: auto;
}

}
@media (max-width: 1050px) {
.job-detail-card {
padding: 36px;
}
.job-columns {
grid-template-columns: minmax(0, 1fr); gap: 36px;
}
.job-sidebar {
display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start;
}
.job-application-panel {
flex-direction: column; align-items: flex-start; gap: 24px;
}
.job-contact-email {
overflow-wrap: anywhere;
}

}
@media (max-width: 700px) {
.job-container {
width: calc(100% - 40px);
}
.job-detail-main {
padding-block: 36px 48px;
}
.job-page-heading {
height: auto; font-size: 36px; line-height: 46px; margin-bottom: 24px !important;
}
.job-detail-card {
padding: 28px 24px; gap: 28px; border-radius: 22px;
}
.job-title {
font-size: 32px; line-height: 42px; overflow-wrap: break-word;
}
.job-meta {
white-space: normal;
}
.job-intro-title {
font-size: 22px; line-height: 32px;
}
.job-intro-text,
.job-about-copy {
font-size: 16px; line-height: 27px;
}
.job-section-title {
font-size: 24px; line-height: 34px;
}
.job-main-copy {
gap: 28px;
}
.job-sidebar {
display: flex;
}
.job-facts,
.job-direct-contact {
padding: 24px;
}
.job-about-title {
font-size: 25px; line-height: 35px;
}
.job-application-panel {
padding: 24px;
}

}
@media (prefers-reduced-motion: reduce) {
.job-detail-page,
.job-detail-page * {
scroll-behavior: auto !important;
}
.job-detail-page main * {
transition: none !important; animation: none !important;
}

}