/* MamChef /careers page. Loads after site.css; selectors are cr- prefixed and use the site tokens (rust leads: hero = the one rust wall,
   cream bands, white form card; no gold on cream, no blur). The form has no loops: .rv reveal and button transitions follow the global html.motion-off rule. */

/* 1 hero: the page's rust wall */
.cr-hero {
  position: relative; z-index: 0;
  padding: calc(var(--hdr-h) + clamp(48px, 7vw, 96px)) 0 clamp(48px, 6vw, 80px);
  background: radial-gradient(120% 90% at 85% 0%, var(--rust-500), var(--rust-700) 70%);
}
.cr-hat { width: 40px; color: var(--white); margin-bottom: 18px; }
.cr-hero .eyebrow { color: var(--on-rust); }
.cr-hero h1 { margin-top: 14px; font-size: clamp(2.25rem, 1.2rem + 3.2vw, 4rem); font-weight: 800; line-height: 1; letter-spacing: -.03em; color: var(--white); }
.cr-hero .lead { margin-top: 20px; color: var(--on-rust); }
.cr-hero .btn { margin-top: 28px; }

/* 2 fit */
.cr-fit { padding: clamp(56px, 8vw, 104px) 0 clamp(24px, 4vw, 48px); }
.cr-cards { list-style: none; display: grid; grid-template-columns: 1fr; gap: 16px; margin-top: clamp(28px, 4vw, 44px); }
.cr-card { background: var(--white); border: 1px solid var(--line); border-radius: var(--r2); padding: 22px; box-shadow: var(--shadow-1); }
.cr-tic { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: var(--rust-600); color: var(--white); margin-bottom: 16px; }
.cr-tic svg { width: 22px; height: 22px; }
.cr-card h3 { font-size: 1.25rem; font-weight: 700; line-height: 1.15; color: var(--ink); }
.cr-card p { margin-top: 8px; color: var(--umber); }
.cr-fit-end { margin-top: clamp(24px, 3vw, 36px); max-width: 60ch; color: var(--umber); font-size: 1.125rem; }
@media (min-width: 600px) { .cr-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .cr-cards { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* 3 apply */
.cr-apply { padding: clamp(40px, 6vw, 80px) 0 clamp(64px, 9vw, 120px); }
.cr-apply-in { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(28px, 4vw, 44px); align-items: start; }
@media (min-width: 1024px) {
  .cr-apply-in { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); grid-template-areas: "head form" "notes form"; grid-template-rows: auto 1fr; column-gap: clamp(32px, 5vw, 72px); row-gap: 0; }
  .cr-apply-head { grid-area: head; } .cr-card-form { grid-area: form; } .cr-notes { grid-area: notes; }
}
.cr-priv { margin-top: 0; }
@media (min-width: 1024px) { .cr-priv { margin-top: 28px; } }
.cr-priv h3 { font-size: 1.125rem; font-weight: 700; color: var(--ink); scroll-margin-top: calc(var(--hdr-h) + 24px); }
.cr-priv p { margin-top: 8px; color: var(--umber); font-size: 1rem; }
.cr-mail { margin-top: 16px; color: var(--umber); font-size: 1rem; }
.cr-priv a, .cr-mail a, .cr-check a, .cr-banner a, .cr-nojs a { color: var(--rust-600); text-underline-offset: 3px; }

.cr-card-form { background: var(--white); border: 1px solid var(--line); border-radius: 24px; padding: 28px; box-shadow: var(--shadow-1); max-width: 640px; width: 100%; }
@media (max-width: 599px) { .cr-card-form { padding: 20px; } }

.cr-form { display: grid; gap: 20px; position: relative; }
html:not(.js) .cr-form { display: none; }
.cr-nojs { color: var(--umber); }
.js .cr-nojs { display: none; }
.cr-field { display: grid; gap: 8px; min-width: 0; }
.cr-field > label:not(.cr-check) { font-family: var(--display); font-weight: 700; font-size: 1rem; color: var(--ink); }
.cr-field input:not([type="checkbox"]):not([type="file"]), .cr-field select, .cr-field textarea {
  width: 100%; min-height: 52px; padding: 12px 14px; border: 1.5px solid var(--taupe); border-radius: 12px;
  background: var(--white); color: var(--ink); font: inherit; font-size: 1rem; line-height: 1.4;
}
.cr-field textarea { resize: vertical; min-height: 150px; }
.cr-field select { appearance: none; -webkit-appearance: none; padding-right: 42px; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2347695c' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center; background-size: 20px; }
.cr-field input:hover:not([type="checkbox"]):not([type="file"]), .cr-field select:hover, .cr-field textarea:hover { border-color: var(--ink); }
.cr-field input:focus-visible, .cr-field select:focus-visible, .cr-field textarea:focus-visible { border-color: var(--rust-500); }
.cr-field [aria-invalid="true"] { border-color: var(--err) !important; }
.cr-hint { font-size: .9375rem; color: var(--umber); }
.cr-err { display: flex; gap: 8px; align-items: flex-start; font-size: .9375rem; line-height: 1.4; color: var(--err); }
.cr-err[hidden] { display: none; }
.cr-err::before { content: "!"; flex: none; display: grid; place-items: center; width: 18px; height: 18px; margin-top: 1px; border-radius: 50%; background: var(--err); color: var(--white); font: 700 .75rem/1 var(--display); }
.cr-field input[type="file"] { font-size: 1rem; color: var(--umber); max-width: 100%; }
.cr-field input[type="file"]::file-selector-button {
  min-height: 44px; margin-right: 12px; padding: 0 20px; border: 1.5px solid var(--rust-500); border-radius: 999px;
  background: var(--white); color: var(--rust-600); font: 650 .9375rem var(--display); cursor: pointer; transition: background-color .3s, color .3s;
}
.cr-field input[type="file"]::file-selector-button:hover { background: var(--rust-500); color: var(--white); }
.cr-rm { justify-self: start; min-height: 44px; padding: 0 4px; color: var(--rust-600); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.cr-rm[hidden] { display: none; }
.cr-check { display: flex; gap: 12px; align-items: flex-start; min-height: 44px; padding: 4px 0; cursor: pointer; color: var(--ink); font-size: 1rem; line-height: 1.45; }
.cr-check input { flex: none; width: 22px; height: 22px; margin-top: 2px; accent-color: var(--rust-500); cursor: pointer; }
.cr-check input[aria-invalid="true"] { outline: 2px solid var(--err); outline-offset: 2px; }
.cr-priv-pop { padding: 12px 14px; border-radius: 12px; border-left: 4px solid var(--rust-600); background: var(--cream); }
.cr-priv-pop[hidden] { display: none; }
.cr-priv-pop p { margin: 0; color: var(--umber); font-size: 1rem; line-height: 1.45; }
.cr-priv-pop a { color: var(--rust-600); text-underline-offset: 3px; }
.cr-hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.cr-banner { padding: 14px 16px; border-radius: 12px; border-left: 4px solid var(--err); background: var(--rust-50); color: var(--ink); font-size: 1rem; line-height: 1.45; }
.cr-banner[hidden] { display: none; }
.cr-send { width: 100%; }
@media (min-width: 600px) { .cr-send { width: auto; justify-self: start; } }
.cr-send[disabled] { cursor: progress; }

/* success panel */
.cr-done[hidden] { display: none; }
.cr-done { display: grid; gap: 14px; justify-items: start; }
.cr-done-ic { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; border: 2px solid var(--ok); color: var(--ok); }
.cr-done-ic svg { width: 26px; height: 26px; }
.cr-done h3 { font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); font-weight: 800; color: var(--ink); }
.cr-done h3:focus { outline: none; }
.cr-done p { color: var(--umber); overflow-wrap: anywhere; }
.cr-done b { color: var(--ink); }