/* Careers page. The .cr-* role, pool and modal classes are the hooks careers.js renders into. */
.cr-linkbtn { background: none; border: 0; border-bottom: 2px solid var(--yellow); padding: 0 0 2px; cursor: pointer; }

/* hero: a week */
.wk { grid-area: mvp; background: #fff; border: var(--line); border-radius: 22px; box-shadow: 10px 10px 0 var(--ink); overflow: hidden; }
.wk-top { display: flex; justify-content: space-between; align-items: center; padding: .8rem 1.1rem; background: var(--ink); color: var(--paper); font-weight: 800; }
.wk-top em { font-style: normal; font-family: var(--f-mono); font-size: .6rem; letter-spacing: .08em; text-transform: uppercase; color: rgba(255, 253, 247, .55); }
.wk-grid { display: grid; grid-template-columns: 2.4rem repeat(5, 1fr); gap: .45rem; padding: 1rem 1.1rem .6rem; background-color: var(--paper); background-image: radial-gradient(rgba(13, 20, 33, .09) 1px, transparent 1.2px); background-size: 18px 18px; }
.wk-hours { position: relative; height: 290px; font-family: var(--f-mono); font-size: .56rem; color: var(--muted); }
.wk-hours span { position: absolute; right: .2rem; top: calc(1.6rem + (100% - 1.8rem) * var(--f)); transform: translateY(-50%); }
.wk-day { position: relative; height: 290px; border: 1.5px dashed rgba(13, 20, 33, .2); border-radius: 12px; background: rgba(255, 255, 255, .7); }
.wk-day > p { position: absolute; top: .35rem; left: 0; right: 0; text-align: center; font-family: var(--f-mono); font-size: .62rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; }
.wk-b { position: absolute; left: 4px; right: 4px; top: var(--t); height: var(--h); border: 1.5px solid var(--ink); border-radius: 8px; font-size: .56rem; font-weight: 800; padding: .25rem .3rem; overflow: hidden; line-height: 1.15; transform-origin: 50% 0; animation: wkIn .6s var(--spring) both; animation-delay: var(--dl, 0s); }
@keyframes wkIn { from { transform: scaleY(0); opacity: 0; } }
.wk-b.ov { background: var(--yellow); } .wk-b.dw { background: #d6f7ec; }
.wk-ship { position: absolute; left: 50%; top: var(--t); z-index: 2; transform: translate(-50%, -50%); padding: .2rem .45rem; border: 1.5px solid var(--ink); border-radius: 999px; background: var(--pink); font-family: var(--f-mono); font-size: .52rem; font-weight: 700; white-space: nowrap; box-shadow: 2px 2px 0 var(--ink); animation: shipIn .7s cubic-bezier(.34, 1.8, .64, 1) both; animation-delay: var(--dl, 0s); }
@keyframes shipIn { from { transform: translate(-50%, -50%) scale(0) rotate(-20deg); } }
.wk-now { position: absolute; left: -3px; right: -3px; top: var(--t); height: 2px; background: var(--ink); z-index: 3; }
.wk-now::before { content: ""; position: absolute; left: -4px; top: -4px; width: 10px; height: 10px; border-radius: 50%; background: var(--ink); }
.wk-key { display: flex; flex-wrap: wrap; gap: .5rem 1rem; padding: 0 1.1rem .6rem; font-size: .76rem; font-weight: 600; }
.wk-key li { display: flex; align-items: center; gap: .35rem; }
.wk-key i { width: 12px; height: 12px; border: 1.5px solid var(--ink); border-radius: 3px; }
.k-ov { background: var(--yellow); } .k-dw { background: #d6f7ec; } .k-sh { background: var(--pink); border-radius: 50% !important; }
.wk-foot { padding: .7rem 1.1rem 1rem; border-top: 1px solid rgba(13, 20, 33, .12); font-weight: 700; font-size: .9rem; }
.wk-foot b { font-size: 1.2rem; }

/* story */
.story { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(2rem, 5vw, 5rem); align-items: center; padding: clamp(5rem, 12vh, 8rem) var(--gut); background: var(--cream); border-top: var(--line); }
.st-photo { position: relative; margin: 0; }
.st-photo img { width: 100%; aspect-ratio: 1; object-fit: cover; border: var(--line); border-radius: 22px; box-shadow: 10px 10px 0 var(--ink); }
.st-photo figcaption { position: absolute; left: 1rem; bottom: 1rem; padding: .6rem .8rem; border: var(--line); border-radius: 12px; background: var(--paper); font-size: .82rem; color: var(--ink-2); }
.st-photo figcaption b { display: block; color: var(--ink); font-size: 1rem; }
.st-chip { position: absolute; right: -.8rem; top: 1.4rem; padding: .45rem .8rem; border: var(--line); border-radius: 10px; background: var(--yellow); font-family: var(--f-mono); font-size: .7rem; font-weight: 700; transform: rotate(5deg); box-shadow: 3px 3px 0 var(--ink); }
.st-copy > p:not(.eyebrow) { margin-top: 1.1rem; color: var(--ink-2); max-width: 62ch; }
.st-stack { display: grid; gap: .5rem; margin-top: 1.2rem; }
.st-stack li { display: grid; grid-template-columns: 2.6rem 1fr; gap: .8rem; align-items: center; padding: .7rem .9rem; border: var(--line); border-radius: 14px; background: #fff; font-weight: 600; transform: translateX(-20px); opacity: 0; transition: transform .7s var(--spring), opacity .4s; }
.st-stack li.on { transform: none; opacity: 1; }
.st-stack li:nth-child(2) { margin-left: 1.2rem; } .st-stack li:nth-child(3) { margin-left: 2.4rem; }
.st-stack b { display: grid; place-items: center; height: 2.3rem; border: var(--line); border-radius: 10px; background: var(--yellow); font-family: var(--f-mono); font-size: .75rem; }
.st-stack li:nth-child(2) b { background: var(--mint); } .st-stack li:nth-child(3) b { background: var(--pink); }

/* what you get */
.get { padding: clamp(5rem, 12vh, 8rem) var(--gut); background: var(--paper); border-top: var(--line); }
.get-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin-top: 2.4rem; }
.gg { padding: 1.4rem; border: var(--line); border-radius: 20px; background: #fff; box-shadow: 5px 5px 0 var(--ink); transition: transform .5s var(--spring); }
.gg:hover { transform: translate(-3px, -3px) rotate(-.5deg); }
.gg h3 { font-size: 1.25rem; font-weight: 800; letter-spacing: -.025em; line-height: 1.15; }
.gg p { margin-top: .5rem; color: var(--ink-2); font-size: .94rem; }
.gg-big h3 { font-size: 1.25rem; }
.gg-big > p:not(.sectors) { color: var(--ink-2); }
.sectors { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: 1.1rem !important; }
.sectors span { padding: .28rem .65rem; border: 1.5px solid var(--ink); border-radius: 999px; background: var(--paper); font-weight: 700; font-size: .76rem; transition: background-color .3s, transform .5s var(--spring); }
.sectors span.hot { background: var(--cream); transform: translateY(-2px); }

/* roles (careers.js renders into these) */
.roles { padding: clamp(5rem, 12vh, 8rem) var(--gut); background: var(--cream); border-top: var(--line); }
.cr-roles-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 1rem 2rem; flex-wrap: wrap; }
.section-label { font-family: var(--f-mono); font-size: var(--t-mono); font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); display: flex; align-items: center; gap: .6rem; margin-bottom: 1.1rem; }
.section-label::before { content: ""; width: 22px; height: 2px; background: currentColor; }
.section-title { font-size: var(--t-d2); font-weight: 800; letter-spacing: -.045em; line-height: .98; }
.mk-hl { font-family: var(--f-serif); font-style: italic; font-weight: 400; letter-spacing: -.02em; }
.cr-lead { margin-top: 1.1rem; color: var(--ink-2); max-width: 60ch; }
.cr-count[hidden] { display: none; }
.cr-count { display: inline-flex; align-items: center; gap: .5rem; padding: .45rem .9rem; border: var(--line); border-radius: 999px; background: var(--mint); font-weight: 800; }
.cr-count .dt { width: 9px; height: 9px; border-radius: 50%; background: var(--ink); animation: blink 1s steps(2, jump-none) infinite; }
.cr-filters { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: 1.6rem; }
.cr-filters[hidden] { display: none; }
.cr-filters button { padding: .4rem .8rem; border: 1.5px solid var(--ink); border-radius: 999px; background: #fff; font-weight: 700; font-size: .85rem; }
.cr-filters button[aria-pressed="true"] { background: var(--ink); color: var(--paper); }
.cr-jobs { display: grid; gap: 1rem; margin-top: 2rem; }
.cr-job { padding: 1.3rem 1.4rem; border: var(--line); border-radius: 18px; background: #fff; box-shadow: 5px 5px 0 var(--ink); }
.cr-job .jt { font-size: 1.4rem; font-weight: 800; letter-spacing: -.03em; }
.cr-chips { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .6rem; }
.cr-chip { font-family: var(--f-mono); font-size: .66rem; font-weight: 700; padding: .22rem .55rem; border: 1.5px solid var(--ink); border-radius: 6px; background: var(--paper); }
.cr-chip.dept { background: var(--yellow); } .cr-chip.loc { background: #d6f7ec; }
.jsum { margin-top: .6rem; color: var(--ink-2); }
.cr-job-actions { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1rem; }
.cr-details, .cr-apply { display: inline-flex; align-items: center; gap: .4rem; padding: .6rem 1rem; border: var(--line); border-radius: 999px; font-weight: 800; font-size: .92rem; cursor: pointer; }
.cr-details { background: #fff; }
.cr-apply { background: var(--yellow); box-shadow: 3px 3px 0 var(--ink); transition: transform .15s, box-shadow .15s; }
.cr-apply:active { transform: translate(3px, 3px); box-shadow: 0 0 0 var(--ink); }
.cr-empty { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 1rem 2.4rem; align-items: center; padding: clamp(1.4rem, 3vw, 2.2rem); border: var(--line); border-radius: 22px; background: var(--ink); color: var(--paper); box-shadow: 10px 10px 0 var(--yellow); }
.cr-empty h3 { font-size: clamp(1.6rem, 1.2rem + 1.2vw, 2.4rem); font-weight: 800; letter-spacing: -.04em; line-height: 1.02; }
.cr-empty > p { color: rgba(255, 253, 247, .78); grid-column: 1; }
.cr-empty .cr-pool { grid-column: 2; grid-row: 1 / 3; }
.cr-pool-row { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
.cr-pool-row input { font: inherit; padding: .8rem .9rem; border: 2px solid var(--paper); border-radius: 12px; background: #1b2433; color: var(--paper); min-width: 0; }
.cr-pool-row input:focus { outline: none; box-shadow: 3px 3px 0 var(--yellow); }
.cr-pool-row .cr-apply { grid-column: 1 / -1; justify-content: center; color: var(--ink); border-color: var(--paper); }
.cr-pool-msg { min-height: 1.2em; margin-top: .5rem; font-size: .88rem; }
.cr-pool-msg.err { color: var(--pink); }
.cr-pool-alt { margin-top: .3rem; font-family: var(--f-mono); font-size: .64rem; color: rgba(255, 253, 247, .6); }
.cr-pool-done { padding: 1rem 1.1rem; border-radius: 14px; background: var(--mint); color: var(--ink); font-weight: 700; animation: tyIn2 .6s var(--spring); }
@keyframes tyIn2 { from { transform: scale(.9); opacity: 0; } }

/* modals */
.cr-modal { position: fixed; inset: 0; z-index: 300; display: flex; align-items: center; justify-content: center; padding: 24px 16px; background: rgba(13, 20, 33, .7); }
.cr-modal[hidden] { display: none; }
.cr-modal-card { display: flex; flex-direction: column; width: min(680px, 100%); max-height: 92vh; background: #fff; border: var(--line); border-radius: 22px; box-shadow: 10px 10px 0 var(--yellow); overflow: hidden; animation: mIn .5s var(--spring); }
.cr-modal-card.wide { width: min(820px, 100%); }
@keyframes mIn { from { transform: translateY(24px) scale(.95); opacity: 0; } }
.cr-modal-bar { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: .8rem 1.1rem; background: var(--ink); color: var(--paper); font-weight: 800; }
.cr-modal-x { width: 36px; height: 36px; border: 2px solid var(--paper); border-radius: 50%; color: var(--paper); font-size: 1.3rem; line-height: 1; background: transparent; }
.cr-modal-body { flex: 1; overflow: auto; padding: 1.2rem; }
.cr-modal-body iframe { width: 100%; height: 70vh; border: 0; border-radius: 12px; }
.cr-body h4 { margin-top: 1rem; font-weight: 800; } .cr-body ul { list-style: disc; padding-left: 1.2rem; } .cr-body p, .cr-body li { color: var(--ink-2); margin-top: .4rem; }
.cr-modal-foot { display: flex; align-items: center; gap: 1rem; padding: .8rem 1.1rem; border-top: 1px solid rgba(13, 20, 33, .12); font-size: .86rem; color: var(--muted); }
.cr-modal-foot a { color: var(--ink); font-weight: 700; }

.cr-final { grid-template-columns: minmax(0, 760px); justify-content: center; }
.cr-final .fin-card { text-align: center; }
.cr-final .fin-card h2 em { font-size: 1em; }
.cr-final .fin-card > p:not(.fin-more) { margin: 1.2rem auto 1.6rem; color: var(--ink-2); max-width: 54ch; }
.fin-more { margin-top: 1.2rem; font-size: .9rem; color: var(--ink-2); }
.fin-more a { color: var(--ink); font-weight: 700; text-decoration-color: var(--yellow); text-decoration-thickness: 3px; }

@media (max-width: 1000px) { .get-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 900px) {
  .story, .cr-empty { grid-template-columns: 1fr; }
  .cr-empty .cr-pool { grid-column: 1; grid-row: auto; }
  .st-photo { max-width: 420px; }
}
@media (max-width: 600px) {
  .get-grid { grid-template-columns: 1fr; }
  .cr-pool-row { grid-template-columns: 1fr; }
  .wk-hours, .wk-day { height: 240px; }
  .wk-b { font-size: 0; padding: 0; }
  .st-stack li:nth-child(n) { margin-left: 0; }
}
@media (prefers-reduced-motion: reduce) { .st-stack li { transform: none; opacity: 1; } }