/* jhwalkertrucking.com/careers in the J.H. Walker design. careers.css (a copy
   of shared/careers.css, Superior's careers layout) loads first; this file
   loads last and re-points its tokens to the J.H. Walker ones (ink, warm
   paper, signal red for actions), sets Barlow Condensed uppercase headings,
   square-ish corners, and adds the helpers Superior's site.css gives that
   page (.wrap, .cond, .mono, .eyebrow, .btn, .btn-green). The way
   atlas/careers-atlas.css does it for Atlas. */
#app{--ink:#0f1720;--ink-2:#3a4250;--ink-3:#4a5260;--line:#e2ddd2;--line-strong:#c9c3b6;--surface:#ffffff;--bg:#fbfaf7;--bg-soft:#f5f3ee;--green:#d0121b;--green-d:#a50e16;--lime:#ff3b44;--blue:#0f1720;--sans:'Barlow',system-ui,sans-serif;--mono:'JetBrains Mono',monospace;--cond:'Barlow Condensed',sans-serif;font-family:var(--sans);color:var(--ink)}

/* Superior's site.css helpers, in J.H. Walker terms */
#app .wrap{width:100%;max-width:1320px;margin:0 auto;padding:0 24px}
#app .mono{font-family:var(--mono)}
#app .eyebrow{font-family:var(--mono);font-size:13px;font-weight:600;letter-spacing:.12em;text-transform:uppercase}
#app .cond{font-family:var(--cond);font-weight:900;line-height:.88;text-transform:uppercase}
#app .cond em{font-style:normal;color:var(--green)}
#app .btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:12px 22px;border:0;border-radius:6px;font-family:var(--cond);font-weight:800;font-size:19px;letter-spacing:.06em;text-transform:uppercase;text-decoration:none;cursor:pointer;transition:background .15s ease}
#app .btn-green{background:var(--green);color:#fff}
#app .btn-green:hover{background:var(--green-d);color:#fff}
#app a{color:var(--ink);text-decoration:none}#app a:hover{color:var(--green)}
#app .cr-empty span a:not(.btn),#app .cr-help a,#app .cr-desc a{text-decoration:underline;text-underline-offset:3px}#app a.cj,#app a.cj:hover{color:var(--ink)}#app a.btn-green,#app a.btn-green:hover{color:#fff}

/* hero: the careers page's old look, three photos under the ink */
.cr-hero{position:relative;overflow:hidden;background:#0b1220;padding:88px 0 72px}
.cr-hero::before,.cr-hero::after,.cr-hero .wrap::before{content:"";position:absolute;top:0;bottom:0;width:33.34%;background-position:center;background-size:cover;background-repeat:no-repeat}
.cr-hero::before{left:0;background-image:linear-gradient(0deg,#0b1220 0%,rgba(11,18,32,.91) 60%,rgba(11,18,32,.86) 100%),url(/assets/culture-crawfish.jpg)}
.cr-hero .wrap::before{left:33.33%;background-image:linear-gradient(0deg,#0b1220 0%,rgba(11,18,32,.91) 60%,rgba(11,18,32,.86) 100%),url(/assets/shop-mechanic.jpg)}
.cr-hero::after{right:0;background-image:linear-gradient(0deg,#0b1220 0%,rgba(11,18,32,.91) 60%,rgba(11,18,32,.86) 100%),url(/assets/dispatch-team.jpg)}
.cr-hero .wrap>*{position:relative;z-index:1}
.cr-hero .eyebrow{color:#6cc4ff}
.cr-hero h1{font-size:clamp(68px,9vw,140px);line-height:.84;margin:18px 0 20px}
#app .cr-hero h1 em{color:#ff3b44}
.cr-hero p{font-size:20px;line-height:1.55;color:rgba(255,255,255,.9)}
.cr-search{border-radius:12px;box-shadow:0 30px 60px rgba(0,0,0,.35)}
.cr-f{border-radius:8px}
.cr-search .btn{border-radius:8px}

/* the list */
.cr-list{padding:40px 0 104px}
.cr-chips button{border-radius:6px;border:1.5px solid var(--line-strong);background:#fff;min-height:44px;padding:8px 14px;font:700 15px var(--sans)}
.cr-chips button:hover{border-color:var(--ink)}
.cr-chips button.on,.cr-co button.on{background:var(--ink);border-color:var(--ink);color:#fff}
.cr-co button{border-radius:999px}
.cr-count{font-size:12.5px;color:var(--ink-3)}
.cj{border:2px solid var(--line);border-radius:12px;padding:18px 20px}
.cj:hover{border-color:var(--ink);transform:none;box-shadow:0 14px 30px rgba(11,18,32,.1)}
.cj-logo{border-radius:6px;border-color:#efebe3}
.cj h3{font-family:var(--cond);font-weight:800;font-size:25px;line-height:1;text-transform:uppercase}
.cj-m{color:var(--ink-3)}
.cj-new{background:var(--green);color:#fff;border-radius:3px}
.t{border-radius:3px;background:var(--bg-soft);color:var(--ink)}
.t.pay{background:var(--ink);color:#fff}
.cj-go{color:var(--green-d)}
.cr-empty{border-radius:12px;border:1.5px dashed var(--line-strong)}
.cr-empty b{font-family:var(--cond);font-weight:800;font-size:26px;text-transform:uppercase}

/* a job */
.cr-job{padding:36px 0 104px}
.cr-main h1{font-size:clamp(44px,5vw,76px)}
.cr-main h2{font-family:var(--cond);font-weight:800;font-size:28px;line-height:1;text-transform:uppercase}
.cr-facts{border-radius:12px}
.cr-facts dd{font-family:var(--cond);font-weight:800;font-size:20px;text-transform:uppercase}
.cr-desc li::before{border-radius:0}
.cr-steps li,.cr-track li{border-radius:12px}
.cr-steps li::before{color:var(--green-d)}
.cr-side{top:calc(var(--hdr-h,64px) + 20px)}
.cr-apply{border-radius:14px;box-shadow:0 24px 60px rgba(11,18,32,.12)}
.cr-apply-h .mono{color:var(--green-d)}
.cr-apply-h h2{font-size:42px}
.cr-apply input,.cr-apply select{border-color:var(--line-strong);border-radius:6px}
.cr-apply input:not([type=checkbox]):not([type=radio]),.cr-apply select{min-height:48px}
.cr-apply input:focus,.cr-apply select:focus{border-color:var(--ink)}
.cr-seg span{border-radius:6px}
#app .cr-apply .btn{font-size:20px}
.cr-check,.cr-track .done i{background:var(--green)}
.cr-done h1 em{color:var(--green)}
.cr-ts{border-radius:14px}
.cr-ts-h h2{font-size:36px}
.cr-later-note{background:#fff;border:1.5px solid var(--line);color:var(--ink);border-radius:12px}
.cr-bar .btn{min-height:44px;font-size:17px}

@media (max-width:640px){
  #app .wrap{padding:0 16px}
  .cr-hero{padding:48px 0 40px}.cr-hero h1{font-size:56px}.cr-hero p{font-size:17px}
  .cj h3{font-size:21px}.cr-apply-h h2{font-size:34px}
}