html:has(body.jobs-page), body.jobs-page { --theme: #101011; --theme-rgb: 16, 16, 17; background: #101011; }
.jobs-page { color: #161616; }
.jobs-page .nav { background: #101011; }
.jobs-page .nav__links a { color: #fff; }
.jobs-page .nav__links .nav__link--animation:hover,
.jobs-page .nav__links .nav__link--games:hover,
.jobs-page .nav__links .nav__link--interactive:hover { color: #fff; }
.jobs-page .btn--spark { border-color: rgba(255,255,255,.55); color: #fff !important; }
.jobs-page .btn--spark::before { background: #f6f2e8; }
.jobs-page .btn--spark:hover { border-color: #f6f2e8; color: #161616 !important; }
.jobs-page .nav__burger { color: #fff; }
.jobs-hero { position: relative; display: grid; min-height: clamp(34rem, 62vw, 50rem); padding: clamp(6rem, 12vw, 10rem) 0; place-items: center; overflow: hidden; background: #101011 url("/Assets/Artworks/Animation/WildheartLegends/Banners/Wildheart_Banner2.webp") center center / cover no-repeat; color: #f6f2e8; isolation: isolate; }
.jobs-hero::after { position: absolute; inset: 0; z-index: 0; content: ""; background: linear-gradient(180deg, rgba(5, 12, 18, .2), rgba(5, 12, 18, .38)), radial-gradient(circle at center, rgba(5, 12, 18, .12), rgba(5, 12, 18, .46)); }
.jobs-hero__inner { position: relative; z-index: 1; display: grid; place-items: center; }
.jobs-hero h1 { max-width: 13ch; margin: 0; font: 700 clamp(3.4rem, 8vw, 7.5rem)/.88 var(--disp); letter-spacing: -.045em; text-align: center; text-shadow: 0 5px 30px rgba(0,0,0,.65); text-transform: uppercase; }
.jobs-interest { padding: clamp(5rem, 10vw, 9rem) 0; background: #f1eee7; }
.jobs-interest__layout { display: grid; grid-template-columns: minmax(15rem, .72fr) minmax(0, 1.28fr); gap: clamp(3rem, 8vw, 9rem); align-items: start; }
.jobs-interest__aside { position: sticky; top: 8rem; }
.jobs-interest__aside h2 { margin: 0 0 1.5rem; font: 700 clamp(2.4rem, 5vw, 4.5rem)/.92 var(--disp); letter-spacing: -.03em; text-transform: uppercase; }
.jobs-interest__aside > p:not(.jobs-interest__number) { max-width: 27rem; color: #514e48; font-size: 1.08rem; line-height: 1.55; }
.jobs-form { display: flex; flex-direction: column; gap: 1.5rem; padding: clamp(1.5rem, 4vw, 3rem); border: 0; background: #faf8f3; }
.jobs-form__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; }
.jobs-form .form-row { display: flex; flex-direction: column; gap: .55rem; }
.jobs-form label { color: #242321; font: 700 .78rem/1.2 var(--disp); letter-spacing: .04em; text-transform: uppercase; }
.jobs-form label span { float: right; color: #888178; font-family: var(--body); font-size: .7rem; font-weight: 300; letter-spacing: .02em; text-transform: none; }
.jobs-form input, .jobs-form textarea { width: 100%; border: 0; border-bottom: 1px solid #aaa398; border-radius: 0; background: transparent; color: #161616; font: 300 1.05rem/1.4 var(--body); outline: none; transition: border-color .2s ease, box-shadow .2s ease; }
.jobs-form input:not([type=file]) { min-height: 3.25rem; padding: .65rem 0; }
.jobs-form textarea { min-height: 9rem; padding: .75rem 0; resize: vertical; }
.jobs-form input:focus, .jobs-form textarea:focus { border-color: #af5b23; box-shadow: 0 2px 0 #af5b23; }
.jobs-form input[type=file] { padding: 1rem 0; border: 0; background: transparent; cursor: pointer; }
.jobs-form input[type=file]::file-selector-button { margin-right: 1rem; padding: .7rem 1rem; border: 0; background: #242321; color: #fff; font: 700 .72rem/1 var(--disp); text-transform: uppercase; cursor: pointer; }
.jobs-form small { color: #736e66; font-size: .8rem; }
.jobs-form__submit { align-self: flex-start; min-width: 13.5rem; margin-top: .5rem; justify-content: center; }
.jobs-form__submit:disabled { cursor: wait; opacity: 1; }
.jobs-form__submit.is-sending { background: #8e4b20; border-color: #8e4b20; background-image: linear-gradient(110deg, #8e4b20 20%, #b96831 45%, #8e4b20 70%); background-size: 220% 100%; animation: jobs-submit-progress 1.6s linear infinite; }
.jobs-form__submit.is-sending .btn__icon-wrap,
.jobs-form__submit.is-sending > svg { display: none; }
.jobs-form__submit.is-sending::before { position: relative; z-index: 2; width: .8rem; height: .8rem; border: 2px solid rgba(255,255,255,.4); border-top-color: #fff; border-radius: 50%; content: ""; animation: jobs-submit-spin .75s linear infinite; }
.jobs-form__submit.is-sent { background: #237a45; border-color: #237a45; color: #fff; cursor: default; }
.jobs-form__submit.is-sent:hover { background-position: 100% 0; border-color: #237a45; }
.jobs-form__submit.is-sent .btn__icon-wrap,
.jobs-form__submit.is-sent > svg { display: none; }
.jobs-form .form-status { margin: 0; }
.jobs-form .form-status.is-pending { padding: 0; border: 0; background: transparent; color: #625d55; line-height: 1.5; }
@keyframes jobs-submit-progress { to { background-position: -220% 0; } }
@keyframes jobs-submit-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .jobs-form__submit.is-sending { animation: none; } .jobs-form__submit.is-sending::before { animation-duration: 1.5s; } }
@media (max-width: 760px) { .jobs-hero { min-height: 32rem; background-position: 43% center; } .jobs-interest__layout { grid-template-columns: 1fr; } .jobs-interest__aside { position: static; } .jobs-form__grid { grid-template-columns: 1fr; } }