/* /careers/ only. Structure after thatworks.agency/careers: title + line beside the intro, a team quote, the open roles
   as rows that open, a "no open role" line, the application form, contact. Flat panels, 8pt spacing. */

/* header: one bar, title and line on the left, the intro on the right */
main.wrap > section.hero.cr-hero, .hero.cr-hero { display: block; grid-template-columns: none; min-height: 0; height: auto; margin-bottom: 0; padding-bottom: 0; }
.cr-hp { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: end; column-gap: 64px; padding: 48px var(--px, 48px); }
.cr-hl .crumbs { margin: 0 0 32px; }
.cr-hl h1#h1 { margin: 0; font-size: clamp(56px, 6vw, 88px); line-height: 1; letter-spacing: -0.03em; }
.cr-tag { display: inline-block; margin: 16px 0 0; padding: 8px 16px; border-radius: 999px; background: #1a1a1a; font-size: 14px; line-height: 20px; color: var(--text); }
.cr-hr { margin: 0; max-width: 520px; }

/* team quote */
.cr-q { margin: 0; padding: 48px; display: flex; flex-direction: column; align-items: center; text-align: center; }
.cr-q .sec-k { margin: 0 0 24px; }
.cr-q blockquote { margin: 0; max-width: 820px; }
.cr-q blockquote p { margin: 0; font-family: var(--display); font-size: 24px; line-height: 32px; font-weight: 500; letter-spacing: -0.01em; color: var(--text); text-wrap: pretty; }
.cr-q figcaption { display: flex; align-items: center; gap: 16px; margin-top: 32px; text-align: left; }
.cr-q figcaption img { width: 48px; height: 48px; border-radius: 999px; object-fit: cover; }
.cr-q figcaption > span { display: flex; flex-direction: column; font-size: 14px; line-height: 20px; color: var(--muted); }
.cr-q figcaption b { font-size: 16px; line-height: 24px; font-weight: 500; color: var(--text); }

/* open roles */
.cr-now { display: inline-flex; align-items: center; gap: 8px; margin: 0; padding: 8px 16px; border-radius: 999px; background: #1a1a1a; font-size: 14px; line-height: 20px; color: var(--text); }
.cr-now i { width: 8px; height: 8px; border-radius: 999px; background: #a3e635; }
.cr-list { list-style: none; grid-template-columns: minmax(0, 1fr); }
.cr-r { padding: 0; scroll-margin-top: calc(var(--hdr, 72px) + 16px); }
.cr-r summary { display: flex; align-items: center; gap: 16px; padding: 24px; cursor: pointer; list-style: none; }
.cr-r summary::-webkit-details-marker { display: none; }
.cr-rt { font-family: var(--display); font-size: 24px; line-height: 32px; font-weight: 500; letter-spacing: -0.02em; color: var(--text); }
.cr-tags { display: flex; flex-wrap: wrap; gap: 8px; flex: 1; }
.cr-tags > span { padding: 4px 12px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--ln, #1e1e1e); font-size: 14px; line-height: 20px; color: var(--muted); }
.cr-ap { display: inline-flex; align-items: center; gap: 8px; flex: none; padding: 12px 20px; border-radius: 999px; background: #fff; font-size: 16px; line-height: 24px; font-weight: 500; color: #0a0a0a; }
.cr-ap svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; transition: transform 200ms ease; }
.cr-r details[open] .cr-ap svg { transform: rotate(180deg); }
.cr-d { padding: 0 24px 24px; }
.cr-in { margin: 0 0 24px; max-width: 760px; font-size: 16px; line-height: 24px; color: var(--muted); }
.cr-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.cr-cols h3 { margin: 0 0 16px; font-family: var(--display); font-size: 20px; line-height: 28px; font-weight: 500; color: var(--text); }
.cr-cols ul { margin: 0; padding: 0 0 0 20px; }
.cr-cols li { font-size: 16px; line-height: 24px; color: var(--muted); }
.cr-cols li + li { margin-top: 8px; }
.cr-go { display: inline-flex; align-items: center; gap: 8px; margin-top: 24px; font-size: 16px; line-height: 24px; font-weight: 500; color: var(--text); }
.cr-go svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.cr-none { padding: 24px; text-align: center; background: #141414; }
.cr-none p { margin: 0; font-size: 16px; line-height: 24px; color: var(--muted); }
.cr-none a { color: var(--text); text-decoration: underline; text-underline-offset: 3px; }

/* application form: the role select matches the inputs */
.qf-f select { width: 100%; height: 52px; margin-bottom: 20px; padding: 0 48px 0 20px; border: 0; border-radius: 999px; background: #1a1a1a; color: var(--text); font: inherit; font-size: 16px; line-height: 24px;
  -webkit-appearance: none; appearance: none; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3 4.5l3 3 3-3' fill='none' stroke='%23c9c9c9' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 20px center; background-size: 12px 12px; }

@media (max-width: 900px) {
  .cr-hp { grid-template-columns: minmax(0, 1fr); row-gap: 24px; padding: 32px var(--gutter, 24px); }
  .cr-q { padding: 32px 24px; }
  .cr-cols { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 639.98px) {
  .cr-hl h1#h1 { font-size: 48px; line-height: 56px; }
  .cr-q blockquote p { font-size: 20px; line-height: 28px; }
  .cr-r summary { flex-wrap: wrap; padding: 16px; }
  .cr-rt { width: 100%; font-size: 20px; line-height: 28px; }
  .cr-d { padding: 0 16px 16px; }
  .cr-none { padding: 16px; }
}

/* the quote frame starts right under the header panel: no -8px pull-up here, so the gap is the frame's own 8px */
.cr-qs > .gc { margin-top: -1px; }