.elementor-2227 .elementor-element.elementor-element-854a87d{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--padding-top:100px;--padding-bottom:100px;--padding-left:0px;--padding-right:0px;--z-index:2;}.elementor-2227 .elementor-element.elementor-element-854a87d:not(.elementor-motion-effects-element-type-background), .elementor-2227 .elementor-element.elementor-element-854a87d > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#0C0C0C;}:root{--page-title-display:none;}@media(max-width:1200px){.elementor-2227 .elementor-element.elementor-element-854a87d{--padding-top:100px;--padding-bottom:100px;--padding-left:20px;--padding-right:20px;}}@media(max-width:880px){.elementor-2227 .elementor-element.elementor-element-854a87d{--padding-top:50px;--padding-bottom:50px;--padding-left:20px;--padding-right:20px;}}@media(max-width:520px){.elementor-2227 .elementor-element.elementor-element-854a87d{--padding-top:50px;--padding-bottom:50px;--padding-left:15px;--padding-right:15px;}}/* Start custom CSS for html, class: .elementor-element-0f6df40 *//* =========================================================
   HAPTIC X CAREERS
   FULL PERFORMANCE + RESPONSIVE CSS

   Desktop H1:
   65px / 550

   Desktop Subtitle:
   16px / 700

   Background:
   #0c0c0c

   Container:
   1400px

   POPUPS:
   - Apply Form
   - View Position
   - Sticky Header Safe
   - Elementor Safe
   - WordPress Admin Bar Safe
   - Desktop / Tablet / Mobile Responsive
========================================================= */


/* =========================================================
   GLOBAL VARIABLES
========================================================= */

:root {
    --hx-popup-top: 110px;
}


/* =========================================================
   CAREERS ROOT
========================================================= */

.hx-careers {
    --hx-bg: #0c0c0c;
    --hx-bg-soft: #101010;
    --hx-bg-hover: #121212;

    --hx-white: #ffffff;

    --hx-text: #b9b9b9;
    --hx-text-soft: #929292;
    --hx-muted: #777777;

    --hx-gold: #E6BE8A;

    --hx-border: rgba(255, 255, 255, 0.10);
    --hx-border-light: rgba(255, 255, 255, 0.14);
    --hx-gold-border: rgba(230, 190, 138, 0.30);

    position: relative;

    width: 100%;

    margin: 0;
    padding: 0;

    overflow: hidden;

    background: #0c0c0c;

    color: #ffffff;
}


/* =========================================================
   BOX SIZING
========================================================= */

.hx-careers *,
.hx-careers *::before,
.hx-careers *::after,

#hx-job-modal *,
#hx-job-modal *::before,
#hx-job-modal *::after,

#hx-application-modal *,
#hx-application-modal *::before,
#hx-application-modal *::after {
    box-sizing: border-box;
}


/* =========================================================
   FONT
========================================================= */

.hx-careers,
.hx-careers button,
.hx-careers input,
.hx-careers select,
.hx-careers textarea,
.hx-careers label,

#hx-job-modal,
#hx-job-modal button,

#hx-application-modal,
#hx-application-modal button,
#hx-application-modal input,
#hx-application-modal select,
#hx-application-modal textarea,
#hx-application-modal label {
    font-family: inherit;
}


/* =========================================================
   TYPOGRAPHY RESET
========================================================= */

.hx-careers h1,
.hx-careers h2,
.hx-careers h3,
.hx-careers h4,
.hx-careers p,

#hx-job-modal h1,
#hx-job-modal h2,
#hx-job-modal h3,
#hx-job-modal h4,
#hx-job-modal p,

#hx-application-modal h1,
#hx-application-modal h2,
#hx-application-modal h3,
#hx-application-modal h4,
#hx-application-modal p {
    margin-top: 0;
}


/* =========================================================
   H1
========================================================= */

.hx-careers h1 {
    font-size: 65px !important;

    font-weight: 550 !important;

    line-height: 1.05 !important;

    letter-spacing: -1.5px !important;

    margin-bottom: 28px;
}


/* =========================================================
   H2 H3 H4
========================================================= */

.hx-careers h2,
.hx-careers h3,
.hx-careers h4,

#hx-job-modal h2,
#hx-job-modal h3,
#hx-job-modal h4,

#hx-application-modal h2,
#hx-application-modal h3,
#hx-application-modal h4 {
    font-weight: 700 !important;
}


/* =========================================================
   PARAGRAPHS
========================================================= */

.hx-careers p {
    color: #b9b9b9;
}


#hx-job-modal p,
#hx-application-modal p {
    color: #b9b9b9;
}


/* =========================================================
   GOLD GRADIENT
========================================================= */

.hx-careers .heading-gradient-gold,

#hx-job-modal .heading-gradient-gold,

#hx-application-modal .heading-gradient-gold {
    background-image: linear-gradient(
        180deg,
        #ffffff 0%,
        #ffffff 10%,
        #E6BE8A 100%
    ) !important;

    -webkit-background-clip: text !important;

    background-clip: text !important;

    -webkit-text-fill-color: transparent !important;

    color: transparent !important;
}


/* =========================================================
   1400PX CONTAINER
========================================================= */

.hx-careers .hx-container {
    position: relative;

    width: 100%;

    max-width: 1400px;

    margin-left: auto;
    margin-right: auto;

    padding-left: 0;
    padding-right: 0;
}


/* =========================================================
   SECTION
========================================================= */

.hx-careers .hx-section {
    position: relative;

    width: 100%;

    padding: 90px 0;

    background: #0c0c0c;
}


/* =========================================================
   PERFORMANCE
========================================================= */

@supports (content-visibility: auto) {

    .hx-careers .hx-benefits-section,
    .hx-careers .hx-process-section,
    .hx-careers .hx-cta-section {
        content-visibility: auto;

        contain-intrinsic-size:
            1px
            650px;
    }

}


/* =========================================================
   SECTION HEADING
========================================================= */

.hx-careers .hx-section-heading {
    width: 100%;

    max-width: 720px;

    margin:
        0
        auto
        48px;

    text-align: center;
}


.hx-careers .hx-section-heading p {
    margin-top: 16px;

    margin-bottom: 0;
}


/* =========================================================
   SUBTITLE / EYEBROW
========================================================= */

.hx-careers .hx-eyebrow,

#hx-application-modal .hx-eyebrow {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    width: fit-content;

    max-width: 100%;

    margin-bottom: 14px;

    padding:
        6px
        15px;

    border: none;

    border-radius: 999px;

    background:
        rgba(
            230,
            190,
            138,
            0.20
        );

    font-size: 16px !important;

    font-weight: 700 !important;

    line-height: 1.2;

    letter-spacing: 0;

    text-transform: none;
}


/* =========================================================
   EYEBROW GRADIENT
========================================================= */

.hx-careers
.hx-eyebrow
.heading-gradient-gold,

#hx-application-modal
.hx-eyebrow
.heading-gradient-gold {
    display: inline-block;

    max-width: 100%;
}


/* =========================================================
   BUTTONS
========================================================= */

.hx-careers .hx-btn,
.hx-careers a.hx-btn,
.hx-careers button.hx-btn,

#hx-job-modal .hx-btn,
#hx-job-modal button.hx-btn,

#hx-application-modal .hx-btn,
#hx-application-modal button.hx-btn {
    display: inline-flex !important;

    align-items: center;
    justify-content: center;

    gap: 16px;

    min-height: 52px;

    padding:
        12px
        24px !important;

    border:
        1px solid
        #E6BE8A !important;

    border-radius:
        6px !important;

    background:
        transparent !important;

    background-color:
        transparent !important;

    color:
        #E6BE8A !important;

    -webkit-text-fill-color:
        #E6BE8A !important;

    text-decoration:
        none !important;

    box-shadow:
        none !important;

    cursor:
        pointer;

    touch-action:
        manipulation;

    transition:
        background-color 0.2s ease,
        border-color 0.2s ease,
        color 0.2s ease,
        transform 0.2s ease;
}


/* =========================================================
   BUTTON HOVER
========================================================= */

.hx-careers .hx-btn:hover,
.hx-careers .hx-btn:focus,

#hx-job-modal .hx-btn:hover,
#hx-job-modal .hx-btn:focus,

#hx-application-modal .hx-btn:hover,
#hx-application-modal .hx-btn:focus {
    background:
        #E6BE8A !important;

    background-color:
        #E6BE8A !important;

    border-color:
        #E6BE8A !important;

    color:
        #0c0c0c !important;

    -webkit-text-fill-color:
        #0c0c0c !important;

    transform:
        translateY(-1px);
}


.hx-careers .hx-btn:hover *,
.hx-careers .hx-btn:focus *,

#hx-job-modal .hx-btn:hover *,
#hx-job-modal .hx-btn:focus *,

#hx-application-modal .hx-btn:hover *,
#hx-application-modal .hx-btn:focus * {
    color:
        #0c0c0c !important;

    -webkit-text-fill-color:
        #0c0c0c !important;
}


/* =========================================================
   SECONDARY BUTTON
========================================================= */

.hx-careers .hx-btn-secondary {
    border-color:
        rgba(
            255,
            255,
            255,
            0.18
        ) !important;

    color:
        #ffffff !important;

    -webkit-text-fill-color:
        #ffffff !important;
}


.hx-careers .hx-btn-secondary:hover,
.hx-careers .hx-btn-secondary:focus {
    border-color:
        #E6BE8A !important;

    background:
        #E6BE8A !important;

    color:
        #0c0c0c !important;

    -webkit-text-fill-color:
        #0c0c0c !important;
}


/* =========================================================
   HERO
========================================================= */

.hx-careers .hx-careers-hero {
    position: relative;

    display: flex;

    align-items: center;

    width: 100%;

    min-height: 720px;

    padding:
        100px
        0;

    overflow: hidden;

    background:
        #0c0c0c;
}


/* =========================================================
   REMOVE HEAVY GLOW
========================================================= */

.hx-careers .hx-careers-glow {
    display:
        none !important;
}


/* =========================================================
   HERO GRID
========================================================= */

.hx-careers .hx-careers-grid {
    position: absolute;

    inset: 0;

    pointer-events: none;

    opacity: 0.14;

    background-image:

        linear-gradient(
            rgba(
                230,
                190,
                138,
                0.04
            ) 1px,
            transparent 1px
        ),

        linear-gradient(
            90deg,
            rgba(
                230,
                190,
                138,
                0.04
            ) 1px,
            transparent 1px
        );

    background-size:
        60px
        60px;
}


/* =========================================================
   HERO LAYOUT
========================================================= */

.hx-careers .hx-hero-layout {
    position: relative;

    z-index: 2;

    display: grid;

    grid-template-columns:
        minmax(
            0,
            1.05fr
        )
        minmax(
            0,
            0.95fr
        );

    gap: 70px;

    align-items: center;
}


/* =========================================================
   HERO CONTENT
========================================================= */

.hx-careers .hx-hero-content {
    width: 100%;

    max-width: 720px;
}


.hx-careers .hx-hero-content > p {
    max-width: 620px;
}


/* =========================================================
   HERO POINTS
========================================================= */

.hx-careers .hx-hero-points {
    display: flex;

    flex-wrap: wrap;

    gap:
        12px
        24px;

    margin-top: 30px;
}


.hx-careers .hx-point {
    display: inline-flex;

    align-items: center;

    gap: 8px;

    color:
        #c4c4c4;

    font-size:
        13px;
}


.hx-careers .hx-point span {
    color:
        #E6BE8A;
}


/* =========================================================
   HERO BUTTON ROW
========================================================= */

.hx-careers .hx-button-row {
    display: flex;

    flex-wrap: wrap;

    gap: 12px;

    margin-top: 34px;
}


/* =========================================================
   TECH VISUAL
========================================================= */

.hx-careers .hx-tech-visual {
    position: relative;

    display: flex;

    align-items: center;
    justify-content: center;

    min-width: 0;

    min-height: 460px;
}


/* =========================================================
   CODE WINDOW
========================================================= */

.hx-careers .hx-code-window {
    position: relative;

    z-index: 2;

    width: 100%;

    max-width: 570px;

    overflow: hidden;

    border:
        1px solid
        rgba(
            230,
            190,
            138,
            0.30
        );

    border-radius:
        16px;

    background:
        #0e0e0e;

    box-shadow:
        0
        18px
        45px
        rgba(
            0,
            0,
            0,
            0.28
        );
}


/* =========================================================
   CODE TOP
========================================================= */

.hx-careers .hx-code-top {
    display: flex;

    align-items: center;
    justify-content: space-between;

    height: 52px;

    padding:
        0
        20px;

    border-bottom:
        1px solid
        rgba(
            255,
            255,
            255,
            0.10
        );
}


.hx-careers .hx-code-top small {
    color:
        #666666;

    font-size:
        11px;
}


.hx-careers .hx-code-dots {
    display: flex;

    gap: 7px;
}


.hx-careers .hx-code-dots span {
    width:
        8px;

    height:
        8px;

    border-radius:
        50%;

    background:
        #343434;
}


.hx-careers
.hx-code-dots
span:first-child {
    background:
        #E6BE8A;
}


/* =========================================================
   CODE BODY
========================================================= */

.hx-careers .hx-code-body {
    min-height: 330px;

    padding: 28px;

    color:
        #858585;

    font-family:
        Consolas,
        Monaco,
        monospace !important;

    font-size:
        13px;

    line-height:
        1.9;
}


.hx-careers .hx-code-body * {
    font-family:
        Consolas,
        Monaco,
        monospace !important;
}


.hx-careers .code-indent {
    padding-left:
        25px;
}


.hx-careers .code-purple {
    color:
        #c990df;
}


.hx-careers .code-green {
    color:
        #8cc99b;
}


.hx-careers .code-yellow {
    color:
        #e4bd75;
}


.hx-careers .code-blue {
    color:
        #82b7ee;
}


/* =========================================================
   TECH CHIPS
========================================================= */

.hx-careers .hx-tech-chip {
    position: absolute;

    z-index: 4;

    display: flex;

    align-items: center;
    justify-content: center;

    width:
        60px;

    height:
        60px;

    border:
        1px solid
        rgba(
            230,
            190,
            138,
            0.30
        );

    border-radius:
        14px;

    background:
        #0c0c0c;

    color:
        #E6BE8A;

    box-shadow:
        0
        7px
        18px
        rgba(
            0,
            0,
            0,
            0.22
        );
}


.hx-careers .hx-chip-ai {
    top:
        15px;

    right:
        20px;

    width:
        72px;

    height:
        72px;
}


.hx-careers .hx-chip-js {
    top:
        75px;

    left:
        -5px;
}


.hx-careers .hx-chip-next {
    left:
        10px;

    bottom:
        70px;
}


.hx-careers .hx-chip-wp {
    right:
        25px;

    bottom:
        5px;
}


/* =========================================================
   JOB GRID
========================================================= */

.hx-careers .hx-jobs-grid {
    display: grid;

    grid-template-columns:
        repeat(
            2,
            minmax(
                0,
                1fr
            )
        );

    gap:
        24px;
}


/* =========================================================
   JOB CARD
========================================================= */

.hx-careers .hx-job-card {
    position: relative;

    min-width: 0;

    padding:
        36px;

    border:
        1px solid
        rgba(
            255,
            255,
            255,
            0.10
        );

    border-radius:
        14px;

    background:
        #0c0c0c;

    transition:
        transform 0.2s ease,
        border-color 0.2s ease,
        background-color 0.2s ease;
}


.hx-careers .hx-job-card:hover {
    transform:
        translateY(-3px);

    border-color:
        rgba(
            230,
            190,
            138,
            0.30
        );

    background:
        #101010;
}


/* =========================================================
   JOB TOP
========================================================= */

.hx-careers .hx-job-top {
    display: flex;

    align-items: center;
    justify-content: space-between;

    gap:
        20px;

    margin-bottom:
        20px;
}


.hx-careers .hx-job-number {
    color:
        #E6BE8A;
}


.hx-careers .hx-job-icon {
    display: flex;

    align-items: center;
    justify-content: center;

    width:
        54px;

    height:
        54px;

    flex:
        0
        0
        54px;

    border:
        1px solid
        rgba(
            230,
            190,
            138,
            0.30
        );

    border-radius:
        50%;

    color:
        #E6BE8A;
}


/* =========================================================
   TAGS
========================================================= */

.hx-careers .hx-tags {
    display: flex;

    flex-wrap: wrap;

    gap:
        7px;

    margin-bottom:
        22px;
}


.hx-careers .hx-tags span {
    padding:
        6px
        9px;

    border:
        1px solid
        rgba(
            230,
            190,
            138,
            0.14
        );

    border-radius:
        4px;

    background:
        rgba(
            230,
            190,
            138,
            0.07
        );

    color:
        #E6BE8A;

    font-size:
        10px;

    text-transform:
        uppercase;
}


.hx-careers .hx-job-card h3 {
    margin-bottom:
        18px;
}


.hx-careers .hx-job-card > p {
    min-height:
        70px;

    margin-bottom:
        0;
}


/* =========================================================
   JOB INFO
========================================================= */

.hx-careers .hx-job-information {
    display: grid;

    grid-template-columns:
        repeat(
            2,
            minmax(
                0,
                1fr
            )
        );

    margin-top:
        28px;

    border-top:
        1px solid
        rgba(
            255,
            255,
            255,
            0.10
        );

    border-bottom:
        1px solid
        rgba(
            255,
            255,
            255,
            0.10
        );
}


.hx-careers
.hx-job-information
> div {
    min-width:
        0;

    padding:
        20px
        0;
}


.hx-careers
.hx-job-information
> div:nth-child(odd) {
    padding-right:
        20px;
}


.hx-careers
.hx-job-information
> div:nth-child(even) {
    padding-left:
        20px;

    border-left:
        1px solid
        rgba(
            255,
            255,
            255,
            0.10
        );
}


.hx-careers
.hx-job-information
> div:nth-child(n+3) {
    border-top:
        1px solid
        rgba(
            255,
            255,
            255,
            0.10
        );
}


.hx-careers
.hx-job-information
small {
    display:
        block;

    margin-bottom:
        6px;

    color:
        #777777;

    font-size:
        11px;

    text-transform:
        uppercase;
}


.hx-careers
.hx-job-information
strong {
    display:
        block;

    color:
        #E6BE8A;
}


/* =========================================================
   JOB ACTION
========================================================= */

.hx-careers .hx-job-actions {
    display:
        flex;

    flex-wrap:
        wrap;

    gap:
        10px;

    margin-top:
        28px;
}


/* =========================================================
   WORK BOX
========================================================= */

.hx-careers .hx-work-section {
    padding-top:
        0;
}


.hx-careers .hx-work-box {
    display:
        grid;

    grid-template-columns:
        minmax(
            0,
            0.9fr
        )
        minmax(
            0,
            1.1fr
        );

    gap:
        60px;

    align-items:
        center;

    padding:
        50px;

    border:
        1px solid
        rgba(
            255,
            255,
            255,
            0.10
        );

    border-radius:
        16px;

    background:
        #0c0c0c;
}


/* =========================================================
   PROJECT TAGS
========================================================= */

.hx-careers .hx-project-tags {
    display:
        flex;

    flex-wrap:
        wrap;

    gap:
        9px;
}


.hx-careers
.hx-project-tags
span {
    padding:
        10px
        14px;

    border:
        1px solid
        rgba(
            255,
            255,
            255,
            0.10
        );

    border-radius:
        6px;

    color:
        #bdbdbd;

    transition:
        border-color 0.2s ease,
        color 0.2s ease,
        background-color 0.2s ease;
}


.hx-careers
.hx-project-tags
span:hover {
    border-color:
        rgba(
            230,
            190,
            138,
            0.30
        );

    color:
        #E6BE8A;

    background:
        rgba(
            230,
            190,
            138,
            0.04
        );
}


/* =========================================================
   BENEFITS
========================================================= */

.hx-careers .hx-benefits-grid {
    display:
        grid;

    grid-template-columns:
        repeat(
            4,
            minmax(
                0,
                1fr
            )
        );

    border-top:
        1px solid
        rgba(
            255,
            255,
            255,
            0.10
        );

    border-bottom:
        1px solid
        rgba(
            255,
            255,
            255,
            0.10
        );
}


.hx-careers .hx-benefit {
    min-width:
        0;

    padding:
        32px;

    border-right:
        1px solid
        rgba(
            255,
            255,
            255,
            0.10
        );
}


.hx-careers
.hx-benefit:last-child {
    border-right:
        0;
}


.hx-careers
.hx-benefit-number {
    display:
        inline-block;

    margin-bottom:
        22px;

    color:
        #E6BE8A;
}


.hx-careers .hx-benefit h3 {
    margin-bottom:
        12px;
}


/* =========================================================
   PROCESS
========================================================= */

.hx-careers .hx-process-grid {
    display:
        grid;

    grid-template-columns:
        repeat(
            5,
            minmax(
                0,
                1fr
            )
        );

    gap:
        18px;
}


.hx-careers
.hx-process-grid
article {
    min-width:
        0;

    padding:
        24px;

    border-top:
        1px solid
        rgba(
            230,
            190,
            138,
            0.30
        );
}


.hx-careers
.hx-process-number {
    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    width:
        50px;

    height:
        50px;

    margin-bottom:
        20px;

    border:
        1px solid
        rgba(
            230,
            190,
            138,
            0.30
        );

    border-radius:
        50%;

    color:
        #E6BE8A;
}


/* =========================================================
   CTA
========================================================= */

.hx-careers .hx-cta-section {
    padding-top:
        20px;
}


.hx-careers .hx-career-cta {
    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        40px;

    padding:
        42px;

    border:
        1px solid
        rgba(
            230,
            190,
            138,
            0.30
        );

    border-radius:
        16px;

    background:
        #0c0c0c;
}


.hx-careers
.hx-career-cta
p {
    margin-bottom:
        0;
}


/* =========================================================
   BODY WHEN POPUP OPEN
========================================================= */

body.hx-modal-open {
    overflow:
        hidden !important;

    overscroll-behavior:
        none !important;
}


/* =========================================================
   POPUP WRAPPER
   APPLY FORM + VIEW POSITION

   IMPORTANT:
   These .elementor-2227 .elementor-element.elementor-element-0f6df40s use IDs because JS may move
   the popups directly under <body>.
========================================================= */

#hx-job-modal,
#hx-application-modal {
    position:
        fixed !important;

    top:
        var(--hx-popup-top) !important;

    right:
        0 !important;

    bottom:
        0 !important;

    left:
        0 !important;

    width:
        100vw !important;

    max-width:
        none !important;

    height:
        calc(
            100dvh -
            var(--hx-popup-top)
        ) !important;

    margin:
        0 !important;

    padding:
        10px
        16px
        16px !important;

    z-index:
        2147483000 !important;

    display:
        flex !important;

    align-items:
        flex-start !important;

    justify-content:
        center !important;

    overflow:
        hidden !important;

    opacity:
        0;

    visibility:
        hidden;

    pointer-events:
        none;

    isolation:
        isolate;

    transition:
        opacity 0.18s ease,
        visibility 0.18s ease;
}


/* =========================================================
   VIEWPORT FALLBACK
========================================================= */

@supports not (height: 100dvh) {

    #hx-job-modal,
    #hx-application-modal {
        height:
            calc(
                100vh -
                var(--hx-popup-top)
            ) !important;
    }

}


/* =========================================================
   HIDDEN POPUP
========================================================= */

#hx-job-modal:not(.is-active),
#hx-application-modal:not(.is-active) {
    opacity:
        0 !important;

    visibility:
        hidden !important;

    pointer-events:
        none !important;
}


/* =========================================================
   ACTIVE POPUP
========================================================= */

#hx-job-modal.is-active,
#hx-application-modal.is-active {
    opacity:
        1 !important;

    visibility:
        visible !important;

    pointer-events:
        auto !important;
}


/* =========================================================
   POPUP OVERLAY
========================================================= */

#hx-job-modal
.hx-modal-overlay,

#hx-application-modal
.hx-modal-overlay {
    position:
        absolute !important;

    inset:
        0 !important;

    z-index:
        1 !important;

    background:
        rgba(
            0,
            0,
            0,
            0.90
        ) !important;

    cursor:
        pointer;
}


/* =========================================================
   MODAL DIALOG
========================================================= */

#hx-job-modal
.hx-modal-dialog,

#hx-application-modal
.hx-modal-dialog {
    position:
        relative !important;

    z-index:
        2 !important;

    display:
        block !important;

    height:
        auto !important;

    margin:
        0
        auto !important;

    overflow-x:
        hidden !important;

    overflow-y:
        auto !important;

    overscroll-behavior:
        contain;

    -webkit-overflow-scrolling:
        touch;

    border:
        1px solid
        rgba(
            230,
            190,
            138,
            0.34
        ) !important;

    border-radius:
        14px !important;

    background:
        #0c0c0c !important;

    box-shadow:
        0
        18px
        48px
        rgba(
            0,
            0,
            0,
            0.42
        ) !important;

    scrollbar-width:
        thin;

    scrollbar-color:
        #E6BE8A
        #151515;
}


/* =========================================================
   APPLY FORM DIALOG
========================================================= */

#hx-application-modal
.hx-application-dialog {
    width:
        min(
            1000px,
            calc(
                100vw - 32px
            )
        ) !important;

    max-width:
        1000px !important;

    max-height:
        calc(
            100dvh -
            var(--hx-popup-top) -
            26px
        ) !important;

    padding:
        16px
        38px
        38px !important;
}


/* =========================================================
   VIEW POSITION DIALOG
========================================================= */

#hx-job-modal
.hx-job-dialog {
    width:
        min(
            940px,
            calc(
                100vw - 32px
            )
        ) !important;

    max-width:
        940px !important;

    max-height:
        calc(
            100dvh -
            var(--hx-popup-top) -
            26px
        ) !important;

    padding:
        16px
        38px
        38px !important;
}


/* =========================================================
   POPUP OLD BROWSER HEIGHT
========================================================= */

@supports not (height: 100dvh) {

    #hx-job-modal
    .hx-job-dialog,

    #hx-application-modal
    .hx-application-dialog {
        max-height:
            calc(
                100vh -
                var(--hx-popup-top) -
                26px
            ) !important;
    }

}


/* =========================================================
   MODAL SCROLLBAR
========================================================= */

#hx-job-modal
.hx-modal-dialog::-webkit-scrollbar,

#hx-application-modal
.hx-modal-dialog::-webkit-scrollbar {
    width:
        6px;
}


#hx-job-modal
.hx-modal-dialog::-webkit-scrollbar-track,

#hx-application-modal
.hx-modal-dialog::-webkit-scrollbar-track {
    background:
        #151515;
}


#hx-job-modal
.hx-modal-dialog::-webkit-scrollbar-thumb,

#hx-application-modal
.hx-modal-dialog::-webkit-scrollbar-thumb {
    background:
        #E6BE8A;

    border-radius:
        999px;
}


/* =========================================================
   CLOSE BUTTON
   STAYS VISIBLE WHEN SCROLLING
========================================================= */

#hx-job-modal
.hx-modal-close,

#hx-application-modal
.hx-modal-close {
    position:
        sticky !important;

    top:
        0 !important;

    z-index:
        9999 !important;

    display:
        flex !important;

    align-items:
        center !important;

    justify-content:
        center !important;

    float:
        none !important;

    width:
        44px !important;

    height:
        44px !important;

    min-width:
        44px !important;

    min-height:
        44px !important;

    margin:
        0
        0
        8px
        auto !important;

    padding:
        0 !important;

    border:
        1px solid
        rgba(
            230,
            190,
            138,
            0.42
        ) !important;

    border-radius:
        50% !important;

    background:
        #0c0c0c !important;

    color:
        #E6BE8A !important;

    -webkit-text-fill-color:
        #E6BE8A !important;

    font-family:
        Arial,
        sans-serif !important;

    font-size:
        27px !important;

    font-weight:
        400 !important;

    line-height:
        1 !important;

    cursor:
        pointer !important;

    touch-action:
        manipulation;

    box-shadow:
        0
        4px
        14px
        rgba(
            0,
            0,
            0,
            0.38
        ) !important;
}


/* =========================================================
   CLOSE HOVER
========================================================= */

#hx-job-modal
.hx-modal-close:hover,

#hx-job-modal
.hx-modal-close:focus,

#hx-application-modal
.hx-modal-close:hover,

#hx-application-modal
.hx-modal-close:focus {
    background:
        #E6BE8A !important;

    border-color:
        #E6BE8A !important;

    color:
        #0c0c0c !important;

    -webkit-text-fill-color:
        #0c0c0c !important;
}


/* =========================================================
   APPLICATION HEADER
========================================================= */

#hx-application-modal
.hx-application-header {
    width:
        100%;

    margin-bottom:
        30px;

    padding:
        0 !important;
}


#hx-application-modal
.hx-application-header
p {
    max-width:
        700px;

    margin-bottom:
        0;
}


/* =========================================================
   APPLICATION FORM
========================================================= */

#hx-application-modal
.hx-career-form {
    width:
        100%;
}


/* =========================================================
   FORM GRID
========================================================= */

#hx-application-modal
.hx-form-grid {
    display:
        grid;

    grid-template-columns:
        repeat(
            2,
            minmax(
                0,
                1fr
            )
        );

    gap:
        20px;
}


#hx-application-modal
.hx-field {
    min-width:
        0;
}


#hx-application-modal
.hx-field-full {
    grid-column:
        1 / -1;
}


/* =========================================================
   FORM LABELS
========================================================= */

#hx-application-modal
.hx-field
label:not(.hx-file-upload):not(.hx-checkbox) {
    display:
        block;

    margin-bottom:
        8px;

    color:
        #d5d5d5;
}


#hx-application-modal
.hx-field
label:not(.hx-file-upload):not(.hx-checkbox)
> span {
    color:
        #E6BE8A;
}


/* =========================================================
   INPUT SELECT TEXTAREA
========================================================= */

#hx-application-modal
.hx-career-form
input:not([type="checkbox"]),

#hx-application-modal
.hx-career-form
select,

#hx-application-modal
.hx-career-form
textarea {
    width:
        100% !important;

    max-width:
        100% !important;

    min-height:
        52px;

    padding:
        13px
        15px !important;

    border:
        1px solid
        rgba(
            255,
            255,
            255,
            0.14
        ) !important;

    border-radius:
        5px !important;

    outline:
        none !important;

    background:
        #0c0c0c !important;

    color:
        #ffffff !important;

    -webkit-text-fill-color:
        #ffffff !important;

    box-shadow:
        none !important;

    transition:
        border-color 0.18s ease,
        background-color 0.18s ease;
}


/* =========================================================
   TEXTAREA
========================================================= */

#hx-application-modal
.hx-career-form
textarea {
    min-height:
        120px;

    resize:
        vertical;
}


/* =========================================================
   FIELD FOCUS
========================================================= */

#hx-application-modal
.hx-career-form
input:focus,

#hx-application-modal
.hx-career-form
select:focus,

#hx-application-modal
.hx-career-form
textarea:focus {
    border-color:
        #E6BE8A !important;

    background:
        #101010 !important;
}


/* =========================================================
   PLACEHOLDER
========================================================= */

#hx-application-modal
.hx-career-form
input::placeholder,

#hx-application-modal
.hx-career-form
textarea::placeholder {
    color:
        #5d5d5d !important;

    -webkit-text-fill-color:
        #5d5d5d !important;

    opacity:
        1;
}


/* =========================================================
   SELECT / DATE
========================================================= */

#hx-application-modal
.hx-career-form
select,

#hx-application-modal
input[type="date"] {
    color-scheme:
        dark;
}


/* =========================================================
   FILE INPUT
========================================================= */

#hx-application-modal
.hx-file-input {
    position:
        absolute !important;

    width:
        1px !important;

    height:
        1px !important;

    opacity:
        0 !important;

    overflow:
        hidden !important;

    pointer-events:
        none !important;
}


/* =========================================================
   FILE UPLOAD BOX
========================================================= */

#hx-application-modal
.hx-file-upload {
    display:
        flex;

    align-items:
        center;

    gap:
        15px;

    width:
        100%;

    padding:
        17px;

    border:
        1px dashed
        rgba(
            230,
            190,
            138,
            0.30
        );

    border-radius:
        7px;

    background:
        rgba(
            230,
            190,
            138,
            0.02
        );

    cursor:
        pointer;

    transition:
        border-color 0.18s ease,
        background-color 0.18s ease;
}


#hx-application-modal
.hx-file-upload:hover {
    border-color:
        #E6BE8A;

    background:
        rgba(
            230,
            190,
            138,
            0.05
        );
}


#hx-application-modal
.hx-file-icon {
    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    width:
        45px;

    height:
        45px;

    flex:
        0
        0
        45px;

    border:
        1px solid
        rgba(
            230,
            190,
            138,
            0.30
        );

    border-radius:
        6px;

    color:
        #E6BE8A;

    font-size:
        11px;
}


#hx-application-modal
.hx-file-info {
    flex:
        1;

    min-width:
        0;
}


#hx-application-modal
.hx-file-upload
strong {
    display:
        block;

    overflow-wrap:
        anywhere;

    color:
        #ffffff;
}


#hx-application-modal
.hx-file-upload
small {
    display:
        block;

    margin-top:
        3px;

    color:
        #777777;
}


#hx-application-modal
.hx-file-action {
    color:
        #E6BE8A;
}


/* =========================================================
   CHECKBOX
========================================================= */

#hx-application-modal
.hx-checkbox {
    display:
        flex;

    align-items:
        flex-start;

    gap:
        12px;

    color:
        #929292;

    cursor:
        pointer;
}


#hx-application-modal
.hx-checkbox
input {
    width:
        17px;

    height:
        17px;

    flex:
        0
        0
        17px;

    margin-top:
        3px;

    accent-color:
        #E6BE8A;
}


/* =========================================================
   FORM MESSAGE
========================================================= */

#hx-application-modal
.hx-form-message {
    display:
        none;

    margin-top:
        20px;

    padding:
        14px
        16px;

    border-radius:
        5px;
}


#hx-application-modal
.hx-form-message.is-success {
    display:
        block;

    border:
        1px solid
        rgba(
            87,
            190,
            115,
            0.35
        );

    background:
        rgba(
            87,
            190,
            115,
            0.08
        );

    color:
        #9fdcaf;
}


#hx-application-modal
.hx-form-message.is-error {
    display:
        block;

    border:
        1px solid
        rgba(
            220,
            90,
            90,
            0.35
        );

    background:
        rgba(
            220,
            90,
            90,
            0.08
        );

    color:
        #e9a1a1;
}


/* =========================================================
   SUBMIT BUTTON
========================================================= */

#hx-application-modal
.hx-submit-btn {
    width:
        100%;

    margin-top:
        25px;
}


#hx-application-modal
.hx-submit-btn[disabled] {
    opacity:
        0.55;

    cursor:
        wait;

    transform:
        none !important;
}


/* =========================================================
   VIEW POSITION CONTENT
========================================================= */

#hx-job-modal
#hx-job-modal-content {
    width:
        100%;
}


/* =========================================================
   VIEW POSITION TAGS
========================================================= */

#hx-job-modal
.hx-modal-tags {
    display:
        flex;

    flex-wrap:
        wrap;

    gap:
        7px;

    margin-bottom:
        20px;
}


#hx-job-modal
.hx-modal-tags
span {
    padding:
        6px
        9px;

    border:
        1px solid
        rgba(
            230,
            190,
            138,
            0.14
        );

    border-radius:
        4px;

    background:
        rgba(
            230,
            190,
            138,
            0.07
        );

    color:
        #E6BE8A;

    font-size:
        10px;

    text-transform:
        uppercase;
}


/* =========================================================
   JOB POPUP SUMMARY
========================================================= */

#hx-job-modal
.hx-modal-summary {
    margin-top:
        18px;

    margin-bottom:
        0;
}


/* =========================================================
   JOB POPUP HIGHLIGHTS
========================================================= */

#hx-job-modal
.hx-modal-highlights {
    display:
        grid;

    grid-template-columns:
        repeat(
            2,
            minmax(
                0,
                1fr
            )
        );

    gap:
        10px;

    margin:
        28px
        0;
}


#hx-job-modal
.hx-modal-highlights
> div {
    min-width:
        0;

    padding:
        18px;

    border:
        1px solid
        rgba(
            255,
            255,
            255,
            0.10
        );

    border-radius:
        7px;

    background:
        #0c0c0c;
}


#hx-job-modal
.hx-modal-highlights
small {
    display:
        block;

    margin-bottom:
        5px;

    color:
        #777777;
}


#hx-job-modal
.hx-modal-highlights
strong {
    display:
        block;

    color:
        #E6BE8A;
}


/* =========================================================
   JOB POPUP SECTIONS
========================================================= */

#hx-job-modal
.hx-modal-content-section {
    padding-top:
        26px;

    margin-top:
        26px;

    border-top:
        1px solid
        rgba(
            255,
            255,
            255,
            0.10
        );
}


#hx-job-modal
.hx-modal-content-section
h4 {
    margin-bottom:
        15px;
}


/* =========================================================
   JOB POPUP LIST
========================================================= */

#hx-job-modal
.hx-modal-list {
    margin:
        0;

    padding:
        0;

    list-style:
        none;
}


#hx-job-modal
.hx-modal-list
li {
    position:
        relative;

    margin-bottom:
        10px;

    padding-left:
        20px;

    color:
        #aaaaaa;
}


#hx-job-modal
.hx-modal-list
li::before {
    content:
        "";

    position:
        absolute;

    left:
        0;

    top:
        0.65em;

    width:
        5px;

    height:
        5px;

    border-radius:
        50%;

    background:
        #E6BE8A;
}


/* =========================================================
   JOB POPUP CTA
========================================================= */

#hx-job-modal
.hx-modal-actions {
    display:
        flex;

    margin-top:
        30px;

    padding-top:
        26px;

    border-top:
        1px solid
        rgba(
            255,
            255,
            255,
            0.10
        );
}


/* =========================================================
   BELOW 1440PX
========================================================= */

@media (max-width: 1440px) {

    .hx-careers .hx-container {
        width:
            calc(
                100% - 60px
            );
    }

}


/* =========================================================
   TABLET / SMALL LAPTOP
========================================================= */

@media (max-width: 1024px) {

    /* CONTAINER */

    .hx-careers .hx-container {
        width:
            calc(
                100% - 40px
            );
    }


    /* H1 */

    .hx-careers h1 {
        font-size:
            54px !important;

        font-weight:
            550 !important;

        letter-spacing:
            -1.2px !important;
    }


    /* HERO */

    .hx-careers
    .hx-careers-hero {
        min-height:
            auto;

        padding:
            85px
            0;
    }


    .hx-careers
    .hx-hero-layout {
        grid-template-columns:
            1fr;

        gap:
            50px;
    }


    .hx-careers
    .hx-tech-visual {
        width:
            min(
                700px,
                100%
            );

        margin:
            0
            auto;
    }


    /* JOB */

    .hx-careers
    .hx-jobs-grid {
        grid-template-columns:
            1fr;
    }


    /* WORK */

    .hx-careers
    .hx-work-box {
        grid-template-columns:
            1fr;

        gap:
            35px;
    }


    /* BENEFITS */

    .hx-careers
    .hx-benefits-grid {
        grid-template-columns:
            repeat(
                2,
                minmax(
                    0,
                    1fr
                )
            );
    }


    .hx-careers
    .hx-benefit:nth-child(2n) {
        border-right:
            0;
    }


    .hx-careers
    .hx-benefit:nth-child(-n+2) {
        border-bottom:
            1px solid
            rgba(
                255,
                255,
                255,
                0.10
            );
    }


    /* PROCESS */

    .hx-careers
    .hx-process-grid {
        grid-template-columns:
            repeat(
                3,
                minmax(
                    0,
                    1fr
                )
            );
    }


    /* POPUPS */

    #hx-job-modal,
    #hx-application-modal {
        padding:
            8px
            12px
            12px !important;
    }


    #hx-job-modal
    .hx-job-dialog,

    #hx-application-modal
    .hx-application-dialog {
        width:
            calc(
                100vw - 24px
            ) !important;

        max-width:
            none !important;

        max-height:
            calc(
                100dvh -
                var(--hx-popup-top) -
                20px
            ) !important;

        padding:
            12px
            26px
            32px !important;
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767px) {

    /* =====================================================
       CONTAINER
    ====================================================== */

    .hx-careers
    .hx-container {
        width:
            calc(
                100% - 28px
            );
    }


    /* =====================================================
       H1
    ====================================================== */

    .hx-careers h1 {
        font-size:
            42px !important;

        font-weight:
            550 !important;

        line-height:
            1.07 !important;

        letter-spacing:
            -0.8px !important;
    }


    /* =====================================================
       EYEBROW
    ====================================================== */

    .hx-careers
    .hx-eyebrow,

    #hx-application-modal
    .hx-eyebrow {
        font-size:
            14px !important;

        padding:
            5px
            13px;

        margin-bottom:
            12px;
    }


    /* =====================================================
       SECTION
    ====================================================== */

    .hx-careers
    .hx-section {
        padding:
            65px
            0;
    }


    .hx-careers
    .hx-section-heading {
        margin-bottom:
            38px;
    }


    /* =====================================================
       HERO
    ====================================================== */

    .hx-careers
    .hx-careers-hero {
        min-height:
            auto;

        padding:
            65px
            0;
    }


    .hx-careers
    .hx-hero-layout {
        gap:
            45px;
    }


    .hx-careers
    .hx-careers-grid {
        display:
            none;
    }


    /* =====================================================
       POINTS
    ====================================================== */

    .hx-careers
    .hx-hero-points {
        display:
            grid;

        grid-template-columns:
            repeat(
                2,
                minmax(
                    0,
                    1fr
                )
            );

        gap:
            12px;
    }


    /* =====================================================
       HERO BUTTONS
    ====================================================== */

    .hx-careers
    .hx-button-row {
        display:
            grid;

        grid-template-columns:
            1fr;
    }


    .hx-careers
    .hx-button-row
    .hx-btn {
        width:
            100%;
    }


    /* =====================================================
       TECH VISUAL
    ====================================================== */

    .hx-careers
    .hx-tech-visual {
        min-height:
            365px;
    }


    .hx-careers
    .hx-code-window {
        border-radius:
            12px;
    }


    .hx-careers
    .hx-code-body {
        min-height:
            280px;

        padding:
            20px;

        font-size:
            10px;
    }


    .hx-careers
    .hx-tech-chip {
        width:
            48px;

        height:
            48px;
    }


    .hx-careers
    .hx-chip-ai {
        width:
            58px;

        height:
            58px;
    }


    /* =====================================================
       JOB CARD
    ====================================================== */

    .hx-careers
    .hx-job-card {
        padding:
            24px;
    }


    .hx-careers
    .hx-job-card
    > p {
        min-height:
            0;
    }


    /* =====================================================
       JOB INFO
    ====================================================== */

    .hx-careers
    .hx-job-information {
        grid-template-columns:
            1fr;
    }


    .hx-careers
    .hx-job-information
    > div,

    .hx-careers
    .hx-job-information
    > div:nth-child(odd),

    .hx-careers
    .hx-job-information
    > div:nth-child(even) {
        padding:
            16px
            0;

        border-left:
            0;

        border-top:
            1px solid
            rgba(
                255,
                255,
                255,
                0.10
            );
    }


    .hx-careers
    .hx-job-information
    > div:first-child {
        border-top:
            0;
    }


    /* =====================================================
       JOB BUTTONS
    ====================================================== */

    .hx-careers
    .hx-job-actions {
        display:
            grid;

        grid-template-columns:
            1fr;
    }


    .hx-careers
    .hx-job-actions
    .hx-btn {
        width:
            100%;
    }


    /* =====================================================
       WORK
    ====================================================== */

    .hx-careers
    .hx-work-box {
        padding:
            28px
            20px;
    }


    /* =====================================================
       BENEFITS
    ====================================================== */

    .hx-careers
    .hx-benefits-grid {
        grid-template-columns:
            1fr;
    }


    .hx-careers
    .hx-benefit {
        border-right:
            0 !important;

        border-bottom:
            1px solid
            rgba(
                255,
                255,
                255,
                0.10
            ) !important;
    }


    .hx-careers
    .hx-benefit:last-child {
        border-bottom:
            0 !important;
    }


    /* =====================================================
       PROCESS
    ====================================================== */

    .hx-careers
    .hx-process-grid {
        grid-template-columns:
            1fr;

        gap:
            10px;
    }


    /* =====================================================
       CTA
    ====================================================== */

    .hx-careers
    .hx-career-cta {
        display:
            block;

        padding:
            28px
            22px;
    }


    .hx-careers
    .hx-career-cta
    .hx-btn {
        width:
            100%;

        margin-top:
            24px;
    }


    /* =====================================================
       POPUP WRAPPER
    ====================================================== */

    #hx-job-modal,
    #hx-application-modal {
        padding:
            5px
            6px
            6px !important;
    }


    /* =====================================================
       POPUP DIALOG
    ====================================================== */

    #hx-job-modal
    .hx-job-dialog,

    #hx-application-modal
    .hx-application-dialog {
        width:
            calc(
                100vw - 12px
            ) !important;

        max-width:
            none !important;

        height:
            auto !important;

        max-height:
            calc(
                100dvh -
                var(--hx-popup-top) -
                12px
            ) !important;

        margin:
            0 !important;

        padding:
            7px
            15px
            24px !important;

        border-radius:
            10px !important;
    }


    /* =====================================================
       POPUP CLOSE
    ====================================================== */

    #hx-job-modal
    .hx-modal-close,

    #hx-application-modal
    .hx-modal-close {
        width:
            42px !important;

        height:
            42px !important;

        min-width:
            42px !important;

        min-height:
            42px !important;

        margin:
            0
            0
            8px
            auto !important;

        font-size:
            25px !important;
    }


    /* =====================================================
       APPLICATION HEADER
    ====================================================== */

    #hx-application-modal
    .hx-application-header {
        margin-bottom:
            24px;
    }


    /* =====================================================
       APPLICATION FORM
       ONE COLUMN
    ====================================================== */

    #hx-application-modal
    .hx-form-grid {
        grid-template-columns:
            1fr !important;

        gap:
            16px;
    }


    #hx-application-modal
    .hx-field-full {
        grid-column:
            auto !important;
    }


    /* =====================================================
       PREVENT IOS FIELD ZOOM
    ====================================================== */

    #hx-application-modal
    .hx-career-form
    input:not([type="checkbox"]),

    #hx-application-modal
    .hx-career-form
    select,

    #hx-application-modal
    .hx-career-form
    textarea {
        font-size:
            16px !important;
    }


    /* =====================================================
       FILE UPLOAD MOBILE
    ====================================================== */

    #hx-application-modal
    .hx-file-upload {
        display:
            grid;

        grid-template-columns:
            auto
            minmax(
                0,
                1fr
            );

        align-items:
            center;

        gap:
            12px;

        padding:
            14px;
    }


    #hx-application-modal
    .hx-file-action {
        grid-column:
            1 / -1;
    }


    /* =====================================================
       VIEW POSITION HIGHLIGHTS
    ====================================================== */

    #hx-job-modal
    .hx-modal-highlights {
        grid-template-columns:
            1fr !important;

        gap:
            8px;

        margin:
            20px
            0;
    }


    #hx-job-modal
    .hx-modal-highlights
    > div {
        padding:
            14px;
    }


    /* =====================================================
       VIEW POSITION SECTIONS
    ====================================================== */

    #hx-job-modal
    .hx-modal-content-section {
        margin-top:
            22px;

        padding-top:
            22px;
    }


    /* =====================================================
       VIEW POSITION BUTTON
    ====================================================== */

    #hx-job-modal
    .hx-modal-actions {
        display:
            block;

        margin-top:
            24px;

        padding-top:
            20px;
    }


    #hx-job-modal
    .hx-modal-actions
    .hx-btn {
        width:
            100% !important;
    }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 480px) {

    .hx-careers
    .hx-container {
        width:
            calc(
                100% - 22px
            );
    }


    /* H1 */

    .hx-careers h1 {
        font-size:
            36px !important;

        font-weight:
            550 !important;

        line-height:
            1.08 !important;

        letter-spacing:
            -0.6px !important;
    }


    /* HERO POINTS */

    .hx-careers
    .hx-hero-points {
        grid-template-columns:
            1fr;
    }


    /* REMOVE SOME CHIPS */

    .hx-careers
    .hx-chip-js,

    .hx-careers
    .hx-chip-wp {
        display:
            none;
    }


    /* JOB */

    .hx-careers
    .hx-job-card {
        padding:
            22px
            18px;
    }


    /* POPUP */

    #hx-job-modal,
    #hx-application-modal {
        padding:
            4px !important;
    }


    #hx-job-modal
    .hx-job-dialog,

    #hx-application-modal
    .hx-application-dialog {
        width:
            calc(
                100vw - 8px
            ) !important;

        max-height:
            calc(
                100dvh -
                var(--hx-popup-top) -
                8px
            ) !important;

        padding:
            6px
            12px
            22px !important;

        border-radius:
            8px !important;
    }


    /* CLOSE */

    #hx-job-modal
    .hx-modal-close,

    #hx-application-modal
    .hx-modal-close {
        width:
            40px !important;

        height:
            40px !important;

        min-width:
            40px !important;

        min-height:
            40px !important;

        font-size:
            24px !important;
    }


    /* TITLE WRAP */

    #hx-job-modal h2,
    #hx-application-modal h2 {
        overflow-wrap:
            anywhere;
    }

}


/* =========================================================
   VERY SMALL MOBILE
========================================================= */

@media (max-width: 360px) {

    .hx-careers h1 {
        font-size:
            33px !important;
    }


    .hx-careers
    .hx-eyebrow,

    #hx-application-modal
    .hx-eyebrow {
        font-size:
            13px !important;
    }


    #hx-job-modal
    .hx-job-dialog,

    #hx-application-modal
    .hx-application-dialog {
        padding-left:
            10px !important;

        padding-right:
            10px !important;
    }

}


/* =========================================================
   SHORT SCREEN / LANDSCAPE MOBILE
========================================================= */

@media
(max-height: 600px)
and
(orientation: landscape) {

    #hx-job-modal,
    #hx-application-modal {
        padding:
            3px
            8px !important;
    }


    #hx-job-modal
    .hx-job-dialog,

    #hx-application-modal
    .hx-application-dialog {
        max-height:
            calc(
                100dvh -
                var(--hx-popup-top) -
                6px
            ) !important;

        padding:
            4px
            18px
            20px !important;
    }


    #hx-job-modal
    .hx-modal-close,

    #hx-application-modal
    .hx-modal-close {
        width:
            38px !important;

        height:
            38px !important;

        min-width:
            38px !important;

        min-height:
            38px !important;

        margin-bottom:
            4px !important;
    }


    #hx-application-modal
    .hx-application-header {
        margin-bottom:
            18px;
    }

}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

    .hx-careers *,
    .hx-careers *::before,
    .hx-careers *::after,

    #hx-job-modal *,
    #hx-application-modal * {
        scroll-behavior:
            auto !important;

        transition-duration:
            0.01ms !important;

        animation-duration:
            0.01ms !important;

        animation-iteration-count:
            1 !important;
    }

}/* End custom CSS */