/* Våre IT-områder — in the calm style of the other pages: a short dark
   intro, a strip of links to the six areas, the areas as rows with
   hairlines (name, what it covers, typical roles), the overlap between
   areas and the closing box used on Om oss. Heading sizes come from
   scale.css. The area ids are linked from the home page. */
.it-areas-page{--it-gutter:max(var(--page-gutter),calc((100vw - 1536px)/2));background:#fff;color:var(--ink)}
.it-areas-main{padding-top:0}
.it-areas-main .eyebrow{margin-bottom:16px}

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

/* links to the six areas, under the intro like the facts strip on Om oss */
.it-areas-index{padding:0 var(--it-gutter);border-bottom:1px solid var(--line);background:#fff}
.it-areas-index ol{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));margin:0;padding:0;list-style:none}
.it-areas-index li+li{border-left:1px solid var(--line)}
.it-areas-index a{display:grid;gap:4px;height:100%;padding:22px 20px;color:var(--ink);font-size:.9375rem;font-weight:500;line-height:1.35;transition:color .2s ease,background-color .2s ease}
.it-areas-index li:first-child a{padding-left:0}
.it-areas-index a span{color:#c8101b;font-size:.75rem;font-weight:500;font-variant-numeric:tabular-nums}
.it-areas-index a:hover,.it-areas-index a:focus-visible{color:var(--red)}

/* ------------------------------------------------------------ the six areas */
.it-areas-catalog{padding:88px var(--it-gutter)}
.it-areas-heading{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.9fr);gap:24px 64px;align-items:end;margin-bottom:48px}
.it-areas-heading h2{margin:0;text-wrap:balance}
.it-areas-heading p{max-width:540px;margin:0;color:var(--muted);font-size:1rem;line-height:1.75}
.it-areas-heading p+p{margin-top:12px}
.it-area{display:grid;grid-template-columns:minmax(0,.75fr) minmax(0,1.25fr) minmax(0,1fr);gap:24px 48px;padding:36px 0;border-top:1px solid var(--line)}
.it-area:last-child{border-bottom:1px solid var(--line)}
.it-area-number{margin:0 0 10px;color:#c8101b;font-size:.8125rem;font-variant-numeric:tabular-nums}
.it-area h3{margin:0;font-size:clamp(1.375rem,2vw,1.75rem);line-height:1.2;letter-spacing:-.03em}
/* the English name the field goes by — on the English page it would only repeat the heading */
.it-area-term{margin:6px 0 0;color:#7a8899;font-size:.8125rem}
html[lang="en"] .it-area-term{display:none}
.it-area-copy p{max-width:580px;margin:0;color:var(--muted);font-size:.9375rem;line-height:1.7}
.it-area-copy p+p{margin-top:10px}
.it-area-profiles h4{margin:0 0 12px;color:var(--muted);font:500 .6875rem/1.4 var(--sans);letter-spacing:.14em;text-transform:uppercase}
.it-area-profiles ul{display:flex;flex-wrap:wrap;gap:6px;margin:0;padding:0;list-style:none}
.it-area-profiles li{padding:5px 11px;border:1px solid var(--line);border-radius:999px;background:#fff;color:var(--ink);font-size:.8125rem;line-height:1.3}
.it-area:target .it-area-number,.it-area:target h3{color:var(--red)}

/* ------------------------------------------------------- across areas */
.it-areas-overlap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);gap:80px;align-items:start;padding:0 var(--it-gutter) 88px}
.it-areas-overlap h2{margin:0;text-wrap:balance}
.it-areas-overlap>div:last-child>p{max-width:620px;margin:0;color:var(--muted);font-size:1rem;line-height:1.75}
.it-areas-overlap>div:last-child>p+p{margin-top:12px}
.it-areas-combos{display:grid;gap:10px;margin:24px 0 0;padding:0;list-style:none}
.it-areas-combos li{display:flex;flex-wrap:wrap;align-items:center;gap:8px 24px}
.it-areas-combos span{position:relative;padding:6px 12px;border-radius:999px;background:var(--mint);color:#3d4f63;font-size:.8125rem;font-weight:600}
.it-areas-combos span+span::before{content:'+';content:'+'/'';position:absolute;top:50%;left:-16px;color:var(--red);font-weight:400;transform:translateY(-50%)}

/* ------------------------------------------------------- closing box */
.it-areas-cta{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:48px;align-items:center;margin:0 var(--it-gutter) 88px;padding:52px clamp(28px,5vw,64px);border:1px solid #e2e7ed;border-radius:var(--card-radius);background:var(--mint);color:var(--ink)}
.it-areas-cta h2{max-width:760px;margin:0;text-wrap:balance}
.it-areas-cta-copy>p{max-width:620px;margin:14px 0 0;color:var(--muted);font-size:1rem;line-height:1.6;text-wrap:pretty}
.it-areas-cta-actions{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:12px}
.it-areas-cta .button{background:var(--pine);color:#fff;white-space:nowrap}
.it-areas-cta .button:hover,.it-areas-cta .button:focus-visible{background:#213852;color:#fff;box-shadow:none}
.it-areas-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}
.it-areas-cta-secondary:hover,.it-areas-cta-secondary:focus-visible{background:var(--pine);color:#fff}

/* --------------------------------------------------------------- smaller */
@media(max-width:1100px){
 .it-areas-index ol{grid-template-columns:repeat(3,minmax(0,1fr))}
 .it-areas-index li:nth-child(4){border-left:0}
 .it-areas-index li:nth-child(4) a{padding-left:0}
 .it-areas-index li:nth-child(n+4){border-top:1px solid var(--line)}
 .it-area{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:20px 40px}
 .it-area-title{grid-column:1/-1}
 .it-areas-overlap{gap:48px}
}
@media(max-width:960px){
 .it-areas-heading,.it-areas-overlap{grid-template-columns:1fr;gap:20px}
 .it-areas-cta{grid-template-columns:1fr;gap:24px}
 .it-areas-cta-actions{justify-content:flex-start}
}
@media(max-width:700px){
 .it-areas-hero{gap:16px;padding:132px var(--it-gutter) 48px}
 .it-areas-hero>p:last-child{font-size:.9375rem}
 /* the six links scroll sideways on a phone */
 .it-areas-index{padding:0;overflow-x:auto;scrollbar-width:none}
 .it-areas-index::-webkit-scrollbar{display:none}
 .it-areas-index ol{display:flex;width:max-content;padding:0 var(--it-gutter)}
 .it-areas-index li,.it-areas-index li:nth-child(n+4){border-top:0}
 .it-areas-index li:nth-child(4){border-left:1px solid var(--line)}
 .it-areas-index a,.it-areas-index li:nth-child(4) a{padding:16px 18px}
 .it-areas-index li:first-child a{padding-left:0}
 .it-areas-catalog{padding-top:56px;padding-bottom:56px}
 .it-areas-heading{margin-bottom:32px}
 .it-area{grid-template-columns:1fr;gap:14px;padding:28px 0}
 /* on a phone each field keeps what it covers; who it suits is left out */
 .it-area-copy p:nth-child(3){display:none}
 .it-area-profiles h4{margin-bottom:10px}
 .it-area-profiles li{padding:4px 10px;font-size:.75rem}
 .it-areas-overlap{padding-bottom:56px}
 .it-areas-cta{margin-bottom:56px;padding:32px 24px}
 /* the buttons share one row; a lone one (jobs switched off) takes it all */
 .it-areas-cta-actions{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:10px;width:100%}
 .it-areas-cta-actions>a{min-width:0;padding-left:12px;padding-right:12px}
}

/* Colour and pointer reactions (18.10.2026): the six areas react like rows
   elsewhere (brand.css), the role chips and the index links light up, and
   "Kompetanse på tvers av områder" sits on a navy band with light chips. */
.it-area-profiles li{transition:border-color .2s ease,color .2s ease}
.it-areas-index a:hover,.it-areas-index a:focus-visible{background:var(--mint)}
.it-areas-overlap{padding-top:88px;background:var(--pine);color:#fff}
.it-areas-overlap h2{color:#fff}
.it-areas-overlap .eyebrow{color:#ff8a90}
.it-areas-overlap>div:last-child>p{color:#c5d0dc}
.it-areas-combos span{background:rgba(255,255,255,.1);color:#fff;transition:background-color .2s ease}
.it-areas-combos span+span::before{color:#ff5a61}
@media(hover:hover){
 .it-area-profiles li:hover{border-color:var(--red);color:var(--red)}
 .it-areas-combos li:hover span{background:rgba(255,255,255,.18)}
}
@media(max-width:700px){.it-areas-overlap{padding-top:56px;padding-bottom:56px}}
/* breathing room between the navy band and the closing box */
.it-areas-overlap+.it-areas-cta{margin-top:88px}
@media(max-width:700px){.it-areas-overlap+.it-areas-cta{margin-top:56px}}

/* Hovering an area sends a wave through its role chips: one after another
   each lights up blue and settles back to its usual look */
.it-area-profiles li:nth-child(1){--i:0}.it-area-profiles li:nth-child(2){--i:1}.it-area-profiles li:nth-child(3){--i:2}.it-area-profiles li:nth-child(4){--i:3}.it-area-profiles li:nth-child(5){--i:4}.it-area-profiles li:nth-child(6){--i:5}.it-area-profiles li:nth-child(7){--i:6}.it-area-profiles li:nth-child(8){--i:7}.it-area-profiles li:nth-child(9){--i:8}.it-area-profiles li:nth-child(10){--i:9}.it-area-profiles li:nth-child(11){--i:10}.it-area-profiles li:nth-child(12){--i:11}
.it-area-profiles li{transition:border-color .25s ease,color .25s ease,background-color .25s ease,transform .25s ease}
@keyframes lf-chip-wave{40%{border-color:var(--pine);background:#dfe8f3;color:var(--pine);transform:translateY(-2px)}}
@media(hover:hover) and (prefers-reduced-motion:no-preference){
 .it-area:hover .it-area-profiles li{animation:lf-chip-wave .7s ease calc(var(--i) * 80ms)}
}