/* Frekvens Digital: the service pages, the privacy page and the 404 page (Sverre 02.11.2026: «opprette alle
   tjenestesidene»). No film here: subpages get the front page's style, an overview and easy navigation, not animations
   (nettsidestandard, Janis 18.10). Built on tokens.css, main.css and the shared part of sider.css;
   production/bygg/sider.py writes the pages from production/bygg/tjenester.json. */

/* the top of every page: where you are, the title and the two ways to get in touch */
.u-topp { background: var(--kalk); padding: calc(var(--meny-h) + clamp(2rem, 1.5rem + 3vw, 4.5rem)) var(--marg) clamp(3rem, 2.4rem + 3vw, 5.5rem); }
.u-sti {
  display: flex; flex-wrap: wrap; gap: 0.35rem 0.5rem; margin: 0 0 clamp(1.5rem, 1.2rem + 1vw, 2.25rem); padding: 0; list-style: none;
  font: 500 0.7rem/1.4 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--tekst-dempet);
}
.u-sti li { display: inline-flex; gap: 0.5rem; }
.u-sti li + li::before { content: "/"; color: var(--linje-sterk); }
.u-sti a { color: inherit; text-decoration: none; }
.u-sti a:hover { color: var(--tekst); }
.u-topp h1 {
  max-width: 15em; font-size: clamp(2.5rem, 1.4rem + 4.2vw, 5.2rem); font-weight: var(--vekt-tittel);
  letter-spacing: var(--sporing-tittel); line-height: 1.02; text-wrap: balance;
  overflow-wrap: anywhere; -webkit-hyphens: auto; hyphens: auto;   /* «Personvernerklæring» on a 320 px phone */
}
.u-topp .ingress { margin-top: clamp(1.25rem, 1rem + 1vw, 1.75rem); max-width: 40rem; }
.u-knapper { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: clamp(1.75rem, 1.4rem + 1.4vw, 2.5rem); }

/* what we do, point by point: a fine line over each, the orange start of the line marks it */
.u-gjor { background: var(--papir); }
.u-liste { display: grid; gap: 0 clamp(1.5rem, 1rem + 2vw, 3rem); margin: 0; padding: 0; list-style: none; }
@media (min-width: 700px) { .u-liste { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .u-liste { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.u-liste > li { position: relative; padding: 1.4rem 0 1.9rem; border-top: 1px solid var(--linje); }
.u-liste > li::before { content: ""; position: absolute; left: 0; top: -1px; width: 2.5rem; height: 2px; background: var(--signal); }
.u-liste h3 { font-size: 1.2rem; font-weight: 500; letter-spacing: -0.015em; line-height: 1.25; }
.u-liste p { margin-top: 0.5rem; font-size: var(--str-tekst); line-height: 1.55; color: var(--tekst-dempet); }

/* how we work: the steps in a row on the night ground */
.u-slik { background: var(--natt); color: var(--tekst-lys); }
.u-slik .merke { color: var(--signal-lys); }
.u-slik .ingress { color: var(--tekst-lys-dempet); }
.u-steg { display: grid; gap: 2rem 2.5rem; margin: 0; padding: 0; list-style: none; counter-reset: steg; }
@media (min-width: 800px) { .u-steg { grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); } }
.u-steg li { counter-increment: steg; padding-top: 1.2rem; border-top: 1px solid var(--natt-linje); }
.u-steg li::before { content: counter(steg, decimal-leading-zero); display: block; margin-bottom: 0.9rem; font: 500 0.78rem/1 var(--mono); letter-spacing: 0.08em; color: var(--signal-lys); }
.u-steg h3 { font-size: 1.2rem; font-weight: 500; letter-spacing: -0.015em; line-height: 1.25; }
.u-steg p { margin-top: 0.5rem; font-size: var(--str-tekst); line-height: 1.55; color: var(--tekst-lys-dempet); }

/* who it suits and the two ways to pay: with commission in the partnership, or a price agreed first */
.u-betal { background: var(--kalk); }
.u-to { display: grid; gap: 1.25rem; }
@media (min-width: 800px) { .u-to { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.u-boks { padding: clamp(1.5rem, 1.2rem + 1.2vw, 2.25rem); border-radius: 18px; background: var(--hvit); border: 1px solid var(--linje); }
.u-boks-mork { background: var(--natt); color: var(--tekst-lys); border-color: var(--natt); }
.u-boks-merke { font: 500 0.7rem/1.3 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--signal-tekst); }
.u-boks-mork .u-boks-merke { color: var(--signal-lys); }
.u-boks h3 { margin-top: 0.8rem; font-size: clamp(1.35rem, 1.15rem + 0.6vw, 1.7rem); font-weight: 400; letter-spacing: -0.02em; line-height: 1.2; }
.u-boks p { margin-top: 0.7rem; font-size: var(--str-tekst); line-height: 1.55; color: var(--tekst-dempet); }
.u-boks-mork p { color: var(--tekst-lys-dempet); }

/* the other services: cards that lead on */
.u-relatert { background: var(--papir); }
.u-lenker { display: grid; gap: 1rem; margin: 0; padding: 0; list-style: none; }
@media (min-width: 700px) { .u-lenker { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* as many in a row as the list holds (--k, set by sider.py), so no card is left alone on a row */
@media (min-width: 1100px) { .u-lenker { grid-template-columns: repeat(var(--k, 3), minmax(0, 1fr)); } }
.u-alle { margin-top: 1.75rem; }
.u-lenke {
  display: flex; flex-direction: column; gap: 0.5rem; height: 100%; padding: 1.4rem 1.5rem 1.3rem; border-radius: 16px;
  background: var(--hvit); border: 1px solid var(--linje); color: inherit; text-decoration: none;
  transition: border-color 0.2s var(--mykt), transform 0.2s var(--mykt);
}
.u-lenke:hover { border-color: var(--linje-sterk); transform: translateY(-2px); }
.u-lenke:focus-visible { outline: 2px solid var(--fokus); outline-offset: 3px; }
.u-lenke-gruppe { font: 500 0.68rem/1.3 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--tekst-dempet); }
.u-lenke-navn { font-size: 1.3rem; font-weight: 400; letter-spacing: -0.02em; line-height: 1.2; }
.u-lenke-tekst { font-size: var(--str-tekst); line-height: 1.5; color: var(--tekst-dempet); }
.u-lenke-pil { display: inline-flex; align-items: center; gap: 0.4rem; margin-top: auto; padding-top: 0.6rem; font-size: 0.95rem; font-weight: 500; }
.u-lenke-pil svg { width: 16px; height: 16px; transition: transform 0.2s var(--mykt); }
.u-lenke:hover .u-lenke-pil svg { transform: translateX(3px); }

/* the overview: one ground per group */
.u-gruppe-1 { background: var(--papir); }
.u-gruppe-2 { background: var(--sand); }

/* the last word: book a meeting or call */
.u-cta { background: var(--natt); color: var(--tekst-lys); }
.u-cta-indre { display: grid; gap: 1.5rem 3rem; align-items: end; }
@media (min-width: 900px) { .u-cta-indre { grid-template-columns: minmax(0, 1.4fr) auto; } }
.u-cta .ingress { margin-top: 1rem; color: var(--tekst-lys-dempet); }
.u-cta .u-knapper { margin-top: 0; }
.u-cta .knapp { background: var(--kalk); color: var(--tekst); border-color: var(--kalk); }
.u-cta .knapp:hover { background: var(--hvit); border-color: var(--hvit); }
.u-cta .knapp-omriss { background: transparent; color: var(--tekst-lys); border-color: rgba(244, 242, 238, 0.35); }
.u-cta .knapp-omriss:hover { background: var(--tekst-lys); color: var(--tekst); border-color: var(--tekst-lys); }

/* running text: the privacy page */
.u-tekst { background: var(--papir); }
.u-tekst .indre { max-width: 46rem; }
.u-tekst h2 { margin-top: 2.5rem; font-size: clamp(1.4rem, 1.2rem + 0.6vw, 1.75rem); font-weight: 400; letter-spacing: -0.02em; line-height: 1.25; }
.u-tekst h2:first-child { margin-top: 0; }
.u-tekst p, .u-tekst li { margin-top: 0.8rem; font-size: var(--str-tekst); line-height: 1.6; color: var(--tekst-dempet); }
.u-tekst ul { padding-left: 1.2rem; }
.u-tekst a { color: var(--tekst); }

/* the questions on a subpage stand finished: there is no scroll script here */
.underside .sp-liste details { opacity: 1; transform: none; }
.lenke-pil svg { flex: none; width: 16px; height: 16px; }
/* no booking bar on the subpages, so the footer needs no room for it */
@media (max-width: 899px) { .underside .bunn { padding-bottom: clamp(3rem, 2rem + 3vw, 5rem); } }