/* Fornebu Fysikalske v2 — typografi som design
   Halston (store caps, hairlines, tall) × fluid.glass (ro) × klinikk-varme */

:root {
  --bunn: #f4f7f9;
  --bunn-lys: #ffffff;
  --hvit: #ffffff;
  --skog: #16324a;
  --marine: #122638;
  --sjo: #286898;
  --sjo-mork: #1f5079;
  --tekst: #16324a;
  --dempet: #5b7186;
  --strek: rgba(22, 50, 74, 0.2);
  --strek-svak: rgba(22, 50, 74, 0.1);
  --pro-marg: clamp(18px, 2.5vw, 34px);
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  background: var(--bunn);
  color: var(--tekst);
  font-family: "Figtree", sans-serif;
  font-size: 16.5px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; }

.display {
  font-family: "Hanken Grotesk", sans-serif;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.08;
  color: var(--tekst);
}
.serif-myk { font-family: "Lora", serif; font-style: italic; font-weight: 500; text-transform: none; letter-spacing: 0; }
.caps-liten {
  font-size: 11.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--dempet);
}
.inner { max-width: 1320px; margin: 0 auto; padding-left: clamp(20px, 3.5vw, 40px); padding-right: clamp(20px, 3.5vw, 40px); }
.linje { border: 0; border-top: 1px solid var(--strek); }

/* ---------- Nav ---------- */
nav {
  position: sticky;
  top: 0;
  z-index: 60;
  background: rgba(244, 247, 249, 0.93);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--strek-svak);
}
.nav-inner {
  max-width: 1320px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 17px clamp(20px, 3.5vw, 40px);
  gap: 18px;
}
.wordmark {
  font-family: "Hanken Grotesk", sans-serif;
  font-weight: 700;
  font-size: 16.5px;
  letter-spacing: 0.01em;
  text-decoration: none;
  color: var(--tekst);
}
.wordmark span { color: var(--sjo); }
.nav-links { display: flex; gap: clamp(16px, 2.4vw, 32px); align-items: center; }
.nav-links a:not(.knapp) {
  text-decoration: none;
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--tekst);
  opacity: 0.72;
}
.nav-links a:not(.knapp):hover { opacity: 1; }
.nav-links a.aktiv { opacity: 1; color: var(--sjo-mork); }
/* Aktiv CTA-knapp: fylt variant — uten dette blir hover mørkeblå tekst på mørkeblå flate */
.nav-links a.knapp.aktiv { background: var(--skog); border-color: var(--skog); color: var(--bunn-lys); }
.nav-links a.knapp.aktiv:hover { background: var(--sjo-mork); border-color: var(--sjo-mork); color: var(--hvit); }
.knapp {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: transparent;
  color: var(--tekst);
  text-decoration: none;
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 700;
  padding: 13px 24px;
  border: 1px solid var(--tekst);
  transition: background 0.25s, color 0.25s, border-color 0.25s;
  cursor: pointer;
  font-family: "Figtree", sans-serif;
  white-space: nowrap;
}
.knapp::after { content: "+"; font-size: 15px; line-height: 0; }
.knapp:hover { background: var(--tekst); color: var(--bunn); }
.knapp-fylt { background: var(--skog); border-color: var(--skog); color: var(--bunn-lys); }
.knapp-fylt:hover { background: var(--sjo-mork); border-color: var(--sjo-mork); color: var(--hvit); }
.knapp-lys { border-color: rgba(244, 247, 249, 0.6); color: var(--bunn-lys); }
.knapp-lys:hover { background: var(--bunn-lys); color: var(--skog); }
@media (max-width: 900px) { .nav-links a:not(.knapp) { display: none; } }

/* ---------- Burger + mobilmeny ---------- */
.burger { display: none; background: none; border: none; cursor: pointer; width: 40px; height: 40px; position: relative; z-index: 80; }
.burger span { display: block; width: 22px; height: 2px; background: var(--tekst); margin: 5px auto; transition: transform 0.3s, opacity 0.3s, background 0.3s; }
body.meny-aapen .burger span { background: var(--bunn-lys); }
body.meny-aapen .burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
body.meny-aapen .burger span:nth-child(2) { opacity: 0; }
body.meny-aapen .burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.mobilmeny {
  position: fixed;
  inset: 0;
  z-index: 70;
  background: rgba(22, 50, 74, 0.98);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 24px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s ease;
}
body.meny-aapen .mobilmeny { opacity: 1; pointer-events: auto; }
.mobilmeny a {
  font-family: "Hanken Grotesk", sans-serif;
  font-weight: 700;
  font-size: 24px;
  letter-spacing: 0.02em;
  color: var(--bunn-lys);
  text-decoration: none;
}
.mobilmeny a:hover { color: #9cc3e8; }
body.meny-aapen { overflow: hidden; }
@media (max-width: 900px) { .burger { display: block; } }

/* ---------- Typo-hero ---------- */
.typo-hero { padding: clamp(44px, 7vh, 84px) 0 0; }
.typo-hero h1 {
  font-size: clamp(34px, 4.6vw, 62px);
  max-width: 1180px;
}
.typo-hero h1 .serif-myk { color: var(--sjo-mork); font-weight: 500; }
.typo-hero .hero-linjer {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(20px, 4vw, 56px);
  margin-top: clamp(28px, 5vh, 48px);
  padding-top: 22px;
  border-top: 1px solid var(--strek);
  padding-bottom: clamp(30px, 5vh, 52px);
}
@media (max-width: 820px) { .typo-hero .hero-linjer { grid-template-columns: 1fr; } }
.hero-liste { list-style: none; }
.hero-liste li {
  font-size: 13px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--tekst);
  padding: 3px 0;
}
.hero-hoyre {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 20px;
  flex-wrap: wrap;
}
.hero-hoyre .fakta .caps-liten { display: block; margin-bottom: 6px; }
.hero-hoyre .fakta strong { font-size: 17px; font-weight: 700; color: var(--tekst); }

/* ---------- Fullbilde ---------- */
.fullbilde { position: relative; height: clamp(360px, 68vh, 660px); overflow: hidden; }
.fullbilde img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- Kroppsdel-ticker ---------- */
.ticker {
  border-top: 1px solid var(--strek);
  border-bottom: 1px solid var(--strek);
  overflow: hidden;
  padding: 15px 0;
  background: var(--bunn);
}
.ticker-spor {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  max-width: 1320px;
  margin: 0 auto;
}
.ticker span {
  font-size: 11.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--dempet);
  padding: 0 18px;
  white-space: nowrap;
}
.ticker span::after { content: "·"; color: var(--sjo); margin-left: 36px; }

/* ---------- Seksjoner ---------- */
.blokk { padding: clamp(68px, 11vh, 124px) 0; }
/* Seksjoner som bare trenger luft i bunn (var inline-style i HTML til v=30) */
.blokk-bunn { padding-bottom: clamp(68px, 11vh, 124px); }
.blokk-hode { margin-bottom: clamp(34px, 6vh, 60px); }
.blokk-hode .caps-liten { display: block; margin-bottom: 16px; color: var(--sjo-mork); }
.blokk-hode h2 { font-size: clamp(26px, 3.2vw, 42px); }
.blokk-hode h2 .serif-myk { color: var(--sjo-mork); }
/* Ingress i blokk-hode (bup-siden) var ustylet — sto limt til h2 i full tekstfarge */
.blokk-hode .ingress { max-width: 620px; font-size: 17px; color: var(--dempet); margin-top: 14px; }

/* ---------- Behandlinger (redaksjonelle rader) ---------- */
/* Kundeønske (Helga, 18.08, punkt 8a): 01/02/03-nummereringen er fjernet fra
   tjenestekortene, så .nr-sporet er tatt ut av griden. .beh-rad .nr-regelen
   under står igjen ubrukt med vilje — .beh-detalj .nr (FAQ-blokkene og qa.html)
   bruker samme typografi og skal fortsatt virke. */
.beh-rad {
  display: grid;
  grid-template-columns: 1fr 1.1fr 300px;
  gap: clamp(18px, 3vw, 44px);
  align-items: center;
  padding: clamp(24px, 4vh, 38px) 0;
  border-top: 1px solid var(--strek);
  text-decoration: none;
  transition: background 0.25s;
}
.beh-rad:last-of-type { border-bottom: 1px solid var(--strek); }
.beh-rad:hover { background: var(--bunn-lys); }
.beh-rad .nr {
  font-family: "Hanken Grotesk", sans-serif;
  font-weight: 300;
  font-size: clamp(26px, 3vw, 40px);
  color: var(--dempet);
}
.beh-rad h3 {
  font-family: "Hanken Grotesk", sans-serif;
  font-weight: 700;
  font-size: clamp(19px, 2.2vw, 27px);
  letter-spacing: -0.01em;
  color: var(--tekst);
}
.beh-rad p { font-size: 15px; color: var(--dempet); max-width: 420px; }
.beh-rad .bilde { overflow: hidden; height: 120px; }
/* Kundeønske (Helga, 17.08): bildene skal ligge i ro på hover */
.beh-rad .bilde img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 960px) {
  /* Mobil (20.08): raden så død ut med bare tittel + strek. Beskrivelsen er
     kort — vis den, og legg på samme pil som .raad-rad så raden leses som
     klikkbar. Bildet forblir skjult (ville dominert i én kolonne). */
  .beh-rad { grid-template-columns: 1fr auto; gap: 6px 14px; }
  .beh-rad h3 { grid-column: 1; grid-row: 1; }
  .beh-rad p { grid-column: 1 / -1; grid-row: 2; margin: 0; }
  .beh-rad .bilde { display: none; }
  .beh-rad::after { content: "\2192"; grid-column: 2; grid-row: 1; font-size: 22px; color: var(--sjo-mork); align-self: center; }
}

/* ---------- Halston-tall ---------- */
.tall-rad {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--strek);
  border-bottom: 1px solid var(--strek);
}
@media (max-width: 880px) { .tall-rad { grid-template-columns: 1fr 1fr; } }
.tall-celle {
  display: flex;
  align-items: baseline;
  gap: 16px;
  padding: clamp(26px, 4vh, 40px) clamp(14px, 2vw, 28px);
  border-left: 1px solid var(--strek);
}
.tall-celle:first-child { border-left: none; }
@media (max-width: 880px) { .tall-celle:nth-child(3) { border-left: none; } .tall-celle:nth-child(n+3) { border-top: 1px solid var(--strek); } }
.tall-celle .tall {
  font-family: "Hanken Grotesk", sans-serif;
  font-weight: 300;
  font-size: clamp(36px, 4.2vw, 62px);
  line-height: 1;
  color: var(--tekst);
}
.tall-celle .ord {
  font-family: "Figtree", sans-serif;
  font-size: clamp(14px, 1.2vw, 16.5px);
  color: var(--dempet);
  line-height: 1.35;
}

/* MIDLERTIDIG — fjernes når Helga har avklart timelengden (hennes B-liste,
   punkt 9: «1 time» kontra 50 minutter). Markeringen er til henne, så hun ser
   hvor vi venter på svar. */
.venter-merke {
  display: block;
  margin-top: 7px;
  font-family: "Hanken Grotesk", sans-serif;
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sjo);
  border-left: 2px solid var(--sjo);
  padding-left: 9px;
  line-height: 1.4;
}
/* Smal mobil: tall over ord. Side-om-side sprenger cellen fordi lange ord
   («kartleggingssamtale») ikke kan brytes — ga horisontal scroll på 390px. */
@media (max-width: 520px) {
  .tall-celle {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    min-width: 0;
    padding: clamp(22px, 3.4vh, 32px) 12px;
  }
  .tall-celle .tall { font-size: 34px; }
  .tall-celle .ord { font-size: 14.5px; min-width: 0; }
}

/* ---------- Skogblokk (om/team) ---------- */
.skogblokk { background: var(--skog); color: var(--bunn-lys); position: relative; }
.skogblokk .inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(30px, 5vw, 88px);
  align-items: center;
  padding-top: clamp(68px, 11vh, 124px);
  padding-bottom: clamp(68px, 11vh, 124px);
}
@media (max-width: 900px) { .skogblokk .inner { grid-template-columns: 1fr; } }
.skogblokk img {
  width: 100%;
  aspect-ratio: 4/4.2;
  object-fit: cover;
  border-radius: 6px;
}
@media (max-width: 900px) { .skogblokk img { aspect-ratio: 4/3; } }
.skogblokk .caps-liten { color: #9cc3e8; display: block; margin-bottom: 16px; }
.skogblokk h2 {
  font-family: "Hanken Grotesk", sans-serif;
  font-weight: 700;
  font-size: clamp(26px, 3.2vw, 40px);
  line-height: 1.12;
  color: var(--bunn-lys);
  margin-bottom: 20px;
}
.skogblokk h2 .serif-myk { color: #9cc3e8; text-transform: none; }
.skogblokk p { color: rgba(244, 247, 249, 0.82); margin-bottom: 16px; }
.skogblokk .sitat {
  font-family: "Figtree", sans-serif;
  font-weight: 500;
  font-size: clamp(17px, 1.8vw, 21px);
  color: var(--bunn-lys);
  border-left: 2px solid var(--sjo);
  padding-left: 18px;
  margin: 26px 0;
}
.team-liste { list-style: none; margin: 22px 0 30px; }
.team-liste li {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  padding: 12px 0;
  border-bottom: 1px solid rgba(244, 247, 249, 0.18);
  flex-wrap: wrap;
}
.team-liste strong { font-weight: 700; color: var(--bunn-lys); }
.team-liste span { color: rgba(244, 247, 249, 0.6); font-size: 14.5px; }

/* ---------- Prosess (hairline-kolonner) ---------- */
.prosess-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}
@media (max-width: 880px) { .prosess-grid { grid-template-columns: 1fr; } }
.pro-kol {
  border-left: 1px solid var(--strek);
  padding: clamp(6px, 1vh, 10px) var(--pro-marg) 8px;
}
.pro-kol:first-child { border-left: none; padding-left: 0; }
@media (max-width: 880px) {
  .prosess-grid { margin-left: 0; }
  .pro-kol, .pro-kol:first-child { border-left: none; padding-left: 0; border-top: 1px solid var(--strek); padding-top: 20px; margin-top: 20px; }
  .pro-kol:first-child { border-top: none; margin-top: 0; padding-top: 6px; }
}
.pro-kol .caps-liten { display: block; margin-bottom: 14px; color: var(--sjo-mork); }
.pro-kol h3 {
  font-family: "Hanken Grotesk", sans-serif;
  font-weight: 700;
  font-size: 19px;
  margin-bottom: 10px;
  color: var(--tekst);
}
.pro-kol p { font-size: 15px; color: var(--dempet); }

/* ---------- Råd (redaksjonelle lenker) ---------- */
.raad-rad {
  display: grid;
  grid-template-columns: 150px 1fr auto;
  gap: clamp(18px, 3vw, 44px);
  align-items: baseline;
  padding: clamp(20px, 3.5vh, 32px) 0;
  border-top: 1px solid var(--strek);
  text-decoration: none;
}
.raad-rad:last-of-type { border-bottom: 1px solid var(--strek); }
.raad-rad:hover h3 { color: var(--sjo-mork); }
.raad-rad .dato { font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; font-weight: 700; color: var(--dempet); }
.raad-rad h3 {
  font-family: "Hanken Grotesk", sans-serif;
  font-weight: 700;
  font-size: clamp(17px, 2vw, 22px);
  color: var(--tekst);
  transition: color 0.2s;
  line-height: 1.25;
}
.raad-rad .pil { font-size: 22px; color: var(--sjo-mork); }
@media (max-width: 720px) { .raad-rad { grid-template-columns: 1fr auto; } .raad-rad .dato { grid-column: 1 / -1; } }

/* ---------- CTA ---------- */
.cta { padding: clamp(72px, 12vh, 140px) 0; text-align: left; }
.cta h2 {
  font-family: "Hanken Grotesk", sans-serif;
  font-weight: 700;
  font-size: clamp(30px, 4vw, 52px);
  line-height: 1.08;
  color: var(--tekst);
}
.cta h2 .serif-myk { color: var(--sjo-mork); text-transform: none; }
.cta .cta-linje {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 22px;
  flex-wrap: wrap;
  margin-top: clamp(26px, 4vh, 40px);
  padding-top: 22px;
  border-top: 1px solid var(--strek);
}
.cta .cta-linje p { color: var(--dempet); max-width: 460px; }

/* ---------- Skjema + info ---------- */
.kontakt-kolonner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(30px, 5vw, 80px);
  align-items: start;
}
@media (max-width: 900px) { .kontakt-kolonner { grid-template-columns: 1fr; } }
.info-punkt { border-top: 1px solid var(--strek); padding: 16px 0; }
.info-punkt .caps-liten { display: block; margin-bottom: 4px; color: var(--sjo-mork); }
.info-punkt a { text-decoration: none; font-weight: 700; font-size: 18px; }
.info-punkt .tider-rad { display: flex; justify-content: space-between; gap: 12px; padding: 5px 0; font-size: 15px; }
.info-punkt .tider-rad span:last-child { font-weight: 700; }
form label { display: block; font-size: 11.5px; letter-spacing: 0.18em; text-transform: uppercase; font-weight: 700; color: var(--dempet); margin: 20px 0 7px; }
form input, form select, form textarea {
  width: 100%;
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--strek);
  color: var(--tekst);
  font-family: "Figtree", sans-serif;
  font-size: 16.5px;
  padding: 10px 2px;
  transition: border-color 0.2s;
}
form input:focus, form select:focus, form textarea:focus { outline: none; border-bottom-color: var(--sjo-mork); }
form textarea { resize: vertical; min-height: 90px; }
form .knapp { margin-top: 30px; }

/* ---------- Undersider ---------- */
.side-hode { padding: clamp(44px, 7vh, 80px) 0 clamp(26px, 4vh, 44px); }
.side-hode h1 { font-size: clamp(34px, 4.6vw, 62px); max-width: 900px; }
.side-hode h1 .serif-myk { color: var(--sjo-mork); }
.side-hode .ingress { max-width: 560px; font-size: 18px; color: var(--dempet); margin-top: 20px; }

.pris-gruppe { margin-bottom: clamp(36px, 6vh, 56px); max-width: 720px; }
.pris-gruppe h2 { font-family: "Hanken Grotesk", sans-serif; font-weight: 700; font-size: 21px; margin-bottom: 12px; color: var(--tekst); }
.pris-rad { display: flex; align-items: baseline; gap: 12px; padding: 13px 0; border-top: 1px solid var(--strek-svak); }
.pris-rad .navn { font-weight: 600; }
.pris-rad .navn small { display: block; font-weight: 400; font-size: 13.5px; color: var(--dempet); }
.pris-rad .prikker { flex: 1; border-bottom: 1px dashed rgba(91, 113, 134, 0.4); transform: translateY(-4px); }
.pris-rad .pris { font-family: "Hanken Grotesk", sans-serif; font-weight: 700; white-space: nowrap; font-size: 17px; }

.artikkel {
  display: grid;
  grid-template-columns: 90px minmax(0, 680px);
  gap: clamp(18px, 3vw, 44px);
  align-items: start;
  padding-bottom: clamp(48px, 8vh, 80px);
}
.artikkel .nr {
  font-family: "Hanken Grotesk", sans-serif;
  font-weight: 300;
  font-size: clamp(26px, 3vw, 40px);
  color: var(--dempet);
  line-height: 1;
}
.artikkel .art-meta-linje { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 18px; margin-bottom: 12px; }
.artikkel .dato { font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; font-weight: 700; color: var(--sjo-mork); }
.artikkel .skribent { font-size: 13.5px; color: var(--dempet); }
.artikkel h2 { font-family: "Hanken Grotesk", sans-serif; font-weight: 700; font-size: clamp(24px, 3vw, 34px); margin: 0 0 18px; line-height: 1.15; color: var(--tekst); }
.artikkel .lead { font-size: 18px; color: var(--dempet); }
.artikkel p { margin-bottom: 16px; }
.artikkel .utdrag {
  font-family: "Hanken Grotesk", sans-serif;
  font-weight: 700;
  font-size: clamp(19px, 2.2vw, 26px);
  line-height: 1.35;
  color: var(--sjo-mork);
  border-left: 2px solid var(--sjo-mork);
  padding-left: clamp(16px, 2vw, 26px);
  margin: 28px 0;
}
.artikkel + .artikkel { border-top: 1px solid var(--strek); padding-top: clamp(40px, 6vh, 60px); }
@media (max-width: 720px) {
  .artikkel { grid-template-columns: 1fr; }
  .artikkel .nr { font-size: 22px; }
}

/* Nummererte innholdsrader — behandlinger.html og om.html */
.beh-detalj {
  display: grid;
  grid-template-columns: 90px 1fr;
  gap: clamp(18px, 3vw, 44px);
  padding: clamp(34px, 5vh, 56px) 0;
  border-top: 1px solid var(--strek);
  align-items: start;
}
.beh-detalj:last-of-type { border-bottom: 1px solid var(--strek); }
.beh-detalj .nr {
  font-family: "Hanken Grotesk", sans-serif;
  font-weight: 300;
  font-size: clamp(26px, 3vw, 40px);
  color: var(--dempet);
  line-height: 1;
}
.beh-detalj h2 {
  font-family: "Hanken Grotesk", sans-serif;
  font-weight: 700;
  font-size: clamp(21px, 2.6vw, 30px);
  letter-spacing: -0.01em;
  color: var(--tekst);
  margin-bottom: 12px;
}
.beh-detalj .caps-liten { display: block; margin-bottom: 10px; color: var(--sjo-mork); }
.beh-detalj p { max-width: 620px; color: var(--dempet); margin-bottom: 14px; }
.beh-detalj .plager {
  list-style: none;
  columns: 2;
  column-gap: 40px;
  max-width: 680px;
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--strek-svak);
}
/* Punktene sto i 12 px versaler med sperring: kontrast 4,38 mot kravet 4,5,
   og versaler er tyngst å lese. Dette er listen folk skal kjenne seg igjen i,
   så den settes som vanlig tekst. Gjelder alle fem sidene som bruker .plager. */
.beh-detalj .plager li {
  font-size: 15.5px;
  line-height: 1.5;
  color: var(--tekst);
  padding: 7px 0 7px 22px;
  position: relative;
  break-inside: avoid;
}
.beh-detalj .plager li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 18px;
  width: 8px;
  height: 2px;
  background: var(--sjo);
}
.beh-detalj .bilde { margin-top: 24px; overflow: hidden; }
.beh-detalj .bilde img { width: 100%; aspect-ratio: 16/6.5; object-fit: cover; border-radius: 6px; }
@media (max-width: 720px) {
  .beh-detalj { grid-template-columns: 1fr; }
  .beh-detalj .nr { font-size: 22px; }
}

/* Tekst og bilde side om side, vekslende — behandlinger.html */
.beh-detalj.split { grid-template-columns: 90px minmax(0, 1fr) minmax(0, 420px); }
.beh-detalj.split .nr { grid-column: 1; grid-row: 1; }
.beh-detalj.split > div:not(.bilde) { grid-column: 2; grid-row: 1; }
.beh-detalj.split > .bilde { grid-column: 3; grid-row: 1; margin-top: 0; align-self: stretch; }
.beh-detalj.split.bilde-venstre { grid-template-columns: 90px minmax(0, 420px) minmax(0, 1fr); }
.beh-detalj.split.bilde-venstre > .bilde { grid-column: 2; }
.beh-detalj.split.bilde-venstre > div:not(.bilde) { grid-column: 3; }
.beh-detalj.split > .bilde img { height: 100%; min-height: 340px; aspect-ratio: auto; object-fit: cover; border-radius: 6px; }
@media (max-width: 900px) {
  .beh-detalj.split, .beh-detalj.split.bilde-venstre { grid-template-columns: 90px 1fr; }
  .beh-detalj.split > div:not(.bilde), .beh-detalj.split.bilde-venstre > div:not(.bilde) { grid-column: 2; grid-row: 1; }
  .beh-detalj.split > .bilde, .beh-detalj.split.bilde-venstre > .bilde { grid-column: 2; grid-row: 2; margin-top: 4px; }
  .beh-detalj.split > .bilde img { height: auto; min-height: 0; aspect-ratio: 16/9; }
}
@media (max-width: 720px) {
  .beh-detalj.split, .beh-detalj.split.bilde-venstre { grid-template-columns: 1fr; }
  .beh-detalj.split .nr, .beh-detalj.split.bilde-venstre .nr { grid-column: 1; grid-row: auto; }
  .beh-detalj.split > div:not(.bilde), .beh-detalj.split.bilde-venstre > div:not(.bilde) { grid-column: 1; grid-row: auto; }
  .beh-detalj.split > .bilde, .beh-detalj.split.bilde-venstre > .bilde { grid-column: 1; grid-row: auto; }
}

/* ---------- Footer ---------- */
footer { background: var(--marine); color: rgba(244, 247, 249, 0.7); font-size: 14.5px; }
.footer-inner {
  max-width: 1320px;
  margin: 0 auto;
  padding: clamp(40px, 6vh, 60px) clamp(20px, 3.5vw, 40px) 28px;
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: clamp(24px, 4vw, 60px);
}
@media (max-width: 1000px) { .footer-inner { grid-template-columns: 1fr 1fr; } }
@media (max-width: 760px) { .footer-inner { grid-template-columns: 1fr; } }
.footer-inner h4 { font-size: 11.5px; letter-spacing: 0.22em; text-transform: uppercase; color: #9cc3e8; margin-bottom: 14px; font-weight: 700; }
.footer-inner a, .footer-inner p { color: rgba(244, 247, 249, 0.8); text-decoration: none; display: block; margin-bottom: 7px; }
.footer-inner a:hover { color: var(--hvit); }
.footer-merke {
  font-family: "Hanken Grotesk", sans-serif;
  font-weight: 700;
  font-size: 18px;
  color: var(--hvit);
  margin-bottom: 10px;
}
.footer-merke span { color: #9cc3e8; }
.footer-bunn {
  border-top: 1px solid rgba(244, 247, 249, 0.15);
  max-width: 1320px;
  margin: 0 auto;
  padding: 16px clamp(20px, 3.5vw, 40px) 24px;
  display: flex;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  font-size: 12.5px;
}
.footer-bunn a { color: #9cc3e8; text-decoration: none; }
.footer-bunn a:hover { text-decoration: underline; }

/* ---------- Animasjon ----------
   Kundeønske (Helga, 17.08): ingen fade-inn ved scroll — alt innhold
   er synlig umiddelbart. .fade-klassene i HTML og observer-scriptet
   står igjen uten effekt; ryddes ved leveranse. */
.fade { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* ---------- Bærum Gestaltterapi-tilpasning: logo som bilde ---------- */
.wordmark { flex-shrink: 0; }
.wordmark img { height: 54px; width: auto; }
@media (max-width: 480px) { .wordmark img { height: 40px; } }
.footer-merke img { height: 46px; width: auto; filter: brightness(0) invert(1); }

/* ---------- Demo-skjema (død flate — <div>, aldri <form>) ----------
   Malens `form input`-regler er elementselektorer og treffer ikke en
   <div>-basert skjemaflate. Reglene under speiler dem eksplisitt. */
.demo-skjema {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 clamp(20px, 3vw, 40px);
  max-width: 720px;
}
@media (max-width: 640px) { .demo-skjema { grid-template-columns: 1fr; } }
.demo-skjema .felt { display: block; }
.demo-skjema .felt--bred { grid-column: 1 / -1; }
.demo-skjema label {
  display: block;
  font-size: 11.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--dempet);
  margin: 20px 0 7px;
}
.demo-skjema input,
.demo-skjema select,
.demo-skjema textarea {
  width: 100%;
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--strek);
  color: var(--tekst);
  font-family: "Figtree", sans-serif;
  font-size: 16.5px;
  padding: 10px 2px;
  transition: border-color 0.2s;
}
.demo-skjema textarea { resize: vertical; min-height: 90px; }
.demo-skjema :disabled { color: var(--dempet); cursor: not-allowed; opacity: 1; }
.demo-skjema input:disabled,
.demo-skjema select:disabled,
.demo-skjema textarea:disabled { -webkit-text-fill-color: var(--dempet); border-bottom-style: dashed; }
.demo-skjema input[type="checkbox"] {
  width: auto;
  margin-right: 10px;
  border-bottom: none;
  padding: 0;
  vertical-align: -1px;
  accent-color: var(--sjo);
}
.demo-skjema .mikro {
  grid-column: 1 / -1;
  font-size: 13.5px;
  color: var(--dempet);
  margin-top: 18px;
}
.demo-skjema .knapp { margin-top: 30px; }

/* Merknad over det døde skjemaet */
.demo-merknad {
  border-left: 2px solid var(--sjo);
  background: var(--bunn-lys);
  padding: clamp(16px, 2.2vw, 22px) clamp(18px, 2.4vw, 26px);
  font-size: 15px;
  color: var(--dempet);
  max-width: 720px;
  margin-bottom: clamp(20px, 3vh, 30px);
}
.demo-merknad .caps-liten { display: block; margin-bottom: 6px; color: var(--sjo-mork); }

/* ---------- Widget-plassholder (EasyPractice-feltet på booking) ---------- */
/* Ekte EasyPractice-innbygging (aktivert 18.08 etter signert kontrakt).
   Iframe-en er det ENESTE tillatte tredjepartselementet på siten, kun på
   booking.html, kun mot system.easypractice.net — håndhevet av gate.py. */
.booking-innbygging {
  border: 1px solid var(--strek);
  background: var(--bunn-lys);
  padding: clamp(12px, 2vw, 24px);
}
.booking-innbygging iframe { width: 100%; height: 1000px; border: 0; display: block; }
.booking-innbygging .mikro {
  font-size: 13px;
  color: var(--dempet);
  margin-top: 10px;
  text-align: center;
}
.booking-innbygging .mikro a { color: var(--sjo-mork); }

.widget-plassholder {
  border: 1px dashed var(--strek);
  background: var(--bunn-lys);
  padding: clamp(36px, 6vw, 72px);
  min-height: 320px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 12px;
}
.widget-plassholder .caps-liten { color: var(--sjo-mork); }
.widget-plassholder h3 {
  font-family: "Hanken Grotesk", sans-serif;
  font-weight: 700;
  font-size: clamp(20px, 2.4vw, 28px);
  line-height: 1.2;
  color: var(--tekst);
}
.widget-plassholder p { color: var(--dempet); max-width: 460px; }

/* ---------- Sitatvegg ---------- */
.sitatvegg {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(20px, 3vw, 36px);
}
@media (max-width: 820px) { .sitatvegg { grid-template-columns: 1fr; } }
.sitat-kort {
  border-top: 2px solid var(--sjo-mork);
  background: var(--bunn-lys);
  padding: clamp(24px, 3vw, 36px);
}
.sitat-kort p {
  font-family: "Hanken Grotesk", sans-serif;
  font-weight: 300;
  font-size: 19px;
  line-height: 1.45;
  color: var(--tekst);
}
.sitat-kort .avsender {
  display: block;
  margin-top: 18px;
  font-size: 11.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--sjo-mork);
}

/* ---------- Bloggartikler (i93) ----------
   Ingen ny farge, font eller variabel: artikkelbildet speiler
   `.beh-detalj .bilde`, kortbildet speiler `.beh-rad .bilde`, og hover-
   oppførselen speiler `.beh-rad` (flate) og `.raad-rad` (tittelfarge).
   Dette er ikke en ny designretning — det er Klinikken-språket som står. */

/* Artikkelbildet over folden på blogg-<slug>.html */
.artikkel-bilde { overflow: hidden; margin: 0 0 clamp(22px, 3.5vh, 32px); }
/* height:auto er nødvendig fordi <img> nå har width/height-attributter (tjb):
   uten den vinner attributt-høyden over aspect-ratio, og bildet vises ubeskåret. */
.artikkel-bilde img { width: 100%; height: auto; aspect-ratio: 16/6.5; object-fit: cover; border-radius: 6px; }

/* Artikkelsidens tekstkolonne — nummeret bor i .side-hode, ikke i teksten */
.artikkel.enkel { grid-template-columns: minmax(0, 680px); }

/* Klikkbart bloggkort i listen: nr | tekst | bilde */
a.artikkel {
  grid-template-columns: 90px minmax(0, 680px) minmax(0, 300px);
  text-decoration: none;
  color: inherit;
  transition: background 0.25s;
}
a.artikkel:hover { background: var(--bunn-lys); }
a.artikkel h2 { transition: color 0.2s; }
a.artikkel:hover h2 { color: var(--sjo-mork); }
.artikkel .kort-bilde { overflow: hidden; height: 120px; }
.artikkel .kort-bilde img { width: 100%; height: 100%; object-fit: cover; border-radius: 6px; }
/* Bildesporet slås av på 860 px, ikke 760: mellom 760 og 860 presses
   tekstkolonnen under 400 px når sporet står på. Under 720 px arver kortet
   ettkolonne-oppsettet fra `.artikkel`. */
@media (max-width: 1000px) { a.artikkel { grid-template-columns: 90px minmax(0, 680px) minmax(0, 220px); } }
/* Kundeønske (Kaare, 17.08): bildene veksler side annenhver rad på desktop —
   litt spenning, øyet må bevege seg. Kun der bildesporet vises (> 860 px).
   nth-of-type teller <a>-søsken, så merknaden øverst forskyver ikke pariteten. */
@media (min-width: 861px) {
  a.artikkel:nth-of-type(even) { grid-template-columns: 90px minmax(0, 300px) minmax(0, 680px); }
  a.artikkel:nth-of-type(even) > div { grid-column: 3; grid-row: 1; }
  a.artikkel:nth-of-type(even) .kort-bilde { grid-column: 2; grid-row: 1; }
}
@media (min-width: 861px) and (max-width: 1000px) {
  a.artikkel:nth-of-type(even) { grid-template-columns: 90px minmax(0, 220px) minmax(0, 680px); }
}
@media (max-width: 860px) {
  a.artikkel { grid-template-columns: 90px minmax(0, 680px); }
  .artikkel .kort-bilde { display: none; }
}
@media (max-width: 720px) { a.artikkel { grid-template-columns: 1fr; } }

/* Forrige / alle / neste nederst på artikkelsiden.
   MÅ ligge i en <div> — `nav { position: sticky }` over i denne fila treffer
   alle <nav>-elementer og ville gjort blokken klebrig. */
.artikkel-nav {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: clamp(16px, 3vw, 40px);
  align-items: start;
  max-width: 680px;
  margin-top: clamp(36px, 6vh, 56px);
  padding-top: 22px;
  border-top: 1px solid var(--strek);
}
.artikkel-nav a { text-decoration: none; display: block; }
.artikkel-nav .caps-liten { display: block; margin-bottom: 6px; color: var(--sjo-mork); }
.artikkel-nav .tittel {
  font-family: "Hanken Grotesk", sans-serif;
  font-weight: 700;
  font-size: clamp(15px, 1.7vw, 19px);
  line-height: 1.25;
  color: var(--tekst);
  transition: color 0.2s;
}
.artikkel-nav a:hover .tittel { color: var(--sjo-mork); }
.artikkel-nav .neste { text-align: right; }
.artikkel-nav .alle { text-align: center; }
@media (max-width: 720px) {
  .artikkel-nav { grid-template-columns: 1fr; gap: 20px; }
  .artikkel-nav .neste, .artikkel-nav .alle { text-align: left; }
}

/* Meta-linjen på artikkelsidene ligger i .side-hode, ikke i .artikkel (tjb).
   Reglene over er scopet under `.artikkel` og traff derfor ikke. Samme verdier
   som `.artikkel .art-meta-linje/.dato/.skribent` — ingen nye tall, ingen nye
   farger. margin-top gjenbruker avstanden fra `.side-hode .ingress`. */
.side-hode .art-meta-linje { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 18px; margin-top: 20px; }
.side-hode .dato { font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; font-weight: 700; color: var(--sjo-mork); }
.side-hode .skribent { font-size: 13.5px; color: var(--dempet); }

/* Bloggkortene på blogg.html. Sto inline i blogg.html fram til 03.09 (tjb) —
   flyttet hit ORDRETT, uten verdiendring, så gate 7 (ingen inline <style>) og
   gate 8 (alle klassenavn i stil.css) gjelder også for bloggoversikten. */
.bl-rutenett { display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(22px,3vw,40px); }
.bl-kort { text-decoration:none; color:var(--tekst); display:block; }
.bl-kort img { width:100%; height:auto; aspect-ratio:3/2; object-fit:cover; border-radius:4px; display:block; margin-bottom:14px; }
.bl-kort h3 { font-size:19px; margin:0 0 8px; }
.bl-kort p { color:var(--dempet); font-size:15.5px; line-height:1.6; margin:0 0 10px; }
.bl-kort .pil { font-size:36px; color:var(--sjo-mork); line-height:1; }
.bl-kort:hover h3 { color:var(--sjo-mork); }
@media (max-width:900px) { .bl-rutenett { grid-template-columns:1fr 1fr; } }
@media (max-width:600px) { .bl-rutenett { grid-template-columns:1fr; } .bl-kort p { font-size:16px; } }

/* ============================================================
   SITATER — kuratert oppsett (variant A, valgt av Kaare 19.08)
   Nye klasser: de gamle (.sitatvegg/.sitat-kort/.avsender) brukes av
   index/terapi/ungdom og står urørt.
   ============================================================ */

.sitat-hopp { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: clamp(30px, 3.4vw, 44px); }
/* Ikke piller: strek-språket fra resten av siten. Blå strek over på alle, så
   raden leses som en gruppe knapper med det samme. Hover løfter fram med hvit
   bakgrunn og blå tekst, som .pro-kol på om-siden. */
.sitat-hopp a {
  font-family: "Hanken Grotesk", sans-serif; font-size: 11.5px; letter-spacing: 0.14em;
  text-transform: uppercase; text-decoration: none; color: var(--tekst);
  padding: 13px 18px; background: none; border-radius: 0;
  border-top: 2px solid var(--sjo);
  transition: background 0.3s ease, color 0.3s ease;
}
.sitat-hopp a:hover {
  background: var(--hvit);
  color: var(--sjo);
}

.sitat-stort {
  border-top: 1px solid var(--strek-svak); padding-top: clamp(28px, 3.4vw, 44px);
  margin: 0 0 clamp(8px, 1vw, 16px); display: grid; grid-template-columns: 56px 1fr;
  gap: clamp(16px, 2.2vw, 30px); align-items: start;
}
.sitat-stort .hermetegn {
  font-family: "Lora", serif; font-size: 92px; line-height: 0.8; color: var(--sjo); opacity: 0.28;
}
.sitat-stort p {
  font-size: clamp(20px, 2.2vw, 28px); line-height: 1.42; margin: 0 0 14px;
  letter-spacing: -0.015em; max-width: 42ch; font-weight: 500;
}
.sitat-hvem {
  font-family: "Hanken Grotesk", sans-serif; font-size: 11.5px; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--dempet);
}

.sitat-band { padding: clamp(34px, 3.6vw, 50px) 0; }
.sitat-band.lys { background: var(--hvit); }
.band-hode {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 24px; margin-bottom: 20px; flex-wrap: wrap;
}
.band-hode h2 { margin: 0; font-size: clamp(22px, 2.4vw, 29px); letter-spacing: -0.02em; }
.band-hode p { margin: 0; color: var(--dempet); font-size: 14.5px; max-width: 44ch; }

.sitat-rutenett { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; align-items: start; }
.sitat-rute {
  background: var(--hvit); border: 1px solid var(--strek-svak); border-left: 3px solid var(--sjo);
  padding: 22px 22px 18px; margin: 0; border-radius: 3px;
  /* ingen bevegelse — Helgas ro-krav 14.08 */
  transition: border-left-color 0.3s ease, box-shadow 0.3s ease;
}
.sitat-band.lys .sitat-rute { background: var(--bunn); }
.sitat-rute:hover { border-left-color: var(--marine); box-shadow: 0 8px 24px rgba(22, 50, 74, 0.07); }
.sitat-rute p { margin: 0 0 13px; font-size: 14.5px; line-height: 1.62; }
.sitat-rute figcaption {
  font-family: "Hanken Grotesk", sans-serif; font-size: 10.5px; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--sjo);
}
.skjult-sitat { display: none; }

.vis-flere { margin-top: 20px; text-align: center; }
.vis-flere button {
  background: none; border: 1px solid var(--strek); border-radius: 999px;
  padding: 12px 26px; font-family: "Hanken Grotesk", sans-serif; font-size: 11.5px;
  letter-spacing: 0.14em; text-transform: uppercase; cursor: pointer; color: var(--tekst);
  transition: background 0.25s, color 0.25s, border-color 0.25s;
}
.vis-flere button:hover { background: var(--marine); color: var(--hvit); border-color: var(--marine); }

.sitat-invert { background: var(--marine); padding: clamp(42px, 4.6vw, 64px) 0; text-align: center; }
.sitat-invert blockquote { margin: 0; }
.sitat-invert p {
  font-family: "Lora", serif; font-style: italic; font-size: clamp(19px, 2.2vw, 27px);
  line-height: 1.48; max-width: 38ch; margin: 0 auto 16px; color: var(--hvit);
}
.sitat-invert cite {
  font-family: "Hanken Grotesk", sans-serif; font-style: normal; font-size: 11px;
  letter-spacing: 0.18em; text-transform: uppercase; color: rgba(255, 255, 255, 0.62);
}

/* ============================================================
   Q&A — temakart og trekkspill (variant A, valgt av Kaare 19.08)
   ============================================================ */

.qa-temakart { display: grid; grid-template-columns: repeat(5, 1fr); gap: 24px; }
/* Ingen bokser: blå strek i margen, som .raad-boks og kartleggingsraden.
   Løft-effekten er borte — det var bevegelse, og Helga ba 14.08 om ro. */
.qa-temakart a {
  background: none; border: none; border-radius: 0;
  border-left: 2px solid var(--sjo);
  padding: 6px 0 6px 16px;
  text-decoration: none; color: var(--tekst); display: block;
  transition: background 0.3s ease, color 0.3s ease;
}
.qa-temakart a:hover { background: var(--hvit); color: var(--sjo); }
.qa-temakart a:hover .caps-liten { color: var(--marine); }
.qa-temakart strong {
  display: block; font-size: 15.5px; font-weight: 600; margin-bottom: 6px; letter-spacing: -0.01em;
}
.qa-temakart .caps-liten { color: var(--sjo); }

.qa-blokk { padding: clamp(32px, 3.4vw, 48px) 0 0; }
.qa-blokk-hode {
  display: flex; align-items: baseline; justify-content: space-between; gap: 20px;
  border-bottom: 2px solid var(--marine); padding-bottom: 14px; margin-bottom: 4px; flex-wrap: wrap;
}
.qa-blokk-hode h2 { margin: 0; font-size: clamp(22px, 2.4vw, 28px); letter-spacing: -0.02em; }
.qa-blokk-hode a {
  font-family: "Hanken Grotesk", sans-serif; font-size: 11px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--sjo); text-decoration: none; white-space: nowrap;
}
.qa-blokk-hode a:hover { color: var(--marine); }

.qa-sporsmal { border-bottom: 1px solid var(--strek-svak); }
.qa-sporsmal summary {
  list-style: none; cursor: pointer; display: grid; grid-template-columns: 42px 1fr 28px;
  gap: 12px; align-items: baseline; padding: 20px 0; transition: color 0.2s;
}
.qa-sporsmal summary::-webkit-details-marker { display: none; }
@media (hover: hover) { .qa-sporsmal summary:hover { color: var(--sjo); } }
.qa-sporsmal summary h3 {
  margin: 0; font-size: 16.5px; font-weight: 600; line-height: 1.45; letter-spacing: -0.01em;
}
.qa-nr {
  font-family: "Hanken Grotesk", sans-serif; font-size: 11px; letter-spacing: 0.14em; color: var(--dempet);
}
.qa-pil { justify-self: end; font-size: 19px; color: var(--sjo); line-height: 1; transition: transform 0.25s; }
.qa-sporsmal[open] .qa-pil { transform: rotate(45deg); }
.qa-svar { padding: 0 28px 26px 54px; max-width: 68ch; }
.qa-svar p { margin: 0 0 14px; font-size: 15px; line-height: 1.72; color: var(--dempet); }
.qa-svar p:last-child { margin-bottom: 0; }
.qa-svar ul { margin: 0 0 14px; padding-left: 18px; color: var(--dempet); font-size: 15px; line-height: 1.7; }

.cta.cta-mork { background: var(--marine); }
.cta-mork h2 { color: var(--hvit); }
/* .cta-linje p vinner på spesifisitet, så teksten ble stående i dempet grå på
   mørk bunn (3,05:1). Må matche spesifisiteten for å nå kontrastkravet. */
.cta-mork p,
.cta-mork .cta-linje p { color: rgba(255, 255, 255, 0.82); }
.cta-mork .knapp { border-color: rgba(255, 255, 255, 0.4); color: var(--hvit); }
.cta-mork .knapp:hover { background: rgba(255, 255, 255, 0.12); }
.cta-mork .knapp-fylt { background: var(--hvit); color: var(--marine); border-color: var(--hvit); }
.cta-mork .knapp-fylt:hover { background: rgba(255, 255, 255, 0.88); }

@media (max-width: 1000px) {
  .qa-temakart { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 900px) {
  .sitat-rutenett { grid-template-columns: 1fr; }
  .sitat-stort { grid-template-columns: 40px 1fr; }
  .sitat-stort .hermetegn { font-size: 64px; }
  .qa-svar { padding-left: 0; padding-right: 0; }
  .qa-sporsmal summary { grid-template-columns: 32px 1fr 24px; }
}
@media (max-width: 620px) {
  .qa-temakart { grid-template-columns: 1fr; }
}

/* Siste temablokk må ha samme luft ned til det blå CTA-båndet som det er
   mellom temablokkene (48 px) — ellers starter fargefeltet rett under siste
   spørsmålslinje. Marg på CTA-en, ikke padding på blokken: da treffer den
   uansett hvilken blokk som blir den siste. */
.qa-blokk + .cta { margin-top: clamp(40px, 4.2vw, 60px); }

/* Ankermål må klarere den klistrede nav-en (83 px) når man hopper dit. */
.sitat-band[id],
.qa-blokk[id] { scroll-margin-top: 104px; }

/* ============================================================
   OM-SIDEN — Kaares valg 19.08 (Tussi A, hover A, kvalifikasjoner C)
   ============================================================ */

/* Tussi som fotobånd: bildet fyller høyden, teksten står midtstilt ved siden.
   Erstatter .beh-detalj split, som ga 630 px høyde på 26 ord. */
.tussi-band {
  display: grid; grid-template-columns: 300px 1fr; align-items: stretch;
  background: var(--hvit); border: 1px solid var(--strek-svak); border-radius: 4px; overflow: hidden;
  /* Luften over kommer fra forrige seksjon; under var den null, så neste element
     klistret seg inntil og de to leste som én ting. Samme avstand begge veier. */
  margin-bottom: clamp(68px, 11vh, 124px);
}
.tussi-band:last-child { margin-bottom: 0; }
.tussi-bilde img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tussi-tekst {
  padding: clamp(24px, 3vw, 40px); display: flex; flex-direction: column; justify-content: center;
}
.tussi-tekst h2 { margin: 6px 0 10px; font-size: clamp(22px, 2.4vw, 26px); letter-spacing: -0.02em; }
.tussi-tekst p { margin: 0 0 16px; color: var(--dempet); line-height: 1.7; max-width: 48ch; }
.tussi-fakta {
  display: flex; gap: 22px; flex-wrap: wrap;
  border-top: 1px solid var(--strek-svak); padding-top: 14px;
}
.tussi-fakta span {
  font-family: "Hanken Grotesk", sans-serif; font-size: 11px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--sjo);
}

/* Prosesskolonnene lyser opp ved hover: bakgrunn, skillestrek og tittel tar farge.
   INGEN bevegelse — Helga ba 14.08 om ro som designspråk (ingen hover-bevegelse,
   ingen scroll-fade). Gjelder .pro-kol overalt, så komponenten oppfører seg likt. */
.pro-kol {
  transition: background-color 0.35s ease, border-left-color 0.35s ease;
  border-radius: 3px;
}
.pro-kol h3 { transition: color 0.35s ease; }
.pro-kol:hover { background-color: rgba(40, 104, 152, 0.045); border-left-color: var(--sjo); }
.pro-kol:hover h3 { color: var(--sjo); }
/* Første kolonne hadde padding-left: 0 (venstrejustert med overskriften), så
   hover-streken la seg rett inntil teksten. Den får nå samme indre marg som de
   andre, og rutenettet trekkes tilsvarende tilbake — da står teksten fortsatt
   på linje med overskriften, men streken får samme luft som i kolonne 2 og 3. */
.prosess-grid { margin-left: calc(-1 * var(--pro-marg)); }
.pro-kol:first-child { padding-left: var(--pro-marg); position: relative; }
.pro-kol:first-child::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 1px;
  background: var(--sjo); opacity: 0; transition: opacity 0.35s ease;
}
.pro-kol:first-child:hover::before { opacity: 1; }

/* Kvalifikasjoner: egen liste. Brukte tidligere .pris-rad — priskomponenten fra
   prislisten (navn … prikker … pris), som gjorde teksten liten og venstretung. */
.kval-liste { margin-top: clamp(18px, 2.4vw, 30px); }
.kval-rad {
  display: grid; grid-template-columns: 1fr auto; gap: 26px; align-items: start;
  padding: 20px 0; border-bottom: 1px solid var(--strek-svak);
}
.kval-rad:first-child { border-top: 1px solid var(--strek-svak); }
.kval-rad h3 { margin: 0 0 5px; font-size: 17px; line-height: 1.4; letter-spacing: -0.01em; }
.kval-rad p { margin: 0; font-size: 13.8px; line-height: 1.62; color: var(--dempet); max-width: 64ch; }
.kval-merke {
  font-family: "Hanken Grotesk", sans-serif; font-size: 10.5px; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--sjo); white-space: nowrap; padding-top: 3px;
}

@media (max-width: 900px) {
  .tussi-band { grid-template-columns: 1fr; }
  .tussi-bilde img { height: 240px; }
  .kval-rad { grid-template-columns: 1fr; gap: 8px; }
  .kval-merke { padding-top: 0; }
}

/* Mobil: kolonnene stables, da skal både den negative margen og første kolonnes
   indre marg bort. Må stå SIST i filen for å vinne over regelen over. */
@media (max-width: 880px) {
  .prosess-grid { margin-left: 0; }
  .pro-kol:first-child { padding-left: 0; }
  .pro-kol:first-child::before { content: none; }
}

/* Rådboks for «kontakt fastlegen først». Følger sidens etablerte merknad-språk
   (.demo-merknad: blå venstrestrek på lys bunn) i stedet for en fremmed farget
   boks. Kan ikke gjenbruke .info-punkt — den brukes til åpningstider, priser og
   kontaktinfo på åtte sider. */
.raad-boks {
  border-left: 2px solid var(--sjo);
  background: var(--bunn-lys);
  padding: clamp(18px, 2.4vw, 26px) clamp(20px, 2.6vw, 28px);
  max-width: 720px;
  margin: 20px 0 18px;
}
.raad-boks .caps-liten {
  display: block;
  margin-bottom: 12px;
  color: var(--sjo-mork);
}
.raad-boks ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.raad-boks li {
  position: relative;
  padding: 8px 0 8px 26px;
  font-size: 15px;
  line-height: 1.55;
  color: var(--tekst);
}
.raad-boks li::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 15px;
  width: 8px;
  height: 2px;
  background: var(--sjo);
}

/* Q&A-svarene inneholder samme .plager-liste, men ligger i .qa-svar — ikke i
   .beh-detalj. Samme innhold skal se likt ut, så regelen speiles hit. */
.qa-svar .plager {
  list-style: none;
  columns: 2;
  column-gap: 40px;
  max-width: 680px;
  margin: 14px 0 0;
  padding-top: 14px;
  border-top: 1px solid var(--strek-svak);
}
.qa-svar .plager li {
  font-size: 15px;
  line-height: 1.5;
  color: var(--tekst);
  padding: 6px 0 6px 22px;
  position: relative;
  break-inside: avoid;
}
.qa-svar .plager li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 17px;
  width: 8px;
  height: 2px;
  background: var(--sjo);
}

@media (max-width: 700px) {
  .beh-detalj .plager,
  .qa-svar .plager { columns: 1; }
}

/* ============================================================
   PRISSIDEN — kompakt oppslag (variant E, Kaares valg 19.08)
   Priser til venstre, praktisk informasjon til høyre. Kartleggings-
   samtalen løftet ut av listen: den er sidens viktigste konvertering
   og det eneste som er gratis.
   .pris-rad/.pris-gruppe/.prikker står urørt — par.html bruker dem.
   ============================================================ */

.pris-oppsett { padding: clamp(34px, 4vw, 56px) 0 clamp(20px, 2.4vw, 32px); }
.pris-oppsett .inner {
  display: grid; grid-template-columns: 1.25fr 1fr;
  gap: clamp(34px, 4.4vw, 70px); align-items: start;
}
/* Grid-barn har min-width: auto som standard og kan flyte over ved lange ord. */
.pris-kolonne { min-width: 0; }

.pris-tittel {
  font-family: "Hanken Grotesk", sans-serif; font-size: 12px; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--sjo); margin: 0 0 16px; font-weight: 600;
  border-bottom: 2px solid var(--marine); padding-bottom: 12px;
}

/* Kartleggingssamtalen er gratis og skal være lett å få øye på, men den skal
   ikke selge. Folk som ser på priser er nysgjerrige, ikke i kjøpsmodus. Derfor
   en markert rad i listen — sjøfarget strek og pris, diskré tekstlenke — i
   stedet for et eget felt med fylt knapp. */
.pris-liste li.pris-gratis-rad {
  --uttrekk: 26px;
  --strek-inn: 10px;
  border-bottom: none;
  padding: 15px 0 15px 24px;
  margin-left: calc(-1 * var(--uttrekk));
  position: relative;
}
/* Streken som eget element, ikke border-left: den gikk hele radhøyden og traff
   den grå bunnstreken, mens det var 16 px luft opp til tittelstreken over.
   Nå like mye luft i begge ender. */
.pris-liste li.pris-gratis-rad::before {
  content: "";
  position: absolute;
  left: 0;
  top: var(--strek-inn);
  bottom: var(--strek-inn);
  width: 2px;
  background: var(--sjo);
}
/* Raden er trukket ut i margen, så den arvede bunnstreken ble 26 px for lang.
   Egen strek som starter der radene under starter. */
.pris-liste li.pris-gratis-rad::after {
  content: "";
  position: absolute;
  left: var(--uttrekk);
  right: 0;
  bottom: 0;
  height: 1px;
  background: var(--strek-svak);
}
.pris-gratis-rad .pris-tall { color: var(--sjo); }
.pris-gratis-rad .pris-under { max-width: 46ch; }
.pris-lenke {
  display: inline-block;
  margin-top: 8px;
  font-family: "Hanken Grotesk", sans-serif;
  font-size: 11.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sjo);
  text-decoration: none;
  font-weight: 600;
}
.pris-lenke:hover { color: var(--marine); }

.pris-liste { list-style: none; margin: 0; padding: 0; }
.pris-liste li {
  display: grid; grid-template-columns: 1fr auto; gap: 18px; align-items: baseline;
  padding: 15px 0; border-bottom: 1px solid var(--strek-svak);
}
.pris-navn { font-size: 16px; font-weight: 500; letter-spacing: -0.01em; }
.pris-under { display: block; font-size: 12.8px; color: var(--dempet); margin-top: 2px; font-weight: 400; }
.pris-tall { font-size: 16.5px; font-weight: 600; white-space: nowrap; text-align: right; }
.pris-varighet {
  display: block; font-family: "Hanken Grotesk", sans-serif; font-size: 11.5px;
  color: var(--dempet); margin-top: 2px; letter-spacing: 0.08em; text-transform: uppercase;
  font-weight: 400;
}

.pris-sidefelt .praktisk-rad { border-top: 1px solid var(--strek-svak); padding: 14px 0; }
.pris-sidefelt .praktisk-rad:first-of-type { border-top: none; padding-top: 0; }
.pris-sidefelt .caps-liten { display: block; margin-bottom: 5px; color: var(--sjo-mork); }
.pris-sidefelt p { margin: 0; font-size: 14.2px; line-height: 1.66; color: var(--dempet); }

@media (max-width: 900px) {
  .pris-oppsett .inner { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
  /* mindre uttrekk på smal skjerm, men teksten skal fortsatt flukte med radene under */
  .pris-liste li.pris-gratis-rad { --uttrekk: 14px; padding-left: 12px; }
}

/* «Vis mer» på lange tekstblokker. Native <details>, samme mekanikk som
   Q&A-trekkspillene: virker uten JavaScript og leses riktig av skjermlesere.
   Teksten på knappen byttes i CSS så den ikke trenger et skript. */
.beh-detalj .mer { margin-top: 4px; }
.beh-detalj .mer summary {
  list-style: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 0;
  font-family: "Hanken Grotesk", sans-serif;
  font-size: 11.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--sjo);
  transition: color 0.25s;
}
.beh-detalj .mer summary::-webkit-details-marker { display: none; }
.beh-detalj .mer summary:hover { color: var(--marine); }
.beh-detalj .mer summary span::before { content: "Vis mer"; }
.beh-detalj .mer[open] summary span::before { content: "Vis mindre"; }
.beh-detalj .mer summary::after {
  content: "+";
  font-size: 15px;
  line-height: 1;
  transition: transform 0.25s;
}
.beh-detalj .mer[open] summary::after { transform: rotate(45deg); }
.beh-detalj .mer[open] summary { margin-bottom: 12px; }

/* ============================================================
   FORSIDEN — terapirommet og Tussi (variant D, Kaares valg 19.08)
   Var to .beh-detalj split-blokker: kontoret 651 px med tomrom under
   teksten, Tussi 432 px på 26 ord. Nå én blokk der Tussi-bildet legger
   seg over hjørnet av kontorbildet.
   ============================================================ */

.rom-blokk {
  display: grid; grid-template-columns: 1fr 1.1fr;
  gap: clamp(30px, 4vw, 60px); align-items: center;
  /* Lik luft over og under: det mørke båndet støter ellers rett i bildet, og
     seksjonens gamle bunnpadding ga nesten fire ganger så mye under som over.
     Verdien er sitens egen seksjonsavstand, den samme neste seksjon bruker. */
  padding-top: clamp(68px, 11vh, 124px);
}
.rom-blokk h2 {
  margin: 8px 0 14px; font-size: clamp(24px, 2.8vw, 34px);
  letter-spacing: -0.025em; line-height: 1.15;
}
.rom-blokk p { color: var(--dempet); line-height: 1.75; margin: 0 0 14px; max-width: 48ch; }
.rom-blokk p:last-child { margin-bottom: 0; }
.rom-tussi { font-size: 14.4px; }

.rom-komposisjon { position: relative; padding-left: 40px; padding-bottom: 54px; }
.rom-stor {
  width: 100%; aspect-ratio: 4/3; object-fit: cover;
  border-radius: 6px; display: block;
}
/* Rammen er sidens bakgrunnsfarge, så det ser ut som bildet ligger oppå. */
.rom-liten {
  position: absolute; left: 0; bottom: 0; width: 190px; aspect-ratio: 1;
  object-fit: cover; border-radius: 6px; border: 6px solid var(--bunn); display: block;
}
.rom-seksjon { padding-bottom: 0; }
.rom-bildetekst {
  font-size: 12.5px; color: var(--dempet); margin: 14px 0 0; padding-left: 40px;
}

@media (max-width: 900px) {
  .rom-blokk { grid-template-columns: 1fr; }
  .rom-komposisjon { padding-left: 0; padding-bottom: 40px; }
  .rom-liten { width: 140px; }
  .rom-seksjon { padding-bottom: 0; }
.rom-bildetekst { padding-left: 0; }
}

/* Tydeligere «Vis mer» — ramme rundt, så den leses som en knapp. Brukes der
   det ligger mye tekst bak, som på BUP-siden. */
.beh-detalj .mer.mer-tydelig summary {
  border: 1px solid var(--strek);
  border-radius: 3px;
  padding: 10px 18px;
  margin-top: 4px;
  transition: background 0.25s ease, border-color 0.25s ease, color 0.25s ease;
}
.beh-detalj .mer.mer-tydelig summary:hover {
  background: var(--hvit);
  border-color: var(--sjo);
}
.beh-detalj .mer.mer-tydelig[open] summary { margin-bottom: 16px; }

/* ============================================================
   MOBIL — samlet finpuss fra 390px-audit 20.08 (56 utsnitt)
   Alt her er innskrenket til smale brekkpunkt; desktop urørt.
   ============================================================ */

@media (max-width: 720px) {
  /* Vertikal rytme: 11vh ga ~186px hull mellom seksjoner på mobil.
     Fortsatt luftig (112px seksjon-til-seksjon), men ikke hullete. */
  .blokk { padding: 56px 0; }
  .blokk-bunn { padding-bottom: 56px; }
  .skogblokk .inner { padding-top: 56px; padding-bottom: 56px; }
  .cta { padding: 64px 0; }

  /* Desktop-linjefall i h1 skal ikke styre mobil — la teksten brekke naturlig.
     (Mellomrommet står i kilden foran <br>, så ord limes ikke — gate 22.) */
  .typo-hero h1 br,
  .side-hode h1 br { display: none; }

  /* Forsidens hero-bilde: 68vh + cover viste bare midtre ~38 % av 16:9-bildet
     og kuttet hodet. 3:2 viser motivet. */
  .fullbilde { height: auto; aspect-ratio: 3 / 2; }

  /* Hopp-lenkene på sitater: flex-wrap ga ujevn 3+2-rad med ulik strekbredde.
     To like kolonner leses som én ordnet gruppe. */
  .sitat-hopp { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 14px; }
}

@media (max-width: 600px) {
  /* Stort sitat: hermetegn-kolonnen klemte teksten. Tegnet over, teksten fullbredde. */
  .sitat-stort { grid-template-columns: 1fr; gap: 10px; }
  .sitat-stort .hermetegn { font-size: 34px; }
}

@media (max-width: 520px) {
  /* CTA- og hero-knapper i full bredde — stablet i ulik bredde så tilfeldig ut,
     og tommelen får større mål. */
  .cta .cta-linje .knapp,
  .hero-hoyre .knapp { width: 100%; justify-content: center; }
}


/* ==================================================================
   MOBILFIKS 03.09 — fra ni-agenters mobilsveip (live-møtets funn).
   Ligger sist så kaskaden vinner over eldre regler.
   ================================================================== */
/* KRITISK: menyoverlegget (z70) dekket burger-X-en (z80 INNE i nav z60 =
   egen stacking context). Overlegget legges nå UNDER den sticky nav-en,
   så logo + X alltid er synlige og klikkbare når menyen er åpen. */
.mobilmeny { z-index: 55; padding-top: 110px; background: rgba(22, 50, 74, 1); }
/* Venstrestilt meny sitewide (Kaares beslutning 28.08, nå ut av mockupen),
   venstrekant PÅ sidens gutter — og hver rad full bredde som trykkflate. */
.mobilmeny { align-items: flex-start; justify-content: center; padding-left: clamp(20px, 3.5vw, 40px); gap: 6px; }
.mobilmeny a { font-size: 22px; padding: 10px 0; border-left: 2px solid transparent; align-self: stretch; }
@media (hover: hover) { .mobilmeny a:hover { border-left-color: #9cc3e8; padding-left: 14px; } }
/* Burger: 44px reelt treffområde uten visuell endring. */
.burger { width: 44px; height: 44px; }
/* Footer: lenkene får ≥36px trykkflate uten visuell endring. */
.footer-inner a { padding: 6px 0; display: inline-block; }
/* Mørk CTA: synlig skillelinje + knappene holder sammen på mellombredder. */
.cta-mork .cta-linje { border-top-color: rgba(255, 255, 255, 0.18); }
.cta-linje { row-gap: 14px; }
@media (max-width: 900px) { .cta-linje { justify-content: flex-start; } }
/* (Gratis-rad-uttrekksregelen fra første bolk FJERNET 03.09 — den brøt
   tekstflukten på 768. Original-uttrekket med 1px kantklaring aksepteres.) */


/* MOBILFIKS 03.09, runde 2 — nav-raden må FÅ PLASS i 390 (verifisert regresjon:
   logo+Book time+burger sprengte til 457px på forsiden / 405px på blogg). */
@media (max-width: 480px) {
  .nav-inner { gap: 8px; }
  .nav-links { gap: 0; }
  .nav-links a.knapp { padding: 11px 12px; letter-spacing: 0.1em; }
}
/* «Fra bloggen →»-lenken skal ikke brekke pilen til egen linje. */
.k-bro-hode-lenke { white-space: nowrap; }


/* ============================================================
   Bloggartikkel — variant B «Splitt» (VALGT av Kaare 06.09.2026, v=34)
   Portert fra mockup-inline (mvb-) i artikkel-r1/generer_artikkel.py.
   Ingen nye farger, fonter eller variabler. Variant A-reglene over
   (.artikkel.enkel, .side-hode .art-meta-linje) står for en ev. retur.
   ============================================================ */
.artikkel-hero { padding: clamp(40px, 6vh, 76px) 0 clamp(30px, 4.5vh, 52px); }
.artikkel-hero-grid { display: grid; grid-template-columns: 1.05fr 0.85fr; gap: clamp(28px, 4.5vw, 72px); align-items: center; }
.artikkel-hero-tekst .caps-liten { display: block; color: var(--sjo-mork); margin-bottom: 16px; }
.artikkel-hero-tekst h1 { font-size: clamp(32px, 4.1vw, 54px); margin: 0; }
.artikkel-meta { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 18px; margin: 18px 0 0; }
.artikkel-meta .dato { font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; font-weight: 700; color: var(--sjo-mork); }
.artikkel-meta .skribent { font-size: 13.5px; color: var(--dempet); }
.artikkel-lead { font-size: 18px; color: var(--dempet); margin-top: 22px; max-width: 480px; }
.artikkel-hero-bilde { position: relative; }
.artikkel-hero-bilde img { width: 100%; height: auto; aspect-ratio: 4/5; object-fit: cover; border-radius: 6px; display: block; }
.artikkel-hero-bilde::before { content: ""; position: absolute; inset: 22px -22px -22px 22px; background: var(--sjo-mork); border-radius: 6px; z-index: -1; opacity: 0.14; }
.artikkel-tekst { max-width: 680px; }
.artikkel-tekst p { margin-bottom: 16px; }
.artikkel-band { background: var(--marine); padding: clamp(34px, 3.6vw, 50px) 0; margin: clamp(34px, 5vh, 56px) 0; }
.artikkel-band p { max-width: 780px; margin: 0; color: var(--hvit); font-family: "Hanken Grotesk", sans-serif; font-weight: 700; font-size: clamp(20px, 2.4vw, 28px); line-height: 1.35; }
.artikkel-flere { border-top: 1px solid var(--strek); padding-top: clamp(28px, 4vh, 44px); }
.artikkel-flere .caps-liten { display: block; color: var(--sjo-mork); margin-bottom: 22px; }
@media (max-width: 820px) {
  .artikkel-hero-grid { grid-template-columns: 1fr; }
  .artikkel-hero-bilde { order: -1; }
  .artikkel-hero-bilde::before { inset: 16px -14px -16px 14px; }
}