:root{
  --color-brand:#0077cc; --color-link:#0065ae;
  --color-primary-700:#003a66; --color-primary-600:#0065ad; --color-primary-500:#0077cc;
  --color-primary-400:#8ac0ff; --color-primary-300:#bddcff; --color-primary-200:#e0eeff;
  --color-secondary-700:#c85000; --color-secondary-600:#ff5e1f; --color-secondary-500:#ffa785;
  --color-secondary-400:#ffded1; --color-secondary-300:#fff4f0;
  --color-neutral-900:#252931; --color-neutral-800:#424242; --color-neutral-700:#636363;
  --color-neutral-500:#d8d9d9; --color-neutral-200:#f7f7f7; --color-neutral-0:#fff;
  --ease-out: cubic-bezier(.22,1,.36,1);
}
/* Footerfarge bak siden: overscroll (strikk-effekten) viser blått, ikke lyseblått */
html{ scroll-behavior:smooth; background-color:#083F97; }
/* Kolonne på minst én skjermhøyde – den hvite hovedflaten fyller resten på korte sider */
body{
  display:flex; flex-direction:column; min-height:100vh;
  background-color:var(--color-primary-200);
  color:var(--color-neutral-900);
  font-family:'Open Sans',system-ui,sans-serif;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  -webkit-text-size-adjust:100%;
}
h1,h2,h3,h4,h5,h6{ font-family:Rubik,'Open Sans',sans-serif; font-weight:500; }
h1{ letter-spacing:-.03em; }

a{ color:var(--color-link); text-decoration:none; }
a:hover{ text-decoration:underline; }

:where(a,button,input,textarea,select,[tabindex]):focus-visible{
  outline:3px solid var(--color-primary-500);
  outline-offset:2px;
  border-radius:2px;
}
.on-dark:focus-visible{ outline-color:#fff; }

.vh{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}
.skip-link{
  position:absolute; left:16px; top:-100px; z-index:60;
  background:var(--color-neutral-0); color:var(--color-neutral-900);
  padding:8px 16px; border-radius:999px; box-shadow:0 4px 12px 0 rgba(0,0,0,.25);
  transition:top .2s var(--ease-out);
}
.skip-link:focus{ top:16px; text-decoration:none; }

/* Hero: profilgradient + lagvise radial-lys + fin korntekstur */
.hero{
  background-image:
    radial-gradient(120% 90% at 82% 8%, rgba(138,192,255,.34) 0%, rgba(138,192,255,0) 58%),
    radial-gradient(90% 70% at 4% 96%, rgba(255,94,31,.20) 0%, rgba(255,94,31,0) 60%),
    linear-gradient(165.94deg, #0261A5 6.63%, #054A92 59.84%, #083F97 89.98%);
}
.grain{
  position:absolute; inset:0; pointer-events:none; opacity:.5; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.32'/%3E%3C/svg%3E");
}

/* Flater: hver seksjon legger seg avrundet 24px over den forrige.
   Rekkefølgen i DOM-en gir stablingen – ingen z-index nødvendig. */
.band{
  position:relative;
  display:flow-root;      /* hindrer at barnas toppmargin kollapser med flatens egen */
  margin-top:-24px;
  border-radius:24px 24px 0 0;
}
/* Mørk flate over mørk flate: en tynn lyskant langs overkanten gjør at
   overlappen leses selv når fargene ligger tett på hverandre. */
.band-lip{ box-shadow:inset 0 1px 0 rgba(255,255,255,.14); }

/* Footer: samme merkevaregradient og lyseblå tekst som på www.1881.no,
   der footeren arver nøyaktig denne gradienten (samme som heroen vår). */
main{ flex-grow:1; }
.site-footer{
  background-image:linear-gradient(165.94deg, #0261A5 6.63%, #054A92 59.84%, #083F97 89.98%);
  color:#cce0ff;
}
.site-footer a{ color:inherit; }
.site-footer a:hover{ color:#fff; }

/* Burgermeny – vises under 768px (hovedbreakpoint i designguiden) */
.burger{
  display:inline-flex; flex-direction:column; justify-content:center; align-items:center; gap:5px;
  width:44px; height:44px; border:0; border-radius:999px; background:rgba(255,255,255,.15);
  cursor:pointer; transition:background .2s var(--ease-out);
}
.burger:hover{ background:rgba(255,255,255,.25); }
.burger span{
  display:block; width:20px; height:2px; border-radius:2px; background:#fff;
  transition:transform .3s var(--ease-out), opacity .2s var(--ease-out);
}
.burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.burger[aria-expanded="true"] span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

.mnav{
  display:grid; grid-template-rows:0fr;
  transition:grid-template-rows .3s var(--ease-out);
}
.mnav > div{ overflow:hidden; }
.mnav[data-open="true"]{ grid-template-rows:1fr; }
.mnav a{
  display:flex; align-items:center; min-height:44px;
  padding:8px 16px; border-radius:999px;
  color:rgba(255,255,255,.85); text-decoration:none;
}
.mnav a:hover{ background:rgba(255,255,255,.1); color:#fff; text-decoration:none; }
.mnav a[aria-current="page"]{ background:rgba(255,255,255,.15); color:#fff; font-weight:600; }

@media (min-width:768px){
  .burger, .mnav{ display:none; }
}

/* Knapper – pill, hover via brightness (jf. design guide) */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  min-height:40px; padding:8px 16px; border-radius:999px;
  font-weight:600; white-space:nowrap; cursor:pointer; border:0;
  transition:transform .25s var(--ease-out), filter .25s var(--ease-out), box-shadow .25s var(--ease-out);
}
.btn:hover{ filter:brightness(95%); text-decoration:none; }
.btn:active{ transform:translateY(1px) scale(.99); }
.btn-cta{ background:var(--color-secondary-600); color:#fff; }
.btn-cta:hover{ transform:translateY(-2px); }
.btn-ft{ background:var(--color-primary-500); color:#fff; }
.btn-alt{ background:#fff; color:var(--color-neutral-900); }
.btn-tag{ background:var(--color-neutral-200); color:var(--color-neutral-700); border-radius:1em; white-space:normal; }

/* Pakkekort */
.pkg{ transition:transform .3s var(--ease-out), box-shadow .3s var(--ease-out); }
@media (prefers-reduced-motion:no-preference){
  .pkg:hover{ transform:translateY(-4px); }
}
.pkg-list{ display:none; }
body.show-ul .pkg-list{ display:block; }
body.show-ul .show-more{ display:none; }

.feat li{ position:relative; padding-left:26px; }
.feat li::before{
  content:""; position:absolute; left:0; top:9px; width:14px; height:8px;
  border-left:2px solid var(--color-primary-500); border-bottom:2px solid var(--color-primary-500);
  transform:rotate(-45deg);
}

/* Skjemafelt – radius 8px 8px 2px 8px, jf. design guide */
.fld{
  width:100%; padding:8px 12px; min-height:40px;
  border:1px solid var(--color-neutral-500); border-radius:8px 8px 2px 8px;
  background:#fff; color:var(--color-neutral-900); font:inherit;
  transition:border-color .2s var(--ease-out), box-shadow .2s var(--ease-out);
}
.fld::placeholder{ color:#757575; opacity:1; }
.fld:hover{ border-color:var(--color-primary-400); }

/* Modal */
.cc-modal{ display:none; position:fixed; inset:0; z-index:50; background:rgba(0,58,102,.72); padding:16px; }
.cc-modal.is-open{ display:flex; align-items:center; justify-content:center; }
.cc-modal-content{
  background:#fff; width:100%; max-width:600px; max-height:calc(100dvh - 32px);
  display:flex; flex-direction:column; border-radius:24px; overflow:hidden;
  box-shadow:0 4px 12px 0 rgba(0,0,0,.25);
}
@media (prefers-reduced-motion:no-preference){
  .cc-modal.is-open .cc-modal-content{ animation:pop .25s var(--ease-out); }
  @keyframes pop{ from{ opacity:0; transform:scale(.96) } to{ opacity:1; transform:scale(1) } }
}
.roi-row{ display:flex; flex-direction:column; gap:8px; }
@media (min-width:576px){
  .roi-row{ flex-direction:row; justify-content:space-between; align-items:center; }
  .roi-row .fld{ width:180px; }
}
input[type=number]{ -moz-appearance:textfield; }
input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }
input[type=range]{ accent-color:var(--color-primary-500); }
.roi-total{ border:2px solid var(--color-secondary-600); font-weight:600; }

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.01ms !important; transition-duration:.01ms !important; }
  html{ scroll-behavior:auto; }
}

/* Undersider (bedriftsprofil, andre tjenester): samme mørkeblå, flate hero + lys side-bunn */
.bedriftsprofil-page,
.andre-tjenester-page,
.referanser-page{ background:var(--color-primary-200); }
.bedriftsprofil-page .hero,
.andre-tjenester-page .hero,
.referanser-page .hero{
  background-image:linear-gradient(180deg, #0d5d9d 0%, #0a4f8d 100%);
}
.bedriftsprofil-page .hero::after,
.andre-tjenester-page .hero::after,
.referanser-page .hero::after{
  content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,0)); pointer-events:none;
}
/* Midtseksjonen er en egen hvit flate som legger seg avrundet over heroen,
   i stedet for et hvitt kort oppa en lysebla flate (boks-i-boks). */
.profile-main{
  background:#fff;
  padding:1rem 0 3.5rem;
}
.profile-shell{
  max-width:1000px; margin:0 auto; padding:0 1rem;
}
.profile-panel{
  background:transparent;
  padding:0;
}
.profile-item{
  display:grid; grid-template-columns: 1fr; gap:1.5rem; align-items:center;
  padding:2rem 0; margin:0 auto;
  border-bottom:1px solid rgba(11,59,101,.1);
}
.profile-item:last-of-type{ border-bottom:0; }
.profile-illustration{ display:flex; justify-content:center; }
.profile-illustration img{ width:100%; max-width:220px; max-height:180px; height:auto; object-fit:contain; }
.profile-illustration a{ display:block; }
.profile-copy{
  padding:0;
  color:#0b3b65;
}
.profile-copy h2{
  margin:0 0 0.5rem; font-size:1.25rem; font-weight:500; color:#0b3b65;
}
.profile-copy p,
.profile-copy li{
  font-size:1rem; line-height:1.6; color:#0b3b65;
}
.profile-copy ul{
  margin:0.5rem 0 0; padding-left:1.1rem;
  list-style:disc;
}
.profile-copy li + li{ margin-top:0.25rem; }
/* Tertiaerlenker: samme klarblaa som paa dm.1881.no (#0077cc), ikke den moerkere lenkefargen. */
.profile-copy a{ color:var(--color-brand); }

/* Bedriftsprofil: ingress øverst i den hvite flaten */
.profile-intro{
  padding:2rem 0 2.5rem;
  border-bottom:1px solid rgba(11,59,101,.1);
}
.profile-intro h2{
  margin:0 0 .75rem; font-size:1.5rem; line-height:1.25; letter-spacing:-.02em; color:#0b3b65;
}
.profile-intro p{ margin:.25rem 0 0; line-height:1.6; color:#0b3b65; }
.profile-fordeler{
  display:grid; gap:.5rem 2rem; margin-top:1rem; color:#0b3b65;
}
@media (min-width:640px){
  .profile-fordeler{ grid-template-columns:1fr 1fr; }
}

/* Bedriftsprofil: produktnavnet som overskrift, gevinsten som mindre blå undertittel */
.profile-copy .profile-navn{
  margin:0 0 .25rem; font-size:1.375rem; line-height:1.3; letter-spacing:-.01em;
}
.profile-copy .profile-undertittel{
  margin:0 0 .5rem; font-family:Rubik,'Open Sans',sans-serif; font-weight:500;
  font-size:1.0625rem; line-height:1.4; color:var(--color-brand);
}

/* Bedriftsprofil: merknad og pris */
.profile-copy .profile-merknad{ margin-top:.75rem; font-size:.875rem; color:var(--color-neutral-700); }
.profile-copy .profile-pris{ margin-top:1rem; }
.profile-pris strong{
  font-family:Rubik,'Open Sans',sans-serif; font-weight:500; font-size:1.125rem;
  color:var(--color-neutral-900);
}

/* Bedriftsprofil: avsluttende «Kom i gang» */
.profile-start{
  display:flex; flex-direction:column; align-items:center; gap:.75rem;
  margin-top:2rem; padding:2.5rem 1.5rem; border-radius:24px;
  background:var(--color-neutral-200); text-align:center;
}
.profile-start h2{
  margin:0; font-size:1.375rem; line-height:1.3; letter-spacing:-.01em; color:#0b3b65;
}
.profile-start p{ margin:0; max-width:56ch; line-height:1.6; color:var(--color-neutral-800); text-wrap:pretty; }
.profile-start .profile-start-lenke{ margin-top:.5rem; max-width:none; color:#0b3b65; }
.profile-start-lenke a{ font-weight:600; color:var(--color-brand); text-decoration:underline; text-underline-offset:2px; }
.profile-start-lenke a:hover{ text-decoration-thickness:2px; }
.profile-start-lenke a:active{ opacity:.7; }
.profile-start .btn{ margin-top:.75rem; }

/* Referanser: rundt portrett | sitat | firmalogo */
.ref-item{ align-items:start; justify-items:start; }
.ref-portrett{ width:96px; height:96px; border-radius:50%; object-fit:cover; }
.ref-item .profile-copy p + p{ margin-top:.75rem; }
.ref-item .profile-copy .ref-signatur{ margin-top:1rem; font-size:.9375rem; color:var(--color-neutral-800); }
.ref-logo{ width:auto; max-width:160px; max-height:48px; object-fit:contain; }

/* Lenke med pil – pilen glir litt frem ved hover */
.pil{ transition:transform .3s var(--ease-out); }
@media (prefers-reduced-motion:no-preference){
  .pil-lenke:hover .pil{ transform:translateX(3px); }
}

@media (min-width:768px){
  .profile-item{
    grid-template-columns: minmax(0,240px) minmax(0,1fr); gap:2.5rem;
    padding:2.5rem 0;
  }
  .profile-illustration img{ max-width:100%; }
  .ref-item{ grid-template-columns:120px minmax(0,1fr) 160px; gap:2.5rem; }
  .ref-portrett{ width:120px; height:120px; }
  .ref-logo{ margin-top:.25rem; max-height:56px; }
  .profile-main{ padding:1.5rem 0 5rem; }
  .profile-intro{ padding:2.5rem 0 3rem; }
  .profile-intro h2{ font-size:2rem; }
  .profile-copy .profile-navn{ font-size:1.5rem; }
  .profile-copy .profile-undertittel{ font-size:1.125rem; }
  .profile-start{ margin-top:3rem; padding:3rem 2rem; }
  .profile-start h2{ font-size:1.5rem; }
}