/* ============================================================
   SMK & Co — Careers page
   Same system as the homepage: white / #F2F6FA / charcoal, blue accent.
   ============================================================ */

/* ---------- hero ---------- */
.cr-hero{background:var(--surface);padding-block:clamp(124px,13vw,180px) clamp(56px,6vw,84px)}
.cr-hero__box{max-width:56rem}
.hx .cr-hero h1{margin:0;font-weight:600;font-size:clamp(2.2rem,4.6vw,3.5rem);line-height:1.05;letter-spacing:-.03em;max-width:24ch;text-wrap:pretty}
.cr-hero__sub{margin:24px 0 0;font-size:1.06rem;line-height:1.72;color:var(--text);max-width:56ch}
.cr-hero__act{display:flex;align-items:center;gap:clamp(20px,3vw,40px);flex-wrap:wrap;margin-top:36px}
/* the facts of the job as a strip on hairlines, full width, like a notice */
.cr-hero__facts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:22px clamp(24px,3vw,48px);margin:clamp(48px,5.6vw,80px) 0 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding-block:clamp(22px,2.4vw,30px)}
.cr-hero__facts div{max-width:26ch}
.cr-hero__facts dt{font-family:var(--font);font-size:.73rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--text-muted);margin:0 0 9px}
.cr-hero__facts dd{margin:0;font-family:var(--font);font-size:1.02rem;font-weight:600;letter-spacing:-.018em;color:var(--ink);line-height:1.35}

/* ---------- why work here: on white; the page's one ink block is the application, last ---------- */
.cr-why{background:var(--surface);border-top:1px solid var(--line)}
.cr-why__st{margin:0;font-family:var(--font);font-weight:600;font-size:clamp(1.6rem,3vw,2.4rem);line-height:1.14;letter-spacing:-.026em;color:var(--ink);max-width:30ch;text-wrap:pretty}
.cr-why__cols{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,4vw,64px);margin-top:clamp(30px,3.4vw,46px)}
.cr-why__lists{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,4vw,64px);margin-top:clamp(38px,4.4vw,62px);border-top:1px solid var(--line);padding-top:clamp(26px,3vw,38px)}
.cr-why__lists h4{font-family:var(--font);font-size:.73rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--text-muted);margin:0 0 14px}
.cr-why__lists ul{list-style:none;margin:0;padding:0}
.cr-why__lists li{font-size:.96rem;color:var(--text);padding:9px 0;border-top:1px solid var(--line)}
.cr-why__lists li:first-child{border-top:0}



/* ---------- what we look for: aligned 2x2 ---------- */
.cr-look{background:var(--surface-tint);border-top:1px solid var(--line)}
.cr-look__grid{display:grid;grid-template-columns:1fr 1fr;gap:0 clamp(30px,4.4vw,80px)}
.cr-trait{display:grid;grid-template-columns:clamp(40px,4vw,56px) minmax(0,1fr);align-items:start;gap:0 clamp(12px,1.6vw,22px);padding:clamp(22px,2.6vw,32px) 0;border-top:1px solid var(--line)}
.cr-trait__n{font-family:var(--font);font-size:.98rem;font-weight:500;color:var(--text-muted);line-height:1.5}
.hx .cr-trait h3{margin:0;font-size:clamp(1.08rem,1.6vw,1.28rem);font-weight:600;letter-spacing:-.018em;line-height:1.28}
.cr-trait p{margin:10px 0 0;font-size:.96rem;line-height:1.66;color:var(--text);max-width:42ch}

/* ---------- work rows ---------- */
.cr-work{background:var(--surface);border-top:1px solid var(--line)}
.cr-rows{border-top:1px solid var(--line)}
.cr-row{display:grid;grid-template-columns:clamp(52px,5.6vw,88px) minmax(0,1fr) minmax(0,1.1fr);align-items:baseline;gap:0 clamp(16px,2.4vw,40px);padding:clamp(22px,2.6vw,32px) clamp(6px,1.2vw,16px);border-bottom:1px solid var(--line);transition:background .3s var(--ease)}
.cr-row:hover{background:var(--accent-wash)}
.cr-row__n{font-family:var(--font);font-size:clamp(1rem,1.4vw,1.28rem);font-weight:500;color:var(--text-muted)}
.hx .cr-row h3{margin:0;font-size:clamp(1.18rem,2vw,1.6rem);font-weight:600;line-height:1.16;letter-spacing:-.022em}
.cr-row__lead{margin:8px 0 0;font-size:.95rem;font-weight:500;color:var(--text-muted)}
.cr-row__d{margin:0;font-size:.96rem;line-height:1.68;color:var(--text);max-width:46ch}

/* ---------- openings ---------- */
.cr-open{background:var(--surface-tint);border-top:1px solid var(--line)}
.cr-roles{border-top:1px solid var(--line)}
.cr-role{display:grid;grid-template-columns:minmax(0,1fr) 12em auto;align-items:center;gap:clamp(14px,2vw,32px);padding:clamp(20px,2.4vw,30px) clamp(6px,1.2vw,16px);border-bottom:1px solid var(--line);transition:background .3s var(--ease)}
.cr-role:hover{background:var(--surface)}
.hx .cr-role h3{margin:0;font-size:clamp(1.06rem,1.7vw,1.3rem);font-weight:600;letter-spacing:-.018em;line-height:1.3}
.cr-role p{margin:7px 0 0;font-size:.94rem;line-height:1.6;color:var(--text);max-width:52ch}
.cr-role__meta{font-family:var(--font);font-size:.73rem;font-weight:600;letter-spacing:.13em;text-transform:uppercase;color:var(--text-muted)}
.cr-role__go{display:inline-flex;align-items:center;gap:.5em;justify-self:end;font-size:.88rem;font-weight:600;color:var(--ink);white-space:nowrap}
.cr-role__go::after{content:"→";transition:transform .25s var(--ease)}
.cr-role:hover .cr-role__go{color:var(--accent-ink)}
.cr-role:hover .cr-role__go::after{transform:translateX(4px)}
.cr-open__note{margin:clamp(26px,3vw,38px) 0 0;font-size:.96rem;line-height:1.7;color:var(--text);max-width:60ch}

/* ---------- how to apply ---------- */
.cr-apply{background:var(--surface);border-top:1px solid var(--line)}
.cr-apply__grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(34px,5vw,90px);align-items:start}
.cr-apply__l p{margin:22px 0 0;font-size:1.02rem;line-height:1.74;color:var(--text);max-width:44ch}
.cr-apply__card{border:1px solid var(--line);background:var(--surface-tint);padding:clamp(26px,3vw,40px)}
.cr-apply__step{padding:clamp(16px,1.8vw,22px) 0;border-top:1px solid var(--line)}
.cr-apply__step:first-of-type{border-top:0;padding-top:0}
.cr-apply__step h4{margin:0;font-family:var(--font);font-size:.73rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--text-muted)}
.cr-apply__step p{margin:10px 0 0;font-size:.98rem;line-height:1.68;color:var(--text)}
.cr-apply__act{margin-top:clamp(24px,2.8vw,34px);padding-top:clamp(22px,2.4vw,30px);border-top:1px solid var(--line)}
.cr-apply__mail{display:block;margin-top:14px;font-size:.92rem;color:var(--text)}

/* how to apply sits on ink: the page ends dark. The card loses its frame
   there and becomes a plain column of steps on hairlines. */
.cr-apply.is-dark{background:var(--ink);border-top-color:var(--line-on-ink)}
.cr-apply.is-dark .hx-sec-label{color:var(--on-ink-muted)}
.cr-apply.is-dark .hx-sec-label::after{background:var(--line-on-ink)}
.cr-apply.is-dark .cr-apply__l p{color:var(--on-ink-muted)}
.cr-apply.is-dark .cr-apply__card{border:0;background:none;padding:0}
.cr-apply.is-dark .cr-apply__step,.cr-apply.is-dark .cr-apply__act{border-top-color:var(--line-on-ink)}
.cr-apply.is-dark .cr-apply__step h4{color:var(--on-ink-muted)}
.cr-apply.is-dark .cr-apply__step p,.cr-apply.is-dark .cr-apply__mail{color:var(--on-ink-muted)}
.hx .cr-apply.is-dark .hx-btn{background:var(--surface);color:var(--ink);border-color:var(--surface)}

@media (max-width:900px){
  .cr-why__cols,.cr-why__lists,.cr-look__grid,.cr-apply__grid{grid-template-columns:1fr;gap:clamp(24px,4vw,40px)}
  .cr-hero__facts{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cr-look__grid .cr-trait:first-child{border-top:1px solid var(--line)}
  .cr-row{grid-template-columns:clamp(40px,6vw,56px) minmax(0,1fr)}
  .cr-row__d{grid-column:2;margin-top:10px;max-width:60ch}
  .cr-role{grid-template-columns:1fr;gap:10px}
  .cr-role__go{justify-self:start}
}
@media (max-width:680px){
  .cr-hero__facts{grid-template-columns:1fr;gap:0}
  .cr-hero__facts div{max-width:none;padding:14px 0;border-top:1px solid var(--line)}
  .cr-hero__facts div:first-child{border-top:0;padding-top:0}
  .cr-row{grid-template-columns:34px minmax(0,1fr);padding-inline:0}
  .cr-row__d{grid-column:1/-1}
  .hx .cr-hero .hx-btn{width:100%;justify-content:center}
}

/* --- the same ladder, for the .cr-* components. careers.css loads last. --- */
.hx .cr-hero h1{
  font-size:var(--text-d1);line-height:var(--lh-d1);
  letter-spacing:var(--ls-d1);font-weight:var(--w-display)}
.hx .cr-row h3{
  font-size:var(--text-h2);line-height:var(--lh-h2);
  letter-spacing:var(--ls-h2);font-weight:var(--w-display)}
.hx .cr-trait h3,.hx .cr-role h3,.hx .cr-who__item h3{
  font-size:var(--text-h3);line-height:var(--lh-h3);
  letter-spacing:var(--ls-h3);font-weight:var(--w-display)}
.hx .cr-why__lists h4,.hx .cr-apply__step h4{
  font-size:var(--text-label);line-height:var(--lh-label);
  letter-spacing:var(--ls-label);font-weight:var(--w-medium)}