/* ---------- Fonter (selvhostet, ingen tredjepart) ----------
   ITF Free Font License + SIL Open Font License 1.1. Se assets/fonts/
   Variable filer: én per familie dekker hele vektaksen.
   ---------------------------------------------------------- */
@font-face{font-family:'Satoshi';src:url('../assets/fonts/satoshi-normal.woff2') format('woff2');font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:'Geist Mono';src:url('../assets/fonts/geist-mono-normal.woff2') format('woff2');font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:'Bevellier';src:url('../assets/fonts/bevellier-normal.woff2') format('woff2');font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:'Switzer';src:url('../assets/fonts/switzer-normal.woff2') format('woff2');font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:'Boska';src:url('../assets/fonts/boska-normal.woff2') format('woff2');font-weight:100 900;font-style:normal;font-display:swap}

/* ---------- Design DNA ----------
   Målt ved 1440 px 30.09.2026:
   puresportsmed.com  display vekt 300, tracking -2 %, djup flate på 52,9 % av malt areal, papir #F8F7F2, pilleknappar
   myodetox.com       display lh 1,00, tracking -3,3 %, tekstbreidde 600 px, ingen skuggar, blå flate over heile seksjonar
   Fargane er logoen til klinikken: #35BFAE og #1B5A7D. Flata er marinefargen mørkna.
   ---------------------------------------------------------- */
:root{
  /* Palett 1: fjord (logofargane) */
  --c-papir:#F5F3EE;
  --c-papir-2:#ECE8E0;
  --c-blekk:#0F2C3B;
  --c-dempa:#47606B;
  --c-aksent-tekst:#0B665C;
  --c-felt:#0F3B52;
  --c-pa-felt:#F5F3EE;
  --c-pa-felt-dempa:#C9D8DC;
  --c-aksent-pa-felt:#35BFAE;
  --c-tint:#CDEBE6;
  --c-slor:#0A2B3D;
  --c-pa-slor:#F5F3EE;
  --c-pa-slor-dempa:#D5E0E3;
  --c-aksent-pa-slor:#35BFAE;
  --c-knapp:#35BFAE;
  --c-knapp-tekst:#08222E;
  --c-knapp-pa-slor:#35BFAE;
  --c-knapp-pa-slor-tekst:#08222E;
  --c-tone:#1B5A7D;

  /* Font 1: Satoshi 300 + Geist Mono */
  --f-display:'Satoshi',system-ui,-apple-system,sans-serif;
  --f-tekst:'Satoshi',system-ui,-apple-system,sans-serif;
  --f-etikett:'Geist Mono',ui-monospace,Menlo,monospace;
  --d-vekt:300;
  --d-lh:1;
  --d-spor:-.03em;
  --d-case:none;
  --d-skala:1;
  --e-storleik:.8125rem;
  --e-spor:.01em;

  --fs-hero:calc(clamp(2.75rem,6.6vw,6.25rem) * var(--d-skala));
  --fs-h2:calc(clamp(2.125rem,4.4vw,4.25rem) * var(--d-skala));
  --fs-h3:calc(clamp(1.375rem,1.9vw,1.875rem) * var(--d-skala));
  --fs-tal:calc(clamp(2.75rem,6.4vw,6rem) * var(--d-skala));
  --fs-ingress:clamp(1.125rem,1.45vw,1.375rem);
  --fs-tekst:1.125rem;
  --fs-liten:.9375rem;

  --rom:clamp(4.5rem,9vw,8.5rem);
  --rom-s:clamp(2rem,4vw,3.5rem);
  --kant:clamp(1.25rem,4.2vw,3.75rem);
  --maks:1440px;
  --tekstbreidde:600px;
  --radius:6px;
  --pille:999px;
  --topp-h:76px;
  --dokk-h:0px;
  --ease:cubic-bezier(.16,1,.3,1);

  --z-dekor:1; --z-sticky:100; --z-dokk:200; --z-overlay:300; --z-panel:400; --z-varsel:500;
}
/* Palett 2: lys mint. Éi lys flate ber sida, blekket er logo-marinen. */
:root[data-palett="2"]{
  --c-papir:#F7F5F0; --c-papir-2:#EDE9E1; --c-blekk:#10303F; --c-dempa:#45606B; --c-aksent-tekst:#0B5F72;
  --c-felt:#BFE6DF; --c-pa-felt:#0D2B39; --c-pa-felt-dempa:#2E4C58; --c-aksent-pa-felt:#0A4F5E;
  --c-tint:#E6DFD0; --c-slor:#0D2B39; --c-aksent-pa-slor:#BFE6DF;
  --c-knapp:#10303F; --c-knapp-tekst:#F7F5F0; --c-knapp-pa-slor:#BFE6DF; --c-knapp-pa-slor-tekst:#0D2B39;
  --c-tone:#1B5A7D;
}
/* Palett 3: skifer og oker. Varm motvekt til logofargane. */
:root[data-palett="3"]{
  --c-papir:#F3EFE7; --c-papir-2:#E8E2D6; --c-blekk:#1F2A2E; --c-dempa:#4D5A5E; --c-aksent-tekst:#7A5410;
  --c-felt:#1F2A2E; --c-pa-felt:#F3EFE7; --c-pa-felt-dempa:#C8CFCE; --c-aksent-pa-felt:#E3B565;
  --c-tint:#EBDDBF; --c-slor:#161E21; --c-aksent-pa-slor:#E3B565;
  --c-knapp:#E3B565; --c-knapp-tekst:#1F2A2E; --c-knapp-pa-slor:#E3B565; --c-knapp-pa-slor-tekst:#1F2A2E;
  --c-tone:#4A5A60;
}
/* Font 2: Bevellier + Switzer. Font 3: Boska + Satoshi (paret frå The Yoga Studio Økern). */
:root[data-font="2"]{
  --f-display:'Bevellier',Impact,sans-serif; --f-tekst:'Switzer',system-ui,sans-serif; --f-etikett:'Switzer',system-ui,sans-serif;
  --d-vekt:500; --d-lh:.92; --d-spor:0em; --d-case:uppercase; --d-skala:1.16; --e-storleik:.875rem; --e-spor:.02em;
}
:root[data-font="3"]{
  --f-display:'Boska',Georgia,serif; --f-etikett:'Satoshi',system-ui,sans-serif;
  --d-vekt:300; --d-lh:1; --d-spor:-.025em; --d-skala:1.04; --e-storleik:.875rem; --e-spor:.02em;
}

/* ---------- Flater: seksjonar byter tokenverdiar, ikkje reglar ---------- */
body,.flate-felt,.flate-tint,.flate-hero,.flate-mork{background:var(--bg);color:var(--tekst)}
body{
  --bg:var(--c-papir); --tekst:var(--c-blekk); --dempa:var(--c-dempa); --lenke:var(--c-aksent-tekst); --fokus:var(--c-blekk);
  --knapp:var(--c-knapp); --knapp-tekst:var(--c-knapp-tekst);
  --linje:color-mix(in srgb,var(--tekst) 20%,transparent);
}
.flate-felt{--bg:var(--c-felt);--tekst:var(--c-pa-felt);--dempa:var(--c-pa-felt-dempa);--lenke:var(--c-aksent-pa-felt);--fokus:var(--c-aksent-pa-felt);--linje:color-mix(in srgb,var(--tekst) 24%,transparent)}
.flate-tint{--bg:var(--c-tint);--linje:color-mix(in srgb,var(--tekst) 26%,transparent)}
.flate-hero,.flate-mork{--bg:var(--c-slor);--tekst:var(--c-pa-slor);--dempa:var(--c-pa-slor-dempa);--lenke:var(--c-aksent-pa-slor);--fokus:var(--c-aksent-pa-slor);--knapp:var(--c-knapp-pa-slor);--knapp-tekst:var(--c-knapp-pa-slor-tekst);--linje:color-mix(in srgb,var(--tekst) 24%,transparent)}

/* ---------- Grunnlag ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:var(--topp-h)}
body{margin:0;font-family:var(--f-tekst);font-size:var(--fs-tekst);line-height:1.5;-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%;height:auto}
h1,h2,h3,p,ul,dl,dd,figure{margin:0}
ul{padding:0;list-style:none}
a{color:inherit}
h2,h3,.hero__tittel,.fakta__tal{font-family:var(--f-display);font-weight:var(--d-vekt);line-height:var(--d-lh);letter-spacing:var(--d-spor);text-transform:var(--d-case);text-wrap:balance}
h2{font-size:var(--fs-h2)}
h3{font-size:var(--fs-h3);line-height:1.1}
:focus-visible{outline:2px solid var(--fokus);outline-offset:3px;border-radius:2px}
.hopp{position:absolute;left:var(--kant);top:-4rem;z-index:var(--z-varsel);background:var(--c-papir);color:var(--c-blekk);padding:.75rem 1rem;border-radius:var(--radius)}
.hopp:focus{top:.75rem}

.ramme{max-width:var(--maks);margin-inline:auto;padding-inline:var(--kant)}
.seksjon{padding-block:var(--rom)}
.seksjon__hovud{display:grid;grid-template-columns:repeat(12,1fr);column-gap:1.5rem;row-gap:1.25rem;align-items:end;margin-bottom:var(--rom-s)}
.seksjon__hovud h2{grid-column:1 / span 6}
.seksjon__hovud .ingress{grid-column:8 / -1}
.ingress{font-size:var(--fs-ingress);line-height:1.45;max-width:var(--tekstbreidde);color:var(--tekst)}
.etikett{font-family:var(--f-etikett);font-size:var(--e-storleik);letter-spacing:var(--e-spor);color:var(--lenke)}
.lenke{color:var(--lenke);text-underline-offset:.22em;text-decoration-thickness:1px;display:inline-flex;min-height:44px;align-items:center}
.lenke:hover{text-decoration-thickness:2px}

/* Knappar: piller, som i begge referansane */
.knapp{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:.75rem 1.625rem;border-radius:var(--pille);font:500 1rem/1 var(--f-tekst);text-decoration:none;white-space:nowrap;transition:transform .2s var(--ease),background-color .2s var(--ease),color .2s var(--ease)}
.knapp--aksent{background:var(--knapp);color:var(--knapp-tekst)}
.knapp--strek{box-shadow:inset 0 0 0 1px var(--linje);color:var(--tekst)}
.knapp:active{transform:scale(.97)}
@media (hover:hover) and (pointer:fine){
  .knapp--aksent:hover{transform:translateY(-1px)}
  .knapp--strek:hover{background:color-mix(in srgb,var(--tekst) 10%,transparent)}
}

/* Foto: tona inn i paletten. Gråtone + fargelag på mix-blend-mode:color (ikkje multiply). */
.bilde{position:relative;overflow:hidden;border-radius:var(--radius);background:var(--c-papir-2)}
.bilde img{width:100%;height:100%;object-fit:cover}
.bilde--tona img{filter:grayscale(1) contrast(1.06)}
.bilde--tona::after{content:"";position:absolute;inset:0;background:var(--c-tone);mix-blend-mode:color;pointer-events:none}

/* ---------- Topp ---------- */
.topp{--bg:var(--c-slor);--tekst:var(--c-pa-slor);--lenke:var(--c-aksent-pa-slor);--fokus:var(--c-aksent-pa-slor);--knapp:var(--c-knapp-pa-slor);--knapp-tekst:var(--c-knapp-pa-slor-tekst);--linje:color-mix(in srgb,var(--tekst) 28%,transparent);
  position:fixed;inset:0 0 auto 0;z-index:var(--z-sticky);height:var(--topp-h);display:flex;align-items:center;gap:2rem;padding-inline:var(--kant);background:var(--bg);color:var(--tekst);transition:background-color .3s var(--ease)}
html:not([data-hero="2"]) .topp:not(.er-rulla){background:transparent}
.topp__logo{display:flex;align-items:center;min-height:44px;margin-right:auto}
.logo{width:auto;height:34px}
.topp__nav{display:flex;gap:1.75rem}
.topp__nav a,.topp__tlf{font-size:var(--fs-liten);text-decoration:none;min-height:44px;display:inline-flex;align-items:center}
.topp__tlf{font-family:var(--f-etikett);font-size:var(--e-storleik)}
.topp__nav a:hover,.topp__tlf:hover{text-decoration:underline;text-underline-offset:.3em}
.topp__handling{display:flex;align-items:center;gap:1.25rem}
.topp .knapp{min-height:44px;padding:.625rem 1.25rem;font-size:var(--fs-liten)}

/* ---------- Hero ---------- */
.hero{position:relative;overflow:hidden}
.hero[data-hero="2"]{display:none}
html[data-hero="2"] .hero[data-hero="1"]{display:none}
html[data-hero="2"] .hero[data-hero="2"]{display:block}
.hero__inn{position:relative;z-index:var(--z-dekor);max-width:var(--maks);margin-inline:auto;padding:calc(var(--topp-h) + 2rem) var(--kant) var(--rom-s)}
.hero__tittel{font-size:var(--fs-hero);margin:0;display:flex;flex-direction:column}
.hero .linje{display:block;overflow:hidden;padding:.17em .08em .1em 0;margin:-.17em -.08em -.1em 0}
.hero .linje-inn{display:block}
.hero__sub{font-size:var(--fs-ingress);line-height:1.45;max-width:34em}
.hero__handling{display:flex;flex-wrap:wrap;gap:.75rem}

.hero--foto{min-height:min(100svh,960px);display:grid;align-items:end}
.hero--foto .hero__bilde{position:absolute;inset:0;border-radius:0;background:var(--c-slor)}
.hero--foto .hero__bilde picture,.hero--foto .hero__bilde img{display:block;width:100%;height:100%}
.hero--foto .hero__bilde img{object-position:50% 60%}
/* Sløret held teksten over 4,5:1 også om biletet blir bytt. Målt mot pikslane, sjå notat. */
.hero--foto::after{content:"";position:absolute;inset:0;--s:var(--c-slor);background:
  linear-gradient(180deg,color-mix(in srgb,var(--s) 82%,transparent) 0,color-mix(in srgb,var(--s) 60%,transparent) 110px,transparent 260px),
  linear-gradient(90deg,color-mix(in srgb,var(--s) 80%,transparent) 0%,color-mix(in srgb,var(--s) 74%,transparent) 48%,color-mix(in srgb,var(--s) 34%,transparent) 100%),
  linear-gradient(180deg,transparent 45%,color-mix(in srgb,var(--s) 70%,transparent) 100%)}
.hero--foto .hero__inn{width:100%;display:grid;gap:1.5rem}
.hero--foto .hero__sub,.hero--foto .hero__meta{color:var(--tekst)}
.hero--foto .hero__inn{padding-bottom:clamp(5rem,8vw,7rem)}

.hero--typo .hero__inn{padding-top:calc(var(--topp-h) + 2.5rem);display:grid;gap:2.25rem}
.hero--typo .hero__tittel{font-size:calc(var(--fs-hero) * 1.1)}
.hero__delt{display:grid;grid-template-columns:5fr 7fr;gap:2rem 4rem;border-top:1px solid var(--linje);padding-top:2rem}
.hero__delt .hero__sub{margin-bottom:1.5rem}
.hero__liste li{border-bottom:1px solid var(--linje)}
.hero__liste li:first-child{border-top:1px solid var(--linje)}
.hero__liste a{display:grid;grid-template-columns:1fr 1fr auto;gap:1rem;align-items:center;min-height:56px;text-decoration:none}
.hero__namn{font-size:var(--fs-ingress);transition:transform .25s var(--ease)}
.hero__fag{font-family:var(--f-etikett);font-size:var(--e-storleik);color:var(--dempa)}
.pil{color:var(--lenke);transition:transform .25s var(--ease)}
@media (hover:hover) and (pointer:fine){.hero__liste a:hover .hero__namn{transform:translateX(.5rem)}.hero__liste a:hover .pil{transform:translateX(4px)}}

/* ---------- Klinikken ---------- */
.klinikk__topp{display:grid;grid-template-columns:repeat(12,1fr);column-gap:1.5rem;align-items:end}
.klinikk__tekst{grid-column:1 / span 6;display:grid;gap:1.5rem}
.klinikk__meir{color:var(--dempa);max-width:var(--tekstbreidde)}
.klinikk__bilde{grid-column:8 / -1;aspect-ratio:5/4}
.fakta{display:grid;grid-template-columns:repeat(4,1fr);column-gap:1.5rem;margin-top:var(--rom-s)}
.fakta__punkt{border-top:1px solid var(--linje);padding-top:1.25rem;display:grid;gap:.5rem}
.fakta__tal{font-size:var(--fs-tal);font-variant-numeric:tabular-nums}
.fakta__tekst{font-size:var(--fs-liten);color:var(--dempa)}

/* ---------- Behandling: rader med hårstrek, ingen kort ---------- */
.teneste{display:grid;grid-template-columns:4fr 5fr 3fr;column-gap:1.5rem;row-gap:.75rem;padding-block:2.25rem;border-top:1px solid var(--linje);align-items:start}
.teneste:last-child{border-bottom:1px solid var(--linje)}
.teneste h3{grid-column:1;grid-row:1 / span 2;font-size:calc(clamp(1.625rem,3.3vw,3.125rem) * var(--d-skala));line-height:var(--d-lh)}
.teneste__kort{grid-column:2;color:var(--lenke);font-family:var(--f-etikett);font-size:var(--e-storleik);letter-spacing:var(--e-spor)}
.teneste__meir{grid-column:2;max-width:var(--tekstbreidde)}
.teneste__meir summary{display:inline-flex;align-items:center;min-height:44px;cursor:pointer;color:var(--lenke);text-decoration:underline;text-underline-offset:.22em}
.teneste__meir p{color:var(--dempa)}
.teneste__bilde{grid-column:3;grid-row:1 / span 2;aspect-ratio:4/3}

/* ---------- Terapeutar ---------- */
.folk__liste{display:grid;grid-template-columns:repeat(5,1fr);gap:1.5rem}
.person{display:grid;grid-template-rows:auto 1fr auto;gap:1rem}
.person__bilde{aspect-ratio:4/5}
.person__bilde img{filter:grayscale(.2);transition:transform .3s var(--ease)}
.person h3{font-size:1.25rem;line-height:1.15;font-family:var(--f-tekst);font-weight:500;letter-spacing:-.01em;text-transform:none}
.person__fag{font-size:var(--fs-liten);color:var(--dempa);margin-top:.375rem}
.person__avtale{margin-top:.5rem}
.person__kontakt{display:grid;font-size:var(--fs-liten);border-top:1px solid var(--linje);padding-top:.5rem}
.person__kontakt a{min-height:32px;display:inline-flex;align-items:center;text-decoration:none;overflow-wrap:anywhere}
.person__kontakt a:hover{text-decoration:underline;text-underline-offset:.22em}
.person__bestill{color:var(--lenke);font-weight:500}
@media (hover:hover) and (pointer:fine){.person:hover .person__bilde img{transform:scale(1.03)}}

/* ---------- Prisar ---------- */
.prisar__rutenett{display:grid;grid-template-columns:repeat(12,1fr);column-gap:1.5rem;row-gap:var(--rom-s)}
.prisar__rutenett > :first-child{grid-column:1 / span 5;display:grid;gap:1.25rem;align-content:start}
.prisar__rutenett > :last-child{grid-column:7 / -1}
.prisar__under{font-family:var(--f-etikett);font-size:var(--e-storleik);letter-spacing:var(--e-spor);font-weight:400;text-transform:none;line-height:1.4;color:var(--lenke);margin-bottom:.75rem}
.prisliste__rad{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;padding-block:1.125rem;border-top:1px solid var(--linje)}
.prisliste__rad:last-child{border-bottom:1px solid var(--linje)}
.prisliste dt{font-size:var(--fs-ingress)}
.prisliste dd{font-family:var(--f-display);font-weight:var(--d-vekt);font-size:var(--fs-h3);letter-spacing:var(--d-spor);font-variant-numeric:tabular-nums;white-space:nowrap}
.prisar__merknad{font-size:var(--fs-liten);color:var(--dempa);margin-top:1.25rem;max-width:var(--tekstbreidde)}

/* ---------- Finn oss ---------- */
.finn__rutenett{display:grid;grid-template-columns:repeat(12,1fr);column-gap:1.5rem;align-items:center}
.finn__tekst{grid-column:1 / span 6;display:grid;gap:1.75rem}
.finn__bilde{grid-column:8 / -1;aspect-ratio:4/3}
.kontakt{display:grid;max-width:var(--tekstbreidde)}
.kontakt > div{display:grid;grid-template-columns:7.5rem 1fr;gap:1rem;align-items:center;min-height:48px;padding-block:.375rem;border-top:1px solid var(--linje)}
.kontakt > div:last-child{border-bottom:1px solid var(--linje)}
.kontakt dt{font-family:var(--f-etikett);font-size:var(--e-storleik);color:var(--dempa)}
.kontakt a{display:inline-flex;align-items:center;min-height:44px;text-underline-offset:.22em}
.finn__handling{display:flex;flex-wrap:wrap;gap:.75rem}

/* ---------- Botn ---------- */
.botn{padding-block:var(--rom-s) calc(1.5rem + var(--dokk-h));font-size:var(--fs-liten)}
.botn__rutenett{display:flex;flex-wrap:wrap;align-items:center;gap:1.5rem 2.5rem}
.botn__adresse{color:var(--dempa);margin-right:auto}
.botn__nav{display:flex;flex-wrap:wrap;gap:0 1.5rem}
.botn__nav a{min-height:44px;display:inline-flex;align-items:center;text-decoration:none}
.botn__nav a:hover{text-decoration:underline;text-underline-offset:.3em}
.footer__credit{max-width:var(--maks);margin:var(--rom-s) auto 0;padding:1.25rem var(--kant) 0;border-top:1px solid var(--linje);color:var(--dempa)}
.footer__credit a{display:inline-flex;align-items:center;gap:.4em;min-height:44px;text-decoration:none}
.footer__credit a:hover{color:var(--tekst)}
.footer__credit-spark{width:.85em;height:.85em;color:var(--lenke);transition:transform .4s var(--ease)}
@media (hover:hover) and (pointer:fine){.footer__credit a:hover .footer__credit-spark{transform:rotate(90deg) scale(1.15)}}

/* ---------- Mobildokk ---------- */
.dokk{display:none}

/* ---------- Design Lab (berre demo) ---------- */
.lab{position:fixed;left:20px;bottom:calc(20px + var(--dokk-h));z-index:var(--z-panel);font:500 .8125rem/1 var(--f-tekst);color:#F5F3EE}
.lab__bryter,.lab__panel{background:rgba(15,20,25,.55);-webkit-backdrop-filter:blur(30px) saturate(210%);backdrop-filter:blur(30px) saturate(210%);border:.5px solid rgba(255,255,255,.14);box-shadow:0 8px 32px rgba(0,0,0,.2),inset 0 1.5px .5px rgba(255,255,255,.25),inset 0 -1px 2px rgba(255,255,255,.05)}
.lab__bryter{display:inline-flex;align-items:center;gap:.5rem;min-height:44px;padding:0 1rem;border-radius:var(--pille);color:inherit;font:inherit;cursor:pointer;transition:transform .2s var(--ease)}
.lab__bryter:active{transform:scale(.97)}
.lab__panel{position:absolute;left:0;bottom:calc(100% + 10px);display:grid;gap:.5rem;padding:.875rem;border-radius:24px;transform-origin:0 100%;transition:opacity .2s var(--ease),transform .2s var(--ease)}
.lab__panel[hidden]{display:none}
.lab__panel.er-lukka{opacity:0;transform:scale(.96)}
.lab__rad{display:flex;align-items:center;gap:.375rem}
.lab__rad > span{width:1.75rem;font-size:1rem}
.lab__rad button{width:44px;height:44px;border-radius:var(--pille);border:.5px solid rgba(255,255,255,.18);background:rgba(255,255,255,.06);color:inherit;font:inherit;cursor:pointer;transition:transform .15s var(--ease),background-color .15s var(--ease)}
.lab__rad button:active{transform:scale(.94)}
.lab__rad button[aria-pressed="true"]{background:#F5F3EE;color:#0F1419}
.lab :focus-visible{outline-color:#F5F3EE}
.design-lab__credit{display:flex;align-items:center;gap:.4rem;padding-top:.5rem;border-top:.5px solid rgba(255,255,255,.14);color:rgba(245,243,238,.78);font-size:.75rem}
.design-lab__credit-logo{display:inline-flex;align-items:center;min-height:32px;font-weight:700;color:#F5F3EE;text-decoration:none;transition:transform .2s var(--ease)}
.design-lab__credit-dot{color:var(--c-aksent-pa-slor)}
@media (hover:hover) and (pointer:fine){.design-lab__credit-logo:hover{transform:scale(1.04)}.lab__rad button:hover{background:rgba(255,255,255,.16)}.lab__rad button[aria-pressed="true"]:hover{background:#F5F3EE}}

/* ---------- Skjul-tilstand: berre når JS har sett klassane (byggeregel 5) ---------- */
.anim-hero .hero :is(.hero__meta,.hero__sub,.hero__handling,.hero__liste){opacity:0}
.anim-hero .hero .linje-inn{transform:translateY(125%)}
.anim-reveal .reveal{opacity:0;transform:translateY(22px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.anim-reveal .reveal.is-in{opacity:1;transform:none}

/* ---------- Mobil: ruter i staden for å stable (byggeregel 2) ---------- */
@media (max-width:1100px){
  .folk__liste{grid-template-columns:repeat(3,1fr)}
  .topp__nav{display:none}
}
@media (max-width:767px){
  :root{--topp-h:64px;--dokk-h:64px;--rom:3.75rem;--rom-s:1.75rem}
  .logo{height:28px}
  .topp__handling{display:none}
  .seksjon__hovud{grid-template-columns:1fr;margin-bottom:1.5rem}
  .seksjon__hovud h2,.seksjon__hovud .ingress{grid-column:1}

  .hero--foto{min-height:min(84svh,720px)}
  .hero--foto .hero__bilde img{object-position:50% 50%}
  .hero--foto::after{background:linear-gradient(180deg,color-mix(in srgb,var(--s) 80%,transparent) 0,color-mix(in srgb,var(--s) 58%,transparent) 28%,color-mix(in srgb,var(--s) 84%,transparent) 62%,color-mix(in srgb,var(--s) 90%,transparent) 100%)}
  .hero__handling .knapp--strek{display:none}
  .hero--typo .hero__tittel{font-size:var(--fs-hero)}
  .hero__delt{grid-template-columns:1fr;gap:1.25rem}
  .hero__liste a{grid-template-columns:1fr auto;min-height:52px;column-gap:.75rem}
  .hero__fag{display:none}
  .hero__namn{font-size:var(--fs-tekst)}
  .hero--typo .hero__handling{display:none}

  .klinikk__topp{grid-template-columns:1fr;row-gap:1.5rem}
  .klinikk__tekst,.klinikk__bilde{grid-column:1}
  .klinikk__meir{display:none}
  .klinikk__bilde{aspect-ratio:2/1}
  .fakta{grid-template-columns:1fr 1fr;row-gap:1.25rem}
  .fakta__punkt{padding-top:.75rem;gap:.125rem}

  .teneste{grid-template-columns:1fr;padding-block:1.125rem;row-gap:.25rem}
  .teneste h3,.teneste__kort,.teneste__meir{grid-column:1;grid-row:auto}
  .teneste__bilde{display:none}

  .folk__liste{grid-template-columns:1fr;gap:0}
  .person{grid-template-columns:56px 1fr;grid-template-rows:auto auto;column-gap:.875rem;row-gap:0;padding-block:.875rem;border-top:1px solid var(--linje)}
  .person:last-child{border-bottom:1px solid var(--linje)}
  .person__bilde{grid-row:1 / span 2;width:56px;height:56px;aspect-ratio:1;border-radius:50%}
  .person__bilde img{object-position:50% 22%}
  .person h3{font-size:1.0625rem}
  .person__fag{margin-top:.125rem;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}
  .person__avtale{display:none}
  .person__kontakt{grid-column:2;display:flex;gap:1.25rem;border-top:0;padding-top:0}
  .person__kontakt a{min-height:44px}
  .person__kontakt a[href^="mailto"]{display:none}

  .prisar__rutenett{grid-template-columns:1fr}
  .prisar__rutenett > :first-child,.prisar__rutenett > :last-child{grid-column:1}
  .prisliste__rad{padding-block:.875rem}

  .finn__rutenett{grid-template-columns:1fr;row-gap:1.5rem}
  .finn__tekst,.finn__bilde{grid-column:1}
  .finn__bilde{aspect-ratio:2/1;order:-1}
  .finn__handling .knapp--aksent{display:none}
  .kontakt > div{grid-template-columns:5.5rem 1fr}

  .botn__rutenett{gap:.5rem 1.5rem}
  .botn__adresse{width:100%}

  .dokk{--tekst:var(--c-pa-slor);position:fixed;inset:auto 0 0 0;z-index:var(--z-dokk);height:var(--dokk-h);display:grid;grid-template-columns:1fr 1.6fr;gap:.5rem;padding:.5rem var(--kant);background:var(--c-slor)}
  .dokk a{display:flex;align-items:center;justify-content:center;border-radius:var(--pille);font:500 1rem/1 var(--f-tekst);text-decoration:none}
  .dokk__ring{color:var(--c-pa-slor);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--c-pa-slor) 32%,transparent)}
  .dokk__bestill{background:var(--c-knapp-pa-slor);color:var(--c-knapp-pa-slor-tekst)}
  .dokk a{transition:transform .16s var(--ease)}
  .dokk a:active{transform:scale(.97)}
  /* «Les meir» opnar med høgde i nettlesarar som kan interpolere til auto. Elles spretter ho opp som før. */
  @supports (interpolate-size:allow-keywords){
    .teneste__meir{interpolate-size:allow-keywords}
    .teneste__meir::details-content{block-size:0;overflow:clip;transition:block-size .25s var(--ease),content-visibility .25s allow-discrete}
    .teneste__meir[open]::details-content{block-size:auto}
  }
  .lab{left:12px}
  .lab__bryter{width:44px;padding:0;justify-content:center;font-size:0;gap:0}
  .lab__bryter span{font-size:1rem}
}
@media (min-width:768px){
  /* Med JS står «Les meir» open på store skjermar og brytaren er borte. Utan JS blir brytaren ståande. */
  .js .teneste__meir summary{display:none}
}
@media (prefers-reduced-motion:reduce){
  /* Mildare, ikkje null: farge og opacity får gli, rørsle står stille. */
  html{scroll-behavior:auto}
  .anim-reveal .reveal{transform:none}
  .knapp,.dokk a,.lab__bryter,.lab__rad button,.lab__panel,.person__bilde img,.pil,.hero__namn,.footer__credit-spark,.design-lab__credit-logo{transition-property:opacity,background-color,color}
  .lab__panel.er-lukka{transform:none}
  .teneste__meir::details-content{transition:none}
}