/* The subpages: one per service, the overview of all services and the privacy page. Same type, colours and menu as the front
   page, no film and no scroll effects: clear, quick to read and easy to move on from. */
.underside { background: var(--kalk); }

.side-topp { position: relative; z-index: 1; background: var(--petrol-dyp); padding: calc(var(--meny-h) + clamp(1.25rem, 5vh, 3.25rem)) var(--kant) clamp(2.5rem, 6vh, 4.5rem); }
.side-topp-rutenett { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: clamp(2rem, 5vw, 5.5rem); align-items: center; }
.smuler { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1.25rem; font-size: 1rem; color: var(--tekst-lys-dempet); }
.smuler a { text-decoration: none; }
.smuler a:hover, .smuler a:focus-visible { text-decoration: underline; text-underline-offset: 0.2em; }
.smuler [aria-current] { color: var(--tekst-lys); }
.side-topp h1 { margin: 0; max-width: 19ch; font-size: clamp(2.25rem, 1.3rem + 3.4vw, 4.25rem); line-height: 1.04; letter-spacing: -0.03em; font-weight: 500; text-wrap: balance; }
.side-topp-lav h1 { max-width: none; }
.side-topp-hoy { min-height: 70svh; display: grid; align-items: center; }
.side-topp .ingress { color: var(--tekst-lys-sterk); }
.side-topp .hero-knapper { margin-top: clamp(1.25rem, 3vh, 2rem); }
.side-bilde { margin: 0; }
.side-bilde img { display: block; width: 100%; height: auto; border-radius: var(--radius); box-shadow: var(--skygge); }
.side-bilde figcaption { margin-top: 0.6rem; font-size: 1rem; color: var(--tekst-lys-dempet); }
.side-fakta { border-top: 1px solid var(--linje-lys); }
.side-fakta li { display: grid; gap: 0.2rem; padding: 1.1rem 0; border-bottom: 1px solid var(--linje-lys); color: var(--tekst-lys-dempet); }
.side-fakta b { font-size: clamp(1.375rem, 1.1rem + 1vw, 1.875rem); line-height: 1.1; letter-spacing: -0.02em; font-weight: 500; color: var(--tekst-lys); }

.side-innhold { background: var(--kalk); }
.side-rutenett { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: clamp(2rem, 6vw, 6.5rem); align-items: start; }
.tittel-3 { font-size: clamp(1.625rem, 1.3rem + 1.2vw, 2.25rem); line-height: 1.1; letter-spacing: -0.022em; font-weight: 500; }
.side-punkter { position: sticky; top: calc(var(--meny-h) + 1.5rem); }
.punkter { margin-top: 1.25rem; border-top: 1px solid var(--linje); }
.punkter li { position: relative; padding: 0.85rem 0 0.85rem 2rem; border-bottom: 1px solid var(--linje); line-height: 1.35; }
.punkter li::before { content: ""; position: absolute; left: 0; top: 1.55rem; width: 1.1rem; height: 2px; background: var(--eik-dyp); }
.side-omrade { margin-top: 1.25rem; color: var(--tekst-dempet); }
.side-deler { display: grid; gap: clamp(1.75rem, 3vw, 2.75rem); }
.del h2 { font-size: clamp(1.5rem, 1.25rem + 0.9vw, 2rem); line-height: 1.12; letter-spacing: -0.02em; }
.del p { margin-top: 0.6rem; max-width: 40rem; }
.side-smal { display: grid; gap: clamp(1.5rem, 2.6vw, 2.25rem); max-width: 46rem; margin-left: 0; }

/* the overview: every service as a card, grouped by trade */
.tgrupper { display: grid; gap: clamp(2.25rem, 4vw, 3.5rem); }
.tkort-liste { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(0.75rem, 1.2vw, 1.1rem); margin-top: 1.1rem; }
.tkort { display: block; height: 100%; padding: 1.25rem 1.35rem 1.4rem; background: var(--kalk-2); border-radius: var(--radius); text-decoration: none; transition: background-color 0.2s ease, color 0.2s ease; }
.tkort h3 { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; font-size: 1.375rem; line-height: 1.15; letter-spacing: -0.018em; }
.tkort p { margin-top: 0.5rem; color: var(--tekst-dempet); transition: color 0.2s ease; }
.tkort:hover, .tkort:focus-visible { background: var(--petrol-dyp); color: var(--tekst-lys); }
.tkort:hover p, .tkort:focus-visible p { color: var(--tekst-lys-dempet); }
.tkort:hover .pil, .tkort:focus-visible .pil { transform: translateX(4px); }

@media (max-width: 1099px) {
  .tkort-liste { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 899px), (max-aspect-ratio: 13/10) {
  .side-topp-rutenett, .side-rutenett { grid-template-columns: minmax(0, 1fr); }
  .side-punkter { position: static; }
  .side-topp h1 { max-width: none; }
}
@media (max-width: 767px) {
  .tkort-liste { grid-template-columns: minmax(0, 1fr); }
  .side-topp .knapp { flex: 1 1 auto; }
}