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

:root{
  --hvit:#ffffff;
  --blek:#f7f7f5;
  --blekere:#eeedeb;
  --kant:#d8d7d3;
  --morko:#22201f;
  --oransje:#fd8143;
  --blaa:#8fb8c8;
  --gul:#f8f9b8;
  --dempet:#454240;

  --serif:"Newsreader",Georgia,"Times New Roman",serif;
  --sans:"Figtree",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;

  --topp-h:68px;
  --ramme:1180px;
  --luft:22px;
}

*,*::before,*::after{box-sizing:border-box}

html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}

body{
  margin:0;
  font-family:var(--sans);
  font-size:16px;
  line-height:1.62;
  color:var(--morko);
  background:var(--hvit);
  overflow-x:hidden;
}

img{max-width:100%;display:block}

/* Toppen ligger gjennomsiktig over heroen, så hvert ankermål må klarere den. */
section[id],div[id]{scroll-margin-top:calc(var(--topp-h) + 26px)}

.ramme{width:100%;max-width:var(--ramme);margin:0 auto;padding:0 var(--luft)}

/* ---------- Typografi ---------- */

.serif{
  font-family:var(--serif);
  font-weight:400;
  line-height:1.1;   /* ikke lavere: Å og Ø klemmes mot linja over */
  letter-spacing:-0.022em;
  margin:0;
}
.kursiv{font-style:italic}

/* Norsk skriver sammen det engelsk deler (personvernerklæring, ansiktsbehandling). Et ord som
   er bredere enn spalta renner utenfor UTEN at elementboksen stikker ut, så bare scrollWidth
   ser det. Fasit: @klarvi-hq/gotchas-design-3.md */
h1,h2,h3,h4{overflow-wrap:break-word}

h1.serif{font-size:clamp(2.25rem,7vw,4.4rem)}
h2.serif{font-size:clamp(2rem,6vw,4.4rem)}
h3.serif{font-size:clamp(1.55rem,4.2vw,2.4rem)}
.serif-mid{font-size:clamp(1.75rem,4.6vw,2.75rem)}

.mellomtittel{
  font-family:var(--sans);
  font-size:1rem;
  font-weight:600;
  line-height:1.4;
  margin:0 0 8px;
}

.oyenbryn{
  font-family:var(--sans);
  font-size:.95rem;
  font-weight:500;
  margin:0 0 18px;
}

p{margin:0 0 18px}
p:last-child{margin-bottom:0}

.ingress{font-size:1.05rem;line-height:1.66}
.liten{font-size:.9rem;line-height:1.6;color:var(--dempet)}
.midtstilt{text-align:center}

a{color:inherit}

.tekstlenke{
  display:inline-block;
  font-size:.9rem;
  color:var(--dempet);
  text-decoration:none;
  border-bottom:1px solid currentColor;
  padding-bottom:2px;
  transition:color .18s ease;
}
.tekstlenke:hover{color:var(--morko)}

/* ---------- Knapper ---------- */

.knapp{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  font-family:var(--sans);
  font-size:1rem;
  font-weight:500;
  line-height:1;
  padding:15px 26px;
  border:1px solid transparent;
  border-radius:900px;
  text-decoration:none;
  cursor:pointer;
  transition:background-color .2s ease,color .2s ease,border-color .2s ease,transform .2s ease;
}
.knapp:hover{transform:translateY(-1px)}
.knapp-morko{background:var(--morko);color:var(--hvit)}
.knapp-morko:hover{background:#000}
.knapp-lys{background:var(--hvit);color:var(--morko);border-color:var(--kant)}
.knapp-lys:hover{background:var(--blekere)}
.knapp-liten{font-size:.88rem;padding:11px 20px}

/* Footeren er mørk uten å bære .baand-mork, derfor står begge selektorene her. */
.baand-mork .knapp-lys,footer .knapp-lys,.topp .knapp-lys{
  background:transparent;color:var(--hvit);border-color:rgba(255,255,255,.5);
}
.baand-mork .knapp-lys:hover,footer .knapp-lys:hover,.topp .knapp-lys:hover{background:rgba(255,255,255,.14)}
footer .knapp-morko{background:var(--gul);color:var(--morko)}
footer .knapp-morko:hover{background:#fff}

.pille{
  display:inline-flex;
  align-items:center;
  font-family:var(--sans);
  font-size:.82rem;
  font-weight:500;
  padding:7px 15px;
  border:1px solid var(--kant);
  border-radius:900px;
  background:transparent;
  color:var(--morko);
  white-space:nowrap;
}
.baand-mork .pille,footer .pille{border-color:var(--oransje);color:var(--oransje)}

/* ---------- Topp ---------- */

/* Toppen er gjennomsiktig over heroen, men den hvite menyteksten må lese på ET HVERT foto.
   Derfor en fast skygge-gradient som BAKGRUNNSBILDE, og bare bakgrunnsFARGEN byttes når
   siden scrolles. Da kan overgangen animeres (background-image kan den ikke), og gradienten
   blir usynlig oppå den mørke flaten. Uten dette står menyen nesten hvitt på hvitt i det
   øyeblikket heroen er et lyst bilde, og ingen scroll-basert kontrastmåling fanger det. */
.topp{
  position:sticky;
  top:0;
  z-index:60;
  background-color:transparent;
  background-image:linear-gradient(180deg,rgba(20,18,17,.62) 0,rgba(20,18,17,.34) 58%,rgba(20,18,17,0) 100%);
  transition:background-color .25s ease,box-shadow .25s ease;
}
.topp.fast,.topp.apen{background-color:var(--morko);box-shadow:0 1px 0 rgba(255,255,255,.09)}

.topp-ramme{position:relative}

#menyknapp{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}

.topp-rad{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  height:var(--topp-h);
}

.ordmerke{
  font-family:var(--sans);
  font-size:1rem;
  font-weight:600;
  letter-spacing:.17em;
  text-transform:uppercase;
  color:var(--hvit);
  text-decoration:none;
  white-space:nowrap;
}

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

nav{max-height:0;overflow:hidden;transition:max-height .3s ease}
#menyknapp:checked ~ nav{max-height:460px}

nav ul{list-style:none;margin:0;padding:0 0 22px;display:flex;flex-direction:column;gap:0}
nav a{
  display:block;
  font-size:1.05rem;
  font-weight:500;
  color:var(--hvit);
  text-decoration:none;
  padding:12px 0;
  border-bottom:1px solid rgba(255,255,255,.15);
  transition:opacity .18s ease;
}
nav a:hover{opacity:.68}
nav .meny-cta{margin-top:18px}
nav .meny-cta a{border-bottom:0;padding:0}
nav .meny-cta .knapp{width:100%}

.topp-handling{display:none}

/* ---------- Hero ---------- */

.hero{
  position:relative;
  margin-top:calc(-1 * var(--topp-h));
  min-height:min(90vh,780px);
  display:flex;
  align-items:flex-end;
  overflow:hidden;
  background:var(--morko);
}
.hero-foto{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,rgba(20,18,17,.52) 0,rgba(20,18,17,.1) 34%,rgba(20,18,17,.24) 100%);
}
/* Overlegget males oppå vanlige barn i flyten: hev ALLE barna, ikke bare kortet.
   Men bakgrunnsfotoet er ALLEREDE et direkte barn og skal bli liggende absolutt:
   uten unntaket under slår `position:relative` ut `position:absolute`, fotoet faller
   ned i flyten og dytter hele hero-kortet ut av bildet. Unntaket må stå ETTER og ha
   høyere spesifisitet, ellers vinner regelen over. */
.hero > *{position:relative;z-index:2}
/* Sloret ma ha sin EGEN z-index. `::after` er ikke et element, saa `.hero > *` treffer det ikke,
   og pseudoelementet blir staaende paa `auto` (0) mens fotoet er hevet til 1: sloret ble malt UNDER
   bildet og hadde ingen virkning i det hele tatt. Rekkefolgen skrives derfor eksplisitt hele veien,
   foto 0, slor 1, innhold 2. Uten dette laa hvit «Bestill time» paa 1,83:1 mot en lys vegg. */
.hero > .hero-foto{position:absolute;z-index:0}
.hero::after{z-index:1}

.hero-ramme{
  width:100%;
  max-width:var(--ramme);
  margin:0 auto;
  padding:calc(var(--topp-h) + 40px) var(--luft) 36px;
}

.hero-kort{background:var(--gul);border-radius:22px;padding:26px 22px;max-width:490px}
.hero-kort .serif{margin-bottom:16px}

/* ---------- Innebygd felt med rund pilknapp ---------- */

.pilfelt{
  display:flex;
  align-items:center;
  gap:8px;
  background:var(--hvit);
  border:1px solid var(--kant);
  border-radius:900px;
  padding:6px 6px 6px 19px;
  margin-top:20px;
}
.pilfelt:focus-within{outline:2px solid var(--morko);outline-offset:2px}
.pilfelt input{
  flex:1;
  min-width:0;
  border:0;
  outline:none;
  background:transparent;
  font-family:var(--sans);
  font-size:.98rem;
  color:var(--morko);
  padding:10px 0;
}
.pilfelt input::placeholder{color:#88837f}
.pilfelt button{
  flex:none;
  width:42px;
  height:42px;
  border:0;
  border-radius:50%;
  background:var(--morko);
  color:var(--hvit);
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:background-color .2s ease;
}
.pilfelt button:hover{background:#000}
.pilfelt svg{width:17px;height:17px}
.felt-svar{margin-top:11px;font-size:.9rem;font-weight:500;min-height:1.3em}

/* ---------- Rullebånd (fasit: .claude/skills/nettside/rullebaand.md) ---------- */

.rullebaand{overflow:hidden;background:var(--oransje);padding:11px 0}
.rullebaand-gul{background:var(--gul)}
.rulle-spor{display:flex;width:max-content;will-change:transform}
.rulle-gruppe{display:flex;align-items:center;flex:none}
/* Mellomrom per element, aldri gap: gap gir ikke mellomrom etter siste element,
   og da blir skjøten mellom gruppe 1 og 2 smalere enn resten. */
.rulle-gruppe > *{flex:none;margin-right:34px}
.rulle-tekst{
  white-space:nowrap;
  font-size:.74rem;
  font-weight:600;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--morko);
}
.rulle-skille{white-space:nowrap;font-size:.74rem;font-weight:600;color:var(--morko);opacity:.5}

.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%)}}

@media (prefers-reduced-motion:reduce){
  .rullebaand[data-rulle-klar] .rulle-spor{animation:none}
  .rulle-spor > [data-rulle-gruppe][aria-hidden="true"]{display:none}
}

/* ---------- Seksjoner ---------- */

.baand{padding:60px 0}
.baand-blek{background:var(--blek)}
.baand-mork{background:var(--morko);color:var(--hvit)}
.baand-tett{padding:42px 0}

/* ---------- Mørkt manifest ---------- */

.manifest{text-align:center}
.manifest .oyenbryn{color:var(--oransje)}
.manifest h2{color:var(--oransje);font-size:clamp(2.4rem,9.4vw,5.75rem)}
.manifest-tekst{max-width:640px;margin:26px auto 0;color:var(--oransje);font-size:1.02rem}
.manifest-piller{
  display:flex;flex-wrap:wrap;justify-content:center;gap:9px;
  margin:24px 0 0;padding:0;list-style:none;
}

.stolper{display:grid;grid-template-columns:1fr;gap:36px;margin-top:52px;text-align:center}
.stolpe svg{width:46px;height:46px;margin:0 auto 16px;display:block;color:var(--oransje)}
.stolpe .mellomtittel{color:var(--oransje)}
.stolpe p{color:var(--oransje);font-size:.95rem;margin:0}

/* ---------- Todelt: foto + fargeflate ---------- */

.split{display:grid;grid-template-columns:1fr}
.split-foto img{width:100%;height:100%;object-fit:cover;min-height:300px}
.split-flate{
  background:var(--blaa);
  padding:48px var(--luft);
  display:flex;flex-direction:column;justify-content:center;align-items:center;
  text-align:center;
}
.split-flate-gul{background:var(--gul)}
.split-innhold{width:100%;max-width:460px}
.split-innhold .serif{margin-bottom:14px}

/* ---------- Tre spalter med topplinje ---------- */

.spalter{display:grid;grid-template-columns:1fr;gap:28px;margin-top:38px}
.spalte{border-top:1px solid var(--kant);padding-top:18px}
.spalte p{font-size:.96rem;color:var(--dempet)}

/* ---------- Stort oransje panel ---------- */

.oransjepanel{background:var(--oransje);border-radius:26px;padding:34px 22px;color:var(--morko)}
.oransjepanel-topp{display:grid;grid-template-columns:1fr;gap:28px;align-items:center}
.oransjepanel-tekst .serif{margin-bottom:18px}
.oransjepanel-foto img{border-radius:16px;width:100%;object-fit:cover;aspect-ratio:4/3}
.tallrad{
  display:grid;grid-template-columns:1fr;gap:24px;
  margin-top:34px;padding-top:30px;border-top:1px solid rgba(34,32,31,.24);
}
.tall .serif{font-size:2.4rem;margin-bottom:6px}
.tall p{font-size:.94rem;margin:0}

/* ---------- Priskort ---------- */

.priser{display:grid;grid-template-columns:1fr;gap:16px;margin-top:38px;align-items:start}
.priskort{background:var(--hvit);border:1px solid var(--kant);border-radius:22px;padding:28px 22px;text-align:center}
.priskort-fremhevet{background:var(--blekere);border-color:transparent}
.priskort .mellomtittel{font-size:1.1rem}
.priskort-under{font-size:.9rem;color:var(--dempet);margin:0 0 16px}
.pris{font-family:var(--serif);font-size:2.4rem;line-height:1;letter-spacing:-0.02em}
.pris span{font-family:var(--sans);font-size:.9rem;letter-spacing:0}
.priskort .knapp{width:100%;margin:20px 0 22px}
.priskort ul{list-style:none;margin:0;padding:0;text-align:left}
.priskort li{position:relative;padding:0 0 12px 26px;font-size:.94rem;line-height:1.5}
.priskort li::before{
  content:"";position:absolute;left:2px;top:.4em;width:11px;height:6px;
  border-left:1.7px solid var(--morko);border-bottom:1.7px solid var(--morko);
  transform:rotate(-45deg);
}
.priskort-inkl{font-size:.9rem;font-weight:600;text-align:left;margin:0 0 14px}

/* ---------- Sitatkort ---------- */

.sitatpanel{background:var(--blekere);border-radius:26px;padding:38px 22px}
.sitater{display:grid;grid-template-columns:1fr;gap:16px;margin-top:30px}
.sitatkort{background:var(--hvit);border-radius:18px;padding:26px 22px}
.sitatkort blockquote{margin:0 0 18px;font-family:var(--serif);font-size:1.2rem;line-height:1.36;letter-spacing:-0.01em}
.sitatkort .liten{margin:0}

/* ---------- Trekkspill ---------- */

.trekkspill{margin-top:28px}
.trekkspill details{
  background:var(--hvit);border:1px solid var(--kant);border-radius:900px;
  margin-bottom:11px;overflow:hidden;transition:border-radius .2s ease;
}
.trekkspill details[open]{border-radius:22px}
.trekkspill summary{
  list-style:none;cursor:pointer;padding:17px 52px 17px 22px;
  font-size:1rem;font-weight:500;position:relative;
}
.trekkspill summary::-webkit-details-marker{display:none}
.trekkspill summary::after{
  content:"";position:absolute;right:24px;top:23px;width:9px;height:9px;
  border-right:1.7px solid var(--morko);border-bottom:1.7px solid var(--morko);
  transform:rotate(45deg);transition:transform .2s ease;
}
.trekkspill details[open] summary::after{transform:rotate(-135deg);top:26px}
.trekkspill .svar{padding:0 22px 20px;font-size:.96rem;color:var(--dempet)}

/* ---------- Skjema ---------- */

.kontaktrutenett{display:grid;grid-template-columns:1fr;gap:32px;align-items:start}
.skjemakort{background:var(--gul);border-radius:26px;padding:28px 20px}
.skjema-rad{display:grid;grid-template-columns:1fr;gap:0}
.felt{display:block;margin-bottom:16px}
.felt > span{display:block;font-size:.88rem;font-weight:500;margin-bottom:7px}
.felt input,.felt select,.felt textarea{
  width:100%;font-family:var(--sans);font-size:1rem;color:var(--morko);
  background:var(--hvit);border:1px solid var(--kant);border-radius:14px;padding:13px 15px;
  transition:border-color .18s ease,box-shadow .18s ease;
}
.felt textarea{min-height:130px;resize:vertical}
.felt input:focus,.felt select:focus,.felt textarea:focus{
  outline:none;border-color:var(--morko);box-shadow:0 0 0 3px rgba(34,32,31,.11);
}
.samtykke{display:flex;gap:11px;align-items:flex-start;font-size:.9rem;line-height:1.5;margin-bottom:18px}
.samtykke input{width:18px;height:18px;flex:none;margin-top:3px;accent-color:var(--morko)}
.skjemakort .knapp{width:100%}
.skjema-takk{display:none;background:var(--hvit);border-radius:18px;padding:26px 22px;text-align:center}
.skjemakort.sendt form{display:none}
.skjemakort.sendt .skjema-takk{display:block}

.kontaktliste{list-style:none;margin:22px 0 0;padding:0}
.kontaktliste li{padding:14px 0;border-top:1px solid var(--kant)}
.kontaktliste strong{display:block;font-size:.86rem;font-weight:600;margin-bottom:2px}
.kontaktliste a{text-decoration:none}
.kontaktliste a:hover{text-decoration:underline}
.apningstider{list-style:none;margin:0;padding:0;font-size:.96rem}
.apningstider li{display:flex;justify-content:space-between;gap:16px;padding:7px 0}

/* ---------- Sidetopp ---------- */

.sidetopp{
  position:relative;
  margin-top:calc(-1 * var(--topp-h));
  min-height:min(58vh,470px);
  display:flex;align-items:center;text-align:center;overflow:hidden;
  background:var(--morko);
}
.sidetopp img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.sidetopp::after{content:"";position:absolute;inset:0;background:rgba(20,18,17,.56)}
.sidetopp > *{position:relative;z-index:2}
.sidetopp > img{position:absolute;z-index:0}   /* samme unntak som i heroen, se der */
.sidetopp::after{z-index:1}                    /* og samme z-index-felle, se .hero::after */
.sidetopp .ramme{padding-top:calc(var(--topp-h) + 34px);padding-bottom:38px}
.sidetopp h1{color:var(--hvit)}
.sidetopp p{color:rgba(255,255,255,.92);max-width:560px;margin:16px auto 0}
.sidetopp-enkel{min-height:auto}
.sidetopp-enkel::after{display:none}

/* ---------- Tekstsider ---------- */

.tekstside{max-width:740px}
.tekstside h2{font-family:var(--serif);font-weight:400;font-size:1.7rem;letter-spacing:-0.012em;margin:36px 0 12px}
.tekstside h2:first-of-type{margin-top:24px}
.tekstside ul{padding-left:20px;margin:0 0 18px}
.tekstside li{margin-bottom:8px}

/* ---------- Portrett ---------- */

.portrett{text-align:center;margin-top:36px}
.portrett img{width:148px;height:178px;object-fit:cover;margin:0 auto 12px;filter:grayscale(1)}
.portrett .navn{font-family:var(--serif);font-size:1.3rem;font-style:italic}

/* ---------- Footer ---------- */

footer{background:var(--morko);color:var(--gul);padding:52px 0 0}
.footer-rutenett{display:grid;grid-template-columns:1fr;gap:34px}
.footer-uttalelse{font-family:var(--serif);font-weight:400;font-size:1.45rem;line-height:1.26;letter-spacing:-0.012em;margin:0 0 18px}
.footer-merke{font-size:.86rem;font-weight:600;letter-spacing:.05em;margin:0 0 14px;color:var(--gul)}
.footer-lenker{list-style:none;margin:0;padding:0}
.footer-lenker li{margin-bottom:9px}
.footer-lenker a{font-size:1rem;color:var(--gul);text-decoration:none;transition:opacity .18s ease}
.footer-lenker a:hover{opacity:.66}
footer .pilfelt{background:transparent;border:0;border-bottom:1px solid rgba(248,249,184,.45);border-radius:0;padding:0 0 8px}
footer .pilfelt:focus-within{outline-color:var(--gul)}
footer .pilfelt input{color:var(--gul)}
footer .pilfelt input::placeholder{color:rgba(248,249,184,.62)}
footer .pilfelt button{background:var(--gul);color:var(--morko)}
footer .pilfelt button:hover{background:#fff}
footer .felt-svar{color:var(--gul)}

.footer-ordmerke{
  font-family:var(--sans);font-weight:600;
  font-size:clamp(2.4rem,11.2vw,10rem);
  line-height:.92;letter-spacing:.01em;color:var(--gul);
  margin:46px 0 18px;text-transform:uppercase;white-space:nowrap;
}
.footer-bunn{
  border-top:1px solid rgba(248,249,184,.22);
  padding:18px 0 32px;font-size:.82rem;line-height:1.7;color:rgba(248,249,184,.75);
}
.footer-bunn a{color:inherit}

/* ---------- 768 og opp ---------- */

@media (min-width:768px){
  :root{--topp-h:78px;--luft:32px}
  body{font-size:17px}

  .topp-ramme{display:flex;align-items:center;gap:28px}
  .topp-rad{flex:none;height:var(--topp-h)}
  .hamburger{display:none}
  nav{max-height:none;overflow:visible;flex:1}
  nav ul{flex-direction:row;align-items:center;gap:28px;padding:0}
  nav a{font-size:.93rem;padding:0;border-bottom:0}
  nav .meny-cta{display:none}
  .topp-handling{display:flex;gap:10px;flex:none}

  .baand{padding:92px 0}
  .baand-tett{padding:62px 0}

  .hero-ramme{padding-bottom:60px}
  .hero-kort{padding:38px 36px;max-width:530px}

  .stolper{grid-template-columns:repeat(3,1fr);gap:44px;margin-top:68px}
  .spalter{grid-template-columns:repeat(3,1fr);gap:40px;margin-top:52px}
  .priser{grid-template-columns:repeat(3,1fr);gap:20px}
  .sitater{grid-template-columns:repeat(3,1fr);gap:20px}
  .sitatpanel{padding:60px 42px}
  .tallrad{grid-template-columns:repeat(3,1fr);gap:36px}
  .skjema-rad{grid-template-columns:1fr 1fr;gap:18px}
  .kontaktrutenett{grid-template-columns:1.35fr 1fr;gap:52px}
  .footer-rutenett{grid-template-columns:1.5fr 1fr 1.25fr;gap:46px}
  .footer-uttalelse{font-size:1.95rem}

  .oransjepanel{padding:50px 44px}
  .oransjepanel-topp{grid-template-columns:1fr 1fr;gap:46px}

  .split{grid-template-columns:1fr 1fr;align-items:stretch}
  .split-foto img{min-height:520px}
  /* Skrå kant. Begge retningsvariantene står eksplisitt, så mobilregelen under 768
     ikke taper på spesifisitet mot bare den ene. */
  .split .split-foto img{clip-path:polygon(0 0,100% 0,calc(100% - 62px) 100%,0 100%)}
  .split-omvendt .split-foto{order:2}
  .split-omvendt .split-foto img{clip-path:polygon(62px 0,100% 0,100% 100%,0 100%)}
  .split-omvendt .split-flate{order:1}
  .split-flate{padding:72px 44px;text-align:left;align-items:flex-start}
  .split-innhold{max-width:440px}

  .sidetopp .ramme{padding-top:calc(var(--topp-h) + 58px);padding-bottom:66px}
  .sidetopp-enkel .ramme{padding-top:calc(var(--topp-h) + 46px);padding-bottom:46px}

  .skjemakort{padding:44px 40px}
  .tekstside h2{font-size:1.95rem}
}

@media (min-width:1024px){
  .hero-kort{padding:44px 42px}
  .oransjepanel{padding:62px 58px}
  .split-flate{padding:86px 58px}
}

/* ---------- Små hjelpeklasser (aldri inline i HTML: en inline-stil slår alle mobilreglene) ---------- */

.smal{max-width:520px}
.smal-midt{max-width:610px;margin-left:auto;margin-right:auto}
.baand-blaa{background:var(--blaa)}
.footer-brev{font-size:.95rem}
.avstand-liten{margin-top:12px}
.avstand{margin-top:22px}