/* Konsulttakst AS
   Delt hero etter Voxai-referansen, med mykt avrundet formspråk gjennom hele siden.
   Referansens signaturgrep som er fredet:
   1. 50/50 delt hero, lyst panel med sentrert innhold mot fotopanel
   2. Begge paneler som avrundede kort på lys bunn, med luft rundt
   3. Menyen flyter oppå fotoet, ikke over hele bredden
   4. Frostet glasskort midt i fotoet
   5. Bildetekst i hvitt nederst i fotopanelet
   Kontrast: alle tekstpar er kontrollert mot WCAG AA. Laveste er 4,99:1. */

:root{
  --bunn:#E9ECEC;
  --flate:#FFFFFF;
  --flate-2:#F4F6F6;
  --blekk:#131A1D;
  --dempet:#5B6668;        /* 5,92 hvit · 5,46 flate-2 · 4,99 bunn */
  --petrol:#1B3A4B;
  --petrol-dyp:#122936;
  --petrol-lys:#8FB3C4;
  --petrol-vask:#E7EEF2;
  --lys-tekst:#C7D6DE;     /* 8,04:1 på petrol */
  --kant:rgba(19,26,29,.11);
  --kant-m:rgba(19,26,29,.2);
  --glass:rgba(255,255,255,.44);
  --glass-kant:rgba(255,255,255,.5);
  --r:26px;
  --r-s:16px;
  --r-xs:11px;
  --sans:"Instrument Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  --maks:1280px;
  --skygge:0 1px 2px rgba(19,26,29,.04),0 10px 30px rgba(19,26,29,.07);
  --skygge-hev:0 2px 6px rgba(19,26,29,.06),0 22px 50px rgba(19,26,29,.12);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0;background:var(--bunn);color:var(--blekk);
  font-family:var(--sans);font-size:16px;line-height:1.6;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
h1,h2,h3,h4{margin:0;font-weight:600;letter-spacing:-.032em;line-height:1.06}
h1{font-size:clamp(2.05rem,3.3vw,3.15rem);text-wrap:balance}
h2{font-size:clamp(1.75rem,3vw,2.55rem);text-wrap:balance}
h3{font-size:1.12rem;letter-spacing:-.02em;line-height:1.25;text-wrap:balance}
p{margin:0 0 1em}
p:last-child{margin-bottom:0}
img{max-width:100%;height:auto;display:block}
a{color:var(--petrol)}
:focus-visible{outline:2px solid var(--petrol);outline-offset:3px;border-radius:6px}
.skip{position:absolute;left:-9999px;top:0;z-index:300;background:var(--petrol);color:#fff;
  padding:12px 20px;border-radius:0 0 12px 0;font-weight:600;text-decoration:none}
.skip:focus{left:0}
.wrap{width:100%;max-width:var(--maks);margin-inline:auto;padding-inline:clamp(20px,3vw,40px)}
/* Smal tekstspalte. Beholder wrappens bredde og begrenser barna i stedet,
   slik at teksten står på samme venstremarg som overskriften over den. */
.wrap.smal{max-width:var(--maks)}
.wrap.smal>*{max-width:760px}

/* ---------- knapper og lenker ---------- */
/* Knappen er flat med vilje. Gradient, innvendig lyskant og farget glød
   er de tre grepene som får en knapp til å se AI-generert ut. */
.knapp{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  font-size:.94rem;font-weight:600;letter-spacing:-.008em;
  padding:13px 20px;border-radius:9px;border:1px solid transparent;
  text-decoration:none;cursor:pointer;line-height:1.2;white-space:nowrap;
  transition:background .16s,border-color .16s,color .16s,transform .08s;
}
.knapp--fylt{background:var(--petrol);color:#fff}
.knapp--fylt:hover{background:var(--petrol-dyp);color:#fff}
.knapp--hvit{background:var(--flate);color:var(--blekk);border-color:var(--kant-m)}
.knapp--hvit:hover{background:var(--flate-2);border-color:rgba(19,26,29,.34);color:var(--blekk)}
.knapp:active{transform:translateY(1px)}
.knapp svg{transition:transform .2s}
.knapp:hover svg{transform:translateX(3px)}
.knapper{display:flex;flex-wrap:wrap;gap:10px}
.knapper--midt{justify-content:center}

.pil{display:inline-flex;align-items:center;gap:8px;font-weight:600;font-size:.92rem;color:var(--petrol);text-decoration:none}
.pil svg{transition:transform .18s}
.pil:hover svg{transform:translateX(4px)}

/* ---------- delt hero ---------- */
/* Heroen går helt ut i kanten. Ingen ramme, ingen avrunding, ingen luft mellom panelene. */
.hero{display:grid;grid-template-columns:1fr 1fr;gap:0;padding:0;height:100svh;min-height:700px;max-height:1040px}
.panel{border-radius:0;position:relative;overflow:hidden}
.panel--lys{background:var(--flate);display:flex;flex-direction:column;padding:clamp(26px,3.4vw,52px)}
.hero-topp{display:flex;align-items:center;justify-content:space-between;gap:16px;flex:none}
/* LOGO: midlertidig ordmerke. Byttes med <img src="img/logo.svg"> */
.logo{display:inline-flex;align-items:center;gap:9px;text-decoration:none;color:var(--blekk);
  font-weight:600;font-size:1.06rem;letter-spacing:-.028em}
.logo-merke{width:22px;height:22px;border-radius:50%;flex:none;
  background:radial-gradient(circle at 36% 30%,#DCE7ED 0%,#9EBECD 48%,var(--petrol) 100%);
  box-shadow:0 1px 3px rgba(27,58,75,.35)}
.hero-merkelapp{font-size:.73rem;font-weight:600;color:var(--petrol);background:var(--petrol-vask);
  border:1px solid rgba(27,58,75,.13);border-radius:8px;padding:6px 13px;white-space:nowrap}
.hero-midt{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:24px 0}
.hero-emblem{margin-bottom:clamp(18px,2.4vw,30px)}
.hero-midt h1{max-width:15ch;margin-bottom:16px}
.hero-under{color:var(--dempet);font-size:1.02rem;line-height:1.55;max-width:36ch;margin-bottom:24px}
.hero-lofte{margin:18px 0 0;font-size:.86rem;line-height:1.5;color:var(--dempet);max-width:34ch}
.hero-tillit{flex:none;text-align:center;padding-top:16px;border-top:1px solid var(--kant)}
.hero-tillit-etikett{font-size:.67rem;font-weight:700;letter-spacing:.15em;text-transform:uppercase;color:var(--dempet);margin:0 0 12px}
.hero-tillit-rad{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:8px 24px;list-style:none;padding:0;margin:0}
.hero-tillit-rad li{font-size:.87rem;font-weight:600;color:var(--dempet);letter-spacing:-.01em}

.panel--foto{background:var(--petrol)}
.panel--foto>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:56% 34%}
.panel--foto::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(14,30,40,.30) 0%,rgba(14,30,40,.06) 32%,rgba(14,30,40,.56) 100%)}
.foto-innhold{position:relative;z-index:2;height:100%;display:flex;flex-direction:column;padding:clamp(22px,2.6vw,40px)}
.foto-nav{display:flex;align-items:center;justify-content:space-between;gap:14px;flex:none}
.nav{display:flex;align-items:center;gap:4px}
.nav a{font-size:.86rem;font-weight:500;color:rgba(255,255,255,.9);text-decoration:none;
  padding:8px 13px;border-radius:8px;transition:background .16s,color .16s;white-space:nowrap}
.nav a:hover{background:rgba(255,255,255,.16);color:#fff}
.nav a[aria-current]{background:rgba(255,255,255,.92);color:var(--petrol)}
.foto-nav .knapp{padding:10px 18px;font-size:.88rem}
.meny-knapp{display:none;background:rgba(255,255,255,.92);border:none;border-radius:9px;
  padding:10px 16px;font:inherit;font-size:.88rem;font-weight:600;color:var(--petrol);cursor:pointer;align-items:center;gap:8px}
.meny-strek{display:block;width:15px;height:9px;position:relative;flex:none}
.meny-strek i{position:absolute;left:0;right:0;height:1.5px;background:var(--petrol);transition:transform .2s,opacity .2s}
.meny-strek i:nth-child(1){top:0}
.meny-strek i:nth-child(2){top:3.75px}
.meny-strek i:nth-child(3){top:7.5px}
.meny-knapp[aria-expanded="true"] i:nth-child(1){transform:translateY(3.75px) rotate(45deg)}
.meny-knapp[aria-expanded="true"] i:nth-child(2){opacity:0}
.meny-knapp[aria-expanded="true"] i:nth-child(3){transform:translateY(-3.75px) rotate(-45deg)}

/* glasskortet: gangen i en sak */
.foto-midt{flex:1;display:grid;place-items:center;padding:20px 0}
.sakskort{width:min(100%,382px);border-radius:20px;padding:15px;background:var(--glass);
  border:1px solid var(--glass-kant);box-shadow:0 24px 60px rgba(11,24,32,.26);
  backdrop-filter:blur(26px) saturate(1.2);-webkit-backdrop-filter:blur(26px) saturate(1.2)}
.sakskort-topp{display:flex;align-items:center;gap:10px;margin-bottom:13px}
.sakskort-avatar{width:32px;height:32px;border-radius:50%;flex:none;display:grid;place-items:center;
  background:linear-gradient(160deg,#3D6B85,var(--petrol));color:#fff;font-size:.68rem;font-weight:700}
.sakskort-navn{font-size:.84rem;font-weight:600;line-height:1.25;color:var(--blekk)}
.sakskort-sak{font-size:.72rem;color:var(--dempet);line-height:1.3}
.sakskort-status{margin-left:auto;font-size:.68rem;font-weight:600;color:var(--petrol);
  background:rgba(255,255,255,.62);border-radius:100px;padding:5px 10px;display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.sakskort-status .prikk{width:6px;height:6px;border-radius:50%;background:#2E7D5B;flex:none}
.spor{display:flex;flex-direction:column;gap:8px}
.boble{background:rgba(255,255,255,.56);border-radius:14px;padding:10px 13px;max-width:86%;box-shadow:0 1px 2px rgba(11,24,32,.06)}
.boble--hoyre{margin-left:auto;background:rgba(27,58,75,.82);color:#fff}
.boble p{margin:0;font-size:.81rem;line-height:1.45}
.boble--hoyre p{color:#fff}
.boble time{display:block;margin-top:5px;font-size:.66rem;color:var(--dempet)}
.boble--hoyre time{color:rgba(255,255,255,.78)}
.sakskort-bunn{display:flex;align-items:center;gap:10px;margin-top:13px;padding-top:12px;border-top:1px solid rgba(19,26,29,.1)}
.sakskort-fil{display:flex;align-items:center;gap:9px;font-size:.79rem;font-weight:600;color:var(--blekk)}
.sakskort-fil svg{flex:none;color:var(--petrol)}
.sakskort-dato{margin-left:auto;font-size:.68rem;font-weight:600;color:var(--dempet);
  background:rgba(255,255,255,.62);border-radius:100px;padding:5px 10px;white-space:nowrap}
.foto-bunn{flex:none;color:#fff}
.foto-bunn h2{font-size:clamp(1.3rem,1.9vw,1.7rem);margin-bottom:5px;color:#fff}
.foto-bunn p{margin:0;font-size:.92rem;color:rgba(255,255,255,.82)}

@media (max-width:960px){
  .hero{grid-template-columns:1fr;height:auto;max-height:none;min-height:0;gap:0;padding:0}
  .panel--lys{padding:26px 22px 30px}
  .hero-midt{padding:44px 0 34px}
  .panel--foto{min-height:600px}
  .nav{display:none}
  .meny-knapp{display:inline-flex}
  .foto-nav .knapp{display:none}
  .nav.er-apen{display:flex;flex-direction:column;align-items:stretch;gap:4px;
    position:absolute;top:68px;left:clamp(22px,2.6vw,40px);right:clamp(22px,2.6vw,40px);z-index:5;
    background:rgba(255,255,255,.96);backdrop-filter:blur(14px);border-radius:var(--r-s);padding:8px}
  .nav.er-apen a{color:var(--blekk);padding:12px 14px;border-radius:10px}
  .nav.er-apen a[aria-current]{background:var(--petrol);color:#fff}
}
@media (max-width:560px){
  .hero-merkelapp{font-size:.68rem;padding:5px 10px}
  .panel--foto{min-height:520px}
  .knapper{flex-direction:column;align-items:stretch}
  .hero-midt .knapp{width:100%}
}

/* ---------- toppbar på undersider ---------- */
.topp{position:sticky;top:0;z-index:100;background:rgba(233,236,236,.86);backdrop-filter:blur(14px);border-bottom:1px solid var(--kant)}
.topp .wrap{display:flex;align-items:center;justify-content:space-between;gap:18px;height:68px}
.topp .nav a{color:var(--dempet)}
.topp .nav a:hover{background:rgba(19,26,29,.06);color:var(--blekk)}
.topp .nav a[aria-current]{background:var(--petrol);color:#fff}
.topp .meny-knapp{background:var(--flate);border:1px solid var(--kant-m)}
@media (max-width:960px){
  .topp .nav.er-apen{position:absolute;top:66px;left:clamp(20px,3vw,40px);right:clamp(20px,3vw,40px);
    background:var(--flate);box-shadow:var(--skygge-hev);padding:8px;border-radius:var(--r-s)}
  .topp-cta{display:none}
}

/* ---------- seksjoner ---------- */
.seksjon{padding:clamp(58px,7vw,104px) 0}
.seksjon--tett{padding:clamp(44px,5vw,72px) 0}
.seksjon--hvit{background:var(--flate)}
.seksjon-topp{max-width:640px;margin-bottom:clamp(30px,4vw,48px)}
.seksjon-topp--midt{margin-inline:auto;text-align:center}
.seksjon-topp h2{margin-bottom:14px}
.seksjon-topp p{color:var(--dempet);font-size:1.04rem;margin:0}
.etikett{font-size:.68rem;font-weight:700;letter-spacing:.15em;text-transform:uppercase;color:var(--petrol);margin:0 0 12px}

/* sidetopp på undersider */
.sidetopp{padding:clamp(34px,4vw,56px) 0 0}
.sidetopp h1{margin-bottom:16px}
.sidetopp .ingress{font-size:1.14rem;line-height:1.55;color:var(--dempet);max-width:52ch}
.sidetopp-media{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,48px);align-items:center}
.sidetopp-media img{border-radius:var(--r);aspect-ratio:4/3;object-fit:cover;width:100%}
@media (max-width:860px){.sidetopp-media{grid-template-columns:1fr}}

.smuler{padding:18px 0 0}
.smuler ol{list-style:none;display:flex;flex-wrap:wrap;gap:8px;padding:0;margin:0;font-size:.84rem;color:var(--dempet)}
.smuler li+li::before{content:"/";margin-right:8px;color:var(--kant-m)}
.smuler a{color:var(--dempet);text-decoration:none}
.smuler a:hover{color:var(--petrol);text-decoration:underline}

/* ---------- tjenestekort ---------- */
.kort-rutenett{display:grid;gap:14px;grid-template-columns:repeat(3,1fr)}
.kort{background:var(--flate);border:1px solid var(--kant);border-radius:var(--r-s);padding:26px 24px;
  display:flex;flex-direction:column;text-decoration:none;color:inherit;position:relative;overflow:hidden;
  box-shadow:var(--skygge);transition:transform .2s,box-shadow .2s}
.kort::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:var(--petrol);
  transform:scaleX(0);transform-origin:left;transition:transform .26s}
a.kort:hover{transform:translateY(-4px);box-shadow:var(--skygge-hev);color:inherit}
a.kort:hover::before{transform:scaleX(1)}
.kort-ikon{color:var(--petrol);margin-bottom:15px;display:block}
.kort h3{margin-bottom:8px}
.kort p{color:var(--dempet);font-size:.95rem;margin-bottom:18px}
.kort .pil{margin-top:auto;font-size:.87rem}
@media (max-width:940px){.kort-rutenett{grid-template-columns:repeat(2,1fr)}}
@media (max-width:620px){.kort-rutenett{grid-template-columns:1fr}}

/* ---------- hva du får: dokumentkort ---------- */
.delt{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,4vw,60px);align-items:center}
.delt--smal-hoyre{grid-template-columns:1.1fr .9fr}
/* Annenhver blokk speilvendes, så portrettene ikke havner på samme side */
.delt--omvendt .delt-media{order:2}
@media (max-width:860px){
  .delt,.delt--smal-hoyre{grid-template-columns:1fr}
  .delt--omvendt .delt-media{order:0}
}
.delt-media{border-radius:var(--r);overflow:hidden}
.delt-media img{width:100%;aspect-ratio:4/3;object-fit:cover}
.delt-tekst h2{margin-bottom:16px}
.delt-tekst p{color:var(--dempet)}

.dokument{background:var(--flate);border:1px solid var(--kant);border-radius:var(--r-s);
  box-shadow:var(--skygge-hev);overflow:hidden}
.dokument-topp{display:flex;align-items:center;gap:11px;padding:16px 20px;border-bottom:1px solid var(--kant);background:var(--flate-2)}
.dokument-topp svg{color:var(--petrol);flex:none}
.dokument-tittel{font-weight:600;font-size:.94rem;line-height:1.3}
.dokument-meta{font-size:.76rem;color:var(--dempet)}
.dokument ol{list-style:none;counter-reset:d;padding:8px 20px 18px;margin:0}
.dokument li{counter-increment:d;display:grid;grid-template-columns:auto 1fr;gap:13px;
  padding:11px 0;border-bottom:1px solid var(--kant);font-size:.94rem}
.dokument li:last-child{border-bottom:none}
.dokument li::before{content:counter(d,decimal-leading-zero);font-size:.72rem;font-weight:700;
  color:var(--petrol);background:var(--petrol-vask);border-radius:6px;padding:3px 6px;height:max-content}
.dokument li b{display:block;font-weight:600}
.dokument li span{color:var(--dempet);font-size:.88rem}

/* ---------- tidslinje ---------- */
.tidslinje{--tl-gap:clamp(16px,2.5vw,30px);position:relative;display:grid;grid-template-columns:repeat(4,1fr);gap:var(--tl-gap)}
/* Streken skal stoppe midt i siste punkt, ikke fortsette ut av rutenettet.
   Siste kolonne starter på 3*(kolonnebredde+gap), og punktet er 21px med senter 10px inn. */
.tidslinje::before{content:"";position:absolute;top:10px;left:10px;
  right:calc(25% - 0.75 * var(--tl-gap) - 10px);height:1px;background:var(--kant-m)}
.tl-steg{position:relative;padding-top:38px}
.tl-steg::before{content:"";position:absolute;top:0;left:0;width:21px;height:21px;border-radius:50%;
  background:var(--flate);border:1px solid var(--kant-m);box-shadow:0 0 0 4px var(--bunn)}
.tl-steg::after{content:"";position:absolute;top:7px;left:7px;width:7px;height:7px;border-radius:50%;background:var(--petrol)}
.seksjon--hvit .tl-steg::before{box-shadow:0 0 0 4px var(--flate)}
.tl-nr{font-size:.68rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--dempet);display:block;margin-bottom:7px}
.tl-steg h3{font-size:1.04rem;margin-bottom:7px}
.tl-steg p{color:var(--dempet);font-size:.93rem;margin:0}
@media (max-width:860px){
  .tidslinje{grid-template-columns:1fr;gap:0}
  .tidslinje::before{top:10px;bottom:10px;left:10px;right:auto;width:1px;height:auto}
  .tl-steg{padding:0 0 26px 40px}
  .tl-steg:last-child{padding-bottom:0}
  .tl-steg::before{top:0;left:0}
  .tl-steg::after{top:7px;left:7px}
}

/* ---------- fotobånd ---------- */
.fotobaand{position:relative;border-radius:var(--r);overflow:hidden;min-height:clamp(420px,46vw,520px);display:flex;align-items:flex-end}
.fotobaand img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.fotobaand::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(11,22,29,.16) 0%,rgba(11,22,29,.40) 30%,rgba(11,22,29,.80) 58%,rgba(11,22,29,.92) 100%)}
.fotobaand-tekst{position:relative;z-index:2;padding:clamp(26px,4vw,48px);color:#fff;max-width:56ch}
.fotobaand-tekst h2{color:#fff;margin-bottom:12px}
.fotobaand-tekst p{color:rgba(255,255,255,.85);margin:0;font-size:1.02rem}

/* ---------- folk ---------- */
.folk{display:grid;grid-template-columns:1fr 1fr;gap:clamp(18px,3vw,32px)}
@media (max-width:760px){.folk{grid-template-columns:1fr}}
.person{background:var(--flate);border:1px solid var(--kant);border-radius:var(--r-s);overflow:hidden;box-shadow:var(--skygge)}
.person img{width:100%;aspect-ratio:4/3;object-fit:cover;object-position:50% 34%}
.person-tekst{padding:22px 24px 24px}
.person-rolle{font-size:.68rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--petrol);margin:0 0 8px}
.person h3{font-size:1.2rem;margin-bottom:10px}
.person p{color:var(--dempet);font-size:.95rem;margin-bottom:14px}
.merker{display:flex;flex-wrap:wrap;gap:7px;list-style:none;padding:0;margin:0}
.merker li{font-size:.76rem;font-weight:600;color:var(--petrol);background:var(--petrol-vask);
  border:1px solid rgba(27,58,75,.12);border-radius:100px;padding:4px 11px}

/* ---------- punkter ---------- */
.punkter{list-style:none;padding:0;margin:0 0 22px;display:grid;gap:10px}
.punkter li{display:flex;gap:11px;align-items:flex-start;color:var(--dempet);font-size:.99rem}
.punkter li::before{content:"";flex:none;width:18px;height:18px;margin-top:3px;border-radius:50%;
  background:var(--petrol-vask) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231B3A4B' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/11px no-repeat}

/* ---------- spørsmål ---------- */
.sporsmal{border-top:1px solid var(--kant)}
.sporsmal details{border-bottom:1px solid var(--kant)}
.sporsmal summary{display:flex;align-items:flex-start;gap:14px;padding:20px 0;cursor:pointer;
  font-weight:600;font-size:1.04rem;letter-spacing:-.015em;list-style:none}
.sporsmal summary::-webkit-details-marker{display:none}
.sporsmal summary::after{content:"";flex:none;margin-left:auto;width:11px;height:11px;margin-top:6px;
  border-right:1.8px solid var(--petrol);border-bottom:1.8px solid var(--petrol);
  transform:rotate(45deg);transition:transform .22s}
.sporsmal details[open] summary::after{transform:rotate(-135deg)}
.sporsmal .svar{padding:0 34px 22px 0;color:var(--dempet);margin:0;max-width:72ch}

/* ---------- CTA ---------- */
.baand{background:linear-gradient(160deg,#24506A 0%,var(--petrol) 52%,var(--petrol-dyp) 100%);
  border-radius:var(--r);color:#fff;padding:clamp(34px,5vw,62px);text-align:center}
.baand h2{color:#fff;margin-bottom:14px;max-width:20ch;margin-inline:auto}
.baand p{color:var(--lys-tekst);max-width:52ch;margin:0 auto 26px}

/* ---------- plassholdere ---------- */
.ph{font-weight:600;color:var(--petrol);background:var(--petrol-vask);
  border:1px dashed rgba(27,58,75,.45);border-radius:6px;padding:1px 7px;font-size:.92em}
.foto-bunn .ph,.baand .ph{color:#fff;background:rgba(255,255,255,.18);border-color:rgba(255,255,255,.6)}
.ph-boks{background:var(--petrol-vask);border:1px solid rgba(27,58,75,.16);border-radius:var(--r-xs);
  padding:15px 18px;font-size:.92rem;color:var(--blekk)}
.ph-boks strong{color:var(--petrol)}

/* ---------- skjema ---------- */
.skjema{display:grid;gap:16px}
.felt{display:grid;gap:7px}
.felt label{font-size:.88rem;font-weight:600}
.felt input,.felt select,.felt textarea{
  font:inherit;font-size:.97rem;padding:12px 14px;border-radius:var(--r-xs);
  border:1px solid var(--kant-m);background:var(--flate);color:var(--blekk);width:100%}
.felt textarea{min-height:130px;resize:vertical}
.felt input:focus,.felt select:focus,.felt textarea:focus{outline:2px solid var(--petrol);outline-offset:1px;border-color:var(--petrol)}
.felt .hjelp{font-size:.83rem;color:var(--dempet)}
.felt .feil{font-size:.85rem;color:#A3231C;display:none}
.felt.er-feil .feil{display:block}
.felt.er-feil input,.felt.er-feil select,.felt.er-feil textarea{border-color:#A3231C}
.to-felt{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media (max-width:620px){.to-felt{grid-template-columns:1fr}}
.skjema-status{font-size:.92rem;color:var(--dempet);margin:0}
.kvittering{background:var(--petrol-vask);border:1px solid rgba(27,58,75,.16);border-radius:var(--r-s);padding:24px}
.kvittering h3{margin-bottom:10px}

/* ---------- bunn ---------- */
.bunn{background:var(--flate);padding:clamp(48px,5vw,72px) 0 26px;border-top:1px solid var(--kant)}
.bunn-rutenett{display:grid;grid-template-columns:1.6fr 1fr 1fr 1.1fr;gap:clamp(22px,3vw,44px);margin-bottom:40px}
.bunn-om{color:var(--dempet);font-size:.94rem;max-width:32ch;margin:14px 0 0}
.bunn h4{font-size:.68rem;font-weight:700;letter-spacing:.15em;text-transform:uppercase;color:var(--dempet);margin:0 0 15px}
.bunn ul{list-style:none;padding:0;margin:0;display:grid;gap:10px}
.bunn li{margin:0}
.bunn a{color:var(--dempet);text-decoration:none;font-size:.94rem}
.bunn a:hover{color:var(--blekk);text-decoration:underline}
.bunn-bunn{border-top:1px solid var(--kant);padding-top:22px;display:flex;justify-content:space-between;
  gap:16px;flex-wrap:wrap;font-size:.85rem;color:var(--dempet)}
.bunn-bunn a{font-size:.85rem}
@media (max-width:860px){.bunn-rutenett{grid-template-columns:1fr 1fr;gap:28px}}
@media (max-width:520px){
  /* To kolonner også på mobil, ellers blir footeren over 700 px høy. */
  .bunn-rutenett{grid-template-columns:1fr 1fr;gap:26px 20px}
  .bunn-rutenett>:first-child{grid-column:1 / -1}
}

/* ---------- inntoning ---------- */
.rv{opacity:0;transform:translateY(14px);transition:opacity .55s ease,transform .55s ease}
.rv.er-inne{opacity:1;transform:none}
.rv-d1{transition-delay:.07s}
.rv-d2{transition-delay:.14s}
@media (prefers-reduced-motion:reduce){
  .rv{opacity:1;transform:none;transition:none}
  .knapp:hover,a.kort:hover{transform:none}
  .pil:hover svg{transform:none}
  .sporsmal summary::after{transition:none}
}
html.vis .rv{opacity:1;transform:none;transition:none}

/* skygge under toppbaren først når man har scrollet */
.topp.er-scrollet{box-shadow:0 1px 0 var(--kant),0 8px 24px rgba(19,26,29,.07)}

/* ===================== mikroanimasjoner =====================
   Diskret. Heroen toner inn i rekkefølge ved last, resten reagerer på
   berøring. Alt slås av under prefers-reduced-motion og under ?vis. */

@keyframes inn-opp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes inn-nar{from{opacity:0;transform:scale(1.045)}to{opacity:1;transform:none}}
@keyframes inn-kort{from{opacity:0;transform:translateY(22px) scale(.985)}to{opacity:1;transform:none}}

html:not(.vis) .panel--lys .logo,
html:not(.vis) .hero-merkelapp,
html:not(.vis) .hero-emblem,
html:not(.vis) .hero-midt h1,
html:not(.vis) .hero-under,
html:not(.vis) .hero-midt .knapper,
html:not(.vis) .hero-lofte,
html:not(.vis) .hero-tillit{
  animation:inn-opp .62s cubic-bezier(.22,.7,.3,1) backwards;
}
html:not(.vis) .panel--lys .logo{animation-delay:.04s}
html:not(.vis) .hero-merkelapp{animation-delay:.1s}
html:not(.vis) .hero-emblem{animation-delay:.16s}
html:not(.vis) .hero-midt h1{animation-delay:.22s}
html:not(.vis) .hero-under{animation-delay:.3s}
html:not(.vis) .hero-midt .knapper{animation-delay:.38s}
html:not(.vis) .hero-lofte{animation-delay:.45s}
html:not(.vis) .hero-tillit{animation-delay:.52s}

html:not(.vis) .panel--foto>img{animation:inn-nar 1.1s cubic-bezier(.22,.7,.3,1) backwards}
html:not(.vis) .foto-nav{animation:inn-opp .62s cubic-bezier(.22,.7,.3,1) .12s backwards}
html:not(.vis) .sakskort{animation:inn-kort .75s cubic-bezier(.22,.7,.3,1) .42s backwards}
html:not(.vis) .foto-bunn{animation:inn-opp .62s cubic-bezier(.22,.7,.3,1) .58s backwards}
html:not(.vis) .sakskort .boble{animation:inn-opp .5s cubic-bezier(.22,.7,.3,1) backwards}
html:not(.vis) .sakskort .boble:nth-child(1){animation-delay:.62s}
html:not(.vis) .sakskort .boble:nth-child(2){animation-delay:.72s}
html:not(.vis) .sakskort .boble:nth-child(3){animation-delay:.82s}

/* ikonet i tjenestekortene skyves litt når kortet løftes */
.kort-ikon{transition:transform .26s cubic-bezier(.22,.7,.3,1)}
a.kort:hover .kort-ikon{transform:translateY(-2px)}

/* bilder puster litt når man peker på dem */
.delt-media,.person,.fotobaand{overflow:hidden}
.delt-media img,.person img{transition:transform .6s cubic-bezier(.22,.7,.3,1)}
.delt-media:hover img,.person:hover img{transform:scale(1.035)}

/* tidslinjens punkter poppes inn når seksjonen kommer til syne */
.tl-steg::after{transition:transform .4s cubic-bezier(.34,1.4,.5,1)}
html:not(.vis) .tidslinje .tl-steg.rv:not(.er-inne)::after{transform:scale(0)}
.tl-steg:nth-child(2)::after{transition-delay:.06s}
.tl-steg:nth-child(3)::after{transition-delay:.12s}
.tl-steg:nth-child(4)::after{transition-delay:.18s}

/* trekkspillet får en mykere åpning */
.sporsmal summary{transition:color .16s}
.sporsmal summary:hover{color:var(--petrol)}
.sporsmal details[open] .svar{animation:inn-opp .34s cubic-bezier(.22,.7,.3,1)}

/* statusprikken i saksforløpet pulserer svakt, som et levende system */
@keyframes puls{0%,100%{opacity:1}50%{opacity:.45}}
html:not(.vis) .sakskort-status .prikk{animation:puls 2.6s ease-in-out 1.6s infinite}

/* Selektorene må matche dem over nøyaktig. Bruker man kortere selektorer her,
   taper de på spesifisitet mot html:not(.vis) og animasjonene blir stående. */
@media (prefers-reduced-motion:reduce){
  html:not(.vis) .panel--lys .logo,
  html:not(.vis) .hero-merkelapp,
  html:not(.vis) .hero-emblem,
  html:not(.vis) .hero-midt h1,
  html:not(.vis) .hero-under,
  html:not(.vis) .hero-midt .knapper,
  html:not(.vis) .hero-lofte,
  html:not(.vis) .hero-tillit,
  html:not(.vis) .panel--foto>img,
  html:not(.vis) .foto-nav,
  html:not(.vis) .sakskort,
  html:not(.vis) .foto-bunn,
  html:not(.vis) .sakskort .boble,
  html:not(.vis) .sakskort-status .prikk,
  .sporsmal details[open] .svar{
    animation:none
  }
  .delt-media:hover img,.person:hover img,a.kort:hover .kort-ikon{transform:none}
  .tidslinje .tl-steg.rv:not(.er-inne)::after{transform:none}
}

/* ---------- topplinje som bare gjelder forsiden på mobil ----------
   Heroen stabler under 960 px, og da havner fotopanelets meny nede på siden,
   under alt heroinnholdet. Forsiden får derfor samme topplinje som undersidene. */
.topp--mobil{display:none}
@media (max-width:960px){
  .topp--mobil{display:block}
  .hero .foto-nav{display:none}
  .hero-topp{justify-content:center}
  .hero-topp .logo{display:none}
}