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

/* ---------- Skriftene — egne filer fra 29.09.2026 (quick 260929-e80) ----------
   Hanken Grotesk og Figtree (SIL Open Font License, lisensene ligger i
   assets/fonter/). Før dette ble de hentet fra Google Fonts, og da gikk
   IP-adressen til hver besøkende til Google. Blokkene er Googles egne, ordrett,
   med bare adressen byttet: samme vekter og samme unicode-range, så siden
   tegnes likt. Filene er variable — én fil per delsett dekker alle vektene. */
@font-face { font-family: "Figtree"; font-style: normal; font-weight: 400; font-display: swap; src: url(assets/fonter/figtree-latin-ext.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Figtree"; font-style: normal; font-weight: 400; font-display: swap; src: url(assets/fonter/figtree-latin.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Figtree"; font-style: normal; font-weight: 500; font-display: swap; src: url(assets/fonter/figtree-latin-ext.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Figtree"; font-style: normal; font-weight: 500; font-display: swap; src: url(assets/fonter/figtree-latin.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Figtree"; font-style: normal; font-weight: 600; font-display: swap; src: url(assets/fonter/figtree-latin-ext.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Figtree"; font-style: normal; font-weight: 600; font-display: swap; src: url(assets/fonter/figtree-latin.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Figtree"; font-style: normal; font-weight: 700; font-display: swap; src: url(assets/fonter/figtree-latin-ext.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Figtree"; font-style: normal; font-weight: 700; font-display: swap; src: url(assets/fonter/figtree-latin.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Hanken Grotesk"; font-style: normal; font-weight: 300; font-display: swap; src: url(assets/fonter/hanken-grotesk-latin-ext.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Hanken Grotesk"; font-style: normal; font-weight: 300; font-display: swap; src: url(assets/fonter/hanken-grotesk-latin.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Hanken Grotesk"; font-style: normal; font-weight: 700; font-display: swap; src: url(assets/fonter/hanken-grotesk-latin-ext.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Hanken Grotesk"; font-style: normal; font-weight: 700; font-display: swap; src: url(assets/fonter/hanken-grotesk-latin.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

: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;
}
/* `height: auto` lagt til 23.09.2026 (quick 260919-msm, oppgave 6a).
   Bildene har faatt ekte width/height-attributter mot CLS. Uten
   `height: auto` her vinner HTML-attributtets hoeyde over `aspect-ratio`
   i CSS — maalt: hero ble 624x900 i stedet for 624x390. Med regelen er
   attributtene bare et forholdstall nettleseren reserverer plass med,
   og layouten er byte for byte den samme som foer. */
img { max-width: 100%; height: auto; 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;
}
/* Plusstegnet på knappene fjernet — Helga 09.09, gjelder ALLE knapper på siden. */
.knapp::after { content: none; }
.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); }
/* Helga 20.09: ett menypunkt til («Spørsmål») → PC-menyen trenger 1000 px (målt: 72 px overflyt ved 905, 10 px ved 985). */
@media (max-width: 1000px) { .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: 1000px) { .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; }
/* Om-siden (Helga 09.09): portrettet i hele sin høyde (3/4) som på forsiden — ikke beskåret. */
.skogblokk img.helga-hel { aspect-ratio: 3 / 4; }
/* Ungdomssidens rom-blokk (Helga 09.09): kontoret venstre i 4/3, teksten høyre
   med hvit strek i venstre kant — den tallløse blokkens strek, på mørk grunn. */
.k-rom-ung .rom-komposisjon { padding-left: 0; padding-bottom: 0; }
.k-rom-ung .rom-stor { width: 100%; height: auto; aspect-ratio: 4/3; object-fit: cover; border-radius: 6px; }
.k-rom-ung .rom-tekst { border-left: 2px solid var(--hvit); padding-left: clamp(18px, 2vw, 26px); }
.k-rom-ung .rom-tekst p:last-child { margin-bottom: 0; }
/* Ungdomssidens Tussi-del (Helga 09.09): samme runde Tussi som forsiden.
   Kilden er tussi.jpg (råbildet) + sirkelmaske — IKKE tussi-rund.jpg, som har
   den hvite ringen Helga ba oss fjerne 27.08 bakt inn i fila. */
.tussi-bilde:has(> img.tussi-sirkel) { display: grid; place-items: center; padding: clamp(22px, 2.6vw, 34px); }
.tussi-bilde img.tussi-sirkel { border-radius: 50%; aspect-ratio: 1 / 1; height: auto; object-fit: cover; width: 100%; max-width: 232px; }  /* luft rundt sirkelen — Helga 09.09 */
@media (max-width: 900px) { .tussi-bilde img.tussi-sirkel { width: 200px; height: 200px; margin: 0 auto; } }
.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; }
/* Sidehode med bilde (par, Helga 09.09): tekst venstre, bilde høyre, som forsidens
   splitt-hero. Stables under 820 px med bildet etter teksten. */
.side-hode.med-bilde { padding-bottom: clamp(36px, 5vh, 60px); }
.side-hode.med-bilde .inner { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(28px, 4.5vw, 72px); align-items: center; }
.side-hode.med-bilde .hode-tekst { min-width: 0; }
.side-hode.med-bilde .hode-bilde img { width: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: 6px; display: block; }
@media (max-width: 820px) { .side-hode.med-bilde .inner { grid-template-columns: 1fr; gap: 26px; } }

/* Mørkt sidehode m/spørsmålene i heroen (par, Helga 09.09 — par-topp-r1 variant A).
   Samme --skog-felt som forsidens hero; lista «Vanlige utfordringer» ligger inne
   i hodet i to kolonner, så toppen ikke står halvtom. */.hode-mork { background: var(--skog); color: #e8f0f6; padding-bottom: clamp(40px, 6vh, 64px); }
  .hode-mork .caps-liten { color: #9cc3e8; display: block; margin-bottom: 16px; }
  .hode-mork h1.display { color: #fff; font-size: clamp(40px, 5.4vw, 72px); }
  .hode-mork .ingress { color: #a9c0d2; margin-bottom: 28px; }
  .hode-mork .knapp-fylt { background: #fff; border-color: #fff; color: var(--skog); }
  .hode-mork .knapp-fylt:hover { background: #9cc3e8; border-color: #9cc3e8; color: var(--skog); }
  .hode-mork-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: clamp(28px, 4.5vw, 72px); align-items: center; }
  .hode-mork-bilde { position: relative; }
  .hode-mork-bilde img { width: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: 6px; display: block; }
  .hode-mork-liste { margin-top: clamp(40px, 6vh, 64px); padding-top: clamp(28px, 4vh, 40px); border-top: 1px solid rgba(255,255,255,0.16); }
  .hode-mork .hode-mork-sporsmal { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 clamp(28px, 4vw, 64px); }
  /* Helga 09.09: ingen skillestreker — bindestrek foran hvert utsagn, som
     «Kjenner du deg igjen?»-lista på forsiden (.plager), i logoens lyse blå. */
  .hode-mork .hode-mork-sporsmal li { position: relative; padding: 9px 0 9px 22px; font-size: 16.5px; color: rgba(255,255,255,0.9); }
  .hode-mork .hode-mork-sporsmal li::before { content: ""; position: absolute; left: 2px; top: 21px; width: 8px; height: 2px; background: #9cc3e8; }  /* tegnet strek, 8×2 som .plager */
  .hode-mork + .blokk-bunn { padding-top: clamp(56px, 9vh, 96px); background: linear-gradient(180deg, #e9eff4 0%, var(--bunn) 220px); }
  /* Helga 24.09: bildet skal stå UNDER «… kan parterapi være til hjelp.»
     på mobil, ikke over. order:-1 fjernet; banner-stilen lenger nede står. */
  @media (max-width: 820px) { .hode-mork-grid { grid-template-columns: 1fr; } .hode-mork .hode-mork-sporsmal { grid-template-columns: 1fr; } }


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

/* ---------- Kontaktskjemaet (del D, 20.09.2026) ----------
   Erstatter den døde demoflaten og merknadsboksen over den (et <div> som
   bare SÅ ut som et skjema, og en tekst om at det ikke virket):
   dette er nå et ekte <form method="post" action="/api/kontakt"> — det
   ENESTE skjemaet på hele siten, håndhevet av gaten (kontroll.py sjekk 26).

   Geometrien er arvet uendret fra demoen, så siden ser lik ut. Det som er
   borte er :disabled-reglene: de tegnet «dette virker ikke» med dempet tekst
   og stiplet understrek, og det er ikke sant lenger. */
.kontaktskjema {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 clamp(20px, 3vw, 40px);
  max-width: 720px;
}
@media (max-width: 640px) { .kontaktskjema { grid-template-columns: 1fr; } }
/* Fotteren lenker til kontakt.html#skjema. Uten denne scroller nettleseren
   skjemaet helt til toppen av vinduet — og da ligger «Navn» og «E-post» under
   den klebrige menyen. Samme tall som .qa-blokk[id] bruker for samme grunn. */
.kontaktskjema { scroll-margin-top: 104px; }
.kontaktskjema .felt { display: block; }
.kontaktskjema .felt--bred { grid-column: 1 / -1; }
/* Versaletikettene. Selektoren er MED VILJE snever: bare <label> som er
   direkte barn av en .felt. Den brede varianten (.kontaktskjema label) traff
   også samtykkelabelen, og da sto behandlingsgrunnlaget vårt i 11,5 px fet
   VERSAL med sperring. Den fella slo til to ganger (v37 og v38) fordi
   nullstillingen i .skjema-samtykke har lavere spesifisitet og alltid tapte.
   Innsnevring slår oppveiing: nå kan samtykket ikke arve regelen i det hele
   tatt, uansett hvor mange klasser som legges på senere.
   Voktes av tests/test_sidestil.py. */
.kontaktskjema .felt > label {
  display: block;
  font-size: 11.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--dempet);
  margin: 20px 0 7px;
}
.kontaktskjema input,
.kontaktskjema select,
.kontaktskjema 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;
}
/* To fokusmarkeringer med vilje: fargen på understreken er den rolige som
   alle ser, og outline er den tydelige som tastaturbrukeren trenger.
   `outline: none` uten erstatning ville gjort skjemaet ubrukelig uten mus. */
.kontaktskjema input:focus,
.kontaktskjema textarea:focus { border-bottom-color: var(--sjo); }
.kontaktskjema input:focus-visible,
.kontaktskjema textarea:focus-visible { outline: 2px solid var(--sjo); outline-offset: 3px; }
.kontaktskjema textarea { resize: vertical; min-height: 120px; }
.kontaktskjema input[type="checkbox"] {
  width: auto;
  margin-right: 10px;
  border-bottom: none;
  padding: 0;
  vertical-align: -1px;
  accent-color: var(--sjo);
}
/* Valggruppa — ungdom / voksen / par (quick 260929-f5z). Skjemaet har ingen
   fritekst. Etiketten er den samme versalen som over feltene; valgene står på
   én linje og brekker hver for seg på smal skjerm. */
.skjema-valg { grid-column: 1 / -1; border: 0; margin: 0; padding: 0; min-width: 0; }
.skjema-valg legend { display: block; font-size: 11.5px; letter-spacing: 0.18em; text-transform: uppercase; font-weight: 700; color: var(--dempet); margin: 0; padding: 26px 0 12px; }
/* Versalregelen for etiketter treffer hver <label> i skjemaet. Valgene er
   svar, ikke etiketter: de settes som teksten i feltene. */
.skjema-valg label { display: inline-flex; align-items: center; gap: 10px; margin: 0 30px 6px 0; font-size: 16.5px; font-weight: 400; letter-spacing: 0; text-transform: none; line-height: 1.6; color: var(--tekst); cursor: pointer; }
/* Smal skjerm: ett valg per linje, 44 px høy trykkflate. */
@media (max-width: 720px) {
  .skjema-valg label { display: flex; margin: 0; padding: 9px 0; }
}
.kontaktskjema input[type="radio"] { width: auto; margin: 0; border-bottom: none; padding: 0; accent-color: var(--sjo); }
.kontaktskjema .mikro {
  grid-column: 1 / -1;
  font-size: 13.5px;
  color: var(--dempet);
  margin-top: 18px;
}
.kontaktskjema .knapp { margin-top: 30px; }

/* Honningfellen. IKKE display:none og ikke hidden: flere spam-verktøy hopper
   over felt som er skjult på den måten, og da er fella verdiløs. Feltet
   ligger utenfor skjermen, uten tabulatorstopp og aria-hidden i markupen —
   usynlig for mennesker og skjermlesere, fristende for en bot. */
.skjema-felle { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Hjelpeteksten rett over meldingsfeltet (rådet om helseopplysninger). */
.skjema-hjelp {
  grid-column: 1 / -1;
  font-size: 13.5px;
  color: var(--dempet);
  margin: 24px 0 -8px;
  line-height: 1.6;
}

/* Samtykket er en <label>, men ligger IKKE inne i en .felt — og versalregelen
   over treffer bare `.kontaktskjema .felt > label`. Fra 21.09.2026 kan
   behandlingsgrunnlaget derfor ikke arve versaler i det hele tatt.
   Nullstillingen under blir stående som livrem og seler: den koster ingenting,
   den gjør regelen lesbar for den neste, og den fanger opp en fremtidig
   versalregel vi ikke har tenkt på. tests/test_sidestil.py vokter BEGGE deler —
   at den brede selektoren er borte, og at nullstillingen står. */
.skjema-samtykke {
  grid-column: 1 / -1;
  display: block;
  margin: 28px 0 0;
  font-size: 14.5px;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  line-height: 1.6;
  color: var(--dempet);
}
.skjema-samtykke a { color: var(--sjo-mork); }

/* Svarboksen over knappen: kvittering eller feil, aldri begge. Boksen har
   `hidden` i markupen og får display fra nettleserens egen regel — derfor
   settes ingen `display` her. */
.skjema-svar {
  grid-column: 1 / -1;
  margin-top: 26px;
  padding: 14px 18px;
  font-size: 15px;
  line-height: 1.6;
  border-left: 2px solid var(--strek);
  background: var(--bunn-lys);
}
.skjema-svar--ok { border-left-color: var(--sjo); color: var(--tekst); }
/* Feilfargen fra DESIGN.md (colors.tools.feil). Virkeområdet er utvidet
   20.09.2026 til å dekke skjemafeil på nettsiden — se DESIGN.md. */
.skjema-svar--feil { border-left-color: #b91c1c; color: #b91c1c; }

/* ---------- Kontaktsiden: variant F — mørk flate, lys direktekontakt-stripe ----------
   Kaare valgte variant F («Skjemaet er siden, mørk») fra sketch 007 den
   21.09.2026. Hele toppen av kontakt.html — hodet OG skjemaet — ligger på
   marine, og direktekontakten står under som en lys dis-stripe. Rytmen på
   siden blir mørk → lys → mørk: F-flaten, dis-stripa, .cta-mork, og så
   fotteren.

   Dette er et BEVISST unntak fra «figur og grunn», som sier at siden er én
   sammenhengende flate uten harde fargekutt. .cta-mork og .skogblokk bryter
   prinsippet fra før; F legger til tre kutt til. Begrunnelsen står i
   DESIGN.md under «Regler». Kort: kontaktsiden er den ene siden der
   handlingen ER innholdet, og skjemaet fortjener en flate det ikke må dele
   med noe annet. Stripa er lys fordi adresse, telefon og kartlenke leses
   best som mørk tekst på lys grunn — og fordi øyet trenger et pustepunkt
   etter et langt mørkt skjema.

   Alt her er farge, flate og geometri. Ingen bevegelse: null transform,
   null transition, null animation, null @keyframes. Hover endrer bare farge
   eller understrek. Helga satte ro-kravet, og hun har ikke sett F ennå.

   Fargene er paletten, ingen nye: var(--marine) #122638, #9cc3e8 (logoens
   lyse blå løftet til å lese mot marine — samme som .hode-mork bruker),
   #eef4f8 (dis), #e8f0f6 og #a9c0d2 (text.pa-mork / pa-mork-dempet).
   Kontrast mot marine: #fff ~16:1, #9cc3e8 ~7:1, #a9c0d2 ~8:1 — over AA. */

/* Den mørke flata: hode + skjema under ett tak. */
.kontakt-mork { background: var(--marine); color: #e8f0f6; }
.kontakt-mork .caps-liten { color: #9cc3e8; }
.kontakt-mork .ingress { color: #a9c0d2; }
.kontakt-mork h1.display, .kontakt-mork h2 { color: #fff; }

/* Typografisk åpning. 86 px og ikke 106 (som variant D hadde): hvit Hanken
   700 på marine blomstrer optisk og leses tyngre enn samme grad i mørk tekst
   på lyst — 106 px hvitt ble et rop. Sperringen er samtidig lettet fra
   -.035em til -.03em, fordi blomstringen lukker mellomrommene selv. 86 px er
   fortsatt godt over sidens etablerte mørke hero (.hode-mork: 72 px). */
.kontakt-hode { padding: clamp(44px, 7vh, 88px) 0 0; }
.kontakt-hode > .inner > .caps-liten { display: block; margin-bottom: 20px; }
.kontakt-hode-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: clamp(20px, 4vw, 64px);
  align-items: end;
  padding-bottom: clamp(22px, 4vh, 38px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.18);
}
.kontakt-hode h1 { font-size: clamp(38px, 6.2vw, 86px); letter-spacing: -0.03em; }
.kontakt-hode .ingress { font-size: 17px; max-width: 44ch; margin: 0; }
/* Skjemaet avslått (konfig.KONTAKTSKJEMA_PAA = False): den mørke flaten bærer bare
   hodet. Da trenger det luft under seg, og hårlinja skiller ikke lenger mot noe. */
.kontakt-mork--uten-skjema .kontakt-hode { padding-bottom: clamp(44px, 7vh, 88px); }
.kontakt-mork--uten-skjema .kontakt-hode-grid { padding-bottom: 0; border-bottom: 0; }

/* Skjemaet på mørk grunn. Feltene beholder hårlinjene sine, bare lysere. */
.kontakt-skjemablokk { padding: clamp(28px, 5vh, 54px) 0 clamp(52px, 8vh, 88px); }
.kontakt-skjemablokk .kontaktskjema { max-width: 900px; }
.kontakt-mork .kontaktskjema .felt > label { color: #9cc3e8; }
.kontakt-mork .kontaktskjema input,
.kontakt-mork .kontaktskjema textarea { color: #fff; border-bottom-color: rgba(255, 255, 255, 0.28); }
.kontakt-mork .kontaktskjema input:focus,
.kontakt-mork .kontaktskjema textarea:focus { border-bottom-color: #9cc3e8; }
.kontakt-mork .kontaktskjema input:focus-visible,
.kontakt-mork .kontaktskjema textarea:focus-visible { outline-color: #9cc3e8; }
.kontakt-mork .kontaktskjema input[type="checkbox"] { accent-color: #9cc3e8; }
.kontakt-mork .kontaktskjema input[type="radio"] { accent-color: #9cc3e8; }
.kontakt-mork .skjema-valg legend { color: #9cc3e8; }
.kontakt-mork .skjema-valg label { color: #fff; }
.kontakt-mork .skjema-hjelp { color: #a9c0d2; }
/* Samtykket skal være rolig sekundærtekst, ikke aksentblått. Det trenger
   ingen versal-nullstilling her: regelen lenger oppe treffer bare
   `.felt > label`, og samtykkelabelen ligger ikke i en .felt. */
.kontakt-mork .skjema-samtykke { color: #a9c0d2; }
.kontakt-mork .skjema-samtykke a { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.kontakt-mork .knapp-fylt { background: #fff; border-color: #fff; color: var(--marine); }
.kontakt-mork .knapp-fylt:hover { background: #9cc3e8; border-color: #9cc3e8; color: var(--marine); }

/* Den lyse stripa. Ingen toppstrek: fargeskiftet fra marine til dis ER
   kanten. Punktene gjenbruker .info-punkt (det er ankeret redigerings-
   panelet leter etter), så basisregelens border-top og padding må nullstilles
   og byttes med en loddrett skillestrek. */
.kontakt-stripe { background: #eef4f8; padding: clamp(34px, 5.5vh, 60px) 0 clamp(36px, 6vh, 64px); }
.stripe-hode { max-width: 640px; margin-bottom: clamp(22px, 3.5vh, 34px); }
.stripe-hode .blokk-hode { margin-bottom: 0; }
.stripe-hode .caps-liten { display: block; margin-bottom: 12px; color: var(--sjo-mork); }
.stripe-hode h2 { font-size: clamp(19px, 2vw, 24px); margin-bottom: 10px; }
.stripe-hode p { font-size: 15px; color: var(--dempet); }
.stripe-rad { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--strek); }
.stripe-rad .info-punkt { padding: 18px clamp(14px, 2vw, 28px) 20px; border-top: 0; border-left: 1px solid var(--strek-svak); }
.stripe-rad .info-punkt:first-child { border-left: 0; padding-left: 0; }
.stripe-rad .info-punkt .caps-liten { display: block; margin-bottom: 6px; color: var(--sjo-mork); }
/* .info-punkt a er 18 px (0-1-1). Fire lenker i én rad tåler ikke det, så
   denne må ha to klasser for å vinne — .stripe-punkt a ville tapt. */
.stripe-rad .info-punkt a { font-weight: 700; font-size: 15.5px; text-decoration: none; overflow-wrap: anywhere; }
.stripe-rad .info-punkt a:hover { color: var(--sjo-mork); text-decoration: underline; text-underline-offset: 3px; }
.stripe-rad .info-punkt p { font-size: 14.5px; color: var(--dempet); }
.stripe-rad .info-punkt a.adresse-lenke { font-size: 14.5px; }
@media (max-width: 900px) {
  .kontakt-hode-grid { grid-template-columns: 1fr; align-items: start; gap: 18px; }
  .stripe-rad { grid-template-columns: 1fr 1fr; }
  .stripe-rad .info-punkt:nth-child(3) { border-left: 0; padding-left: 0; }
  .stripe-rad .info-punkt:nth-child(n+3) { border-top: 1px solid var(--strek-svak); }
}
@media (max-width: 560px) {
  .stripe-rad { grid-template-columns: 1fr; }
  .stripe-rad .info-punkt { border-left: 0; padding-left: 0; border-top: 1px solid var(--strek-svak); }
  .stripe-rad .info-punkt:first-child { border-top: 0; }
}

/* ---------- 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: clamp(640px, 88vh, 860px); border: 0; display: block; }
/* Helga 28.09.2026: «så stort det feltet der nede» — EasyPractice-rammen har fast
   høyde, og skjemasteget fyller bare halvparten. EasyPractice sitt eget skript endrer
   IKKE høyden (det sender bare sporing), så rammen kan ikke måle seg selv. På PC
   senkes høyden; kalendersteget ruller da innvendig ved behov. På mobil stables
   stegene og trenger full høyde. */
@media (max-width: 720px) { .booking-innbygging iframe { height: 1000px; } }
.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: background-color 0.35s ease, border-left-color 0.35s ease;
}
.sitat-band.lys .sitat-rute { background: var(--bunn); }
/* Helga 09.09: samme hover som «Hva skjer i terapien» (.pro-kol): bakgrunn og
   skillestrek tar farge, ingen bevegelse, ingen skygge. */
.sitat-rute:hover, .sitat-band.lys .sitat-rute:hover { background-color: #dbe8f1; border-left-color: var(--sjo); }  /* --is fra DESIGN.md: tydelig lyseblå, ikke 4 %-skjær */
.sitat-rute:hover figcaption { color: var(--sjo-mork); }
.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);
}
/* Helga 09.09: samme pluss som Tjenester på forsiden (.tj-pluss: hvitt kryss på
   fylt sjøblå sirkel som roterer 45°), skalert til FAQ-radens 28 px-kolonne.
   Tekst-plusset i markupen skjules med font-size 0; krysset tegnes med ::before/::after. */
.qa-pil { justify-self: end; align-self: center; position: relative; width: 26px; height: 26px; border-radius: 50%;
  background: var(--sjo); font-size: 0; line-height: 1; flex-shrink: 0; transition: transform 0.25s ease; }
.qa-pil::before, .qa-pil::after { content: ""; position: absolute; background: #fff; }
/* Prosent-sentrert så krysset står midt i sirkelen uansett størrelse (forsiden
   krymper sirkelen til 24 px). */
.qa-pil::before { left: calc(50% - 1px); top: calc(50% - 6px); width: 2px; height: 12px; }
.qa-pil::after { top: calc(50% - 1px); left: calc(50% - 6px); height: 2px; width: 12px; }
.qa-sporsmal[open] .qa-pil { transform: rotate(45deg); }
/* Utdanning og erfaring som to kolonner (om-siden, Helga 09.09 — om-cv-r1 variant B).
   To trekkspill side om side; radene inni bruker kval-liste, plusset er FAQ-ens sirkel. */
  .cv-kolonner .blokk-hode { margin-bottom: clamp(18px, 3vh, 28px); }
.cv-kol-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px; align-items: start; }
.cv-kol { background: var(--hvit); border: 1px solid var(--strek-svak); border-left: 3px solid var(--sjo); border-radius: 3px; }
.cv-kol summary { grid-template-columns: 1fr 28px; padding: 20px 20px; }
.cv-kol summary h3 { font-size: 18px; }
.cv-kol .qa-svar { padding: 0 20px 8px; }
.cv-kol .kval-rad { grid-template-columns: 1fr; gap: 6px; }
.cv-kol .kval-merke { justify-self: start; }
.cv-kol .kval-rad:last-child { border-bottom: none; }  /* ingen strek under siste rad (Helga 09.09) */
@media (max-width: 760px) { .cv-kol-grid { grid-template-columns: 1fr; } }

.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-mork h2 .serif-myk { color: var(--hvit); }  /* Helga 09.09: «noe for deg?» hvit, ikke mørkeblå, på mørk CTA — alle sider */
/* .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
   (blå venstrestrek på lys bunn — samme språk som .skjema-svar) 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; }

/* Prisradene reagerer som på forsiden (Helga 09.09): lyseblå ved hover, og hele
   raden er klikkbar til booking via .pris-klikk-overlegget. Flyttet hit fra
   forsidens inline-CSS så prissiden får det samme. */
.pris-liste li { position: relative; transition: background .16s ease; border-radius: 4px; }
.pris-liste li:hover { background: color-mix(in srgb, var(--sjo) 9%, #ffffff); }
.cta .pris-liste li:hover, .cta-mork .pris-liste li:hover { background: rgba(255,255,255,.07); }
.pris-klikk { position: absolute; inset: 0; z-index: 1; }

/* Tjenester som pluss-trekkspill (forsidens k-tj-pop, Helgas variant B) — nå i
   stil.css så prissiden kan bruke det (09.09). */
.k-tj-pop summary { display: flex; align-items: center; gap: 18px; cursor: pointer; list-style: none; padding: 20px 0; }
.k-tj-pop summary::-webkit-details-marker { display: none; }
.k-tj-pop .tj-rad { border-bottom: 1px solid var(--strek); }
.k-tj-pop .tj-rad h3 { margin: 0; flex: 1; }
.k-tj-pop .tj-pluss { margin-left: auto; flex-shrink: 0; position: relative; transition: transform .2s ease; width: 34px; height: 34px; border-radius: 50%; background: var(--sjo); }
.k-tj-pop .tj-pluss::before, .k-tj-pop .tj-pluss::after { content: ""; position: absolute; background: #fff; }
.k-tj-pop .tj-pluss::before { left: 16px; top: 9px; width: 2px; height: 16px; }
.k-tj-pop .tj-pluss::after { top: 16px; left: 9px; height: 2px; width: 16px; }
.k-tj-pop .tj-rad[open] .tj-pluss { transform: rotate(45deg); }
.k-tj-pop .tj-intro { padding: 0 0 22px; max-width: 640px; }
.k-tj-pop .tj-intro p { color: var(--dempet); margin: 0 0 10px; }
.k-tj-pop .tj-lesmer { color: var(--sjo-mork); font-weight: 600; text-decoration: none; }
.k-tj-pop .tj-lesmer:hover { text-decoration: underline; text-underline-offset: 4px; }
.k-tj-pop summary:hover { background: color-mix(in srgb, var(--sjo) 7%, transparent); }

/* Helga 09.09: blokkene som mistet tallet (terapi, ungdom, forsidens «Kjenner du
   deg igjen») får kartleggingsradens språk — sjøfarget strek i venstre kant og
   isblå flate ved hover. Kun TEKSTKOLONNEN (.nr:empty + div) får det, så bildet
   i .split-blokkene står urørt. Negativ margin = teksten står der den sto. */
.beh-detalj > .nr:empty + div {
  position: relative; padding: 8px 18px 8px 22px; margin: -8px 0 -8px 0;  /* streken på linje med de vannrette strekene (Helga 09.09), ikke ute i margen */
  border-radius: 3px; transition: background-color 0.35s ease;
}
.beh-detalj > .nr:empty + div::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 2px; background: var(--sjo);  /* hele flatens høyde — Helga 09.09 */
}
/* Samme tone som kartleggingsraden på forsiden (color-mix 9 % sjø i hvitt). */
@media (hover: hover) { .beh-detalj > .nr:empty + div:hover { background-color: color-mix(in srgb, var(--sjo) 9%, #ffffff); } }
/* Uten tall er 90 px-kolonnen bare luft som skyver teksten til høyre (Helga
   09.09, «Unge kan streve med»). Kollapses — som forsiden gjør inline — så
   teksten starter på sidens venstrekant og streken står 22 px ute i margen,
   samme uttrekk som kartleggingsraden. Split-reglene kun over brytpunktet. */
.beh-detalj:has(> .nr:empty) { grid-template-columns: 1fr; }
.beh-detalj:has(> .nr:empty) > .nr { display: none; }
/* Mobil: 20 px gutter — 22 px uttrekk la streken utenfor skjermen (målt x=-2 på
   390). Samme reduserte uttrekk som kartleggingsraden (--uttrekk: 14px). */
@media (max-width: 720px) { .beh-detalj > .nr:empty + div { padding-left: 14px; padding-right: 10px; } }
@media (min-width: 901px) {
  .beh-detalj.split:has(> .nr:empty) { grid-template-columns: minmax(0, 1fr) minmax(0, 420px); }
  .beh-detalj.split:has(> .nr:empty) > div:not(.bilde) { grid-column: 1; }
  .beh-detalj.split:has(> .nr:empty) > .bilde { grid-column: 2; }
  .beh-detalj.split.bilde-venstre:has(> .nr:empty) { grid-template-columns: minmax(0, 420px) minmax(0, 1fr); }
  .beh-detalj.split.bilde-venstre:has(> .nr:empty) > .bilde { grid-column: 1; }
  .beh-detalj.split.bilde-venstre:has(> .nr:empty) > div:not(.bilde) { grid-column: 2; }
}
.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; }
}

/* «Les 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); }
/* Helga 20.09.2026: knappen heter «Les mer», ikke «Vis mer», og plusstegnet
   er borte. Sto før som sideoverstyring i ungdom.html og
   gestaltterapeut-psykolog-bup.html — de eneste sidene med .mer. */
.beh-detalj .mer summary span::before { content: "Les mer"; }
.beh-detalj .mer[open] summary span::before { content: "Vis mindre"; }
.beh-detalj .mer summary::after { content: none; }
.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. 03.09-versjonen satte inline-block og
   la dermed alle lenkene i en kolonne på ÉN linje — «Terapi Ungdomsterapi
   Parterapi Priser Book time» leste som én setning (Helga, 09.09). block gir
   én lenke per rad slik regel 633 mente; margin 0 fordi padding alene gir
   36 px. Tydelig understrek i tekstens egen farge (Lånekassen-stil, Helga
   09.09 — den dempede varianten var for svak), tykkere på hover. */
.footer-inner a { padding: 6px 0; margin-bottom: 0; display: block;
  text-decoration: underline; text-decoration-color: currentColor; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.footer-inner a:hover { text-decoration-thickness: 2px; }
/* 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); }
/* Bylinen fikk tre ledd 23.09.2026 (SEO, quick 260919-msm): dato,
   forfatter og lesetid. Lesetiden sto foer i .skribent, som gjorde at
   forfatteren ikke sto noe sted. Samme dempede stil som .skribent —
   ingen nye tokens, ingen ny farge. */
.artikkel-meta .lesetid { 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-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; }
}

/* ====== MOBILAUDIT 10.09 (390 px, tolv sider) — kun under 720 px ======
   Funn: ingen overflow, ingen uskarpe bilder. Tekstlenkene som står alene
   («Les mer →», «Book samtale →», tel/e-post, «Se priser og varighet») var
   18–22 px høye — under 36 px trykkflate. Småtekst løftes litt. */
@media (max-width: 720px) {
  /* `:not(.knapp)` på .info-punkt a OG .kontakt-kolonner a lagt til 21.09.2026:
     booking fikk en ekte knapp inne i et .info-punkt, som igjen ligger inne i
     .kontakt-kolonner. Begge regelhodene er (0-1-1) og slo knappens egen
     `inline-flex` + `13px 24px` (0-1-0) — knappen ble en naken tekstlinje uten
     sidepolstring under 720 px. Målt i nettleser: 8px 0px før, 13px 24px etter.
     Samme grep som .qa-svar allerede brukte. Booking er i dag den eneste siden
     med en .knapp inne i .kontakt-kolonner, så ingen andre sider berøres. */
  .tj-lesmer, .pris-lenke, .qa-svar a:not(.knapp), .info-punkt a:not(.knapp), .mikro a, .m-lurer-lenke, .sh-fakta a,
  .kontakt-kolonner a:not(.knapp), .tussi-tekst a, .qa-blokk-hode a { display: inline-block; padding: 8px 0; }
  .pris-under { font-size: 13.5px; }
  .kval-rad p { font-size: 14.5px; }
}

/* ==================================================================
   HELGA 20.09.2026 — flyttet hit fra sidenes egne <style>-blokker
   (booking, gestaltterapeut-psykolog-bup, om, par,
   terapeut-eller-psykolog, terapi, ungdom). Arkitekturen tillater
   ikke <style> per side; index.html er eneste unntak (generatorens
   egen blokk). Seksjonen står SIST i filen, så den vinner over
   tidligere regler ved lik spesifisitet — nøyaktig som blokkene
   gjorde da de lå i <head> etter <link rel="stylesheet">.
   ================================================================== */

/* ---------- Adresselenken under «Sted» (booking + par) ----------
   Begge understreker. Bare booking arver tekstfargen og tykner
   understreken på hover. Markupen skiller dem: på booking ligger
   lenken inne i en <p>, på par er den direkte søsken av <p>-en. */
/* Helga 24.09: «Sted» paa priser skulle ha samme understrekede kartlenke som
   booking og parterapi. Selektoren gjaldt bare .info-punkt; priser-sidefeltet
   bruker .praktisk-rad, derfor begge her. */
.info-punkt a.adresse-lenke,
.praktisk-rad a.adresse-lenke { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.praktisk-rad a.adresse-lenke { font-weight: 700; color: inherit; }
.info-punkt p > a.adresse-lenke { font-weight: 700; color: inherit; }
.info-punkt p > a.adresse-lenke:hover { text-decoration-thickness: 2px; }

/* ---------- Knapp inne i en infoboks (booking: «Ta kontakt») ----------
   Helga 21.09: folk skjønner ikke at tekstlenken til kontaktskjemaet ER en
   lenke. Den er byttet med en ekte knapp. Men `.info-punkt a` er 18 px
   (0-1-1) og slår `.knapp` sin 12 px (0-1-0), så uten denne regelen blir
   knappeteksten halvannen gang for stor og sprenger knappen. */
.info-punkt a.knapp { font-size: 12px; margin-top: 6px; }

/* ---------- Hodebanner rett under ingressen ----------
   .hode-banner alene = KUN mobil (terapi, ungdom,
   terapeut-eller-psykolog viser bildet i split-blokken på PC).
   .hode-banner-bred vises også på PC, som et bredt utsnitt innenfor
   margene (gestaltterapeut-psykolog-bup har ingen split-blokk).
   På mobil er begge kant til kant, uten beskjæring og hjørner. */
.hode-banner { display: none; }
.hode-banner-bred { display: block; margin-top: 32px; }
.hode-banner-bred img { display: block; width: 100%; aspect-ratio: 2.4; object-fit: cover; object-position: 50% 35%; border-radius: 6px; }
@media (max-width: 820px) {
  .hode-banner { display: block; width: calc(100% + 2 * clamp(20px, 3.5vw, 40px)); margin: 28px 0 -8px calc(-1 * clamp(20px, 3.5vw, 40px)); }
  .hode-banner img { display: block; width: 100%; height: auto; }
  .hode-banner-bred img { aspect-ratio: auto; height: auto; object-fit: fill; border-radius: 0; }
  /* Når banneret overtar på mobil, skjules split-blokkens eget bilde.
     De tre sidene har nøyaktig ett .bilde hver, og det ligger i
     .beh-detalj.split — ingen andre sider har class="bilde". */
  .beh-detalj.split .bilde { display: none; }
}

/* ---------- Parterapi: hodebildet som banner på mobil ----------
   .hode-mork-bilde brukes kun av par.html. PC uendret. */
@media (max-width: 820px) {
  .hode-mork-bilde { width: calc(100% + 2 * clamp(20px, 3.5vw, 40px)); margin-left: calc(-1 * clamp(20px, 3.5vw, 40px)); }
  .hode-mork-bilde img { aspect-ratio: auto; height: auto; object-fit: fill; border-radius: 0; }
  .hode-mork-bilde::before { display: none; }
}

/* ---------- Sitatveggen «Se hva andre sier» ----------
   Sto før bare i forsidens egen <style>-blokk. par.html bruker den nå
   også, derfor hører den hjemme her. Index beholder sin egen kopi. */
.k-sitater .blokk-hode h2 { font-size: clamp(21px, 2.2vw, 27px); }
.k-sitater .blokk-hode { margin-bottom: clamp(24px, 3.5vh, 36px); }

/* ---------- Om-siden: tre trekkspill (Utdanning / Erfaring / Relevante kurs) ----------
   .cv-kol-grid brukes kun av om.html. */
.cv-kol-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 900px) { .cv-kol-grid { grid-template-columns: 1fr; } }

/* ---------- Om-siden, kun mobil: bildet av Helga rett under
   «Gestaltterapeut MNGF», før avsnittene. Tekst-wrapperen løses opp med
   display: contents, og rekkefølgen styres med order.
   ⚠️ Scopet til .k-helga, IKKE .skogblokk: index (.k-rom/.k-rom2) og
   ungdom (.k-rom-ung) bruker samme .skogblokk .inner-struktur, og en
   naken .skogblokk .inner-regel ville rasert dem på mobil. */
@media (max-width: 900px) {
  .k-helga img.helga-hel { border-radius: 0; order: 3; margin: 6px 0 18px; }
  .k-helga .inner { row-gap: 0; }
  .k-helga .inner > div.fade { display: contents; }  /* ikke img.fade! */
  .k-helga .inner > .fade > .caps-liten { order: 1; }
  .k-helga .inner > .fade > h2 { order: 2; }
  .k-helga .inner > .fade > p, .k-helga .inner > .fade > .sitat { order: 4; }
}

/* ---------- Tussi-båndet, kun mobil (om + ungdom) ----------
   tekst → Tussi-bildet → fakta-ordene (Liten, Rolig …). Sto ordrett
   likt i begge sidenes <style>-blokker — her står den én gang. */
@media (max-width: 900px) {
  .tussi-band { display: flex; flex-direction: column; padding: clamp(24px, 3vw, 40px); }
  .tussi-tekst { display: contents; }
  .tussi-tekst > .caps-liten { order: 1; }
  .tussi-tekst > h2 { order: 2; }
  .tussi-tekst > p { order: 3; }
  .tussi-bilde { order: 4; margin: 4px calc(-1 * clamp(24px, 3vw, 40px)) 18px; }
  .tussi-bilde img { height: auto; aspect-ratio: 4/3; }
  .tussi-fakta { order: 5; border-top: none; padding-top: 0; }
}

/* ---------- Ungdom: kontorbildet i «Et rom som kjennes trygt» er
   banner på mobil — kant til kant, samme 16:10-utsnitt som forsiden
   (uten tak og stolbein). .k-rom-ung brukes kun av ungdom.html. */
@media (max-width: 900px) {
  .k-rom-ung .rom-komposisjon { width: calc(100% + 2 * clamp(20px, 3.5vw, 40px)); margin-left: calc(-1 * clamp(20px, 3.5vw, 40px)); }
  .k-rom-ung .rom-stor { border-radius: 0; aspect-ratio: 16/10; object-position: 50% 51%; }
}

/* Helga 01.10.2026 (quick 261001-cyf): Synnøve Seims sitat i ungdomssidens
   første bolk — forsidens sitat (skog-flate, sjø-strek, versal-avsender) som
   innfelt boks. Ingen nye farger. Kontrast mot --skog: tekst 13,2:1,
   avsender 7,0:1. Streken er dekor, som på forsiden. */
.ung-sitat { margin: 24px 0 28px; padding: clamp(20px, 2.6vw, 30px) clamp(20px, 2.8vw, 34px);
  max-width: 620px; background: var(--skog); border-radius: 3px; }
.ung-sitat-tekst { margin: 0; padding-left: 18px; border-left: 2px solid var(--sjo);
  font-family: "Figtree", sans-serif; font-weight: 500; font-size: clamp(17px, 1.8vw, 21px);
  line-height: 1.55; color: var(--bunn-lys); }
.ung-sitat-avsender { display: block; margin-top: 12px; padding-left: 20px; font-size: 13px;
  letter-spacing: 0.08em; text-transform: uppercase; color: #a9c0d2; }  /* text.pa-mork-dempet */