/* Kvamtech, låst profil (config/skills/design-kvamtech) med nettsideunntaket «Utstilling»:
   pilleknapper, store hjørner, stor typografi og lengre bevegelse. Farger og fonter er de låste.
   Lys er standard, data-theme="skog" for skoggrønt. */
@font-face { font-family:"Montserrat"; font-style:normal; font-weight:400; font-display:swap; src:url("../fonts/montserrat-400-latin.woff2") format("woff2"); }
@font-face { font-family:"Montserrat"; font-style:normal; font-weight:500; font-display:swap; src:url("../fonts/montserrat-500-latin.woff2") format("woff2"); }
@font-face { font-family:"Montserrat"; font-style:normal; font-weight:600; font-display:swap; src:url("../fonts/montserrat-600-latin.woff2") format("woff2"); }
@font-face { font-family:"Sora"; font-style:normal; font-weight:300; font-display:swap; src:url("../fonts/sora-300-latin.woff2") format("woff2"); }
@font-face { font-family:"Sora"; font-style:normal; font-weight:400; font-display:swap; src:url("../fonts/sora-400-latin.woff2") format("woff2"); }
@font-face { font-family:"Sora"; font-style:normal; font-weight:500; font-display:swap; src:url("../fonts/sora-500-latin.woff2") format("woff2"); }

:root, [data-theme="lys"] {
  --bakgrunn:#FFFFFF; --bakgrunn-alt:#E8EAE5; --flate:#FFFFFF; --flate-hevet:#F4F5F2; --flate-invers:#11281B;
  --linje:#D9DED7; --linje-sterk:#7C8C80;
  --tekst:#11281B; --tekst-dempet:#4A5D50; --tekst-invers:#FFFFFF; --tone:#6F8074;
  --lenke:#2563EB; --utheving:#1F6B56;
  --aksent:#1F6B56; --aksent-hover:#185646; --pa-aksent:#FFFFFF;
  --sekundar:#E8EAE5; --sekundar-hover:#DCE0D9; --pa-sekundar:#11281B;
  --fokus:#5A2BC1;
  --status-ok:#16A34A;
}
[data-theme="skog"] {
  --bakgrunn:#11281B; --bakgrunn-alt:#1A3526; --flate:#1A3526; --flate-hevet:#21402F; --flate-invers:#FFFFFF;
  --linje:#2C4A39; --linje-sterk:#7E9483;
  --tekst:#FFFFFF; --tekst-dempet:#A6B5A9; --tekst-invers:#11281B; --tone:#A6B5A9;
  --lenke:#E8EAE5; --utheving:#A6B5A9;
  --aksent:#FFFFFF; --aksent-hover:#E8EAE5; --pa-aksent:#11281B;
  --sekundar:#21402F; --sekundar-hover:#2C4A39; --pa-sekundar:#FFFFFF;
  --fokus:#FFFFFF;
}
:root {
  --rom-1:4px; --rom-2:8px; --rom-3:12px; --rom-4:16px; --rom-5:24px; --rom-6:32px; --rom-7:48px; --rom-8:64px; --rom-9:clamp(64px,9vw,128px);
  --innhold-maks:1280px;
  --radius-sm:4px; --radius-md:6px; --radius-lg:10px; --radius-xl:16px; --radius-2xl:28px; --radius-3xl:clamp(28px,3.4vw,40px); --radius-pille:999px;
  --font-tittel:"Montserrat",system-ui,sans-serif;
  --font-tekst:"Sora",system-ui,sans-serif;
  --merke-skog:#11281B; --merke-hvit:#FFFFFF; --merke-washout:#A6B5A9; --merke-oxford:#E8EAE5;
  --flate-aksent:linear-gradient(135deg,#1F6B56 0%,#11281B 100%);
  --ut:cubic-bezier(.2,.7,.2,1);
}

*,*::before,*::after { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; }
body { margin:0; background:var(--bakgrunn); color:var(--tekst); font:300 17px/1.65 var(--font-tekst); -webkit-font-smoothing:antialiased; }
[data-theme] { background:var(--bakgrunn); color:var(--tekst); }
img, svg { display:block; }
.innhold { max-width:var(--innhold-maks); margin:0 auto; padding:0 var(--rom-4); }
@media (min-width:768px) { .innhold { padding:0 var(--rom-6); } }
h1,h2,h3 { font-family:var(--font-tittel); font-weight:600; color:var(--tekst); margin:0; text-wrap:balance; }
.display { font-weight:500; font-size:clamp(32px,4.4vw,60px); line-height:1.05; letter-spacing:-.03em; }
h1 { font-size:clamp(28px,3.6vw,40px); line-height:1.15; letter-spacing:-.01em; }
h2 { font-size:clamp(22px,2.6vw,28px); line-height:1.25; letter-spacing:-.005em; }
h3 { font-size:20px; line-height:1.3; }
p { margin:0; max-width:68ch; text-wrap:pretty; }
strong { font-weight:500; }
.hel { white-space:nowrap; }
.tone { color:var(--tone); }
.ingress { font:500 clamp(18px,2vw,21px)/1.5 var(--font-tittel); color:var(--tekst-dempet); }
.liten { font-size:14px; line-height:1.55; font-weight:400; color:var(--tekst-dempet); }
a { color:var(--lenke); font-weight:400; text-underline-offset:3px; }
::selection { background:var(--merke-washout); color:var(--merke-skog); }
:focus-visible { outline:3px solid var(--fokus); outline-offset:3px; }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { transition:none !important; animation:none !important; } }
@media (prefers-reduced-motion:no-preference) { html { scroll-behavior:smooth; } }

/* Merkelapp: liten pille med prikk over overskriftene */
.merkelapp { display:inline-flex; align-items:center; gap:var(--rom-2); padding:6px 14px 6px 12px; border:1px solid var(--linje); border-radius:var(--radius-pille); font:400 13px/1.3 var(--font-tekst); color:var(--tekst); }
.merkelapp::before { content:""; width:5px; height:5px; border-radius:50%; background:currentColor; }

/* Knapper: piller, med rund pil når knappen fører et sted */
.knapp { display:inline-flex; justify-content:center; align-items:center; gap:var(--rom-3); min-height:52px; padding:8px 24px; border:0; border-radius:var(--radius-pille); font:400 16px/1.2 var(--font-tittel); letter-spacing:.01em; text-decoration:none; white-space:nowrap; cursor:pointer; transition:background .2s ease-out; }
.knapp:has(.knapp__pil) { justify-content:space-between; padding-right:8px; }
.knapp__pil { flex:none; display:grid; place-items:center; width:36px; height:36px; border-radius:50%; background:var(--pa-aksent); color:var(--aksent); }
.knapp__pil svg, .rundpil svg { width:16px; height:16px; transition:transform .35s var(--ut); }
.knapp:hover .knapp__pil svg, .rundpil:hover svg, a:hover > .rundpil svg { transform:translateX(3px); }
.knapp-primar { background:var(--aksent); color:var(--pa-aksent); }
.knapp-primar:hover { background:var(--aksent-hover); }
.knapp-sekundar { background:var(--sekundar); color:var(--pa-sekundar); }
.knapp-sekundar:hover { background:var(--sekundar-hover); }
.knapp-kontur { background:transparent; color:var(--tekst); border:1px solid var(--linje-sterk); }
.knapp-kontur:hover { background:var(--sekundar); }
.knapp-kontur .knapp__pil { background:var(--flate-invers); color:var(--tekst-invers); }
.rundpil { flex:none; display:grid; place-items:center; width:44px; height:44px; border-radius:50%; background:var(--flate-invers); color:var(--tekst-invers); }
.knapper { display:flex; flex-direction:column; align-self:stretch; gap:var(--rom-3); margin-top:var(--rom-6); }
@media (min-width:480px) { .knapper { flex-direction:row; flex-wrap:wrap; align-self:auto; } }

/* Felles */
.hopp { position:absolute; left:var(--rom-4); top:-80px; z-index:10; padding:10px 14px; border-radius:var(--radius-md); background:var(--merke-hvit); color:var(--merke-skog); }
.hopp:focus { top:var(--rom-3); }
.del { padding:var(--rom-9) 0; }
.del + .del { padding-top:0; }
.hode { display:flex; flex-direction:column; align-items:flex-start; gap:var(--rom-5); margin-bottom:var(--rom-7); }
.hode--midt { align-items:center; text-align:center; }
.hode .ingress { max-width:36ch; }
/* Innfasing når innholdet kommer inn i bildet. «rekke» lar barna komme etter hverandre. */
.levende [data-inn] { opacity:0; transform:translateY(32px); transition:opacity .8s var(--ut), transform .8s var(--ut); }
.levende [data-inn].er-inne { opacity:1; transform:none; }
.levende [data-inn="rekke"] { opacity:1; transform:none; }
.levende [data-inn="rekke"] > * { opacity:0; transform:translateY(32px); transition:opacity .8s var(--ut), transform .8s var(--ut); }
.levende [data-inn="rekke"].er-inne > * { opacity:1; transform:none; }
.levende [data-inn="rekke"] > :nth-child(2) { transition-delay:.08s; }
.levende [data-inn="rekke"] > :nth-child(3) { transition-delay:.16s; }
.levende [data-inn="rekke"] > :nth-child(4) { transition-delay:.24s; }
.levende [data-inn="rekke"] > :nth-child(5) { transition-delay:.32s; }
.levende [data-inn="rekke"] > :nth-child(6) { transition-delay:.4s; }

/* Toppfelt. Uten JavaScript står menyen åpen; med JavaScript ligger den bak knappen på små skjermer. */
.topp { position:relative; z-index:6; }
.topp--sveve { background:var(--bakgrunn-alt); }
.js .topp--sveve { position:absolute; top:0; left:0; right:0; background:transparent; }
.topp__rad { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:var(--rom-3) var(--rom-5); padding-top:var(--rom-5); padding-bottom:var(--rom-5); }
.topp__logo img { height:28px; width:auto; }
.topp__ring { display:none; }
.topp__bryter { display:none; align-items:center; min-height:44px; padding:0 18px; border:1px solid var(--linje-sterk); border-radius:var(--radius-pille); background:transparent; color:var(--tekst); font:400 15px/1.2 var(--font-tittel); cursor:pointer; }
.topp__nav { display:flex; flex-direction:column; width:100%; }
.topp__nav a { padding:14px 0; border-top:1px solid var(--linje); color:var(--tekst); font:400 16px/1.2 var(--font-tittel); text-decoration:none; }
.topp__nav a:hover { text-decoration:underline; }
.js .topp__bryter { display:inline-flex; }
.js .topp__nav { display:none; }
.js .topp--apen .topp__nav { display:flex; padding:var(--rom-2) var(--rom-5); border-radius:var(--radius-2xl); background:var(--flate); }
.js .topp--apen .topp__nav a:first-child { border-top:0; }
@media (min-width:1100px) {
  .js .topp__bryter { display:none; }
  .topp__nav, .js .topp__nav { display:flex; flex-direction:row; width:auto; gap:var(--rom-6); }
  .topp__nav a { padding:6px 0; border-top:0; font-size:15px; }
  .topp__ring { display:inline-flex; align-items:center; min-height:44px; padding:0 20px; border:1px solid var(--linje-sterk); border-radius:var(--radius-pille); color:var(--tekst); font:400 15px/1.2 var(--font-tittel); font-variant-numeric:tabular-nums; text-decoration:none; transition:background .2s ease-out, color .2s ease-out; }
  .topp__ring:hover { background:var(--merke-skog); color:var(--merke-hvit); }
}

/* Forsiden: arkene (lyse, runde) ligger over nattfeltene (skoggrønne), som stikker inn under dem. */
.forside { background:var(--merke-skog); }
.inngang { position:relative; }
.ark { position:relative; z-index:2; border-radius:var(--radius-3xl); }
.inngang .ark { margin-top:calc(var(--radius-3xl) * -1); }
.natt { position:relative; z-index:1; isolation:isolate; margin:calc(var(--radius-3xl) * -1) 0; padding:calc(var(--rom-9) + var(--radius-3xl)) 0; }
.natt--siste { margin-bottom:0; padding-bottom:var(--rom-7); }

/* Hero */
/* --hero-topp er plassen toppfeltet trenger når det svever over heroen (bare med JavaScript). */
:root { --hero-topp:var(--rom-5); }
.js { --hero-topp:96px; }
.hero { position:relative; isolation:isolate; overflow:hidden; display:flex; flex-direction:column; padding:var(--hero-topp) 0 calc(var(--radius-3xl) + var(--rom-5)); background:var(--bakgrunn-alt); }
.hero > .innhold { width:100%; }
.hero__innhold { display:grid; grid-template-columns:minmax(0,1fr); gap:var(--rom-7); padding-top:var(--rom-6); }
.hero__tekst { display:flex; flex-direction:column; align-items:flex-start; }
.hero__slagord { margin-top:var(--rom-5); font-weight:500; font-size:clamp(36px,9.6vw,60px); line-height:1.02; letter-spacing:-.04em; text-wrap:wrap; }
.hero .ingress { margin-top:var(--rom-5); max-width:34ch; font-size:clamp(17px,1.5vw,19px); }
.hero .knapp-sekundar { background:var(--flate); }
.hero .knapp-sekundar:hover { background:var(--flate-hevet); }
.hero__side { display:flex; flex-direction:column; gap:var(--rom-6); }
.hero__kunder { display:flex; flex-wrap:wrap; align-items:baseline; gap:var(--rom-2) var(--rom-5); margin:0; padding:0; list-style:none; font:500 15px/1.3 var(--font-tittel); color:var(--tekst-dempet); }
.hero__kunder li:first-child { width:100%; font:400 13px/1.3 var(--font-tekst); color:var(--tekst); }
/* Dalen («kvam» betyr dal) er frilagt og står foran ordmerket. På små skjermer ligger den under teksten. */
.hero__bilde { order:3; align-self:center; width:calc(100% + 64px); max-width:none; height:auto; margin:var(--rom-6) 0 calc(var(--rom-5) * -1); }
.hero__ordmerke { display:none; }
.hero__linje { order:2; display:flex; flex-wrap:wrap; justify-content:space-between; gap:var(--rom-1) var(--rom-5); margin:var(--rom-7) var(--rom-4) 0; padding:16px 24px; border-radius:var(--radius-2xl); font:400 14px/1.4 var(--font-tekst); }
.hero__linje a { color:var(--tekst); text-decoration:none; }
.hero__linje a:hover { text-decoration:underline; }
.hero__linje span:nth-child(2) { color:var(--tekst-dempet); }

/* Lite kort i heroen som blar gjennom prosjektene */
.visning { position:relative; display:grid; grid-template-columns:124px 1fr; gap:var(--rom-4); padding:var(--rom-3); border-radius:var(--radius-2xl); background:var(--merke-washout); color:var(--merke-skog); }
.visning__liste { display:contents; margin:0; padding:0; list-style:none; }
.visning__element { display:none; grid-column:1 / -1; grid-template-columns:subgrid; align-items:start; }
.visning__element.er-aktiv { display:grid; }
.levende .visning__element.er-aktiv { animation:visning .6s var(--ut) both; }
@keyframes visning { from { opacity:0; transform:translateY(10px); } to { opacity:1; transform:none; } }
.visning__bilde { aspect-ratio:1; overflow:hidden; border-radius:var(--radius-xl); background:var(--merke-skog); }
.visning__bilde img { width:100%; height:100%; object-fit:cover; object-position:top; }
.visning__tekst { display:flex; flex-direction:column; gap:2px; min-height:124px; padding:var(--rom-2) var(--rom-2) 48px 0; }
.visning__type { font:400 13px/1.3 var(--font-tekst); }
.visning__navn { font:500 22px/1.1 var(--font-tittel); letter-spacing:-.02em; }
.visning__hva { font:400 14px/1.4 var(--font-tekst); }
.visning__styr { display:none; }
.js .visning__styr { position:absolute; left:calc(var(--rom-3) + 124px + var(--rom-4)); right:var(--rom-4); bottom:var(--rom-4); display:flex; align-items:center; justify-content:space-between; gap:var(--rom-2); }
.visning__teller { font:400 13px/1 var(--font-tekst); font-variant-numeric:tabular-nums; }
.visning__knapper { display:flex; gap:var(--rom-1); }
.visning__knapp { display:grid; place-items:center; width:36px; height:36px; padding:0; border:0; border-radius:50%; background:var(--merke-skog); color:var(--merke-hvit); cursor:pointer; transition:background .2s ease-out; }
.visning__knapp:hover { background:var(--aksent); }
.visning__knapp svg { width:14px; height:14px; }
.visning__knapp--bak svg { transform:scaleX(-1); }

@media (min-width:700px) {
  .hero__slagord .linje { display:block; }
  .levende .hero__slagord .linje { animation:linje .9s var(--ut) backwards; }
  .levende .hero__slagord .linje:nth-child(2) { animation-delay:.08s; }
  .levende .hero__slagord .linje:nth-child(3) { animation-delay:.16s; }
  .levende .hero__slagord .linje:nth-child(4) { animation-delay:.24s; }
}
@keyframes linje { from { opacity:0; transform:translateY(45%); clip-path:inset(0 0 100% 0); } to { opacity:1; transform:none; clip-path:inset(-10% -10% -25% -10%); } }
@keyframes inn { from { opacity:0; transform:translateY(20px); } to { opacity:1; transform:none; } }
.levende .hero__tekst > :not(.hero__slagord), .levende .hero__side > *, .levende .hero__linje { animation:inn .8s var(--ut) backwards .25s; }
.levende .hero__side > :nth-child(2) { animation-delay:.35s; }
.levende .hero__linje { animation-delay:.45s; }
@media (max-width:699px) { .levende .hero__slagord { animation:inn .8s var(--ut) backwards; } }

@media (min-width:1000px) {
  /* Teksten står til venstre, dalen kommer inn fra høyre og går ut av bildet. Ordmerket ligger bak dalen. */
  .js { --hero-topp:104px; }
  .hero { min-height:max(100svh,720px); }
  .hero__innhold { flex:1; grid-template-columns:minmax(0,1fr) 348px; align-items:start; padding-top:clamp(16px,5vh,64px); padding-bottom:132px; }
  .hero__tekst { max-width:min(600px,46vw); }
  .hero__slagord { font-size:clamp(44px,min(4.4vw,8.4vh),76px); }
  .hero .ingress { max-width:none; }
  .hero__bilde { position:absolute; z-index:-1; left:calc(max(var(--rom-6), (100vw - var(--innhold-maks)) / 2 + var(--rom-6)) + min(620px,46vw)); bottom:0; width:min(76vw,128svh); margin:0; transform-origin:30% 100%; }
  .levende .hero__bilde { animation:bilde 1.4s var(--ut) backwards .1s; }
  .hero__ordmerke { display:block; position:absolute; z-index:-2; left:0; right:0; bottom:calc(var(--radius-3xl) + 64px); margin:0; max-width:none; text-align:center; font:600 17.4vw/.74 var(--font-tittel); letter-spacing:-.03em; white-space:nowrap; color:var(--linje); user-select:none; }
  .levende .hero__ordmerke { animation:inn 1.2s var(--ut) backwards .3s; }
  .hero__linje { position:absolute; left:max(var(--rom-6), calc((100% - var(--innhold-maks)) / 2 + var(--rom-6))); right:max(var(--rom-6), calc((100% - var(--innhold-maks)) / 2 + var(--rom-6))); bottom:calc(var(--radius-3xl) + var(--rom-5)); margin:0; padding:18px 28px; border-radius:var(--radius-pille); }
}
@keyframes bilde { from { opacity:0; transform:translateY(6%) scale(1.04); } to { opacity:1; transform:none; } }
@media (min-width:1000px) and (max-height:780px) { .js { --hero-topp:88px; } .hero__innhold { padding-top:var(--rom-3); } }
/* Når skjermen er høy nok, står heroen fast mens det første arket glir over den. */
@media (min-width:1000px) and (min-height:720px) {
  .inngang .hero { position:sticky; top:0; height:100svh; min-height:0; }
}

/* Utsagnet under heroen */
.utsagn__rutenett { display:grid; grid-template-columns:minmax(0,1fr); gap:var(--rom-6); }
.utsagn__side { display:flex; flex-direction:column; align-items:flex-start; gap:var(--rom-5); }
.utsagn__merke { width:min(60%,240px); height:auto; color:var(--bakgrunn-alt); }
.utsagn { max-width:none; font:500 clamp(24px,3.1vw,44px)/1.18 var(--font-tittel); letter-spacing:-.025em; text-wrap:balance; }
.utsagn .ord { transition:opacity .3s linear; }
.utsagn__fot { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:var(--rom-4); margin-top:var(--rom-7); padding-top:var(--rom-5); border-top:1px solid var(--linje); }
@media (min-width:900px) { .utsagn__rutenett { grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:var(--rom-8); } .utsagn__merke { margin-top:auto; } }
.piller { display:grid; grid-template-columns:1fr 1fr; gap:var(--rom-2); max-width:none; margin-top:var(--rom-8); font:500 clamp(18px,2.6vw,34px)/1.1 var(--font-tittel); letter-spacing:-.02em; }
.pille { position:relative; isolation:isolate; overflow:hidden; display:grid; place-items:center; min-height:clamp(72px,11vw,150px); padding:0 var(--rom-4); border-radius:var(--radius-pille); text-align:center; background:var(--bakgrunn-alt); }
.pille--aksent { background:var(--flate-aksent); color:var(--merke-hvit); }
.pille--pil { background:var(--merke-skog); color:var(--merke-hvit); }
.pille--slutt { color:var(--tone); }
.pille__tekst { transition:color .5s var(--ut); }
.pille--pil svg { width:clamp(36px,5vw,72px); height:auto; }
.skjult { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
@media (min-width:800px) { .piller { grid-template-columns:repeat(4,1fr); } }
/* Når raden kommer inn: pila skyter fram, og «én å ringe» tennes. Mus over: pillen fylles fra venstre, pila dytter. */
.levende .piller.er-inne .pille--pil svg { animation:pil-inn .9s var(--ut) .45s backwards; }
.levende .piller.er-inne .pille--slutt .pille__tekst { animation:tenn .7s ease-out .95s forwards; }
@keyframes pil-inn { from { opacity:0; transform:translateX(-60%); } to { opacity:1; transform:none; } }
@keyframes tenn { to { color:var(--tekst); } }
@keyframes dytt { 0%,100% { transform:none; } 50% { transform:translateX(18%); } }
.pille::before { content:""; position:absolute; inset:0; z-index:-1; border-radius:inherit; background:var(--merke-skog); clip-path:inset(0 100% 0 0); transition:clip-path .6s var(--ut); }
.pille--slutt::before { background:var(--merke-washout); }
.pille--pil::before { display:none; }
@media (hover:hover) {
  .pille:hover::before { clip-path:inset(0); }
  .pille:not(.pille--slutt):hover .pille__tekst { color:var(--merke-hvit); }
  .pille--slutt:hover .pille__tekst { color:var(--tekst); }
  .levende .piller.er-inne:hover .pille--pil svg, .piller:hover .pille--pil svg { animation:dytt 1.1s var(--ut) infinite; }
}

/* Noe av det vi har laget */
.verkliste { list-style:none; margin:0; padding:0; display:grid; gap:var(--rom-4); }
@media (min-width:800px) { .verkliste { grid-template-columns:1fr 1fr; } }
.verk { display:flex; flex-direction:column; padding:var(--rom-3); border-radius:var(--radius-2xl); background:var(--bakgrunn-alt); }
.verk[data-theme="skog"] { background:var(--bakgrunn); }
.verk.verk--aksent { background:var(--flate-aksent); }
.verk__bilde { position:relative; aspect-ratio:16 / 10; overflow:hidden; border-radius:var(--radius-xl); background:var(--flate-hevet); }
.verk__bilde img { width:100%; height:100%; object-fit:cover; object-position:top; transition:transform .9s var(--ut); }
.verk:hover .verk__bilde > img:first-child { transform:scale(1.03); }
.verk--mobil .verk__bilde { display:flex; justify-content:center; align-items:flex-start; padding-top:7%; background:var(--merke-skog); }
.verk--mobil .verk__bilde img { width:34%; height:auto; border-radius:14px 14px 0 0; }
.verk--begge .verk__mobil { position:absolute; right:7%; top:10%; width:29%; height:auto; border:3px solid var(--merke-skog); border-bottom:0; border-radius:14px 14px 0 0; }
.verk__tekst { flex:1; display:flex; flex-direction:column; align-items:flex-start; gap:var(--rom-3); padding:var(--rom-5) var(--rom-3) var(--rom-3); }
.verk__type { font:400 13px/1.3 var(--font-tekst); color:var(--tekst-dempet); }
.verk h3 { font-weight:500; font-size:clamp(24px,2.4vw,32px); line-height:1.1; letter-spacing:-.025em; }
.verk__tekst p { font-size:15px; line-height:1.6; color:var(--tekst-dempet); }
.verk__lenke { font-size:15px; }
.tagger { list-style:none; display:flex; flex-wrap:wrap; gap:var(--rom-2); margin:auto 0 0; padding:var(--rom-3) 0 0; }
.tagger li { padding:7px 14px; border:1px solid var(--linje-sterk); border-radius:var(--radius-pille); font:400 13px/1.2 var(--font-tekst); }
@media (min-width:900px) {
  .verk--stor { grid-column:1 / -1; display:grid; grid-template-columns:minmax(0,1.5fr) minmax(0,1fr); }
  .verk--stor .verk__tekst { justify-content:flex-end; padding:var(--rom-6); }
  .verk--stor h3 { font-size:clamp(32px,3.4vw,48px); }
  .verk--stor .verk__tekst p { font-size:16px; }
  .verk--stor .tagger { margin-top:0; }
  .verk--speil { grid-template-columns:minmax(0,1fr) minmax(0,1.5fr); }
  .verk--speil .verk__bilde { order:2; }
  .verk--stor.verk--mobil .verk__bilde img { width:26%; }
}

/* Dette gjør vi: nummererte fliser */
.natt__pynt { position:absolute; z-index:-1; left:-6%; bottom:8%; width:min(78%,900px); height:auto; color:var(--merke-hvit); opacity:.05; }
.tjenester .natt__pynt { display:none; }
.tjenester__rutenett { display:grid; gap:var(--rom-3); }
.tjenester__hode { display:flex; flex-direction:column; align-items:flex-start; gap:var(--rom-5); margin-bottom:var(--rom-6); }
.tjenester__note { align-self:start; max-width:30ch; }
.flis { position:relative; overflow:hidden; display:flex; flex-direction:column; gap:var(--rom-3); min-height:264px; padding:var(--rom-5); border-radius:var(--radius-2xl); background:var(--flate); transition:background .4s ease-out; }
.flis h3 { font-weight:500; font-size:24px; line-height:1.15; letter-spacing:-.02em; }
.flis p { position:relative; max-width:30ch; font-size:15px; line-height:1.55; color:var(--tekst-dempet); }
.flis__nr { position:absolute; left:-.04em; bottom:-.19em; font:600 168px/1 var(--font-tittel); letter-spacing:-.05em; color:var(--flate-hevet); transition:transform .6s var(--ut), color .4s ease-out; }
.flis .flis__pris { margin-top:auto; padding-top:var(--rom-6); align-self:flex-end; text-align:right; font:400 14px/1.4 var(--font-tekst); color:var(--tekst); }
.flis:hover { background:var(--flate-hevet); }
.flis:hover .flis__nr { transform:translateY(-10px); color:var(--linje); }
@media (min-width:640px) { .tjenester__rutenett { grid-template-columns:1fr 1fr; } .tjenester__hode, .tjenester__note { grid-column:1 / -1; } }
@media (min-width:1000px) {
  .tjenester__rutenett { grid-template-columns:minmax(0,1.15fr) minmax(0,1fr) minmax(0,1fr); grid-template-areas:"hode en note" "hode to tre" ". . fire"; }
  .tjenester__hode { grid-area:hode; grid-column:auto; margin:0; padding-right:var(--rom-7); }
  .tjenester__note { grid-area:note; grid-column:auto; justify-self:end; text-align:right; }
  .tjenester .natt__pynt { display:block; left:max(var(--rom-6), calc((100% - var(--innhold-maks)) / 2 + var(--rom-6))); bottom:calc(var(--rom-9) + var(--radius-3xl)); width:clamp(220px,24vw,340px); opacity:.07; }
  .flis:nth-of-type(1) { grid-area:en; } .flis:nth-of-type(2) { grid-area:to; } .flis:nth-of-type(3) { grid-area:tre; } .flis:nth-of-type(4) { grid-area:fire; }
}

/* Priser */
.priser__kort { display:grid; gap:var(--rom-3); }
@media (min-width:800px) { .priser__kort { grid-template-columns:1fr 1fr; } }
.priskort { display:flex; flex-direction:column; align-items:center; gap:var(--rom-4); min-height:clamp(380px,36vw,460px); padding:var(--rom-6) var(--rom-5) var(--rom-5); border-radius:var(--radius-2xl); background:var(--bakgrunn-alt); text-align:center; }
.priskort[data-theme="skog"] { background:var(--flate-aksent); }
.priskort .merkelapp { border-color:var(--linje-sterk); }
.priskort h3 { margin-top:auto; font-weight:500; font-size:clamp(32px,3.8vw,52px); line-height:1.05; letter-spacing:-.03em; }
.priskort p { max-width:34ch; font-size:15px; line-height:1.55; }
.priskort .priskort__pris { display:inline-flex; max-width:none; align-items:baseline; gap:10px; margin-top:var(--rom-3); padding:16px 32px; border-radius:var(--radius-pille); background:var(--flate-invers); color:var(--tekst-invers); font:500 clamp(24px,2.4vw,30px)/1.1 var(--font-tittel); letter-spacing:-.01em; font-variant-numeric:tabular-nums; white-space:nowrap; }
.priskort .priskort__pris small { font:400 13px/1 var(--font-tekst); letter-spacing:0; }
.priskort__fot { display:flex; align-items:center; justify-content:space-between; gap:var(--rom-4); width:100%; margin-top:auto; text-align:left; }
.priskort__fot .liten { color:var(--tekst); }
.priser__note { margin:var(--rom-6) auto 0; text-align:center; }

/* Slik jobber vi: trapp */
.slik ol { list-style:none; margin:0; padding:0; display:grid; gap:var(--rom-3); }
.steg__nr { display:block; margin-bottom:var(--rom-2); font:400 13px/1.3 var(--font-tekst); font-variant-numeric:tabular-nums; color:var(--tekst-dempet); }
.steg__kort { padding:var(--rom-5); border-radius:var(--radius-xl); background:var(--bakgrunn-alt); transition:background .5s ease-out, color .5s ease-out; }
.steg__kort h3 { color:inherit; font-weight:500; font-size:22px; letter-spacing:-.02em; }
.steg__kort p { margin-top:var(--rom-2); font-size:15px; line-height:1.55; color:var(--tekst-dempet); transition:color .5s ease-out; }
.steg.er-aktiv .steg__kort, .steg:hover .steg__kort { background:var(--merke-skog); color:var(--merke-hvit); }
.steg.er-aktiv .steg__kort p, .steg:hover .steg__kort p { color:var(--merke-washout); }
.slik ol:has(.steg:hover) .steg.er-aktiv:not(:hover) .steg__kort { background:var(--bakgrunn-alt); color:var(--tekst); }
.slik ol:has(.steg:hover) .steg.er-aktiv:not(:hover) .steg__kort p { color:var(--tekst-dempet); }
@media (min-width:640px) { .slik ol { grid-template-columns:1fr 1fr; } }
@media (min-width:1000px) {
  .slik ol { grid-template-columns:repeat(4,1fr); gap:0; min-height:420px; }
  .steg { padding:0 var(--rom-3) 0 var(--rom-3); border-left:1px solid var(--linje); }
  .steg__nr { margin-bottom:var(--rom-5); }
  .steg:nth-child(2) .steg__kort { margin-top:56px; }
  .steg:nth-child(3) .steg__kort { margin-top:112px; }
  .steg:nth-child(4) .steg__kort { margin-top:168px; }
}

/* Om oss */
.om__rutenett { display:grid; grid-template-columns:minmax(0,1fr); gap:var(--rom-8); }
.om__tekst { display:flex; flex-direction:column; align-items:flex-start; gap:var(--rom-5); }
.om__sirkler { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--rom-3); margin:0; }
.om__bilde { position:relative; grid-column:1 / -1; justify-self:center; width:min(72%,300px); margin:0; }
.om__bilde img { width:100%; height:auto; aspect-ratio:1; border-radius:50%; object-fit:cover; }
.om__bilde figcaption { position:absolute; right:-6%; bottom:6%; padding:8px 16px; border-radius:var(--radius-pille); background:var(--merke-hvit); color:var(--merke-skog); font:500 14px/1.2 var(--font-tittel); white-space:nowrap; }
.om__fakta { display:flex; flex-direction:column-reverse; justify-content:center; align-items:center; gap:var(--rom-1); aspect-ratio:1; border-radius:50%; text-align:center; background:var(--flate); }
.om__fakta dt { font:400 13px/1.3 var(--font-tekst); color:var(--tekst-dempet); }
.om__fakta dd { margin:0; font:500 clamp(18px,2vw,24px)/1.15 var(--font-tittel); letter-spacing:-.02em; }
.om__fakta:nth-of-type(3) { background:transparent; border:1px solid var(--linje-sterk); }
.om__fakta:nth-of-type(4) { background:var(--flate-aksent); }
@media (min-width:1000px) {
  .om__rutenett { grid-template-columns:minmax(0,1fr) minmax(0,1.1fr); align-items:center; }
  .om__sirkler { grid-template-columns:repeat(4,minmax(0,1fr)); }
  .om__bilde { grid-column:1 / span 2; grid-row:1 / span 2; justify-self:stretch; width:auto; }
  .om__fakta:nth-of-type(3) { grid-column:3; }
}

/* Spørsmål og svar: åpne kort, ikke trekkspill */
.sporsmal__liste { display:grid; gap:var(--rom-3); }
@media (min-width:700px) { .sporsmal__liste { grid-template-columns:1fr 1fr; } }
@media (min-width:1100px) { .sporsmal__liste { grid-template-columns:repeat(3,1fr); } }
.svar { display:flex; flex-direction:column; gap:var(--rom-3); padding:var(--rom-6) var(--rom-5); border-radius:var(--radius-2xl); background:var(--bakgrunn-alt); }
.svar[data-theme="skog"] { background:var(--bakgrunn); }
.svar.svar--aksent { background:var(--flate-aksent); }
.svar h3 { font-weight:500; font-size:22px; line-height:1.2; letter-spacing:-.02em; }
.svar p { font-size:15px; line-height:1.6; }
.svar__knapper { display:flex; flex-wrap:wrap; gap:var(--rom-2); margin-top:auto; }

/* Kontakt */
.kontakt__rutenett { display:grid; grid-template-columns:minmax(0,1fr); gap:var(--rom-7); }
.kontakt .natt__pynt { left:-8%; top:-22%; bottom:auto; width:min(64%,780px); }
.kontakt__ring { width:140px; height:140px; color:var(--tekst-dempet); }
.kontakt__ring text { font:600 13px var(--font-tittel); letter-spacing:.2em; fill:currentColor; }
.kontakt__ring .kontakt__merke { color:var(--tekst); }
.levende .kontakt__ring > g { transform-origin:100px 100px; animation:rundt 28s linear infinite; }
@keyframes rundt { to { transform:rotate(360deg); } }
.kontakt__tittel { font-weight:500; font-size:clamp(40px,8vw,112px); line-height:.98; letter-spacing:-.045em; }
.kontakt__tittel .tone { display:block; font-size:.5em; letter-spacing:-.035em; line-height:1.2; }
.kontakt .ingress { margin-top:var(--rom-5); max-width:30ch; }
.kontakt__lenker { display:flex; flex-direction:column; gap:var(--rom-3); margin:var(--rom-7) 0 0; padding:0; list-style:none; }
.kontakt__lenker a { display:inline-flex; align-items:center; gap:var(--rom-4); color:var(--tekst); font:500 clamp(22px,3vw,40px)/1.2 var(--font-tittel); letter-spacing:-.025em; font-variant-numeric:tabular-nums; text-decoration:none; }
.kontakt__lenker a span:first-child { text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:8px; text-decoration-color:var(--linje-sterk); transition:text-decoration-color .2s ease-out; }
.kontakt__lenker a:hover span:first-child { text-decoration-color:var(--tekst); }
@media (min-width:900px) {
  .kontakt__rutenett { grid-template-columns:auto 1fr; align-items:end; }
  .kontakt__hoved { display:flex; flex-direction:column; align-items:flex-end; text-align:right; }
  .kontakt__lenker { align-items:flex-end; }
}

/* Bunn: to kort på skoggrønt. Samme på alle sider. */
.fot { padding:0 0 var(--rom-5); }
.fot__kort { display:grid; gap:var(--rom-3); }
.fotkort { display:flex; flex-direction:column; align-items:flex-start; gap:var(--rom-4); padding:var(--rom-6); border-radius:var(--radius-2xl); background:var(--flate); }
.fotkort img { height:28px; width:auto; }
.fotkort h2 { font-weight:500; font-size:22px; letter-spacing:-.02em; }
.fot__lenker { display:flex; flex-wrap:wrap; gap:var(--rom-2); margin:auto 0 0; padding:var(--rom-6) 0 0; list-style:none; }
.fot__lenker a { display:inline-flex; align-items:center; min-height:40px; padding:0 16px; border:1px solid var(--linje-sterk); border-radius:var(--radius-pille); color:var(--tekst); font:400 14px/1.2 var(--font-tekst); text-decoration:none; transition:background .2s ease-out, color .2s ease-out; }
.fot__lenker a:hover { background:var(--merke-hvit); color:var(--merke-skog); }
.fotkort .liten:last-child { margin-top:auto; }
@media (min-width:900px) { .fot__kort { grid-template-columns:minmax(0,1.7fr) minmax(0,1fr); } .fotkort { min-height:280px; } }
.fot--alene { padding-top:var(--rom-5); }

/* Tekstsider (personvern) */
.tekstside { padding:var(--rom-8) 0 var(--rom-9); }
.tekstside .ingress { margin-top:var(--rom-4); }
.tekstside h2 { margin-top:var(--rom-7); }
.tekstside h2 + p { margin-top:var(--rom-3); }
.tekstside p + p { margin-top:var(--rom-4); }
.tekstside .liten { margin-top:var(--rom-7); }

/* Fast kontaktlinje på mobil. app.js viser den når verken toppfeltet, knappene i heroen, kontaktseksjonen eller bunnen er i bildet. */
.fastkontakt { display:none; }
@media (max-width:699px) {
  .js .fastkontakt { display:grid; grid-template-columns:1fr 1fr; gap:var(--rom-3); position:fixed; z-index:8; left:0; right:0; bottom:0; padding:var(--rom-3) var(--rom-4) calc(var(--rom-3) + env(safe-area-inset-bottom)); border-top:1px solid var(--linje); visibility:hidden; transform:translateY(100%); transition:transform .3s var(--ut), visibility 0s .3s; }
  .js .fastkontakt--vis { visibility:visible; transform:none; transition:transform .3s var(--ut); }
}

/* 404 */
.ikkefunnet { min-height:100vh; display:flex; flex-direction:column; justify-content:center; position:relative; overflow:hidden; isolation:isolate; }
.ikkefunnet::before { content:""; position:absolute; z-index:-1; right:-14%; bottom:-6%; width:min(92vw,900px); aspect-ratio:74 / 39; background:url("kvamtech-mark-white.svg") center/contain no-repeat; opacity:.07; }
@media (min-width:900px) { .ikkefunnet::before { right:-6%; bottom:-10%; width:min(64vw,900px); } }
.ikkefunnet > .innhold { width:100%; }
.ikkefunnet img { height:28px; width:auto; margin-bottom:var(--rom-8); }
.ikkefunnet .merkelapp { align-self:flex-start; margin-bottom:var(--rom-4); }
.ikkefunnet > .innhold { display:flex; flex-direction:column; align-items:flex-start; }
.ikkefunnet .ingress { margin-top:var(--rom-4); }