/* Kobbervik Elektro, delt stilark. Én kilde for palett, typografi og komponenter. */

@font-face{
  font-family:'Sen';
  src:url('fonter/sen-latin.woff2') format('woff2');
  font-weight:400 800;font-style:normal;font-display:swap;
}
@font-face{
  font-family:'Mulish';
  src:url('fonter/mulish-latin.woff2') format('woff2');
  font-weight:200 1000;font-style:normal;font-display:swap;
}

:root{
  --bla:#2a619d;
  --bla-mork:#214d7d;
  --bla-dyp:#173454;
  --bla-natt:#12293f;
  --aksent:#0273b1;
  --gull:#f2b705;
  --svart:#1b2430;
  --gra:#5f6a78;
  --gra-svak:#657181;
  --lys:#f4f7fb;
  --lys-2:#eaf0f7;
  --kant:#dfe5ee;
  --hvit:#fff;
  --topp:150px;      /* toppstripe + hovedtopp, desktop */
  --topp-mobil:96px;   /* målt sticky topphøyde på mobil er 87, med litt luft over */
  --rund:6px;
  --skygge:0 18px 46px rgba(23,52,84,.10);
  --skygge-lav:0 6px 20px rgba(23,52,84,.07);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--hvit);color:var(--svart);
  font-family:'Mulish',-apple-system,BlinkMacSystemFont,'Segoe UI',Arial,sans-serif;
  font-size:16px;line-height:1.75;font-weight:400;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
/* height:auto er ikke pynt: HTML-attributtet height="900" er et presentasjonshint som
   fortsatt gjelder når CSS bare setter width, og bildet blir stående i full pikselhøyde. */
img{max-width:100%;display:block;height:auto}
figure,blockquote{margin:0}
a{color:inherit;text-decoration:none}
button,input,textarea,select{font:inherit;color:inherit}
.skjul{display:none !important}
.skjul-visuelt{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
:focus-visible{outline:3px solid var(--aksent);outline-offset:2px}
section[id],div[id]{scroll-margin-top:calc(var(--topp) + 16px)}

/* ---------- typografi ---------- */
h1,h2,h3,h4{margin:0;font-family:'Sen',Arial,sans-serif;font-weight:700;line-height:1.2;letter-spacing:-.01em;color:var(--svart)}
.h-jumbo{font-size:clamp(34px,5.2vw,54px);line-height:1.16}
.h-stor{font-size:clamp(28px,3.6vw,40px)}
.h-mid{font-size:clamp(22px,2.4vw,28px)}
.h-liten{font-size:clamp(18px,1.8vw,21px);line-height:1.35}
p{margin:0 0 18px}
p:last-child{margin-bottom:0}
.lead{font-size:17px;line-height:1.8;color:var(--gra)}
.dempet{color:var(--gra)}
.smatt{font-size:14px;line-height:1.7;color:var(--gra)}

/* Overtekst i versaler er referansedesignets signatur og beholdes med vilje. */
.overtekst{
  display:block;margin:0 0 14px;font-family:'Sen',Arial,sans-serif;font-weight:700;
  font-size:13px;letter-spacing:.16em;text-transform:uppercase;color:var(--aksent);line-height:1.4;
}
.baand-mork .overtekst,footer .overtekst{color:#8dc4ea}

/* ---------- flater ---------- */
.ramme{width:100%;max-width:1180px;margin:0 auto;padding:0 22px}
.ramme-smal{max-width:900px}
.seksjon{padding:86px 0}
.seksjon-tett{padding:58px 0}
.flate-lys{background:var(--lys)}
.midtstilt{text-align:center}
.midtstilt .lead{margin-left:auto;margin-right:auto;max-width:640px}
.seksjonstopp{max-width:660px;margin:0 auto 52px}

/* prikkraster, hentet fra referansens dekor */
.prikker{
  position:absolute;width:120px;height:96px;pointer-events:none;
  background-image:radial-gradient(var(--bla) 1.6px,transparent 1.6px);
  background-size:14px 14px;opacity:.42;
}

/* ---------- knapper ---------- */
.knapp,.knapp-hvit,.knapp-linje{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font-family:'Sen',Arial,sans-serif;font-weight:700;font-size:15px;letter-spacing:.02em;
  padding:15px 30px;border-radius:var(--rund);border:2px solid transparent;cursor:pointer;
  transition:background-color .18s ease,color .18s ease,border-color .18s ease,transform .18s ease,box-shadow .18s ease;
  text-align:center;
}
.knapp{background:var(--bla);color:var(--hvit);border-color:var(--bla)}
.knapp:hover{background:var(--bla-mork);border-color:var(--bla-mork);transform:translateY(-2px);box-shadow:0 10px 24px rgba(42,97,157,.28)}
.knapp-hvit{background:var(--hvit);color:var(--bla);border-color:var(--hvit)}
.knapp-hvit:hover{background:var(--lys-2);transform:translateY(-2px);box-shadow:0 10px 24px rgba(0,0,0,.18)}
.knapp-linje{background:transparent;color:var(--bla);border-color:var(--bla)}
.knapp-linje:hover{background:var(--bla);color:var(--hvit);transform:translateY(-2px)}
.knapp svg,.knapp-hvit svg,.knapp-linje svg{width:17px;height:17px;flex:none}

/* ---------- toppstripe ---------- */
.stripe{background:var(--bla-mork);color:#dbe7f4;font-size:13.5px;line-height:1.5}
.stripe .ramme{display:flex;flex-wrap:wrap;gap:8px 26px;align-items:center;justify-content:space-between;padding-top:10px;padding-bottom:10px}
.stripe span{display:inline-flex;align-items:center;gap:8px}
.stripe svg{width:14px;height:14px;flex:none;stroke:#8dc4ea}
.stripe a:hover{color:var(--hvit);text-decoration:underline}

/* ---------- topp ---------- */
.topp{position:sticky;top:0;z-index:60;background:var(--hvit);border-bottom:1px solid var(--kant);transition:box-shadow .2s ease}
.topp[data-rullet]{box-shadow:0 6px 22px rgba(23,52,84,.10)}
.topp>.ramme{display:flex;align-items:center;justify-content:space-between;gap:18px;padding-top:16px;padding-bottom:16px}
#menyknapp{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}

.merke{display:inline-flex;align-items:center;gap:11px;flex:none}
.merke-glyf{
  display:grid;place-items:center;width:40px;height:40px;flex:none;
  background:var(--bla);border-radius:var(--rund);
}
.merke-glyf svg{width:20px;height:20px;fill:var(--hvit)}
.merke-ord{display:flex;flex-direction:column;line-height:1}
.merke-ord b{font-family:'Sen',Arial,sans-serif;font-weight:700;font-size:20px;letter-spacing:.02em;color:var(--bla-dyp)}
.merke-ord small{font-family:'Sen',Arial,sans-serif;font-weight:400;font-size:10.5px;letter-spacing:.28em;color:var(--gra);margin-top:5px}
footer .merke-ord b{color:var(--hvit)}
footer .merke-ord small{color:#9db4cc}
footer .merke-glyf{background:var(--hvit)}
footer .merke-glyf svg{fill:var(--bla-dyp)}

.topp nav ul{display:flex;align-items:center;gap:26px;list-style:none;margin:0;padding:0}
.topp nav a{
  font-family:'Sen',Arial,sans-serif;font-weight:700;font-size:14px;letter-spacing:.05em;
  text-transform:uppercase;color:var(--svart);padding:6px 0;position:relative;transition:color .18s ease;
}
.topp nav a:hover{color:var(--bla)}
.topp nav a[aria-current="page"]{color:var(--bla)}
.topp nav a[aria-current="page"]::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--bla)}
.topp-handling{flex:none}
nav .mobil-cta{display:none}

.hamburger{display:none;flex-direction:column;justify-content:center;gap:5px;width:44px;height:44px;padding:10px;cursor:pointer;flex:none}
.hamburger span{display:block;height:2.5px;background:var(--bla-dyp);border-radius:2px;transition:transform .22s ease,opacity .22s ease}
#menyknapp:checked~.ramme .hamburger span:nth-child(1){transform:translateY(7.5px) rotate(45deg)}
#menyknapp:checked~.ramme .hamburger span:nth-child(2){opacity:0}
#menyknapp:checked~.ramme .hamburger span:nth-child(3){transform:translateY(-7.5px) rotate(-45deg)}

/* ---------- hero ---------- */
/* Bunnfargen er lys, ikke mørk: overlegget over herobildet er hvitt-dominert, og laster
   ikke bildet skal teksten fortsatt stå mørk på lyst. En mørk bunn her ga kontrast 2,31. */
.hero{position:relative;background:var(--lys);overflow:visible}
.hero-bilde{position:absolute;inset:0;z-index:0}
.hero-bilde img{width:100%;height:100%;object-fit:cover}
/* Det hvite overlegget tynnet fra .88 til .30 mellom 32 og 54 prosent, og ingressen (max 520 px)
   strekker seg inn i den sonen paa 1440. Der laa --gra paa 1,86:1 mot fotoet. */
.hero-bilde::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,rgba(255,255,255,.94) 0%,rgba(255,255,255,.92) 32%,rgba(255,255,255,.9) 54%,rgba(255,255,255,.44) 80%,rgba(23,52,84,.18) 100%)}
/* KUN innholdsrammen heves. `.hero>*` ville truffet bildelaget òg og gjort det
   position:relative, så bildet havnet i flyten og teksten under det i stedet for oppå. */
.hero>.ramme{position:relative;z-index:2}
.hero-innhold{padding:96px 0 128px;max-width:600px}
.vurdering{display:flex;align-items:center;gap:12px;margin-bottom:20px}
.vurdering b{font-family:'Sen',Arial,sans-serif;font-size:14px;letter-spacing:.06em;color:var(--bla)}
.stjerner{display:inline-flex;gap:3px}
.stjerner svg{width:17px;height:17px;fill:var(--gull)}
.hero h1{margin-bottom:20px}
.hero .lead{max-width:520px;color:var(--gra)}
.hero .knapp{margin-top:28px}

/* skjemastripe som henger ned i seksjonen under */
.hero-skjema{position:relative;z-index:5;margin-top:-58px}
.hero-skjema .boks{
  background:var(--hvit);border-radius:var(--rund);box-shadow:var(--skygge);
  padding:26px;display:grid;grid-template-columns:repeat(4,1fr);gap:14px;align-items:center;
}
.hero-skjema input,.hero-skjema select{
  width:100%;padding:14px 15px;border:1px solid var(--kant);border-radius:var(--rund);
  background:var(--lys);font-size:15px;transition:border-color .18s ease,background-color .18s ease;
}
.hero-skjema input:focus,.hero-skjema select:focus{border-color:var(--bla);background:var(--hvit);outline:none}
.hero-skjema .knapp{width:100%;padding:15px 18px}
.hero-takk{
  background:var(--hvit);border-radius:var(--rund);box-shadow:var(--skygge);
  padding:26px 28px;display:flex;gap:16px;align-items:flex-start;
}
.hake{display:grid;place-items:center;width:38px;height:38px;flex:none;border-radius:50%;background:var(--bla);}
.hake svg{width:19px;height:19px;stroke:var(--hvit);fill:none;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}

/* denne seksjonen må ha samme bunn som kortet henger ned i, ellers blir det en søm */
.etter-hero{background:var(--hvit)}

/* ---------- sikksakk ---------- */
.sikksakk{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center;position:relative}
.sikksakk .bilde{position:relative}
.sikksakk .bilde img{width:100%;height:100%;object-fit:cover;border-radius:var(--rund)}
.sikksakk.omvendt .bilde{order:2}
.sikksakk.omvendt .tekst{order:1}
.hakeliste{list-style:none;margin:22px 0 0;padding:0;display:grid;gap:12px}
.hakeliste li{display:flex;gap:11px;align-items:flex-start;font-size:15.5px;color:var(--gra)}
.hakeliste svg{width:17px;height:17px;flex:none;margin-top:5px;stroke:var(--bla);fill:none;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}

/* fullbredde sikksakk, som referansens Vårt oppdrag */
.brei{display:grid;grid-template-columns:1fr 1fr;align-items:stretch;background:var(--hvit)}
.brei .foto{position:relative;min-height:420px}
.brei .foto img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.brei .ord{display:flex;flex-direction:column;justify-content:center;padding:76px 56px}
.brei.venstre .foto{order:1}
.brei.venstre .ord{order:2}
.brei.hoyre .foto{order:2}
.brei.hoyre .ord{order:1}
.strek{display:block;width:56px;height:3px;background:var(--bla);margin:16px 0 22px;border-radius:2px}

/* ---------- tallbånd ---------- */
.tall{background:var(--bla-mork);color:var(--hvit)}
.tall .ramme{display:grid;grid-template-columns:repeat(4,1fr);gap:26px;padding-top:46px;padding-bottom:46px}
.tall .celle{display:flex;align-items:center;gap:14px;justify-content:center}
.tall .verdi{font-family:'Sen',Arial,sans-serif;font-weight:700;font-size:clamp(28px,3.2vw,40px);line-height:1;color:var(--hvit);white-space:nowrap}
.tall .merkelapp{font-family:'Sen',Arial,sans-serif;font-weight:700;font-size:12px;letter-spacing:.13em;text-transform:uppercase;color:#c6dcf0;line-height:1.4;max-width:130px}

/* ---------- kortrutenett ---------- */
.kortgrid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.kort{
  background:var(--hvit);border:1px solid var(--kant);border-radius:var(--rund);
  padding:40px 30px;text-align:center;transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease;
}
.kort:hover{transform:translateY(-5px);box-shadow:var(--skygge);border-color:#cfdcec}
.kort-ikon{display:grid;place-items:center;width:60px;height:60px;margin:0 auto 20px;border-radius:50%;background:var(--lys-2)}
.kort-ikon svg{width:27px;height:27px;stroke:var(--bla);fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.kort h3{margin-bottom:12px}
.kort p{color:var(--gra);font-size:15.5px;line-height:1.75}

/* ---------- trekkspill ---------- */
.trekkspill{border:1px solid var(--kant);border-radius:var(--rund);overflow:hidden;background:var(--hvit)}
.trekkspill details+details{border-top:1px solid var(--kant)}
.trekkspill summary{
  display:flex;align-items:center;gap:14px;padding:17px 22px;cursor:pointer;list-style:none;
  font-family:'Sen',Arial,sans-serif;font-weight:700;font-size:13.5px;letter-spacing:.09em;
  text-transform:uppercase;color:var(--bla-dyp);transition:background-color .18s ease,color .18s ease;
}
.trekkspill summary::-webkit-details-marker{display:none}
.trekkspill summary:hover{background:var(--lys);color:var(--bla)}
.trekkspill .tegn{position:relative;width:14px;height:14px;flex:none}
.trekkspill .tegn::before,.trekkspill .tegn::after{content:"";position:absolute;background:var(--bla);border-radius:2px;transition:opacity .18s ease}
.trekkspill .tegn::before{left:0;top:6px;width:14px;height:2px}
.trekkspill .tegn::after{top:0;left:6px;width:2px;height:14px}
.trekkspill details[open] .tegn::after{opacity:0}
.trekkspill .brod{padding:4px 22px 28px;display:grid;grid-template-columns:1.15fr .85fr;gap:32px;align-items:start}
.trekkspill .brod h3{margin-bottom:14px}
.trekkspill .brod p{color:var(--gra);font-size:15.5px}
.trekkspill .brod img{width:100%;border-radius:var(--rund)}

/* FAQ-varianten: hvite kort med luft imellom */
.faq{display:grid;gap:12px}
.faq details{background:var(--hvit);border:1px solid var(--kant);border-radius:var(--rund);transition:box-shadow .2s ease}
.faq details[open]{box-shadow:var(--skygge-lav)}
.faq summary{
  display:flex;align-items:center;justify-content:space-between;gap:16px;padding:19px 22px;cursor:pointer;
  list-style:none;font-family:'Sen',Arial,sans-serif;font-weight:700;font-size:16px;color:var(--bla-dyp);
  transition:color .18s ease;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--bla)}
.faq details[open] summary{color:var(--bla)}
.faq .svar{padding:0 22px 22px;color:var(--gra);font-size:15.5px}

/* ---------- sitater ---------- */
.sitatgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;align-items:start}
.sitat .boble{
  position:relative;background:var(--hvit);border:1px solid var(--kant);border-radius:var(--rund);
  padding:24px 24px 26px;box-shadow:var(--skygge-lav);
}
.sitat .boble::after{
  content:"";position:absolute;left:34px;bottom:-11px;width:20px;height:20px;
  background:var(--hvit);border-right:1px solid var(--kant);border-bottom:1px solid var(--kant);
  transform:rotate(45deg);
}
.sitat .anfore{font-family:'Sen',Arial,sans-serif;font-size:38px;line-height:1;color:var(--lys-2);display:block;margin-bottom:-6px}
.sitat .stjerner{margin-bottom:12px}
.sitat p{font-size:15px;line-height:1.8;color:var(--gra);font-style:italic}
.sitat .avsender{display:flex;align-items:center;gap:12px;margin:24px 0 0 20px}
.sitat .rundel{display:grid;place-items:center;width:42px;height:42px;flex:none;border-radius:50%;background:var(--bla);color:var(--hvit);font-family:'Sen',Arial,sans-serif;font-weight:700;font-size:17px}
.sitat .avsender b{display:block;font-family:'Sen',Arial,sans-serif;font-size:13px;letter-spacing:.09em;text-transform:uppercase;color:var(--bla-dyp)}
.sitat .avsender span{font-size:13px;color:var(--gra-svak)}
.sitat .rundel span{color:var(--hvit)}

/* ---------- mørkt CTA-bånd ---------- */
.baand-mork{background:var(--bla-mork);color:var(--hvit);text-align:center}
.baand-mork h2{color:var(--hvit)}
.baand-mork p{color:#cfe0f0;max-width:620px;margin-left:auto;margin-right:auto}
.baand-mork .knapp-hvit{margin-top:30px}

/* ---------- skjema ---------- */
.skjemakort{background:var(--lys);border:1px solid var(--kant);border-radius:var(--rund);padding:34px}
.felt{display:flex;flex-direction:column;gap:7px;margin-bottom:16px}
.felt label{font-family:'Sen',Arial,sans-serif;font-weight:700;font-size:13px;letter-spacing:.05em;color:var(--bla-dyp)}
.felt input,.felt select,.felt textarea{
  width:100%;padding:13px 15px;border:1px solid var(--kant);border-radius:var(--rund);
  background:var(--hvit);font-size:15px;transition:border-color .18s ease,box-shadow .18s ease;
}
.felt textarea{min-height:132px;resize:vertical}
.felt input:focus,.felt select:focus,.felt textarea:focus{border-color:var(--bla);box-shadow:0 0 0 3px rgba(42,97,157,.14);outline:none}
.felt-par{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.skjemakort .knapp{width:100%;margin-top:6px}
.takk{background:var(--lys);border:1px solid var(--kant);border-radius:var(--rund);padding:40px 34px;text-align:center}
.takk .hake{margin:0 auto 20px;width:54px;height:54px}
.takk .hake svg{width:26px;height:26px}

/* Aldri inline i HTML-en: en inline grid-template-columns vinner over mobilregelen. */
.kontaktgrid{display:grid;grid-template-columns:1.35fr .65fr;gap:34px;align-items:start}
.infoliste{display:grid;gap:14px;align-content:start}
.infokort{display:flex;align-items:center;gap:16px;background:var(--lys);border:1px solid var(--kant);border-radius:var(--rund);padding:20px 22px;transition:border-color .18s ease,transform .18s ease}
a.infokort:hover{border-color:var(--bla);transform:translateX(3px)}
.infokort .ikon{display:grid;place-items:center;width:44px;height:44px;flex:none;border-radius:50%;background:var(--hvit);border:1px solid var(--kant)}
.infokort .ikon svg{width:19px;height:19px;stroke:var(--bla);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.infokort b{display:block;font-family:'Sen',Arial,sans-serif;font-size:12.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--gra);margin-bottom:3px}
.infokort span{font-size:16px;color:var(--svart)}

/* ---------- innholdsside ---------- */
.sidetopp{background:var(--lys);border-bottom:1px solid var(--kant);padding:68px 0 60px;text-align:center}
.brodtekst h2{margin:40px 0 14px}
.brodtekst h2:first-child{margin-top:0}
.brodtekst p,.brodtekst li{color:var(--gra);font-size:16px}
.brodtekst ul{padding-left:22px;margin:0 0 18px}
.brodtekst li{margin-bottom:9px}
.brodtekst a{color:var(--bla);text-decoration:underline}

/* ---------- footer ---------- */
footer{background:var(--bla-dyp);color:#c2d3e5;padding:72px 0 0}
footer h2{font-size:18px;color:var(--hvit);margin-bottom:20px}
.footer-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1.2fr;gap:44px}
.footer-grid p{font-size:14.5px;line-height:1.85;color:#a8bed4}
.footer-merke .merke{margin-bottom:20px}
footer ul{list-style:none;margin:0;padding:0;display:grid;gap:11px}
footer ul a{font-size:14.5px;color:#c2d3e5;transition:color .18s ease,padding-left .18s ease}
footer ul a:hover{color:var(--hvit);padding-left:4px}
.footer-kontakt{display:grid;gap:11px;font-size:14.5px}
.footer-kontakt a:hover{color:var(--hvit);text-decoration:underline}
.footer-bunn{margin-top:60px;border-top:1px solid rgba(255,255,255,.12);padding:22px 0;text-align:center}
.footer-bunn .ramme{display:flex;flex-wrap:wrap;gap:8px 22px;justify-content:center;align-items:center}
.footer-bunn,.footer-bunn a{font-size:13.5px;color:#9db4cc}
.footer-bunn a:hover{color:var(--hvit);text-decoration:underline}

/* =========================================================
   Mobil. Retningsvariantene nulles med SAMME spesifisitet
   som desktopregelen, ellers taper mobilregelen.
   ========================================================= */
@media (max-width:960px){
  :root{--topp:var(--topp-mobil)}
  .seksjon{padding:64px 0}
  .seksjon-tett{padding:46px 0}
  .seksjonstopp{margin-bottom:38px}

  .hamburger{display:flex}
  .topp-handling{display:none}
  .topp>.ramme{flex-wrap:wrap;padding-top:12px;padding-bottom:12px}
  /* nav har flex-basis:100% og tvinger en linjeskift. Uten order havner hamburgeren
     på rad tre, under den sammenklappede menyen, i stedet for ved siden av logoen. */
  .merke{order:1}
  .hamburger{order:2}
  .topp nav{order:3;flex-basis:100%;max-height:0;overflow:hidden;transition:max-height .28s ease}
  #menyknapp:checked~.ramme nav{max-height:420px}
  .topp nav ul{flex-direction:column;align-items:stretch;gap:0;padding:8px 0 12px}
  .topp nav li+li{border-top:1px solid var(--kant)}
  .topp nav a{display:block;padding:14px 2px;font-size:14px}
  .topp nav a[aria-current="page"]::after{display:none}
  nav .mobil-cta{display:block;border-top:0 !important;padding-top:14px}
  nav .mobil-cta a{display:flex !important;justify-content:center;background:var(--bla);color:var(--hvit);border-radius:var(--rund);padding:14px 18px}
  nav .mobil-cta a:hover{background:var(--bla-mork);color:var(--hvit)}

  /* På mobil blir et gjennomsiktig bakgrunnsbilde bare en vasket flekk bak teksten.
     Der tas fotoet ut av bakgrunnen og settes som et ekte bånd under teksten, som
     skjemakortet så henger ned i. */
  .hero{display:flex;flex-direction:column}
  .hero>.ramme{order:1}
  .hero-bilde{position:relative;order:2;height:230px}
  .hero-bilde::after{display:none}
  .hero-innhold{padding:44px 0 40px;max-width:none}
  .hero-skjema{margin-top:-56px}
  .hero-skjema .boks{grid-template-columns:1fr;padding:22px}

  .sikksakk{grid-template-columns:1fr;gap:32px}
  .sikksakk.omvendt .bilde,.sikksakk .bilde{order:1}
  .sikksakk.omvendt .tekst,.sikksakk .tekst{order:2}

  .brei{grid-template-columns:1fr}
  .brei.venstre .foto,.brei.hoyre .foto{order:1;min-height:280px}
  .brei.venstre .ord,.brei.hoyre .ord{order:2;padding:48px 22px}

  .tall .ramme{grid-template-columns:1fr 1fr;gap:28px 18px;padding-top:38px;padding-bottom:38px}
  .tall .celle{justify-content:flex-start}

  .kortgrid-3{grid-template-columns:1fr;gap:18px}
  .kort{padding:32px 24px}

  .trekkspill .brod{grid-template-columns:1fr;gap:22px;padding:4px 20px 24px}
  .trekkspill summary{padding:16px 20px;font-size:12.5px}

  .sitatgrid{grid-template-columns:1fr;gap:34px}

  .felt-par{grid-template-columns:1fr;gap:0}
  .skjemakort{padding:26px 22px}
  .kontaktgrid{grid-template-columns:1fr;gap:28px}

  .footer-grid{grid-template-columns:1fr 1fr;gap:36px 26px}
  .footer-merke{grid-column:1 / -1}
  .prikker{display:none}
}

@media (max-width:560px){
  .stripe .ramme{justify-content:flex-start;gap:6px 18px;font-size:12.5px}
  .tall .ramme{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr}
  .brei .ord{padding:40px 22px}
  .knapp,.knapp-hvit,.knapp-linje{width:100%}
  .hero .knapp{width:auto}
}

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