/* Slik jobber vi (for companies) — the calm style of the candidates' page:
   a short dark intro, a strip of facts, the steps on the footer's column,
   and the closing box used on Om oss.
   Heading sizes come from scale.css. */
.business-process-page{--process-gutter:max(var(--page-gutter),calc((100vw - 1536px)/2));background:#fff;color:var(--ink)}
.business-process-main{padding-top:0}
.business-process-steps{padding:88px var(--process-gutter);background:#fff}
.business-process-main .eyebrow{margin-bottom:16px}

/* ------------------------------------------------------------------ intro */
.business-process-hero{display:grid;gap:20px;padding:172px var(--process-gutter) 80px;background:var(--pine);color:#fff}
.business-process-hero>.eyebrow{width:fit-content;margin:0;padding-bottom:8px;border-bottom:2px solid var(--red);color:#b7c5d6}
.business-process-hero h1{margin:0}
.business-process-hero h1 span{color:var(--red)}
.business-process-hero>p:last-child{max-width:660px;margin:0;color:#d9e2ec;font-size:1rem;line-height:1.7}

/* facts under the intro, like on Om oss */
.business-process-facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));padding:28px var(--process-gutter);border-bottom:1px solid var(--line);background:#fff;color:var(--ink)}
.business-process-facts>div{display:grid;gap:6px;align-content:start;padding:0 28px;border-left:1px solid var(--line)}
.business-process-facts>div:first-child{padding-left:0;border-left:0}
.business-process-facts span{color:var(--muted);font-size:.6875rem;letter-spacing:.14em;text-transform:uppercase}
.business-process-facts strong{color:var(--ink);font:500 1rem/1.4 var(--sans)}

/* -------------------------------------------------- the eight steps */
.business-process-steps{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);gap:80px;align-items:start}
.business-process-heading h2{margin:0;text-wrap:balance}
.business-process-heading>p:not(.eyebrow){max-width:440px;margin-top:20px;color:var(--muted);font-size:1rem;line-height:1.75}
.business-process-more{display:inline-flex;align-items:center;gap:8px;margin-top:28px;color:var(--ink);font-size:.9375rem;font-weight:600;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:6px;transition:color .2s ease}
.business-process-more span{transition:transform .2s ease}
.business-process-more:hover,.business-process-more:focus-visible{color:var(--red)}
.business-process-more:hover span{transform:translateX(3px)}
.business-step-list{margin:0;padding:0;list-style:none}
.business-step-list>li{display:grid;grid-template-columns:42px minmax(0,1fr);column-gap:18px;padding:26px 0;border-top:1px solid var(--line);scroll-margin-top:120px}
.business-step-list>li:last-child{border-bottom:1px solid var(--line)}
.business-step-number{padding-top:4px;color:#c8101b;font-size:.875rem;font-variant-numeric:tabular-nums}
.business-step-list h3{margin:0;font-size:1.25rem;line-height:1.35;letter-spacing:-.025em}
.business-step-list p{max-width:600px;margin-top:8px;color:var(--muted);font-size:.9375rem;line-height:1.7}
.business-step-tags{display:flex;flex-wrap:wrap;gap:6px;margin:14px 0 0;padding:0;list-style:none}
.business-step-tags li{padding:4px 10px;border-radius:999px;background:var(--mint);color:#3d4f63;font-size:.75rem;font-weight:600}

/* ------------------------------------------------------- closing box */
.business-process-cta{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:48px;align-items:center;margin:0 var(--process-gutter) 88px;padding:52px clamp(28px,5vw,64px);border:1px solid #e2e7ed;border-radius:var(--card-radius);background:var(--mint);color:var(--ink);text-align:left}
.business-process-cta h2{max-width:760px;margin:0;font-size:clamp(1.75rem,3vw,2.5rem);line-height:1.14;letter-spacing:-.035em;text-wrap:balance}
.business-process-cta-copy>p{max-width:600px;margin:14px 0 0;color:var(--muted);font-size:1rem;line-height:1.6;text-wrap:pretty}
.business-process-cta-actions{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:12px}
.business-process-cta .button{background:var(--pine);color:#fff;white-space:nowrap}
.business-process-cta .button:hover,.business-process-cta .button:focus-visible{background:#213852;color:#fff;box-shadow:none}
.business-process-cta-secondary{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:12px 24px;border-radius:var(--button-radius);box-shadow:inset 0 0 0 1.5px var(--pine);color:var(--pine);font-size:.9375rem;font-weight:500;white-space:nowrap;transition:background-color .2s ease,color .2s ease}
.business-process-cta-secondary:hover,.business-process-cta-secondary:focus-visible{background:var(--pine);color:#fff}

/* the heading stays in view while the steps scroll past */
@media(min-width:961px) and (min-height:620px){
 .business-process-heading{position:sticky;top:132px}
}
@media(max-width:1100px){
 .business-process-steps{gap:48px}
}
@media(max-width:960px){
 .business-process-steps{grid-template-columns:1fr;gap:32px}
 .business-process-cta{grid-template-columns:1fr;gap:24px}
 .business-process-cta-actions{justify-content:flex-start}
}
@media(max-width:700px){
 .business-process-hero{gap:16px;padding:132px var(--process-gutter) 48px}
 .business-process-hero>p:last-child{font-size:.9375rem}
 .business-process-facts{grid-template-columns:1fr;gap:12px;padding-top:24px;padding-bottom:24px}
 .business-process-facts>div{grid-template-columns:96px minmax(0,1fr);align-items:baseline;padding:0;border-left:0}
 .business-process-steps{padding-top:56px;padding-bottom:56px}
 .business-step-list>li{grid-template-columns:32px minmax(0,1fr);column-gap:10px;padding:22px 0}
 .business-process-cta{margin-bottom:56px;padding:32px 24px}
 /* the buttons share one row; a lone one (jobs switched off) takes it all */
 .business-process-cta-actions{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:10px;width:100%}
 .business-process-cta-actions>a{min-width:0;padding-left:12px;padding-right:12px}
}
@media(prefers-reduced-motion:reduce){.business-process-more span{transition:none}}

/* Colour and pointer reactions (18.10.2026): the eight steps sit on a grey
   band and react like rows elsewhere (brand.css), with a white card */
.business-process-steps{background:var(--mint)}
.business-step-list{--row-tint:#fff}
.business-step-tags li{background:#fff}
@media(hover:hover){.business-step-list>li:hover .business-step-tags li{background:var(--mint)}}