/* Men's Shop AS. Generert av HolmestrandIT.
   ⭐ MALEN, fra 19.09.2026 det som het «Fancy»: eier saa den ved siden av
   den gamle og gjorde den til standard. Eier: «moderne og rent design
   sans-serif og animasjoner». Geist selvhostet, luft, store overskrifter
   med stram sperring, piller, myke hjoerner, og bevegelse som skriptet
   (/skript.js) styrer: inn-glidning naar seksjonene kommer i syne, en topp
   som krymper naar du ruller, og en rolig drift i heroens bakgrunn.
   Fargene kommer fra kundens fargesett i kunde.toml.
   Dialene: variasjon 7, bevegelse 7, tetthet 3. Ett hjoernesystem: piller
   paa knapper, 16 px paa bilder og rader, 28 px paa store flater.
   ⭐ Effektene (19.09.2026) er haker i panelet, lagret i kunde.toml under
   [effekter]. Hver aktiv effekt er en klasse e-<navn> paa <html>, og
   reglene under ser etter den. Se EFFEKTER i bygg.py for lista.
   Ikke rediger denne fila: den lages av bygg.py fra stil.css.j2. */

@font-face{
  font-family:"Geist";
  font-style:normal;
  font-weight:100 900;
  font-display:swap;
  src:url("/skrifter/Geist.woff2") format("woff2");
}

:root{
  --blekk:#23252A;
  --dempet:#63676E;
  --flate:#FFFFFF;
  --papir:#F4F4F5;
  --linje:#E2E2E4;
  --aksent:#3F4A57;
  --aksentflate:#E8EAEE;
  --signatur:#143C52;
  --knappetekst:#FFFFFF;
  --hvitknapptekst:#23252A;
  --skrift:"Geist",system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --ramme:1200px;
  --gutter:clamp(16px,4vw,40px);
  --r:16px;
  --r-stor:28px;
  --pille:999px;
  --ease:cubic-bezier(.22,1,.36,1);
  --fart:220ms;
  --t-mini:13px;
  --t-liten:15px;
  --t-brod:17px;
  --t-ingress:clamp(18px,1.6vw,21px);
  --t-h3:20px;
  --t-h2:clamp(30px,4vw,48px);
  --t-h1:clamp(40px,6.4vw,80px);
  --logo:52px;
  --skygge:0 24px 60px -24px color-mix(in srgb,var(--blekk) 35%,transparent);
  --skygge-kort:0 18px 40px -22px color-mix(in srgb,var(--blekk) 30%,transparent);
}

/* ── grunnen ─────────────────────────────────────────────────────── */
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:88px;-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--flate);color:var(--blekk);
  font:400 var(--t-brod)/1.6 var(--skrift);
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
}
::selection{background:var(--aksentflate);color:var(--blekk)}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
h1,h2,h3{margin:0;font-weight:700;line-height:1.1;letter-spacing:-.025em;text-wrap:balance}
h1{font-size:var(--t-h1);line-height:.98;letter-spacing:-.04em}
h2{font-size:var(--t-h2);letter-spacing:-.03em}
h3{font-size:var(--t-h3);letter-spacing:-.015em}
p{margin:0 0 1em;text-wrap:pretty}
p:last-child{margin-bottom:0}
.inn{max-width:var(--ramme);margin:0 auto;padding:0 var(--gutter)}
.inn.smal{max-width:820px}
.ingress{font-size:var(--t-ingress);line-height:1.5;color:var(--dempet);max-width:58ch}
.liten{font-size:var(--t-liten);color:var(--dempet)}
.fotnote{font-size:var(--t-mini);color:var(--dempet);margin-top:16px}
.hopp{position:absolute;left:16px;top:-120px;z-index:40;background:var(--blekk);color:var(--flate);
  padding:10px 16px;border-radius:var(--pille);font-weight:600;text-decoration:none}
.hopp:focus{top:12px}

/* ── knapper: piller ─────────────────────────────────────────────── */
/* ⛔️ Knappeteksten er en farge per sett, 04.10.2026 (C9): hvit paa de lyse
   settene, flaten i «natt», der hvit paa gull bare ga 1,98:1. */
.knapp{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:50px;padding:0 26px;border-radius:var(--pille);
  background:var(--aksent);color:var(--knappetekst);font-weight:600;font-size:var(--t-liten);
  text-decoration:none;white-space:nowrap;border:1.5px solid var(--aksent);
  transition:transform var(--fart) var(--ease),box-shadow var(--fart) var(--ease),
             background-color var(--fart) var(--ease),color var(--fart) var(--ease);
}
.knapp:hover{transform:translateY(-1px);box-shadow:var(--skygge-kort)}
.knapp:active{transform:scale(.98)}
.knapp.mild{background:transparent;color:var(--blekk);border-color:color-mix(in srgb,var(--blekk) 22%,transparent)}
.knapp.mild:hover{background:var(--aksentflate);border-color:transparent}
.knapper{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}

/* ── toppen ──────────────────────────────────────────────────────── */
.topp{
  position:sticky;top:0;z-index:20;
  background:color-mix(in srgb,var(--flate) 82%,transparent);
  -webkit-backdrop-filter:saturate(1.4) blur(14px);backdrop-filter:saturate(1.4) blur(14px);
  border-bottom:1px solid transparent;
  transition:border-color var(--fart) var(--ease),background-color var(--fart) var(--ease);
}
.topp.skrollet{border-bottom-color:var(--linje);background:color-mix(in srgb,var(--flate) 90%,transparent)}
.baand{max-width:var(--ramme);margin:0 auto;padding:0 var(--gutter);display:flex;align-items:center;gap:20px;
  min-height:80px;transition:min-height var(--fart) var(--ease)}
.topp.skrollet .baand{min-height:64px}
.merke{display:inline-flex;align-items:center;min-height:44px;font-weight:700;font-size:19px;
  letter-spacing:-.02em;text-decoration:none;flex-shrink:0}
.merke img{max-height:var(--logo);width:auto;transition:max-height var(--fart) var(--ease)}
.topp.skrollet .merke img{max-height:calc(var(--logo) * .82)}
.meny{display:flex;gap:2px;margin-left:auto}
.meny a{display:inline-flex;align-items:center;min-height:40px;padding:0 14px;border-radius:var(--pille);
  font-size:var(--t-liten);font-weight:500;color:var(--dempet);text-decoration:none;white-space:nowrap;
  transition:color var(--fart) var(--ease),background-color var(--fart) var(--ease)}
.meny a:hover,.meny a.aktiv{color:var(--blekk);background:var(--aksentflate)}
.topp .knapp.ring{min-height:42px;padding:0 20px}
.menyknapp{display:none;margin-left:auto;min-height:44px;min-width:44px;padding:0 16px;
  border:1.5px solid color-mix(in srgb,var(--blekk) 22%,transparent);background:transparent;
  border-radius:var(--pille);font:600 var(--t-liten) var(--skrift);color:var(--blekk);cursor:pointer}
/* ⛔️ TRANG TOPP, 21.10.2026. Menyen ble foldet sammen bare under 720 px. Med
   aatte punkter (Mens Shop) trengte toppen 999 px, og paa 768 px stakk den ut
   til hoeyre: hele siden kunne rulles sidelengs, og «Om oss» brakk i to linjer.
   Naa maaler skriptet om alt faar plass paa én linje, og setter «trang» paa
   .topp naar det ikke gjoer det, eller skjermen er 720 px eller smalere. Da
   blir det knappen «Meny», som paa telefon. Uten skript bryter toppen linje
   i stedet for aa stikke ut. */
.topp:not(.js) .baand{flex-wrap:wrap}
.topp.js.trang .baand{flex-wrap:wrap;position:relative}
.topp.js.trang .menyknapp{display:inline-flex;align-items:center;order:2}
.topp.js.trang .knapp.ring{display:none}
.topp.js.trang .meny{display:none}
.topp.js.trang.aapen .meny{display:flex;flex-direction:column;order:4;width:100%;gap:2px;
  background:var(--papir);border:1px solid var(--linje);border-radius:20px;padding:10px;margin:4px 0 14px;
  box-shadow:var(--skygge);animation:inn-meny .32s var(--ease) both}
.topp.js.trang.aapen .meny a{min-height:48px;font-size:var(--t-brod);color:var(--blekk);padding:0 16px}
.topp.js.trang.aapen .knapp.ring{display:inline-flex;order:5;width:100%;margin-bottom:14px}
@media (max-width:720px){
  html{scroll-padding-top:76px}
  .baand{min-height:68px;gap:12px;flex-wrap:wrap;position:relative}
  .merke img{max-height:calc(var(--logo) * .7);max-width:min(58vw,220px)}
}
@keyframes inn-meny{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}

/* ── heroen ──────────────────────────────────────────────────────── */
.hero{position:relative;overflow:hidden;padding:clamp(56px,9vw,120px) 0;background:var(--flate);isolation:isolate}
/* e-drift: to fargeflekker som driver sakte. */
html.e-drift .hero::before,html.e-drift .hero::after{
  content:"";position:absolute;z-index:-1;border-radius:50%;filter:blur(70px);opacity:.7;pointer-events:none;
  background:var(--aksentflate);
}
html.e-drift .hero::before{width:52vw;height:52vw;max-width:760px;max-height:760px;right:-14vw;top:-22vw;
  animation:drift-a 22s ease-in-out infinite alternate}
html.e-drift .hero::after{width:36vw;height:36vw;max-width:520px;max-height:520px;left:-12vw;bottom:-18vw;
  background:color-mix(in srgb,var(--aksent) 18%,var(--flate));
  animation:drift-b 26s ease-in-out infinite alternate}
/* e-partikler: lerretet skriptet legger inn, bak innholdet. */
.hero .partikler{position:absolute;inset:0;z-index:0;pointer-events:none}
.hero .inn{z-index:1}
@keyframes drift-a{from{transform:translate(0,0) scale(1)}to{transform:translate(-8vw,6vw) scale(1.12)}}
@keyframes drift-b{from{transform:translate(0,0) scale(1)}to{transform:translate(7vw,-5vw) scale(1.08)}}
.hero .inn{position:relative}
.hero .inn.todelt{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(32px,5vw,80px);align-items:center}
/* ⚠️ Ingen strek foran overlinjen. Eier, 19.09.2026: «Det skal ikke være
   noen start bindestrek». */
.hero .over{margin:0 0 18px;font-size:var(--t-mini);font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--aksent)}
.hero h1{max-width:14ch}
.hero .ingress{margin-top:22px;max-width:50ch}
/* e-heroinngang: teksten trinnvis, bildet litt etter. */
html.e-heroinngang .hero .tekstdel > *{animation:inn-opp .9s var(--ease) both}
html.e-heroinngang .hero .tekstdel > :nth-child(1){animation-delay:60ms}
html.e-heroinngang .hero .tekstdel > :nth-child(2){animation-delay:150ms}
html.e-heroinngang .hero .tekstdel > :nth-child(3){animation-delay:240ms}
html.e-heroinngang .hero .tekstdel > :nth-child(4){animation-delay:330ms}
html.e-heroinngang .hero .tekstdel > :nth-child(5){animation-delay:420ms}
@keyframes inn-opp{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
.herobilde{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:var(--r-stor);
  box-shadow:var(--skygge);will-change:transform;transform:translateY(var(--parallakse,0px))}
html.e-heroinngang .herobilde{animation:inn-bilde 1.2s var(--ease) both;animation-delay:120ms}
@keyframes inn-bilde{from{opacity:0;transform:translateY(24px) scale(1.04)}to{opacity:1;transform:translateY(var(--parallakse,0px)) scale(1)}}
/* e-bildeskift: bildene i stabel, det aktive synlig, overgang 1,2 s. */
.herobilde-stabel{position:relative;width:100%;aspect-ratio:4/5;border-radius:var(--r-stor);overflow:hidden;
  box-shadow:var(--skygge);transform:translateY(var(--parallakse,0px))}
.herobilde-stabel .herobilde{position:absolute;inset:0;height:100%;box-shadow:none;transform:none;opacity:0;
  transition:opacity 1.2s var(--ease);animation:none}
.herobilde-stabel .herobilde.aktiv{opacity:1}
html.e-heroinngang .herobilde-stabel{animation:inn-bilde 1.2s var(--ease) both;animation-delay:120ms}
.hero .inn.todelt::after{content:"";position:absolute;right:calc(var(--gutter) - 22px);bottom:-26px;width:38%;height:56%;
  background:var(--aksentflate);border-radius:var(--r-stor);z-index:-1;transform:rotate(-3deg)}
.hero.med-bilde{background-size:cover;background-position:center;color:#fff;min-height:min(78vh,760px);
  display:flex;align-items:center}
.hero.med-bilde::before,.hero.med-bilde::after{display:none}
.hero.med-bilde .over{color:rgba(255,255,255,.85)}
.hero.med-bilde .ingress{color:rgba(255,255,255,.85)}
/* ⚠️ Den hvite knappen har moerk tekst i alle sett: blekket, og flaten i
   «natt», der blekket er lyst (1,14:1 paa hvitt til 04.10.2026). */
.hero.med-bilde .knapp{background:#fff;color:var(--hvitknapptekst);border-color:#fff}
.hero.med-bilde .knapp.mild{background:transparent;color:#fff;border-color:rgba(255,255,255,.55)}
.hero.med-bilde .knapp.mild:hover{background:rgba(255,255,255,.14)}
@media (max-width:900px){
  .hero .inn.todelt{grid-template-columns:1fr;gap:36px}
  .herobilde,.herobilde-stabel{aspect-ratio:4/3}
  .hero .inn.todelt::after{display:none}
}

/* e-baand: ordene ruller sakte forbi under heroen. Stopper under musen.
   ⚠️ Heter .rullebaand: .baand er toppens rad. */
.rullebaand{overflow:hidden;background:var(--papir);border-top:1px solid var(--linje);border-bottom:1px solid var(--linje);padding:14px 0}
.rullebaand-spor{display:flex;gap:0;width:max-content;animation:rull 42s linear infinite}
.rullebaand span{white-space:nowrap;padding:0 28px;font-size:var(--t-mini);font-weight:600;letter-spacing:.12em;
  text-transform:uppercase;color:var(--dempet);display:inline-flex;align-items:center;gap:28px}
.rullebaand span::after{content:"";width:5px;height:5px;border-radius:50%;background:var(--aksent);opacity:.7}
.rullebaand:hover .rullebaand-spor{animation-play-state:paused}
@keyframes rull{to{transform:translateX(-50%)}}

/* ── seksjonene ──────────────────────────────────────────────────── */
.blokk{padding:clamp(64px,9vw,120px) 0}
.blokk.tonet{background:var(--papir)}
.blokk h1,.blokk h2{margin:0 0 20px}
.blokk .ingress{margin:0 0 40px}
/* ⭐ Titlene paa kort, innlegg og personer er h3, og h2 naar seksjonen selv
   er sidens h1 (en underside uten hero som begynner med kortene). Da hopper
   ikke overskriftene over et nivaa. De ser like ut. 04.10.2026 (C9). */
.utvalg .kort h2,.innlegg h2,.person h2{font-size:var(--t-h3);letter-spacing:-.015em;margin:0}
@media (min-width:900px){
  .blokk .inn.smal{max-width:var(--ramme);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.6fr);
    column-gap:clamp(40px,6vw,96px);align-items:start}
  .blokk .inn.smal > h1,.blokk .inn.smal > h2{grid-column:1;grid-row:1 / span 40;position:sticky;top:104px}
  .blokk .inn.smal > :not(h1):not(h2){grid-column:2}
  .blokk .inn.smal > .ingress{margin-bottom:24px}
}
.blokk .inn.smal p{font-size:var(--t-ingress);line-height:1.55}
.blokk .inn.smal p + p{margin-top:.9em}

/* e-innglidning: skriptet setter data-avsl, og «synlig» naar delen kommer i syne */
html.js.e-innglidning [data-avsl]{opacity:0;transform:translateY(24px);
  transition:opacity .8s var(--ease),transform .8s var(--ease);transition-delay:var(--d,0ms)}
html.js.e-innglidning [data-avsl].synlig{opacity:1;transform:none}
/* e-avdekking: bildene avdekkes med et sveip fra venstre naar delen kommer i syne */
html.js.e-avdekking [data-avsl] .bilde,html.js.e-avdekking figure[data-avsl] .lysboks-aapne,
html.js.e-avdekking .kart[data-avsl] img,html.js.e-avdekking [data-avsl].kart img{
  clip-path:inset(0 100% 0 0);transition:clip-path 1s var(--ease);transition-delay:calc(var(--d,0ms) + 80ms)}
html.js.e-avdekking [data-avsl].synlig .bilde,html.js.e-avdekking figure[data-avsl].synlig .lysboks-aapne,
html.js.e-avdekking .kart[data-avsl].synlig img,html.js.e-avdekking [data-avsl].synlig.kart img{clip-path:inset(0 0 0 0)}
/* e-fargeskift: seksjonene er gjennomsiktige, og skriptet setter tonen paa <body> */
html.e-fargeskift body{transition:background-color 1s var(--ease)}
html.e-fargeskift .hero,html.e-fargeskift .blokk,html.e-fargeskift .blokk.tonet,html.e-fargeskift .rullebaand{background:transparent}
/* e-kursorlys: et mykt lys under musen, bare paa skrivebord (regelen staar under mus og tastatur) */
html.e-kursorlys .utvalg .kort,html.e-kursorlys .sitat{position:relative}
html.e-kursorlys .utvalg .kort::after,html.e-kursorlys .sitat::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:0;
  border-radius:inherit;transition:opacity .35s var(--ease);
  background:radial-gradient(260px circle at var(--mx,50%) var(--my,50%),color-mix(in srgb,var(--aksent) 16%,transparent),transparent 65%)}
/* e-korn: en svak papirstruktur over alt, stille */
html.e-korn body::after{content:"";position:fixed;inset:0;z-index:60;pointer-events:none;opacity:.055;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='k'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .8 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23k)'/%3E%3C/svg%3E");
  background-size:180px 180px}
/* e-teller: tallet blinker ikke, det telles i ro; ingen stil trengs */

/* ── kortene (utvalg) ────────────────────────────────────────────── */
.utvalg{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:24px}
.utvalg .kort{display:block;background:var(--papir);border:1px solid var(--linje);border-radius:var(--r-stor);
  overflow:hidden;padding-bottom:22px;text-decoration:none;color:inherit;
  transition:transform .35s var(--ease),box-shadow .35s var(--ease)}
.tonet .utvalg .kort{background:var(--flate)}
.utvalg .kort .bilde{aspect-ratio:4/3;overflow:hidden;margin:0;border-radius:0}
.utvalg .kort .bilde img{width:100%;height:100%;object-fit:cover;transition:transform .9s var(--ease)}
.utvalg .kort h2,.utvalg .kort h3{margin:18px 22px 6px}
.utvalg .kort p{margin:0 22px;color:var(--dempet);font-size:var(--t-liten)}
.utvalg .kort .verdi{display:block;margin:12px 22px 0;font-weight:700}
.utvalg .kort .lysboks-aapne{border-radius:0}

/* ── nytt ────────────────────────────────────────────────────────── */
.nytt-blokk{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:32px}
.innlegg .bilde{aspect-ratio:4/3;overflow:hidden;border-radius:var(--r);margin:0 0 16px}
.innlegg .bilde img{width:100%;height:100%;object-fit:cover;transition:transform .9s var(--ease)}
.innlegg .bilde .lysboks-aapne{border-radius:var(--r);height:100%}
.innlegg time{display:block;font-size:var(--t-mini);font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  color:var(--aksent);margin-bottom:8px}
.innlegg h2,.innlegg h3{font-size:22px;margin-bottom:8px}
.innlegg h2 a,.innlegg h3 a{text-decoration:none}
.innlegg h2 a:hover,.innlegg h3 a:hover{color:var(--aksent)}
.innlegg p{color:var(--dempet);font-size:var(--t-liten)}
.nytt-stripe{list-style:none;padding:0;margin:0}
/* ⚠️ 184 px, 21.10.2026: «30. september 2026» er 173 px i Geist, og med 140 px
   brakk datoen i to linjer paa alle skjermer. */
.nytt-stripe li{display:grid;grid-template-columns:184px 1fr;gap:20px;padding:18px 0;border-bottom:1px solid var(--linje)}
.nytt-stripe time{font-size:var(--t-mini);font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--aksent);padding-top:3px}
.nytt-stripe strong{display:block;font-size:19px;letter-spacing:-.01em}
.nytt-stripe .liten{display:block;margin-top:4px}
@media (max-width:720px){.nytt-stripe li{grid-template-columns:1fr;gap:4px}}

/* ── galleriet ───────────────────────────────────────────────────── */
.galleri{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));grid-auto-flow:dense;gap:16px}
.galleri figure{margin:0}
.galleri figure:first-child{grid-column:span 2;grid-row:span 2}
.galleri .lysboks-aapne,.galleri .galleri-standinn{aspect-ratio:1/1;overflow:hidden;border-radius:var(--r);width:100%}
.galleri img{width:100%;height:100%;object-fit:cover;transition:transform .9s var(--ease)}
.galleri figcaption{margin-top:10px;font-size:var(--t-mini);color:var(--dempet)}
/* ⭐ «fire», 21.10.2026: det foerste bildet tar fire ruter, saa 5, 9 og 13 bilder
   fyller fire kolonner helt. Mellom 721 og omtrent 1000 px ga auto-fill tre
   kolonner, og da sto én rute tom. Andre antall faar auto-fill som foer. */
@media (min-width:721px){.galleri.fire{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (max-width:720px){.galleri{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}}

/* ── rader (liste) og tider ──────────────────────────────────────── */
.rader,.tider{list-style:none;padding:0;margin:0}
.rader li{display:flex;justify-content:space-between;gap:24px;align-items:baseline;padding:16px 0;border-bottom:1px solid var(--linje)}
.rader .navn{font-weight:600}
.rader .navn small{display:block;font-weight:400;font-size:var(--t-liten);color:var(--dempet);margin-top:2px}
.rader .verdi{font-weight:700;white-space:nowrap;font-variant-numeric:tabular-nums}
.tider li{display:flex;justify-content:space-between;gap:24px;padding:14px 0;border-bottom:1px solid var(--linje);
  font-variant-numeric:tabular-nums}
.tider li span:first-child{font-weight:600}
.tider li.idag{color:var(--aksent)}
.avvikstittel{margin:28px 0 4px;font-weight:600}
.tider.avvik li{color:var(--dempet)}
/* justify-self: i den todelte seksjonen paa PC er dette et rutenettelement, og
   uten det ble pillen strukket til en grå stripe over hele kolonnen (21.10.2026). */
.aapent-naa{display:inline-flex;justify-self:start;align-items:center;gap:10px;margin:0 0 20px;padding:8px 16px 8px 12px;
  border-radius:var(--pille);background:var(--aksentflate);color:var(--blekk);font-size:var(--t-liten);font-weight:600}
.aapent-naa::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--dempet)}
.aapent-naa.aapent::before{background:#1E9E5A;box-shadow:0 0 0 4px rgba(30,158,90,.18)}

/* ── kontakt og sted ─────────────────────────────────────────────── */
.sted-rad{display:grid;gap:32px;align-items:start}
@media (min-width:900px){.sted-rad{grid-template-columns:1.1fr .9fr;gap:48px}.sted-rad.uten-kart{grid-template-columns:1fr}}
.kart{margin:0}
.kart img{width:100%;height:auto;border-radius:var(--r-stor);box-shadow:var(--skygge-kort)}
.kart figcaption{margin-top:10px;font-size:var(--t-mini);color:var(--dempet)}
.kontakt{list-style:none;padding:0;margin:0}
.kontakt li{display:grid;grid-template-columns:110px 1fr;gap:16px;padding:14px 0;border-bottom:1px solid var(--linje);align-items:baseline}
.kontakt li span{font-size:var(--t-liten);color:var(--dempet)}
.kontakt li a{text-decoration-thickness:1px;text-underline-offset:4px;overflow-wrap:anywhere}
.kontakt li a:hover{color:var(--aksent)}
.veibeskrivelse{margin-top:24px}
.sted-tekst dl{display:grid;grid-template-columns:110px 1fr;gap:6px 16px;margin:0 0 24px}
.sted-tekst dt{font-size:var(--t-liten);color:var(--dempet)}
.sted-tekst dd{margin:0}
@media (max-width:719px){.kontakt li{grid-template-columns:1fr;gap:2px}}

/* ── anmeldelser og team ─────────────────────────────────────────── */
.anmeldelser{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:24px}
.sitat{margin:0;padding:28px;background:var(--papir);border-radius:var(--r-stor);border:1px solid var(--linje)}
.tonet .sitat{background:var(--flate)}
.sitat blockquote{margin:0 0 18px;font-size:var(--t-ingress);line-height:1.5;letter-spacing:-.01em}
.sitat blockquote::before{content:"“";display:block;font-size:56px;line-height:.6;color:var(--aksent);margin-bottom:14px}
.sitat figcaption{font-weight:600;font-size:var(--t-liten)}
.sitat figcaption span{display:block;font-weight:400;color:var(--dempet)}
.team{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:28px}
.person img,.person .initial{width:120px;height:120px;border-radius:50%;object-fit:cover;margin-bottom:16px}
.person .initial{display:flex;align-items:center;justify-content:center;background:var(--aksentflate);color:var(--aksent);font-size:40px;font-weight:700}
.person .rolle{color:var(--dempet);font-size:var(--t-liten);margin:4px 0 8px}
.person .lenker{display:flex;flex-direction:column;gap:4px;font-size:var(--t-liten)}

/* ── handling (gamle filer) ──────────────────────────────────────── */
.handling{padding:clamp(56px,8vw,96px) 0;background:var(--blekk);color:var(--flate);text-align:center}
.handling .inn.smal{display:block}
.handling h2{margin-bottom:12px}
.handling p{color:color-mix(in srgb,var(--flate) 75%,transparent);max-width:52ch;margin:0 auto}
.handling .knapper{justify-content:center}
.handling .knapp.mild{color:var(--flate);border-color:color-mix(in srgb,var(--flate) 40%,transparent)}

/* ── standinn-figurene ───────────────────────────────────────────── */
.si-aksent{fill:var(--aksent)}.si-blekk{fill:var(--blekk)}.si-flate{fill:var(--flate)}
.si-lys{fill:var(--aksentflate)}.si-papir{fill:var(--papir)}.si-dempet{fill:var(--dempet)}
.si-hud{fill:#E9B89A}.si-metall{fill:#B9C2C8}.si-hvit{fill:#fff}
.si-strek{fill:none;stroke:var(--blekk);stroke-width:6;stroke-linecap:round;stroke-linejoin:round}
.standinn{position:relative;display:flex;align-items:center;justify-content:center;
  background:var(--aksentflate);border-radius:var(--r);overflow:hidden}
.standinn .standinn-svg{width:100%;height:100%;display:block}
/* ⚠️ Merket har flaten bak seg, ikke hvitt med 70 % dekning: i «natt» er
   dempet lys, og ga 1,18:1. Hel flate gir dempet paa flate, som er regnet.
   04.10.2026 (C9). */
.standinn-merke{position:absolute;right:10px;bottom:8px;font:500 11px/1 var(--skrift);
  letter-spacing:.06em;text-transform:uppercase;color:var(--dempet);
  background:var(--flate);padding:4px 7px;border-radius:6px}
.hero .herobilde.standinn{aspect-ratio:5/6;border-radius:var(--r-stor)}
.utvalg .bilde.standinn{aspect-ratio:4/3;margin:0;border-radius:0}
@media (max-width:900px){.hero .herobilde.standinn{aspect-ratio:4/3}}

/* ── lysboksen ───────────────────────────────────────────────────── */
.lysboks-aapne{display:block;width:100%;padding:0;margin:0;border:0;background:none;cursor:zoom-in;
  font:inherit;color:inherit;text-align:inherit;border-radius:var(--r)}
.lysboks-aapne img{display:block}
.lysboks-aapne:focus-visible{outline:3px solid var(--aksent);outline-offset:3px}
.lysboks{position:fixed;inset:0;z-index:100;background:rgba(8,10,12,.94);display:flex;align-items:center;justify-content:center}
.lysboks[hidden]{display:none}
.lysboks-flate{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;overflow:hidden}
.lysboks-bilde{max-width:calc(100vw - 32px);max-height:calc(100vh - 120px);max-height:calc(100dvh - 120px);
  object-fit:contain;cursor:zoom-in;touch-action:none;user-select:none;-webkit-user-drag:none;
  transform-origin:center center;transition:transform 120ms ease-out;border-radius:8px}
.lysboks.zoomet .lysboks-bilde{cursor:grab;transition:none}
.lysboks-lukk,.lysboks-forrige,.lysboks-neste{position:absolute;z-index:2;width:48px;height:48px;border:0;border-radius:50%;
  background:rgba(255,255,255,.12);color:#fff;font-size:30px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center}
.lysboks-lukk:hover,.lysboks-forrige:hover,.lysboks-neste:hover{background:rgba(255,255,255,.24)}
.lysboks-lukk:focus-visible,.lysboks-forrige:focus-visible,.lysboks-neste:focus-visible{outline:3px solid #fff;outline-offset:2px}
.lysboks-lukk{top:16px;right:16px}
.lysboks-forrige{left:12px;top:50%;transform:translateY(-50%)}
.lysboks-neste{right:12px;top:50%;transform:translateY(-50%)}
.lysboks-tekst{position:absolute;left:0;right:0;bottom:0;padding:14px 72px 18px;text-align:center;color:rgba(255,255,255,.85);
  font-size:var(--t-liten);pointer-events:none}
.lysboks-teller{display:block;font-size:var(--t-mini);letter-spacing:.04em;color:rgba(255,255,255,.6);margin-bottom:4px}
html.lysboks-aapen{overflow:hidden}
@media (max-width:720px){
  .lysboks-forrige,.lysboks-neste{top:auto;bottom:64px;transform:none}
  .lysboks-tekst{padding:14px 16px 18px}
}

/* ── bunnen ──────────────────────────────────────────────────────── */
.bunn{padding:56px 0 32px;border-top:1px solid var(--linje);background:var(--flate)}
.bunn .inn{display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;align-items:flex-start}
.bunn strong{display:block;font-size:19px;letter-spacing:-.02em;margin-bottom:6px}
.bunn .orgnr{font-size:var(--t-mini);color:var(--dempet);margin-top:4px}
.bunn .hoyre a{text-decoration-thickness:1px;text-underline-offset:4px}
.bunn .bunnlinje{margin-top:32px;padding-top:20px;border-top:1px solid var(--linje);
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:var(--t-mini);color:var(--dempet)}
.bunn .bunnlinje a{color:var(--dempet)}
/* ⭐ Signaturen: HolmestrandIT sine egne farger, ikke kundens. Som i malen. */
.bunn .bunnlinje a.hit{color:var(--signatur);font-weight:700;text-decoration:none;letter-spacing:-.01em;font-size:14px}
.bunn .bunnlinje a.hit b{color:#D99521;font-weight:700}
.bunn .bunnlinje a.hit:hover{text-decoration:underline;color:var(--signatur)}

/* ── mus og tastatur ─────────────────────────────────────────────── */
@media (hover:hover) and (pointer:fine){
  html.e-kortloft .utvalg .kort:hover{transform:translateY(-6px);box-shadow:var(--skygge-kort)}
  html.e-kortloft .utvalg .kort:hover .bilde img,html.e-kortloft .innlegg:hover .bilde img,html.e-kortloft .galleri figure:hover img{transform:scale(1.05)}
  .utvalg a.kort:hover h2,.utvalg a.kort:hover h3{color:var(--aksent)}
  html.e-kursorlys .utvalg .kort:hover::after,html.e-kursorlys .sitat:hover::after{opacity:1}
}
a:focus-visible{outline:2px solid var(--aksent);outline-offset:3px;border-radius:4px}
.knapp:focus-visible,.menyknapp:focus-visible{outline:0;box-shadow:0 0 0 3px var(--flate),0 0 0 5px var(--aksent)}
.hero.med-bilde .knapp:focus-visible{box-shadow:0 0 0 3px rgba(0,0,0,.55),0 0 0 5px #fff}

/* ⭐ Den som har bedt om ro faar ro: ingenting glir, driver eller vokser. */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none !important;transition:none !important}
  html.js [data-avsl]{opacity:1;transform:none;clip-path:none}
  html.js [data-avsl] .bilde,html.js figure[data-avsl] .lysboks-aapne,html.js [data-avsl] img{clip-path:none}
  .herobilde,.herobilde-stabel{transform:none}
  .rullebaand-spor{animation:none}
  .hero .partikler{display:none}
  .utvalg .kort:hover{transform:none}
  .utvalg .kort:hover .bilde img,.innlegg:hover .bilde img,.galleri figure:hover img{transform:none}
}