/* Malermester Jan O. Larsen AS – «Bilteksten».
   Skifer fra lakken på varebilen, foliegul bare som skrift og strek på skifer, resten lyst. */

:root {
  --grunning: #ffffff;
  --kalk: #f2f2ee;
  --skifer: #3e474d;
  --skifer-mork: #323a3f;
  --foliegul: #f2d93b;
  --blekk: #263035;
  --dempet: #5a6266;
  --paa-skifer: #d9dee1;
  --strek: #d9d8d2;

  --display: 'Spectral SC', Georgia, 'Times New Roman', serif;
  --serif: 'Spectral', Georgia, 'Times New Roman', serif;
  --tekst: 'Chivo', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --skrift: 'Yellowtail', 'Brush Script MT', cursive;

  --side: 32px;
  --maks: 1240px;
  --luft: 104px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--grunning);
  color: var(--blekk);
  font: 400 19px/1.6 var(--tekst);
  text-rendering: optimizeLegibility;
}
img { display: block; max-width: 100%; height: auto; }
figure { margin: 0; }
p { margin: 0 0 1em; }
h1, h2, h3 { margin: 0; font-weight: 600; }
/* Kapitéler (Spectral SC) er forbeholdt navnet – som på bilen – og stedsnavnene. Overskrifter står i vanlig Spectral. */
h2 { font: 600 42px/1.12 var(--serif); letter-spacing: -.01em; color: var(--blekk); text-wrap: balance; }
h1, h2, h3, .bil-navn, .merke-navn, .ref-liste li, .strekliste li { font-variant-numeric: lining-nums; }
.hel { white-space: nowrap; }
h3 { font: 600 24px/1.25 var(--serif); }
.ingress { font-size: 22px; line-height: 1.5; }

a {
  color: var(--blekk);
  text-decoration: underline;
  text-decoration-color: var(--skifer);
  text-decoration-thickness: 2px;
  text-underline-offset: .2em;
}
a:hover { text-decoration-thickness: 3px; }
:focus-visible { outline: 3px solid var(--skifer); outline-offset: 3px; }
.skifer :focus-visible, .bil :focus-visible, .bunn :focus-visible { outline-color: var(--foliegul); }

.sr { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.hopp {
  position: absolute; left: 8px; top: -100px; z-index: 50;
  padding: 12px 18px; background: var(--skifer); color: #fff; font-weight: 700; text-decoration: none;
}
.hopp:focus { top: 8px; }
.ramme { max-width: var(--maks); margin: 0 auto; padding: 0 var(--side); }
.ikon { width: 1.05em; height: 1.05em; flex: none; }

/* Knapper: skifer med hvit skrift, eller hvit med skiferkant. Aldri gul flate. */
.knapp {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 52px; padding: 12px 24px;
  border: 2px solid var(--skifer); border-radius: 2px;
  background: var(--skifer); color: #fff;
  font: 700 18px/1.2 var(--tekst); text-decoration: none;
  transition: background-color .15s, border-color .15s, color .15s;
}
.knapp:hover { background: var(--skifer-mork); border-color: var(--skifer-mork); color: #fff; }
.knapp-lys { background: #fff; color: var(--skifer); }
.knapp-lys:hover { background: var(--kalk); border-color: var(--skifer); color: var(--blekk); }
.knapp-hvit { background: #fff; border-color: #fff; color: var(--skifer); }
.knapp-hvit:hover { background: var(--kalk); border-color: var(--kalk); color: var(--skifer-mork); }
.skifer .knapp-hvit { color: var(--skifer); text-decoration: none; }
.skifer .knapp-hvit:hover { color: var(--skifer-mork); }

/* Forslagsbanner */
.forslag {
  margin: 0; padding: 9px var(--side);
  background: var(--kalk); border-bottom: 1px solid var(--strek);
  color: var(--dempet); font-size: 15px; line-height: 1.45; text-align: center;
}
.forslag a { display: inline-block; padding: 12px 0; margin: -12px 0; color: var(--blekk); }

/* Header med ordmerket fra den gamle logoen */
.topp { position: sticky; top: 0; z-index: 20; background: #fff; border-bottom: 1px solid var(--strek); }
.topp-inner { display: flex; align-items: center; gap: 20px; min-height: 76px; }
.merke {
  display: flex; flex-direction: column; justify-content: center; gap: 6px;
  min-height: 48px; margin-right: auto;
  color: var(--blekk); text-decoration: none; line-height: 1;
}
.merke:hover { color: var(--blekk); }
.merke-topp { font: 800 12px/1 var(--tekst); letter-spacing: .18em; text-transform: uppercase; }
.merke-navn { font: 600 22px/1 var(--display); white-space: nowrap; }
.meny { display: flex; gap: 2px; }
.meny a {
  display: flex; align-items: center; min-height: 44px; padding: 0 12px;
  color: var(--blekk); font-size: 17px; text-decoration: none;
}
.meny a:hover { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .45em; }
.topp-ring { min-height: 48px; padding: 10px 18px; font-size: 17px; white-space: nowrap; }
.kun-mobil { display: none; }
.meny-knapp { display: none; }

@media (max-width: 1099px) {
  .topp-inner { gap: 10px; position: relative; }
  .meny-knapp {
    display: inline-flex; align-items: center; gap: 10px;
    min-height: 46px; padding: 0 14px;
    border: 2px solid var(--strek); border-radius: 2px; background: #fff;
    color: var(--blekk); font: 700 16px/1 var(--tekst); cursor: pointer;
  }
  .meny-tekst { min-width: 2.6em; text-align: center; }
  .meny-knapp:hover { border-color: var(--skifer); }
  .meny-strek, .meny-strek::before, .meny-strek::after {
    display: block; width: 18px; height: 2px; background: currentColor; transition: transform .2s;
  }
  .meny-strek { position: relative; }
  .meny-strek::before, .meny-strek::after { content: ""; position: absolute; left: 0; }
  .meny-strek::before { top: -6px; }
  .meny-strek::after { top: 6px; }
  .meny-knapp[aria-expanded="true"] .meny-strek { background: transparent; }
  .meny-knapp[aria-expanded="true"] .meny-strek::before { transform: translateY(6px) rotate(45deg); }
  .meny-knapp[aria-expanded="true"] .meny-strek::after { transform: translateY(-6px) rotate(-45deg); }

  .js .meny {
    display: none; position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; gap: 0; padding: 8px var(--side) 16px;
    background: #fff; border-bottom: 1px solid var(--strek); box-shadow: 0 12px 24px rgb(38 48 53 / .08);
    max-height: calc(100dvh - 120px); overflow-y: auto; overscroll-behavior: contain;
  }
  .js .meny.apen { display: flex; }
  .js .meny a { min-height: 52px; padding: 0 4px; border-bottom: 1px solid var(--strek); font-size: 18px; }
  .js .meny a:last-child { border-bottom: 0; }
  /* Uten JavaScript ligger menyen som en rad under ordmerket */
  html:not(.js) .topp { position: static; }
  html:not(.js) .topp-inner { flex-wrap: wrap; padding-top: 10px; }
  html:not(.js) .meny { order: 3; width: 100%; flex-wrap: wrap; }
  html:not(.js) .meny-knapp { display: none; }
}

/* Hero: bilteksten på skifer ved siden av et stort foto */
.hero {
  display: grid; grid-template-columns: minmax(0, 46fr) minmax(0, 54fr);
  height: clamp(500px, 41.7vw, 640px);
  container-type: inline-size; /* cqw = herobredden uten rullefelt */
}
/* Samme rekkefølge som på siden av bilen: navnet øverst, hvitt telefonnummer, slagordet langs nedre kant. */
.bil {
  display: flex; flex-direction: column;
  /* venstrekanten følger sidens innholdskant, så bilteksten står rett under ordmerket i headeren */
  --inn: max(var(--side), calc(50cqw - 588px));
  padding: 64px 48px 60px var(--inn);
  background: var(--skifer); color: var(--foliegul);
}
.bil-h1 { display: flex; flex-direction: column; gap: 14px; color: var(--foliegul); }
.bil-tittel { margin: 0; font: 800 23px/1 var(--tekst); letter-spacing: .1em; text-transform: uppercase; }
.bil-navn {
  margin: 0; font-family: var(--display); font-weight: 600; line-height: 1; white-space: nowrap;
  font-size: clamp(34px, calc((46cqw - var(--inn, 48px) - 48px) / 8.75), 62px);
}
.bil-slagord {
  align-self: flex-start; margin: auto 0 0; padding: 40px .1em 0; white-space: nowrap;
  /* på én linje som på bilen: skaleres med panelbredden (teksten er ca. 8,6 em bred) */
  font: 400 50px/1.1 var(--skrift);
  font-size: clamp(30px, calc((46cqw - var(--inn, 48px) - 48px) / 8.7), 50px);
  transform: rotate(-3deg); transform-origin: left bottom;
}
.bil-tlf {
  display: inline-flex; align-items: center; gap: 12px; align-self: flex-start;
  min-height: 48px; margin-top: 34px; color: #fff; font: 700 30px/1 var(--tekst); text-decoration: none; letter-spacing: .01em;
}
.bil-tlf .ikon { width: .8em; height: .8em; }
.bil-tlf:hover { color: #fff; text-decoration: underline; text-decoration-color: var(--foliegul); text-decoration-thickness: 3px; text-underline-offset: .25em; }
.hero-bilde { position: relative; overflow: hidden; background: var(--kalk); }
.hero-bilde img { width: 100%; height: 100%; object-fit: cover; object-position: 60% 45%; }

.hero-under { padding: 40px 0 44px; }
.hero-under-inner {
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  gap: 20px 48px; align-items: center;
}
.hero-under .ingress { margin: 0; max-width: 34ch; }
.knapper { display: flex; flex-wrap: wrap; gap: 12px; }
.mester {
  grid-column: 1 / -1; margin: 0; padding-top: 18px;
  border-top: 1px solid var(--strek); color: var(--dempet); font-size: 16px;
}
/* Lenker i løpende tekst får 44 px trykkflate uten å flytte teksten */
.mester a, .seksjon-ring a, .delt-topp .ingress a, .om-tekst p a, .tekstside p a { display: inline-block; padding: 11px 0; margin: -11px 0; }

/* Seksjoner */
.seksjon { padding: var(--luft) 0; scroll-margin-top: 76px; }
.kalk { background: var(--kalk); }
.seksjon-topp { max-width: 760px; margin-bottom: 48px; }
.seksjon-topp h2 { margin-bottom: 18px; }
.seksjon-topp .ingress { margin: 0; color: var(--blekk); }
.delt-topp {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 24px 56px; align-items: start; margin-bottom: 48px;
}
.delt-topp .ingress { margin-top: 4px; }
.delt-topp p:last-child { margin-bottom: 0; }

/* Tjenestekort: liggende, kompakte – en innholdsfortegnelse til seksjonene under */
.kort-liste {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px;
}
.kort {
  position: relative; display: grid; grid-template-columns: minmax(0, 9fr) minmax(0, 11fr);
  min-height: 264px; background: #fff;
}
/* height 0 + min-height 100 %: bildet fyller raden uten å bestemme høyden selv – teksten og min-height gjør det */
.kort img { width: 100%; height: 0; min-height: 100%; object-fit: cover; }
.kort-tekst { display: flex; flex-direction: column; padding: 26px 28px 24px; }
.kort h3 { margin-bottom: 6px; font: 600 26px/1.15 var(--serif); }
.kort h3 a { display: flex; align-items: center; min-height: 44px; color: var(--blekk); text-decoration: none; }
.kort h3 a::after { content: ""; position: absolute; inset: 0; }
.kort h3 a:focus-visible { outline: none; }
.kort h3 a:focus-visible::after { outline: 3px solid var(--skifer); outline-offset: 3px; }
.kort p { margin: 0 0 16px; font-size: 18px; line-height: 1.5; }
.kort-mer {
  margin-top: auto; align-self: flex-start;
  color: var(--skifer); font-size: 16px; font-weight: 700;
  border-bottom: 2px solid var(--skifer); padding-bottom: 2px;
}
.kort:hover h3 a { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .18em; }
.kort:hover .kort-mer { border-bottom-width: 3px; }

/* Utvendig: tekst og fotomosaikk */
.utv { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 56px; align-items: start; }
.utv-tekst h2 { margin-bottom: 24px; }
.utv-tekst .ingress { margin-bottom: 20px; }
.seksjon-ring { margin: 28px 0 0; padding-top: 20px; border-top: 1px solid var(--strek); font-weight: 700; }
.utv-bilder {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr) minmax(0, 1fr);
  gap: 16px; height: 620px;
}
.utv-bilder figure { min-height: 0; overflow: hidden; background: var(--kalk); }
.utv-bilder img { width: 100%; height: 100%; object-fit: cover; }
.utv-hoy { grid-row: 1 / 3; }

/* Innvendig: liste med hårstreker og fire bilder */
.strekliste {
  list-style: none; margin: 0 0 48px; padding: 0;
  columns: 2; column-gap: 56px;
  border-top: 1px solid var(--strek);
}
.strekliste li {
  break-inside: avoid;
  padding: 15px 0; border-bottom: 1px solid var(--strek);
  font: 600 22px/1.3 var(--serif);
}
.inn-bilder { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.inn-bilder img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; background: #e6e6e1; }

/* Gulv */
.gulv-bilder { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 16px; }
.gulv-bilder img { width: 100%; height: 440px; object-fit: cover; background: var(--kalk); }

/* Vedlikeholdsavtale på skifer */
.skifer { background: var(--skifer); color: #fff; }
.skifer h2 { color: #fff; }
.skifer a { color: #fff; text-decoration-color: var(--foliegul); }
.vedl { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 72px; align-items: center; }
.vedl-tekst h2 { margin-bottom: 20px; }
.vedl-tekst .ingress { color: #fff; }
.valg { margin: 34px 0 30px; padding: 0; border: 0; min-width: 0; }
.valg legend { padding: 0; margin-bottom: 14px; color: var(--paa-skifer); font-size: 17px; font-weight: 700; }
.valg-rad { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; max-width: 540px; }
.valg-brikke { position: relative; display: flex; }
.valg-brikke input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.valg-brikke span {
  display: flex; align-items: center; flex: 1; min-height: 48px; padding: 0 16px;
  border: 1px solid var(--paa-skifer); border-radius: 2px; box-shadow: inset 0 0 0 1px transparent;
  color: #fff; font: 700 17px/1 var(--tekst); cursor: pointer;
  transition: border-color .15s, color .15s, box-shadow .15s;
}
.valg-brikke:hover span { border-color: #fff; }
.valg-brikke input:checked + span { border-color: var(--foliegul); box-shadow: inset 0 0 0 1px var(--foliegul); color: var(--foliegul); }
.valg-brikke input:focus-visible + span { outline: 3px solid var(--foliegul); outline-offset: 3px; }
.vedl-hjelp { margin: 14px 0 0; color: var(--paa-skifer); font-size: 16px; }
.vedl-hjelp a { display: inline-block; padding: 10px 0; margin: -10px 0; }
.vedl-kontakt { margin: 30px 0 0; padding-top: 20px; border-top: 1px solid rgb(217 222 225 / .35); }
.vedl-bilde img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }

/* Referanser: stedsnavnene som skilt, og Bergen i panorama under */
.ref-liste {
  list-style: none; margin: 0 0 48px; padding: 0;
  columns: 2; column-gap: 56px; border-top: 1px solid var(--strek);
}
.ref-liste li { break-inside: avoid; padding: 18px 0; border-bottom: 1px solid var(--strek); font: 600 30px/1.2 var(--display); }
.ref-bilde img { width: 100%; aspect-ratio: 12 / 5; object-fit: cover; background: var(--kalk); }

/* Om oss */
.om { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 72px; align-items: center; }
.om-bilde img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.om-tekst h2 { margin-bottom: 24px; }
.sitat { margin: 34px 0 0; padding: 4px 0 4px 24px; border-left: 3px solid var(--skifer); }
.sitat p { margin: 0; font: italic 400 30px/1.3 var(--serif); }

/* Kontakt: ren typografi – telefonnummeret er bildet */
.kontakt { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 72px; align-items: end; }
.kontakt-tekst h2 { margin-bottom: 20px; }
.kontakt-tekst .ingress { max-width: 30ch; }
.stort-tlf {
  display: inline-flex; align-items: center; gap: 16px; min-height: 64px;
  color: var(--skifer); font: 800 52px/1 var(--tekst); text-decoration: none; letter-spacing: .01em;
}
.stort-tlf .ikon { width: .7em; height: .7em; }
.stort-tlf:hover { text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: .2em; }
.kontakt-liste { margin: 0; border-top: 1px solid var(--strek); }
.kontakt-liste div { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--strek); }
.kontakt-liste dt { font-weight: 700; }
.kontakt-liste dd { margin: 0; overflow-wrap: anywhere; }
.kontakt-liste a { display: inline-block; padding: 10px 0; margin: -10px 0; }

/* Bunnfelt med liten biltekst */
.bunn { padding: 60px 0 44px; background: var(--skifer); color: var(--paa-skifer); font-size: 16px; }
.bunn-inner { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 48px; align-items: end; }
.bunn p { margin: 0; }
.bunn a { color: #fff; text-decoration-color: var(--foliegul); }
.bil-mini { display: flex; flex-direction: column; gap: 9px; color: var(--foliegul); }
.bil-mini .bil-tittel { font-size: 13px; }
.bil-mini .bil-navn { font-size: 38px; }
.bil-mini .bil-tlf { min-height: 44px; margin-top: 0; font-size: 18px; }
.bil-mini .bil-slagord { margin-top: 0; padding-top: 10px; font-size: 30px; }
.bunn-info { justify-self: end; display: flex; flex-direction: column; gap: 6px; text-align: right; }
@media (min-width: 600px) {
  .bunn-info p:not(.bunn-lenker) a { display: inline-block; padding: 11px 0; margin: -11px 0; }
}
.bunn-lenker { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 0 22px; }
.bunn-lenker a { display: inline-flex; align-items: center; min-height: 44px; }
.bunn-lenker span { display: inline-flex; align-items: center; gap: .3em; }

/* Personvern */
.tekstside { max-width: 760px; padding: 72px 0 96px; }
.tekstside h1 { margin-bottom: 20px; font: 600 48px/1.1 var(--serif); letter-spacing: -.01em; }
.tekstside h2 { margin: 40px 0 12px; font-size: 30px; }
.tekstside ul { padding-left: 1.2em; }
.tekstside li { margin-bottom: .6em; }
.liten { color: var(--dempet); font-size: 16px; }

/* Innglidning bare når skriptet kjører */
.vis-klar .vis { transition: opacity .7s ease, transform .7s ease; }
.vis-klar .vis:not(.inne) { opacity: 0; transform: translateY(18px); }
.skjermbilde .vis { opacity: 1 !important; transform: none !important; }

/* Nettbrett */
@media (max-width: 1199px) {
  .kort { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); }
}

@media (max-width: 1099px) {
  :root { --luft: 88px; }
  .utv, .vedl, .om, .kontakt { gap: 48px; }
  .utv-bilder { height: 560px; }
  .kort-liste { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .kort { min-height: 220px; }
  .ref-liste li { font-size: 26px; }
}

@media (max-width: 999px) {
  .hero { grid-template-columns: minmax(0, 1fr); height: auto; }
  .bil { padding: 44px var(--side) 40px; }
  .bil-navn { font-size: clamp(30px, calc((100vw - 2 * var(--side)) / 8.75), 64px); }
  .bil-slagord { font-size: min(50px, calc((100vw - 2 * var(--side)) / 8.7)); }
  .hero-bilde { aspect-ratio: 16 / 10; }
  .hero-under-inner { grid-template-columns: minmax(0, 1fr); }
  .utv { grid-template-columns: minmax(0, 1fr); }
  .utv-tekst { max-width: 680px; }
  .vedl, .om, .kontakt { grid-template-columns: minmax(0, 1fr); }
  .kontakt { align-items: start; }
  .om-bilde { order: 2; }
  .vedl-bilde img, .om-bilde img { aspect-ratio: 3 / 2; }
  .ref-liste { columns: 1; }
  .delt-topp { grid-template-columns: minmax(0, 1fr); }
  .bunn-inner { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .bunn-info { justify-self: start; text-align: left; }
  .bunn-lenker { justify-content: flex-start; }
}

@media (max-width: 767px) {
  .inn-bilder { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .gulv-bilder { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .gulv-bilder img { height: auto; aspect-ratio: 3 / 2; }
  .strekliste { columns: 1; }
  .utv-bilder { height: auto; grid-template-rows: none; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .utv-hoy { grid-row: auto; grid-column: 1 / -1; }
  .utv-hoy img { aspect-ratio: 4 / 3; height: auto; object-position: 50% 62%; }
  .utv-bilder figure:not(.utv-hoy) img { aspect-ratio: 1 / 1; height: auto; }
}

@media (max-width: 599px) {
  :root { --side: 16px; --luft: 64px; }
  body { font-size: 18px; }
  h2 { font-size: 30px; }
  h3 { font-size: 21px; }
  .ingress { font-size: 20px; }
  .knapp { font-size: 17px; }

  .forslag { font-size: 14px; }
  .topp-inner { min-height: 66px; gap: 8px; }
  .merke-topp { font-size: 11px; letter-spacing: .16em; }
  .merke-navn { font-size: 19px; }
  .kun-pc { display: none; }
  .kun-mobil { display: inline; }
  .topp-ring { min-height: 46px; padding: 10px 14px; gap: 8px; font-size: 16px; }
  .seksjon { scroll-margin-top: 66px; }

  .bil { padding: 28px var(--side) 34px; }
  .bil-h1 { gap: 10px; }
  .bil-tittel { font-size: 16px; }
  .bil-navn { font-size: min(40px, calc((100vw - 2 * var(--side)) / 8.75)); }
  .bil-tlf { margin-top: 20px; font-size: 24px; }
  .bil-slagord { padding-top: 20px; font-size: min(34px, calc((100vw - 2 * var(--side)) / 8.7)); }
  .hero-bilde { aspect-ratio: 4 / 3; }
  .hero-under { padding: 28px 0 36px; }
  .knapper .knapp { flex: 1 1 100%; }

  .seksjon-topp, .delt-topp { margin-bottom: 32px; }
  .kort { grid-template-columns: 120px minmax(0, 1fr); min-height: 0; }
  .kort-tekst { padding: 12px 16px 16px; }
  .kort h3 { margin-bottom: 2px; font-size: 21px; }
  .kort p { margin-bottom: 10px; font-size: 16px; }
  .kort-mer { font-size: 15px; }
  .strekliste li { font-size: 20px; padding: 13px 0; }
  .ref-liste li { font-size: 22px; padding: 15px 0; }
  .bil-mini .bil-navn { font-size: min(38px, calc((100vw - 2 * var(--side)) / 8.75)); }
  .sitat p { font-size: 25px; }
  .stort-tlf { font-size: 40px; }
  .kontakt-liste div { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .valg-rad { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bunn .skille { display: none; }
  .bunn .orgnr { display: block; }
  .bunn .hel { display: table; padding: 10px 0; margin: -8px 0 -10px; }

  .bunn { padding: 48px 0 36px; }
  .vedl-bilde img, .ref-bilde img, .om-bilde img { aspect-ratio: 4 / 3; }
  .tekstside { padding: 48px 0 64px; }
  .tekstside h1 { font-size: 38px; }
  .tekstside h2 { font-size: 26px; }
}

@media (max-width: 419px) {
  .meny-strek { display: none; }
  .meny-knapp { padding: 0 12px; }
}

/* Små telefoner (360–375 px): headeren må fortsatt få plass uten å spise sidemargen */
@media (max-width: 379px) {
  .merke-topp { font-size: 10px; }
  .merke-navn { font-size: 17px; }
  .topp-ring { padding: 10px 12px; }
  .meny-knapp { padding: 0 10px; }
  .kort { grid-template-columns: 104px minmax(0, 1fr); }
  .ref-liste li { font-size: 21px; }
}

@media (max-width: 339px) {
  .merke-navn { font-size: 16px; }
  .topp-ring .ikon { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .vis-klar .vis { transition: none; }
  .vis-klar .vis:not(.inne) { opacity: 1; transform: none; }
  .knapp, .valg-brikke span, .meny-strek, .meny-strek::before, .meny-strek::after { transition: none; }
}

@media print {
  .topp, .forslag, .hopp { position: static; }
  .vis { opacity: 1 !important; transform: none !important; }
}