/* =========================================================
   Otto Stormyr — terapi og samtaler
   Design: varm, rolig, relasjonell. Kystlys fra Helgeland.
   Ett bevisst lyst univers — ingen mørk modus (se README-notat).
   ========================================================= */

/* ---------- fonter (selvhostet, ingen tredjeparts CDN-kall) ---------- */
@font-face{
  font-family:'Newsreader';
  font-style:normal;
  font-weight:400 700;
  font-display:swap;
  src:url('../fonts/newsreader-variable.woff2') format('woff2');
}
@font-face{
  font-family:'Newsreader';
  font-style:italic;
  font-weight:400;
  font-display:swap;
  src:url('../fonts/newsreader-italic.woff2') format('woff2');
}
@font-face{
  font-family:'Karla';
  font-style:normal;
  font-weight:300 800;
  font-display:swap;
  src:url('../fonts/karla-variable.woff2') format('woff2');
}

/* ---------- tokens ---------- */
:root{
  --ink:#172023;
  --ink-soft:#48534f;
  --ink-faint:#5A6862; /* WCAG AA: 4.99 on paper, 5.43 on raised, 4.57 on deep */

  --paper:#EAEEEB;
  --paper-raised:#F5F7F4;
  --paper-deep:#DFE5E0;

  --line:rgba(23,32,35,0.13);
  --line-strong:rgba(23,32,35,0.24);

  --accent:#3E6763;
  --accent-dark:#2C4C49;
  --accent-ink:#F1F6F4;
  /* VARMT — én verdi til dekor, én til tekst.
     Det fantes tidligere to nesten like dekorvarmer: #B47A52 i stilarket og
     #C48456 i gløden i heroen, som logoen også bruker. Forskjellen var knapt
     synlig, så de er slått sammen til logoens verdi. Merket og siden deler nå
     samme varme. */
  --varm:#C48456;        /* dekor og høyre bue i logoen — aldri tekst, 2,4:1 */
  --varm-lys:#D9A98A;    /* samme tone lysnet, for mørk bunn */
  --varm-tekst:#8A5533;  /* eneste varme som holder som tekst: 5,23 / 4,79 / 5,69 */


  /* ===== AVSTANDSSKALA. Lagt inn 3. nov. 2026 =====
     Før dette styrte 49 ulike clamp()-verdier rytmen mellom bolkene, med
     fjorten forskjellige stigninger (2vw, 2.4, 2.6, 3, 3.4 …). Hver var
     håndjustert, og summen var at ingen to bolker pustet likt.
     Åtte trinn på én felles stigning. Trenger du en ny avstand, legg til
     et trinn her. Ikke skriv en clamp() ute i en regel igjen.
     Em-baserte marginer er med vilje IKKE tokenisert: de er typografiske
     og skal følge skriften i sitt eget element. */
  --rytme-1:clamp(18px, 2.4vw, 26px);
  --rytme-2:clamp(24px, 3.2vw, 36px);
  --rytme-3:clamp(28px, 3.8vw, 46px);
  --rytme-4:clamp(32px, 4.4vw, 58px);
  --rytme-5:clamp(36px, 5vw, 66px);
  --rytme-6:clamp(40px, 5.6vw, 76px);
  --rytme-7:clamp(50px, 6.6vw, 88px);
  --rytme-8:clamp(80px, 11vw, 150px);

  --radius-sm:3px;
  --radius:6px;
  --shadow-soft:0 1px 2px rgba(15,20,22,0.05);
  --shadow-lift:0 18px 40px -20px rgba(15,20,22,0.35);

  --serif:'Newsreader', Georgia, 'Iowan Old Style', serif;
  --sans:'Karla', -apple-system, 'Segoe UI', Roboto, sans-serif;

  /* ===== TEKSTSKALA. Lagt inn 3. nov. 2026 =====
     Før dette fantes 127 font-size-regler med 56 ulike verdier, og ingen
     skala. På forsiden ga det 40 ulike gjengitte størrelser ved 1440 px,
     deriblant 0.94, 0.95, 0.96, 0.97, 0.98 og 1rem side om side.
     Bruk ALLTID et trinn herfra. Trenger du noe som ikke finnes, legg til
     et trinn her i stedet for å skrive en løsverdi i en regel. */
  --t-3xs:0.72rem;
  --t-2xs:0.8rem;
  --t-xs:0.86rem;
  --t-sm:0.94rem;
  --t-md:1rem;
  --t-lg:1.08rem;
  --t-xl:1.2rem;
  --t-2xl:1.4rem;

  /* Flytende overskrifter. --d-1 og --d-sitat er signaturstørrelser med
     egen stigning, og skal ikke presses inn i rekken. */
  --d-1:clamp(2.5rem, 6vw, 4.1rem);
  --d-2:clamp(2.2rem, 5.2vw, 3.6rem);
  --d-3:clamp(2.05rem, 4.3vw, 2.95rem);
  --d-4:clamp(1.85rem, 3.3vw, 2.6rem);
  --d-5:clamp(1.55rem, 2.7vw, 2.1rem);
  /* Minimum er 1.18rem og ikke 1.2: ingressen i heroen lå på 1.18rem, og
     1,7 % mer skrift tippet den over til en femte linje på 375 piksler.
     Det kostet 32 piksler rett over «Send en henvendelse». Målt. */
  --d-6:clamp(1.18rem, 2.2vw, 1.58rem);
  --d-7:clamp(1.05rem, 2vw, 1.25rem);
  --d-sitat:clamp(1.6rem,3.6vw,2.6rem);

  /* Linjeavstand. Fire trinn erstatter seksten løsverdier. */
  --lh-display:1.15;
  --lh-heading:1.25;
  --lh-body:1.45;
  --lh-loose:1.6;

  --container:1180px;
  --gutter:clamp(20px, 5vw, 56px);
  /* Avstanden over og under hver bolk. To bolker etter hverandre gir det
     doble — så 96 px her betyr 192 px mellom dem på en bred skjerm. Var 150,
     og det ble for mye luft på store skjermer: bolkene mistet sammenhengen
     og siden føltes lengre enn den er. */
  --section-y:clamp(60px, 7vw, 96px);
}

/* ---------- reset ---------- */
*, *::before, *::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; overflow-x:hidden; }
/* Toppmenyen er festet og 78 piksler høy. Uten denne linjen legger nettleseren
   ankeret helt øverst i vinduet, og overskriften blir liggende bak menyen.
   Gjaldt alle ankrene på siden, ikke bare det nyeste: «Slik jobber jeg» landet
   også delvis under menyen. Oppdaget da lenken fra forsidens FAQ til
   /ungdom#taushet ble testet. */
:target{ scroll-margin-top:96px; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *, *::before, *::after{
    animation-duration:0.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:0.001ms !important;
    transition-delay:0ms !important;
    scroll-behavior:auto !important;
  }
}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  font-size:16.5px;
  line-height:var(--lh-loose);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  /* Sikkerhetsnett for dekor som blør ut av seksjonen sin (f.eks. gløden bak
     portrettet). hidden gjør body til en rullebeholder, og da slutter
     position:sticky å virke for alt inni. clip klipper likt uten den bivirkningen.
     hidden står igjen som reserve for eldre nettlesere uten clip-støtte. */
  overflow-x:hidden;
  overflow-x:clip;
}
img{ max-width:100%; display:block; }
a{ color:inherit; }
h1,h2,h3,h4,h5,h6,p,ul,ol,dl,figure{ margin:0; }
ul{ padding:0; list-style:none; }
button{ font:inherit; }

.container{
  max-width:var(--container);
  margin:0 auto;
  padding:0 var(--gutter);
}

a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:3px;
  border-radius:2px;
}

.skip-link{
  position:absolute; left:-9999px; top:auto;
  background:var(--ink); color:var(--paper);
  padding:12px 18px; z-index:200; border-radius:0 0 6px 0;
}
.skip-link:focus{ left:0; top:0; }

/* Etiketten er leire, ikke grønn. Da får de to fargene hver sin oppgave:
   grønt betyr at noe kan gjøres — knapper, lenker, merket — mens leire markerer
   hvor på siden man befinner seg. Var begge grønne, gjorde etiketten ingen jobb
   som ikke allerede var gjort. Streken er 1px og forlenget til 32px: en lengre
   hårstrek leser mer bevisst enn en kort og tykk. */
.eyebrow{
  font-family:var(--sans); font-weight:700; font-size:var(--t-2xs);
  letter-spacing:0.11em; text-transform:uppercase; color:var(--varm-tekst);
  /* flex, ikke inline-flex: med inline-flex vokser beholderen forbi skjermkanten
     i stedet for å brekke teksten, og lange etiketter blir kuttet på mobil. */
  display:flex; align-items:flex-start; gap:12px;
  line-height:var(--lh-body);
}
.eyebrow::before{
  content:''; width:32px; height:1px; background:var(--varm);
  display:block; flex:none;
  /* Streken skal ligge midt på den FØRSTE linjen, ikke midt i en tolinjers
     blokk. Derfor flex-start over, og en halv linjehøyde ned her. */
  margin-top:0.72em;
}

.section-head{
  max-width:640px; margin-bottom:var(--rytme-5);
}
.section-head h2{
  font-family:var(--serif); font-weight:600; letter-spacing:-0.01em;
  font-size:var(--d-4); line-height:var(--lh-display);
  margin-top:0.5em; text-wrap:balance;
}
/* Etiketten er også et <p> inne i .section-head, og denne regelen slo den på
   spesifisitet — den fikk aldri fargen sin. Unntaket retter årsaken i stedet for
   å legge på enda en regel som vinner kappløpet. */
.section-head p:not(.eyebrow){
  margin-top:1em; color:var(--ink-soft); font-size:var(--t-md); max-width:56ch;
}

/* heading word-reveal: each word rises out of a mask on scroll-in,
   staggered per word via inline transition-delay set in JS. Degrades
   to plain static text with no JS. */
.word-mask{ display:inline-block; overflow:hidden; vertical-align:top; }
.word-mask .word{
  display:inline-block; transform:translateY(112%);
  transition:transform .7s cubic-bezier(.22,1,.36,1);
}
.word-reveal.is-visible .word-mask .word{ transform:translateY(0); }

/* buttons */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  font-family:var(--sans); font-weight:600; font-size:var(--t-sm);
  padding:14px 26px; border-radius:999px; text-decoration:none;
  border:1px solid transparent; cursor:pointer;
  transition:transform .25s ease, background-color .25s ease, box-shadow .25s ease, border-color .25s ease;
  white-space:nowrap;
}
.btn-primary{
  background:var(--accent); color:var(--accent-ink);
  box-shadow:var(--shadow-soft);
  position:relative; overflow:hidden;
}
.btn-primary:hover{ background:var(--accent-dark); transform:translateY(-1px); box-shadow:var(--shadow-lift); }
/* lys som samler seg nedenfra i knappen — ingen sveip over flaten,
   bare en svak dybde som slår inn på hover */
.btn-primary::after{
  content:''; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(135% 115% at 50% 138%,
    rgba(255,255,255,0.30), rgba(255,255,255,0) 62%);
  opacity:0; transition:opacity .45s ease;
}
.btn-primary:hover::after{ opacity:1; }
@media (prefers-reduced-motion: reduce){
  .btn-primary::after{ transition:none; }
}
.btn-ghost{
  background:transparent; color:var(--ink); border-color:var(--line-strong);
}
.btn-ghost:hover{ border-color:var(--ink); background:rgba(23,32,35,0.04); }
.btn-block{ width:100%; }
.btn-sm{ padding:10px 18px; font-size:var(--t-xs); }

/* =========================================================
   HEADER / NAV
   ========================================================= */
.site-header{
  position:sticky; top:0; z-index:100;
  background:rgba(234,238,235,0.82);
  backdrop-filter:blur(10px) saturate(1.1);
  -webkit-backdrop-filter:blur(10px) saturate(1.1);
  border-bottom:1px solid transparent;
  transition:border-color .3s ease, box-shadow .3s ease;
}
.site-header.is-scrolled{
  border-bottom-color:var(--line);
  box-shadow:0 8px 24px -18px rgba(15,20,22,0.4);
}
.nav{
  display:flex; align-items:center; justify-content:space-between;
  padding:16px var(--gutter); max-width:var(--container); margin:0 auto;
}
.brand{
  font-family:var(--serif); font-weight:600; font-size:var(--t-xl);
  text-decoration:none; color:var(--ink); letter-spacing:-0.01em;
}
/* navnet må ligge i ÉN flex-boks — ellers blir «Otto» og «Stormyr» to
   separate flex-elementer og får både ordmellomrom og flex-gap mellom seg */
.brand-name{ white-space:nowrap; }
.brand-accent{ color:var(--accent); }
.nav-links{
  display:flex; align-items:center; gap:var(--rytme-1);
}
.nav-links a{
  text-decoration:none; font-size:var(--t-sm); color:var(--ink-soft);
  padding:6px 2px; position:relative;
}
.nav-links a::after{
  content:''; position:absolute; left:0; right:0; bottom:-2px; height:1px;
  background:var(--accent); transform:scaleX(0); transform-origin:left;
  transition:transform .25s ease;
}
.nav-links a:hover, .nav-links a.is-active{ color:var(--ink); }
.nav-links a:hover::after, .nav-links a.is-active::after{ transform:scaleX(1); }
.nav-cta{ display:flex; align-items:center; gap:14px; }
/* min-height, ikke mer polstring. Knappen var 40 piksler høy, og både Apple og
   Google setter 44 som nedre grense for en trykkflate. Polstring ville også gjort
   den bredere, og .nav-cta ligger allerede tett på kanten ved 320 piksler. */
.nav-cta .btn{ padding:10px 20px; font-size:var(--t-xs); min-height:44px; }

/* 44 × 44 av samme grunn. Ikonet er 24 piksler; resten er trykkflate rundt det,
   ikke synlig polstring. */
.menu-toggle{
  display:none; background:none; border:0; padding:8px; cursor:pointer;
  min-width:44px; min-height:44px; align-items:center; justify-content:center;
}
.menu-toggle svg{ width:24px; height:24px; }

@media (max-width:860px){
  .nav-links{
    position:fixed; inset:64px 0 auto 0; margin:0 12px;
    background:var(--paper-raised); border:1px solid var(--line);
    border-radius:var(--radius); box-shadow:var(--shadow-lift);
    flex-direction:column; align-items:stretch; padding:14px;
    transform:translateY(-12px); opacity:0; pointer-events:none;
    transition:transform .25s ease, opacity .25s ease;
  }
  .nav-links.is-open{ transform:translateY(0); opacity:1; pointer-events:auto; }
  .nav-links a{ padding:12px 10px; border-radius:4px; }
  .nav-links a:hover{ background:rgba(23,32,35,0.05); }
  .nav-links a::after{ display:none; }
  .nav-cta .btn-ghost{ display:none; }
  .menu-toggle{ display:inline-flex; }
}

/* =========================================================
   HERO
   ========================================================= */
.hero{
  position:relative; overflow:hidden;
  padding:clamp(64px, 11vw, 140px) 0 var(--section-y);
}
/* HØYDEN MÅ IKKE AVHENGE AV HEROEN. Rettet 3. nov. 2026.
   Dette sto `inset:-18%`. Prosent i `top` og `bottom` regnes av beholderens
   høyde, og heroen er lavere før skriftene er lastet enn etterpå. På treg 4G er
   det vinduet langt nok til at flekkene flytter seg, og Lighthouse målte det som
   hele sidens CLS: 0,033, med `div.hero-mesh` som eneste kilde.
   Bredden er trygg, for den endrer seg ikke av fontbytte. Høyden er nå låst til
   skjermhøyden, som heller ikke endrer seg. Heroen har `overflow:hidden`, så
   overskytende klippes bort.
   Ikke gå tilbake til prosent på top/bottom her. */
.hero-mesh{
  position:absolute; left:-18%; right:-18%; top:-189px; height:1431px;
  z-index:0; pointer-events:none;
  background-image:
    radial-gradient(circle, rgba(196,132,86,0.4), transparent 68%),
    radial-gradient(circle, rgba(62,103,99,0.36), transparent 70%);
  background-size:46% 46%, 36% 36%;
  background-repeat:no-repeat;
  background-position:82% 14%, 90% 68%;
  filter:blur(46px);
  animation:meshdrift 19s ease-in-out infinite alternate;
}
@keyframes meshdrift{
  /* two partners drifting apart, then in close — sometimes overlapping — then apart again */
  0%{ background-position:82% 14%, 90% 68%; }
  50%{ background-position:63% 46%, 67% 48%; }
  100%{ background-position:90% 52%, 80% 16%; }
}

/* Høyden per skjermstørrelse, målt mot den gamle `inset:-18%` slik at flekkene
   havner nøyaktig der de gjorde før. Pikselverdiene følger heroens innhold, så
   skrives heroteksten om vesentlig, mål på nytt:
   sett midlertidig `inset:-18%` tilbake, les av `.hero-mesh` sin høyde og topp
   ved 390, 768 og 1440, og skriv inn tallene her.
   Verdiene over gjelder smal skjerm. */
@media (min-width:641px){
  .hero-mesh{ top:-159px; height:1201px; }
}
@media (min-width:1024px){
  .hero-mesh{ top:-153px; height:1157px; }
}

@media (prefers-reduced-motion: reduce){
  .hero-mesh{ animation:none; }
}
.hero-inner{
  position:relative; z-index:2;
  display:grid; gap:var(--rytme-5);
}
/* Over 940px deles heroen i to: teksten til venstre, tillitssignalene til
   høyre. Under det stables de, og signalene legger seg under knappene slik de
   gjorde før. */
@media (min-width:940px){
  .hero-inner{ grid-template-columns:minmax(0,1.55fr) minmax(230px,0.85fr);
    align-items:center; }
}
.hero-tekst{ max-width:760px; }
.hero .eyebrow{ margin-bottom:22px; }
/* Etiketten i heroen er den lengste på siden og brekker til tre linjer på
   mobil. Sperret versaltekst i tre linjer rett over overskriften blir en vegg,
   så typen strammes her — teksten beholdes hel. */
@media (max-width:560px){
  .hero .eyebrow{ font-size:var(--t-3xs); letter-spacing:0.075em; gap:10px; }
  .hero .eyebrow::before{ width:24px; }
}
.hero h1{
  font-family:var(--serif); font-weight:600; letter-spacing:-0.015em;
  font-size:var(--d-1); line-height:1.04;
  text-wrap:balance;
}
.hero .dek{
  font-family:var(--serif); font-style:italic; font-weight:400;
  font-size:var(--d-6); color:var(--accent-dark);
  margin-top:1.1em; text-wrap:balance;
}
.hero .lede{
  margin-top:1.1em; font-size:var(--t-lg); color:var(--ink-soft);
  max-width:58ch;
}
/* Stille veiviser, ikke en tredje knapp. Den skal kunne overses av alle som
   er her for terapi, og finnes med én gang av dem som ikke er det. */
.hero-fag{
  margin-top:var(--rytme-1);
  font-size:var(--t-sm); color:var(--ink-faint);
}
.hero-fag a{
  color:var(--ink); text-decoration:none;
  border-bottom:1px solid var(--varm); padding-bottom:1px;
  transition:border-color .2s ease, color .2s ease;
}
.hero-fag a:hover{ color:var(--varm-tekst); border-bottom-color:var(--varm-tekst); }

.hero-actions{
  display:flex; flex-wrap:wrap; gap:14px; margin-top:2.2em;
}
.hero-trust{
  list-style:none; margin:0; padding:0;
  display:flex; flex-direction:column; gap:var(--rytme-1);
}
.hero-trust li{ display:flex; flex-direction:column; gap:3px; }
.hero-trust strong{
  font-family:var(--serif); font-weight:600; font-size:var(--t-lg);
  line-height:var(--lh-heading); color:var(--ink);
}
.hero-trust span{ font-size:var(--t-xs); color:var(--ink-faint); line-height:var(--lh-body); }
@media (min-width:940px){
  /* Hårfin strek skiller kolonnene, samme språk som ellers på siden. */
  .hero-trust{ padding-left:clamp(26px,3vw,40px); border-left:1px solid var(--line); }
}
@media (max-width:939px){
  .hero-trust{ padding-top:1.6em; border-top:1px solid var(--line); }
}

/* Portrettet i heroen. Over 940px står det øverst i høyrekolonnen, over
   tillitssignalene. Under det løses .hero-side opp (display:contents), og
   bildet flyttes først i rutenettet som en liten rad med navn, slik at
   ansiktet er med på første skjerm også på mobil. */
.hero-portrett{ margin:0; }
/* ===== <picture> LAGT INN 3. NOV. 2026 =====
   Bildene har nå en WebP-utgave med JPEG som reserve, og da må <img> ligge
   inne i en <picture>. `display:contents` gjør at wrapperen forsvinner fra
   oppsettet, slik at alle selektorene som sikter på .hvem-bilde img,
   .sidebilde img og .hero-portrett img virker nøyaktig som før, og img-en
   fortsatt er rutenett- eller flex-barnet der den var det.
   MÅ STÅ. Uten denne linja blir bildene inline-elementer i en ny boks, og
   .hero-portrett mister størrelsen sin. */
picture{ display:contents; }

.hero-portrett img{
  display:block; object-fit:cover; object-position:50% 30%;
  border-radius:var(--radius); box-shadow:var(--shadow-lift);
  background:linear-gradient(155deg, #D7DED8, #C3CDC5);
}
.hero-portrett figcaption{ display:flex; flex-direction:column; gap:2px; }
.hero-portrett strong{
  font-family:var(--serif); font-weight:600; font-size:var(--t-lg); line-height:var(--lh-heading);
}
.hero-portrett span{ font-size:var(--t-xs); color:var(--ink-faint); line-height:var(--lh-body); }
@media (min-width:940px){
  /* Streken flyttes fra lista til hele kolonnen, så den går også langs bildet. */
  .hero-side{ display:flex; flex-direction:column; gap:var(--rytme-1);
    padding-left:clamp(26px,3vw,40px); border-left:1px solid var(--line); }
  .hero-side .hero-trust{ padding-left:0; border-left:0; }
  .hero-portrett img{ width:100%; max-width:240px; aspect-ratio:4/5; height:auto; }
  .hero-portrett figcaption{ margin-top:14px; }
}
@media (max-width:939px){
  .hero-side{ display:contents; }
  .hero-portrett{ order:-1; display:flex; align-items:center; gap:14px; }
  .hero-portrett img{ width:64px; height:64px; border-radius:50%; object-position:50% 22%; }
  .hero-inner{ gap:var(--rytme-2); }
}

/* =========================================================
   OM (about)
   ========================================================= */
.om{ padding:var(--section-y) 0; }
.om-grid{
  display:grid; grid-template-columns:0.85fr 1.15fr; gap:var(--rytme-6);
  align-items:start;
}
.portrait-wrap{ position:relative; }
.portrait-frame{
  position:relative; z-index:1; aspect-ratio:4/5; border-radius:var(--radius);
  background:linear-gradient(155deg, #D7DED8, #C3CDC5);
  overflow:hidden; box-shadow:var(--shadow-lift);
}
/* Ingen gråtone. Portrettet vises i full farge, likt som på tjenestesidene. */
.portrait-frame img{
  width:100%; height:100%; object-fit:cover;
}
/* Skrivebordsbildet ble først stablet under portrettet øverst på om.html.
   Otto 27. okt. 2026: «Det blir for mye med to bilder her.» Han har rett,
   særlig på mobil, der man scroller forbi to bilder før navnet hans kommer.
   Ikke stable to bilder i om-grid igjen. Bildet ligger nå lenger nede, ved
   siden av «Det jeg har gjort». */
/* Brukes på om.html ved «Det jeg har gjort» og på foreldreveiledning.html ved
   skolevegring. Begge er lange brødtekstbolker med tom plass til høyre. */
.sidebilde{ margin:0; }
.sidebilde img{
  width:100%; height:auto; aspect-ratio:4/5; object-fit:cover;
  border-radius:var(--radius); box-shadow:var(--shadow-lift);
}
/* glow lives outside the (clipped) frame, in the wrap around it — so it
   stays visible as a soft aura once a real photo fills the frame, rather
   than being covered by it. Deliberately a different, more independent
   "breathing" choreography than the hero's converge-and-part dance. */
.portrait-wrap .frame-glow{
  position:absolute; z-index:0; border-radius:50%; filter:blur(36px); pointer-events:none;
}
.portrait-wrap .orb-a{
  width:56%; aspect-ratio:1; top:-24%; left:-26%;
  background:radial-gradient(circle, rgba(199,135,88,0.62), transparent 70%);
  animation:portrait-orbit-a 14s ease-in-out infinite;
}
.portrait-wrap .orb-b{
  width:46%; aspect-ratio:1; bottom:-20%; right:-22%;
  background:radial-gradient(circle, rgba(62,103,99,0.56), transparent 70%);
  animation:portrait-orbit-b 12s ease-in-out infinite;
}
@keyframes portrait-orbit-a{
  0%,100%{ transform:translate(0,0) scale(1); }
  25%{ transform:translate(10%,12%) scale(1.1); }
  50%{ transform:translate(-4%,16%) scale(0.94); }
  75%{ transform:translate(-9%,3%) scale(1.05); }
}
@keyframes portrait-orbit-b{
  0%,100%{ transform:translate(0,0) scale(1); }
  30%{ transform:translate(-11%,-7%) scale(1.12); }
  65%{ transform:translate(3%,-15%) scale(0.9); }
}
@media (prefers-reduced-motion: reduce){
  .portrait-wrap .frame-glow{ animation:none; }
}
.om-name{
  font-family:var(--serif); font-weight:600; font-size:var(--d-5);
}
.om-role{ color:var(--accent-dark); font-weight:600; font-size:var(--t-md); margin-top:0.35em; }
.om-copy p{ margin-top:1.15em; color:var(--ink-soft); font-size:var(--t-md); max-width:60ch; }
.om-copy p:first-of-type{ margin-top:1.4em; }

/* kvalifikasjoner som et fagark: kategori til venstre, innhold til høyre.
   Piller brøt stygt og tålte ikke lange titler — dette skalerer og leser
   som dokumentasjon i stedet for merkelapper. */
.kvalifikasjoner{
  margin-top:2.4em;
  border-top:1px solid var(--line-strong);
}
.kval-rad{
  display:grid; grid-template-columns:minmax(120px,150px) 1fr;
  gap:8px 28px; align-items:baseline;
  padding:16px 0; border-bottom:1px solid var(--line);
}
/* siste rad står uten strek — institusjonsblokken har sin egen rett under,
   og to streker så tett leser som dobbel oppdeling */
.kval-rad:last-child{ border-bottom:0; }
.kval-rad dt{
  font-family:var(--sans); font-weight:700; font-size:var(--t-3xs);
  letter-spacing:0.12em; text-transform:uppercase; color:var(--ink-faint);
}
.kval-rad dd{
  margin:0; font-family:var(--serif); font-size:var(--t-lg);
  line-height:var(--lh-body); color:var(--ink);
}
/* HPR-nummer og metodekoder står konsekvent på egen linje under tittelen.
   Inline ville brutt ulikt fra rad til rad og sett tilfeldig ut. */
/* Hevet fra 0.72rem (11,5 px) 3. nov. 2026. Dette er stedet prisen, videoinfoen
   og åpningstidene står, altså tekst folk leser nøye, og det var sidens minste.
   0.8rem legger den på linje med de andre småetikettene (stikktittel 12,2,
   dato i tidsvelgeren 12,8) i stedet for å ligge under dem alle. */
.kval-nr,
.kval-liste span{
  display:block; margin-top:3px;
  font-family:var(--sans); font-size:var(--t-2xs); font-weight:700;
  letter-spacing:0.1em; text-transform:uppercase; color:var(--varm-tekst);
}
.kval-liste{ display:flex; flex-direction:column; gap:14px; }

@media (max-width:520px){
  .kval-rad{ grid-template-columns:1fr; gap:6px; }
  .kval-rad dd{ font-size:var(--t-md); }
}

@media (max-width:900px){
  .om-grid{ grid-template-columns:1fr; }
  .portrait-wrap{ max-width:340px; }
}

/* =========================================================
   TJENESTER (services)
   ========================================================= */
/* Tjenestebolken er den tetteste på siden: fem kort i samme form. Ryddig,
   men flat. Et dempet varmt lys i ett hjørne gir dybde uten å legge til noe
   element — det er samme grep som gløden i heroen, gjentatt én gang.

   Lyset ligger BAK innholdet og er sterkt uskarpt. Det skal merkes, ikke ses. */
.tjenester{
  background:var(--paper-deep); padding:var(--section-y) 0;
  position:relative; overflow:hidden;
}
.tjenester::before{
  content:''; position:absolute; z-index:0; pointer-events:none;
  width:clamp(320px,42vw,620px); aspect-ratio:1;
  top:-14%; right:-8%;
  background:radial-gradient(circle, rgba(196,132,86,0.30), transparent 66%);
  filter:blur(60px);
}
.tjenester > .container{ position:relative; z-index:1; }
.tjenester-head{
  display:flex; justify-content:space-between; align-items:flex-end;
  flex-wrap:wrap; gap:24px;
}
.services-grid{
  margin-top:var(--rytme-4);
  display:grid; grid-template-columns:1fr; gap:22px;
}
@media (min-width:660px){
  .services-grid{ grid-template-columns:repeat(2,1fr); }
  .services-grid > :last-child{ grid-column:1 / -1; }
}
/* Fem kort går ikke opp i tre kolonner. Rutenettet settes derfor til seks
   smale spor der hvert kort spenner to, og kort nummer fire starter ett spor
   inn — da sentreres de to siste i stedet for å henge igjen til venstre.
   Legges det sjette kortet inn igjen, kan begge særreglene strykes. */
@media (min-width:1020px){
  .services-grid{ grid-template-columns:repeat(6,1fr); }
  .services-grid > *{ grid-column:span 2; }
  .services-grid > :nth-child(4){ grid-column:2 / span 2; }
  .services-grid > :last-child{ grid-column:span 2; }
}
.service-card{
  background:var(--paper-raised); border:1px solid var(--line);
  border-radius:var(--radius); padding:30px 26px;
  /* Luften mellom avsnittene var satt for lange kort. Nå som teksten er kortet
     ned til et løfte og en arbeidsmåte, henger avsnittene tettere sammen og
     leses som én tanke i stedet for fire løsrevne. */
  display:flex; flex-direction:column; gap:9px;
  transition:transform .3s ease, box-shadow .3s ease, border-color .3s ease;
  opacity:0; transform:translateY(18px);
}
/* Andrelinje under prisen — til dobbelttimen og til presiseringen av hva
   timeprisen dekker. Normal vekt og dempet farge, så den ikke leser som
   nok en pris. */
.service-price-alt{
  display:block; margin-top:2px;
  font-family:var(--sans); font-weight:400; font-size:var(--t-2xs);
  color:var(--ink-faint); letter-spacing:0;
}

.service-card.is-visible{ opacity:1; transform:translateY(0); }
.service-card:hover{
  transform:translateY(-5px); border-color:var(--line-strong);
  box-shadow:var(--shadow-lift);
}
.service-icon{
  width:40px; height:40px; border-radius:50%;
  background:var(--paper-deep); display:flex; align-items:center; justify-content:center;
  color:var(--accent-dark);
}
.service-icon svg{ width:19px; height:19px; }

/* Ikonene er bygget av merkets egen bue.

   TO ULIKE BEVEGELSER, FORDI DE GJØR ULIK JOBB:

   Når kortet tones inn, TEGNER buene seg selv. Ved 19 piksler er en
   forskyvning på et par piksler usynlig — men at en strek blir til, ser man.
   pathLength="1" på hver bue gjør at lengden kan styres i 0–1 uansett hvor
   lang buen faktisk er.

   På hover FLYTTER delene seg i retningen som betyr noe: paret lukker gapet,
   barnet søker inn, ungdommen trekker unna, punktet puster, familien samler
   seg. Avstandene er brukerenheter i ikonets eget rutenett (24 x 24).

   I ro er strekene hele: dasharray 1 med offset 0 tegner én strek like lang
   som buen. Uteblir JavaScript, står ikonet ferdig tegnet. */
.service-icon path{ stroke-dasharray:1; stroke-dashoffset:0; }
/* Tegningen tok før 1,22 sekunder fra første strek til siste, og prikken landet
   først etter det. På telefon, der kortene passerer ett om gangen, rakk man å
   scrolle forbi før ikonet sto ferdig. Nå er hele forløpet under 0,8 sekunder,
   og kaskaden mellom strekene er beholdt — bare strammere. */
.service-card.is-visible .service-icon path{
  animation:ikon-tegn .55s cubic-bezier(.33,1,.68,1) both;
}
.service-card.is-visible .service-icon path:nth-of-type(2){ animation-delay:.1s; }
.service-card.is-visible .service-icon path:nth-of-type(3){ animation-delay:.2s; }
@keyframes ikon-tegn{ from{ stroke-dashoffset:1; } to{ stroke-dashoffset:0; } }

.service-card.is-visible .service-icon circle{
  animation:ikon-prikk .4s cubic-bezier(.34,1.56,.64,1) .28s backwards;
}
@keyframes ikon-prikk{ from{ transform:scale(0); } to{ transform:scale(1); } }

.service-icon .ik-h,
.service-icon .ik-hh,
.service-icon .ik-v,
.service-icon .ik-vv,
.service-icon .ik-puls{
  transition:transform .5s cubic-bezier(.22,1,.36,1);
}
.ik-h{  --ik:translateX(2.8px); }
.ik-hh{ --ik:translateX(4.2px); }
.ik-v{  --ik:translateX(-2.8px); }
.ik-vv{ --ik:translateX(-4.2px); }
/* Sirkelen skaleres om sitt eget sentrum, ikke om ikonets hjørne. */
.ik-puls{ --ik:scale(1.7); transform-box:fill-box; transform-origin:center; }

.service-card:hover .service-icon .ik-h,
.service-card:hover .service-icon .ik-hh,
.service-card:hover .service-icon .ik-v,
.service-card:hover .service-icon .ik-vv,
.service-card:hover .service-icon .ik-puls{ transform:var(--ik); }

/* =========================================================
   OM MEG-SIDEN: LUFT MELLOM BOLKER SOM HØRER SAMMEN

   Heroen og portrettbolken hadde begge full seksjonsluft, og til sammen ble
   det nærmere 230 piksler mellom ingressen og navnet — nok til at de to leses
   som hver sin side i stedet for én tekst. Det samme skjedde mellom siste
   avsnitt om ham og «Det jeg jobber med».

   Sibling-velgere, ikke en egen sideklasse: reglene slår bare inn der disse
   bolkene faktisk står etter hverandre, altså på om.html. Forsidens .om-bolk
   og foredragssidens hero røres ikke. :has() styrer bunnluften; faller den
   bort i en gammel nettleser, beholder bolken bare sin vanlige luft.
   ========================================================= */
.fag-hero + .om{ padding-top:var(--rytme-4); }
.fag-hero:has(+ .om){ padding-bottom:var(--rytme-2); }
.om + .fag-bakgrunn{ padding-top:var(--rytme-4); }
.om:has(+ .fag-bakgrunn){ padding-bottom:var(--rytme-3); }

/* ====================================================================
   HVEM DU MØTER — portrett på tjenestesidene

   Tjenestesidene var tusen ord ren tekst. For en terapeut er det en reell
   svakhet: folk avgjør på sekunder om de tør snakke med deg, og de avgjør
   det på et ansikt. Portrettet sto bare på forsiden og «Om meg» — altså
   ikke på sidene folk faktisk lander på fra Google.

   Bildet er lite med vilje. Det skal bekrefte at det finnes et menneske
   her, ikke ta over siden.
   ==================================================================== */
.hvem{ display:grid; grid-template-columns:1fr; gap:var(--rytme-2); align-items:start; }
@media (min-width:640px){ .hvem{ grid-template-columns:190px 1fr; gap:var(--rytme-3); } }
.hvem-bilde img{
  width:100%; max-width:190px; height:auto; display:block;
  border-radius:var(--radius); aspect-ratio:4/5; object-fit:cover;
  background:var(--paper-deep);
}
.hvem-tekst h2{
  font-family:var(--serif); font-weight:600; letter-spacing:-0.01em;
  font-size:var(--d-6); line-height:var(--lh-display); margin-top:6px;
}
.hvem-rolle{
  font-family:var(--sans); font-weight:700; font-size:var(--t-2xs);
  letter-spacing:0.08em; text-transform:uppercase; color:var(--varm-tekst);
  margin-top:7px;
}
.hvem-tekst > p:not(.hvem-rolle):not(.eyebrow){
  margin-top:1em; color:var(--ink-soft); max-width:56ch;
}

/* Bestillingslenke midt på tjenestesidene. Folk bestemmer seg oftest midtveis
   i lesingen, og da hjelper det lite at knappen står i toppen og bunnen. */
.midt-cta{ margin-top:var(--rytme-3); }

/* Lenke videre i løpende tekst. Understreken ligger litt under skriften og
   tykner på hover, i stedet for å bytte farge — samme rolige grep som resten
   av siden. Pilen flyttes ved hover, så den peker på det den sier. */
.lenke-videre{
  font-weight:600; color:var(--accent-dark); text-decoration:none;
  border-bottom:1px solid var(--line-strong);
  /* WCAG 2.2 krever 24 px høyde på noe som skal treffes med en finger. Med
     bare 2 px under skriften ble lenken 22 px, og den brukes frittstående i
     krysslenkelistene — ikke inne i en setning, der regelen har unntak. */
  display:inline-block; padding:3px 0 5px;
  transition:border-color .25s ease;
}
.lenke-videre:hover{ border-bottom-color:var(--accent); }

/* Uten musepeker ligger buene i ro. Her sto tidligere en .i-fokus-regel som lot
   scrollingen dra dem fra hverandre på telefon; den er fjernet fordi bevegelsen
   gikk begge veier uten å svare på noe leseren gjorde. Se main.js. */
.service-card h3{
  font-family:var(--serif); font-weight:600; font-size:var(--t-xl);
  transition:color .3s ease, letter-spacing .3s ease;
}
.service-card:hover h3{ color:var(--accent-dark); letter-spacing:0.003em; }
.service-card p{ color:var(--ink-soft); font-size:var(--t-sm); flex:1; }
/* liten forventningsavklaring på kortet — ikke en overraskelse i bookingen */
.service-card .service-note{
  flex:none; font-size:var(--t-xs); font-weight:600; color:var(--accent-dark);
  display:flex; align-items:flex-start; gap:8px;
}
.service-card .service-note::before{
  content:''; width:5px; height:5px; border-radius:50%; background:var(--varm);
  flex:none; margin-top:0.55em;
}
/* LES MER-LENKEN ER KORTETS VIKTIGSTE UTGANG.
   Kortet sier hva tjenesten er; siden bak sier hvordan det foregår, hva det
   koster, hvor mange timer folk pleier å trenge, og svarer på det de lurer på
   men ikke spør om. Den som er i tvil trenger den siden — og en lenke som
   ligger som en setning i brødteksten blir ikke sett.

   Derfor står den på egen linje, i aksentfarge, med luft rundt og en pil som
   flytter seg når man peker. Den skal leses som en dør, ikke som en fotnote. */
.service-mer{
  margin-top:4px; align-self:flex-start;
  display:inline-flex; align-items:center; gap:7px;
  font-weight:700; font-size:var(--t-sm); color:var(--accent-dark);
  text-decoration:none; padding:7px 0; /* berøringsmål, WCAG 2.2 */
  border-bottom:1px solid var(--line-strong);
  transition:border-color .25s ease, gap .25s ease;
}
.service-mer:hover{ border-bottom-color:var(--accent); gap:11px; }
.service-mer:focus-visible{ outline:2px solid var(--varm); outline-offset:3px; }
.service-mer .pil{ transition:transform .25s ease; }
.service-card:hover .service-mer .pil{ transform:translateX(2px); }
@media (prefers-reduced-motion:reduce){
  .service-mer, .service-mer .pil{ transition:none; }
  .service-mer:hover{ gap:7px; }
}

.service-meta{
  display:flex; align-items:center; justify-content:space-between;
  margin-top:auto; padding-top:14px; border-top:1px solid var(--line);
  font-size:var(--t-xs);
}
.service-price{ font-weight:700; color:var(--ink); }
.service-meta a{
  color:var(--accent-dark); text-decoration:none; font-weight:600;
  display:inline-flex; align-items:center; gap:5px; position:relative;
  padding:7px 0; /* berøringsmål 36px — WCAG 2.2 krever minst 24 */
}
.service-meta a::before{
  content:''; position:absolute; left:0; right:100%; bottom:-3px; height:1px;
  background:var(--accent); transition:right .3s ease;
}
.service-meta a:hover{ color:var(--accent); }
.service-meta a:hover::before{ right:0; }
.service-meta a span{ transition:transform .3s ease; }
.service-meta a:hover span{ transform:translateX(3px); }

/* den gratis inngangen synlig der folk faktisk velger — som en rolig linje,
   ikke som et sjette kort, siden den er en dør inn og ikke en behandling */
.tjenester-hjelp{
  margin-top:var(--rytme-3);
  padding-top:var(--rytme-2);
  border-top:1px solid var(--line);
  text-align:center;
  color:var(--ink-soft); font-size:var(--t-md);
}
.tjenester-hjelp a{
  color:var(--accent-dark); font-weight:600; text-decoration:none;
  border-bottom:1px solid var(--line-strong);
  padding-bottom:1px; transition:border-color .2s ease, color .2s ease;
}
.tjenester-hjelp a:hover{ color:var(--accent); border-bottom-color:var(--accent); }

/* =========================================================
   TILNÆRMING (approach)
   ========================================================= */
.tilnaerming{ position:relative; overflow:hidden; padding:var(--section-y) 0; }

/* the lead statement outranks the method cards below it — hierarchy is what
   keeps this section from reading as a flat grid of equal boxes */
.method-lead{
  margin-top:var(--rytme-3);
  padding-left:clamp(20px,3vw,34px);
  border-left:2px solid var(--varm);
  max-width:52ch;
}
.method-lead-label{
  font-family:var(--sans); font-weight:700; font-size:var(--t-3xs);
  letter-spacing:0.12em; text-transform:uppercase; color:var(--varm-tekst);
}
.method-lead-text{
  margin-top:0.7em;
  font-family:var(--serif); font-weight:500;
  font-size:var(--d-6); line-height:var(--lh-body);
  color:var(--ink); text-wrap:pretty;
}
/* fire metoder: 1 eller 2 kolonner — aldri 3, som ville latt én bli alene */
.method-grid{
  margin-top:var(--rytme-5);
  display:grid; grid-template-columns:1fr; gap:20px;
}
@media (min-width:660px){
  .method-grid{ grid-template-columns:repeat(2,1fr); }
}
.method-card{
  background:var(--paper-raised); border:1px solid var(--line);
  border-radius:var(--radius); padding:26px 24px;
  opacity:0; transform:translateY(18px);
  transition:opacity .6s ease, transform .6s ease;
}
.method-card.is-visible{ opacity:1; transform:translateY(0); }
.method-card h3{
  font-family:var(--serif); font-weight:600; font-size:var(--t-lg); color:var(--accent-dark);
}
.method-card p{ margin-top:0.6em; color:var(--ink-soft); font-size:var(--t-sm); }

/* =========================================================
   FAGLIG TYNGDE (proof)
   ========================================================= */
.fag{ background:var(--paper-deep); padding:var(--section-y) 0; }

/* =========================================================
   FOREDRAGSSIDEN (foredrag.html)

   Ingen nye farger og ingen nye komponenter. Forskjellen fra klientsiden
   ligger i hva som er tatt BORT: heroen har ingen glød og ingen kursiv
   ingress. Denne leseren er på jobb og skal fylle et program — atmosfære
   hjelper ham ikke, presisjon gjør det.

   Det ene stedet med skala er sitatet: Ottos egen setning om å kjenne
   tjenestene fra begge sider. Den er hele argumentet for å leie ham inn,
   så den får være det eneste som roper.
   ========================================================= */
.fag-hero{ padding:clamp(48px,6vw,84px) 0 clamp(36px,4.5vw,60px); }
/* 404-siden, og bare den: myra bak overskriften.
   Dette er den ene siden der tomhet er selve poenget, og det eneste andre
   stedet grafikken brukes. Legges den på flere sider, slutter den å være et
   pusterom og blir tapet.
   Uttoningene er de samme som i .pusterom-bilde: fra venstre så teksten alltid
   har rolig grunn under seg, fra toppen så båndet ikke får en hard kant. */
.fag-hero--myr{ position:relative; overflow:hidden; }
.fag-hero--myr::before{
  content:''; position:absolute; inset:0;
  background:url('../img/myr-band.svg') center bottom / cover no-repeat;
}
.fag-hero--myr::after{
  content:''; position:absolute; inset:0;
  background:
    linear-gradient(to right,
      var(--paper) 0%, rgba(234,238,235,0.90) 30%,
      rgba(234,238,235,0.45) 50%, rgba(234,238,235,0) 70%),
    linear-gradient(to bottom,
      var(--paper) 0%, rgba(234,238,235,0.55) 24%, rgba(234,238,235,0) 56%);
}
/* z-index, ikke bare position:relative. Et ::after på seksjonen males etter
   barna når begge står på auto, så sløret la seg oppå overskriften og vasket
   den ut. I .pusterom skjer ikke dette, fordi sløret der ligger på et eget
   barneelement og ikke på seksjonen. */
.fag-hero--myr .container{ position:relative; z-index:1; }
/* Grafikken trenger litt høyde for å lese som landskap. */
.fag-hero--myr{ padding-bottom:var(--rytme-8); }

.fag-hero-inner{ max-width:62ch; }
.fag-hero h1{
  font-family:var(--serif); font-weight:500;
  font-size:var(--d-2); line-height:1.06;
  letter-spacing:-0.02em; margin-top:0.42em; text-wrap:balance;
}
.fag-hero-dek{
  font-family:var(--serif); font-weight:400;
  font-size:var(--d-6); line-height:var(--lh-body);
  color:var(--accent-dark); margin-top:0.9em; max-width:34ch;
}
.fag-hero-brod{
  margin-top:1.5em; color:var(--ink-soft); font-size:var(--t-md); max-width:56ch;
}
.fag-hero .hero-actions{ margin-top:var(--rytme-2); }

/* Avslutningen: samme mørke bånd som på forsiden, men med kontaktveiene
   satt som en liste i stedet for knapper. En saksbehandler skal kunne
   kopiere e-postadressen, ikke lete etter et skjema. */
/* Scenebildet. Ingen ramme og ingen skygge — bildet er mørkt og dramatisk
   nok i seg selv, og en ramme rundt ville bare lagt en strek mellom det og
   siden. Bare radius, så det tilhører samme system som kortene. */
/* Bakgrunnsbolken: prosa til venstre, utdanningene til høyre. En oppdragsgiver
   leser teksten, men skanner lista — derfor er de skilt, ikke blandet. */
.fag-bakgrunn{ background:var(--paper); padding:clamp(44px,5vw,70px) 0; }
.bakgrunn-grid{ display:grid; grid-template-columns:1fr; gap:var(--rytme-4); }
.bakgrunn-tekst h2{
  font-family:var(--serif); font-weight:600; letter-spacing:-0.01em;
  font-size:var(--d-5); line-height:var(--lh-display);
}
.bakgrunn-tekst p{ margin-top:1em; color:var(--ink-soft); max-width:58ch; }
.bakgrunn-kval .temagruppe{ margin-top:0; }
.bakgrunn-kval .kval-liste{ margin-top:18px; }
.kval-intro{ margin-top:14px; font-size:var(--t-sm); color:var(--ink-soft); line-height:var(--lh-loose); }
/* Sitat i sidespalten, under «Det praktiske». Satt mindre enn sitatet på
   forsiden: spalten er 463 piksler bred, ikke hele containeren. Ingen cite,
   for det er Ottos egen side og hans egen setning. */
.kval-sitat{
  margin:clamp(30px,3.5vw,44px) 0 0; padding-top:var(--rytme-2);
  border-top:1px solid var(--line-strong);
}
.kval-sitat p{
  margin:0; font-family:var(--serif); font-weight:500;
  font-size:var(--d-6); line-height:var(--lh-heading);
  letter-spacing:-0.01em; color:var(--ink); text-wrap:balance;
}

@media (min-width:880px){
  .bakgrunn-grid{ grid-template-columns:1.15fr 1fr; align-items:start; gap:var(--rytme-6); }
  /* MÅLT 3. NOV. 2026: på foreldreveiledningssiden er tekstspalten 1 191 piksler
     og sidespalten 356, altså 835 piksler tom spalte ved siden av løpende tekst.
     Klebrig sidespalte fyller feltet uten å legge til ett ord, og prisen,
     videoinfoen og kveldstidene følger leseren gjennom hele bolken i stedet for
     å rulle vekk etter første skjerm.
     `align-items:start` over MÅ stå: en strukket rutenettcelle kan ikke klebe. */
  .bakgrunn-kval{ position:sticky; top:96px; }
}

/* Medielista på forsiden ligger under et eget bolkehode og trenger derfor ikke
   h3-en med strek som den har på fagsiden. Streken flyttes til lista selv. */
/* Ligger to bolker med samme bunnfarge etter hverandre, legges full luft to
   ganger — ved bred skjerm nesten 300 px der leseren bare ser tomt, uten et
   fargeskift som forklarer avstanden. Da er den ene bolkens bunnluft nok.

   Velgerne er søskenbaserte, ikke klasser satt på bolkene. Flyttes noe på
   igjen, slår regelen seg av selv i stedet for å gi feil luft et nytt sted. */
.tjenester + .priser,
.priser + .kontakt,
.om + .faq,
.faq + .tilnaerming{ padding-top:0; }

.media{ background:var(--paper); padding:0 0 var(--section-y); }
.media .proof-list{ border-top:1px solid var(--line-strong); }

.fag-scene{ background:var(--paper-deep); padding:0 0 clamp(48px,6vw,80px); }
.scene img{
  width:100%; height:auto; border-radius:var(--radius);
  aspect-ratio:2048 / 1322; object-fit:cover;
  background:var(--paper-deep);
}
.scene figcaption{
  margin-top:14px; font-family:var(--sans); font-size:var(--t-xs);
  color:var(--ink-faint); letter-spacing:0.01em;
}
.scene--sta-naer img{ aspect-ratio:1280 / 720; }

/* To skue av scene+flaggskip rett etter hverandre (Hele mennesket →
   Å stå nær) trenger en tydelig skillelinje — paper og paper-deep er
   for like til å markere et nytt foredrag på egen hånd. */
.fag-scene--divider{ padding-top:clamp(44px,5vw,70px); border-top:1px solid var(--line-strong); }

/* =========================================================
   FLAGGSKIPFOREDRAGET (Hele mennesket i oppdelte tjenester)

   Scenebildet rett over peker allerede på dette foredraget via
   figurteksten. Denne bolken utdyper det bildet pekte mot, før siden
   går videre til bakgrunnen og den generelle foredragslisten — derfor
   er det samme foredraget ikke gjentatt i lista lenger ned.
   ========================================================= */
.fag-flaggskip{ background:var(--paper); padding:clamp(44px,5vw,70px) 0; }
.flaggskip-inner{ max-width:760px; }
.flaggskip-inner h2{
  margin-top:0.5em;
  font-family:var(--serif); font-weight:600; letter-spacing:-0.01em;
  font-size:var(--d-4); line-height:var(--lh-display);
}
.flaggskip-lede{
  margin-top:var(--rytme-4);
  padding-left:clamp(20px,3vw,34px);
  border-left:2px solid var(--varm);
  font-family:var(--serif); font-weight:500;
  font-size:var(--d-6); line-height:var(--lh-heading);
  color:var(--ink); text-wrap:pretty;
}
.flaggskip-tekst{ margin-top:var(--rytme-4); display:flex; flex-direction:column; gap:1.1em; }
.flaggskip-tekst p{ color:var(--ink-soft); font-size:var(--t-md); max-width:62ch; }
.flaggskip-fakta{
  margin-top:var(--rytme-3); font-family:var(--sans); font-weight:700;
  font-size:var(--t-2xs); letter-spacing:0.06em; text-transform:uppercase;
  color:var(--ink-faint);
}

.fag-kontakt{ padding:0 0 clamp(44px,5vw,70px); background:var(--paper-deep); }
.fag-kontakt-inner{
  background:var(--accent-dark); color:var(--accent-ink);
  border-radius:var(--radius); padding:clamp(32px,4vw,52px) clamp(28px,4vw,56px);
  display:grid; grid-template-columns:1fr; gap:var(--rytme-3);
}
.fag-kontakt-inner h2{
  font-family:var(--serif); font-weight:600; font-size:var(--d-5);
  line-height:var(--lh-display);
}
.fag-kontakt-inner p{
  margin-top:0.7em; color:rgba(241,246,244,0.86); font-size:var(--t-md); max-width:48ch;
}
.fag-kontakt-veier{ display:flex; flex-direction:column; gap:16px; }
.fag-kontakt-veier li{ display:flex; flex-direction:column; gap:3px; }
.fag-kontakt-veier span{
  font-family:var(--sans); font-weight:700; font-size:var(--t-3xs);
  letter-spacing:0.16em; text-transform:uppercase; color:rgba(241,246,244,0.62);
}
.fag-kontakt-veier a{
  font-family:var(--serif); font-size:var(--t-lg); color:var(--accent-ink);
  text-decoration:none; border-bottom:1px solid rgba(241,246,244,0.32);
  align-self:flex-start; padding-bottom:2px;
  transition:border-color .2s ease;
}
.fag-kontakt-veier a:hover{ border-bottom-color:var(--accent-ink); }

@media (min-width:820px){
  .fag-kontakt-inner{ grid-template-columns:1.25fr 1fr; align-items:start; }
}

/* eksplisitt skille: her bytter siden målgruppe, fra klient til oppdragsgiver.
   Uten dette leser foredragsdelen som noe tilfeldig etter kontaktskjemaet. */
.mlgruppe-skille{
  display:flex; align-items:center; gap:20px;
  margin-bottom:var(--rytme-5);
}
.mlgruppe-skille::before,
.mlgruppe-skille::after{
  content:''; height:1px; background:var(--line-strong); flex:1;
}
.mlgruppe-skille span{
  font-family:var(--sans); font-weight:700; font-size:var(--t-3xs);
  letter-spacing:0.14em; text-transform:uppercase; color:var(--ink-faint);
  white-space:nowrap;
}
.proof-col{ max-width:760px; }
/* Fagsiden har nå flere slike bolker etter hverandre. Uten denne regelen står
   de klint sammen, og overskriften i den neste limer seg til siste linje i den
   forrige. Sibling-velger, så den første bolken ikke får luft den ikke
   trenger — den har allerede fått den av seksjonen over. */
.proof-col + .proof-col{ margin-top:var(--rytme-4); }
.proof-col .kval-liste{ margin-top:20px; }
.proof-col h2,
.proof-col h3{
  font-family:var(--sans); font-weight:700; font-size:var(--t-xs);
  text-transform:uppercase; letter-spacing:0.08em; color:var(--ink-faint);
  padding-bottom:14px; border-bottom:1px solid var(--line-strong);
}
.proof-list{ margin-top:6px; }
.proof-list li{
  display:flex; justify-content:space-between; gap:16px;
  padding:15px 0; border-bottom:1px solid var(--line);
  font-size:var(--t-sm);
  opacity:0; transform:translateX(-16px);
  transition:opacity .5s ease, transform .5s ease;
}
.stagger-col.is-visible .proof-list li{ opacity:1; transform:translateX(0); }
.proof-list li:nth-child(1){ transition-delay:0ms; }
.proof-list li:nth-child(2){ transition-delay:60ms; }
.proof-list li:nth-child(3){ transition-delay:120ms; }
.proof-list li:nth-child(4){ transition-delay:180ms; }
.proof-list li:nth-child(5){ transition-delay:240ms; }
.proof-list li:nth-child(6){ transition-delay:300ms; }
.proof-list li:nth-child(7){ transition-delay:360ms; }
.proof-list li > span:first-child,
.proof-list li > a{ color:var(--ink); max-width:52ch; }
.proof-list li > span:last-child{
  color:var(--ink-faint); font-size:var(--t-xs); white-space:nowrap; padding-top:2px;
  font-variant-numeric:tabular-nums; flex:none;
}
.proof-list li > a{
  text-decoration:none; display:inline-flex; align-items:baseline; gap:7px;
  transition:color .2s ease;
}
.proof-list li > a:hover{ color:var(--accent-dark); }
.proof-list li > a .ext{
  font-size:var(--t-3xs); color:var(--ink-faint); flex:none;
  transition:transform .2s ease, color .2s ease;
}
.proof-list li > a:hover .ext{ transform:translate(2px,-2px); color:var(--accent-dark); }

/* ---------- foredrag (bookable) ---------- */
.foredrag{
  margin-top:var(--rytme-6);
  display:grid; grid-template-columns:0.85fr 1.15fr; gap:var(--rytme-5);
  align-items:start;
}
.foredrag-intro h2,
.foredrag-intro h3{
  font-family:var(--serif); font-weight:600; font-size:var(--d-5);
}
/* Barnevelger, ikke etterkommervelger: regelen skal gjelde ingressen, ikke
   avsnitt i noe som senere legges inn i spalten. Uten > vinner den på
   spesifisitet over klasser satt direkte på slike avsnitt. */
.foredrag-intro > p{
  margin-top:0.8em; color:var(--ink-soft); font-size:var(--t-md); max-width:38ch;
}
.foredrag-intro .btn{ margin-top:1.6em; }
/* Bredden står i tekst, leveransene i liste. Teksten setter feltet; lista
   under er belegget. Derfor er overskriften over lista satt som etiketten
   over medielista — den markerer et skifte fra beskrivelse til dokumentasjon. */
.temaer-tekst{ display:flex; flex-direction:column; gap:1.05em; }
.temaer-tekst p{ color:var(--ink-soft); font-size:var(--t-md); max-width:62ch; }
.temaer-tekst strong{ color:var(--ink); font-weight:600; }
.temagruppe{
  font-family:var(--sans); font-weight:700; font-size:var(--t-2xs);
  text-transform:uppercase; letter-spacing:0.1em; color:var(--varm-tekst);
  padding-bottom:12px; border-bottom:1px solid var(--line-strong);
  margin-top:var(--rytme-4);
}
.foredrag-list{ display:flex; flex-direction:column; gap:0; }
.foredrag-list li{
  padding:22px 0; border-top:1px solid var(--line);
}
.foredrag-list li:first-child{ padding-top:0; border-top:0; }
/* Følger lista en gruppeoverskrift, trengs luft igjen: uten den klistrer
   første tittel seg til streken under overskriften. */
.temagruppe + .foredrag-list > li:first-child{ padding-top:20px; }
.foredrag-list h3,
.foredrag-list h4,
.foredrag-list h5{
  font-family:var(--sans); font-weight:700; font-size:var(--t-md); color:var(--ink);
}
.foredrag-list p{ margin-top:0.5em; color:var(--ink-soft); font-size:var(--t-sm); max-width:62ch; }

/* Ligger lista inne i en .proof-col — som på tjenestesidene — treffer
   «.proof-col h3» punktoverskriftene og gjør dem til små versaler, akkurat
   som bolkens egen h2. Da ser seksjonstittel og punkttittel like ut, og
   hierarkiet forsvinner. Denne regelen har høyere spesifisitet og gir
   punktene tilbake sin egen vekt, uten at vi må hoppe over et nivå i
   overskriftsrekkefølgen for å komme unna. */
.proof-col .foredrag-list h3,
.proof-col .foredrag-list h4{
  font-family:var(--sans); font-weight:700; font-size:var(--t-md); color:var(--ink);
  text-transform:none; letter-spacing:0; padding-bottom:0; border-bottom:0;
}

@media (max-width:760px){
  .foredrag{ grid-template-columns:1fr; }
}

/* =========================================================
   DOKUMENTSIDE (personvern o.l.)
   ========================================================= */
.dokument{ padding:clamp(48px,8vw,96px) 0 var(--section-y); }
.dokument .container{ max-width:760px; }
.dokument h1{
  font-family:var(--serif); font-weight:600; letter-spacing:-0.01em;
  font-size:var(--d-3); line-height:1.1; margin-top:0.4em;
}
.dokument-ingress{
  margin-top:1.1em; font-family:var(--serif); font-style:italic;
  font-size:var(--d-7); color:var(--accent-dark); max-width:56ch;
}
.dokument-meta{
  margin-top:1.6em; padding-bottom:1.6em; border-bottom:1px solid var(--line-strong);
  font-size:var(--t-xs); color:var(--ink-faint);
}
.dokument h2{
  font-family:var(--serif); font-weight:600; font-size:var(--t-2xl);
  margin-top:2.2em; padding-top:1.2em; border-top:1px solid var(--line);
}
.dokument h3{
  font-family:var(--sans); font-weight:700; font-size:var(--t-md);
  margin-top:1.6em; color:var(--accent-dark);
}
.dokument p{ margin-top:0.9em; color:var(--ink-soft); max-width:66ch; }
/* Kildehenvisning, med vilje liten og uten egen overskrift. Forskjellig fra
   .fagtekst-lenke: det er riktig at en fotnote er diskret, en innholdsanbefaling
   er det ikke. Se rettelsen av .fagtekst-lenke 4. nov. 2026 for begrunnelsen. */
.dokument-fotnote{
  margin-top:0.4em; font-size:var(--t-xs); color:var(--ink-faint);
}
.dokument p strong{ color:var(--ink); }
.dokument-liste{ margin-top:1em; display:flex; flex-direction:column; gap:9px; }
.dokument-liste li{
  position:relative; padding-left:20px; color:var(--ink-soft); max-width:64ch;
}
.dokument-liste li::before{
  content:''; position:absolute; left:2px; top:0.62em;
  width:6px; height:6px; border-radius:50%; background:var(--varm);
}
.dokument-liste li strong{ color:var(--ink); }
/* flex+gap, ikke bare margin: personvern.html har én lenke her, men artikkelen
   har to («Se ledige tider» og «Tilbake til parterapisiden») som trenger luft
   mellom seg og plass til å brekke på mobil uten å henge sammen. */
.dokument-tilbake{ margin-top:3em; display:flex; flex-wrap:wrap; gap:14px; }
.ext{ font-size:var(--t-2xs); margin-left:4px; }

/* =========================================================
   ARTIKKELOVERSIKT (/artikler)
   Egen seksjon, ikke inni .dokument — radene bruker h2 til tittelen, og
   .dokument h2 sin topplinje/avstand ville kollidert med rammen under.
   ========================================================= */
.artikkel-oversikt{ padding-bottom:var(--section-y); }
.artikkel-liste{ margin-top:var(--rytme-2); display:flex; flex-direction:column; }
.artikkel-rad{
  padding:var(--rytme-3) 0; border-top:1px solid var(--line);
  display:flex; flex-direction:column; gap:7px;
}
.artikkel-liste .artikkel-rad:first-child{ border-top:1px solid var(--line-strong); }
.artikkel-rad h2{
  font-family:var(--serif); font-weight:600; letter-spacing:-0.01em;
  font-size:var(--t-2xl); line-height:1.2;
}
.artikkel-rad h2 a{ color:var(--ink); text-decoration:none; }
.artikkel-rad h2 a:hover{ color:var(--accent-dark); }
.artikkel-rad p{ color:var(--ink-soft); max-width:62ch; }
.artikkel-rad .service-mer{ margin-top:2px; }

/* =========================================================
   ORDMERKE
   ========================================================= */
/* MERKET: to buer som holder navnet.

   I lås-oppen er buene grønn og varm — to elementer som hører sammen uten å
   være like. Står merket alene, settes det i blekk: to farger på et lite areal
   begynner å flimre, fordi grønn og varm har omtrent samme lyshet.

   Buene er i FLUKT, ikke forskjøvet. Forskyvningen var vakker når merket sto
   alene, men rundt tekst leser den som en trykkfeil.

   Høyden settes mot navnets BLEKKHØYDE via em, ikke mot linjehøyden — ellers
   svever buene i forhold til bokstavene. */
.brand, .footer-brand{
  display:inline-flex; align-items:center; gap:0;
  text-decoration:none;
}
/* Buene var 1,34 em med 0,30 em luft. Da flankerte de navnet i stedet for å
   holde det — de leste som to selvstendige former med et ord imellom.
   1,22 em og 0,20 em gjør dem til en parentes om navnet.

   Under 1,16 em blir buene kortere enn bokstavenes over- og underlengder, og
   da mister de grepet igjen. Det er gulvet. */
.brand-bue{ height:1.22em; width:auto; display:block; }
.bue-v, .bue-h{ display:flex; align-items:center; }
.bue-v{ color:var(--accent); margin-right:0.20em; }
.bue-h{ color:var(--varm);   margin-left:0.20em; }
.brand-name{ white-space:nowrap; }
.brand:hover .bue-v, .footer-brand:hover .bue-v{ color:var(--accent-dark); }

/* =========================================================
   INSTITUSJONER
   ========================================================= */
/* Bevisst motsatt av kvalifikasjonstabellen over: der er det tett, tabellarisk
   og venstrestilt — her luftig, sentrert og større. Ellers leser de to som
   samme element to ganger. */
/* Fire navn av ulik lengde lar seg ikke tvinge inn i kolonner uten at det
   blir et regneark. Satt som én sentrert setning i stedet: ingen kolonner,
   ingen skillestreker, ingen hengende tegn — og linjene brekker jevnt. */
.institusjoner{
  margin-top:var(--rytme-7);
  padding-top:var(--rytme-3);
  border-top:1px solid var(--line-strong);
  text-align:center;
}
.institusjoner-label{
  font-family:var(--sans); font-weight:700; font-size:var(--t-3xs);
  letter-spacing:0.14em; text-transform:uppercase; color:var(--ink-faint);
}
.institusjoner-liste{
  margin:clamp(16px,2vw,22px) auto 0;
  max-width:44ch;
  font-family:var(--serif); font-weight:500;
  font-size:var(--d-6);
  line-height:var(--lh-body); letter-spacing:-0.005em;
  color:var(--ink); text-wrap:balance;
}

/* =========================================================
   SLIK FOREGÅR DET
   ========================================================= */
/* CTA-båndet hører sammen med stegene over — derfor kortere luft ned dit
   enn mellom to selvstendige seksjoner */
.prosess{ background:var(--paper-deep); padding:var(--section-y) 0 clamp(44px,5vw,64px); }
/* fire steg: 1, 2 eller 4 kolonner — aldri 3, som ville etterlatt ett steg alene */
.prosess-liste{
  display:grid; grid-template-columns:1fr;
  gap:var(--rytme-2); list-style:none;
}
@media (min-width:600px){ .prosess-liste{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:1000px){ .prosess-liste{ grid-template-columns:repeat(4,1fr); } }
.prosess-steg{
  display:flex; flex-direction:column; gap:14px;
  padding-top:22px; border-top:2px solid var(--line-strong);
}
/* Tallet står i klammer i stedet for i en fylt sirkel. Merket er to buer som
   holder et navn; her holder de et tall. Samme grep, samme betydning — og
   stegene leser fortsatt som en rekkefølge, som er jobben deres.

   Sirkelen var tyngre visuelt, men den var også den eneste formen på siden
   som ikke hadde noe med merket å gjøre. */
.prosess-nr{
  display:inline-flex; align-items:center; height:34px;
  color:var(--accent);
}
.prosess-bue{ height:26px; width:auto; display:block; }

/* Klammene tegner seg i rekkefølge, ett steg om gangen — en prosess som
   blir til mens du ser på den. Tallet kommer ETTER at buene har lukket seg
   om plassen: parentesen endrer ikke innholdet, den holder det, og da skal
   rommet finnes før innholdet ankommer.

   Samme bevegelse som i tjenesteikonene, så siden har ett bevegelsesspråk
   og ikke to. */
.prosess-bue path{ stroke-dasharray:1; stroke-dashoffset:0; }
.prosess-steg:nth-child(2){ transition-delay:.12s; }
.prosess-steg:nth-child(3){ transition-delay:.24s; }
.prosess-steg:nth-child(4){ transition-delay:.36s; }

.prosess-steg.is-visible .prosess-bue path{
  animation:ikon-tegn .75s cubic-bezier(.33,1,.68,1) backwards;
}
.prosess-steg.is-visible .prosess-tall{
  animation:prosess-tall .5s cubic-bezier(.22,1,.36,1) backwards;
}
@keyframes prosess-tall{
  from{ opacity:0; transform:translateY(3px); }
  to{ opacity:1; transform:none; }
}
.prosess-steg:nth-child(1).is-visible .prosess-bue path{ animation-delay:.10s; }
.prosess-steg:nth-child(2).is-visible .prosess-bue path{ animation-delay:.22s; }
.prosess-steg:nth-child(3).is-visible .prosess-bue path{ animation-delay:.34s; }
.prosess-steg:nth-child(4).is-visible .prosess-bue path{ animation-delay:.46s; }
.prosess-steg:nth-child(1).is-visible .prosess-tall{ animation-delay:.55s; }
.prosess-steg:nth-child(2).is-visible .prosess-tall{ animation-delay:.67s; }
.prosess-steg:nth-child(3).is-visible .prosess-tall{ animation-delay:.79s; }
.prosess-steg:nth-child(4).is-visible .prosess-tall{ animation-delay:.91s; }
.prosess-tall{
  font-family:var(--serif); font-weight:600; font-size:var(--t-xl);
  line-height:1; padding:0 0.18em; color:var(--accent-dark);
}
.prosess-steg h3{ font-family:var(--serif); font-weight:600; font-size:var(--t-xl); }
.prosess-steg p{ margin-top:0.5em; color:var(--ink-soft); font-size:var(--t-sm); }

/* =========================================================
   TRYGGHET (taushetsplikt m.m.)
   ========================================================= */
/* Avgrensningen skal lese som faglig integritet, ikke som forbehold.
   Derfor rolig og bred, med tydelig etikett — ikke gjemt i en fotnote. */
/* Ingen bevegelse i denne seksjonen — den skal leses rolig. */
.avgrensning{
  margin-top:var(--rytme-7);
  padding-top:var(--rytme-4);
  border-top:1px solid var(--line-strong);
  display:grid; grid-template-columns:1fr; gap:var(--rytme-1);
}
.avgrensning-label{
  font-family:var(--serif); font-weight:600;
  font-size:var(--d-6); line-height:var(--lh-display);
  color:var(--ink); max-width:20ch; text-wrap:balance;
}
.avgrensning-tekst p{
  color:var(--ink-soft); font-size:var(--t-md); max-width:62ch;
}
.avgrensning-tekst p + p{ margin-top:1em; }

/* Teksten går fra det jeg kan til det jeg ikke gjør. Det skiftet fortjener et
   pust, ellers leses fem avsnitt som én vegg. */
.avgrensning-vending{
  margin-top:var(--rytme-2) !important;
  padding-top:var(--rytme-2);
  position:relative;
}
.avgrensning-vending::before{
  content:''; position:absolute; top:0; left:0; width:56px; height:1px;
  background:var(--varm);
}
@media (min-width:860px){
  .avgrensning{ grid-template-columns:minmax(200px,300px) 1fr; gap:var(--rytme-4); }
  /* Venstrespalten sto tom nedover mens høyre spalte var lang. Nå følger
     overskriften leseren gjennom avsnittene i stedet for å bli igjen på toppen. */
  .avgrensning-label{
    position:sticky; top:104px; /* toppmenyen er 78px — dette gir luft under den */
    align-self:start;
  }
}

/* ingen bokser — hårfin toppstrek og luft gjør jobben, og leser roligere */
.trygghet-kort{
  margin-top:var(--rytme-7);
  padding-top:var(--rytme-4);
  border-top:1px solid var(--line-strong);
  /* auto-fit ga to kolonner ved mellomstore bredder, og da ble det tredje
     punktet stående alene nederst til venstre. Tre punkter skal enten stå på
     én rad eller under hverandre — aldri to og en foreldreløs. */
  display:grid; grid-template-columns:1fr;
  gap:var(--rytme-4);
}
@media (min-width:820px){ .trygghet-kort{ grid-template-columns:repeat(3,1fr); } }
.trygghet-kort-item h3{
  font-family:var(--sans); font-weight:700; font-size:var(--t-2xs);
  letter-spacing:0.09em; text-transform:uppercase; color:var(--accent-dark);
}
.trygghet-kort-item p{
  margin-top:0.9em; color:var(--ink-soft); font-size:var(--t-sm); max-width:40ch;
}

/* =========================================================
   PRISER
   ========================================================= */
.priser{ background:var(--paper-deep); padding:var(--section-y) 0; }
.pris-tabell{ overflow-x:auto; }
.pris-tabell table{
  width:100%; border-collapse:collapse; min-width:420px;
}
.pris-tabell caption{ text-align:left; }
.pris-tabell th, .pris-tabell td{
  text-align:left; padding:17px 16px 17px 0;
  border-bottom:1px solid var(--line);
}
.pris-tabell thead th{
  font-family:var(--sans); font-weight:700; font-size:var(--t-3xs);
  letter-spacing:0.1em; text-transform:uppercase; color:var(--ink-faint);
  border-bottom:1px solid var(--line-strong); padding-bottom:12px;
}
.pris-tabell tbody th{
  font-family:var(--serif); font-weight:600; font-size:var(--t-lg); color:var(--ink);
}
/* Dobbelttimen står under tjenestenavnet, ikke som egen rad. Den er et
   alternativ innenfor samme tjeneste — egne rader fikk seks tilbud til å se
   ut som ni, og gjorde tabellen halvannen gang så lang. */
.pris-tillegg{
  display:block; margin-top:4px;
  font-family:var(--sans); font-weight:400; font-size:var(--t-2xs);
  color:var(--ink-faint); letter-spacing:0;
  font-variant-numeric:tabular-nums;
}

.pris-tabell td{ color:var(--ink-soft); font-size:var(--t-sm); font-variant-numeric:tabular-nums; }
.pris-tabell td:last-child{
  text-align:right; padding-right:0; font-weight:700; color:var(--ink);
}
/* den gratis inngangen skal leses først, uten å rope */
.pris-gratis th, .pris-gratis td{ border-bottom-color:var(--line-strong); }
.pris-gratis th span{
  display:block; font-family:var(--sans); font-weight:600; font-size:var(--t-2xs);
  letter-spacing:0.06em; text-transform:uppercase; color:var(--varm-tekst);
  margin-top:4px;
}
.pris-gratis td:last-child{ color:var(--accent-dark); }
.pris-tabell thead th:last-child{ text-align:right; padding-right:0; }

/* på smal skjerm stables raden, slik at prisen aldri havner utenfor skjermen */
@media (max-width:560px){
  .pris-tabell{ overflow-x:visible; }
  .pris-tabell table{ min-width:0; }
  .pris-tabell thead{
    position:absolute; width:1px; height:1px; overflow:hidden;
    clip:rect(0 0 0 0); white-space:nowrap;
  }
  .pris-tabell tr{
    display:flex; flex-wrap:wrap; align-items:baseline; gap:0 14px;
    padding:16px 0; border-bottom:1px solid var(--line);
  }
  .pris-tabell th, .pris-tabell td{ border:0; padding:0; }
  .pris-tabell tbody th{ flex:1 0 100%; margin-bottom:6px; }
  .pris-tabell td:last-child{ margin-left:auto; }
}

.pris-vilkaar{
  margin-top:var(--rytme-3);
  display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:28px;
}
.pris-vilkaar h3{
  font-family:var(--sans); font-weight:700; font-size:var(--t-2xs);
  letter-spacing:0.08em; text-transform:uppercase; color:var(--accent-dark);
}
.pris-vilkaar p{ margin-top:0.6em; color:var(--ink-soft); font-size:var(--t-sm); }

/* =========================================================
   FAQ
   ========================================================= */
.faq{ padding:var(--section-y) 0; }
.faq-liste{ max-width:760px; }
.faq-liste details{
  border-bottom:1px solid var(--line-strong);
}
.faq-liste summary{
  cursor:pointer; list-style:none;
  padding:22px 44px 22px 0; position:relative;
  font-family:var(--serif); font-weight:600; font-size:var(--t-lg); color:var(--ink);
  transition:color .2s ease;
}
.faq-liste summary::-webkit-details-marker{ display:none; }
.faq-liste summary:hover{ color:var(--accent-dark); }
.faq-liste summary::after{
  content:''; position:absolute; right:6px; top:50%;
  width:11px; height:11px; margin-top:-6px;
  border-right:2px solid var(--accent); border-bottom:2px solid var(--accent);
  transform:rotate(45deg); transform-origin:center;
  transition:transform .25s ease;
}
.faq-liste details[open] summary::after{ transform:rotate(-135deg); margin-top:-2px; }
.faq-liste details p{
  color:var(--ink-soft); font-size:var(--t-md); max-width:64ch;
}
.faq-liste details p + p{ margin-top:0.9em; }
.faq-liste details > :last-child{ padding-bottom:24px; }
.faq-liste summary:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; }

/* =========================================================
   CTA-BÅND
   Kort vei til booking midt i sidens narrativ, uten å bryte roen.
   ========================================================= */
.cta-band{ padding:clamp(14px,2vw,24px) 0 clamp(48px,6vw,80px); }
.cta-band-inner{
  background:var(--accent-dark); color:var(--accent-ink);
  border-radius:var(--radius); padding:clamp(32px,4vw,52px) clamp(28px,4vw,56px);
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
  gap:var(--rytme-2);
}
.cta-band-copy h2{
  font-family:var(--serif); font-weight:600; font-size:var(--d-5);
  line-height:var(--lh-display); color:var(--accent-ink); text-wrap:balance;
}
.cta-band-copy p{
  margin-top:0.7em; color:rgba(241,246,244,0.78); font-size:var(--t-md); max-width:46ch;
}
.cta-band-actions{ display:flex; flex-wrap:wrap; gap:12px; }
.cta-band .btn-primary{
  background:var(--paper-raised); color:var(--accent-dark);
}
.cta-band .btn-primary:hover{ background:#fff; }
.cta-band .btn-primary::after{ display:none; }
.cta-band .btn-ghost{
  color:var(--accent-ink); border-color:rgba(241,246,244,0.4);
}
.cta-band .btn-ghost:hover{
  border-color:var(--accent-ink); background:rgba(241,246,244,0.1);
}
.cta-band a:focus-visible{ outline-color:var(--paper-raised); }

/* =========================================================
   DIGITALE SAMTALER
   ========================================================= */
.digitalt{ padding:var(--section-y) 0; }
/* Bildespalten er bredere enn tekstspalten. Dette er sidens eneste bilde av
   stedet samtalene faktisk foregår, og det tåler — og fortjener — plassen.
   Med illustrasjonen som lå her før var forholdet motsatt. */
/* Bildespalta er smalere enn tekstspalta fordi bildet er stående 4:5. Var
   1.05fr da bildet var liggende 3:2. */
.digitalt-grid{
  display:grid; grid-template-columns:0.82fr 1fr; gap:var(--rytme-5);
  align-items:center;
}
@media (max-width:820px){
  .digitalt-grid{ grid-template-columns:1fr; }
}
.digitalt-copy h2{
  font-family:var(--serif); font-weight:600; letter-spacing:-0.01em;
  font-size:var(--d-4); line-height:var(--lh-display);
  margin-top:0.5em; text-wrap:balance;
}
.digitalt-list{ margin-top:1.6em; display:flex; flex-direction:column; gap:0; }
.digitalt-list li{
  position:relative; padding:16px 0 16px 34px;
  border-top:1px solid var(--line);
  color:var(--ink-soft); font-size:var(--t-md); max-width:50ch;
}
.digitalt-list li:first-child{ border-top:0; padding-top:0; }
.digitalt-list li::before{
  content:''; position:absolute; left:4px; top:24px;
  width:9px; height:9px; border-radius:50%;
  background:var(--varm);
}
.digitalt-list li:first-child::before{ top:8px; }

/* ---------- laptop illustration ---------- */
/* Bildet av arbeidsplassen. Fast sideforhold reserverer plassen før filen er
   lastet, slik at teksten ved siden ikke hopper når den kommer inn. */
.digitalt-visual{ margin:0; }
/* Stående 4:5. Et liggende utsnitt ble prøvd, men da forsvinner pulten,
   notatboka og pennen ut av bildet og bare ansiktet står igjen. Otto
   27. okt. 2026: «helt på trynet … det ser helt ut av kontekst ut at det bare
   er ansiktet mitt.» Hele scenen skal være med her. */
.digitalt-visual img{
  width:100%; height:auto; aspect-ratio:4/5; object-fit:cover;
  border-radius:var(--radius);
  box-shadow:var(--shadow-lift);
}

/* =========================================================
   KONTAKT
   ========================================================= */
.kontakt{ background:var(--paper-deep); padding:var(--section-y) 0; }

/* booking panel — frames the embedded EasyPractice widget so it reads as
   part of the page rather than a bolted-on third-party box */
/* Booking er hovedhandlingen på siden, ikke ett av flere likestilte valg.
   Mørk topp gir den samme vekt som CTA-båndet, og skiller den tydelig fra
   skjemaet under. */
.booking-panel{
  background:var(--paper-raised); border:1px solid var(--line);
  border-radius:var(--radius); overflow:hidden;
  box-shadow:var(--shadow-lift);
}
/* Feltet sto tidligere med tekst bare til venstre og en tom grønn flate til
   høyre. Nå står de tre spørsmålene folk lurer mest på der — det fyller plassen
   med noe som gjør en jobb, i stedet for med pynt. */
.booking-head{
  background:var(--accent-dark); color:var(--accent-ink);
  padding:clamp(26px,3vw,36px) clamp(24px,3vw,38px);
  display:grid; gap:var(--rytme-2);
}
@media (min-width:840px){
  .booking-head{ grid-template-columns:1.25fr 1fr; align-items:start; }
}
.booking-fakta{
  list-style:none; margin:0; padding:0;
  display:flex; flex-direction:column; gap:16px;
}
@media (min-width:840px){
  .booking-fakta{
    padding-left:clamp(24px,3vw,38px);
    border-left:1px solid rgba(241,246,244,0.22);
  }
}
.booking-fakta li{ display:flex; flex-direction:column; gap:2px; }
.booking-fakta strong{
  font-family:var(--serif); font-weight:600; font-size:var(--t-md);
  line-height:var(--lh-heading); color:var(--accent-ink);
}
.booking-fakta span{
  font-size:var(--t-xs); color:rgba(241,246,244,0.68); line-height:var(--lh-body);
}
.booking-head h3{
  font-family:var(--serif); font-weight:600;
  font-size:var(--d-5); line-height:var(--lh-display);
  color:var(--accent-ink);
}
.booking-head p{
  margin-top:0.6em; color:rgba(241,246,244,0.8); font-size:var(--t-md); max-width:52ch;
}
.booking-gratis{
  margin-top:1em !important; padding-top:1em;
  border-top:1px solid rgba(241,246,244,0.22);
}
.booking-gratis strong{ color:var(--accent-ink); }
/* .booking-embed og .booking-fallback er fjernet. De var laget for et
   bookingsystem som skulle bygges inn i siden, og sto igjen som en tom hvit
   boks med én setning i da telefonknappen ble tatt ut. Kapasitetslinjen bor nå
   i det grønne feltet, der den leses sammen med resten av bestillingsinfoen. */

/* skjema og kontaktkort er alternativet — merket som nettopp det */
.kontakt-alt{
  display:flex; align-items:center; gap:20px;
  margin:clamp(44px,5vw,64px) 0 clamp(28px,3vw,36px);
}
.kontakt-alt::before, .kontakt-alt::after{
  content:''; height:1px; background:var(--line-strong); flex:1;
}
.kontakt-alt span{
  font-family:var(--sans); font-weight:700; font-size:var(--t-3xs);
  letter-spacing:0.14em; text-transform:uppercase; color:var(--ink-faint);
  white-space:nowrap;
}

/* Kontaktopplysningene sto tidligere som en kort kolonne ved siden av et høyt
   skjema — det ga et stort tomrom. Nå ligger de som en rad over skjemaet, og
   skjemaet får sin egen lesbare bredde.
   Kolonnene er max-content, ikke 1fr, og paret midtstilles. Med 1fr fikk hvert
   felt halve containeren — over tusen piksler til to korte linjer — og de ble
   stående og flyte hver for seg med tomrom etter seg, mens skillestreken over
   og nødmeldingen under er midtstilt. Nå er kolonnene så brede som innholdet
   og står samlet i midten, i samme akse som resten av seksjonen.
   Skillestreken ligger på .crisis-note under. Lå den også her, ble det to
   streker med et tomt felt imellom.
   minmax(0,max-content) i stedet for max-content alene: sporet blir så bredt som
   innholdet, men kan aldri vokse ut av containeren om en tekst blir lengre. */
.kontakt-info{
  display:grid; grid-template-columns:repeat(2,minmax(0,max-content));
  justify-content:center;
  gap:var(--rytme-6);
}
/* Under 820px blir det for trangt til to kolonner ved siden av hverandre.
   Stablet fyller de bredden og står venstrestilt, som skjemaetikettene over. */
@media (max-width:820px){
  .kontakt-info{
    grid-template-columns:1fr;
    justify-content:stretch;
    gap:20px;
  }
}
/* Skjemaet lå tidligere i en smal spalte på 660px, mens kontaktopplysningene
   over gikk i full bredde. Det etterlot et stort tomrom til høyre. Nå følger
   skjemaet samme bredde som resten, og de tre korte feltene ligger på én rad
   rett under de tre kontaktfeltene — samme rytme. */
.kontakt-skjema{ margin-top:var(--rytme-3); }
.form-field{ display:flex; flex-direction:column; gap:8px; margin-bottom:18px; }
.form-field label{ font-size:var(--t-xs); font-weight:600; color:var(--ink-soft); }
.form-row{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--rytme-2); }

/* «valgfritt» står i etiketten, ikke i plassholderen. Plassholdere forsvinner
   når man begynner å skrive, og det er nettopp da man lurer på om feltet må
   fylles ut. */
.valgfritt{
  font-weight:400; text-transform:none; letter-spacing:0;
  color:var(--ink-faint); font-size:var(--t-xs);
}
/* Linja som senker terskelen står rett over knappen, der man tar avgjørelsen
   om å sende eller la være. */
.form-lav-terskel{
  margin-top:var(--rytme-1); color:var(--ink-soft);
  font-size:var(--t-sm); max-width:56ch;
}
.form-status.feil{ color:var(--varm-tekst); }

/* Feltet roboter fyller ut. Det må være helt borte for øyet og for
   skjermleseren — .visually-hidden er laget for det motsatte, å skjule for
   øyet men beholde for skjermleser, og etterlot en synlig flik på 8x6 px. */
.honningkrukke{
  position:absolute !important; left:-9999px !important; top:auto !important;
  width:1px !important; height:1px !important; opacity:0 !important;
  /* Uten disse gulves størrelsen av utfylling og ramme: i border-box kan ikke
     et felt bli smalere enn rammen og luften inni det. */
  padding:0 !important; border:0 !important;
  pointer-events:none !important;
}

/* Knappen skal ikke strekkes over hele bredden — en knapp på over tusen piksler
   ser ut som et banner, ikke som noe man trykker på. Den midtstilles i stedet,
   med god luft over, slik at den avslutter skjemaet i stedet for å henge igjen
   nede til venstre med et stort tomrom ved siden av. Tekstene under følger
   knappen. */
.kontakt-skjema .btn-block{
  width:auto; min-width:260px;
  display:block; margin:clamp(12px,2vw,20px) auto 0;
}
.kontakt-skjema .form-status,
.kontakt-skjema .form-note{
  text-align:center; max-width:64ch; margin-inline:auto;
}
.form-field input, .form-field select, .form-field textarea{
  font-family:var(--sans); font-size:var(--t-md); color:var(--ink);
  background:var(--paper-raised); border:1px solid var(--line-strong);
  border-radius:var(--radius-sm); padding:13px 15px;
  transition:border-color .2s ease, box-shadow .2s ease;
}
.form-field input:focus, .form-field select:focus, .form-field textarea:focus{
  border-color:var(--accent); box-shadow:0 0 0 3px rgba(62,103,99,0.15); outline:none;
}
.form-field textarea{ resize:vertical; min-height:120px; }

/* NEDTREKKET TEGNES AV OSS, IKKE AV OPERATIVSYSTEMET. Uten appearance:none
   viser Mac, Windows, iOS og Android hver sin pil, og feltet ble 48 piksler
   høyt mot 46 for de andre. Pila er en innebygd SVG i blekkfargen, lagt som
   bakgrunn, og høyre polstring gir den plass.
   `padding-right` MÅ følge pila: kuttes den, legger lange valg seg oppå. */
.form-field select{
  appearance:none; -webkit-appearance:none;
  padding-right:42px; height:46px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%2348534f' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 15px center;
  background-size:12px 8px;
}
/* Pila skifter til aksentfargen når feltet har fokus, slik at rammen og pila
   sier det samme. */
.form-field select:focus{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%233E6763' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5'/%3E%3C/svg%3E");
}
.form-field input, .form-field select{ height:46px; }
.form-note{
  font-size:var(--t-2xs); color:var(--ink-faint); margin-top:14px;
}
.form-status{
  margin-top:14px; font-size:var(--t-xs); font-weight:600; display:none;
}
.form-status.is-visible{ display:block; }
.form-status.ok{ color:var(--accent-dark); }

.contact-row{ display:flex; gap:14px; align-items:flex-start; }
.contact-row .ico{
  width:36px; height:36px; border-radius:50%; flex:none;
  background:var(--paper-raised); border:1px solid var(--line);
  color:var(--accent-dark);
  display:flex; align-items:center; justify-content:center;
  transform:scale(0.4); opacity:0;
  transition:transform .5s cubic-bezier(.34,1.4,.64,1), opacity .3s ease;
}
.kontakt-info.is-visible .contact-row .ico{ transform:scale(1); opacity:1; }
.contact-row:nth-child(1) .ico{ transition-delay:0ms; }
.contact-row:nth-child(2) .ico{ transition-delay:100ms; }
.contact-row:nth-child(3) .ico{ transition-delay:200ms; }
.contact-row .ico svg{ width:17px; height:17px; }
.contact-row a, .contact-row p{
  text-decoration:none; font-size:var(--t-sm); color:var(--ink);
}
.contact-row span{ display:block; font-size:var(--t-2xs); color:var(--ink-faint); margin-bottom:2px; }
.contact-row a:hover{ color:var(--accent-dark); }

/* Skillestreken går i full bredde, mens selve teksten holdes på lesbar lengde og
   midtstilles. Tidligere lå max-width på blokka selv, så streken stoppet midt på
   siden og etterlot et stort tomrom til høyre. */
.crisis-note{
  margin-top:var(--rytme-5); padding-top:24px; border-top:1px solid var(--line-strong);
  text-align:center;
}
/* Den diskrete lenken til fagtekst-serien. RETTET 4. nov. 2026: lå først på
   samme størrelse som crisis-note, --t-xs og --ink-faint, altså to hakk under
   vanlig brødtekst, på høyde med finskriften under «Send en henvendelse».
   «Diskré» skulle bety lav på siden, ikke usynlig — jobben til lenken er at
   noen faktisk klikker. Nå på vanlig lesestørrelse, med egen skillestrek så
   den ikke leser som et vedheng til krisehenvisningen over. Fortsatt ingen
   knapp, ingen pil: den skal ikke konkurrere med «Send en henvendelse». */
.fagtekst-lenke{
  margin-top:24px; padding-top:24px; border-top:1px solid var(--line-strong);
  text-align:center;
  font-size:var(--t-md); color:var(--ink-soft);
}
.fagtekst-lenke .txtlink{ color:var(--ink); font-weight:600; }
.crisis-note p{
  font-size:var(--t-xs); color:var(--ink-faint);
  max-width:72ch; margin-inline:auto;
}
.crisis-note strong{ color:var(--ink-soft); }

/* Følger samme bruddpunkt som kontaktopplysningene over, slik at de to radene
   bryter samtidig og ikke i utakt. */
@media (max-width:820px){
  .form-row{ grid-template-columns:1fr; gap:0; }
}
@media (max-width:560px){
  .kontakt-skjema .btn-block{ width:100%; min-width:0; }
}

/* =========================================================
   FOOTER
   ========================================================= */
.site-footer{ padding:clamp(56px,7vw,84px) 0 clamp(48px,8vw,96px); }
.footer-grid{
  display:flex; flex-wrap:wrap; gap:18px; justify-content:space-between;
  align-items:center; padding-top:28px; border-top:1px solid var(--line);
}
/* Navnet i bunnen er en lenke og fikk derfor understrek som standard, mens det
   samme navnet i toppen ikke har det. Logoen skal se lik ut begge steder. */
.footer-brand{ font-family:var(--serif); font-weight:600; font-size:var(--t-lg);
  text-decoration:none; }
.footer-brand:hover{ color:var(--accent-dark); }
.footer-meta{ font-size:var(--t-xs); color:var(--ink-faint); }
.footer-links{ display:flex; flex-wrap:wrap; gap:4px 22px; font-size:var(--t-xs); }
/* WCAG 2.2 krever minst 24px berøringsmål på navigasjonslenker */
.footer-links a{
  text-decoration:none; color:var(--ink-soft);
  display:inline-flex; align-items:center; min-height:26px;
}
.footer-links a:hover{ color:var(--accent-dark); }


/* ═══════════════════════════════════════════════════════════════════
   SIDEOVERGANGER

   Nettstedet er ti separate HTML-filer. Uten dette blinker skjermen hvitt
   mellom hver navigasjon — den harde overgangen som skiller et nettsted
   fra noe som føles bygget. To linjer fjerner den, uten rammeverk og uten
   JavaScript: nettleseren tar et bilde av den gamle siden, ett av den nye,
   og krysstoner mellom dem selv.

   Virker i Chrome, Edge og Safari. Firefox har det ikke ennå, og der skjer
   det rett og slett ingenting — siden fungerer nøyaktig som før. Det er
   grunnen til at dette er trygt å ta i bruk nå.

   Headeren får eget navn og blir stående i ro gjennom overgangen. Uten det
   ville menyen tonet ut og inn sammen med resten, og da ser det ut som om
   siden lastes på nytt likevel. */
@view-transition{ navigation: auto; }

::view-transition-old(root),
::view-transition-new(root){
  animation-duration: .32s;
  animation-timing-function: cubic-bezier(.22,1,.36,1);
}
.site-header{ view-transition-name: toppmeny; }

/* Respekter innstillingen. Den som har bedt om mindre bevegelse skal få et
   rent bytte, ikke en krysston. */
@media (prefers-reduced-motion: reduce){
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*){ animation: none !important; }
}

/* ═══════════════════════════════════════════════════════════════════
   TYPOGRAFISK FINPUSS

   text-wrap:pretty hindrer at siste linje i et avsnitt blir stående med ett
   enslig ord. Overskriftene hadde allerede balance; brødteksten hadde det
   ikke. Nettleseren ser da på de siste linjene under ett og fordeler dem —
   det er forskjellen på sats og tekst som bare er brutt. */
p, li, dd, figcaption, .om-copy, .steg p{ text-wrap: pretty; }

/* ═══════════════════════════════════════════════════════════════════
   TEKSTFELTET VOKSER MED TEKSTEN

   Meldingsfeltet hadde fast høyde med rullefelt inni. Den som skriver mer
   enn fire linjer mistet begynnelsen av sin egen tekst av syne. Nå utvider
   feltet seg i stedet, med en øvre grense så siden ikke løper løpsk. */
.form-field textarea{
  field-sizing: content;
  min-height: 7.5em;
  max-height: 22em;
}

/* ═══════════════════════════════════════════════════════════════════
   SPØRSMÅLENE ÅPNER SEG I STEDET FOR Å SPRETTE

   <details> har alltid åpnet seg momentant: teksten er der eller ikke der.
   interpolate-size lar høyden animeres fra null til det innholdet faktisk
   trenger — noe CSS ikke kunne før. @starting-style gir svaret en
   starttilstand å tone inn fra.

   Nettlesere uten støtte åpner som før, med ett sprett. Ingenting går i
   stykker; det ser bare ut som i fjor. */
:root{ interpolate-size: allow-keywords; }

.faq-liste details::details-content{
  block-size: 0;
  overflow: clip;
  opacity: 0;
  transition: block-size .34s cubic-bezier(.22,1,.36,1),
              content-visibility .34s allow-discrete,
              opacity .26s ease;
}
.faq-liste details[open]::details-content{
  block-size: auto;
  opacity: 1;
}
@media (prefers-reduced-motion: reduce){
  .faq-liste details::details-content{ transition: none; }
}


/* ═══════════════════════════════════════════════════════════════════
   UTSKRIFT

   Folk skriver ut det de trenger å tenke over. En forelder som vil vise
   partneren sin siden om foreldreveiledning, eller noen som vil ha prisene
   på papir før de bestemmer seg. Uten dette får de med meny, bunntekst,
   mørke felt som spiser blekk, og lenker uten adresse.

   Her forsvinner alt som bare gir mening på skjerm, mørke flater blir hvite,
   og adressen bak hver lenke skrives ut i parentes — ellers er en utskrift
   full av understreket tekst som ikke fører noe sted. */
@media print{
  .site-header, .site-footer, .menu-toggle, .nav-cta,
  .hero-actions, .midt-cta, .btn, .skip-link,
  .frame-glow, .hero-mesh, .myr-band{ display:none !important; }

  :root{
    --paper:#fff; --paper-raised:#fff; --paper-deep:#fff;
    --ink:#000; --ink-soft:#222; --ink-faint:#444;
  }
  body{ background:#fff; color:#000; font-size:11pt; }
  section{ padding:0 0 14pt !important; break-inside:avoid; }
  .container{ max-width:none; padding:0; }

  /* Alt skal være synlig på papir, også det som venter på scrolling. */
  .reveal, .service-card, .stagger-col, .method-card, .prosess-steg{
    opacity:1 !important; transform:none !important;
  }
  .faq-liste details{ open:true; }
  .faq-liste details::details-content{ block-size:auto !important; opacity:1 !important; }

  h1,h2,h3,h4{ break-after:avoid; }
  .service-card, .prosess-steg, .foredrag-list li{ break-inside:avoid; }

  /* En understreket lenke uten adresse er ubrukelig på papir. */
  a[href^="http"]::after{ content:" (" attr(href) ")"; font-size:9pt; color:#555; word-break:break-all; }
  a[href^="#"]::after, a[href^="mailto"]::after{ content:""; }

  /* Skjemaet kan ikke fylles ut på papir — men adressen kan noteres. */
  .kontakt-skjema form{ display:none; }
}

/* ---------- scroll-reveal base ----------
   Ikke bruk .reveal i toppen av sidene. Det som står på første skjerm skal
   vises med en gang; med inntoning så tjenestesidene grå og halvferdige ut
   det første sekundet, særlig på mobil. Fjernet fra .fag-hero-inner og
   portrettet øverst på om.html 30. okt. 2026. */
.reveal{ opacity:0; transform:translateY(22px); transition:opacity .7s ease, transform .7s ease; }
.reveal.is-visible{ opacity:1; transform:translateY(0); }

/* Sikkerhetsnett: alt innhold over er skjult inntil JS legger på .is-visible.
   Feiler main.js — blokkert skript, nettverksfeil, gammel nettleser — blir hele
   siden stående blank. Derfor settes klassen .js på <html> av et lite skript i
   <head>; uten den vises alt umiddelbart, uten animasjon. Selges det
   helsetjenester må innholdet fram uansett hva som skjer med JavaScript. */
html:not(.js) .reveal,
html:not(.js) .service-card,
html:not(.js) .method-card,
html:not(.js) .stagger-col .proof-list li,
html:not(.js) .kontakt-info .contact-row .ico{
  opacity:1 !important;
  transform:none !important;
}
/* Menyknappen åpnes av JS. Uten JS ville den bare stått der og ikke gjort noe,
   så da skjules den. Siden er én lang side — alt nås ved å rulle. */
html:not(.js) .menu-toggle{ display:none !important; }

/* ---------- utility ---------- */
.visually-hidden{
  position:absolute; width:1px; height:1px; overflow:hidden;
  clip:rect(0 0 0 0); white-space:nowrap;
}

/* =========================================================
   PUSTEROM — rytmebryteren midt på siden
   =========================================================
   Alle andre seksjoner har samme form. Denne har ingen kort, ingen knapper og
   ingenting å gjøre. Den er der for at øyet skal få hvile ett sted, og for at
   det som kommer etter skal føles som en ny del av siden. */
/* ===== DEN MØRKE BOLKEN. Lagt inn 3. nov. 2026 =====
   Forsiden er 13 935 piksler høy, og før dette lå hver eneste bolk mellom
   lysstyrke 227 og 237. Hele siden levde i ti lysstyrkepoeng, og da får den
   aldri en pust. Dette er det ene stedet verdien snur.

   Det er ikke en ny farge. Det er --ink, som allerede bærer all brødteksten,
   brukt i full bredde. Myrgrafikken ligger under på 16 prosent og blir
   tekstur i stedet for bilde.

   IKKE legg mørkt på flere bolker. Virkningen ligger i at det skjer én gang. */
.pusterom{
  position:relative;
  padding:clamp(96px,14vw,190px) 0 clamp(72px,10vw,130px);
  overflow:hidden;
  background:var(--ink);
}
.pusterom-bilde{
  position:absolute; inset:0;
  background:url('../img/myr-band.svg') center bottom / cover no-repeat;
  opacity:0.16;
}
/* To uttoninger over grafikken.
   Fra venstre: teksten skal alltid ha rolig grunn under seg. Uten denne falt
   bylinen ned på det mørkeste båndet og forsvant.
   Fra toppen: båndet skal ikke få en hard kant mot seksjonen over. */
/* Uttoningene toner nå mot --ink og ikke mot papiret. Samme oppgave som før:
   fra venstre så sitatet har rolig grunn under seg, fra toppen så båndet ikke
   får en hard kant. Tallene er --ink i rgb. */
.pusterom-bilde::after{
  content:''; position:absolute; inset:0;
  background:
    linear-gradient(to right,
      var(--ink) 0%, rgba(23,32,35,0.92) 26%,
      rgba(23,32,35,0.5) 44%, rgba(23,32,35,0) 62%),
    linear-gradient(to bottom,
      var(--ink) 0%, rgba(23,32,35,0.6) 20%, rgba(23,32,35,0) 48%);
}
.pusterom .container{ position:relative; }
/* Ingen max-width på selve blockquote: ch regnes i elementets egen
   skriftstørrelse, og her er den 16,5px mens sitatet settes i over 40px.
   Bredden hører hjemme på avsnittet, der den store skriften faktisk gjelder. */
.pusterom-sitat{ margin:0; text-align:left; }
.pusterom-sitat p{
  font-family:var(--serif); font-weight:500;
  font-size:var(--d-sitat); line-height:var(--lh-display);
  letter-spacing:-0.012em; color:var(--accent-ink);
  margin:0; text-wrap:balance; max-width:19ch;
}
.pusterom-sitat cite{
  display:block; margin-top:var(--rytme-1);
  font-family:var(--sans); font-style:normal; font-weight:700;
  font-size:var(--t-3xs); letter-spacing:0.18em; text-transform:uppercase;
  /* Varm, ikke grå. Terrakottaen er den andre kuløren i paletten, og på mørk
     grunn er dette det ene stedet den får stå alene. */
  color:var(--varm-lys);
}
@media (max-width:640px){
  /* MÅLT 3. NOV. 2026. Med den gamle polstringen ble den mørke bolken bare 223
     piksler høy på 375, altså 27 prosent av skjermen, mot 63 prosent på
     skrivebordet. Da leses den som en stripe, ikke som et pusterom, og det var
     hele poenget med den. Sitatet ble dessuten kortet samme dag og mistet en
     linje. Nå er den rundt 340 piksler, altså drøyt 40 prosent av skjermen.
     Vil du endre den: det er høyden i forhold til skjermen som teller, ikke
     pikseltallet. Mål den. */
  .pusterom{ padding:clamp(130px,30vw,170px) 0 clamp(110px,26vw,150px); }
  .pusterom-sitat p{ max-width:none; }
}

/* =========================================================
   TILBAKEMELDINGER (forsiden, mellom tjenester og priser)
   Egen seksjon, ikke inni .tjenester eller .pusterom. Ett sitat vises om
   gangen i stedet for et kortgrid, fordi 14 sitater av svært ulik lengde
   ikke lar seg tvinge inn i jevnhøye bokser uten at korte sitat flyter i
   tomrom og lange klippes. Alle 14 ligger i markup under .tilbakemeldinger-
   data (lesbart uten JS, indekserbart), og skriptet bytter det synlige
   sitatet mellom dem. Sitér-glyffen og etiketten under gjenbruker samme
   varme strek som .eyebrow, det er husets egen signatur for en kilde. */
.tilbakemeldinger{ padding:var(--rytme-7) 0; background:var(--paper); }
.tilbakemeldinger .section-head{ margin-bottom:0; }
.tilbakemeldinger-data{ display:none; }

/* .tilbakemeldinger-rad er den eneste raden pilene skal sentreres mot (bare
   sitatteksten). Kilde og teller står UTENFOR raden, som egne sentrerte
   linjer under. Lå de inni raden sammen med sitatet, sentrerte flexboksen
   seg mot hele stabelens høyde, og pilene landet synlig for høyt — riktig
   regnet, men galt for øyet. */
.tilbakemeldinger-viser{
  margin:var(--rytme-4) auto 0; max-width:740px; text-align:center;
}
.tilbakemeldinger-merke{
  display:block; margin:0 0 2px;
  font-family:var(--serif); font-weight:600; font-size:clamp(2.6rem,5vw,3.6rem);
  line-height:1; color:var(--accent); opacity:0.3;
  pointer-events:none; user-select:none;
}
.tilbakemeldinger-rad{ display:flex; align-items:center; gap:20px; }
.tilbakemeldinger-sitat{
  flex:1; min-width:0; margin:0;
  transition:opacity .22s ease, transform .22s ease;
  /* touch-action:pan-y lar siden fortsatt scrolle vertikalt med fingeren,
     og slipper bare den horisontale bevegelsen til sveipelytteren i main.js. */
  touch-action:pan-y;
}
.tilbakemeldinger-sitat.byttes{ opacity:0; transform:translateY(6px); }
.tilbakemeldinger-sitat p{
  font-family:var(--serif); font-weight:500; font-size:var(--d-6);
  line-height:1.42; color:var(--ink); margin:0 auto; max-width:52ch; text-wrap:balance;
}

#tilbakemeldinger-kilde{
  display:inline-flex; align-items:center; gap:12px; margin-top:var(--rytme-2);
  font-family:var(--sans); font-style:normal; font-weight:700;
  font-size:var(--t-2xs); letter-spacing:0.11em; text-transform:uppercase;
  color:var(--varm-tekst);
}
#tilbakemeldinger-kilde::before,
#tilbakemeldinger-kilde::after{
  content:''; width:22px; height:1px; background:var(--varm); flex:none;
}
.tilbakemeldinger-teller{
  margin:var(--rytme-1) 0 0;
  font-family:var(--sans); font-weight:600; font-size:var(--t-xs);
  color:var(--ink-faint); letter-spacing:0.02em;
  font-variant-numeric:tabular-nums;
}
/* Sveipehintet trengs bare der sveiping faktisk er den naturlige
   handlingen — på berøringsskjerm, med pilene fortsatt synlige ved siden
   av. Skjult på desktop, der piler og klikk er det forventede mønsteret. */
.tilbakemeldinger-sveip{ display:none; }

.tilbakemeldinger-prev, .tilbakemeldinger-next{
  width:44px; height:44px; border-radius:50%; border:1px solid var(--line);
  background:transparent; color:var(--ink); cursor:pointer; flex:none;
  display:flex; align-items:center; justify-content:center;
  transition:border-color .2s ease, background .2s ease, transform .2s ease;
}
.tilbakemeldinger-prev:hover, .tilbakemeldinger-next:hover{
  border-color:var(--accent); background:var(--paper-raised); transform:translateY(-1px);
}
.tilbakemeldinger-prev:active, .tilbakemeldinger-next:active{ transform:translateY(0); }
.tilbakemeldinger-prev svg, .tilbakemeldinger-next svg{ width:17px; height:17px; }

/* Under 640px er pilene for trange ved siden av sitatet — en lang
   tilbakemelding presses ned i en smal spalte mellom to knapper og blir en
   høy, smal tekstsøyle som klistrer seg til dem. Sveiping er uansett
   hovedveien inn på mobil (se hintet), så pilene flyttes under sitatet som
   et eget, sentrert par i stedet for å flankere det. Samme DOM, bare
   omorganisert med flex order — ingen HTML- eller JS-endring nødvendig. */
@media (max-width:640px){
  .tilbakemeldinger-rad{
    flex-wrap:wrap; justify-content:center; row-gap:18px; gap:14px;
  }
  .tilbakemeldinger-sitat{ order:1; flex:1 1 100%; }
  .tilbakemeldinger-prev{ order:2; }
  .tilbakemeldinger-next{ order:3; }
  .tilbakemeldinger-prev, .tilbakemeldinger-next{ width:38px; height:38px; }
  .tilbakemeldinger-prev svg, .tilbakemeldinger-next svg{ width:15px; height:15px; }
  .tilbakemeldinger-merke{ font-size:clamp(2.2rem,8vw,2.8rem); }
  .tilbakemeldinger-sveip{
    display:block; margin:10px 0 0;
    font-family:var(--sans); font-weight:600; font-size:var(--t-3xs);
    letter-spacing:0.02em; color:var(--ink-faint);
  }
}
@media (prefers-reduced-motion:reduce){
  .tilbakemeldinger-sitat{ transition:none; }
}

/* =========================================================
   ETIKETTHIERARKI
   =========================================================
   Seksjonsetikettene er leire med en 32px strek. Underetikettene — taushetsplikt,
   merverdiavgift, avbestilling — sto i grønt uten noe merke, og leste derfor som
   en glemt detalj framfor et lavere nivå.

   De får nå samme strek i halv lengde. Da er slektskapet synlig og rangen
   entydig: lang strek = ny seksjon, kort strek = underpunkt. */
.trygghet-kort-item h3,
.pris-vilkaar h3{
  display:flex; align-items:center; gap:9px;
}
.trygghet-kort-item h3::before,
.pris-vilkaar h3::before{
  content:''; width:16px; height:1px; background:var(--varm);
  flex:none;
}

/* =========================================================
   LEDIGE TIDER

   Står mellom bookingfeltet og skjemaet. Ikke en kalender med
   tomme ruter — Otto har noen få timer i uka, og et månedsrutenett
   ville vært mest tom plass. I stedet en rad med de faktiske
   tidene, som brytes til flere linjer når det er trangt.
   ========================================================= */
.tider{
  margin-top:var(--rytme-2);
  /* Luft ned mot skjemaet. Uten denne klemmer siste rad med tider rett
     mot «Navn», og de to leses som én blokk i stedet for to steg. */
  margin-bottom:var(--rytme-3);
  padding-top:var(--rytme-1);
  border-top:1px solid var(--line);
}
.tider-tittel{
  font-family:var(--sans); font-size:var(--t-2xs); font-weight:700;
  letter-spacing:0.09em; text-transform:uppercase; color:var(--varm-tekst);
  margin:0 0 8px;
}
.tider-hjelp{
  color:var(--ink-soft); font-size:var(--t-sm); margin:0 0 18px; max-width:58ch;
}
.tider-rad{ display:flex; flex-wrap:wrap; gap:10px; }

/* Hver time er en knapp, ikke en radioknapp: den skal kunne slås av igjen
   ved å trykke en gang til, og den skal se ut som noe man peker på. */
.tid{
  font-family:var(--sans); text-align:left; cursor:pointer;
  display:flex; flex-direction:column; gap:3px;
  padding:11px 16px; min-width:150px;
  background:var(--paper-raised); color:var(--ink);
  border:1px solid var(--line-strong); border-radius:var(--radius);
  transition:border-color .18s ease, background .18s ease, transform .12s ease;
}
.tid:hover{ border-color:var(--accent); background:#fff; }
.tid:active{ transform:scale(.985); }
.tid:focus-visible{ outline:2px solid var(--varm); outline-offset:2px; }
.tid-dag{ font-size:var(--t-2xs); font-weight:600; color:var(--ink-soft); }
.tid-kl{ font-family:var(--serif); font-size:var(--t-lg); font-weight:500; letter-spacing:-0.01em; }

.tid.er-valgt{
  background:var(--accent); border-color:var(--accent-dark); color:var(--accent-ink);
}
.tid.er-valgt .tid-dag{ color:var(--accent-ink); opacity:.85; }

/* MÅ STÅ. `.tid` setter display:flex, og det slår hidden-attributtet. Uten
   denne linja vises alle tidene likevel, og «Se flere tider» gjør ingenting. */
.tid[hidden]{ display:none; }

/* Fra 2. nov. 2026 vises bare de fire nærmeste tidene, resten bak en knapp.
   Lista vokste til elleve da helgene i november kom inn, og på 390 piksler ble
   blokka 1104 piksler høy, altså 1,3 skjermhøyder, som lå FORAN skjemaet. Den
   som trykket «Send en henvendelse» måtte rulle forbi alt det før hun nådde
   navnefeltet. 32 av 33 annonseklikk kommer fra mobil, så det var den rullingen
   som kostet mest. Timene er ikke borte, de er ett trykk unna. */
.tider-mer{
  margin-top:12px; font-family:var(--sans); font-size:var(--t-sm);
  cursor:pointer; padding:9px 16px;
  background:none; color:var(--accent);
  border:1px solid var(--line-strong); border-radius:var(--radius);
}
.tider-mer:hover{ border-color:var(--accent); background:var(--paper-raised); }
.tider-mer:focus-visible{ outline:2px solid var(--varm); outline-offset:2px; }

@media (max-width:460px){
  .tid{ flex:1 1 100%; min-width:0; }
}
@media (prefers-reduced-motion:reduce){
  .tid{ transition:none; }
  .tid:active{ transform:none; }
}

/* =========================================================
   TIL FORELDRE
   Ungdomssiden snakker til ungdommen, og det skal den fortsette med:
   det er den stemmen som gjør at en femtenåring tør lese videre. Men
   det er foreldrene som søker, som betaler, og som under 16 år må
   bestille timen. Derfor én tydelig merket blokk til dem høyt på
   siden, i stedet for å legge om tonen i hele teksten.
   ========================================================= */
.til-foreldre{
  margin-top:var(--rytme-2);
  padding:clamp(20px,2.8vw,26px) clamp(20px,3vw,28px);
  background:var(--paper-raised);
  border:1px solid var(--line);
  border-left:3px solid var(--accent);
  border-radius:var(--radius);
  max-width:60ch;
}
.til-foreldre-merke{
  font-family:var(--sans); font-size:var(--t-2xs); font-weight:700;
  letter-spacing:0.09em; text-transform:uppercase; color:var(--varm-tekst);
  margin:0 0 0.9em;
}
.til-foreldre p{
  margin:0; color:var(--ink-soft); font-size:var(--t-md);
}
.til-foreldre p + p{ margin-top:0.9em; }

/* =========================================================
   FAKTASTRIPE I HEROEN
   Annonsetrafikk lander her og skal ikke måtte lete etter pris og
   varighet. De sto først under «Det praktiske», et godt stykke nede.
   Stripa ligger under knappene, ikke over, så den ikke konkurrerer
   med overskriften om det første blikket.
   ========================================================= */
.hero-fakta{
  display:flex; flex-wrap:wrap; align-items:baseline;
  gap:6px 14px;
  margin-top:var(--rytme-1);
  font-family:var(--sans); font-size:var(--t-sm); color:var(--ink-faint);
}
.hero-fakta strong{
  color:var(--ink); font-weight:600;
}
/* Først sto det et «·» etter hvert punkt. Når stripa brøt over to
   linjer på smal skjerm, ble skilletegnet hengende alene ytterst på
   linja. Luft alene skiller like tydelig og brekker pent. */
.hero-fakta span{ white-space:nowrap; }
@media (max-width:460px){
  .hero-fakta{ gap:4px 12px; font-size:var(--t-xs); }
}
/* Inne i «Til foreldre»-blokka på ungdomssiden står stripa til slutt, ikke
   under knappene. Prisen hører til forelderen som skal bestille, og skal
   ikke være det første konkrete en femtenåring møter etter overskriften. */
.til-foreldre .hero-fakta{
  margin-top:1.2em; padding-top:1em;
  /* Inne i panelet er det for smalt til at stripa blir en stripe: hvert punkt
     får sin egen linje. Da trenger den en kant for å lese som «det praktiske»
     og ikke som enda et avsnitt som har mistet formateringen. */
  border-top:1px solid var(--line);
  gap:4px 14px;
}

/* =========================================================
   LINJEN UNDER HOVEDKNAPPEN
   Det som stopper folk rett foran knappen er sjelden prisen. Det er
   at de tror de binder seg til noe ved å trykke. Én linje, plassert
   under knappen og ikke over, så den ikke konkurrerer med selve
   handlingen om oppmerksomheten.
   ========================================================= */
.hero-cta-note{
  margin-top:14px;
  font-family:var(--sans); font-size:var(--t-xs); color:var(--ink-faint);
  max-width:46ch;
}

/* =========================================================
   TRE STEG FORAN SKJEMAKNAPPEN
   Tallene er ikke pynt. Dette er en rekkefølge i tid, og det er
   nettopp rekkefølgen folk er usikre på: hvor lenge de må vente, og
   hvem som gjør neste trekk. Var det ikke en sekvens, skulle det
   ikke stått tall her.
   ========================================================= */
.form-steg{
  list-style:none; padding:0;
  /* .form-lav-terskel over har margin-bottom:0, så uten toppmargin her står
     avsnittet og første steg klistret sammen og leses som én blokk. */
  margin:1.15em 0 clamp(20px,2.6vw,26px);
  counter-reset:steg;
  display:grid; gap:10px;
  font-family:var(--sans); font-size:var(--t-sm); color:var(--ink-soft);
}
.form-steg li{
  counter-increment:steg;
  display:grid; grid-template-columns:20px 1fr; gap:10px; align-items:baseline;
}
.form-steg li::before{
  content:counter(steg);
  font-size:var(--t-2xs); font-weight:700; color:var(--varm-tekst);
  letter-spacing:0.04em;
}

/* =========================================================
   BEKREFTELSEN UNDER DE LEDIGE TIDENE
   Uten den er et trykk bare en knapp som skifter farge, og da er det
   flere som tror timen er bestilt. Panelet sier begge ting i samme
   åndedrag: hva som er valgt, og at det ennå ikke er avtalt. Det er
   derfor merknaden står her og ikke i en FAQ lenger ned — det er her
   misforståelsen oppstår.
   ========================================================= */
.tid-valgt{
  margin-top:16px;
  padding:13px 16px;
  background:var(--paper-raised);
  border:1px solid var(--line);
  border-left:3px solid var(--accent);
  border-radius:var(--radius);
  max-width:52ch;
}
.tid-valgt[hidden]{ display:none; }
.tid-valgt-tid{
  margin:0; font-family:var(--serif); font-size:var(--t-lg); color:var(--ink);
}
.tid-valgt-merknad{
  margin:5px 0 0; font-family:var(--sans); font-size:var(--t-xs); color:var(--ink-faint);
}

/* =========================================================
   TRÅDEN I SKJØTEN

   Ligger mellom «Kjenner du igjen dette?» og «Slik jobber jeg», altså der
   siden snur fra å beskrive det som har låst seg til å beskrive hva som
   gjøres med det. Den ligger i selve overgangen mellom de to
   bakgrunnstonene, ikke ved siden av brødteksten. Det er forskjellen på
   struktur og pynt: en bevegelse ved siden av tekst trekker blikket vekk
   fra teksten, en bevegelse som ER skillet gjør ikke det.

   Den negative toppmargen trekker båndet opp i bunnpolstringen til
   seksjonen over. Begge er --paper der, så overlappet er usynlig, og
   skjøten koster bare differansen i høyde i stedet for hele sin egen.

   Uten JavaScript står den igjen som en ren toneovergang. Det er med
   vilje: tråden forsterker, den bærer ikke.
   ========================================================= */
/* Fast høyde, ikke height:auto. Med auto følger høyden bredden, og skjøten
   ble 127 piksler på en smal skjerm og 184 på en bred. Nå setter koden
   viewBox etter den faktiske bredden i stedet, så knuten har samme
   fysiske størrelse overalt og tråden spenner hele veien uansett. */
.trad-skjote{
  display:block; width:100%; height:clamp(74px, 8vw, 96px);
  margin-top:calc(-1 * clamp(24px, 3.4vw, 46px));
  background:linear-gradient(to bottom,
    var(--paper) 0%, var(--paper) 18%,
    var(--paper-deep) 86%, var(--paper-deep) 100%);
}

/* =========================================================
   VEIVISER
   Står over krysslenkene på de to sidene folk forveksler:
   foreldreveiledning og samtaler med ungdom. Lenkene under sier hva
   de andre tjenestene er. Denne sier hvilken av dem som er din.
   ========================================================= */
.veiviser{
  margin:1.1em 0 1.8em; max-width:62ch;
  color:var(--ink-soft); font-size:var(--t-md);
}
.veiviser strong{ color:var(--ink); font-weight:600; }

/* =========================================================
   SVÆRT SMALE SKJERMER
   På 320 piksler, som er iPhone SE 1. generasjon og noen eldre
   Android-telefoner, stakk «Send henvendelse» rundt 40 piksler
   utenfor høyre kant. Siden skrollet ikke sidelengs, så feilen var
   usynlig i alt annet enn at knappen ble klippet. Den er for viktig
   til å skjules, så den strammes inn i stedet: mindre luft i knappen,
   litt mindre navnetrekk, og smalere sidemargin i toppen.
   ========================================================= */
@media (max-width:400px){
  .nav{ padding-left:16px; padding-right:16px; }
  .brand{ font-size:var(--t-md); }
  .nav-cta{ gap:8px; }
  .nav-cta .btn{ padding:9px 12px; font-size:var(--t-2xs); }
  .menu-toggle{ padding:6px; }
}