/* Relio — hjemmesidespesifikk CSS (unike seksjoner + overstyringer).
   Delt system i css/site.css lastes først; denne vinner for det som avviker. */

:root{
  --navy:#041635; --navy-soft:#0B2348; --navy-deep:#020D22;
  --blue:#6B8ABC; --blue-strong:#3D5E91; --blue-hover:#2E4A75; --blue-tint:#EAF0F8;
  --white:#fff;
  --gray-50:#F4F6F9; --gray-100:#E8ECF2; --gray-200:#D5DCE6; --gray-300:#B9C3D1;
  --gray-muted:#5C6678; --gray-body:#1F2A40;
  --text:var(--gray-body); --heading:var(--navy); --muted:var(--gray-muted);
  --on-dark:#fff; --muted-on-dark:#AEBBD0;
  --line:var(--gray-100); --line-2:var(--gray-200);
  --display:"Outfit",sans-serif; --body:"Inter",sans-serif;
  --maxw:1240px; --gutter:24px;
  
  --e-expo:cubic-bezier(0.16,1,0.3,1);
  --e-quint:cubic-bezier(0.22,1,0.36,1);
  
  --z-sticky:50; --z-header:60;
}
body{
  margin:0;background:var(--white);color:var(--text);
  font-family:var(--body);font-size:clamp(1rem,0.97rem + 0.15vw,1.0625rem);line-height:1.65;
  -webkit-font-smoothing:antialiased;overflow:hidden;height:100dvh;
}
/* Nav og tjeneste-dropdown styles i css/site.css (hele siten). Ikke dupliser dem her — home.css lastes etter site.css og vil overstyre combo-klasser som .dropdown--single. */
.hero{position:relative;padding:148px 0 72px}
.hero::before{content:"";position:absolute;inset:0;z-index:-1;
  background:radial-gradient(80% 60% at 92% 4%,rgba(107,138,188,.13),transparent 60%)}
.hero__grid{display:grid;gap:40px;grid-template-columns:1fr;align-items:center}
@media(min-width:920px){.hero__grid{grid-template-columns:1.05fr .82fr;gap:56px}}
.brandline{display:inline-flex;align-items:center;gap:10px;color:var(--gray-muted);font-size:.95rem;font-weight:500;margin-bottom:26px}
.hero__title{font-size:clamp(2.7rem,7vw,5rem);font-weight:700;line-height:.98;letter-spacing:-.035em;color:var(--navy)}
.hero__title em{font-style:normal;color:var(--blue-strong);position:relative;white-space:nowrap}
.hero__lead{font-size:clamp(1.1rem,1.6vw,1.3rem);color:var(--text);max-width:50ch;margin:28px 0 36px;line-height:1.6}
.hero__cta{display:flex;gap:14px;flex-wrap:wrap}
.hero__photo{position:relative;border-radius:18px;overflow:hidden;aspect-ratio:4/5;background:var(--gray-100);
  box-shadow:0 30px 60px -32px rgba(4,22,53,.5)}
@media(max-width:919px){.hero__photo{max-width:460px;margin:8px auto 0}}
.hero__photo img{width:100%;height:100%;object-fit:cover}
.hero__photo::after{content:"";position:absolute;inset:0;background:linear-gradient(190deg,transparent 55%,rgba(4,22,53,.42))}
.hero__cap{position:absolute;left:18px;bottom:16px;color:#fff;font-size:.85rem;font-weight:500;text-shadow:0 1px 8px rgba(4,22,53,.6);z-index:1}

/* HERO ATOM ANIMATION (drop-in, scoped) */
.relio-mark{position:relative;display:flex;align-items:center;justify-content:center;width:100%;min-height:clamp(420px,40vw,540px);color:#2c53a0}
/* Under 920px går heroen til én kolonne. Da er det ikke plass til høyre for overskriften,
   og animasjonen droppes helt i stedet for å spise 400px høyde. */
@media(max-width:919px){.relio-mark{display:none}}
.relio-mark .halo{position:absolute;width:clamp(340px,38vw,560px);aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,rgba(107,138,188,.20) 0%,rgba(107,138,188,.06) 45%,rgba(255,255,255,0) 70%);animation:relio-haloIn 1.4s cubic-bezier(.2,.7,.2,1) 1.5s both}
.relio-mark .flash{position:absolute;width:clamp(260px,29vw,420px);aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,rgba(107,138,188,.55) 0%,rgba(107,138,188,0) 60%);animation:relio-flash 1s ease-out .05s both}
.relio-mark .wave{position:absolute;width:clamp(260px,29vw,420px);aspect-ratio:1;border-radius:50%;border:1px solid rgba(74,114,176,.45);animation:relio-shockwave 1.6s cubic-bezier(.12,.8,.3,1) 1.55s both}
.relio-mark .wave.two{border-color:rgba(74,114,176,.32);animation-duration:1.9s;animation-delay:1.8s}
.relio-mark .shadow{position:absolute;bottom:78px;left:50%;width:300px;height:26px;border-radius:50%;background:rgba(4,22,53,.22);filter:blur(22px);animation:relio-shadowBreathe 7s ease-in-out 2.3s infinite both}
.relio-mark .float{width:clamp(260px,30vw,440px);aspect-ratio:1;display:flex;animation:relio-float 7s ease-in-out 2.3s infinite both}
.relio-atom{display:block;overflow:visible}
.relio-atom g{transform-box:view-box;transform-origin:75px 75px}
.relio-nucleus{animation:relio-nucleusIn .85s cubic-bezier(.2,1.1,.3,1) both,relio-nucleusPulse 3.6s ease-in-out 2.3s infinite both}
.relio-ray{animation:relio-rayOut .5s cubic-bezier(.2,.9,.3,1) both}
.relio-orbits-in{animation:relio-orbitsIn 1.5s cubic-bezier(.2,.85,.28,1) .75s both}
.relio-orbits-spin{animation:relio-orbitSpin 44s linear 2.3s infinite both}
@keyframes relio-nucleusIn{0%{opacity:0;transform:scale(0)}65%{opacity:1;transform:scale(1.45)}100%{opacity:1;transform:scale(1)}}
@keyframes relio-nucleusPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.12)}}
@keyframes relio-rayOut{0%{opacity:0;transform:scale(.15)}70%{opacity:1;transform:scale(1.12)}100%{opacity:1;transform:scale(1)}}
@keyframes relio-orbitsIn{0%{opacity:0;transform:scale(.18) rotate(-95deg)}55%{opacity:1}72%{transform:scale(1.07) rotate(9deg)}88%{transform:scale(.98) rotate(-3deg)}100%{opacity:1;transform:scale(1) rotate(0deg)}}
@keyframes relio-orbitSpin{to{transform:rotate(360deg)}}
@keyframes relio-float{0%{transform:translateY(-12px) rotate(-1.6deg)}50%{transform:translateY(12px) rotate(1.6deg)}100%{transform:translateY(-12px) rotate(-1.6deg)}}
@keyframes relio-shadowBreathe{0%{transform:translateX(-50%) scale(.86);opacity:.16}50%{transform:translateX(-50%) scale(1.06);opacity:.30}100%{transform:translateX(-50%) scale(.86);opacity:.16}}
@keyframes relio-haloIn{from{opacity:0;transform:scale(.5)}to{opacity:1;transform:scale(1)}}
@keyframes relio-flash{0%{opacity:0;transform:scale(.5)}30%{opacity:.85}100%{opacity:0;transform:scale(1.6)}}
@keyframes relio-shockwave{0%{opacity:0;transform:scale(.4)}12%{opacity:.8}100%{opacity:0;transform:scale(1.9)}}
@media(prefers-reduced-motion:reduce){.relio-mark *,.relio-atom g{animation:none!important}}

.signal{position:relative;background:var(--navy);color:#fff;overflow:hidden;isolation:isolate}
.signal canvas{position:absolute;inset:0;width:100%;height:100%;z-index:-1;opacity:.9}
.signal__inner{max-width:780px;padding:clamp(80px,12vw,150px) 0}
.signal h2{color:#fff;font-size:clamp(1.9rem,4.6vw,3.2rem);font-weight:600;line-height:1.06;letter-spacing:-.025em;max-width:16ch}
.signal p{color:var(--muted-on-dark);font-size:clamp(1.08rem,1.6vw,1.2rem);margin-top:26px;max-width:56ch;line-height:1.65}
.signal .em{color:#fff}
.signal__path{margin-top:34px;font-family:var(--display);font-weight:600;color:var(--blue);font-size:1rem;display:inline-flex;align-items:center;gap:14px}
.signal__path .arrow{flex:1;height:1px;min-width:50px;background:linear-gradient(90deg,var(--blue),transparent)}
.section{padding:clamp(72px,10vw,120px) 0}
.work{display:grid;gap:48px;grid-template-columns:1fr}
@media(min-width:900px){.work{grid-template-columns:0.8fr 1.2fr;gap:64px}}
.work__head h2{font-size:clamp(1.9rem,4vw,2.7rem);font-weight:600}
.work__head .lead{margin-top:20px}
.work__head .sticky{position:sticky;top:110px}
.principles{display:flex;flex-direction:column}
.principle{padding:36px 0;border-top:1px solid var(--line-2)}
.principle:first-child{padding-top:0;border-top:0}
@media(min-width:900px){.principle:first-child{padding-top:4px}}
.principle h3{font-size:clamp(1.4rem,2.4vw,1.85rem);font-weight:600;color:var(--navy);max-width:24ch}
.principle p{color:var(--text);margin-top:14px;max-width:58ch}
.band{position:relative;height:clamp(280px,42vw,520px);overflow:hidden}
.band__cap{position:absolute;left:0;right:0;bottom:0;padding:48px var(--gutter);
  background:linear-gradient(0deg,rgba(4,22,53,.7),transparent);color:#fff}
.band__cap .wrap{padding:0}
.band__cap p{font-family:var(--display);font-weight:600;font-size:clamp(1.2rem,2.6vw,1.9rem);max-width:22ch;color:#fff}
@media(min-width:900px){.band__cap .wrap{max-width:var(--maxw);margin:0 auto;padding:0 48px}}
.fag__head{max-width:52ch;margin-bottom:8px}
.fag__head h2{font-size:clamp(1.9rem,4vw,2.7rem);font-weight:600}
.fag__head .lead{margin-top:20px}
.defs{margin-top:40px;border-top:1px solid var(--line-2)}
.def{display:grid;grid-template-columns:1fr;gap:8px 48px;padding:32px 0;border-bottom:1px solid var(--line-2);align-items:start}
@media(min-width:760px){.def{grid-template-columns:minmax(0,.9fr) minmax(0,1.4fr)}}
.def__term{display:flex;align-items:baseline;gap:14px}
.def__k{font-family:var(--display);font-weight:600;font-size:clamp(1.25rem,2vw,1.6rem);color:var(--navy);letter-spacing:-.02em}
.def__svc{color:var(--blue-strong);font-size:.92rem;font-weight:600;font-family:var(--display)}
.def__desc{color:var(--text);font-size:1.05rem;line-height:1.6}
.notdo{margin-top:40px;background:var(--blue-tint);border-radius:14px;padding:clamp(24px,4vw,40px)}
.notdo h4{font-size:1.05rem;color:var(--navy);margin-bottom:10px}
.notdo p{color:var(--gray-body);max-width:70ch;line-height:1.65}
.team__head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:18px;margin-bottom:44px}
.team__head h2{font-size:clamp(1.9rem,4vw,2.7rem);font-weight:600}
.team__head .lead{max-width:42ch;margin:0}
.people{display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}
.person{position:relative}
.person__img{border-radius:14px;overflow:hidden;aspect-ratio:3/4;background:var(--gray-100)}
.person__img img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--e-expo);transform:scale(1.02)}
.person:hover .person__img img{transform:scale(1.06)}
.person__name{font-family:var(--display);font-weight:600;color:var(--navy);margin-top:14px;font-size:1.08rem}
.person__role{color:var(--gray-muted);font-size:.9rem}
.voice{text-align:left}
.voice blockquote{margin:0;font-family:var(--display);font-weight:600;letter-spacing:-.025em;
  font-size:clamp(1.8rem,4.8vw,3.4rem);line-height:1.08;color:var(--navy);max-width:20ch}
.voice .hl{color:var(--blue-strong)}
.voice__sub{color:var(--text);margin-top:30px;font-size:1.15rem;max-width:54ch;line-height:1.6}
.contact .panel{position:relative;overflow:hidden;border-radius:22px;background:var(--navy);color:#fff;
  padding:clamp(40px,7vw,84px);display:grid;gap:40px;grid-template-columns:1fr;align-items:center}
@media(min-width:840px){.contact .panel{grid-template-columns:1.3fr .9fr}}
.contact .panel::before{content:"";position:absolute;right:-160px;top:-120px;width:460px;height:460px;border-radius:50%;
  background:radial-gradient(circle,rgba(107,138,188,.28),transparent 62%)}
.contact h2{color:#fff;font-size:clamp(1.9rem,4.4vw,3rem);font-weight:600;position:relative;max-width:18ch}
.contact p{color:var(--muted-on-dark);margin-top:18px;font-size:1.12rem;max-width:46ch;position:relative}
.contact__photo{position:relative;border-radius:14px;overflow:hidden;aspect-ratio:4/3}
.contact__photo img{width:100%;height:100%;object-fit:cover}
.contact__actions{display:flex;gap:14px;flex-wrap:wrap;margin-top:34px;position:relative}
.foot__cols{display:flex;gap:60px;flex-wrap:wrap}
.legal{margin-top:46px;padding-top:24px;border-top:1px solid var(--line);display:flex;justify-content:center;text-align:center;flex-wrap:wrap;gap:10px;font-size:.86rem;color:var(--gray-muted)}
.demo-flag{position:fixed;bottom:14px;left:14px;z-index:200;font-size:.72rem;color:var(--gray-muted);
  background:rgba(255,255,255,.86);border:1px solid var(--line);backdrop-filter:blur(8px);
  padding:8px 14px;border-radius:999px}
@media(prefers-reduced-motion:reduce){
  *{animation:none!important}
  html,.page{scroll-behavior:auto}
  .rise{opacity:1!important;transform:none!important;transition:opacity .2s!important}
  .person__img img{transition:none}
  
  .navlink:hover,.navlink:focus-visible{transform:none}
  .btn--swap .btn__in{transform:none}
  .btn--swap:hover .btn__out,.btn--swap:focus-visible .btn__out{transform:none}
}