/* Sylvberg — delt stilark. Én kilde for palett og typografi. */

/* ---------- Fonter (selvhostet, ingen eksterne kall) ---------- */
@font-face{
  font-family:'Archivo';font-style:normal;font-weight:100 900;font-stretch:62% 125%;
  font-display:swap;src:url(fonter/archivo-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Archivo';font-style:normal;font-weight:100 900;font-stretch:62% 125%;
  font-display:swap;src:url(fonter/archivo-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* ---------- Tokens ---------- */
:root{
  --sort:#000000;
  --blekk:#191a22;
  --krem:#f2f0eb;
  --krem-dyp:#e7e3d9;
  --hvit:#ffffff;
  --indigo:#4331e8;
  --indigo-lys:#8383ff;
  --lime:#dde041;
  --korall:#ca2f1c;
  --damp:#5c5c66;
  --linje:rgba(0,0,0,.12);
  --linje-lys:rgba(255,255,255,.18);
  --topp-h:76px;
  --runding:40px;
  --ramme:1240px;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--hvit);color:var(--sort);
  font-family:'Archivo',system-ui,-apple-system,'Segoe UI',sans-serif;
  font-stretch:100%;font-size:17px;line-height:1.55;font-weight:400;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit}

h1,h2,h3,.display{
  font-family:'Archivo',system-ui,sans-serif;font-stretch:112%;
  font-weight:800;letter-spacing:-.022em;line-height:1.02;margin:0;
  /* Ett langt sammensatt norsk ord i display-grad er bredere enn 360 px. Uten dette
     får hele sida vannrett scroll av én overskrift. */
  overflow-wrap:break-word;
}
h1{font-size:clamp(2.9rem,7.4vw,6rem);font-weight:900;letter-spacing:-.03em}
h2{font-size:clamp(2.05rem,4.1vw,3rem)}
h3{font-size:clamp(1.3rem,2.1vw,1.6rem);line-height:1.15}
h4{font-family:'Archivo',sans-serif;font-stretch:106%;font-size:.94rem;font-weight:700;letter-spacing:-.01em;margin:0}
p{margin:0}
.ingress{font-size:clamp(1.02rem,1.35vw,1.19rem);line-height:1.6;color:var(--damp);max-width:44ch}
.brod{color:var(--damp);max-width:52ch}

/* Ankermål må klarere den faste toppen */
section[id],div[id],h2[id]{scroll-margin-top:calc(var(--topp-h) + 28px)}

.ramme{width:min(var(--ramme),100% - 48px);margin-inline:auto}
.blokk{border-radius:var(--runding)}
.mork{background:var(--blekk);color:var(--hvit)}
/* Helsvart variant. Den bærer .mork også, slik at knapper, piller og merkelapper
   lysner. En seksjon som er mørk i kraft av egen bakgrunn alene gir nesten-svart
   tekst på nesten-svart bunn. */
.natt{background:var(--sort)}
.mork .brod,.mork .ingress{color:rgba(255,255,255,.72)}
.mork .bilderamme > img{background:rgba(255,255,255,.07)}
.krembunn{background:var(--krem)}
.seksjon{padding:clamp(72px,9vw,124px) 0}

/* ---------- Piller og knapper ---------- */
.knapp{
  display:inline-flex;align-items:center;gap:9px;
  background:var(--sort);color:var(--hvit);text-decoration:none;
  font-size:.95rem;font-weight:600;font-stretch:104%;letter-spacing:-.01em;
  padding:14px 26px;border-radius:48px;border:0;cursor:pointer;
  font-family:inherit;transition:transform .18s ease,background-color .18s ease,color .18s ease;
}
.knapp:hover{transform:translateY(-2px);background:var(--indigo)}
.knapp:focus-visible{outline:3px solid var(--indigo);outline-offset:3px}
.knapp.lys{background:var(--hvit);color:var(--sort)}
.knapp.lys:hover{background:var(--lime);color:var(--sort)}
.knapp.liten{padding:9px 20px;font-size:.86rem}
.knapp svg{width:16px;height:16px;flex:none}

.pille{
  display:inline-flex;align-items:center;gap:7px;
  background:var(--lime);color:var(--sort);
  font-size:.79rem;font-weight:700;font-stretch:104%;letter-spacing:-.005em;
  padding:6px 14px;border-radius:40px;width:max-content;
}
.pille.hvit{background:var(--hvit);color:var(--indigo)}
.pille.blek{background:rgba(255,255,255,.13);color:var(--hvit)}
/* Footeren er mørk uten å bære .mork: nevn den eksplisitt, ellers står pillene nesten usynlige. */
.mork .pille.blek,footer .pille.blek{background:rgba(255,255,255,.13);color:var(--hvit)}
.mork .knapp,footer .knapp{background:var(--hvit);color:var(--sort)}
.mork .knapp:hover,footer .knapp:hover{background:var(--lime);color:var(--sort)}

.merkelapp{font-size:.72rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--korall)}
.mork .merkelapp,footer .merkelapp{color:var(--lime)}

/* ---------- Varselstripe ---------- */
.varsel{background:var(--sort);color:var(--hvit)}
.varsel .ramme{display:flex;align-items:center;justify-content:center;gap:16px;padding:11px 0;flex-wrap:wrap}
.varsel p{font-size:.88rem;font-weight:600;font-stretch:104%}
.varsel .lukk{
  background:none;border:0;color:rgba(255,255,255,.75);cursor:pointer;
  padding:4px;line-height:0;margin-left:auto;transition:color .18s ease;
}
.varsel .lukk:hover{color:var(--hvit)}
.varsel .lukk svg{width:16px;height:16px}
.varsel[hidden]{display:none}

/* ---------- Topp ---------- */
.topp{position:sticky;top:0;z-index:60;background:var(--krem);transition:box-shadow .2s ease,background-color .2s ease}
.topp.fast{box-shadow:0 1px 0 var(--linje)}
.innerside .topp{background:var(--krem)}
.topp > .ramme{display:flex;align-items:center;gap:24px;height:var(--topp-h)}
.merke{
  display:inline-flex;align-items:baseline;gap:2px;text-decoration:none;
  font-stretch:118%;font-weight:900;font-size:1.42rem;letter-spacing:-.045em;
}
.merke i{color:var(--indigo);font-style:normal}
#menyknapp{position:absolute;opacity:0;pointer-events:none;width:0;height:0}
.topp-hoyre{display:flex;align-items:center;gap:12px;margin-left:auto}
.topp nav ul{display:flex;align-items:center;gap:6px;list-style:none;margin:0;padding:0}
.topp nav li + li::before{content:"";display:inline-block;width:3px;height:3px;border-radius:50%;background:rgba(0,0,0,.32);margin-right:6px;vertical-align:middle}
.topp nav li{display:flex;align-items:center}
.topp nav a{
  text-decoration:none;font-size:.93rem;font-weight:600;font-stretch:104%;
  padding:7px 10px;border-radius:30px;transition:background-color .18s ease,color .18s ease;
}
.topp nav a:hover{background:rgba(0,0,0,.06)}
/* Må matche spesifisiteten til `.topp nav li`, ellers vinner den og CTA-en
   står dobbelt i desktop-toppen. */
.topp nav li.mobil-cta{display:none}
.hamburger{display:none;width:42px;height:42px;border-radius:50%;background:var(--hvit);align-items:center;justify-content:center;cursor:pointer;flex:none}
.hamburger svg{width:20px;height:20px}
.hamburger .kryss{display:none}
#menyknapp:checked ~ .topp-hoyre .hamburger .kryss{display:block}
#menyknapp:checked ~ .topp-hoyre .hamburger .strek-ikon{display:none}

/* ---------- Hero ---------- */
.hero{background:var(--krem);border-radius:0 0 var(--runding) var(--runding);overflow:hidden;position:relative}
.hero > .ramme{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.02fr);gap:48px;align-items:center;padding:clamp(48px,6vw,80px) 0 clamp(56px,6vw,88px)}
.hero-tekst{display:flex;flex-direction:column;align-items:flex-start;gap:24px;width:100%;min-width:0}
.hero h1{max-width:11ch}
.hero .ingress{max-width:40ch;color:#3a3a42}
.vurdering{display:flex;flex-direction:column;gap:5px}
.stjerner{display:flex;align-items:center;gap:7px;color:var(--korall)}
.stjerner svg{width:15px;height:15px}
.vurdering span{font-size:.74rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--korall)}

/* Mosaikk: to kolonner som driver rolig i hver sin retning. To identiske sett per
   kolonne og translateY(-50%) gir en sømløs, uendelig loop. */
.mosaikk{display:grid;grid-template-columns:1fr 1fr;gap:16px;height:min(600px,72vh);overflow:hidden;min-width:0;
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 9%,#000 91%,transparent);
  mask-image:linear-gradient(180deg,transparent,#000 9%,#000 91%,transparent)}
.mos-kol{overflow:hidden}
.mos-spor{display:flex;flex-direction:column;will-change:transform}
/* Mellomrommet bæres av HVER flis, aldri av gap på sporet: gap gir ikke
   mellomrom etter siste flis, og da river skjøten mellom de to settene. */
.mos-spor > .flis{margin:0 0 16px}
/* Animasjonen ligger bak [data-mos-klar], som JS setter når settet er duplisert. Uten JS
   blir mosaikken stående stille og full, ikke halvtom med en synlig skjøt. */
.mosaikk[data-mos-klar] .mos-spor{animation:drift 46s linear infinite}
.mosaikk[data-mos-klar] .mos-kol.ned .mos-spor{animation-direction:reverse;animation-duration:54s}
.mosaikk[data-mos-klar]:hover .mos-spor{animation-play-state:paused}
@keyframes drift{from{transform:translateY(0)}to{transform:translateY(-50%)}}
.flis{position:relative;border-radius:28px;overflow:hidden;flex:none;background:var(--krem-dyp)}
.flis img{width:100%;height:auto;aspect-ratio:3/4;object-fit:cover}
.flis b{
  position:absolute;left:50%;bottom:12px;transform:translateX(-50%);
  background:var(--hvit);color:var(--sort);border-radius:30px;
  padding:5px 13px;font-size:.76rem;font-weight:700;white-space:nowrap;
}

/* ---------- Logobånd ---------- */
.logobaand{padding:44px 0 8px}
.logobaand .ramme{display:flex;align-items:center;gap:28px}
.logobaand h4,.logobaand h2{flex:none;color:var(--damp)}
.rullebaand{overflow:hidden;flex:1;min-width:0;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
.rulle-spor{display:flex;width:max-content;will-change:transform}
.rulle-gruppe{display:flex;align-items:center;flex:none}
.rulle-gruppe > *{flex:none;margin-right:56px}
.rulle-tekst{white-space:nowrap;font-stretch:116%;font-weight:800;font-size:1.32rem;letter-spacing:-.03em;color:var(--sort)}
.rullebaand[data-rulle-klar] .rulle-spor{animation:rulle var(--rulle-varighet) linear infinite}
.rullebaand[data-rulle-klar]:hover .rulle-spor{animation-play-state:paused}
@keyframes rulle{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ---------- Sentrert påstand ---------- */
.pastand{text-align:center;padding:clamp(72px,9vw,120px) 0 clamp(24px,3vw,40px)}
.pastand h2{font-size:clamp(2.2rem,4.9vw,3.6rem);max-width:17ch;margin-inline:auto}

/* ---------- Sikksakk ---------- */
.sikksakk > .ramme{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.08fr);gap:clamp(40px,6vw,88px);align-items:center}
.sikksakk.hoyre > .ramme > .sikk-tekst{order:1}
.sikksakk.hoyre > .ramme > .bilderamme{order:2}
.sikksakk.venstre > .ramme > .bilderamme{order:1}
.sikksakk.venstre > .ramme > .sikk-tekst{order:2}
.sikk-tekst{display:flex;flex-direction:column;align-items:flex-start;gap:20px;min-width:0}
.sikk-tekst h2{max-width:14ch}
.bilderamme{position:relative;min-width:0}
/* height:auto er ikke pynt: width/height-attributtene på <img> er presentasjons-
   hint, og så lenge height er satt av dem er `aspect-ratio` virkningsløs. Uten
   dette ble bildene stående 800 px høye uansett hva ratioen sa. */
.bilderamme > img{width:100%;height:auto;aspect-ratio:4/5;border-radius:32px;object-fit:cover;background:var(--krem-dyp)}

/* Flytende kort oppå bildet. Holdes innenfor rammen, så ingenting klippes bort. */
.flytkort{
  position:absolute;background:var(--hvit);color:var(--sort);
  border-radius:18px;box-shadow:0 18px 40px rgba(0,0,0,.16);padding:14px 16px;
}
.kandidatliste{right:14px;top:50%;transform:translateY(-50%);width:min(300px,62%);display:grid;gap:10px}
.kandidatrad{display:flex;align-items:center;gap:10px}
.kandidatrad .prikk{width:30px;height:30px;border-radius:50%;background:var(--krem-dyp);flex:none;overflow:hidden}
.kandidatrad .prikk img{width:100%;height:100%;object-fit:cover}
.kandidatrad .strek{flex:1;display:grid;gap:5px;min-width:0}
.kandidatrad .strek i{display:block;height:6px;border-radius:4px;background:rgba(0,0,0,.13)}
.kandidatrad .strek i:last-child{width:58%}
.kandidatrad .hake{width:22px;height:22px;border-radius:6px;background:var(--indigo);flex:none;display:grid;place-items:center}
.kandidatrad .hake svg{width:13px;height:13px;color:#fff}
.kandidatrad em{font-style:normal;font-size:.68rem;font-weight:700;background:var(--lime);border-radius:20px;padding:2px 8px}

.maalkort{left:14px;bottom:16px;width:min(280px,64%)}
.maalkort h4,.maalkort h3{color:var(--damp);font-weight:600;font-size:.8rem;margin-bottom:6px}
.maalkort .tall{display:flex;align-items:center;gap:6px;font-stretch:112%;font-weight:900;font-size:1.7rem;letter-spacing:-.03em;color:var(--indigo)}
.maalkort .tall svg{width:18px;height:18px}
.maalkort .stolper{display:flex;align-items:flex-end;gap:8px;height:52px;margin-top:12px}
.maalkort .stolper i{flex:1;border-radius:8px;background:var(--indigo-lys)}
.maalkort .stolper i:last-child{background:var(--indigo)}

.sjekkkort{right:14px;bottom:16px;width:min(266px,62%);display:grid;gap:9px}
.sjekkkort div{display:flex;align-items:center;gap:9px;font-size:.85rem;font-weight:600}
.sjekkkort span{width:19px;height:19px;border-radius:50%;background:var(--lime);display:grid;place-items:center;flex:none}
.sjekkkort span svg{width:11px;height:11px}

.navnkort{left:14px;top:18px;display:flex;align-items:center;gap:9px;font-size:.83rem;font-weight:700;padding:9px 14px;border-radius:30px}
.navnkort i{width:8px;height:8px;border-radius:50%;background:var(--lime);flex:none}

/* ---------- Sitatrad (sveip) ---------- */
.sitatrad{display:flex;gap:20px;overflow-x:auto;scroll-snap-type:x mandatory;padding:8px 0 22px;
  scrollbar-width:none;-ms-overflow-style:none}
.sitatrad::-webkit-scrollbar{display:none}
.sitatkort{
  flex:none;width:min(420px,84vw);scroll-snap-align:start;
  background:var(--hvit);border-radius:28px;padding:28px;display:flex;flex-direction:column;gap:18px;
}
.sitatkort h3{font-size:clamp(1.15rem,1.7vw,1.4rem);font-weight:800}
.sitatkort .hvem{display:flex;align-items:center;gap:12px;margin-top:auto}
.sitatkort .hvem img{width:46px;height:46px;border-radius:50%;object-fit:cover;flex:none;background:var(--krem-dyp)}
.sitatkort .hvem b{display:block;font-size:.92rem;font-stretch:104%}
.sitatkort .hvem span{display:block;font-size:.83rem;color:var(--damp)}
.sveipehint{display:flex;align-items:center;gap:10px;color:var(--damp);font-size:.85rem;font-weight:600}
.sveipehint svg{width:17px;height:17px}

/* ---------- Stort sitat ---------- */
.storsitat{text-align:center;padding:clamp(84px,10vw,140px) 0}
.storsitat blockquote{margin:0}
.storsitat p{font-stretch:112%;font-weight:800;letter-spacing:-.025em;line-height:1.05;
  font-size:clamp(2rem,4.7vw,3.5rem);max-width:19ch;margin-inline:auto}
.storsitat em{font-style:normal;color:var(--indigo)}
.storsitat cite{display:block;margin-top:28px;font-style:normal;font-size:.88rem;color:var(--damp)}

/* ---------- Avslutnings-CTA ---------- */
.slutt-cta{background:var(--lime);text-align:center;padding:clamp(64px,7vw,92px) 0}
.slutt-cta h2{max-width:20ch;margin-inline:auto}
.slutt-cta .knapp{margin-top:26px;background:var(--hvit);color:var(--sort)}
.slutt-cta .knapp:hover{background:var(--sort);color:var(--hvit)}

/* ---------- Skjema ---------- */
.skjemakort{background:var(--hvit);border-radius:32px;padding:clamp(26px,3.4vw,40px);box-shadow:0 24px 60px rgba(0,0,0,.09)}
.felt{display:grid;gap:7px;margin-bottom:16px}
.felt label{font-size:.86rem;font-weight:700;font-stretch:104%}
.felt input,.felt select,.felt textarea{
  font-family:inherit;font-size:1rem;color:var(--sort);background:var(--krem);
  border:1.5px solid transparent;border-radius:16px;padding:13px 15px;width:100%;
  transition:border-color .18s ease,background-color .18s ease;
}
.felt textarea{min-height:132px;resize:vertical}
.felt input:focus,.felt select:focus,.felt textarea:focus{outline:none;border-color:var(--indigo);background:var(--hvit)}
.feltpar{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.skjemakort .knapp{width:100%;justify-content:center;margin-top:6px}
.smaatekst{font-size:.82rem;color:var(--damp);margin-top:14px}
.takk{background:var(--hvit);border-radius:32px;padding:clamp(30px,4vw,48px);text-align:center;display:grid;gap:14px;justify-items:center}
.takk .ikon{width:56px;height:56px;border-radius:50%;background:var(--lime);display:grid;place-items:center}
.takk .ikon svg{width:26px;height:26px}
.takk[hidden]{display:none}

/* ---------- Kort og rutenett ---------- */
.kortgrid-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
.kortgrid-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}
.kort{background:var(--krem);border-radius:28px;padding:28px;display:flex;flex-direction:column;gap:12px;align-items:flex-start}
.mork .kort{background:rgba(255,255,255,.07)}
.kort h3{font-size:1.22rem}
.kort p{color:var(--damp);font-size:.96rem}
.mork .kort p{color:rgba(255,255,255,.72)}
.talltavle{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:22px}
.talltavle div{display:grid;gap:4px}
.talltavle b{font-stretch:114%;font-weight:900;font-size:clamp(2.1rem,3.6vw,2.9rem);letter-spacing:-.035em;line-height:1}
.talltavle span{font-size:.9rem;color:var(--damp)}
.mork .talltavle span{color:rgba(255,255,255,.7)}

.byliste{display:flex;flex-wrap:wrap;gap:10px}
.smal-h2{max-width:16ch}
.avstand{margin-top:36px}
.h2-liten{font-size:clamp(1.5rem,2.6vw,2rem)}
.skjemakort .h2-liten{margin-bottom:22px}
.kontaktgrid{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(28px,4vw,56px);align-items:start}
.kontaktinfo{display:flex;flex-direction:column;gap:26px;min-width:0}
.kontaktinfo dl{margin:0;display:grid;gap:20px}
.kontaktinfo dt{font-size:.78rem;font-weight:700;letter-spacing:.11em;text-transform:uppercase;color:var(--damp);margin-bottom:4px}
.kontaktinfo dd{margin:0;font-size:1.06rem;font-weight:600;font-stretch:104%}
.kontaktinfo dd a{text-decoration:none}
.kontaktinfo dd a:hover{color:var(--indigo)}
.stor-h3{max-width:20ch;font-size:clamp(1.6rem,3.1vw,2.3rem)}

/* ---------- Tekstsider ---------- */
.tekstside{padding:clamp(52px,6vw,88px) 0 clamp(64px,7vw,104px)}
.tekstside .ramme{max-width:760px}
.tekstside h2{font-size:clamp(1.35rem,2.3vw,1.7rem);margin:40px 0 12px}
.tekstside h1 + p{margin-top:18px}
.tekstside p,.tekstside li{color:var(--damp);margin:10px 0}
.tekstside ul{padding-left:20px}
.sidetopp{background:var(--krem);border-radius:0 0 var(--runding) var(--runding);padding:clamp(46px,6vw,84px) 0 clamp(46px,6vw,74px)}
.sidetopp .ramme{display:flex;flex-direction:column;align-items:flex-start;gap:18px}
.sidetopp h1{font-size:clamp(2.4rem,5.6vw,4.4rem);max-width:15ch}

/* ---------- Footer ---------- */
footer{background:var(--sort);color:var(--hvit);border-radius:var(--runding) var(--runding) 0 0;margin-top:0;padding:clamp(56px,6vw,84px) 0 32px}
footer a{text-decoration:none;color:rgba(255,255,255,.74);transition:color .18s ease}
footer a:hover{color:var(--hvit)}
.footer-topp{display:grid;grid-template-columns:1.3fr repeat(3,minmax(0,1fr));gap:36px;padding-bottom:44px;border-bottom:1px solid var(--linje-lys)}
.footer-merke{display:flex;flex-direction:column;gap:16px;align-items:flex-start}
.footer-merke .merke{color:var(--hvit);font-size:1.6rem}
.footer-merke p{color:rgba(255,255,255,.62);font-size:.92rem;max-width:30ch}
.footer-kol h3 {font-family:'Archivo',sans-serif;font-stretch:106%;font-size:.94rem;font-weight:700;letter-spacing:-.01em;line-height:inherit;margin:0;color:var(--hvit);margin-bottom:14px}
.footer-kol ul{list-style:none;margin:0;padding:0;display:grid;gap:9px;font-size:.93rem}
.footer-kol span{color:rgba(255,255,255,.74)}
.footer-bunn{display:flex;flex-wrap:wrap;align-items:center;gap:8px 22px;padding-top:26px;font-size:.87rem;color:rgba(255,255,255,.62)}
.footer-bunn .hoyre{margin-left:auto}

/* ---------- Mobil ---------- */
@media (max-width:980px){
  :root{--runding:30px}
  .ramme{width:min(var(--ramme),100% - 34px)}
  .hero > .ramme{grid-template-columns:1fr;gap:36px;text-align:center;padding-bottom:0}
  .hero-tekst{align-items:center}
  .hero-tekst > *{max-width:100%}
  .hero h1,.hero .ingress{max-width:none}
  .hero .ingress{margin-inline:auto}
  .mosaikk{height:340px;gap:12px}
  .flis{border-radius:22px}
  .sikksakk > .ramme{grid-template-columns:1fr;gap:30px}
  /* Et 4:5-bilde spiser hele telefonskjermen. Flatere crop på mobil. */
  .bilderamme > img{aspect-ratio:4/3}
  /* Begge retningsvariantene må nevnes, ellers taper mobilregelen på spesifisitet
     og annethvert bilde blir stående forskjøvet. */
  .sikksakk.venstre > .ramme > .bilderamme,
  .sikksakk.hoyre > .ramme > .bilderamme{order:2}
  .sikksakk.venstre > .ramme > .sikk-tekst,
  .sikksakk.hoyre > .ramme > .sikk-tekst{order:1}
  .kortgrid-3,.kortgrid-2{grid-template-columns:1fr}
  .kontaktgrid{grid-template-columns:1fr;gap:32px}
  .talltavle{grid-template-columns:repeat(2,minmax(0,1fr));gap:26px}
  .footer-topp{grid-template-columns:1fr 1fr;gap:30px}
  .footer-merke{grid-column:1 / -1}
}

@media (max-width:820px){
  .topp nav{
    position:absolute;left:0;right:0;top:var(--topp-h);
    background:var(--krem);max-height:0;overflow:hidden;
    transition:max-height .28s ease;box-shadow:0 18px 34px rgba(0,0,0,.09);
  }
  #menyknapp:checked ~ .topp-hoyre nav{max-height:420px}
  .topp nav ul{flex-direction:column;align-items:stretch;gap:0;padding:10px 17px 20px}
  .topp nav li{display:block}
  .topp nav li + li::before{display:none}
  .topp nav a{display:block;padding:13px 6px;font-size:1.02rem;border-radius:0;border-top:1px solid var(--linje)}
  .topp nav .knapp{border:0;margin-top:14px;justify-content:center;color:var(--hvit)}
  .topp nav li.mobil-cta{display:block}
  .mobil-cta a{border-top:0}
  .hamburger{display:flex}
  .topp-hoyre > .knapp{display:none}
  .topp{position:sticky}
  .topp > .ramme{position:relative}
  .varsel .ramme{justify-content:flex-start;text-align:left;gap:12px}
  .varsel p{font-size:.82rem}
  /* I kolonne-flex bestemmes bredden av innholdet, ikke av flex:1. Uten width:100%
     blir båndet max-content bredt (målt til 7828 px) og hele sida får vannrett scroll. */
  .logobaand .ramme{flex-direction:column;align-items:stretch;gap:14px}
  .logobaand h4,.logobaand h2{align-self:flex-start}
  .rullebaand{width:100%;flex:none}
  .logobaand{padding-top:36px}
  .feltpar{grid-template-columns:1fr}
  .sitatkort{padding:24px}
  .footer-bunn .hoyre{margin-left:0;width:100%}
}

@media (max-width:520px){
  body{font-size:16px}
  .mosaikk{height:300px;grid-template-columns:repeat(2,1fr)}
  .flytkort{padding:12px 13px}
  .kandidatliste{width:min(240px,72%);right:10px}
  .maalkort,.sjekkkort{width:min(230px,74%)}
  .talltavle{grid-template-columns:1fr 1fr;gap:20px}
  .footer-topp{grid-template-columns:1fr}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .rullebaand[data-rulle-klar] .rulle-spor{animation:none}
  .rulle-spor > [data-rulle-gruppe][aria-hidden="true"]{display:none}
  /* Setteren er `.mosaikk[data-mos-klar] .mos-spor` (0,2,1). En naken `.mos-spor` (0,1,0) taper på
     spesifisitet, og media-spørringen endrer ikke det: mosaikken fortsatte å drive for alle som har
     bedt om mindre bevegelse. Overstyringen må matche setteren, begge retningene. */
  .mosaikk[data-mos-klar] .mos-spor,
  .mosaikk[data-mos-klar] .mos-kol.ned .mos-spor{animation:none}
  .knapp:hover{transform:none}
}

/* UU (WCAG 1.3.1): nivået er semantikk, størrelsen er CSS. Disse overskriftene fikk
   riktig nivå i disposisjonen og beholder utseendet sitt her. Sesjon 17b. */
.som-h4{font-family:'Archivo',sans-serif;font-stretch:106%;font-size:.94rem;font-weight:700;letter-spacing:-.01em;line-height:inherit;margin:0}