/* ==========================================================================
   Bryder Group, the careers pages (23 October 2026). Loaded after calm.css
   on /careers/ and each job page under it, and nowhere else.

   The same calm look: paper, white sheets, deep green ink, Archivo. What is
   new here is a photo hero with a white card over its lower edge, a list of
   roles, a note from the founder, plus-sign question rows, the job page
   layout and the application form.

   .tbc marks something the owner still has to fill in or confirm. It is
   meant to stand out in the review copy, and none should be left on a page
   that goes live (README, "Careers").
   ========================================================================== */

/* ---- review marks ------------------------------------------------------------ */
.tbc {
  padding: 1px 6px; border-radius: 6px;
  background: #FFF1C2; color: #5C4300;
  box-shadow: inset 0 0 0 1px rgba(150, 110, 0, 0.35);
  font-weight: 600; font-style: normal;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
.review-note {
  display: flex; gap: 12px; align-items: flex-start;
  max-width: var(--maxw); margin: 16px auto 0; padding: 12px var(--pad);
  font-size: 15px; color: #5C4300;
}
.review-note > div { padding: 12px 16px; border-radius: 10px; background: #FFF8DF; box-shadow: inset 0 0 0 1px rgba(150, 110, 0, 0.3); width: 100%; }

/* ---- hero: a photo with a white card over its lower edge ----------------------- */
.c-hero { padding-top: clamp(16px, 2.5vw, 32px); }
.c-hero__media {
  position: relative; overflow: hidden;
  height: clamp(340px, 42vw, 560px);
  border-radius: 20px; background: var(--paper-2);
}
.c-hero__media img { width: 100%; height: 100%; object-fit: cover; object-position: 72% 30%; }
.c-hero__card {
  position: relative; z-index: 1;
  width: min(100%, 600px);
  margin: clamp(-200px, -14vw, -120px) 0 0 clamp(20px, 4vw, 56px);
  padding: clamp(28px, 3.4vw, 44px);
  border-radius: 20px; background: var(--sheet);
  box-shadow: 0 0 0 1px var(--line), 0 30px 60px -40px rgba(18, 32, 28, 0.35);
}
.c-hero__card h1 { font-size: clamp(36px, 4.4vw, 56px); }
.c-hero__card .lede { margin-top: 16px; }
.c-hero__card .btn-row { margin-top: 28px; }
.c-hero__cap { margin-top: 20px; font-size: 14px; color: var(--soft); }
@media (max-width: 720px) {
  .c-hero .wrap { padding-inline: 12px; }
  .c-hero__media { height: auto; aspect-ratio: 4 / 3.4; border-radius: 16px; }
  .c-hero__media img { object-position: 78% 30%; }
  .c-hero__card { width: auto; margin: -64px 12px 0; padding: 26px 22px; border-radius: 16px; }
}

/* ---- the roles list --------------------------------------------------------------- */
.roles { display: grid; gap: 16px; }
.role {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px 40px; align-items: center;
  padding: clamp(22px, 2.6vw, 30px) clamp(22px, 3vw, 34px);
  border: 1px solid var(--line); border-radius: 18px; background: var(--sheet);
  color: var(--ink); text-decoration: none;
  transition: border-color 0.2s var(--ease), transform 0.25s var(--ease);
}
.section--alt .role { background: var(--paper); }
.role:hover { border-color: rgba(8, 124, 112, 0.45); }
@media (prefers-reduced-motion: no-preference) { .role:hover { transform: translateY(-2px); } }
.role__team { display: block; font-size: 12px; font-weight: 620; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); }
.role__title { display: block; margin-top: 6px; font-size: clamp(22px, 2.2vw, 26px); font-weight: 640; letter-spacing: -0.015em; line-height: 1.2; }
.role__sum { display: block; margin-top: 8px; max-width: 60ch; color: var(--soft); font-size: 16px; }
.role__meta { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.role__go { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; color: var(--ink-3); white-space: nowrap; }
.role__go::after { content: "\2192"; font-family: system-ui, sans-serif; }
@media (max-width: 760px) {
  .role { grid-template-columns: 1fr; }
}

.chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 12px; border: 1px solid var(--line); border-radius: 999px;
  background: var(--paper); font-size: 14px; color: var(--ink); line-height: 1.4;
}
.section--alt .role .chip { background: var(--sheet); }
/* A chip that is only a review mark shows as the mark alone. */
.chip:has(.tbc) { padding: 0; border: 0; background: none; }
.section--alt .role .chip:has(.tbc) { background: none; }
.chip .tbc { padding: 5px 12px; border-radius: 999px; }
.roles-foot { margin-top: 24px; color: var(--soft); font-size: 15px; }

/* ---- a note from the founder ---------------------------------------------------- */
.note { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.4fr); gap: clamp(32px, 6vw, 88px); align-items: center; }
.note__photo img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 18px; }
.note__photo figcaption { margin-top: 12px; font-size: 14px; color: var(--soft); }
.note__text .body { margin-top: 18px; font-size: 18px; line-height: 1.7; }
.note__text .body + .body { margin-top: 14px; }
.note__sign { margin-top: 24px; font-weight: 640; }
.note__sign span { display: block; font-weight: 400; color: var(--soft); font-size: 15px; }
.note__flag { margin-bottom: 18px; font-size: 14px; }
@media (max-width: 860px) {
  .note { grid-template-columns: 1fr; }
  .note__photo { max-width: 340px; }
}

/* ---- how we work and how hiring works ------------------------------------------- */
.pillars--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1080px) { .pillars--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 40px; } }
@media (max-width: 600px) { .pillars--4 { grid-template-columns: 1fr; } }

.steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; counter-reset: step; }
.steps li { counter-increment: step; padding: 24px; border: 1px solid var(--line); border-radius: 16px; background: var(--sheet); }
.section--alt .steps li { background: var(--paper); }
.steps li::before {
  content: counter(step); display: grid; place-items: center;
  width: 34px; height: 34px; margin-bottom: 16px; border-radius: 50%;
  background: var(--ink); color: #fff; font-weight: 640; font-size: 15px;
}
.steps h3 { font-size: 19px; }
.steps p { margin-top: 8px; color: var(--soft); font-size: 16px; }
@media (max-width: 960px) { .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .steps { grid-template-columns: 1fr; } }

/* ---- questions: plus-sign rows ---------------------------------------------------- */
.acc { border-bottom: 1px solid var(--line); }
.acc__item { border-top: 1px solid var(--line); }
.acc__h { margin: 0; font-size: inherit; line-height: inherit; letter-spacing: normal; }
.acc__btn {
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  width: 100%; padding: 22px 0; border: 0; background: none; cursor: pointer;
  font: inherit; font-size: clamp(17px, 1.5vw, 19px); font-weight: 600; line-height: 1.35;
  letter-spacing: -0.005em; color: var(--ink); text-align: left;
}
.acc__btn:hover { color: var(--ink-2); }
.acc__btn:focus-visible { outline-offset: 4px; }
.acc__icon { position: relative; flex: none; width: 32px; height: 32px; border: 1px solid var(--line); border-radius: 50%; background: var(--sheet); transition: border-color 0.2s var(--ease), background-color 0.2s var(--ease); }
.acc__icon::before, .acc__icon::after {
  content: ""; position: absolute; left: 50%; top: 50%;
  width: 12px; height: 1.5px; margin: -0.75px 0 0 -6px; border-radius: 2px; background: var(--ink);
  transition: transform 0.25s var(--ease);
}
.acc__icon::after { transform: rotate(90deg); }
.acc__btn[aria-expanded="true"] .acc__icon { background: var(--ink); border-color: var(--ink); }
.acc__btn[aria-expanded="true"] .acc__icon::before,
.acc__btn[aria-expanded="true"] .acc__icon::after { background: #fff; }
.acc__btn[aria-expanded="true"] .acc__icon::after { transform: rotate(0deg); }
.acc__btn:hover .acc__icon { border-color: var(--ink); }
.acc__panel { padding: 0 64px 24px 0; color: var(--soft); max-width: 78ch; }
.acc__panel p + p { margin-top: 12px; }
.acc__panel a { color: var(--ink-3); text-underline-offset: 3px; text-decoration-thickness: 1px; }
@media (max-width: 560px) { .acc__panel { padding-right: 0; } }
@media (prefers-reduced-motion: reduce) { .acc__icon, .acc__icon::before, .acc__icon::after { transition: none; } }

/* ---- a job page -------------------------------------------------------------------- */
.job-head .h-xl { margin-top: 4px; }
.job-head .role__meta { margin-top: 22px; }
.job-head .btn-row { margin-top: 28px; }
.job-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 340px); gap: clamp(40px, 6vw, 88px); align-items: start; }
.job-body { max-width: 68ch; color: var(--soft); }
.job-body h2 { margin: 48px 0 14px; font-size: clamp(22px, 2.2vw, 26px); color: var(--ink); }
.job-body h2:first-child { margin-top: 0; }
.job-body p + p, .job-body ul + p, .job-body p + ul { margin-top: 14px; }
.job-body ul { padding-left: 20px; list-style: disc; }
.job-body li + li { margin-top: 8px; }
.job-body li::marker { color: var(--ink-3); }
.job-body strong { color: var(--ink); }
.job-body a { color: var(--ink-3); text-underline-offset: 3px; text-decoration-thickness: 1px; }
.job-body .callout { margin-top: 18px; }
.job-aside { position: sticky; top: calc(var(--hdr) + 24px); }
/* In the narrow summary box each label sits above its value. */
.job-aside .glance dl div { display: block; padding: 11px 0; }
.job-aside .glance dt { font-size: 13px; }
.job-aside .glance dd { margin-top: 2px; text-align: left; }
.job-aside .btn { width: 100%; margin-top: 20px; }
@media (max-width: 960px) {
  .job-grid { grid-template-columns: 1fr; }
  .job-aside { position: static; order: -1; }
  .job-aside .glance { max-width: none; }
}

/* ---- the application form ---------------------------------------------------------- */
.apply { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.5fr); gap: clamp(32px, 5vw, 72px); align-items: start; }
.apply__intro .body + .body { margin-top: 14px; }
.apply__intro ul { margin-top: 18px; display: grid; gap: 10px; color: var(--soft); }
.apply__intro li { display: flex; gap: 10px; }
.apply__intro li::before { content: ""; flex: none; width: 7px; height: 7px; margin-top: 10px; border-radius: 50%; background: var(--teal); }
@media (max-width: 900px) { .apply { grid-template-columns: 1fr; } }

.section--alt .form { background: var(--paper); }
.f-hint { font-size: 14px; color: var(--soft); }
.f-err { font-size: 14px; font-weight: 600; color: #A3261B; }
.f input[aria-invalid="true"]:not([type="checkbox"]):not([type="radio"]), .f select[aria-invalid="true"], .f textarea[aria-invalid="true"] { border-color: #A3261B; box-shadow: 0 0 0 3px rgba(163, 38, 27, 0.12); }
.f-count { justify-self: end; font-size: 13px; color: var(--soft); font-variant-numeric: tabular-nums; }
.f input[type="file"] { min-height: 0; padding: 10px; cursor: pointer; font-size: 15px; }
.f input[type="file"]::file-selector-button {
  margin-right: 14px; padding: 8px 14px; border: 1px solid var(--ink); border-radius: 8px;
  background: var(--ink); color: #fff; font: inherit; font-size: 15px; font-weight: 600; cursor: pointer;
}
.f-file-ok { font-size: 14px; color: var(--ink-3); font-weight: 600; }

.f-set { margin: 0 0 18px; padding: 0; border: 0; min-width: 0; }
.f-set legend { padding: 0; margin-bottom: 10px; font-size: 15px; font-weight: 600; }
.f-set .f-err, .f-set .f-hint { margin-top: 8px; }
.radios { display: flex; flex-wrap: wrap; gap: 10px; }
.radio, .tick {
  display: flex; align-items: flex-start; gap: 10px; cursor: pointer;
  font-size: 16px; line-height: 1.5;
}
.f-set .radio { font-weight: 500; }
.radio { padding: 11px 16px; border: 1px solid rgba(18, 32, 28, 0.22); border-radius: 10px; background: var(--sheet); min-width: 120px; }
.radio:has(input:checked) { border-color: var(--ink-3); box-shadow: 0 0 0 3px rgba(22, 185, 165, 0.18); }
.radio input, .tick input { flex: none; width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--ink-2); }
.f label.tick { font-weight: 400; }
.tick { padding: 14px 16px; border-radius: 10px; background: var(--paper-2); color: var(--ink); }
.tick a { color: var(--ink-3); text-underline-offset: 3px; }
.f-set[aria-invalid="true"] .radio, .tick.is-invalid { box-shadow: 0 0 0 2px rgba(163, 38, 27, 0.5); }
.rtw-note { margin-top: 10px; padding: 12px 16px; border-left: 3px solid var(--teal); border-radius: 0 10px 10px 0; background: var(--paper-2); font-size: 15px; color: var(--ink); }

.form-status.is-error { background: #FBEAE8; color: #7A1D14; }
.form-status.is-preview { background: #FFF8DF; color: #5C4300; }

.applied { padding: clamp(28px, 3.4vw, 40px); border: 1px solid var(--line); border-radius: 20px; background: var(--paper); }
.applied h3 { font-size: clamp(24px, 2.4vw, 30px); }
.applied h3:focus { outline: none; }
.applied p { margin-top: 12px; color: var(--soft); }
.applied .dot { display: inline-block; width: 10px; height: 10px; margin-right: 10px; border-radius: 50%; background: var(--teal); vertical-align: 2px; }

/* ---- the other roles at the foot of a job page ----------------------------------------- */
.other-roles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 760px) { .other-roles { grid-template-columns: 1fr; } }

/* The Careers link stays marked in the header on a job page. */
.hdr-nav a[aria-current="true"] { color: var(--ink); font-weight: 600; }
.menu-nav a[aria-current="true"] { color: var(--ink-3); }
.job-aside .glance dd .muted { display: block; font-weight: 400; font-size: 14px; }

/* ---- while applications are closed ----------------------------------------------- */
/* A small pill on each role card, and a notice box on each job page. Calm: a
   soft grey dot, no alarm colours. */
.chip--off { background: var(--paper-2); border-color: transparent; color: var(--ink); font-weight: 560; }
.section--alt .role .chip--off { background: var(--paper-2); }
.chip__dot, .notice__dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: #8A9792; }
.notice {
  display: flex; gap: 14px; align-items: flex-start;
  max-width: 62ch; margin-top: 24px; padding: 16px 20px;
  border: 1px solid var(--line); border-radius: 14px; background: var(--sheet);
  color: var(--ink); font-size: 16px; line-height: 1.55;
}
.notice__dot { margin-top: 8px; }
.notice a { color: var(--ink-3); text-underline-offset: 3px; text-decoration-thickness: 1px; }
.section--alt .notice { background: var(--paper); }
.job-head .notice + .btn-row { margin-top: 20px; }
.closed { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.5fr); gap: clamp(24px, 5vw, 72px); align-items: start; }
.closed .notice { margin-top: 6px; }
@media (max-width: 900px) { .closed { grid-template-columns: 1fr; } }