.jobs-why__item p,
.jobs-levels__body p,
.jobs-steps__item p,
.jobs-form__hint {
-webkit-hyphens: none;
hyphens: none;
}
@media (min-width: 1280px) {
.jobs-hero__grid {
grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
--jobs-hero-shift: 26px;
gap: var(--space-8);
align-items: center;
}
}
@media (min-width: 1440px) {
.jobs-hero__grid {
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
--jobs-hero-shift: 60px;
gap: var(--space-6);
}
}
@media (max-width: 1279.98px) {
.jobs-hero__media {
order: -1;
}
}
.jobs-hero .service-hero__content {
max-width: 44rem;
}
.jobs-hero__media {
aspect-ratio: 13 / 10;
background-color: var(--color-bg);
margin-inline-end: calc(-1 * var(--jobs-hero-shift, 0px));
position: relative;
}
.jobs-hero__media::after {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
background-image: linear-gradient(
to bottom,
rgb(1 1 1 / 0) 58%,
rgb(1 1 1 / 0.35) 78%,
rgb(1 1 1 / 0.8) 92%,
var(--color-bg) 100%
);
}
.jobs-hero__media picture,
.jobs-hero__media img {
display: block;
width: 100%;
height: 100%;
}
.jobs-hero__media img {
object-fit: cover;
}
.jobs-hero .service-hero__points {
flex-direction: column;
align-items: flex-start;
gap: var(--space-3);
}
.jobs-hero h1 {
max-width: 38rem;
}
.jobs-why__grid {
list-style: none;
display: grid;
gap: var(--space-6);
margin-top: var(--space-8);
}
.jobs-why__item {
display: flex;
flex-direction: column;
height: 100%;
border-radius: var(--radius-md);
background-color: var(--color-white);
box-shadow: var(--shadow-md);
overflow: hidden;
min-width: 0;
}
.jobs-why__media {
aspect-ratio: 4 / 3;
background-color: var(--color-bg);
border-bottom: 1px solid var(--color-border);
}
.jobs-why__media picture {
display: block;
width: 100%;
height: 100%;
}
.jobs-why__media img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
.jobs-why__body {
display: flex;
flex-direction: column;
padding: var(--space-5);
}
.jobs-why__icon {
width: 1.25rem;
height: 1.25rem;
margin-bottom: var(--space-4);
color: var(--color-accent);
fill: none;
stroke: currentColor;
stroke-width: 1.6;
stroke-linecap: round;
stroke-linejoin: round;
}
.jobs-why__item h3 {
font-size: var(--font-size-md);
margin-bottom: var(--space-3);
}
.jobs-why__item p {
color: var(--color-text-muted);
font-size: var(--font-size-sm);
line-height: var(--line-height-base);
}
@media (min-width: 768px) {
.jobs-why__grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--space-6);
}
}
@media (min-width: 1200px) {
.jobs-why__grid {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
}
.jobs-openings {
margin-top: var(--space-7);
margin-bottom: var(--space-8);
}
.jobs-openings__label {
font-size: var(--font-size-sm);
font-weight: 500;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--color-accent);
margin-bottom: var(--space-4);
}
.jobs-openings__list {
list-style: none;
display: grid;
gap: 0;
}
.jobs-openings__item {
display: grid;
gap: var(--space-2);
padding-block: var(--space-5);
border-top: 1px solid var(--color-border);
min-width: 0;
}
.jobs-openings__item:last-child {
border-bottom: 1px solid var(--color-border);
}
.jobs-openings__title {
font-size: var(--font-size-md);
font-weight: 500;
letter-spacing: normal;
line-height: var(--line-height-base);
}
.jobs-openings__meta {
font-size: var(--font-size-sm);
color: var(--color-text-muted);
}
.jobs-openings__summary {
font-size: var(--font-size-base);
color: var(--color-text-muted);
max-width: 46rem;
}
.jobs-levels__list {
list-style: none;
display: grid;
gap: 0;
margin-top: var(--space-7);
}
.jobs-levels__item {
display: grid;
gap: var(--space-4);
padding-block: var(--space-6);
border-top: 1px solid var(--color-border);
min-width: 0;
}
.jobs-levels__item:last-child {
border-bottom: 1px solid var(--color-border);
}
.jobs-levels .section__intro {
text-align: center;
}
.jobs-levels .section__intro h2 {
max-width: 30ch;
margin-inline: auto;
text-wrap: balance;
}
.jobs-levels__actions {
margin-top: var(--space-7);
text-align: center;
}
.jobs-levels__head {
display: flex;
align-items: baseline;
gap: var(--space-4);
min-width: 0;
}
.jobs-levels__number {
flex-shrink: 0;
font-size: var(--font-size-lg);
font-variant-numeric: tabular-nums;
letter-spacing: 0.08em;
color: var(--color-accent);
}
.jobs-levels__head h3 {
font-size: var(--font-size-lg);
font-weight: var(--font-weight-regular);
line-height: var(--line-height-tight);
overflow-wrap: anywhere;
}
.jobs-levels__body {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: var(--space-4);
min-width: 0;
}
.jobs-levels__body p {
color: var(--color-text);
max-width: 42rem;
}
@media (min-width: 900px) {
.jobs-levels__item {
grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
gap: var(--space-8);
align-items: start;
}
}
.jobs-steps__list {
list-style: none;
display: grid;
gap: var(--space-7);
margin-top: var(--space-7);
}
.jobs-steps__item {
position: relative;
display: flex;
flex-direction: column;
min-width: 0;
}
.jobs-steps__number {
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
width: 2.25rem;
height: 2.25rem;
border-radius: var(--radius-pill);
background-color: var(--color-blue-light);
color: var(--color-white);
font-size: var(--font-size-sm);
font-weight: 500;
font-variant-numeric: tabular-nums;
position: relative;
overflow: hidden;
}
.jobs-steps__number::after {
content: "";
position: absolute;
top: -60%;
bottom: -60%;
left: 0;
width: 38%;
background: linear-gradient(
100deg,
transparent 0%,
rgb(255 255 255 / 0.42) 50%,
transparent 100%
);
transform: translateX(-140%) rotate(8deg);
animation: btn-shine 5s ease-in-out infinite;
pointer-events: none;
}
.jobs-steps__item h3 {
font-size: var(--font-size-md);
margin-bottom: var(--space-3);
}
.jobs-steps__item p {
color: var(--color-text-muted);
font-size: var(--font-size-sm);
}
.jobs-steps .section__intro {
max-width: none;
margin-inline: auto;
text-align: center;
}
@media (min-width: 768px) {
.jobs-steps__list {
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: var(--space-7);
}
.jobs-steps__item {
align-items: center;
text-align: center;
}
.jobs-steps__number {
margin-bottom: var(--space-5);
}
.jobs-steps__item p {
max-width: 22rem;
}
.jobs-steps__item:not(:last-child)::before {
content: "";
position: absolute;
top: 1.125rem;
left: calc(50% + 1.75rem);
right: calc(-1 * (var(--space-7) + 50% - 1.75rem));
height: 1px;
background-color: var(--color-blue-light);
transform: scaleX(var(--step-line, 1));
transform-origin: left center;
}
}
.jobs-faq .section__intro {
max-width: none;
margin-inline: auto;
text-align: center;
}
.jobs-form {
color-scheme: light;
}
.jobs-form .form-field__select,
.jobs-form .jobs-form__file {
padding: var(--space-2) 0;
background-color: transparent;
border: none;
border-bottom: 1px solid rgb(59 73 86 / 0.25);
border-radius: 0;
color: var(--color-gray);
}
.jobs-form .jobs-form__file {
color: transparent;
}
.jobs-form .form-field__select:hover,
.jobs-form .jobs-form__file:hover {
border-bottom-color: rgb(59 73 86 / 0.45);
}
.jobs-form .form-field__select:focus-visible,
.jobs-form .jobs-form__file:focus-visible {
outline: none;
border-bottom-color: var(--color-accent-strong);
border-bottom-width: 2px;
}
.jobs-form__file::file-selector-button {
margin-right: var(--space-4);
padding: var(--space-2) var(--space-4);
border: 1px solid rgb(59 73 86 / 0.3);
border-radius: var(--radius-pill);
background-color: transparent;
font-family: inherit;
font-size: var(--font-size-sm);
color: var(--color-gray);
cursor: pointer;
transition:
background-color var(--duration-base) var(--easing-standard),
border-color var(--duration-base) var(--easing-standard);
}
.jobs-form__file::file-selector-button:hover {
background-color: rgb(59 73 86 / 0.06);
border-color: rgb(59 73 86 / 0.5);
}
.jobs-form__file-name {
margin-top: var(--space-2);
font-size: var(--font-size-sm);
color: var(--color-gray);
overflow-wrap: anywhere;
}
.jobs-form__hint {
margin-top: var(--space-2);
font-size: var(--font-size-sm);
color: rgb(59 73 86 / 0.75);
}
@media (max-width: 767.98px) {
.page-jobs .pixel-seam__band {
height: 80px;
}
.page-jobs .section {
padding-block: var(--space-8);
}
.page-jobs .pixel-seam + .section {
padding-top: calc(var(--space-8) + 80px);
}
.page-jobs .pixel-seam + .conversion {
padding-top: 80px;
}
.jobs-steps__list,
.jobs-levels__list {
grid-template-columns: minmax(0, 1fr);
}
.jobs-why {
--swipe-bleed: calc(-1 * (var(--container-padding) + var(--space-2)));
}
.jobs-why .jobs-why__grid {
align-items: stretch;
margin-top: var(--space-6);
padding-block: 4px 16px;
}
.jobs-why .jobs-why__item {
height: auto;
}
@media (max-width: 639.98px) {
.jobs-levels__actions .btn {
width: 100%;
justify-content: center;
white-space: normal;
}
}
.jobs-why .jobs-why__media {
aspect-ratio: 3 / 2;
}
.jobs-levels__item {
padding-block: var(--space-4);
}
.jobs-levels__body {
gap: var(--space-3);
}
.jobs-levels .service-link {
display: inline;
min-height: 0;
}
.jobs-levels .service-link__arrow {
display: inline-block;
vertical-align: -0.08em;
margin-left: 0.35em;
}
.jobs-steps__list {
gap: var(--space-5);
}
.jobs-steps__item {
padding-left: 3.5rem;
}
.jobs-steps__number {
position: absolute;
top: 0;
left: 0;
}
.jobs-steps__item:not(:last-child)::before {
content: "";
position: absolute;
left: 1.09375rem;
top: 2.25rem;
bottom: calc(-1 * var(--space-5));
width: 1px;
background-color: var(--color-blue-light);
transform: scaleY(var(--step-line, 1));
transform-origin: center top;
}
.jobs-steps__item h3 {
padding-top: 0.25rem;
}
.jobs-related .service-related__cols {
gap: var(--space-6);
}
.jobs-levels__head h3,
.jobs-levels__number {
font-size: var(--font-size-md);
}
.jobs-faq .faq-item summary {
min-height: 44px;
}
.jobs-form .form-field__select,
.jobs-form .jobs-form__file {
font-size: 1rem;
min-height: 3rem;
padding-block: var(--space-3) var(--space-2);
}
.jobs-form__file {
overflow-wrap: anywhere;
}
.jobs-form__file::file-selector-button {
display: block;
margin-right: 0;
margin-bottom: var(--space-3);
min-height: 44px;
}
}
.hs-form-frame {
min-height: 700px;
}
@media (max-width: 639.98px) {
.hs-form-frame {
min-height: 900px;
}
}
.hs-form-frame,
.hs-form-frame input,
.hs-form-frame select,
.hs-form-frame textarea,
.hs-form-frame button {
font-family: var(--font-family-base);
}
.hs-form-frame {
color: var(--color-gray);
}