/* Careers page — page-scoped layout on top of scroll.css. Prefixes: .careers- (page) / .cr- (application form) */

/* ── Hero (dust) ── */
.careers-hero { padding-block: 128px 120px; }
.careers-hero::after { content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(ellipse 55% 70% at 78% 45%, rgba(234,165,114,0.10) 0%, rgba(234,165,114,0) 70%); }
.careers-hero__copy { display: flex; flex-direction: column; align-items: flex-start; gap: 26px; max-width: 980px; }
.careers-hero h1 { font-size: clamp(52px, 6.1vw, 88px); line-height: 1; color: var(--white); }
.careers-hero__lead { max-width: 620px; }
.careers-hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 32px; margin-top: 4px; }
.careers-hero__meta { margin-top: 10px; padding-top: 22px; border-top: 1px solid rgba(149,173,197,0.16); font: 500 13px/1.5 var(--font-body); letter-spacing: 1px; color: var(--meta); }

@media (max-width: 620px) {
  .careers-hero { padding-block: 64px 60px; }
  .careers-hero__copy { gap: 18px; }
  .careers-hero h1 { font-size: clamp(38px, 11.8vw, 48px); }
  .careers-hero h1 br { display: none; }
  .careers-hero__actions { flex-direction: column; align-items: stretch; gap: 18px; width: 100%; }
  .careers-hero__actions .btn { width: 100%; }
  .careers-hero__actions .link-arrow { justify-content: center; }
  .careers-hero__meta { margin-top: 4px; padding-top: 18px; font-size: 12px; }
}

/* ── Work environment ── */
.careers-env__head { margin-bottom: 56px; }
.careers-env__aside { display: flex; flex-direction: column; gap: 16px; }
.careers-env__aside p { font-size: 16px; line-height: 1.75; color: var(--c-text); }
.careers-env__line {
  max-width: 900px; padding-top: 36px; border-top: 1px solid var(--c-rule);
  font: 700 clamp(22px, 2.4vw, 32px)/1.3 var(--font-display); text-transform: uppercase; letter-spacing: .5px; color: var(--c-heading);
}
.careers-env__line em { font-style: normal; color: var(--c-accent); }

@media (max-width: 900px) { .careers-env__head { margin-bottom: 40px; } }
@media (max-width: 620px) {
  .careers-env__head { margin-bottom: 28px; }
  .careers-env__aside p { font-size: 15px; line-height: 1.7; }
  .careers-env__line { padding-top: 24px; font-size: 20px; }
}

/* ── Benefits ── */
.careers-perks { align-items: stretch; }
.careers-perk { gap: 16px; padding: 36px 34px 38px; }
.careers-perk h3 { max-width: 22ch; }
.careers-perk p { max-width: 62ch; }
@media (max-width: 620px) {
  .careers-perk { gap: 12px; padding: 24px 20px; }
}

/* ── Current opening ── */
.careers-opening__head { margin-bottom: 44px; }
.careers-role { gap: 22px; padding: 40px 38px; border-left: 2px solid var(--coral); }
.careers-role__top { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; }
.careers-role__title { margin: 0; font-size: 28px; line-height: 1.1; }
.careers-role__text { max-width: 70ch; font-size: 16px; line-height: 1.75; }
.careers-role__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 32px; margin-top: 4px; }
.careers-opening__note { margin-top: 28px; max-width: 70ch; font-size: 14px; line-height: 1.7; color: var(--meta); }

@media (max-width: 620px) {
  .careers-opening__head { margin-bottom: 26px; }
  .careers-role { gap: 18px; padding: 24px 20px; }
  .careers-role__title { font-size: 23px; }
  .careers-role__text { font-size: 15px; }
  .careers-role__foot { flex-direction: column; align-items: stretch; gap: 16px; }
  .careers-role__foot .btn { width: 100%; }
  .careers-role__foot .link-arrow { justify-content: center; }
  .careers-opening__note { margin-top: 20px; font-size: 13px; }
}

/* ── Application form (cream) ──
   Field markup matches /videographer-apply/; the rules are scoped to this card so the page owns them. */
.cr-form-card { gap: 0; padding: 48px; scroll-margin-top: calc(var(--navh, 72px) + 24px); box-shadow: 0 24px 60px rgba(26,26,26,0.08); }
.cr-form__title { margin: 0 0 8px; font-size: 32px; line-height: 1.1; letter-spacing: .5px; color: var(--ink); }
.cr-form__sub { margin: 0 0 28px; font-size: 15px; line-height: 1.65; color: var(--ink-body); }
.cr-form__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 16px; margin-bottom: 24px; }

.cr-form-card .field { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.cr-form-card .field--full { grid-column: 1 / -1; }
.cr-form-card .field__label { font: 600 11px/1.3 var(--font-body); letter-spacing: 2px; text-transform: uppercase; color: var(--ink-body); }
.cr-form-card .field__input { width: 100%; min-width: 0; padding: 13px 16px; background: #F7F6F2; border: 1px solid rgba(26,26,26,0.14); border-radius: 8px; font: 400 14px/1.4 var(--font-body); color: var(--ink); transition: border-color .2s ease, box-shadow .2s ease, background-color .2s ease; }
.cr-form-card .field__input::placeholder { color: #8a939b; opacity: 1; }
.cr-form-card .field__input:hover { border-color: rgba(26,26,26,0.24); }
.cr-form-card .field__input:focus { outline: none; background: var(--white); border-color: var(--coral-ink); box-shadow: 0 0 0 3px rgba(234,165,114,0.3); }
.cr-form-card .field__input[aria-invalid="true"] { border-color: #B3261E; box-shadow: 0 0 0 3px rgba(179,38,30,0.12); }
.cr-form-card .field__input--area { height: 128px; resize: vertical; }

.cr-form-card .consent { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 24px; cursor: pointer; }
.cr-form-card .consent__box { flex: none; width: 18px; height: 18px; margin: 1px 0 0; accent-color: var(--coral-ink); cursor: pointer; }
.cr-form-card .consent__text { font-size: 12px; line-height: 1.6; color: var(--ink-body); }
.cr-form-card .consent__box[aria-invalid="true"] { outline: 2px solid #B3261E; outline-offset: 2px; }

.cr-form__error { margin: -8px 0 18px; font-size: 13px; line-height: 1.5; color: #B3261E; }
.cr-form__submit { padding: 18px; font-size: 15px; }
.cr-form__fine { margin: 16px 0 0; font-size: 12px; line-height: 1.6; color: var(--ink-muted); }
.cr-form__fine a { color: var(--coral-ink); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }

.cr-thanks { display: flex; flex-direction: column; align-items: flex-start; outline: none; }
.cr-thanks__icon { display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px; margin-bottom: 20px; border-radius: 50%; background: rgba(46,125,70,0.12); color: var(--green-ink); }
.cr-thanks__icon svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }

@media (max-width: 620px) {
  .cr-form-card { padding: 26px 20px; }
  .cr-form__title { font-size: 24px; }
  .cr-form__grid { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .cr-form-card .field__input { padding: 14px; font-size: 16px; }
  .cr-form-card .consent__text { font-size: 13px; }
}

/* the role's detail rows, under the title and location */
.careers-role__facts { display: flex; flex-direction: column; gap: 16px; margin: 22px 0 0; }
.careers-role__facts > div { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 18px; align-items: baseline; }
.careers-role__facts dt { font: 600 11.5px/1.4 var(--font-body); letter-spacing: 1.4px; text-transform: uppercase; color: var(--coral); }
.careers-role__facts dd { margin: 0; font-size: 15px; line-height: 1.65; color: var(--c-text); }
@media (max-width: 680px) {
  .careers-role__facts > div { grid-template-columns: minmax(0, 1fr); gap: 5px; }
}