/* ============================================================
   Shawnee Specialties - forms (Request a Quote, careers jobs + apply modal)
   Loaded on /contact-page and /careers only.
   Part 1 is the Joomla template's form and careers rules, unchanged except
   colors and fonts remapped to the Cold Precision tokens (ssi.css).
   Part 2, at the end, restyles them to the new material.
   ============================================================ */

/* ============================================================
   CONTACT US ARTICLE - all form styles
   Every rule scoped to #shawnee-contact-wrap so there is zero
   risk of collision with any other selector in this file.
   TinyMCE never sees these - they live here, not in the article.
   ============================================================ */

/* -- Outer wrapper --------------------------------------------- */
#shawnee-contact-wrap {
    display:        flex;
    justify-content: center;
    align-items:    flex-start;
    padding:        24px 0 40px;
    font-family:    var(--f-body);
    width:          100%;
    box-sizing:     border-box;
    overflow:       hidden;
}

/* -- Card ------------------------------------------------------ */
#shawnee-contact-wrap .sc-box {
    width:          100%;
    max-width:      960px;
    background:     var(--ink-2);
    border:         1px solid var(--line-2);
    border-radius:  14px;
    overflow:       hidden;
    box-sizing:     border-box;
    box-shadow:
        0 0 0 1px rgba(229,57,53,0.08),
        0 8px 32px rgba(0,0,0,0.55),
        0 2px 8px rgba(0,0,0,0.4);
}

/* -- Header bar ------------------------------------------------ */
#shawnee-contact-wrap .sc-header {
    background:     var(--ink-1);
    border-bottom:  2px solid #E53935;
    padding:        28px 36px 22px;
    position:       relative;
    box-sizing:     border-box;
}
#shawnee-contact-wrap .sc-header::after {
    content:        "";
    position:       absolute;
    bottom:         -2px;
    left:           36px;
    width:          60px;
    height:         2px;
    background:     var(--ice);
}
#shawnee-contact-wrap .sc-header h2 {
    font-family:    var(--f-display);
    font-size:      1.55rem;
    font-weight:    700;
    color:          var(--frost);
    margin:         0 0 6px;
    letter-spacing: 0.02em;
}
#shawnee-contact-wrap .sc-header p {
    font-size:  0.875rem;
    color:      rgba(201,213,223,0.65);
    margin:     0;
    line-height: 1.5;
}

/* -- Form body ------------------------------------------------- */
#shawnee-contact-wrap .sc-body {
    padding:    32px 36px 36px;
    box-sizing: border-box;
    width:      100%;
    overflow:   hidden;
}

/* -- Three-column row ------------------------------------------ */
#shawnee-contact-wrap .sc-row-3 {
    display:               grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap:                   18px;
}

/* -- Field wrapper --------------------------------------------- */
#shawnee-contact-wrap .sc-field {
    display:        flex;
    flex-direction: column;
    gap:            7px;
    margin-bottom:  18px;
    min-width:      0;
    box-sizing:     border-box;
}
#shawnee-contact-wrap .sc-field:last-of-type {
    margin-bottom: 0;
}

/* -- Labels ---------------------------------------------------- */
#shawnee-contact-wrap .sc-field label {
    font-family:    var(--f-display);
    font-size:      0.75rem;
    font-weight:    600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color:          rgba(201,213,223,0.75);
    user-select:    none;
    white-space:    nowrap;
}
#shawnee-contact-wrap .sc-field label .sc-req {
    color:       #E53935;
    margin-left: 3px;
}
#shawnee-contact-wrap .sc-attach-hint {
    font-weight:    400;
    text-transform: none;
    letter-spacing: 0;
    color:          rgba(201,213,223,0.4);
    font-size:      0.7rem;
}

/* -- Inputs & textarea ----------------------------------------- */
#shawnee-contact-wrap .sc-field input,
#shawnee-contact-wrap .sc-field textarea {
    width:       100%;
    max-width:   100%;
    box-sizing:  border-box;
    background:  var(--ink-1);
    border:      1px solid var(--line-2);
    border-radius: 8px;
    color:       var(--frost);
    font-family: var(--f-body);
    font-size:   0.9rem;
    padding:     11px 14px;
    outline:     none;
    transition:  border-color 0.2s ease, box-shadow 0.2s ease;
    -webkit-appearance: none;
    appearance:  none;
}
#shawnee-contact-wrap .sc-field input::placeholder,
#shawnee-contact-wrap .sc-field textarea::placeholder {
    color: rgba(201,213,223,0.28);
}
#shawnee-contact-wrap .sc-field input:focus,
#shawnee-contact-wrap .sc-field textarea:focus {
    border-color: var(--ice);
    box-shadow:   0 0 0 3px rgba(156,203,230,0.18);
}
#shawnee-contact-wrap .sc-field input.sc-error,
#shawnee-contact-wrap .sc-field textarea.sc-error {
    border-color: #E53935;
    box-shadow:   0 0 0 3px rgba(229,57,53,0.18);
}
#shawnee-contact-wrap .sc-field textarea {
    resize:      vertical;
    line-height: 1.55;
}

/* -- Message textarea size (authoritative) --------------------- */
#shawnee-contact-wrap #sc-message {
    width:      100%   !important;
    max-width:  100%   !important;
    height:     200px  !important;
    min-height: 200px  !important;
    resize:     vertical !important;
    box-sizing: border-box !important;
}

/* -- Hidden file input ----------------------------------------- */
#shawnee-contact-wrap #sc-file-input {
    display: none !important;
}

/* -- PDF drop zone --------------------------------------------- */
#shawnee-contact-wrap .sc-dropzone {
    width:       100%;
    box-sizing:  border-box;
    border:      2px dashed var(--line-2);
    border-radius: 8px;
    padding:     20px 16px;
    text-align:  center;
    cursor:      pointer;
    transition:  border-color 0.2s ease, background 0.2s ease;
    background:  var(--ink-1);
    position:    relative;
    color:       rgba(201,213,223,0.35);
}
#shawnee-contact-wrap .sc-dropzone:hover,
#shawnee-contact-wrap .sc-dropzone.sc-drag-over {
    border-color: var(--ice);
    background:   rgba(156,203,230,0.05);
}
#shawnee-contact-wrap .sc-dropzone.sc-has-file {
    border-color: var(--ice);
    border-style: solid;
}
#shawnee-contact-wrap .sc-dropzone.sc-drop-error {
    border-color: #E53935;
    background:   rgba(229,57,53,0.04);
}
#shawnee-contact-wrap .sc-drop-icon {
    display: block;
    margin:  0 auto 8px;
    opacity: 0.45;
}
#shawnee-contact-wrap .sc-drop-label {
    font-family:    var(--f-display);
    font-size:      0.8rem;
    font-weight:    600;
    color:          rgba(201,213,223,0.6);
    letter-spacing: 0.04em;
    display:        block;
    margin-bottom:  4px;
}
#shawnee-contact-wrap .sc-drop-sub {
    font-size: 0.75rem;
    color:     rgba(201,213,223,0.35);
    display:   block;
}
#shawnee-contact-wrap .sc-drop-filename {
    display:     none;
    font-size:   0.82rem;
    color:       var(--ice);
    margin-top:  6px;
    font-family: var(--f-body);
    word-break:  break-all;
}
#shawnee-contact-wrap .sc-dropzone.sc-has-file .sc-drop-filename {
    display: block;
}
#shawnee-contact-wrap .sc-drop-clear {
    display:        none;
    margin-top:     8px;
    background:     none;
    border:         1px solid var(--line-2);
    border-radius:  6px;
    color:          rgba(201,213,223,0.5);
    font-family:    var(--f-display);
    font-size:      0.7rem;
    font-weight:    600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding:        4px 12px;
    cursor:         pointer;
    transition:     border-color 0.2s ease, color 0.2s ease;
}
#shawnee-contact-wrap .sc-drop-clear:hover {
    border-color: #E53935;
    color:        #E53935;
}
#shawnee-contact-wrap .sc-dropzone.sc-has-file .sc-drop-clear {
    display: inline-block;
}

/* -- Validation messages --------------------------------------- */
#shawnee-contact-wrap .sc-msg {
    font-size:      0.775rem;
    min-height:     1.1em;
    display:        block;
    color:          #E53935;
    letter-spacing: 0.01em;
}

/* -- Divider --------------------------------------------------- */
#shawnee-contact-wrap .sc-divider {
    border:     none;
    border-top: 1px solid var(--line-2);
    margin:     24px 0;
}

/* -- Submit row ------------------------------------------------ */
#shawnee-contact-wrap .sc-submit-wrap {
    display:         flex;
    justify-content: flex-end;
    align-items:     center;
    gap:             16px;
    flex-wrap:       wrap;
}
#shawnee-contact-wrap #sc-status {
    font-size: 0.85rem;
    color:     rgba(201,213,223,0.55);
    flex:      1;
    min-width: 0;
}
#shawnee-contact-wrap #sc-status.success {
    color:       var(--ice);
    font-weight: 600;
}
#shawnee-contact-wrap #sc-status.error-msg {
    color: #E53935;
}

/* -- Submit button --------------------------------------------- */
#shawnee-contact-wrap .sc-btn {
    font-family:    var(--f-display) !important;
    font-size:      0.95rem     !important;
    font-weight:    700         !important;
    letter-spacing: 0.07em      !important;
    text-transform: uppercase   !important;
    background:     #E53935     !important;
    color:          #fff        !important;
    border:         none        !important;
    border-radius:  8px         !important;
    padding:        12px 28px   !important;
    cursor:         pointer     !important;
    transition:     background 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease !important;
    box-shadow:     0 2px 8px rgba(229,57,53,0.30) !important;
    white-space:    nowrap;
}
#shawnee-contact-wrap .sc-btn:hover:not(:disabled) {
    background:  var(--ice) !important;
    box-shadow:  0 4px 16px rgba(245,166,35,0.35) !important;
    transform:   translateY(-1px) !important;
}
#shawnee-contact-wrap .sc-btn:active:not(:disabled) {
    transform: translateY(0) !important;
}
#shawnee-contact-wrap .sc-btn:disabled {
    opacity: 0.55       !important;
    cursor:  not-allowed !important;
}

/* -- Honeypot -------------------------------------------------- */
#shawnee-contact-wrap .sc-honeypot,
#shawnee-contact-wrap #sc-trap,
#shawnee-contact-wrap label[for="sc-trap"] {
    display:        none       !important;
    visibility:     hidden     !important;
    position:       absolute   !important;
    left:           -9999px    !important;
    width:          1px        !important;
    height:         1px        !important;
    overflow:       hidden     !important;
    pointer-events: none       !important;
}

/* -- Responsive: 1076px-1100px → 3-col drops to 2-col --------- */
@media (min-width: 1076px) and (max-width: 1100px) {
    #shawnee-contact-wrap .sc-row-3 {
        grid-template-columns: 1fr 1fr !important;
    }
}

/* -- Responsive: ≤1075px → single column, tighter padding ----- */
@media (max-width: 1075px) {
    #shawnee-contact-wrap .sc-row-3 {
        grid-template-columns: 1fr !important;
    }
    #shawnee-contact-wrap .sc-header,
    #shawnee-contact-wrap .sc-body {
        padding-left:  16px !important;
        padding-right: 16px !important;
    }
}

/* ============================================================
   CONTACT US ARTICLE - EXTENDED RFQ FORM ADDITIONS
   Append this block immediately after the existing
   "CONTACT US ARTICLE - all form styles" section and before
   the "CONTACT PAGE LAYOUT OVERRIDES" section.

   Everything here is additive. No existing rule is modified.
   All selectors stay scoped to #shawnee-contact-wrap.
   ============================================================ */

/* -- Hidden state --------------------------------------------
   .sc-field is display:flex and .sc-group is display:block,
   both of which beat the UA default for [hidden]. This rule
   restores it so conditional blocks actually collapse.        */
#shawnee-contact-wrap [hidden] {
    display: none !important;
}

/* -- Select elements -----------------------------------------
   The existing input/textarea rule does not cover <select>,
   so this mirrors it and adds a custom chevron.               */
#shawnee-contact-wrap .sc-field select {
    width:         100%;
    max-width:     100%;
    box-sizing:    border-box;
    background:    var(--ink-1);
    border:        1px solid var(--line-2);
    border-radius: 8px;
    color:         var(--frost);
    font-family:   var(--f-body);
    font-size:     0.9rem;
    padding:       11px 38px 11px 14px;
    outline:       none;
    cursor:        pointer;
    transition:    border-color 0.2s ease, box-shadow 0.2s ease;
    -webkit-appearance: none;
    -moz-appearance:    none;
    appearance:    none;
    background-image:
        linear-gradient(45deg,  transparent 50%, rgba(201,213,223,0.55) 50%),
        linear-gradient(135deg, rgba(201,213,223,0.55) 50%, transparent 50%);
    background-position: calc(100% - 19px) calc(50% + 2px),
                         calc(100% - 14px) calc(50% + 2px);
    background-size:     5px 5px, 5px 5px;
    background-repeat:   no-repeat;
}
#shawnee-contact-wrap .sc-field select:focus {
    border-color: var(--ice);
    box-shadow:   0 0 0 3px rgba(156,203,230,0.18);
}
#shawnee-contact-wrap .sc-field select.sc-error {
    border-color: #E53935;
    box-shadow:   0 0 0 3px rgba(229,57,53,0.18);
}
#shawnee-contact-wrap .sc-field select option {
    background: var(--ink-1);
    color:      var(--frost);
}

/* -- Purpose selector, sits alone at full width --------------- */
#shawnee-contact-wrap .sc-field-wide label {
    white-space: normal;
}

/* -- Two-column row, used inside fieldsets -------------------- */
#shawnee-contact-wrap .sc-row-2 {
    display:               grid;
    grid-template-columns: 1fr 1fr;
    gap:                   18px;
}

/* -- Conditional field groups --------------------------------- */
#shawnee-contact-wrap .sc-group {
    border:        1px solid var(--line-2);
    border-radius: 10px;
    background:    rgba(27,27,27,0.45);
    padding:       20px 22px 20px;
    margin:        0 0 18px;
    min-width:     0;
    box-sizing:    border-box;
}
#shawnee-contact-wrap .sc-group legend {
    font-family:    var(--f-display);
    font-size:      0.72rem;
    font-weight:    700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color:          var(--ice);
    padding:        0 10px;
    margin-left:    -4px;
}
#shawnee-contact-wrap .sc-group .sc-field:last-of-type {
    margin-bottom: 0;
}

/* -- Inline note text ----------------------------------------- */
#shawnee-contact-wrap .sc-note {
    font-size:   0.775rem;
    line-height: 1.55;
    color:       rgba(201,213,223,0.5);
    margin:      12px 0 0;
}
#shawnee-contact-wrap .sc-note a {
    color: var(--ice);
}

/* -- Export control checkbox ---------------------------------- */
#shawnee-contact-wrap .sc-export-block {
    border:        1px solid var(--line-2);
    border-radius: 10px;
    background:    rgba(27,27,27,0.45);
    padding:       16px 18px;
    margin-bottom: 18px;
    gap:           0;
}
#shawnee-contact-wrap .sc-check {
    display:        flex   !important;
    align-items:    flex-start;
    gap:            11px;
    cursor:         pointer;
    font-family:    var(--f-body) !important;
    font-size:      0.85rem !important;
    font-weight:    400     !important;
    text-transform: none    !important;
    letter-spacing: 0       !important;
    line-height:    1.55;
    white-space:    normal  !important;
    color:          rgba(201,213,223,0.8) !important;
}
#shawnee-contact-wrap .sc-check input[type="checkbox"] {
    width:        16px !important;
    height:       16px !important;
    max-width:    16px !important;
    min-width:    16px;
    margin:       2px 0 0;
    padding:      0    !important;
    flex:         0 0 auto;
    border-radius: 3px !important;
    accent-color: #E53935;
    cursor:       pointer;
    -webkit-appearance: checkbox;
    appearance:   checkbox;
}
#shawnee-contact-wrap .sc-check:hover {
    color: var(--frost) !important;
}

/* -- Export control guidance panel ---------------------------- */
#shawnee-contact-wrap .sc-export-detail {
    margin:        14px 0 0;
    padding:       14px 16px;
    background:    rgba(229,57,53,0.07);
    border-left:   3px solid #E53935;
    border-radius: 0 8px 8px 0;
    font-size:     0.8rem;
    line-height:   1.6;
    color:         rgba(201,213,223,0.78);
}
#shawnee-contact-wrap .sc-export-detail p {
    margin: 0 0 10px;
}
#shawnee-contact-wrap .sc-export-detail p:last-child {
    margin-bottom: 0;
}
#shawnee-contact-wrap .sc-export-detail strong {
    color: #E53935;
}

/* -- Attachment notice under the dropzone --------------------- */
#shawnee-contact-wrap .sc-export-notice {
    margin-top: 8px;
}

/* -- Responsive: 1076px-1100px → 2-col inside groups ---------- */
@media (min-width: 1076px) and (max-width: 1100px) {
    #shawnee-contact-wrap .sc-row-2 {
        grid-template-columns: 1fr 1fr !important;
    }
}

/* -- Responsive: ≤1075px → single column ---------------------- */
@media (max-width: 1075px) {
    #shawnee-contact-wrap .sc-row-2 {
        grid-template-columns: 1fr !important;
    }
    #shawnee-contact-wrap .sc-group {
        padding-left:  14px !important;
        padding-right: 14px !important;
    }
    #shawnee-contact-wrap .sc-field label {
        white-space: normal;
    }
}


/* ============================================================
   CAREERS - OPEN POSITIONS BAR + APPLY MODAL
   Markup: html/careers-jobs.php (careers alias only, showcase area)
   Script: js/careers-form.js
   Form fields, drop zones, and buttons inside the modal reuse the
   #shawnee-contact-wrap rules above. Everything here is additive.
   ============================================================ */

/* -- Jobs bar ------------------------------------------------- */
.cj-jobs {
    background:    var(--ink-2);
    border-bottom: 1px solid var(--line-2);
    padding:       22px 4% 26px;
    text-align:    center;
}
.cj-jobs .cj-jobs-heading {
    font-family:    var(--f-display);
    font-size:      0.8rem;
    font-weight:    700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color:          var(--ice);
    margin:         0 0 14px;
}
.cj-jobs-list {
    list-style:      none;
    margin:          0 auto;
    padding:         0;
    display:         flex;
    flex-wrap:       wrap;
    justify-content: center;
    gap:             18px;
    max-width:       1254px; /* exactly 4 cards per row: 4 x 300px + 3 x 18px gaps */
}
.cj-jobs-list > li {
    flex:      0 1 300px;
    min-width: 0;
}

/* Card button - overrides the global button rule */
.cj-jobs .cj-card {
    width:           100%;
    height:          100%;
    display:         flex;
    flex-direction:  column;
    align-items:     center;
    justify-content: center;
    gap:             6px;
    padding:         16px 18px;
    background:      var(--ink-1);
    color:           var(--text);
    border:          1px solid var(--line-2);
    border-radius:   12px;
    font-family:     var(--f-body);
    text-align:      center;
    cursor:          pointer;
    transition:      border-color 0.2s ease, box-shadow 0.2s ease, transform 0.15s ease;
}
.cj-jobs .cj-card:hover,
.cj-jobs .cj-card:focus-visible {
    background:   var(--ink-1);
    border-color: var(--ice);
    box-shadow:   0 4px 16px rgba(156,203,230,0.18);
    transform:    translateY(-1px);
    outline:      none;
}
.cj-card-title {
    font-family: var(--f-display);
    font-size:   1.05rem;
    font-weight: 700;
    line-height: 1.3;
}
.cj-card-note {
    font-size: 0.8rem;
    color:     rgba(201,213,223,0.6);
}
.cj-card-cta {
    margin-top:     4px;
    font-family:    var(--f-display);
    font-size:      0.72rem;
    font-weight:    700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color:          var(--ice);
}

/* -- Modal shell ---------------------------------------------- */
.cj-modal {
    width:      min(780px, calc(100% - 32px));
    max-width:  none;
    max-height: calc(100vh - 48px);
    padding:    0;
    border:     none;
    background: transparent;
    color:      var(--text);
    overflow:   auto;
}
.cj-modal::backdrop {
    background: rgba(0,0,0,0.72);
}
.cj-modal #shawnee-contact-wrap {
    display:  block;
    padding:  0;
    overflow: visible;
}
.cj-modal #shawnee-contact-wrap .sc-box {
    max-width: none;
}
.cj-modal #shawnee-contact-wrap .sc-header {
    padding-right: 72px;
}
.cj-modal #shawnee-contact-wrap .sc-header p:empty {
    display: none;
}

/* Close button */
.cj-modal #shawnee-contact-wrap .cj-close {
    position:      absolute;
    top:           20px;
    right:         20px;
    width:         38px;
    height:        38px;
    padding:       0;
    background:    none;
    border:        1px solid var(--line-2);
    border-radius: 8px;
    color:         rgba(201,213,223,0.7);
    font-size:     1.5rem;
    line-height:   1;
    cursor:        pointer;
    transition:    border-color 0.2s ease, color 0.2s ease;
}
.cj-modal #shawnee-contact-wrap .cj-close:hover,
.cj-modal #shawnee-contact-wrap .cj-close:focus-visible {
    background:   rgba(255,255,255,0.06);
    border-color: var(--red);
    color:        var(--red);
    outline:      none;
}

/* Position description */
.cj-modal .cj-desc {
    font-size:   0.95rem;
    line-height: 1.65;
    color:       var(--text);
}
.cj-modal .cj-desc h2 { font-size: 1.3rem; }
.cj-modal .cj-desc h3 { font-size: 1.1rem; color: var(--ice); }
.cj-modal .cj-desc h4 { font-size: 1rem; }
.cj-modal .cj-desc ul,
.cj-modal .cj-desc ol {
    padding-left: 22px;
    margin:       0 0 14px;
}
.cj-modal .cj-desc p {
    margin: 0 0 12px;
}

.cj-modal .cj-aside {
    flex:      1;
    min-width: 0;
    font-size: 0.85rem;
    color:     rgba(201,213,223,0.55);
}

/* Secondary (Back) button - overrides the global button rule */
.cj-modal #shawnee-contact-wrap .cj-btn-secondary {
    font-family:    var(--f-display);
    font-size:      0.85rem;
    font-weight:    700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    background:     none;
    color:          rgba(201,213,223,0.75);
    border:         1px solid var(--line-2);
    border-radius:  8px;
    padding:        11px 18px;
    cursor:         pointer;
    transition:     border-color 0.2s ease, color 0.2s ease;
}
.cj-modal #shawnee-contact-wrap .cj-btn-secondary:hover:not(:disabled) {
    background:   none;
    border-color: var(--ice);
    color:        var(--ice);
}
.cj-modal #shawnee-contact-wrap .cj-btn-secondary:disabled {
    opacity: 0.5;
    cursor:  not-allowed;
}

/* Status line */
.cj-modal #cj-status {
    flex:      1;
    min-width: 0;
    font-size: 0.85rem;
    color:     rgba(201,213,223,0.55);
}
.cj-modal #cj-status.success {
    color:       var(--ice);
    font-weight: 600;
}
.cj-modal #cj-status.error-msg {
    color: var(--red);
}

/* -- Mobile --------------------------------------------------- */
@media (max-width: 1075px) {
    .cj-jobs {
        padding: 18px 4% 20px;
    }
    .cj-jobs-list > li {
        flex-basis: 100%;
    }
    .cj-modal {
        width:      calc(100% - 16px);
        max-height: calc(100vh - 16px);
    }
    .cj-modal #shawnee-contact-wrap .sc-header {
        padding-right: 64px !important;
    }
    .cj-modal #shawnee-contact-wrap .cj-close {
        top:   14px;
        right: 12px;
    }
}

/* ============================================================
   Part 2 - Cold Precision restyle
   ============================================================ */
#shawnee-contact-wrap { padding: 0; font-family: var(--f-body); overflow: visible; }

#shawnee-contact-wrap .sc-box {
    max-width: none;
    border: 1px solid var(--line);
    border-radius: var(--r-plate);
    background: var(--surface);
    box-shadow: var(--edge), var(--shadow);
}
#shawnee-contact-wrap .sc-header {
    background: rgba(5, 8, 12, 0.5);
    border-bottom: 1px solid var(--line-2);
    padding: 26px 32px 22px;
}
#shawnee-contact-wrap .sc-header::after { left: 32px; bottom: -1px; width: 28px; height: 1px; background: var(--red); }
#shawnee-contact-wrap .sc-header h2 {
    font: 700 1.7rem/1.1 var(--f-display);
    letter-spacing: 0.02em;
    color: var(--frost);
}
#shawnee-contact-wrap .sc-header p { color: var(--muted); font-size: 0.95rem; }
#shawnee-contact-wrap .sc-body { padding: 28px 32px 32px; overflow: visible; }

#shawnee-contact-wrap .sc-field label {
    font: 500 0.7rem/1.4 var(--f-mono);
    letter-spacing: 0.14em;
    color: var(--muted);
}
#shawnee-contact-wrap .sc-field input,
#shawnee-contact-wrap .sc-field textarea,
#shawnee-contact-wrap .sc-field select {
    background: rgba(5, 8, 12, 0.7);
    border: 1px solid var(--line-2);
    border-radius: var(--r-input);
    color: var(--frost);
    font: 400 1rem/1.4 var(--f-body);
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.5);
}
#shawnee-contact-wrap .sc-field input:focus,
#shawnee-contact-wrap .sc-field textarea:focus,
#shawnee-contact-wrap .sc-field select:focus {
    border-color: rgba(156, 203, 230, 0.7);
    box-shadow: 0 0 0 3px rgba(156, 203, 230, 0.16);
}
#shawnee-contact-wrap .sc-field input.sc-error,
#shawnee-contact-wrap .sc-field textarea.sc-error,
#shawnee-contact-wrap .sc-field select.sc-error {
    border-color: var(--red);
    box-shadow: 0 0 0 3px rgba(229, 57, 53, 0.18);
}
#shawnee-contact-wrap .sc-dropzone {
    border: 1px dashed rgba(156, 203, 230, 0.35);
    border-radius: var(--r-card);
    background: rgba(156, 203, 230, 0.03);
}
#shawnee-contact-wrap .sc-dropzone:hover,
#shawnee-contact-wrap .sc-dropzone.sc-drag-over { border-color: var(--ice); background: rgba(156, 203, 230, 0.07); }

#shawnee-contact-wrap .sc-btn {
    font-family: var(--f-display) !important;
    letter-spacing: 0.08em !important;
    border-radius: 999px !important;
    padding: 13px 28px !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), 0 6px 18px -6px rgba(229, 57, 53, 0.7) !important;
}
#shawnee-contact-wrap hr.sc-divider { border: 0; height: 1px; background: var(--line); }

/* -- Careers: open positions ------------------------------------ */
.jobs { padding: 48px 0 0; }
.jobs:not(:has(.cj-jobs)) { display: none; }   /* nothing open, or still loading */
.cj-jobs { background: none; border: 0; padding: 0; text-align: left; }
.cj-jobs .cj-jobs-heading {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 0 18px;
    font: 500 0.75rem/1.4 var(--f-mono);
    letter-spacing: 0.16em;
    color: var(--muted);
}
.cj-jobs .cj-jobs-heading::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--red);
    box-shadow: 0 0 0 4px rgba(229, 57, 53, 0.18);
}
.cj-jobs-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 16px;
    max-width: none;
    margin: 0;
}
.cj-jobs .cj-card {
    align-items: flex-start;
    justify-content: flex-start;
    gap: 10px;
    padding: 22px 22px 20px;
    text-align: left;
    border: 1px solid var(--line);
    border-radius: var(--r-card);
    background: var(--surface);
    box-shadow: var(--edge), var(--shadow);
    color: var(--frost);
}
.cj-jobs .cj-card:hover,
.cj-jobs .cj-card:focus-visible {
    background: var(--surface);
    border-color: rgba(156, 203, 230, 0.4);
    box-shadow: var(--edge), var(--shadow);
    transform: translateY(-3px);
    outline: 2px solid transparent;
}
.cj-jobs .cj-card:focus-visible { outline: 2px solid var(--ice); outline-offset: 3px; }
.cj-card-title { font: 700 1.25rem/1.15 var(--f-display); letter-spacing: 0.02em; }
.cj-card-note { font: 500 0.72rem/1.4 var(--f-mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.cj-card-cta { margin-top: auto; padding-top: 8px; font: 500 0.72rem/1 var(--f-mono); letter-spacing: 0.14em; color: var(--ice); }
.cj-card-cta::after { content: " \2192"; }

/* -- Apply modal ------------------------------------------------ */
.cj-modal { color: var(--text); }
.cj-modal::backdrop {
    background: rgba(3, 6, 10, 0.72);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
}
.cj-modal #shawnee-contact-wrap .cj-close { border-color: var(--line-2); color: var(--muted); }
.cj-modal .cj-desc { color: var(--text); font-size: 0.98rem; }
.cj-modal .cj-desc h2 { font: 700 1.5rem/1.15 var(--f-display); color: var(--frost); }
.cj-modal .cj-desc h3 { font: 600 1.15rem/1.2 var(--f-display); letter-spacing: 0.04em; text-transform: uppercase; color: var(--ice); }
.cj-modal .cj-desc .highlight-text { color: var(--frost); }

@media (max-width: 640px) {
    #shawnee-contact-wrap .sc-header { padding: 22px 20px 18px; }
    #shawnee-contact-wrap .sc-header::after { left: 20px; }
    #shawnee-contact-wrap .sc-body { padding: 22px 20px 24px; }
}