/* Careers pages (/careers and /careers/<role>): hero, facts row, role switcher, copy blocks and the application form.
   Shared by every job ad so the form looks and behaves the same; the form logic is in careers.js and contact.js. */
:root { --cr-y: #f5c518; --cr-line: rgba(255,255,255,0.09); --cr-card: rgba(255,255,255,0.025); }
.cr-hero { position: relative; overflow: hidden; padding: 8.5rem 0 3.2rem; background: #0a0a0a; border-bottom: 1px solid var(--cr-line); }
.cr-hero-media { position: absolute; inset: 0 0 0 auto; width: 56%; z-index: 0; }
.cr-hero-media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 60%; display: block; }
.cr-hero-media::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, #0a0a0a 0%, rgba(10,10,10,0.75) 20%, rgba(10,10,10,0.15) 60%), linear-gradient(0deg, #0a0a0a 0%, rgba(10,10,10,0) 35%); }
.cr-hero .container { position: relative; z-index: 1; }
.cr-hero h1 { font-family: var(--font-display); font-size: clamp(2.1rem, 5vw, 3.8rem); font-weight: 900; color: #fff; letter-spacing: 0.04em; line-height: 1.06; margin: 0.9rem 0 1.1rem; max-width: 640px; }
.cr-hero h1 span { color: var(--cr-y); display: block; }
.cr-hero-sub { font-family: var(--font-ui); font-size: 1rem; line-height: 1.75; color: #c4c4c4; max-width: 520px; font-weight: 300; margin: 0; }
.cr-facts { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 1.6rem 0 1.8rem; padding: 0; list-style: none; }
.cr-facts li { display: flex; flex-direction: column; gap: 0.15rem; padding: 0.7rem 1rem; border: 1px solid var(--cr-line); border-radius: 3px; background: rgba(10,10,10,0.72); }
.cr-facts small { font-family: var(--font-ui); font-size: 0.58rem; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; color: #9a9a9a; }
.cr-facts b { font-family: var(--font-body); font-size: 1.1rem; font-weight: 600; color: #fff; line-height: 1.2; }
.cr-facts .cr-pay b { color: var(--cr-y); }
.cr-hero-note { font-family: var(--font-ui); font-size: 0.85rem; line-height: 1.6; color: #c4c4c4; max-width: 560px; margin: -0.6rem 0 1.6rem; }
.cr-actions { display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: center; }
.cr-apply-btn { background: var(--cr-y); color: #0a0a0a; font-weight: 700; }
.cr-apply-btn:hover { box-shadow: 0 0 26px rgba(245,197,24,0.35); }
.cr-share-btn { background: transparent; border: 1px solid rgba(255,255,255,0.28); color: #fff; }
.cr-share-btn:hover { border-color: #fff; }
.cr-share-status { font-family: var(--font-ui); font-size: 0.78rem; color: var(--cr-y); min-height: 1.2em; margin: 0.7rem 0 0; }

.cr-main { padding: 3.2rem 0 5rem; }
.cr-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 2.2rem; align-items: start; }
.cr-copy h2 { font-family: var(--font-display); font-size: clamp(1.2rem, 2.4vw, 1.6rem); font-weight: 800; letter-spacing: 0.06em; color: #fff; margin: 0 0 1rem; }
.cr-copy h2 + p, .cr-copy p { font-family: var(--font-ui); font-size: 0.95rem; line-height: 1.8; color: #c4c4c4; font-weight: 300; margin: 0 0 1rem; }
.cr-block { margin-bottom: 2.4rem; }
.cr-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; }
.cr-list li { position: relative; padding: 0.85rem 1rem 0.85rem 2.6rem; border: 1px solid var(--cr-line); border-radius: 3px; background: var(--cr-card); font-family: var(--font-ui); font-size: 0.9rem; line-height: 1.6; color: #d6d6d6; }
.cr-list li::before { content: ''; position: absolute; left: 1rem; top: 1.25rem; width: 0.7rem; height: 0.38rem; border-left: 2px solid var(--cr-y); border-bottom: 2px solid var(--cr-y); transform: rotate(-45deg); }
.cr-list b { color: #fff; font-weight: 600; }
.cr-photo { margin: 0 0 2.4rem; border-radius: 4px; overflow: hidden; border: 1px solid var(--cr-line); }
.cr-photo img { width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; display: block; }
.cr-link-box { display: flex; gap: 0.5rem; align-items: stretch; margin-top: 0.4rem; }
.cr-link-box input { flex: 1; min-width: 0; background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.14); border-radius: 3px; color: #fff; font-family: var(--font-ui); font-size: 0.85rem; padding: 0.7rem 0.9rem; }
.cr-link-box button { padding: 0.7rem 1.1rem; }

.cr-form { border: 1px solid var(--cr-line); border-radius: 4px; background: #0c0c0c; padding: 1.8rem; scroll-margin-top: 90px; }
.cr-form h2 { font-family: var(--font-display); font-size: 1.1rem; font-weight: 800; letter-spacing: 0.08em; color: #fff; margin: 0 0 0.5rem; }
.cr-form-lead { font-family: var(--font-ui); font-size: 0.85rem; line-height: 1.65; color: #aaa; margin: 0 0 1.4rem; }
.cr-form-lead a { color: var(--cr-y); text-decoration: underline; }
.bk-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 0.7rem; }
.bk-fields .full { grid-column: 1 / -1; }
.bk-field label { display: block; font-family: var(--font-ui); font-size: 0.58rem; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: #9a9a9a; margin-bottom: 0.4rem; }
.bk-field label em { font-style: normal; color: #9a9a9a; letter-spacing: 0.1em; text-transform: none; }
.bk-input { width: 100%; background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.14); border-radius: 3px; color: #fff; font-family: var(--font-ui); font-size: 0.9rem; padding: 0.85rem 1rem; outline: none; transition: border-color .2s; color-scheme: dark; }
.bk-input:focus { border-color: var(--cr-y); }
textarea.bk-input { min-height: 120px; resize: vertical; line-height: 1.6; }
.cr-submit { width: 100%; justify-content: center; background: var(--cr-y); color: #0a0a0a; font-weight: 700; margin-top: 1.1rem; }
.cr-submit:hover { box-shadow: 0 0 26px rgba(245,197,24,0.35); }
.cr-fine { font-family: var(--font-ui); font-size: 0.72rem; color: #9a9a9a; line-height: 1.6; margin: 0.9rem 0 0; }
.cr-fine a { color: #ddd; text-decoration: underline; }
.cr-set { border: 0; border-top: 1px solid var(--cr-line); margin: 0; padding: 1.4rem 0 1.6rem; min-width: 0; }
.cr-set > legend { float: left; width: 100%; padding: 0; margin: 0 0 1rem; display: flex; align-items: baseline; gap: 0.7rem; font-family: var(--font-display); font-size: 0.82rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: #fff; }
.cr-set > legend + * { clear: both; }
.cr-set-num { font-family: var(--font-ui); font-size: 0.62rem; font-weight: 600; letter-spacing: 0.2em; color: var(--cr-y); }
.cr-group { border: 0; margin: 1.1rem 0 0; padding: 0; min-width: 0; }
.cr-group + .bk-fields { margin-top: 1.1rem; }
.cr-group > legend { padding: 0; margin: 0 0 0.55rem; font-family: var(--font-ui); font-size: 0.58rem; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: #9a9a9a; }
.cr-group > legend em, .cr-form-lead em { font-style: normal; letter-spacing: 0.1em; text-transform: none; }
.cr-checks { display: grid; grid-template-columns: repeat(auto-fill, minmax(165px, 1fr)); gap: 0.4rem; }
.cr-check { display: flex; align-items: center; gap: 0.65rem; min-height: 46px; padding: 0.55rem 0.8rem; border: 1px solid rgba(255,255,255,0.14); border-radius: 3px; background: rgba(255,255,255,0.03); cursor: pointer; font-family: var(--font-ui); font-size: 0.86rem; line-height: 1.3; color: #ddd; transition: border-color .2s, background .2s; }
.cr-check:hover { border-color: rgba(255,255,255,0.3); }
.cr-check input { flex: none; width: 1.15rem; height: 1.15rem; margin: 0; accent-color: var(--cr-y); cursor: pointer; }
.cr-check:has(input:checked) { border-color: var(--cr-y); background: rgba(245,197,24,0.07); color: #fff; }
.cr-check:has(input:focus-visible) { outline: 2px solid var(--cr-y); outline-offset: 2px; }
.cr-other { margin-top: 0.6rem; }
select.bk-input { appearance: none; -webkit-appearance: none; padding-right: 2.4rem; cursor: pointer; background-image: linear-gradient(45deg, transparent 50%, #9a9a9a 50%), linear-gradient(135deg, #9a9a9a 50%, transparent 50%); background-position: calc(100% - 1.15rem) 50%, calc(100% - 0.8rem) 50%; background-size: 0.35rem 0.35rem; background-repeat: no-repeat; }
select.bk-input option { background: #141414; color: #fff; }
.cr-hint { font-family: var(--font-ui); font-size: 0.74rem; line-height: 1.5; color: #9a9a9a; margin: 0.4rem 0 0; }
.cr-drop { position: relative; display: flex; align-items: center; gap: 0.9rem; min-height: 84px; padding: 1rem 1.1rem; border: 1px dashed rgba(255,255,255,0.28); border-radius: 4px; background: rgba(255,255,255,0.025); color: #c9c9c9; transition: border-color .2s, background .2s; }
.cr-drop svg { flex: none; color: var(--cr-y); }
.cr-drop:hover, .cr-drop.is-over { border-color: var(--cr-y); background: rgba(245,197,24,0.05); }
.cr-drop:focus-within { border-color: var(--cr-y); outline: 2px solid var(--cr-y); outline-offset: 2px; }
.cr-drop-text { font-family: var(--font-ui); font-size: 0.9rem; line-height: 1.4; }
.cr-drop-text b { color: #fff; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.cr-file { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; font-size: 0; }
.cr-file-field.cx-has-err .cr-drop { border-color: #ff6b6b; }
.cr-file-chosen { display: flex; align-items: center; gap: 0.8rem; flex-wrap: wrap; margin: 0.6rem 0 0; padding: 0.6rem 0.8rem; border: 1px solid rgba(245,197,24,0.45); border-radius: 3px; background: rgba(245,197,24,0.06); font-family: var(--font-ui); font-size: 0.84rem; color: #fff; }
.cr-file-chosen[hidden] { display: none; }
.cr-file-name { flex: 1 1 12rem; min-width: 0; overflow-wrap: anywhere; }
.cr-file-clear { font: inherit; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: #fff; background: transparent; border: 1px solid rgba(255,255,255,0.3); border-radius: 3px; padding: 0.5rem 0.8rem; min-height: 40px; cursor: pointer; }
.cr-file-clear:hover { border-color: #fff; }
.cr-form-note { font-family: var(--font-ui); font-size: 0.84rem; line-height: 1.6; color: #e6e6e6; margin: -0.4rem 0 1.4rem; padding: 0.8rem 1rem; border-left: 3px solid var(--cr-y); background: rgba(245,197,24,0.06); border-radius: 0 3px 3px 0; }
.cr-form-note b { color: #fff; font-weight: 600; }
.cr-q label { font-size: 0.88rem; font-weight: 500; letter-spacing: 0; text-transform: none; color: #e6e6e6; line-height: 1.5; }
.cr-q label em { font-size: 0.8rem; color: #9a9a9a; letter-spacing: 0; }
.cr-set-hint { margin: 0 0 1rem; }
.cr-radios { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
.cr-group[hidden] { display: none; }
.cr-js .cr-reloc-if { display: none; }
.cr-after-group { margin-top: 1.1rem; }
.cr-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* Rough location (optional): the button asks the browser only when pressed */
.cr-loc { margin: 1.1rem 0 0; }
.cr-loc-title { font-family: var(--font-ui); font-size: 0.58rem; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: #9a9a9a; margin: 0 0 0.55rem; }
.cr-loc-title em { font-style: normal; letter-spacing: 0.1em; text-transform: none; }
.cr-loc-btn { display: inline-flex; align-items: center; gap: 0.55rem; min-height: 46px; padding: 0.6rem 1rem; font-family: var(--font-ui); font-size: 0.86rem; font-weight: 600; line-height: 1.3; color: #fff; background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.3); border-radius: 3px; cursor: pointer; text-align: left; transition: border-color .2s, background .2s; }
.cr-loc-btn:hover { border-color: var(--cr-y); background: rgba(245,197,24,0.06); }
.cr-loc-btn:focus-visible, .cr-loc-clear:focus-visible { outline: 2px solid var(--cr-y); outline-offset: 2px; }
.cr-loc-btn svg { flex: none; color: var(--cr-y); }
.cr-loc-btn[aria-busy="true"] { cursor: progress; opacity: 0.8; }
/* Room for the usual answer (shared, in Australia) is kept from the start, so it doesn't push the form down */
.cr-loc-out { display: flex; align-items: flex-start; gap: 0.2rem 1rem; min-height: 2.75rem; margin: 0.4rem 0 0; }
.cr-loc-status { flex: 0 1 auto; min-width: 0; margin: 0; padding: 0.55rem 0 0; font-family: var(--font-ui); font-size: 0.84rem; line-height: 1.55; color: #e6e6e6; }
.cr-loc-out.is-out { flex-wrap: wrap; }
.cr-loc-status.is-in { color: #7be0a8; }
.cr-loc-status.is-out { flex-basis: 100%; padding: 0.7rem 0.9rem; border: 1px solid rgba(255,107,107,0.6); border-radius: 4px; background: rgba(255,80,80,0.09); color: #fff; }
.cr-loc-clear { flex: none; font: inherit; font-family: var(--font-ui); font-size: 0.84rem; font-weight: 600; color: #fff; background: none; border: 0; padding: 0.55rem 0.2rem; min-height: 44px; line-height: 1.55; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.cr-loc-clear:hover { color: var(--cr-y); }
.cr-loc-clear[hidden] { display: none; }

/* Open roles switcher (top of each job ad) */
.cr-roles { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.6rem; margin: 0.9rem 0 0; padding: 0; list-style: none; font-family: var(--font-ui); }
.cr-roles-title { font-size: 0.58rem; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; color: #9a9a9a; margin-right: 0.2rem; }
.cr-roles a, .cr-roles span[aria-current] { display: inline-flex; align-items: center; gap: 0.4rem; min-height: 40px; padding: 0.45rem 0.85rem; border: 1px solid rgba(255,255,255,0.2); border-radius: 3px; background: rgba(10,10,10,0.72); font-size: 0.82rem; font-weight: 600; line-height: 1.3; color: #fff; text-decoration: none; transition: border-color .2s, background .2s; }
.cr-roles a:hover, .cr-roles a:focus-visible { border-color: var(--cr-y); background: rgba(245,197,24,0.07); }
.cr-roles a:focus-visible { outline: 2px solid var(--cr-y); outline-offset: 2px; }
.cr-roles span[aria-current] { border-color: var(--cr-y); color: var(--cr-y); }
.cr-roles span[aria-current] small { font-size: 0.7rem; font-weight: 500; color: #c4c4c4; }
.cr-roles svg { flex: none; }
/* Role line under the heading (CAD ad) */
.cr-hero h1.cr-h1-long { font-size: clamp(1.9rem, 4.4vw, 3.3rem); max-width: 700px; }
.cr-hero-role { font-family: var(--font-ui); font-size: 1.15rem; font-weight: 600; letter-spacing: 0.04em; color: #e6e6e6; margin: -0.4rem 0 1rem; }
/* Videographer ad: hero and body photo framing; a shorter text box for handles / links */
.cr-hero-media--flames img { object-position: 62% 50%; }
.cr-photo--m3 img { object-position: 50% 52%; }
textarea.bk-input.cr-short { min-height: 76px; }
/* A follow-up question shown only once its answer is ticked (data-cr-if, careers.js); without the script it stays visible */
[data-cr-if][hidden] { display: none; }
@media (max-width: 980px) {
    .cr-grid { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
    .cr-hero { padding: 0 0 2.4rem; }
    .cr-hero-media { position: relative; width: 100%; height: clamp(200px, 52vw, 360px); margin-top: 57px; }
    .cr-hero-media img { object-position: 50% 48%; }
    .cr-hero-media--flames img { object-position: 52% 64%; }
    .cr-hero-media::after { background: linear-gradient(0deg, #0a0a0a 0%, rgba(10,10,10,0) 55%), linear-gradient(180deg, rgba(10,10,10,0.45) 0%, rgba(10,10,10,0) 30%); }
    .cr-hero .container { margin-top: -1.4rem; }
}
@media (max-width: 640px) {
    .cr-main { padding: 2.2rem 0 4rem; }
    .cr-form { padding: 1.2rem; }
    .bk-fields { grid-template-columns: 1fr; }
    .cr-facts li { flex: 1 1 100%; }
    .cr-actions .btn { flex: 1 1 100%; justify-content: center; }
    .cr-checks { grid-template-columns: 1fr 1fr; }
    .bk-input { font-size: 1rem; }
    .cr-loc-out { min-height: 3.6rem; }
}
@media (max-width: 360px) {
    .cr-checks { grid-template-columns: 1fr; }
}