/* ─────────────────────────────────────────────────────────────
   ENERGY Fitness — senterside Tønsberg
   Built to the mal in mockups/main-page-2026.png.
   Every token below is measured; see DESIGN-SYSTEM.md.
   ───────────────────────────────────────────────────────────── */

@font-face{font-family:Figtree;font-style:normal;font-weight:400 800;font-display:swap;
  src:url(../assets/fonts/figtree-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:Figtree;font-style:normal;font-weight:400 800;font-display:swap;
  src:url(../assets/fonts/figtree-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}

:root{
  /* brand */
  /* Merkefargane er lesne rett ut av kundens eigen logofil, ikkje ut av
     utkasta. #E86826 er ordet ENERGY, #F8A818 er ordet FITNESS. Utkasta
     brukte #FD4B01, som er merkbart raudare enn merket faktisk er. */
  --orange:#E86826;          /* eksakt merkefarge: flater, ikon, displaytype */
  --orange-ink:#B04F1D;      /* liten tekst på lys flate: 5,27:1 kvit, 4,54:1 krem */
  --orange-fill:#C15620;     /* flate under kvit tekst: 4,55:1 */
  --orange-dark:#A4491B;     /* hover og trykt */
  --orange-display:#DF6424;  /* stor oransje tekst på lys flate: 3,23:1 mot #F5F5F5, 3,03:1 mot krem */
  --gold:#F8A818;            /* eksakt, frå ordet FITNESS. Svart tekst: 9,30:1 */
  --gold-fill:#F8A818;
  /* surfaces */
  /* Den mørke flata er #181818, koden kunden gav. Same tone som deira eiga
     side brukar i mørke seksjonar. Nøytral grå, ikkje kjølig skifer, så dei
     to lagstega over er òg nøytrale. */
  --black:#181818;
  --gul:#F4AF00;             /* prisen i kampanjehelten, kundens eige tal, 9,28:1 mot svart */
  --blagra:#37556E;          /* drop-in-knappen i helten, hans farge, 7,82:1 mot kvit */
  --dark:#181818;
  --dark-2:#232323;
  --light:#F9FAFB;          /* ENERGYs lyse flate, kjøligare enn #F5F5F5 */
  --cream:#FEF6EC;          /* lysna 4% så ENERGY-grået klarer 4,53:1 her */
  --card:#fff;
  --card-soft:#FAFAFA;
  --line:#EBEBEB;
  --line-ui:#8C8C8C;         /* boundary of interactive controls: 3.2:1 on white */
  --line-dark:#303030;
  /* ink */
  --ink:#181818;            /* same tone som den mørke flata, 17,8:1 mot kvit */
  /* Sekundærfargen er ENERGYs eigen grå, eksakt #6B7280, lesen av deira live
     nettstad. Han klarer AA mot kvit, lys og kortflate, men gav 4,16:1 mot
     den gamle kremtonen. Difor er KREM lysna fire prosent, ikkje grået
     mørkna: krem er mi flate frå utkasta, grået er ENERGY sitt. */
  --ink-2:#6B7280;           /* ENERGYs eigen grå, eksakt slik han står på energyfitness.no */
  --ink-3:#6B7280;           /* same tone: ENERGY skil hierarki med storleik, ikkje farge */
  --ink-inv:#fff;
  --ink-inv-2:#D2D6DC;       /* deira lyse grå på mørk flate, 13,6:1 */
  /* geometry */
  --wrap:1140px;
  --pad:clamp(1.25rem,4vw,2rem);
  --r-btn:8px;
  --r-card:12px;
  --nav-h:64px;
  --sec:clamp(3.25rem,7vw,5.5rem);
}
@media (min-width:900px){ :root{ --nav-h:80px } }

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--light);color:var(--ink-2);
  font-family:Figtree,system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:1rem;line-height:1.65;font-weight:400;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:clip;
}
img,svg,picture{display:block;max-width:100%}
img{height:auto}
a{color:inherit}
button{font:inherit}
h1,h2,h3,h4{color:var(--ink);font-weight:700;margin:0;text-wrap:balance}
p{margin:0}
ul,ol{margin:0;padding:0;list-style:none}

/* headings — line-heights leave room for the ring on Å; no wrapper may clip them */
.h1{font-size:clamp(2rem,1rem + 2.65vw,3.5rem);line-height:1.08;letter-spacing:-.022em}
.h2{font-size:clamp(1.5rem,1.05rem + 0.95vw,2.0625rem);line-height:1.25;letter-spacing:-.02em}
.h3{font-size:1.1875rem;line-height:1.35;letter-spacing:-.01em}
.h4{font-size:1.0625rem;line-height:1.45;letter-spacing:-.005em}
.accent{color:var(--orange-display)}
.on-dark .accent{color:var(--orange)}

.eyebrow{
  display:block;font-size:.75rem;font-weight:700;line-height:1.4;
  letter-spacing:.1em;text-transform:uppercase;color:var(--orange-ink);margin-bottom:.75rem;
}
.on-dark .eyebrow{color:var(--orange)}
.lede{font-size:1rem;line-height:1.65;color:var(--ink-2);max-width:56ch}
.on-dark,.on-dark p,.on-dark li{color:var(--ink-inv-2)}
/* light islands inside a dark section: a white card must not inherit light-on-white ink */
.on-dark h1,.on-dark h2,.on-dark h3,.on-dark h4{color:var(--ink-inv)}
.small{font-size:.8125rem;line-height:1.55;color:var(--ink-3)}
.on-dark .small{color:#9A9A9A}

.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--pad)}
.section{padding-block:var(--sec)}
.section--tight{padding-block:clamp(2.5rem,5vw,3.75rem)}
.section--light{background:var(--light)}
.section--cream{background:var(--cream)}
/* Mørk tone. Arver fargereglene fra .on-dark, som allerede finnes, slik at
   det bare er én definisjon av hvordan tekst ser ut på svart. */
.section--dark{background:var(--black)}
.section--dark,.section--dark p,.section--dark li{color:var(--ink-inv-2)}
.section--dark h1,.section--dark h2,.section--dark h3,.section--dark h4{color:#fff}
.section--dark .eyebrow,.section--dark .accent,.section--dark .ln{color:var(--orange)}
.section--dark .small{color:#9A9A9A}

/* skip link */
.skip{position:absolute;left:-9999px;top:0;z-index:100;background:var(--orange-fill);color:#fff;
  padding:.85rem 1.25rem;border-radius:0 0 var(--r-btn) 0;font-weight:600}
.skip:focus{left:0}

/* focus — visible on every ground */
:where(a,button,summary,input,[tabindex]):focus-visible{
  outline:3px solid var(--orange);outline-offset:3px;border-radius:4px;
}
.nav :where(a,button,summary):focus-visible{outline-color:#fff}

/* ── buttons ─────────────────────────────────────────────── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.6rem;
  background:var(--orange-fill);color:#fff;text-decoration:none;
  font-size:1rem;font-weight:600;line-height:1;
  padding:1rem 1.5rem;border-radius:var(--r-btn);border:2px solid var(--orange-fill);
  transition:background .18s ease,border-color .18s ease,transform .18s ease;
  cursor:pointer;text-align:center;
}
.btn:hover{background:var(--orange-dark);border-color:var(--orange-dark)}
.btn:active{transform:translateY(1px)}
.btn svg{flex:none;width:18px;height:18px}
.btn--lg{padding:1.0625rem 1.625rem;font-size:1rem}
.btn--sm{padding:.75rem 1.125rem;font-size:.9375rem}
.btn--ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.42)}
.btn--ghost:hover{background:rgba(255,255,255,.1);border-color:#fff}
.btn--outline{background:transparent;color:var(--ink);border-color:var(--line-ui)}
.btn--outline:hover{background:#fff;border-color:var(--ink)}
/* Outline er mørk tekst, og på mørk botn blei han usynleg til nokon
   heldt musepeikaren over. Sto på 404-sida. Alle andre mørke heltar bruker
   ghost, som er kvit. Denne regelen gjer klassa trygg same kvar ho hamnar. */
.on-dark .btn--outline{color:#fff;border-color:rgba(255,255,255,.42)}
.on-dark .btn--outline:hover{background:#fff;color:var(--ink);border-color:#fff}
.btn--block{width:100%}

/* inline orange link */
.ln{color:var(--orange-ink);font-weight:600;text-decoration:none;
    text-underline-offset:3px;display:inline-flex;align-items:center;gap:.35rem}
.ln:hover{text-decoration:underline}
.on-dark .ln{color:var(--orange)}
/* light surfaces that live inside a dark section keep the dark-on-light ink */
.ln svg{width:14px;height:14px;flex:none}

/* ── badge ───────────────────────────────────────────────── */

/* ── cards ───────────────────────────────────────────────── */

/* ── nav ─────────────────────────────────────────────────── */
.nav{position:sticky;top:0;z-index:50;background:var(--black);border-bottom:1px solid var(--line-dark)}
.nav__in{display:flex;align-items:center;gap:1rem;height:var(--nav-h)}
.nav__logo{display:flex;align-items:center;text-decoration:none;margin-right:auto}
.nav__logo picture{display:block}
.nav__logo svg,.nav__logo img{height:40px;width:auto;display:block}
@media (min-width:900px){.nav__logo svg,.nav__logo img{height:48px}}
.nav__links{display:none}
.nav__cta{display:none}
@media (min-width:900px){
  .nav__links{display:flex;align-items:center;gap:2rem;margin-right:1.75rem}
  .nav__links>li>a{color:#fff;text-decoration:none;font-size:1rem;font-weight:500;
    padding:.5rem 0;border-bottom:2px solid transparent;transition:border-color .18s,color .18s}
  .nav__links>li>a:hover{border-bottom-color:var(--orange)}
  .nav__cta{display:inline-flex}
  .nav__drawer{display:none}
}
/* ── senter-nedtrekk ─────────────────────────────────────────
   Rein CSS. :focus-within gjer at han opnar på tastatur òg, så
   menyen krev ikkje JavaScript for å vere brukande. */
.nav__drop>a>svg{display:none}
@media (min-width:900px){
  .nav__drop{position:relative}
  .nav__drop>a{display:inline-flex;align-items:center;gap:.35rem}
  .nav__drop>a>svg{display:block;width:13px;height:13px;transition:transform .18s}
  .nav__drop:hover>a>svg,.nav__drop:focus-within>a>svg{transform:rotate(180deg)}
  .nav__menu{
    position:absolute;top:calc(100% + .7rem);left:50%;min-width:278px;
    transform:translateX(-50%) translateY(-6px);
    background:var(--dark-2);border:1px solid var(--line-dark);border-radius:14px;
    padding:.45rem;box-shadow:0 20px 48px rgba(0,0,0,.55);
    opacity:0;visibility:hidden;transition:opacity .16s,transform .16s,visibility .16s;
  }
  /* usynleg bru over mellomrommet, elles mistar peikaren menyen på veg ned */
  .nav__menu::before{content:"";position:absolute;left:0;right:0;top:-.75rem;height:.75rem}
  .nav__drop:hover .nav__menu,.nav__drop:focus-within .nav__menu{
    opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}
  .nav__menu a{display:block;padding:.6rem .7rem;border-radius:10px;color:#fff;
    text-decoration:none;font-size:.9375rem;line-height:1.3;transition:background .14s}
  .nav__menu a:hover{background:rgba(232,104,38,.16)}
  .nav__menu b{font-weight:600}
  .nav__menu span{display:block;font-size:.8125rem;font-weight:400;color:#9A9A9A;margin-top:.15rem}
  .nav__menu a:hover span{color:#C9CDD3}
  .nav__menu .nav__menu-alle{border-top:1px solid var(--line-dark);border-radius:0;
    margin:.4rem .2rem 0;padding-left:.5rem;padding-right:.5rem;
    color:var(--orange);font-weight:600;display:flex;align-items:center;gap:.4rem}
  .nav__menu .nav__menu-alle svg{width:14px;height:14px}
}
/* ── språkvelger ─────────────────────────────────────────────
   Peikar på vår eiga engelske utgåve i en/, bygd av build/enbygg.mjs.
   Kvar norsk side har ein engelsk tvilling med same slug.

   Velgeren er SYNLEG PÅ ALLE BREIDDER. Han låg tidlegare berre frå 900 px og
   opp, og på mobil måtte ein opne menyen og rulle forbi «Bli medlem» for å
   finne vegen tilbake. Det er for langt for noko som må vere reverserbart med
   ein gong. Han er liten nok til å stå ved sida av menyknappen på 360 px. */
/* Ingen margin-left:auto her. .nav__logo har margin-right:auto og skyv alt
   som kjem etter mot høgre kant. Ein auto-margin til ville delt den ledige
   plassen i to og parkert velgeren midt i baren. */
/* Éi pille, ikkje ei pille inni ei pille. Det doble omrisset med kvit fyllfarge
   inni var det som fekk velgeren til å lese som ein iOS-segmentbrytar: ei
   skinne med ein tommel. Tommelen er borte, omrisset står. Det som blir igjen
   er same komponenten som .crumb lenger nede på kvar einaste underside: eitt
   hårfint omriss, 999 px, versalar i mikrostorleik, ingen fyllfarge.

   Radiusen skil handling frå veivisning her: knappane er var(--r-btn), altså
   8 px. Velgeren utfører ingenting, han seier kvar du er og kvar du kan gå.
   (Sirklane i lysboksen er òg 999 px, men dei er sirklar med ikon.)

   Omrissfargen er teken frå .crumb, og det er ikkje pynt: rgba(255,255,255,.34)
   blandar seg til #676767 på #181818, altså 3,14:1. WCAG 1.4.11 krev 3:1 for
   kanten kring ein kontroll. Den gamle .24 gav #4F4F4F og 2,17:1, altså under. */
.nav__lang{display:inline-flex;align-items:center;flex:none;padding:0 .1875rem;
  border:1px solid rgba(255,255,255,.34);border-radius:999px;background:none}
@media (min-width:900px){.nav__lang{margin-left:.9rem}}
/* Drawer-utgåva står framleis, som ei ekstra dør for den som alt har opna
   menyen. Han er no NØYAKTIG same komponent som i baren. Her stod det før ein
   fylt kvit pille og ein ringa ein, som passa endå dårlegare i ei liste med
   reine tekstlenker enn pilla gjorde i baren. */
.nav__panel .nav__lang-m{display:inline-flex;align-items:center;flex:none;
  padding:0 .1875rem;margin-top:1.125rem;background:none;
  border:1px solid rgba(255,255,255,.34);border-radius:999px;
  font-size:.75rem;color:inherit}
.nav__lang a,.nav__lang span,
.nav__panel .nav__lang-m a,.nav__panel .nav__lang-m b{
  display:block;padding:.4375rem .5rem;background:none;border:0;border-radius:0;
  font-size:.75rem;font-weight:700;letter-spacing:.06em;line-height:1;
  text-transform:uppercase}
/* Det valde språket er oransje. Same signal som .nav__links a.is-aktiv, som er
   den einaste måten denne baren seier «du er her» på. #E86826 på #181818 er
   5,44:1. aria-current seier det same for skjermlesarar. */
.nav__lang span,.nav__panel .nav__lang-m b{color:var(--orange);text-decoration:none}
/* Det andre språket. Lys nok til å lese som ei lenke, ikkje som noko avslått:
   #C9CDD3 på #181818 er 11,1:1 målt. Understreken er den halvdelen av skiljet
   som ikkje er farge, så paret held seg lesbart for den som ikkje skil oransje
   frå grått. Farge åleine ville vore brot på WCAG 1.4.1. */
.nav__lang a,.nav__panel .nav__lang-m a{color:#C9CDD3;
  text-decoration-line:underline;text-decoration-color:rgba(255,255,255,.45);
  text-decoration-thickness:1px;text-underline-offset:2px;
  transition:color .16s,text-decoration-color .16s}
/* Hover og tastaturfokus gjer det same som menylenkene gjer: streken under
   blir oransje. Understrek tek ikkje plass i oppsettet, så ingenting flyttar
   seg når tjukkleiken går frå 1 til 2 px. */
.nav__lang a:hover,.nav__lang a:focus-visible,
.nav__panel .nav__lang-m a:hover,.nav__panel .nav__lang-m a:focus-visible{
  color:#fff;text-decoration-color:var(--orange);text-decoration-thickness:2px}
.nav__lang a:active,.nav__panel .nav__lang-m a:active{
  color:var(--orange);text-decoration-color:var(--orange)}
/* Fokusringen kjem frå den globale regelen og skal stå. Berre radiusen må
   rettast, elles teiknar han eit 4 px rektangel oppå ei pille. */
.nav__lang a:focus-visible,.nav__panel .nav__lang-m a:focus-visible{border-radius:999px}
.nav__panel .nav__sub{display:block;padding:.7rem 0 .7rem 1.1rem;font-size:.9375rem;
  color:#B4B4B4;border-bottom:1px solid var(--line-dark)}
/* mobile drawer — <details>, so it works with JS switched off */
/* Ingen auto-margin her heller, av same grunn: to auto-marginar deler den
   ledige plassen mellom seg, og då hadde språkvelgeren hamna midt i baren
   i staden for inntil menyknappen. Logoen sin margin-right:auto held alt
   til høgre alt. */
.nav__drawer{margin-left:.25rem}
.nav__drawer>summary{
  list-style:none;cursor:pointer;display:flex;align-items:center;gap:.5rem;
  color:#fff;font-size:.9375rem;font-weight:600;padding:.6rem .85rem;
  border:1px solid rgba(255,255,255,.28);border-radius:var(--r-btn);
}
.nav__drawer>summary::-webkit-details-marker{display:none}
.nav__drawer>summary svg{width:18px;height:18px}
.nav__drawer[open]>summary{border-color:var(--orange);background:rgba(253,75,1,.12)}
.nav__panel{
  position:absolute;left:0;right:0;top:var(--nav-h);background:var(--black);
  border-bottom:1px solid var(--line-dark);padding:.5rem var(--pad) 1.25rem;
  /* Panelet var 701 px høgt utan tak. Det ligg absolutt plassert inne i ein
     sticky nav, så det stig berre dei 51 pikslane topbaren utgjer når ein
     rullar, og frys der. På 390 x 667 hadde panelets eigen «Bli medlem»-knapp
     difor ingen trykkflate i det heile. No får panelet eit tak og rullar sjølv.
     overscroll-behavior er med vilje ikkje sett: build/interact.mjs slår ut på
     «none|contain» på blokkaksen, og den regelen finst fordi ei slik låsing
     ein gong stoppa rullinga på heile sida. */
  max-height:calc(100dvh - var(--nav-h) - 70px);
  overflow-y:auto;
}
.nav__panel a{display:block;color:#fff;text-decoration:none;font-size:1.0625rem;font-weight:500;
  padding:.9rem 0;border-bottom:1px solid var(--line-dark)}
/* Knappen i skuffa er ein .btn, men regelen over er sterkare (0,1,1 mot 0,1,0)
   og gjorde han til ein blokk. Sidan «img,svg,picture{display:block}» står
   lenger oppe, datt pila ned på si eiga linje heilt til venstre: knappen målte
   350 x 66,8 px med teksten på x=152,9 og pila på x=22. Det heldt ikkje å hente
   tilbake display åleine, for då stod han framleis med feil polstring, feil
   skriftstorleik og ein mørk 1 px underkant i staden for den oransje på 2 px. */
.nav__panel .btn{display:inline-flex;padding:1rem 1.5rem;
  border-bottom:2px solid var(--orange-fill);font-size:1rem;font-weight:600;
  margin-top:1.25rem}

/* KNAPPEN OVER HAKELISTA PÅ MOBIL, både på /main/ og på kampanjesida.
   Same grunn begge stader: på 390 px ligg kampanjemerket, ei overskrift på
   tre liner, ein ingress på tre liner og fem hakemerke MELLOM det du lovar og
   knappen som innfrir det. Knappen hamna heilt nede bak den klistra stripa.
   Rekkjefølgja blir difor merke, overskrift, ingress, KNAPP, og så hakelista
   som utdjuping. Frå 860 og opp er det god plass, og då står alt i original
   rekkjefølgje igjen.
   .hero__copy er ei vanleg blokk elles, så «order» gjer ingenting før ho blir
   flex. Markupen er urørt: same hero på alle 156 sidene. */
@media (max-width:859px){
  .hero__copy{display:flex;flex-direction:column;align-items:flex-start}
  .hero__copy > .kbadge{order:1}
  .hero__copy > .crumb{order:1}
  .hero__copy > .hero__kick{order:2}
  .hero__copy > .h1{order:3}
  .hero__copy > .hero__lede{order:4;margin-bottom:1.5rem}
  .hero__copy > .hero__actions{order:5;margin-bottom:1.5rem}
  .hero__copy > .checks{order:6;margin-bottom:1.25rem}
  .hero__copy > .hero__fine{order:7}
  .hero__copy > .trustline{order:8}

  /* SIDER MED EIN KNAPP UNDER TILLITSLINJA, altså /bedrift/.
     Regelen over gjeld «.hero__actions», og den nye knappen har den klassa
     òg. Han arva difor order 5 og la seg rett under «Ta kontakt», medan
     linja som forklarar han låg på order 8, heilt nede etter hakelista.
     Paret blei rive frå kvarandre: knappen stod utan forklaring, og
     forklaringa stod utan knapp.
     Her får dei tre plassane sine i rekkjefølgje. Hakelista blir dytta ned
     til 8, som er same rolla ho har elles: utdjuping etter handlinga.
     Andre sider har ikkje .hero__actions--etter og blir ikkje rørte. */
  .hero__copy:has(> .hero__actions--etter) > .trustline{order:6}
  .hero__copy > .hero__actions--etter{order:7;margin-bottom:1.5rem}
  .hero__copy:has(> .hero__actions--etter) > .checks{order:8;margin-bottom:0}
}

/* LUFT MELLOM HELTEN OG SEKSJONEN UNDER, PÅ MOBIL.
   På desktop ligg heltebiletet til høgre for teksten, og seksjonen under
   byrjar etter ein tekstblokk. På mobil er .hero__media order:2, altså det
   SISTE i helten, så neste seksjon byrjar rett under eit foto. Med
   «padding-top:0» på den seksjonen, som 12 sider har, stod overskrifta
   klistra inntil biletkanten uten ein piksel imellom. Målt på /om-oss/ og
   /sentre/: 0 px.
   build/fargeskift.mjs fangar ikkje dette, for han ser etter fargeskift
   mellom to seksjonar, og her er naboen eit bilete.
   !important er naudsynt og ikkje latskap: P.section skriv padding-top rett
   i style-attributtet, og eit inline-attributt vinn over stilarket uansett
   spesifisitet. Alternativet er å endre P.section for alle 156 sidene. */
@media (max-width:859px){
  .hero + .section{padding-top:2.75rem!important}
}

/* SENTERVELGEREN PÅ TELEFON stod her: eit heilt sett med order-reglar som
   flytta kortet opp mellom overskrifta og ingressen, fordi kunden bad om
   «put the senter velger rigth under Ett medlemskap, fire sentre».

   Ute 11.08.2026 saman med sjølve kortet, sjå build/mainbody.html. Reglane
   gjaldt berre .hero__in:has(.pick), og .pick finst ikkje lenger på nokon
   side. Utan kortet har helten på framsida eitt barn, tekstspalta, og då er
   den vanlege rekkjefølgja rett av seg sjølv. */

/* SAME PROBLEM PÅ DESKTOP, OG DET STOD ATT.
   Regelen over gjeld berre under 860 px. På /sentre/, /medlemskap/ og
   /om-oss/ har seksjonen rett under helten «padding-top:0» skrive rett i
   style-attributtet, og på desktop fekk han difor stå. Etiketten «Sentrene
   våre» låg då nesten inntil kanten av det mørke feltet over.

   !important av same grunn som over: eit inline-attributt slår kva som helst
   i stilarket, uansett spesifisitet.

   :not(:has(.quick)) og :not(:has(.statbar)) er ikkje pynt. Dei to blokkene
   har negativ toppmarg MED VILJE, kortet skal flyte opp over kanten av
   helten, og det er framleis rett frå 860 px og opp. Utan unntaket ville
   denne regelen ha dytta dei ned og øydelagt effekten på framsida. */
@media (min-width:860px){
  .hero + .section:not(:has(.quick)):not(:has(.statbar)){
    padding-top:clamp(2.75rem,5vw,4rem)!important}
}

/* ── hero ────────────────────────────────────────────────── */
.hero{position:relative;background:var(--black);isolation:isolate;display:flex;flex-direction:column}
.hero__media{position:relative;order:2}
.hero__media picture{display:block;width:100%;height:100%}
.hero__in{order:1}
.hero__media img{width:100%;aspect-ratio:4/5;object-fit:cover}
.hero__in{display:flex;flex-direction:column;padding-block:2.25rem 2.25rem}
.hero__copy{order:1}
/* Luft over kortet på mobil. Under 860 px ligg kortet UNDER tekstspalta, og
   siste elementet der er trustlinja. Med margin:0 låg dei to heilt inntil
   kvarandre: trustlinja slutta på y 592 og kortet byrja på y 592, altså null
   piksler mellom eit avsnitt og eit kvitt kort. Det såg ut som kortet var
   ein del av setninga. Frå 860 og opp står dei side om side, og då blir
   margen nullstilt igjen på linja under. */
.hero__card{order:2;margin:1.75rem 0 0;position:relative;z-index:2}
/* FOTO I STADEN FOR FAKTAKORT I KORTSPALTA.
   Kortspalta er 400 px frå 860 og opp, og eit ståande portrett fyller henne
   utan å bli skore: 4:5 gjev 500 px høgd. Det er den einaste forma eit
   portrett toler i ein helt, for heltebiletet elles ligg fullbreidde bak
   teksten, og der må eit 4:5-bilete kaste ein firedel av seg sjølv.
   På smale skjermar står kortet under teksten, og då blir eit portrett i full
   breidd unødig høgt. Difor taket. Fyrst brukt på /mor-barn/. */
.hero__card--foto img{width:100%;border-radius:var(--r-card);display:block}
.hero__card--foto{max-width:300px}
.hero .h1{margin-bottom:1rem}
.hero__lede{color:var(--ink-inv-2);font-size:1rem;line-height:1.65;max-width:46ch;margin-bottom:1.375rem}
.hero__actions{display:flex;flex-wrap:wrap;gap:.75rem;margin-bottom:2.5rem}
/* Knappar UNDER tillitslinja. Berre /bedrift/ bruker dette: linja der
   forklarar knappen som kjem etter henne, ikkje den over.

   AVSTANDANE ER MÅLTE, ikkje valde på auget. Fyrste utgåva gav 28 px frå
   punktlista til «Ta kontakt», 22 px vidare til linja og 18 px til
   «Innmelding». Tre nesten like avstandar, og då grupperer ingenting seg:
   linja svevar midt mellom dei to knappane og høyrer like gjerne til den
   over som den under.

   No er det to grupper. «Ta kontakt» er arbeidsgjevaren si handling og står
   for seg. Linja og «Innmelding» er den tilsette si, og dei står tett.
   :has() er trygt her: sviktar det, står alt som før og ingenting bryt. */
.hero__actions:has(+ .trustline + .hero__actions--etter){margin-bottom:2.25rem}
.trustline:has(+ .hero__actions--etter){margin-bottom:.625rem}
.hero__actions--etter{margin-top:0;margin-bottom:2.5rem}

/* BAKGRUNNSBILETE BAK TEKSTEN PÅ MOBIL.
   Kunden: «Mobilsidene er litt mørke, savner bakgrunnsbilde til tekst for å
   live det litt opp.» Han har rett, og målinga viser kvifor: på 390 px var
   helten på ei sentersid 1 503 px høg, og fotoet låg som ei eiga blokk NEDST,
   etter både teksten og det kvite kortet. Over tusen piksler flat svart
   under teksten før biletet i det heile kom til syne.
   node build/morke.mjs måler det: 30 prosent av all høgd var mørk, og
   helten stod oppført som mørk seksjon UTAN bilete bak på sju sider.

   Frå 860 px og opp har helten alltid hatt fotoet som bakgrunn. Her gjer vi
   det same under 860, med ein loddrett gradient i staden for ein vassrett.
   Helten blir samtidig LÅGARE, for fotoet legg ikkje lenger si eiga høgd til
   teksten sin.

   Gradienten er ikkje pynt. Kvit tekst på eit tilfeldig treningsromfoto fell
   under AA med ein gong, så mørket må liggje der teksten er. build/contrast.mjs
   held vakt. */
@media (max-width:859px){
  .hero__media{position:absolute;inset:0;order:0;z-index:0}
  .hero__media picture,
  .hero__media img{height:100%;width:100%;aspect-ratio:auto;object-fit:cover}
  .hero__media::after{
    content:"";position:absolute;inset:0;
    background:linear-gradient(180deg,rgba(24,24,24,.93) 0%,rgba(24,24,24,.88) 34%,rgba(24,24,24,.82) 62%,rgba(24,24,24,.90) 100%);
  }
  /* Teksten må liggje over bakgrunnen, elles ser vi berre fotoet. */
  .hero__in{position:relative;z-index:1}

  /* LUFT RUNDT DET KVITE KORTET.
     Målt på 390 px: 28 px over kortet, 36 px under, og så byrja den lyse
     seksjonen med ein gong, 0 px etter helten. Eit kort på 417 px med berre
     36 px svart under seg les som om det er i ferd med å falle ut av helten.
     Det var mindre synleg før, fordi helten då slutta med eit foto som fylte
     resten. Då fotoet blei bakgrunn, stod polstringa att som tom svart stripe.
     node build/heltbunn.mjs måler dette. */
  .hero__card{margin-top:2.5rem}
  .hero__in{padding-block:2.25rem 3.5rem}
  /* Den minste teksten i helten er vilkåra for kampanjen, og han arvar ein
     dempa grå frå .small. Mot ein flat svart bakgrunn heldt det. Mot eit foto
     gjorde det ikkje: build/fotokontrast.mjs målte 1,99 mot kravet 4,5 i det
     lysaste punktet, altså bindingstid og oppseiingsfrist skrivne så dei
     ikkje var til å lese. Vilkår er det siste som skal vere utydeleg.

     Merk «.on-dark» framfor: fargen kjem frå «.on-dark .small», som er to
     klasser. Ein regel på berre «.hero__fine» er éi klasse og taper uansett
     kor langt nede i fila han står, for spesifisitet slår rekkjefølgje.
     Fyrste forsøket her målte nøyaktig same tal som før. */
  .on-dark .hero__fine{color:rgba(255,255,255,.88)}
}

@media (min-width:860px){
  .hero__media{
    position:absolute;inset:0 0 0 42%;order:0;z-index:0;
  }
  .hero__media img{height:100%;width:100%;aspect-ratio:auto;object-fit:cover}
  .hero__media::after{
    content:"";position:absolute;inset:0;
    background:linear-gradient(90deg,#181818 0%,rgba(24,24,24,.86) 22%,rgba(24,24,24,.36) 58%,rgba(24,24,24,.5) 100%),linear-gradient(180deg,transparent 52%,rgba(24,24,24,.3) 82%,rgba(24,24,24,.62) 100%);
  }
  .hero__in{
    display:grid;grid-template-columns:minmax(0,1fr) 400px;gap:2.75rem;align-items:start;
    padding-block:clamp(2.25rem,4vw,3.25rem) clamp(5rem,7vw,6rem);position:relative;z-index:1;
  }
  .hero__copy{order:0}
  .hero__card{order:0;margin:0}
  /* Full kortbreidd att: spalta er alt 400 px, og taket over gjeld berre
     den smale visinga der kortet ligg under teksten. */
  .hero__card--foto{max-width:none}
  .hero__actions{margin-bottom:1rem}
}

/* ── KAMPANJEHELTEN PÅ FORSIDA ────────────────────────────────
   Kundens «Korrigeringer nr 4», 15.08.2026. Boks til venstre, biletet
   heildekkjande bak, modellane hans til høgre.

   BILETET DEKKJER NO HEILE HELTEN. Frå 860 px og opp låg det på «inset:0 0 0
   42%», altså berre høgre 58 prosent, med flat svart under teksten. Kunden vil
   ha det heildekkjande, så gradienten gjer jobben i staden: mørk der teksten
   står, gjennomsiktig der modellane står.

   OM FARGANE. Mockupen hans måler #F14E0B på knappen og #F4AF00 på prisen.
   Gulen er teken ordrett. Oransjen er det ikkje, og det er med vilje: kvit
   tekst på #F14E0B gjev 3,60:1 og på merkefargen #E86826 3,26:1, begge under
   kravet på 4,5. --orange-fill finst nettopp for dette, #C15620, målt 4,55:1,
   og han er den same oransjen som alle andre knappar på nettstaden bruker. To
   ulike oransjar på same sida ville dessutan lese som ein feil.
   Blågrået på drop-in-knappen er hans, #37556E, 7,82:1 mot kvit. */
/* «.on-dark» FRAMFOR, og det er ikkje pynt. Kicken er ein <p>, og «.on-dark p»
   er ei klasse pluss eit element. Ein regel på berre «.kamph__kick» er éi
   klasse og taper uansett kor langt nede i fila han står, for spesifisitet slår
   rekkjefølgje. Fyrste utgåva målte rgb(210,214,220), altså den grå, og
   «Høstkampanje» stod grå i staden for oransje på begge breidder.
   Same felle som «.on-dark .hero__fine» lenger oppe. */
.on-dark .kamph__kick{
  color:var(--orange);font-size:.9375rem;font-weight:700;letter-spacing:.01em;
  margin-bottom:.5rem;
}
.kamph__h1{
  font-size:clamp(2.35rem,7.2vw,4.15rem);font-weight:800;line-height:.94;
  letter-spacing:-.022em;text-transform:uppercase;color:#fff;
  margin-bottom:1.5rem;text-wrap:balance;
}
.kamph__h1 b{color:var(--gul);font-weight:800}
/* «til» står med små bokstavar i oppsettet hans, midt i ei linje som elles
   er versalar. Utan denne ville text-transform gjort han til TIL. */
.kamph__h1 .kamph__til{text-transform:lowercase}

.kamph__punkt{list-style:none;display:grid;gap:.8125rem;margin:0 0 1.875rem}
.kamph__punkt li{
  display:flex;align-items:center;gap:.8125rem;
  color:#fff;font-size:1.0625rem;line-height:1.3;
}
.kamph__punkt svg{width:26px;height:26px;color:var(--orange);flex:none}

.kamph__val{display:grid;gap:.6875rem;max-width:27rem}
.kbtn{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:.9375rem 1.25rem;border-radius:var(--r-btn);
  font-size:1rem;font-weight:700;line-height:1.15;letter-spacing:.02em;
  text-transform:uppercase;text-decoration:none;color:#fff;
  border:2px solid transparent;
  transition:background .18s ease,border-color .18s ease,transform .18s ease;
}
/* PILA PEIKAR TIL HØGRE, slik ho gjer i oppsettet hans. #ic-chev er den same
   sjevronen som nedtrekka i menyen bruker, og han peikar ned. Å rotere han er
   billegare enn eit symbol til, og han held seg i takt om nokon teiknar om
   sjevronen ein gong. */
.kbtn svg{width:20px;height:20px;flex:none;transform:rotate(-90deg)}
.kbtn:active{transform:translateY(1px)}
.kbtn--kamp{background:var(--orange-fill);border-color:var(--orange-fill)}
.kbtn--kamp:hover{background:var(--orange-dark);border-color:var(--orange-dark)}
/* Andre medlemskap er den mørke i oppsettet hans: nesten svart flate med ein
   lys kant, så han skil seg frå bakgrunnen når biletet er lyst bak. */
.kbtn--medl{background:rgba(18,18,18,.86);border-color:rgba(255,255,255,.30)}
.kbtn--medl:hover{background:rgba(18,18,18,.96);border-color:rgba(255,255,255,.62)}
.kbtn--drop{background:var(--blagra);border-color:var(--blagra)}
.kbtn--drop:hover{background:#2C465C;border-color:#2C465C}

/* ALT UNDER HENG PÅ «.hero--kamp», OG DET ER IKKJE PYNT.
   Fyrste utgåva skreiv desse reglane rett på .hero__media og .hero__in inne i
   ein media query. Dei klassane er dei same på KVAR EINASTE helt på nettstaden,
   sytti sider, så «inset:0» og éin kolonne slo ut sentersidene òg: fotoet la
   seg over heile helten, tospalta med det kvite kortet fall saman, og
   overskrifta hamna bak toppfeltet. Kunden såg det på /tonsberg/ før eg gjorde.
   Ein ny helt skal ikkje kunne røre dei gamle. */
@media (min-width:860px){
  .hero--kamp .hero__media{inset:0}
  .hero--kamp .hero__media::after{
    background:linear-gradient(90deg,rgba(18,18,18,.96) 0%,rgba(18,18,18,.90) 26%,rgba(18,18,18,.55) 46%,rgba(18,18,18,.12) 62%,rgba(18,18,18,.10) 100%);
  }
  .hero--kamp .hero__in{grid-template-columns:minmax(0,1fr);padding-block:clamp(3rem,5vw,4.5rem) clamp(3.5rem,6vw,5.5rem)}
  .hero--kamp .hero__copy{max-width:33rem}
}

/* Under 860 ligg boksen oppå biletet, og modellane står til høgre i fila.
   object-position dreg utsnittet mot høgre, elles ser ein berre det tomme
   golvet til venstre bak teksten. */
@media (max-width:859px){
  .hero--kamp .hero__media img{object-position:72% 50%}
  .kamph__val{max-width:none}
}

/* senter picker card */

/* ── stats bar ───────────────────────────────────────────── */
@media (min-width:820px){
}

/* ── generic grids ───────────────────────────────────────── */
.sec-head{margin-bottom:2.25rem;max-width:40ch}
.sec-head--center{margin-inline:auto;text-align:center;max-width:52ch}
/* Hovud som står rett over brødtekst. .prose er 70ch, så ein ingress i eit
   40ch-hovud braut ei halv linje før avsnitta han innleiar, og seksjonen såg
   fillete ut. Overskrifta blir halden på 40ch, slik at ho bryt nøyaktig som
   før: det er BERRE ingressen som blir breiare. Sett av build/paafyll.mjs på
   prosablokker. Kunden 25.08.2026. */
.sec-head--brei{max-width:70ch}
.sec-head--brei .h2{max-width:40ch}
/* .lede har sitt eige tak på 56ch. Utan denne linja braut ingressen på 56ch
   over ein brødtekst på 70ch, og mismatchen var framleis synleg, berre
   mindre. «none» let 70ch-en over styre, slik at dei bryt på same mål. */
.sec-head--brei .lede{max-width:none}

/* why-cards, mirroring the mockup's text column + card row */

/* om senteret — image bleeds to the left edge on desktop */
@media (min-width:960px){
}

/* ── price table ─────────────────────────────────────────── */
.plan{background:var(--card);border:1px solid var(--line);border-radius:var(--r-card);
  padding:1.5rem;display:flex;flex-direction:column;position:relative}
.plan__name{font-size:1.0625rem;font-weight:700;color:var(--ink);margin-bottom:.2rem}
.plan__price{display:flex;align-items:baseline;gap:.35rem;margin-bottom:1.125rem;flex-wrap:wrap}
.plan__amount{font-size:1.75rem;font-weight:700;line-height:1.1;letter-spacing:-.025em;color:var(--ink);white-space:nowrap}
.plan__list{display:grid;gap:.5rem;margin-bottom:1.5rem;flex:1}
.plan__list li{display:grid;grid-template-columns:16px 1fr;gap:.55rem;align-items:start;
  font-size:.875rem;line-height:1.5;color:var(--ink-2);hyphens:none}
.plan__list svg{width:16px;height:16px;margin-top:.3em;color:var(--orange)}

/* ── dark band with photo ────────────────────────────────── */

/* ── gallery ─────────────────────────────────────────────── */
/* horizontal on phones. No wheel handlers anywhere, and overscroll is contained
   on the inline axis only, so a vertical wheel over the strip scrolls the page. */

/* ── praktisk ────────────────────────────────────────────── */

/* map facade: no third-party request until the visitor asks for one */
.map-wrap{border-radius:var(--r-card);overflow:hidden;border:1px solid var(--line);
  background:var(--dark);position:relative;min-height:340px;display:grid}
.map-wrap iframe{border:0;width:100%;height:100%;min-height:340px;display:block}
/* Kartbiletet fyller ruta. object-fit:cover fordi ruta si høgd følgjer
   nabospalta, medan biletet er fast 16:10. Sjå build/kartbygg.mjs. */
.map-wrap--bilde{min-height:0}
.map-wrap--bilde img{display:block;width:100%;height:100%;min-height:340px;object-fit:cover}
.mapfacade{display:grid;align-content:center;gap:1rem;padding:2rem 1.75rem;text-align:left;
  background:
    radial-gradient(120% 90% at 78% 12%,rgba(253,75,1,.22),transparent 58%),
    repeating-linear-gradient(90deg,#111 0 1px,transparent 1px 46px),
    repeating-linear-gradient(0deg,#111 0 1px,transparent 1px 46px),
    var(--dark);
  color:var(--ink-inv-2)}
.mapfacade__pin{width:54px;height:54px;border-radius:50%;background:var(--orange-fill);display:grid;place-items:center}
.mapfacade__pin svg{width:26px;height:26px;color:#fff}
.mapfacade h3{color:#fff;font-size:1.125rem}
.mapfacade p{font-size:.9375rem;line-height:1.6}
.mapfacade__btns{display:flex;flex-wrap:wrap;gap:.625rem;margin-top:.25rem}

/* ── faq ─────────────────────────────────────────────────── */

/* ── footer ──────────────────────────────────────────────── */
.foot{background:var(--black);color:var(--ink-inv-2);padding-block:3rem 1.75rem}
.foot__grid{display:grid;gap:2.25rem;grid-template-columns:1fr}
/* MOBIL: to spalter, ikkje éi.
   Med éi spalte blir dei seks lenkelistene lagde etter kvarandre, og botnen
   måler 1 952 px på ein telefon. Det er nesten tre skjermhøgder botntekst
   under ei side som elles er ferdig, og du må rulle forbi heile greia for å
   nå det siste. Lenkene er korte, «Gavekort», «Drop-in», så to spalter er
   god plass på 390 px.
   Logoblokka spenner over begge, fordi taglinja under henne er 26 tegn brei
   og blir eit tårn i ei halv spalte. */
@media (max-width:619px){
  .foot__grid{grid-template-columns:repeat(2,1fr);gap:1.75rem 1.25rem}
  .foot__grid > :first-child{grid-column:1 / -1}
  .foot h2{margin-bottom:.625rem}
  .foot li{margin-bottom:.375rem}
}
@media (min-width:620px){.foot__grid{grid-template-columns:repeat(2,1fr)}}
@media (min-width:900px){.foot__grid{grid-template-columns:repeat(3,1fr);gap:2rem 2.25rem}}
@media (min-width:1150px){.foot__grid{grid-template-columns:1.35fr repeat(5,minmax(0,1fr));gap:2rem 1.75rem}}
.foot__logo{display:block}
.foot__logo picture{display:block}
.foot__logo svg,.foot__logo img{height:40px;width:auto;display:block;margin-bottom:1rem}
.foot__tag{font-size:.9375rem;line-height:1.55;color:#9A9A9A;max-width:26ch}
.foot h2{font-size:.75rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:#fff;margin-bottom:1rem}
.foot li{margin-bottom:.6rem}
.foot li a{font-size:.9375rem;color:#B4B4B4;text-decoration:none}
.foot li a:hover{color:var(--orange)}
.foot__social{display:flex;gap:.75rem;margin-top:1.5rem}
.foot__social a{width:38px;height:38px;border-radius:50%;border:1px solid var(--line-dark);
  display:grid;place-items:center;color:#fff}
.foot__social a:hover{border-color:var(--orange);color:var(--orange)}
.foot__social svg{width:18px;height:18px}
.foot__legal{border-top:1px solid var(--line-dark);margin-top:2.5rem;padding-top:1.5rem;
  display:flex;flex-wrap:wrap;gap:.5rem 1.5rem;justify-content:space-between;
  font-size:.8125rem;color:#8A9099}
.foot__legal a{color:#8A9099;text-decoration:none}
.foot__legal a:hover{color:#B4B4B4}

/* ── motion ──────────────────────────────────────────────── */
/* «auto» som utgangspunkt, «smooth» først når JS slår det på etter last.
   Grunnen: scroll-behavior gjeld ÒG hoppet nettlesaren gjer når ei side blir
   opna med eit fragment i adressa. Med «smooth» på html byrja sida på toppen
   og rulla synleg nedover til ankeret. Målt på /larvik/priser/#mer: 28
   rullesteg over 451 ms, frå scrollY 2 til 842. Det er nettopp det kunden
   såg som «opp og så ned» når ein pille i lokalnavet blir klikka.
   build/ankerhopp.mjs måler dette.
   Klikk på anker INNE i same side rullar framleis mjukt, fordi klassa er på
   plass lenge før nokon rekk å klikke. Utan JS blir hopp momentane, som er
   rett oppførsel uansett. */
html{scroll-behavior:auto;scroll-padding-top:calc(var(--nav-h) + 12px)}
html.mjuk{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){
  html,html.mjuk{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important}
}

/* ══ topbar ══════════════════════════════════════════════════════════════ */
/* svart tekst på brand-oransje: 6,16:1, så her kan --orange brukes eksakt */
.topbar{background:var(--orange);color:#181818}
.topbar__in{display:flex;align-items:center;justify-content:space-between;gap:1rem;
  min-height:38px;padding-block:.5rem;font-size:.8125rem;font-weight:600;line-height:1.35}
.topbar b{font-weight:800}
.topbar__facts{display:none}
@media (min-width:880px){.topbar__facts{display:flex;align-items:center;gap:.625rem;flex:none}}
.topbar__facts i{font-style:normal;opacity:.55}

/* ══ breadcrumb pill ═════════════════════════════════════════════════════ */
.crumb{display:inline-flex;align-items:center;gap:.5rem;flex-wrap:wrap;list-style:none;
  border:1px solid rgba(255,255,255,.34);border-radius:999px;padding:.4375rem .9375rem;
  font-size:.6875rem;font-weight:700;letter-spacing:.085em;text-transform:uppercase;
  color:#fff;margin-bottom:1.375rem}
.crumb li{display:flex;align-items:center;gap:.5rem;color:#fff}
.crumb li+li::before{content:"";width:5px;height:5px;border-right:1.5px solid rgba(255,255,255,.55);
  border-top:1.5px solid rgba(255,255,255,.55);transform:rotate(45deg)}
.crumb a{color:inherit;text-decoration:none}
.crumb a:hover{text-decoration:underline}

/* ══ hero tweaks ═════════════════════════════════════════════════════════ */
.hero__kick{font-size:clamp(1.0625rem,.92rem + .45vw,1.375rem);font-weight:500;
  color:#fff;margin-bottom:.4375rem;letter-spacing:-.01em}
.trustline{display:flex;align-items:center;gap:.625rem;font-size:.9375rem;
  color:var(--ink-inv-2);margin-top:1.375rem}
.trustline svg{width:18px;height:18px;color:var(--orange);flex:none}

/* ══ "kort fortalt" faktakort ════════════════════════════════════════════ */
.kort{background:var(--card);border-radius:var(--r-card);padding:1.5rem 1.375rem 1.375rem;
  box-shadow:0 24px 60px rgba(0,0,0,.45)}
.kort .kort__h,.on-dark .kort .kort__h{font-size:1.1875rem;font-weight:700;color:var(--ink);margin-bottom:.375rem;letter-spacing:-.01em}
.kort__row{display:grid;grid-template-columns:38px 1fr;gap:.9375rem;align-items:center;
  padding-block:.875rem;border-bottom:1px solid var(--line)}
.kort__row:last-of-type{border-bottom:0;padding-bottom:1.125rem}
.kort__i{width:38px;height:38px;border:1.5px solid var(--orange);border-radius:9px;
  display:grid;place-items:center}
.kort__i svg{width:19px;height:19px;color:var(--orange)}
.kort__v{display:block;font-size:1.0625rem;font-weight:700;color:var(--orange-ink);line-height:1.25;letter-spacing:-.01em}
.kort__l{display:block;font-size:.8125rem;color:var(--ink-3);line-height:1.4;margin-top:.05rem}

/* ══ mørk sekundærknapp (fra Larvik-standarden) ══════════════════════════ */
.btn--dark{background:var(--dark);border-color:var(--dark);color:#fff}
.btn--dark:hover{background:#181818;border-color:#181818}

/* ══ fire hurtigkort som legger seg over herokanten ══════════════════════ */
.quick{position:relative;z-index:3;margin-top:-2.75rem}
/* Luft mellom den mørke helten og fyrste kvite kort på telefon.
   Same regel som i build/pages.css, og han MÅ stå begge stader: rota har
   sitt eige stilark her inne og får ikkje pages.css. Fyrste forsøket låg
   berre i pages.css, og då fekk åtte sider 44 px medan rota og /tonsberg/
   framleis stod på 0. node build/kortavstand.mjs viste nøyaktig det. */
@media (max-width:859px){.quick,.statbar{margin-top:0}}
.quick__grid{display:grid;gap:1rem;grid-template-columns:1fr}
@media (min-width:560px){.quick__grid{grid-template-columns:repeat(2,1fr)}}
@media (min-width:940px){.quick__grid{grid-template-columns:repeat(4,1fr)}}
/* NØYAKTIG TRE KORT. Kunden tok «Egen plan» ut av /energy-start/ 09.08.2026,
   og då stod tre kort i eit firespalters rutenett: tre til venstre og ei tom
   rute til høgre. Same felle som tallrada på forsida og femspalta på
   /franchise/, berre eit tal lenger ned.
   :has(:nth-child(3)):not(:has(:nth-child(4))) er sant berre når talet er tre.
   Rada fyller då breidda i staden for å henge mot venstre. */
@media (min-width:940px){
  .quick__grid:has(.quick__c:nth-child(3)):not(:has(.quick__c:nth-child(4))){grid-template-columns:repeat(3,1fr)}
}

/* Mellom 560 og 939 px er rutenettet to spalter, og då blir det tredje kortet
   ståande åleine på rad to med ei tom rute ved sida av seg. Same problem, ein
   breidd lenger ned. Kortet får heile breidda i staden. */
@media (min-width:560px) and (max-width:939px){
  .quick__grid:has(.quick__c:nth-child(3)):not(:has(.quick__c:nth-child(4))) .quick__c:last-child{grid-column:1 / -1}
}

.quick__c{background:#fff;border-radius:var(--r-card);padding:1.125rem 1.25rem;
  box-shadow:0 10px 30px rgba(0,0,0,.11)}
.quick__t{display:flex;align-items:center;gap:.625rem;margin-bottom:.375rem}
.quick__t svg{width:22px;height:22px;color:var(--orange);flex:none}
.quick__t b{font-size:1.0625rem;font-weight:700;color:var(--ink);letter-spacing:-.012em}
.quick__c p{font-size:.875rem;line-height:1.5;color:var(--ink-2)}

/* ══ tre prisekort, første framhevet ═════════════════════════════════════ */
.plans3{display:grid;gap:1.25rem;grid-template-columns:1fr}
@media (min-width:780px){.plans3{grid-template-columns:repeat(3,1fr)}}
.plan--hi{background:#FFF7F2;border:1.5px solid var(--orange);box-shadow:0 12px 34px rgba(253,75,1,.10)}
.plan__eb{display:block;font-size:.6875rem;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--orange-ink);margin-bottom:.75rem}
.plan--hi .plan__amount{color:var(--orange-display)}
.plan__note{font-size:.8125rem;color:var(--ink-3);margin-top:-.5rem;margin-bottom:1.125rem}
.other{margin-top:1.5rem;background:#fff;border:1px solid var(--line);border-radius:var(--r-card);
  padding:1.25rem 1.5rem}
.other h3{font-size:.9375rem;margin-bottom:.75rem}
.other ul{display:grid;gap:.5rem 2rem;grid-template-columns:1fr}
@media (min-width:640px){.other ul{grid-template-columns:repeat(2,1fr)}}
.other li{display:flex;justify-content:space-between;gap:1rem;font-size:.9375rem;
  color:var(--ink-2);border-bottom:1px dotted var(--line);padding-bottom:.4375rem}
.other li b{color:var(--ink);font-weight:700;white-space:nowrap}
/* «Se andre medlemskap»: same boks som .other, men EI lenke i staden for ei
   prisliste. Rota har sitt eige stilark her inne og hentar ikkje
   assets/site.css, så regelen må stå BEGGE stader. Stod ho berre i site.css,
   såg boksen rett ut på dei tre andre sentersidene og som understreka
   laustekst med ein diger pil på nettopp forsida. build/rotcss.mjs fangar det. */
.merlenke{margin-top:1.5rem;background:#fff;border:1px solid var(--line);
  border-radius:var(--r-card);display:flex;align-items:center;gap:1rem;
  padding:1.125rem 1.5rem;text-decoration:none;color:inherit;
  transition:border-color .15s ease,background .15s ease}
.merlenke:hover,.merlenke:focus-visible{border-color:var(--orange);background:var(--cream)}
.merlenke__t{display:block;font-weight:700;color:var(--ink);font-size:.9375rem}
.merlenke__d{display:block;font-size:.8125rem;color:var(--ink-3);margin-top:.1875rem}
.merlenke svg{flex:none;width:1.125rem;height:1.125rem;margin-left:auto;color:var(--orange)}
/* Når skildringa bryt til to linjer, hamnar pila midt i teksten. Rett henne
   opp mot tittelen på smal skjerm. */
@media (max-width:479px){.merlenke{align-items:flex-start}.merlenke svg{margin-top:.1875rem}}

/* ══ medlemskap i tre faner ══════════════════════════════════════════════
   MERK KVAR DENNE STÅR. assets/site.css blir SKRIVEN UT av denne blokka, av
   build/genmain.mjs, og alle dei 155 andre sidene lenkjer til henne. Legg du
   ein regel rett i assets/site.css, blir han borte ved neste bygg, og då
   står komponenten heilt ustylt: radioknappar synlege, alle tre panela open
   samtidig. Regelen høyrer heime her.

   Ekte radioknappar, ikkje JS. Inputane ligg først i .faner, så panela kan
   veljast med søskensselektor. Difor står rett fane valt før noko skript har
   køyrt. Same prinsipp som sentervelgeren i build/genmain.mjs.

   Inputane er gøymde for auget, men IKKJE for tastaturet: display:none ville
   teke dei ut av tabbrekkja og gjort fanene umoglege å nå utan mus. */
.faner__r{position:absolute;opacity:0;pointer-events:none;width:1px;height:1px}
.faner__rad{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:1.5rem}
.faner__k{display:flex;flex-direction:column;gap:.0625rem;cursor:pointer;
  padding:.625rem 1.125rem;border:1px solid var(--line);border-radius:999px;
  background:#fff;transition:border-color .15s ease,background .15s ease,color .15s ease}
.faner__kt{font-size:.9375rem;font-weight:700;color:var(--ink)}
.faner__ku{font-size:.75rem;color:var(--ink-3);font-style:italic}
.faner__k:hover{border-color:var(--orange)}
/* data-i knyter input og panel saman utan at stilarket treng kjenne namna
   på fanene. Med :nth-of-type måtte kvar fane ha sin eigen klasse, og det
   braut med ein gong komponenten blei brukt med sentera som faner. */
/* LIK HØGD BERRE DER KORTA STÅR I SPALTER.
   Panela ligg oppå kvarandre i eit rutenett så boksen får høgda til det
   høgaste, og sida ikkje hoppar ved fanebyte. Det er rett frå 780 px og opp,
   der korta står tre i bredda og panela er omtrent like høge uansett.

   Under 780 stablar korta seg, og då er drop-in-fanen med tre kort mykje
   høgare enn «Uten binding» med to. Reservert plass blir då eit stort tomt
   felt under det korte panelet, heilt ned til neste blokk. Kunden: «its way
   to much space it should be rigth under».
   På mobil rullar ein uansett, så eit lite hopp ved fanebyte kostar mindre
   enn eit tomrom som står der heile tida. */
@media (min-width:780px){
  .faner__panelar{display:grid}
  .faner__p{grid-area:1 / 1;visibility:hidden}
}
@media (max-width:779px){
  .faner__p{display:none;visibility:visible}
}
.faner__r[data-i="1"]:checked ~ .faner__panelar .faner__p[data-i="1"],
.faner__r[data-i="2"]:checked ~ .faner__panelar .faner__p[data-i="2"],
.faner__r[data-i="3"]:checked ~ .faner__panelar .faner__p[data-i="3"],
.faner__r[data-i="4"]:checked ~ .faner__panelar .faner__p[data-i="4"]{visibility:visible;display:block}
/* :has() fordi labelen ikkje er eit søsken av inputen, men ligg inne i raden. */
.faner:has(.faner__r[data-i="1"]:checked) .faner__k[data-i="1"],
.faner:has(.faner__r[data-i="2"]:checked) .faner__k[data-i="2"],
.faner:has(.faner__r[data-i="3"]:checked) .faner__k[data-i="3"],
.faner:has(.faner__r[data-i="4"]:checked) .faner__k[data-i="4"]{background:var(--orange);border-color:var(--orange)}
.faner:has(.faner__r[data-i="1"]:checked) .faner__k[data-i="1"] .faner__kt,
.faner:has(.faner__r[data-i="2"]:checked) .faner__k[data-i="2"] .faner__kt,
.faner:has(.faner__r[data-i="3"]:checked) .faner__k[data-i="3"] .faner__kt,
.faner:has(.faner__r[data-i="4"]:checked) .faner__k[data-i="4"] .faner__kt,
.faner:has(.faner__r[data-i="1"]:checked) .faner__k[data-i="1"] .faner__ku,
.faner:has(.faner__r[data-i="2"]:checked) .faner__k[data-i="2"] .faner__ku,
.faner:has(.faner__r[data-i="3"]:checked) .faner__k[data-i="3"] .faner__ku,
.faner:has(.faner__r[data-i="4"]:checked) .faner__k[data-i="4"] .faner__ku{color:#fff}
.faner:has(.faner__r:focus-visible) .faner__rad{outline:2px solid var(--orange);
  outline-offset:4px;border-radius:999px}
@media (max-width:479px){
  .faner__rad{gap:.375rem}
  .faner__k{padding:.5rem .875rem;flex:1 1 auto;align-items:center;text-align:center}
  .faner__kt{font-size:.875rem}
}

/* ══ praktisk informasjon: ikon til venstre ══════════════════════════════ */
.pinfo{display:grid;gap:1.25rem;grid-template-columns:1fr}
@media (min-width:620px){.pinfo{grid-template-columns:repeat(2,1fr)}}
@media (min-width:960px){.pinfo{grid-template-columns:repeat(3,1fr)}}
/* Er det bare to kort, ser tre spalter ut som at det tredje mangler. Da fyller
   de to raden i stedet. :has() blir ignorert av nettlesere som ikke kan det,
   og der blir oppsettet som før. */
@media (min-width:960px){
  .pinfo:has(>:last-child:nth-child(2)){grid-template-columns:repeat(2,1fr)}
  .pinfo:has(>:last-child:nth-child(4)){grid-template-columns:repeat(2,1fr)}
}
.pinfo__c{background:#fff;border:1px solid var(--line);border-radius:var(--r-card);
  padding:1.5rem;display:grid;grid-template-columns:44px 1fr;gap:1.125rem;align-items:start}
.pinfo__c>svg{width:40px;height:40px;color:var(--orange);flex:none;margin-top:-.15rem}
.pinfo__c h3{font-size:1.0625rem;margin-bottom:.3125rem;letter-spacing:-.01em}
.pinfo__c p{font-size:.9375rem;line-height:1.55;color:var(--ink-2)}

/* ══ bildemosaikk ════════════════════════════════════════════════════════ */
.mosaic{display:grid;gap:.875rem;grid-template-columns:repeat(2,1fr)}
.mosaic figure{margin:0;border-radius:var(--r-card);overflow:hidden;background:#E8E8E8}
.mosaic picture{display:block;height:100%}
.mosaic img{width:100%;height:100%;object-fit:cover;display:block;aspect-ratio:4/3}
.mosaic figure:first-child{grid-column:1/-1}
/* FIRE BILETE GAV EIT HOL. Første flisa tek to gonger to ruter, så med fire
   bilete hamna den fjerde åleine med ei tom rute ved sida av, både i fire
   spalter og i to. Stord har hatt fire sidan starten, og Tønsberg fekk fire
   13.09.2026. Er den fjerde også den siste, fyller han heile rada. Med fem
   bilete gjeld regelen ikkje, og ingenting endrar seg. */
.mosaic figure:nth-child(4):last-child{grid-column:span 2}
/* SEKS BILETE: TRE SPALTER. Tønsberg fekk seks 13.09.2026. I fire spalter
   blir den sjette ståande åleine på ei ny rad, og breie fliser på nær 3:1
   skar hovuda av folka på PT-biletet. Tre spalter gir to gonger to for den
   første og fem like fliser rundt, utan hol. Rutehøgda er løfta så flisene
   held seg nær 3:2, same forhold som fotografia. Utan :has() fell sida
   tilbake til fire spalter med ei tom rute, ikkje noko verre.
   Under 760 er det to spalter, og då er det den sjette som står åleine. */
@media (max-width:759.98px){
  .mosaic figure:nth-child(6):last-child{grid-column:1/-1}
}
@media (min-width:760px){
  .mosaic{grid-template-columns:repeat(4,1fr);grid-auto-rows:11.25rem}
  .mosaic figure{grid-column:auto}
  .mosaic figure:first-child{grid-column:span 2;grid-row:span 2}
  .mosaic img{aspect-ratio:auto;height:100%}
  .mosaic:has(> figure:nth-child(6):last-child){grid-template-columns:repeat(3,1fr);grid-auto-rows:14rem}
}

/* ══ finn oss ════════════════════════════════════════════════════════════ */
.finn{display:grid;gap:1.5rem;grid-template-columns:1fr;align-items:stretch}
@media (min-width:900px){.finn{grid-template-columns:minmax(0,330px) minmax(0,1fr);gap:2.5rem}}
.finn__addr{display:grid;grid-template-columns:26px 1fr;gap:.875rem;align-items:start;margin-block:1.25rem 1.25rem}
.finn__addr svg{width:26px;height:26px;color:var(--orange);margin-top:.1rem}
.finn__addr b{display:block;font-size:1rem;color:var(--ink);margin-bottom:.15rem}
.finn__addr span{font-size:.9375rem;line-height:1.55;color:var(--ink-2)}

/* ══ omtaler ═════════════════════════════════════════════════════════════ */
.revs{display:grid;gap:1.25rem;grid-template-columns:1fr}
@media (min-width:780px){.revs{grid-template-columns:repeat(3,1fr)}}
/* Korta er ulikt lange fordi omtalene er det. Kolonne med «margin-top:auto»
   på sitatlinja dyttar namnet til botnen, så stjernene ligg på éi linje øvst
   og namna på éi linje nedst, uansett kor lang teksten er. Skiljestreken
   gjer at kvar rad blir lesen som ei rad. */
.rev{background:#fff;border:1px solid var(--line);border-radius:var(--r-card);
  padding:1.5rem;display:flex;flex-direction:column}
.rev__stars{display:flex;gap:.125rem;margin-bottom:.875rem}
.rev__stars svg{width:17px;height:17px;color:var(--gold)}
.rev blockquote{margin:0 0 1.25rem;font-size:.9375rem;line-height:1.65;color:var(--ink-2)}
.rev cite{font-style:normal;font-size:.875rem;font-weight:700;color:var(--ink);
  margin-top:auto;padding-top:1rem;border-top:1px solid var(--line)}
.slot{border:1.5px dashed var(--line-ui);border-radius:var(--r-card);padding:2.25rem 1.75rem;
  background:#fff;text-align:center;max-width:64ch;margin-inline:auto}
.slot svg{display:block;margin:0 auto .75rem;width:30px;height:30px;color:var(--orange)}
.slot h3{font-size:1.0625rem;margin-bottom:.5rem}
.slot h3:last-child{margin-bottom:0}
.slot p{font-size:.9375rem;line-height:1.6;color:var(--ink-2)}

/* ══ avsluttende CTA: mørkt kort i container, ikke full bredde ═══════════ */
.endcta{position:relative;overflow:clip;border-radius:var(--r-card);background:var(--dark);isolation:isolate}
.endcta__media{position:absolute;inset:0;z-index:0}
.endcta__media img{width:100%;height:100%;object-fit:cover;opacity:.55}
.endcta__media::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(24,24,24,.95) 0%,rgba(24,24,24,.86) 100%)}
@media (min-width:900px){.endcta__media::after{
  background:linear-gradient(90deg,#181818 0%,rgba(24,24,24,.9) 30%,rgba(24,24,24,.34) 46%,rgba(24,24,24,.5) 58%,rgba(24,24,24,.93) 71%,#181818 100%)}}
.endcta__in{position:relative;z-index:1;display:grid;gap:1.75rem;padding:1.875rem 1.5rem}
@media (min-width:1000px){.endcta__in{grid-template-columns:minmax(430px,1fr) minmax(0,auto);align-items:center;
  gap:2.5rem;padding:2.5rem}}
.endcta__copy{max-width:none}
.endcta__copy .h2{max-width:16ch}
.endcta__copy p{max-width:38ch}
.endcta__copy .h2{margin-bottom:.5rem}
.endcta__copy p{font-size:.9375rem;line-height:1.6;margin-bottom:1.375rem}
.endcta__btns{display:flex;flex-wrap:wrap;gap:.75rem}
.endcta__trust{display:grid;gap:1.125rem;grid-template-columns:1fr}
@media (min-width:600px){.endcta__trust{grid-template-columns:repeat(3,1fr);gap:0}}
.endcta__trust div{padding-inline:0}
@media (min-width:600px){
  .endcta__trust div{padding-inline:1.25rem}
  .endcta__trust div:first-child{padding-left:0}
  .endcta__trust div+div{border-left:1px solid rgba(255,255,255,.16)}
}
.endcta__trust svg{width:24px;height:24px;color:var(--orange);margin-bottom:.4375rem}
.endcta__trust b{display:block;font-size:.9375rem;color:#fff;margin-bottom:.1rem;font-weight:700}
.endcta__trust span{display:block;font-size:.8125rem;color:#9A9A9A;line-height:1.45}

/* ── spørsmål og svar ──────────────────────────────────────────────────── */
.faq{border-top:1px solid var(--line);max-width:52rem}
.faq details{border-bottom:1px solid var(--line);background:#fff}
.faq summary{display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:1.125rem 1.25rem;font-size:1rem;font-weight:600;color:var(--ink);cursor:pointer;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary svg{width:20px;height:20px;color:var(--ink-3);flex:none;transition:transform .2s ease}
.faq details[open] summary svg{transform:rotate(180deg)}
.faq__a{padding:0 1.25rem 1.25rem;font-size:.9375rem;line-height:1.65;color:var(--ink-2);max-width:70ch}
.faq__a a{color:var(--orange-ink);font-weight:600}

/* ══ POLISH ═══════════════════════════════════════════════════════════════
   Står sist, så den vinn over basisreglane over. Ingenting her endrar
   layout eller tekst, berre korleis flatene oppfører seg. */

/* ── mjuke sideskift ────────────────────────────────────────
   View Transitions på tvers av dokument. Nettlesaren tonar sjølv den gamle
   sida ut og den nye inn, i staden for det kvite glimtet ei vanleg
   navigering gir. Det gjeld ALLE lenker på nettstaden, ikkje berre
   språkbytet, og det kostar ingen JavaScript.

   Nettlesarar utan støtte hoppar over heile blokka og navigerer som før.
   Sida fungerer akkurat likt, ho er berre ikkje like mjuk. */
@view-transition{navigation:auto}

/* Nav, fast CTA-linje og footer skal IKKJE tone. Dei ser like ut på begge
   sidene, og eit eige namn gjer at nettlesaren held dei i ro medan resten
   skiftar. Utan dette blinkar menyen ved kvart klikk. */
.nav{view-transition-name:nav}
.foot{view-transition-name:foot}
.ctabar{view-transition-name:ctabar}
::view-transition-group(nav),
::view-transition-group(foot),
::view-transition-group(ctabar){animation-duration:0s}

/* Sjølve kryssfadinga. 220 ms er nok til å bli merka, kort nok til at
   den som klikkar fort ikkje ventar på noko. */
::view-transition-old(root){animation:vt-ut .16s cubic-bezier(.4,0,1,1) both}
::view-transition-new(root){animation:vt-inn .22s cubic-bezier(0,0,.2,1) both}
@keyframes vt-ut{to{opacity:0}}
@keyframes vt-inn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* Språkvelgeren får med vilje IKKJE eit eige namn. Han ligg inne i .nav, som
   alt står stille gjennom skiftet, og eit namn til ville løfta han ut av det
   snapshotet og late han svive for seg sjølv. */

@media (prefers-reduced-motion:reduce){
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*){animation:none !important}
}

/* ── klikkflater på berøringsskjerm ─────────────────────────
   Målt på ekte sider: språkpilla var 25 px høg og brødsmulelenkene 18 px.
   WCAG 2.5.8 krev 24 px, så det var så vidt innanfor, men ein tommel er
   ikkje ein musepeikar. Under gjeld berre for peikarar utan presisjon, så
   oppsettet på skjerm med mus står urørt.

   Trikset med negativ margin gjer flata større UTAN å flytte noko: lenka
   veks i alle retningar og trekkjer seg like mykje inn igjen. */
@media (pointer:coarse){
  /* Same trikset som på .crumb rett under, men på begge aksar: lenka veks til
     46 px og trekkjer seg like mykje inn igjen, så flata blir stor utan at
     pilla veks. Utan margin-inline blei paret 24 px breiare og glisent, og
     utan margin-block blei pilla 45 px høg og like tung som Meny-knappen ved
     sida av. Målt før: 40,3 x 39,2 px, altså under 44 px-kravet. */
  .nav__lang a,.nav__lang span,
  .nav__panel .nav__lang-m a,.nav__panel .nav__lang-m b{
    padding:1.0625rem .875rem;margin-block:-.625rem;margin-inline:-.375rem}
  .crumb a{padding-block:.7rem;margin-block:-.7rem}
  .foot li a,.foot__legal a{padding-block:.35rem;margin-block:-.35rem;display:inline-block}
  .foot__social a{width:44px;height:44px}
}
/* Lenker som står midt i ei setning er med vilje ikkje rørte. WCAG 2.5.8
   gjer uttrykkeleg unntak for dei, og å blåse dei opp ville laga hol i
   linjeavstanden i staden for å hjelpe nokon. */

/* ── spørsmåla opnar seg i staden for å sprette ──────────────
   <details> har alltid hoppa rett frå lukka til open. interpolate-size gjer
   at «auto» kan animerast, og allow-discrete held elementet i DOM-en medan
   det lukkar seg. Nettlesarar utan begge deler oppfører seg som før: like
   raskt, berre utan mjukleiken. Ingen JavaScript. */
@media (prefers-reduced-motion:no-preference){
  :root{interpolate-size:allow-keywords}
  .faq details::details-content{
    block-size:0;overflow:clip;
    transition:block-size .28s cubic-bezier(.22,1,.36,1),content-visibility .28s allow-discrete;
  }
  .faq details[open]::details-content{block-size:auto}
}

/* ── knappar ────────────────────────────────────────────────
   Primærknappen får djupn og eit lite løft. Skuggen er oransje-tona,
   ikkje svart, så den ser ut som lys frå knappen og ikkje som skit. */
.btn{
  transition:background .2s ease,border-color .2s ease,transform .2s cubic-bezier(.22,1,.36,1),
             box-shadow .2s ease;
  box-shadow:0 1px 2px rgba(24,24,24,.12);
}
.btn:not(.btn--ghost):not(.btn--outline){
  box-shadow:0 2px 6px rgba(193,86,32,.26),0 8px 20px -8px rgba(193,86,32,.42)}
.btn:not(.btn--ghost):not(.btn--outline):hover{
  transform:translateY(-2px);
  box-shadow:0 4px 10px rgba(164,73,27,.3),0 14px 30px -10px rgba(164,73,27,.5)}
.btn--ghost:hover,.btn--outline:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(1px);box-shadow:0 1px 3px rgba(24,24,24,.2)}

/* Her låg ein pulserande ring på hovudknappen i heroen. Den er teken bort:
   ein knapp som pulsar av seg sjølv drar blikket kvar gong sida blir lasta,
   og på eit nettstad der kvar side har ein slik knapp blir det mas. Knappen
   skil seg alt ut på farge, storleik og skugge. */

/* ── kort ────────────────────────────────────────────────────
   Same løft overalt, så heile sida føles som eitt system. */
.senter,.pinfo__c--link,.card,.plan,.quick__c,.news__c,.pt-c,.staff__c{
  transition:transform .22s cubic-bezier(.22,1,.36,1),box-shadow .22s ease,border-color .22s ease}
.senter:hover,.pinfo__c--link:hover,.news__c:hover{
  transform:translateY(-3px);box-shadow:0 14px 32px -14px rgba(24,24,24,.3)}
.card:hover,.quick__c:hover{transform:translateY(-2px);box-shadow:0 10px 26px -14px rgba(24,24,24,.28)}
.senter{overflow:hidden}
.senter img{transition:transform .5s cubic-bezier(.22,1,.36,1)}
.senter:hover img{transform:scale(1.045)}
.senter__go{transition:gap .2s ease}
.senter:hover .senter__go{gap:.75rem}

/* ── fokus ───────────────────────────────────────────────────
   Éin tydeleg ring overalt, med litt luft rundt. */
:where(a,button,summary,input,select,textarea):focus-visible{
  outline:3px solid var(--orange);outline-offset:3px;border-radius:6px}

/* Ein scroll-driven «stig fram»-animasjon (animation-timeline:view()) sto
   her ei stund. Den er teken bort med vilje: i alt som ikkje rullar, altså
   utskrift, PDF og skjermbilete av heile sida, står elementa igjen på
   opacity 0 og sida blir blank. Ei side som kan bli usynleg er verre enn ei
   side som manglar ein effekt. Rørsla ligg no i hover og fokus i staden. */

/* ── fast CTA-linje på mobil ────────────────────────────────
   Berre under 900 px, altså der nav-knappen «Bli medlem» er gøymd
   bak menyen. Body får like mykje botnpolstring som linja er høg. */
.ctabar{display:none}
@media (max-width:899px){
  body{padding-bottom:calc(70px + env(safe-area-inset-bottom,0px))}
  .ctabar{
    display:flex;align-items:center;justify-content:space-between;gap:1rem;
    /* z-index 40, ikkje 60. .nav er sticky med z-index 50 og lagar si eiga
       stablingskontekst, så linja her teikna seg OVER den opne menyen. Målt på
       390 x 844: panelet gjekk frå 115 til 816, linja byrja på 779, og
       elementFromPoint midt på NO/EN-pilla returnerte div.ctabar. Å heve
       z-index på panelet hjelper ikkje, det er prøvd, for panelet er fanga i
       nav-en si kontekst. */
    position:fixed;left:0;right:0;bottom:0;z-index:40;
    background:rgba(24,24,24,.97);border-top:1px solid var(--line-dark);
    /* HØGRE SIDA VIK FOR CHATBOTEN. Boblen frå Devos sit nede til høgre med
       z-index 2147483647, altså det høgaste eit heiltal kan vere, og ho ligg
       inne i ein shadow DOM på eit element utan id eller klasse. Ho kan
       korkje flyttast eller leggjast under noko utanfrå. Då må våre eigne
       faste linjer vike i staden. Målt på 390 x 844: boblen er 80 x 80 i
       hjørnet, så 5.5rem gjev henne plass med litt luft. */
    padding:.7rem calc(var(--pad) + 5.5rem) calc(.7rem + env(safe-area-inset-bottom,0px)) var(--pad);
    box-shadow:0 -8px 24px rgba(0,0,0,.35);
  }
  @supports (backdrop-filter:blur(8px)){
    .ctabar{background:rgba(24,24,24,.88);backdrop-filter:blur(10px)}
  }
  .ctabar__t{line-height:1.25;min-width:0}
  .ctabar__t b{display:block;color:#fff;font-size:1rem;font-weight:700}
  /* #9E9E9E, ikkje #9A9A9A. På bakgrunnen #333333 måler den gamle 4,49:1 og
     den nye 4,72:1, og AA-grensa for 12 px vanleg tekst er 4,5. Det var eit
     ekte brot på kvar einaste side, målt av build/contrast.mjs, og det låg
     berre 0,01 unna, altså nøyaktig den typen ein aldri ser med auget. */
  .ctabar__t span{display:block;color:#9E9E9E;font-size:.75rem;margin-top:.1rem}
  .ctabar .btn{flex:none;padding:.7rem 1.1rem}
}
@media print{.ctabar{display:none}}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;
    transition-duration:.01ms !important;scroll-behavior:auto !important}
  .btn:hover,.senter:hover,.qcard:hover,.lcard:hover{transform:none}
}





/* PANEL-CSS-START */
/* Pila på summary peikar ikkje lenger nedover mot noko som brettar seg ut,
   for ingenting brettar seg ut. Han peikar mot høgre, som ei lenke vidare. */
.pt-c summary svg{transform:rotate(-90deg)}
.pt-c details[open] summary svg{transform:rotate(-90deg)}
.pt-c summary{cursor:pointer}
.pt-c summary:hover{color:var(--orange-ink)}

.ptp{border:0;padding:0;background:none;max-width:100vw;max-height:100dvh;
  width:100%;height:100%;overflow:hidden}
.ptp::backdrop{background:rgba(10,10,10,.72)}
.ptp__in{background:#fff;border-radius:var(--r-card);max-width:44rem;
  margin:auto;padding:2rem 1.75rem 2.25rem;max-height:86dvh;overflow-y:auto}
.ptp__n{font-size:1.375rem;font-weight:800;letter-spacing:-.015em;color:var(--ink)}
.ptp__r{display:inline-block;margin-top:.5rem;padding:.25rem .625rem;border-radius:999px;
  background:#FDEDE4;color:var(--orange-ink);font-size:.8125rem;font-weight:700}
.ptp__b{margin-top:1.25rem;font-size:.9375rem;line-height:1.65;color:var(--ink-2)}
.ptp__b p{margin-bottom:.75rem}
.ptp__b h4{margin:1.5rem 0 .5rem;font-size:.8125rem;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;color:var(--ink)}
.ptp__b ul{margin:0 0 .5rem 1.125rem}
.ptp__b li{list-style:disc;margin-bottom:.3125rem}
/* Lukkeknappen må lesast på TO ulike bakgrunnar.
   Han ligg fast øvst til høgre i sjølve dialogen, ikkje i det kvite panelet,
   og kva han hamnar oppå kjem an på breidda:
     frå 704 px og opp er panelet smalare enn vindauget, så knappen står på
     den mørke bakgrunnen bak
     under 704 px fyller panelet heile breidda, og då står knappen OPPÅ kvitt
   Han var kvit med 14 prosent kvit fyll, altså usynleg på kvitt. På telefon
   såg ein berre den oransje fokusringen, og kunden melde at krysset mangla.
   Målt: knappen på 16,374 låg heilt inni det kvite panelet 0,0 til 390,726.
   Mørk fyll med lys ring les på begge: mørk sirkel mot kvitt, lys omriss mot
   mørkt. */
.ptp__x{position:absolute;top:1rem;right:1rem;width:44px;height:44px;z-index:2;
  display:grid;place-items:center;cursor:pointer;color:#fff;
  background:rgba(24,24,24,.80);border:1.5px solid rgba(255,255,255,.6);border-radius:999px}
.ptp__x:hover{background:rgba(24,24,24,.94)}
/* Namnet skal ikkje kunne renne inn under knappen. */
.ptp__n{padding-right:3.25rem}
.ptp__x:focus-visible{outline:3px solid var(--orange);outline-offset:2px}
.ptp__x svg{width:22px;height:22px}
@media (min-width:700px){
  .ptp__in{padding:2.25rem 2.5rem 2.5rem}
}
/* PORTRETTET I PANELET, 09.08.2026. Kunden: «this is still way to big».
   Fyrste forsøket sette storleiken på .pt-c__b .pt-c__foto, altså på
   <details>-varianten, og den regelen gjeld ikkje her: panelet flyttar
   innhaldet inn i .ptp og har si eiga CSS. Biletet stod difor framleis like
   breitt som panelet, 44rem, og skuva erfaring og utdanning under folden.
   Same storleik som i den andre varianten: 112 px, flytande til venstre, så
   teksten legg seg rundt. Ansiktet såg du alt på kortet du klikka på. */
.ptp .pt-c__foto{max-width:7rem;float:left;margin:0 .875rem .5rem 0;
  border-radius:10px;shape-outside:inset(0 round 10px)}
.ptp .pt-c__foto img{border-radius:10px}
/* Erfaring og utdanning startar på eiga linje i staden for å bryte rundt. */
.ptp h4{clear:left}
/* PANEL-CSS-SLUTT */

/* SENTERVAL-CSS-START */
.sval{border:0;padding:0;background:none;max-width:100vw;max-height:100dvh;
  width:100%;height:100%;overflow:hidden}
.sval::backdrop{background:rgba(10,10,10,.72)}
.sval__in{position:relative;background:#fff;border-radius:var(--r-card);
  max-width:29rem;margin:auto;padding:2rem 1.75rem 2.25rem;max-height:86dvh;overflow-y:auto}
.sval__h{font-size:1.375rem;font-weight:800;letter-spacing:-.015em;color:var(--ink);
  padding-right:3.25rem}
.sval__l{margin-top:.5rem;font-size:.9375rem;line-height:1.6;color:var(--ink-2)}
.sval__liste{margin-top:1.5rem;display:grid;gap:.625rem}
.sval__liste a{display:flex;flex-direction:column;gap:.1875rem;
  padding:.9375rem 1.125rem;border:1px solid var(--line);border-radius:var(--r-card);
  text-decoration:none;background:#fff;
  transition:border-color .15s ease,background .15s ease}
.sval__liste a:hover,.sval__liste a:focus-visible{border-color:var(--orange);background:var(--cream)}
.sval__n{font-size:1rem;font-weight:700;color:var(--ink)}
.sval__a{font-size:.8125rem;color:var(--ink-3)}
/* Same grunn som i trenarpanelet: knappen kan hamne oppå kvitt, så han må
   vere mørk med lys ring for å lesast uansett breidd. */
.sval__x{position:absolute;top:1rem;right:1rem;width:44px;height:44px;z-index:2;
  display:grid;place-items:center;cursor:pointer;color:#fff;
  background:rgba(24,24,24,.80);border:1.5px solid rgba(255,255,255,.6);border-radius:999px}
.sval__x:hover{background:rgba(24,24,24,.94)}
.sval__x:focus-visible{outline:3px solid var(--orange);outline-offset:2px}
.sval__x svg{width:22px;height:22px}
/* SENTERVAL-CSS-SLUTT */


/* ══════════════════════════════════════════════════════════════════════════
   HOVEDSIDE — komponenter som bare finnes her.
   Alle tokens, nav, knapper, footer og skrift arves fra sentersiden.
   Bygget etter mockups/main-page-2026-updated.png
   ══════════════════════════════════════════════════════════════════════════ */

/* ── kampanjemerke over overskriften ───────────────────────────────────── */
.kbadge{display:inline-flex;align-items:center;gap:.5rem;background:#4A1600;
  border:1px solid #7A2600;color:#FFB58A;border-radius:var(--r-btn);
  padding:.5rem .875rem;font-size:.8125rem;font-weight:700;margin-bottom:1.25rem}
.kbadge svg{width:16px;height:16px;flex:none;color:var(--orange)}

/* ── hero ──────────────────────────────────────────────────────────────── */
.hero__price{display:block;font-size:clamp(2.75rem,1rem + 5.2vw,4.75rem);line-height:.95;
  letter-spacing:-.035em;color:var(--orange)}
.hero .checks{margin-bottom:1.75rem}
.hero .checks li{color:var(--ink-inv-2);font-size:.9375rem}
.hero__fine{margin-top:.875rem}

/* ── sentervelger ──────────────────────────────────────────────────────── */
.pick{background:var(--card);border-radius:var(--r-card);padding:1.625rem 1.5rem;
  box-shadow:0 24px 60px rgba(0,0,0,.45)}
.pick__step{display:flex;align-items:center;gap:.625rem;margin-bottom:.875rem}
.pick__n{width:22px;height:22px;border-radius:50%;background:var(--orange-fill);color:#fff;
  display:grid;place-items:center;font-size:.75rem;font-weight:700;flex:none}
.pick__label{font-size:.9375rem;font-weight:600;color:var(--ink)}
/* tre i bredda: 4 sentre i dag blir 3+1, 6 sentre blir to jamne rader */
.pick__grid{display:grid;grid-template-columns:repeat(2,1fr);gap:.5rem;margin-bottom:1.5rem}
@media (min-width:420px){.pick__grid{grid-template-columns:repeat(3,1fr)}}
.pick__opt{position:relative}
.pick__opt input{position:absolute;opacity:0;width:1px;height:1px}
.pick__opt span{display:grid;place-items:center;text-align:center;padding:.75rem .5rem;
  border:1px solid var(--line-ui);border-radius:var(--r-btn);font-size:.9375rem;font-weight:600;
  color:var(--ink);cursor:pointer;background:#fff;min-height:46px;line-height:1.2}
.pick__opt span:hover{border-color:var(--ink);background:#FAFAFA}
.pick__opt input:checked + span{background:var(--orange-fill);border-color:var(--orange-fill);color:#fff}
.pick__opt input:focus-visible + span{outline:3px solid var(--orange);outline-offset:3px}
.pick__price{display:flex;align-items:baseline;gap:.625rem;flex-wrap:wrap;margin-bottom:1.25rem}
.pick__amount{font-size:2.625rem;font-weight:700;line-height:1;letter-spacing:-.035em;color:var(--orange)}
/* Eiga linje, alltid. «/ mnd med 12 mnd binding» er lengre enn
   «/ mnd til november» og braut til ei ny linje berre på Stord. Då var
   priskortet 34 px høgare der enn på dei tre andre, og kortet hoppa når du
   bytte senter. node build/korthogd.mjs måler det. */
/* flex-basis:100%, ikkje display:block. .pick__price er flex, og eit
   flex-element bryr seg ikkje om display:block. Fyrste forsøket endra
   ingenting: prisblokka var framleis 43 px på tre senter og 81 på Stord.
   Med full basis blir underteksten alltid si eiga linje, og begge tilstandar
   blir like høge. */
.pick__per{order:2;flex-basis:100%;margin-top:.25rem;font-size:.9375rem;color:var(--ink-2)}
/* order:1, så normalprisen står PÅ SAME LINJE som kampanjeprisen og ikkje
   blir skuva ned på ei tredje. Med per på full basis og was etter han i
   markupen hamna was på linje tre, og kortet blei 34 px høgare på dei tre
   kampanjesentera enn på Stord. */
/* Ingen margin-left:auto. Han skuva normalprisen heilt ut til høgre kant,
   og då las ein ikkje dei to tala som eit par: kr 49 stod åleine til venstre
   og kr 459 heilt for seg sjølv 150 px unna. Ein overstroken pris tyder
   berre noko ved sida av den nye. Gapet på .pick__price held dei fra hverandre. */
.pick__was{order:1;align-self:center;font-size:1rem;color:var(--ink-3);text-decoration:line-through}
/* Merknad når det valde senteret står utanfor kampanjen. Tom elles, så
   ho tek ingen plass. */
/* min-height, og INGEN :empty{display:none}. Merknaden finst berre på
   Stord, og med display:none forsvann heile linja på dei tre andre, så
   kortet blei 19 px kortare der. No står plassen att uansett. */
/* TO linjer reservert, ikkje éi. På 390 px bryt Stord-merknaden til to
   linjer, og med plass til berre éi sprang kortet 19 px der. */
.pick__note{font-size:.8125rem;line-height:1.45;color:var(--ink-3);margin-top:.5rem;
  min-height:2.9em}
/* Dei to knappane låg heilt inntil kvarandre, utan ein piksel imellom, og
   las difor som éin knapp med ei strek i. Dei er to ulike handlingar:
   medlemskap og drop-in. */
[data-pick-cta]{margin-top:.75rem}
[data-pick-dropin]{margin-top:.625rem}
.pick__links{display:grid;gap:.625rem;margin-top:1.125rem;font-size:.9375rem;text-align:center;color:var(--ink-2)}

/* ── lys tallrad med sosialt bevis ─────────────────────────────────────── */
.statbar{position:relative;z-index:3;margin-top:-2.25rem}
.statbar__in{background:#fff;border-radius:var(--r-card);box-shadow:0 10px 30px rgba(0,0,0,.10);
  display:grid;grid-template-columns:repeat(2,1fr);gap:0;overflow:hidden}
@media (min-width:700px){.statbar__in{grid-template-columns:repeat(3,1fr)}}
/* Femspalta gjeld berre når det FAKTISK er fem element. Kunden tok bort to av
   dei fem korta på /franchise/ 09.08.2026, og med regelen ubetinga stod dei
   tre som var att i eit femspalters rutenett: tre kort til venstre og to tomme
   ruter til høgre, med skiljestrekene hengande i lufta. :has() tel for oss, og
   då fell rada tilbake på trespalta frå 700 px, som er nøyaktig rett for tre. */
@media (min-width:1000px){.statbar__in:has(li:nth-child(5)){grid-template-columns:repeat(5,1fr)}}
/* NØYAKTIG FIRE. Same felle som femspalta over, berre eit tal lenger ned.
   Kunden tok «Åpent 24/7» ut av rada 09.08.2026, og då stod det fire igjen i
   eit trespalters rutenett: tre på øvste rad og «Etablert 2012» heilt åleine
   på den neste, med ei tom rute ved sida av seg og skiljestreken hengande.
   :has(li:nth-child(4)):not(:has(li:nth-child(5))) er sant berre når talet er
   fire. To spalter under 1000 px, fire over, og då går det opp begge stader.
   Legg merke til at reglane står ETTER 700 px-regelen med vilje: dei skal
   overstyre trespalta, og lik spesifisitet blir avgjort av rekkjefølgja. */
.statbar__in:has(li:nth-child(4)):not(:has(li:nth-child(5))){grid-template-columns:repeat(2,1fr)}
@media (min-width:1000px){
  .statbar__in:has(li:nth-child(4)):not(:has(li:nth-child(5))){grid-template-columns:repeat(4,1fr)}
  /* Med alt på éi linje er det ingen rad over og berre eitt element lengst
     til venstre. Border-reglane under er skrivne for to spalter, så dei må
     nullast her, elles teiknar dei streker midt i rada. */
  .statbar__in:has(li:nth-child(4)):not(:has(li:nth-child(5))) li{border-top:0}
  .statbar__in:has(li:nth-child(4)):not(:has(li:nth-child(5))) li:first-child{border-left:0}
  .statbar__in:has(li:nth-child(4)):not(:has(li:nth-child(5))) li:not(:first-child){border-left:1px solid var(--line)}
}
.statbar li{display:flex;align-items:center;gap:.6875rem;padding:1.0625rem 1rem;
  border-top:1px solid var(--line);border-left:1px solid var(--line)}
.statbar li:nth-child(-n+2){border-top:0}
.statbar li:nth-child(odd){border-left:0}
/* Fem element i TO spalter gjer at det siste blir ståande åleine til venstre
   med ei tom rute ved sida av seg. Det siste får difor heile breidda når
   talet er oddetal. :last-child:nth-child(odd) er sant nettopp då.

   MERK breidda på media-spørsmålet. Fyrste utgåva hadde ingen, og då gjaldt
   regelen òg frå 1000 px, der rutenettet har FEM spalter og alle fem får
   plass på éi linje. «grid-column:1 / -1» tvinga det femte til å spenne over
   alle fem, altså ned på ei eiga rad, og resultatet var fire element oppe og
   stjerna åleine under. Regelen som skulle fjerne eit hol laga eit større
   eit på desktop. Han høyrer berre heime der rutenettet faktisk er to breitt. */
@media (max-width:699px){
  .statbar li:last-child:nth-child(odd){grid-column:1 / -1}
}
@media (min-width:700px){
  .statbar li{border-top:1px solid var(--line);border-left:1px solid var(--line)}
  .statbar li:nth-child(-n+3){border-top:0}
  .statbar li:nth-child(odd){border-left:1px solid var(--line)}
  .statbar li:nth-child(3n+1){border-left:0}
}
@media (min-width:1000px){
  .statbar li{border-top:0}
  .statbar li:nth-child(n){border-left:1px solid var(--line)}
  .statbar li:first-child{border-left:0}
  .statbar li:nth-child(4){border-left:2px solid var(--line)}
}
.statbar svg{width:24px;height:24px;color:var(--orange);flex:none}
.statbar b{display:block;font-size:.9375rem;font-weight:700;color:var(--ink);line-height:1.25;letter-spacing:-.01em}
.statbar span{display:block;font-size:.75rem;color:var(--ink-2);line-height:1.4}

/* ── hvorfor ENERGY ────────────────────────────────────────────────────── */
.why{display:grid;gap:2rem;grid-template-columns:1fr}
@media (min-width:960px){.why{grid-template-columns:minmax(0,330px) minmax(0,1fr);gap:3rem}}
.why__cards{display:grid;gap:1.25rem;grid-template-columns:1fr}
@media (min-width:640px){.why__cards{grid-template-columns:repeat(3,1fr)}}
.card{background:var(--card-soft);border:1px solid var(--line);border-radius:var(--r-card);padding:1.75rem}
.icon-circle{width:60px;height:60px;border-radius:50%;background:var(--orange);
  display:grid;place-items:center;margin-bottom:1.125rem}
.icon-circle svg{width:26px;height:26px;color:#fff}
.why__cards h3{margin-bottom:.625rem}
.why__cards p{font-size:.9375rem;line-height:1.6;color:var(--ink-2)}

/* ── sjekkliste ────────────────────────────────────────────────────────── */
.checks{display:grid;gap:.6875rem}
.checks li{display:grid;grid-template-columns:18px 1fr;gap:.75rem;align-items:start;
  font-size:.9375rem;line-height:1.55;color:var(--ink-2)}
.checks svg{width:18px;height:18px;margin-top:.28em;color:var(--orange)}

/* ── bilde til venstre, tekst til høyre ────────────────────────────────── */
.about{display:grid;gap:2rem;grid-template-columns:1fr;align-items:center}
/* Splitten står ofte rett under ein tekstblokk INNE I same seksjonen, og då
   var det berre avsnittsmarginen på 16 px mellom dei. Alle andre blokkbyte i
   designet er 56 px eller meir, så biletet såg ut til å vere klistra på
   teksten over. Målt på /larvik/fasiliteter/ og /tonsberg/fasiliteter/.
   :not(:first-child) er heile poenget: er splitten det fyrste i seksjonen,
   eig seksjonen si eiga polstring avstanden, og ein margin her ville lagt
   seg oppå henne. */
.about:not(:first-child){margin-top:clamp(2.5rem,4vw,3.5rem)}
.about__img img{border-radius:var(--r-card);width:100%;aspect-ratio:16/10;object-fit:cover;display:block}
@media (min-width:960px){
  /* «align-items:stretch» er heile poenget her. Med «center» arva frå regelen
     over blir biletruta berre så høg som «min-height», altså 416 px, medan
     tekstspalta er 507. Då står fullbreidde-biletet som eit band midt i lufta
     og flukter korkje med toppen eller botnen av teksten. Det var det som såg
     rart ut. «height:100%» på <img> gjorde ingenting, fordi forelderen sjølv
     hadde auto høgde. Tekstspalta blir framleis midtstilt, av si eiga regel. */
  .about{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:3.5rem;align-items:stretch}
  .about > :not(.about__img){align-self:center}
  /* Ruta blir strekt av rutenettet, biletet blir lagt oppå henne. «height:100%»
     åleine heldt ikkje: forelderen har rekna høgde, ikkje oppgitt, så prosenten
     fall attende til auto og «min-height» sette fasiten til 416 px kvar gong.
     Med absolutt plassering er ruta fasiten og biletet fyller henne. «min-height»
     må då stå på ruta, ikkje på <img>, elles har rada ingenting å måle seg mot. */
  .about__img{margin-left:calc(50% - 50vw);width:calc(100% + 50vw - 50%);
    position:relative;min-height:26rem}
  .about__img img{position:absolute;inset:0;width:100%;height:100%;
    border-radius:0 var(--r-card) var(--r-card) 0;aspect-ratio:auto}
}
/* Bilete der hovudet til nokon ligg høgt i ramma.
   .about__img er strekt til høgda av tekstspalta, så ruta er 2,3 til 2,8 i
   sideforhold medan fotoa er 1,5 til 1,6. object-fit:cover må då kutte
   mykje vertikalt, og med standard object-position kuttar han like mykje
   oppe som nede. Det tok issen av Olja på /personlig-trener/.
   Ingen kjeldeutsnitt kan fikse dette, fordi rutehøgda følgjer teksten og
   varierer frå side til side. Løysinga høyrer heime i CSS. */
.bilde--topp{object-position:center 22% !important}

/* ── splitt med eit DOKUMENT i staden for eit foto ─────────────────────────
   Sjå kommentaren over split() i build/parts.mjs. Kort: eit A4-ark vist som
   fullbreidde-foto blir uskarpt fordi kjelda aldri kan bli brei nok, og
   ulesbart uansett. Her ligg arket på ei flate i si eigen storleik.
   300 px brei gjer at ei kjelde på 617 px dekkjer DPR 2 med margin. */
.about--dok .about__img{background:var(--card-soft);border-radius:var(--r-card);
  display:grid;place-items:center;padding:clamp(1.5rem,4vw,2.5rem);position:static;
  margin-left:0;width:auto;min-height:0}
.about--dok .about__img img{position:static;width:100%;max-width:300px;height:auto;
  aspect-ratio:617/852;object-fit:contain;border-radius:2px;
  border:1px solid var(--line);box-shadow:0 10px 30px rgba(24,24,24,.16)}
@media (min-width:960px){
  /* Overstyrer fullbreidde-regelen over. Utan dette ville ruta framleis
     blø ut av containeren, og arket ville stått og flyte ute i venstre marg. */
  .about--dok .about__img{margin-left:0;width:auto;position:static;min-height:0}
  .about--dok .about__img img{position:static;width:100%;height:auto;
    border-radius:2px;aspect-ratio:617/852}
}

/* ── splitt med eit PRODUKTBILETE i staden for eit foto ────────────────────
   Kunden sitt Membro-bilete er to mobiltelefonar på gjennomsiktig botn.
   Standardruta strekkjer biletet til høgda av tekstspalta og klipper med
   object-fit:cover. Det er greitt på eit romfoto, der utsnittet uansett berre
   er eit utsnitt, men eit produkt som er skore av i toppen og botnen ser ut
   som ein feil. Telefonane mangla begge endar på /inngang/.

   Her ligg biletet heilt, i si eigen storleik, midtstilt i spalta. Ingen
   fullbreidde, inga runding: kanten er ikkje synleg, for botnen i fila er
   flata ut mot --light, same tone som section--light. Difor treng pic() heller
   ikkje eit PNG-unntak for gjennomsikt. Utsnittet er dokumentert der biletet
   blir kalla, i build/paafyll.mjs under 'inngang'. */
.about--fri .about__img{position:static;margin-left:0;width:auto;min-height:0;
  display:grid;place-items:center}
.about--fri .about__img img{position:static;width:100%;max-width:480px;height:auto;
  aspect-ratio:auto;object-fit:contain;border-radius:0}
@media (min-width:960px){
  /* Same grunn som under .about--dok: utan dette står fullbreidde-regelen
     over ved lag, og biletet blør ut i venstre marg. */
  /* Venstrestilt, ikkje midtstilt. Biletruta er breiare enn max-width, og
     midtstilt hamna telefonane 44 px inn frå venstrekanten av wrap, altså ute
     av flukt med overskrifta over og korta under. Alt anna i innhaldet startar
     på same loddrette linje, og då skal dette gjere det òg. På mobil er ruta
     smalare enn 480 px, så der er midtstilling framleis rett. */
  .about--fri .about__img{margin-left:0;width:auto;position:static;min-height:0;
    align-self:center;justify-items:start}
  .about--fri .about__img img{position:static;width:100%;height:auto;
    aspect-ratio:auto;border-radius:0}
}

/* ── omtaler ───────────────────────────────────────────────────────────── */
.revs{display:grid;gap:1.25rem;grid-template-columns:1fr}
@media (min-width:780px){.revs{grid-template-columns:repeat(3,1fr)}}
/* Korta er ulikt lange fordi omtalene er det. Kolonne med «margin-top:auto»
   på sitatlinja dyttar namnet til botnen, så stjernene ligg på éi linje øvst
   og namna på éi linje nedst, uansett kor lang teksten er. */
.rev{background:var(--card-soft);border:1px solid var(--line);border-radius:var(--r-card);
  padding:1.75rem;display:flex;flex-direction:column}
.rev__stars{display:flex;gap:.125rem;margin-bottom:.875rem}
.rev__stars svg{width:18px;height:18px;color:var(--gold)}
.rev blockquote{margin:0 0 1.25rem;font-size:.9375rem;line-height:1.65;color:var(--ink-2)}
.rev cite{font-style:normal;font-size:.875rem;font-weight:700;color:var(--ink);
  margin-top:auto;padding-top:1rem;border-top:1px solid var(--line)}
.slot{border:1.5px dashed var(--line-ui);border-radius:var(--r-card);padding:2.25rem 1.75rem;
  background:#fff;text-align:center;max-width:64ch;margin-inline:auto}
.slot svg{display:block;margin:0 auto .75rem;width:30px;height:30px;color:var(--orange)}
.slot h3{font-size:1.0625rem;margin-bottom:.5rem}
.slot h3:last-child{margin-bottom:0}
.slot p{font-size:.9375rem;line-height:1.6;color:var(--ink-2)}

/* ── mørkt band med foto ───────────────────────────────────────────────── */
.band{position:relative;background:var(--black);overflow:clip;isolation:isolate}
.band__media{position:absolute;inset:0;z-index:0}
.band__media picture{display:block;width:100%;height:100%}
.band__media img{width:100%;height:100%;object-fit:cover;opacity:.6}
.band__media::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(24,24,24,.92),rgba(24,24,24,.78))}
@media (min-width:900px){.band__media::after{
  background:linear-gradient(90deg,#181818 0%,rgba(24,24,24,.9) 34%,rgba(24,24,24,.4) 68%,rgba(24,24,24,.55) 100%)}}
.band__in{position:relative;z-index:1;padding-block:var(--sec)}
.band__copy{max-width:44ch}
.band .h2{margin-bottom:.875rem}

/* ── ENERGY START ──────────────────────────────────────────────────────── */
.start{background:var(--card-soft);border:1px solid var(--line);border-radius:var(--r-card);
  overflow:clip;display:grid;grid-template-columns:1fr}
@media (min-width:1000px){.start{grid-template-columns:minmax(0,.82fr) minmax(0,1.3fr) minmax(0,.78fr);align-items:center}}
.start__copy{padding:2rem 1.75rem}
@media (min-width:1000px){.start__copy{padding:2.5rem}}
.start__copy .h2{margin-bottom:.375rem}
.start__sub{font-size:1.125rem;font-weight:600;color:var(--ink-2);line-height:1.4}
.start__items{display:grid;gap:1.25rem;grid-template-columns:1fr;padding:0 1.75rem 2rem}
@media (min-width:560px){.start__items{grid-template-columns:repeat(3,1fr)}}
@media (min-width:1000px){.start__items{padding:2.5rem 0}}
.start__items svg{width:30px;height:30px;color:var(--orange);margin-bottom:.625rem}
.start__items b{display:block;font-size:.9375rem;color:var(--ink);margin-bottom:.25rem}
.start__items p{font-size:.8125rem;line-height:1.5;color:var(--ink-2)}
.start__media{position:relative;min-height:14rem}
.start__media img{width:100%;height:100%;object-fit:cover;display:block}
.start__media .btn{position:absolute;right:1.25rem;bottom:1.25rem}
@media (min-width:1000px){.start__media{min-height:16rem;height:100%}}

/* ── nyheter og kampanjer ──────────────────────────────────────────────── */
.news{display:grid;gap:1.5rem;grid-template-columns:1fr}
@media (min-width:760px){.news{grid-template-columns:repeat(3,1fr)}}
.news__c{background:#fff;border:1px solid var(--line);border-radius:var(--r-card);
  overflow:clip;display:flex;flex-direction:column}
.news__img{position:relative}
.news__img img{width:100%;aspect-ratio:16/9;object-fit:cover;display:block}
.news__tag{position:absolute;top:.875rem;left:.875rem;background:var(--orange-fill);color:#fff;
  border-radius:6px;padding:.3125rem .625rem;font-size:.6875rem;font-weight:700;letter-spacing:.02em}
.news__body{padding:1.25rem 1.375rem 1.5rem;display:flex;flex-direction:column;flex:1}
.news__c h3{font-size:1.0625rem;margin-bottom:.5rem;letter-spacing:-.01em}
.news__c p{font-size:.9375rem;line-height:1.55;color:var(--ink-2);margin-bottom:1.125rem;flex:1}

/* ── spørsmål og svar ──────────────────────────────────────────────────── */
.faq{border-top:1px solid var(--line);max-width:52rem}
.faq details{border-bottom:1px solid var(--line);background:#fff}
.faq summary{display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:1.125rem 1.25rem;font-size:1rem;font-weight:600;color:var(--ink);cursor:pointer;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary svg{width:20px;height:20px;color:var(--ink-3);flex:none;transition:transform .2s ease}
.faq details[open] summary svg{transform:rotate(180deg)}
.faq__a{padding:0 1.25rem 1.25rem;font-size:.9375rem;line-height:1.65;color:var(--ink-2);max-width:70ch}
.faq__a a{color:var(--orange-ink);font-weight:600}

/* ── sosiale medier ────────────────────────────────────────────────────
      Ikonene er brand-merkene i hvitt på svart skive, slik utkastet viser.
      Gruppa er sentrert med hårstrek mellom, ikke spredt over full bredde. */
.social__rule{display:flex;align-items:center;gap:1.5rem;margin:0 0 2rem}
.social__rule::before,.social__rule::after{content:"";height:1px;flex:1}
.social__rule::before{background:linear-gradient(90deg,transparent 0%,var(--gold-fill) 42%,var(--gold-fill) 100%)}
.social__rule::after{background:linear-gradient(90deg,var(--gold-fill) 0%,var(--gold-fill) 58%,transparent 100%)}
.social__rule span{font-size:.75rem;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-2);white-space:nowrap}

.social{display:grid;gap:.25rem;grid-template-columns:1fr;list-style:none;justify-content:center}
@media (min-width:680px){.social{display:flex;flex-wrap:wrap;justify-content:center;gap:0}}
.social li{display:flex}
@media (min-width:680px){.social li + li{border-left:1px solid var(--line)}}
.social a{display:flex;align-items:center;gap:1rem;text-decoration:none;
  padding:.875rem 1rem;border-radius:var(--r-card);flex:1}
@media (min-width:680px){.social a{padding:.875rem 2.25rem}}
.social a:hover .social__i{background:var(--orange-fill)}
.social__i{width:52px;height:52px;border-radius:50%;background:var(--ink);
  display:grid;place-items:center;flex:none;transition:background .18s ease}
.social__i svg{width:28px;height:28px;color:#fff;stroke-width:2.3}
.social__t b{display:block;font-size:1.0625rem;font-weight:700;color:var(--ink);
  line-height:1.3;letter-spacing:-.01em}
.social__t span{display:block;font-size:.875rem;color:var(--ink-2);line-height:1.4}

/* ── det hvite velgerkortet ligger inni .on-dark, så tekstfargene der
      må settes tilbake, ellers arver de lys tekst på hvit bakgrunn ───── */
.on-dark .pick p,.on-dark .pick li{color:var(--ink-2)}
.on-dark .pick .pick__label{color:var(--ink)}
.on-dark .pick .ln{color:var(--orange-ink)}

/* ══════════════════════════════════════════════════════════════════════════
   UNDERSIDER — komponenter som brukes på de øvrige sidene.
   Ligger i samme stilark som hovedsiden, så alle sider deler ett system.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── aktivt menypunkt ──────────────────────────────────────────────────── */
.nav__links a.is-aktiv{color:var(--orange)}
.nav__links a.is-aktiv::after{transform:scaleX(1)}

/* ── kort som lenke ────────────────────────────────────────────────────── */
.pinfo__c--link{text-decoration:none;transition:border-color .16s ease,transform .16s ease}
.pinfo__c--link:hover{border-color:var(--orange);transform:translateY(-2px)}
.pinfo__c--link h3{color:var(--ink)}
.pinfo__c--link::after{content:"";display:none}

/* ── hero uten foto, til rene innholdssider ────────────────────────────── */
.hero--flat{background:var(--black)}
.hero--flat .hero__in{display:block;padding-block:clamp(2.5rem,5vw,4rem) clamp(2.75rem,5vw,4.25rem)}
.hero--flat .hero__copy{max-width:62ch}
@media (min-width:860px){
  .hero--flat .hero__in{grid-template-columns:1fr;display:block}
}

/* ── brødtekst på tekstsider ───────────────────────────────────────────── */
.prose{max-width:70ch}
.prose h2{font-size:1.375rem;line-height:1.3;letter-spacing:-.015em;margin:2.25rem 0 .75rem}
.prose h2:first-child{margin-top:0}
.prose h3{font-size:1.0625rem;margin:1.75rem 0 .5rem}
.prose p{font-size:1rem;line-height:1.7;color:var(--ink-2);margin-bottom:1rem}
.prose ul,.prose ol{margin:0 0 1.25rem 1.25rem;display:grid;gap:.5rem}
.prose li{font-size:1rem;line-height:1.65;color:var(--ink-2);list-style:disc}
.prose ol li{list-style:decimal}
.prose a{color:var(--orange-ink);font-weight:600}
.prose strong{color:var(--ink)}
/* Ordrett avtaletekst, /kjopsbetingelser/. Lang og nummerert, så punktene
   trenger mer luft enn en vanlig liste, og hver bolk får en strek over seg
   slik at nummereringen ikke ser ut til å fortsette fra bolken før. */
.avtale h2{padding-top:1.75rem;border-top:1px solid var(--line)}
.avtale ol{gap:1.125rem;margin-left:1.75rem}
.avtale ol li{padding-left:.25rem}
.prose table{width:100%;border-collapse:collapse;margin-bottom:1.5rem;font-size:.9375rem}
.prose th,.prose td{text-align:left;padding:.75rem 1rem;border-bottom:1px solid var(--line)}
.prose th{font-weight:700;color:var(--ink);background:#fff}
.prose td{color:var(--ink-2)}

/* ── personkort ────────────────────────────────────────────────────────── */
.staff{display:grid;gap:1.5rem;grid-template-columns:1fr}
@media (min-width:620px){.staff{grid-template-columns:repeat(2,1fr)}}
@media (min-width:980px){.staff{grid-template-columns:repeat(4,1fr)}}
.staff__c{background:#fff;border:1px solid var(--line);border-radius:var(--r-card);overflow:clip;
  display:flex;flex-direction:column}
.staff__c img{width:100%;aspect-ratio:4/5;object-fit:cover;object-position:center top;display:block;background:var(--dark)}
.staff__b{padding:1.25rem 1.375rem 1.5rem;flex:1;display:flex;flex-direction:column}
.staff__c h3{font-size:1.0625rem;margin-bottom:.15rem;letter-spacing:-.01em}
.staff__role{font-size:.875rem;font-weight:700;color:var(--orange-ink);margin-bottom:.75rem}
.staff__c p{font-size:.9375rem;line-height:1.55;color:var(--ink-2);flex:1}
.staff__c .ln{margin-top:1rem}

/* ── kontaktrutenett ───────────────────────────────────────────────────── */
.kontakt{display:grid;gap:1.25rem;grid-template-columns:1fr}
@media (min-width:720px){.kontakt{grid-template-columns:repeat(2,1fr)}}
.kontakt__c{background:#fff;border:1px solid var(--line);border-radius:var(--r-card);padding:1.75rem}
.kontakt__c h3{font-size:1.0625rem;margin-bottom:.75rem}
.kontakt__c p{font-size:.9375rem;line-height:1.7;color:var(--ink-2)}
.kontakt__c a{color:var(--orange-ink);font-weight:600;text-decoration:none}
.kontakt__c a:hover{text-decoration:underline}

/* ── nyhetsliste ───────────────────────────────────────────────────────── */
.artikler{display:grid;gap:1.75rem;grid-template-columns:1fr}
@media (min-width:760px){.artikler{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1060px){.artikler{grid-template-columns:repeat(3,1fr)}}
.art{background:#fff;border:1px solid var(--line);border-radius:var(--r-card);padding:1.25rem;
  display:flex;flex-direction:column}
.art time{font-size:.8125rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--orange-ink);margin-bottom:.625rem}
.art h3{font-size:1.0625rem;margin-bottom:.625rem;letter-spacing:-.01em}
.art p{font-size:.9375rem;line-height:1.65;color:var(--ink-2);flex:1;margin-bottom:1.125rem}

/* ── stor lenkeliste til senteroversikt ────────────────────────────────── */
.sentre{display:grid;gap:1.5rem;grid-template-columns:1fr}
@media (min-width:680px){.sentre{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1040px){.sentre{grid-template-columns:repeat(4,1fr)}}
.senter{background:#fff;border:1px solid var(--line);border-radius:var(--r-card);overflow:clip;
  display:flex;flex-direction:column;text-decoration:none;transition:border-color .16s ease,transform .16s ease}
.senter:hover{border-color:var(--orange);transform:translateY(-2px)}
.senter img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block}
.senter__b{padding:1.25rem 1.375rem 1.5rem;flex:1;display:flex;flex-direction:column}
.senter h3{font-size:1.1875rem;margin-bottom:.25rem;letter-spacing:-.015em}
.senter__adr{font-size:.875rem;color:var(--ink-3);margin-bottom:.875rem}
.senter ul{display:grid;gap:.375rem;margin-bottom:1rem;flex:1}
.senter li{display:grid;grid-template-columns:16px 1fr;gap:.5rem;align-items:start;
  font-size:.875rem;line-height:1.5;color:var(--ink-2)}
.senter li svg{width:16px;height:16px;margin-top:.25em;color:var(--orange)}
.senter__go{font-size:.9375rem;font-weight:700;color:var(--orange-ink);display:flex;align-items:center;gap:.375rem}
.senter__go svg{width:15px;height:15px}

/* ── tabellkort for priser ─────────────────────────────────────────────── */
/* overflow-x:auto, IKKJE clip. Med clip blei den siste kolonnen i
   pristabellane rett og slett kutta bort på mobil, utan at noko sa frå: prisen
   på årskort og PT-nivå 4 var uråd å lese på telefon. No kan tabellen rullast
   sidevegs inne i kortet, og resten av sida står i ro.
   overscroll-behavior-inline hindrar at rullinga smittar over på heile sida. */
.ptab{background:#fff;border:1px solid var(--line);border-radius:var(--r-card);
  overflow-x:auto;overscroll-behavior-inline:contain}
/* Min-breidda gjeld berre tabellar som FAKTISK har mange kolonnar. Sett på
   alle, skuva ho prisen ut av syne i tokolonnstabellen på /gruppetimer/, og
   tabellen såg tom ut ved fyrste augekast. :has() tel kolonnane for oss. */
/* Måltala frå build/tabellbreidd.mjs ved 390 px, ikkje runda oppover
   for sikkerheits skuld: fire kolonnar treng 378 til 444, fem treng 487.
   34rem, altså 544, var meir enn nokon av dei bad om, og kvar piksel over
   det er rulling utan grunn. Cellene har white-space:nowrap, så innhaldet
   kan ikkje klemmast saman uansett. */
.ptab table:has(th:nth-child(4)):not(:has(th:nth-child(5))){min-width:28rem}
.ptab table:has(th:nth-child(5)){min-width:31rem}
/* 20rem, ikkje 26. Målt med build/tabellbreidd.mjs: tabellen på
   /kroppsanalyse/ treng 320 px når innhaldet får bestemme, medan ruta på ein
   390 px telefon er 348. Med 26rem bad han om 416 og rulla sidevegs, slik at
   fyrste kolonnen, altså sjølve radnamnet, låg utanfor skjermen. Ein pristabell
   der du ser prisen men ikkje kva han gjeld, er verre enn ingen tabell.
   20rem er 320 px, akkurat det innhaldet krev, og framleis nok til at
   kolonnane ikkje klemmer seg. */
.ptab table:has(th:nth-child(3)):not(:has(th:nth-child(4))){min-width:20rem}
/* Trongare celler på telefon. Sparer 20 px per kolonne, som er skilnaden
   mellom å rulle og ikkje rulle for tabellane med fire og fem kolonnar. */
@media (max-width:520px){
  .ptab th,.ptab td{padding:.8125rem .625rem}
  .ptab table{font-size:.875rem}
}
/* Beløp skal ikkje brytast midt i, «kr» på éi linje og talet på neste. */
/* NOWRAP BERRE I PRISRUTENETT, ALTSÅ TABELLAR MED TRE ELLER FLEIRE
   KOLONNAR. Der er kvar celle utanom den fyrste eit beløp, og «kr 1 290» skal
   ikkje brytast mellom «kr» og talet.
   Regelen gjaldt før ALLE tabellar, og på /gavekort/ har den andre kolonnen
   heil brødtekst: «Én måned med binding, eller fire drop-in». Med nowrap blei
   den setninga éi ubrytande linje som pressa tabellen til 700 px og skuva
   beløpet ut av skjermen. Samstundes blei fyrste kolonnen så klemt at «kr 500»
   brotst til «kr» på éi linje og «500» på neste, altså akkurat det nowrap
   skulle hindre. */
.ptab table:has(th:nth-child(3)) td,
.ptab table:has(th:nth-child(3)) th{white-space:nowrap}
/* Same scoping som nowrap-regelen over, elles taper denne på
   spesifisitet. «.ptab table:has(th:nth-child(3)) th» er 0,2,2 medan
   «.ptab th:first-child» er 0,2,1, så fyrste kolonnen slutta å bryte og
   tabellen på /kroppsanalyse/ voks frå 320 til 374 px. */
.ptab td:first-child,.ptab th:first-child,
.ptab table:has(th:nth-child(3)) td:first-child,
.ptab table:has(th:nth-child(3)) th:first-child{white-space:normal}
/* Ei diskret hylle så det synest at det er meir å sjå. */
@media (max-width:760px){
  .ptab{background-image:linear-gradient(to right,#fff 30%,rgba(255,255,255,0)),
    linear-gradient(to left,#fff 30%,rgba(255,255,255,0)),
    linear-gradient(to right,rgba(24,24,24,.13),rgba(24,24,24,0)),
    linear-gradient(to left,rgba(24,24,24,.13),rgba(24,24,24,0));
    background-position:left center,right center,left center,right center;
    background-repeat:no-repeat;
    background-size:36px 100%,36px 100%,14px 100%,14px 100%;
    background-attachment:local,local,scroll,scroll}
}
.ptab table{width:100%;border-collapse:collapse;font-size:.9375rem}
.ptab th,.ptab td{text-align:left;padding:.9375rem 1.25rem;border-bottom:1px solid var(--line)}
.ptab tr:last-child td{border-bottom:0}
.ptab th{font-weight:700;color:var(--ink);background:var(--card-soft);font-size:.8125rem;
  letter-spacing:.04em;text-transform:uppercase}
.ptab td{color:var(--ink-2)}
.ptab td:last-child{text-align:right;font-weight:700;color:var(--ink)}
/* Siste kolonne er beløpet i prisrutenetta, men brødtekst i tokolonnstabellane.
   Difor same vilkåret her. */
.ptab table:has(th:nth-child(3)) td:last-child{white-space:nowrap}

.ptab td b{color:var(--ink)}

/* ── liten notisboks ───────────────────────────────────────────────────── */
.note{background:#FFF7F2;border:1px solid rgba(253,75,1,.28);border-radius:var(--r-card);
  padding:1.25rem 1.5rem;display:grid;grid-template-columns:22px 1fr;gap:.875rem;align-items:start}
.note svg{width:22px;height:22px;color:var(--orange);margin-top:.1rem}
.note p{font-size:.9375rem;line-height:1.6;color:var(--ink-2)}
.note b{color:var(--ink)}
/* Merknad med fleire avsnitt, sjå blokk() i build/paafyll.mjs. p har margin:0
   i nullstillinga, så avsnitta treng luft mellom seg her.

   REGELEN MÅ STÅ I DENNE FILA, ikkje i build/rot.html. Rot-fila har ein kopi
   av denne CSS-en i <style>, men build/rotutvid.mjs skriv henne ut på nytt
   ved kvart bygg, så ei handredigering der forsvinn i det ein byggjer. */
.note__tekst p + p{margin-top:.625rem}

/* ── stegliste ─────────────────────────────────────────────────────────── */
.steps{display:grid;gap:1.25rem;grid-template-columns:1fr;counter-reset:s}
@media (min-width:760px){.steps{grid-template-columns:repeat(3,1fr)}}
/* Fire steg skal ikkje bli tre pluss eitt einsamt. Med :has() blir dei to og
   to på nettbrett og fire i rad på brei skjerm. /fleksmedlemskap/ er den
   einaste sida med fire i dag. */
@media (min-width:760px){.steps:has(.step:nth-child(4)){grid-template-columns:repeat(2,1fr)}}
@media (min-width:1080px){.steps:has(.step:nth-child(4)){grid-template-columns:repeat(4,1fr)}}
/* Knappen nedst, same linje uansett kor lang teksten over er. */
.steps:has(.step > p:last-child > .btn) .step{display:flex;flex-direction:column}
.step > p:last-child:has(> .btn){margin-top:auto}
.step{background:#fff;border:1px solid var(--line);border-radius:var(--r-card);padding:1.75rem;position:relative}
.step::before{counter-increment:s;content:counter(s);position:absolute;top:-.75rem;left:1.5rem;
  width:30px;height:30px;border-radius:50%;background:var(--orange-fill);color:#fff;
  display:grid;place-items:center;font-size:.875rem;font-weight:700}
.step h3{font-size:1.0625rem;margin:.5rem 0 .5rem;letter-spacing:-.01em}
/* Bilete inne i eit steg, i dag berre nøkkelbrikka på /inngang/. <picture> er
   inline av natur, så utan display:block på begge ledda legg linjehøgda i
   avsnittet ei luft under biletet som ingen har bede om, og margin-bottom
   under blir umuleg å stille inn. */
.step p > picture{display:block}
.brikke{display:block;width:100%;height:auto;border-radius:10px;margin-bottom:.9rem}
.step p{font-size:.9375rem;line-height:1.6;color:var(--ink-2)}

/* ── personlige trenere ────────────────────────────────────────────────── */
.pt-grid{display:grid;gap:1.25rem;grid-template-columns:1fr}
@media (min-width:520px){.pt-grid{grid-template-columns:repeat(2,1fr)}}
@media (min-width:840px){.pt-grid{grid-template-columns:repeat(3,1fr)}}
@media (min-width:1080px){.pt-grid{grid-template-columns:repeat(4,1fr)}}
/* Polstringa ligg på innhaldet, ikkje på kortet: portrettet skal gå heilt ut
   i kanten, slik det gjer i referansen kunden sende. overflow:clip er det som
   held biletet innanfor hjørneradiusen. */
.pt-c{background:#fff;border:1px solid var(--line);border-radius:var(--r-card);
  padding:0;overflow:clip;display:flex;flex-direction:column}
.pt-c[hidden]{display:none}
/* PORTRETTET, 4:5, i full kortbreidd.
   Det var ein avatar på 84 px før, og grunnen står i build/ptbilder.sh: sju av
   seksten kjelder er berre 400 px breie, og eit stort kort ville stått uskarpt
   på nesten halve staben. Rutenettet er fire i bredda på 1 020 px, altså 240 px
   per kort, og 240 px treng 480 px ved DPR 2. Dei sju stoppar på 400 og hamnar
   på 1,67x. Det ser ein ikkje med auget, men det er verdt å vite: sender kunden
   nye portrett, blir dei sju skarpe utan at noko anna må endrast.
   4:5 er same format som kjeldene, så heile hovudet får plass. */
.pt-c__foto{display:block;aspect-ratio:4/5;background:var(--card-soft)}
.pt-c__foto picture,.pt-c__foto img{display:block;width:100%;height:100%;object-fit:cover}
/* På telefon står korta i éi spalte, og då er 4:5 av full skjermbreidd rundt
   480 px bilete. Med topplinja og den faste CTA-stripa i botnen blir det så vidt
   plass til namnet under, og du ser aldri eit heilt kort på ein gong.
   8:9 tek av 48 px utan at motivet endrar seg merkbart: portretta har luft over
   hovudet og under skuldrene, og object-fit:cover et av begge endane.
   Grensa er 519 px, same stad som .pt-grid går frå éi til to spalter.
   min-height:0 er ikkje pynt. .pt-c er ein kolonne-flexboks, så biletspanet er
   eit flexelement, og eit flexelement har min-height:auto, altså ei nedre grense
   lik innhaldet sitt. Innhaldet er eit 4:5-bilete, så grensa er nettopp den
   høgda vi prøver å ta bort: aspect-ratio blei rekna ut til 391 px og boksen
   blei ståande på 435 likevel. Målt, ikkje gjetta. */
@media (max-width:519px){.pt-c__foto{aspect-ratio:8/9;min-height:0}}
/* Den ene uten portrett. Initialer, ikke et hull. */
.pt-c__foto--tom{display:grid;place-items:center;font-size:2.75rem;font-weight:800;
  letter-spacing:-.02em;color:var(--orange-ink);background:#FDEDE4}
.pt-c__inn{padding:1.125rem 1.125rem 1.25rem;display:flex;flex-direction:column;flex:1}
.pt-c__n{font-size:1.0625rem;font-weight:700;color:var(--ink);letter-spacing:-.012em}
/* Rolla var ein pille. I referansen er ho oransje tekst rett under namnet, og
   det er roleg nok til at fire kort ved sida av kvarandre ikkje blir eit
   fargekaos. */
.pt-c__r{margin-top:.1875rem;font-size:.875rem;font-weight:700;color:var(--orange-ink)}
/* Skiljeteiknet ligg i CSS, ikkje i teksten. Står det i tekstnoden, blir
   «· Larvik» ein eigen ordboknøkkel som ingen har omsett, medan senternamnet
   åleine har sin eigen frå før. */
.pt-c__sen::before{content:"· "}
.pt-c__sen{color:var(--ink-3);font-weight:600}
.pt-c__av2{display:inline-block;margin-top:.25rem;padding:.1875rem .5rem;border-radius:999px;
  background:#EDEDED;color:var(--ink-2);font-size:.75rem;font-weight:700}
.pt-c__d{margin-top:.625rem;font-size:.875rem;line-height:1.6;color:var(--ink-2)}
/* Kvart fokusområde på si eiga linje. Sjå ptKort i build/parts.mjs: dei blir
   IKKJE slått saman til éi setning, verken med punktum eller komma. */
.pt-c__d span{display:block}
.pt-c__d span+span{margin-top:.1875rem}
.pt-c__tom{margin-top:.625rem;font-size:.875rem;line-height:1.6;color:var(--ink-3)}
/* margin-top:auto held «Les mer» nedst uansett kor lang teksten over er, så
   fire kort i ei rad får knappen på same linje. */
.pt-c details{margin-top:auto;padding-top:.875rem}
.pt-c summary{display:flex;align-items:center;gap:.5rem;font-size:.875rem;font-weight:700;
  color:var(--orange-ink);cursor:pointer;list-style:none}
.pt-c summary::-webkit-details-marker{display:none}
.pt-c summary svg{width:17px;height:17px;flex:none;transition:transform .2s ease}
.pt-c details[open] summary svg{transform:rotate(180deg)}
.pt-c__b{padding-top:.875rem;font-size:.875rem;line-height:1.6;color:var(--ink-2)}
/* Portrettet ein gong til, øvst i panelet. Kunden bad om det: «when you click
   les mer make their picture also pop up». På telefon er panelet eit eige
   vindauge over sida, og då er kortet med biletet ikkje synleg lenger. */
/* Biletet inne i «Les mer» er lite og flyt til venstre, frå 09.08.2026.
   Kunden: «make the PT picture way smaller so its a easier read». Det stod
   på 11rem, altså 176 px, over teksten, og skuva erfaring og utdanning så
   langt ned at panelet mest var bilete. Du har alt sett ansiktet på kortet
   over; her er det teksten du opna for. 7rem er 112 px, nok til å kjenne att personen
   utan å ta over panelet. Fyrste forsøket var 5rem, og kunden bad om «slightly
   bigger». Teksten legg seg rundt i staden for under. */
.pt-c__b .pt-c__foto{border-radius:10px;max-width:7rem;float:left;
  margin:0 .875rem .5rem 0;shape-outside:inset(0 round 10px)}
/* Erfaring og utdanning skal starte på eiga linje, ikkje bryte rundt biletet
   midt i ei overskrift. clear tek dei ut av flyten når dei kjem så langt. */
.pt-c__b h4{clear:left}
/* Senterfilteret over rutenettet. */
/* Sentervalet på /medlemskap/ deler utsjånad med trenerfilteret, fordi det
   gjer same jobben: eitt nedtrekk som avgrensar det du ser under. Blokkene
   ligg alle i HTML-en, som trenerkorta, så utan JavaScript står prisane for
   alle sentera framme. Det er rett svar på ei prisside, ikkje ei naudløysing. */
.medl-g + .medl-g{margin-top:clamp(2rem,4vw,3rem)}
.medl-g__t{font-size:.8125rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-2);margin-bottom:1rem}
.pt-filter{display:flex;align-items:center;gap:.75rem;flex-wrap:wrap;margin-bottom:1.75rem}
.pt-filter label{font-size:.875rem;font-weight:700;color:var(--ink-2)}
.pt-filter select{font:inherit;font-size:.9375rem;padding:.6875rem 2.25rem .6875rem 1rem;
  border:1px solid var(--line);border-radius:12px;background:#fff;color:var(--ink);
  cursor:pointer;appearance:none;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23555' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right .75rem center;background-size:18px}
.pt-filter select:focus-visible{outline:3px solid var(--orange);outline-offset:2px}
.pt-tom{margin-top:1.25rem;font-size:.9375rem;color:var(--ink-2)}
.pt-c__b p{margin-bottom:.75rem}
.pt-c__b h4{font-size:.8125rem;font-weight:700;color:var(--ink);letter-spacing:.03em;
  text-transform:uppercase;margin:.875rem 0 .375rem}
.pt-c__b ul{list-style:none;display:grid;gap:.3125rem}
.pt-c__b li{padding-left:.875rem;position:relative}
.pt-c__b li::before{content:"";position:absolute;left:0;top:.5rem;width:5px;height:5px;
  border-radius:50%;background:var(--orange)}
.pt-c__tom{margin-top:1rem;font-size:.875rem;line-height:1.6;color:var(--ink-3)}

/* ── lenkerad til de andre sidene om samme senter ──────────────────────── */
.lokalnav{display:flex;flex-wrap:wrap;gap:.625rem;margin-top:1.75rem;list-style:none}
.lokalnav a{display:inline-flex;align-items:center;gap:.4375rem;padding:.5625rem .9375rem;
  border:1px solid var(--line-ui);border-radius:999px;background:#fff;
  font-size:.875rem;font-weight:600;color:var(--ink);text-decoration:none}
.lokalnav a:hover{border-color:var(--orange);color:var(--orange-ink)}
.lokalnav a[aria-current]{background:var(--dark);border-color:var(--dark);color:#fff}
.lokalnav svg{width:16px;height:16px;color:var(--orange);flex:none}
.lokalnav a[aria-current] svg{color:var(--orange)}


/* ── Google-vurdering ──────────────────────────────────────────────────── */
.rating{display:flex;align-items:center;gap:1rem}
.rating__tall{font-size:2.5rem;font-weight:800;line-height:1;letter-spacing:-.03em;color:var(--ink)}
.rating__kilde{font-size:.8125rem;color:var(--ink-3);margin-top:.3125rem}
/* Delstjerner: to identiske rader oppå kvarandre, den fylte klipt til
   prosenten. 4,2 ser da ut som 4,2, ikkje som avrunda 4. */
.stjerner{position:relative;display:inline-block;line-height:0}
.stjerner__tom svg{color:#D9DCE1}
.stjerner__full{position:absolute;inset:0;overflow:hidden;white-space:nowrap}
.stjerner__full svg{color:var(--gold)}
.stjerner svg{width:20px;height:20px;flex:none}
/* width:max-content er heile poenget. Utan den er den gylne raden ein
   inline-flex som KRYMPER for å få plass i klippeboksen på 82 %, i staden
   for å renne over og bli klipt. Stjernene fekk då 18 px avstand mot 22 px
   i den grå raden under, og 4,1 rendra som gull, grå, halv, gull, grå.
   Det såg ut som ein tilfeldig feil i ikonet, ikkje som eit oppsettproblem. */
.stjerner__lag{display:inline-flex;gap:.125rem;width:max-content}

/* ── vurderingsstripe ────────────────────────────────────────────────────
   Talet, kvar det er henta frå, og vegen til kjelda, samla i eitt kvitt kort.
   Stripa er byte for byte lik på alle sentre med Google-profil. Det er ho som
   gjer at ei side med sitat og ei side utan les som same side i to utgåver,
   i staden for som éi ferdig og éi halvferdig. */
.vurd{background:#fff;border:1px solid var(--line);border-radius:var(--r-card);
  padding:1.25rem;display:grid;gap:1rem;max-width:48rem;margin-inline:auto}
/* justify-self, ikkje margin: i eit grid strekkjer <a> seg over heile sporet,
   og knappen blir like brei som kortet med teksten klemt midt inni. */
.vurd__ln{justify-self:start}
/* Talet til venstre, knappen til høgre, ingenting imellom. Kortet var før
   60rem breitt med eit forklarande avsnitt i midten. Avsnittet er borte, og
   då må breidda ned, elles står dei to att i kvar sin ende av eit tomt kort. */
@media (min-width:640px){
  .vurd{grid-template-columns:auto auto;justify-content:space-between;
    align-items:center;gap:1.75rem;padding:1.25rem 1.5rem}
  .vurd__ln{justify-self:end}
}
/* Omtalekorta står under stripa, ikkje ved sida av. .revs har inga toppmarg
   av seg sjølv, så ho blir gitt her, og berre der begge faktisk står saman. */
.vurd + .revs{margin-top:1.75rem}
/* Kjeldelinja under korta. Ho seier kor mange av totalen vi viser, så
   utvalet blir oppgitt i staden for skjult. Alle dei fem vi viser har fem
   stjerner, medan snittet er 4,2. */
.vurd__fot{margin-top:1.5rem;text-align:center;font-size:.8125rem;
  line-height:1.55;color:var(--ink-3)}

/* ── plass til ekstern widget, til dømes Instagram ─────────────────────── */
.embed{border:1.5px dashed var(--line-ui);border-radius:var(--r-card);padding:2rem 1.5rem;
  background:#fff;text-align:center;max-width:64ch;margin-inline:auto}
/* svg er display:block frå basisreglane, så text-align:center på .embed
   sentrerer han ikkje. Utan margin-inline:auto sto ikonet til venstre og
   overskrifta i midten. */
.embed svg{width:30px;height:30px;color:var(--orange);margin:0 auto .75rem}
.embed h3{font-size:1.0625rem;margin-bottom:.5rem}
.embed p{font-size:.9375rem;line-height:1.6;color:var(--ink-2)}

/* Senteret under namnet i ei omtale. På forsida står omtaler frå eitt
   senter under overskrifta «medlemmene våre», så attribusjonen må stå. */
.rev__sted{display:block;font-weight:400;font-size:.8125rem;color:var(--ink-3);margin-top:.15rem}


/* Fem omtaler i eit tre-kolonners rutenett gir 3 + 2, og den siste rada blir
   hengande til venstre med eit hol til høgre. Flex med same breidd per kort
   og «justify-content:center» sentrerer restraden i staden, så det ser
   tilsikta ut same kor mange omtaler det er. */
@media (min-width:780px){
  .revs{display:flex;flex-wrap:wrap;justify-content:center;gap:1.25rem}
  .revs > .rev{flex:0 1 calc(33.333% - .834rem);min-width:16rem}
}


/* ── film ───────────────────────────────────────────────────────────────
   16:9 uten padding-hack. aspect-ratio holder plassen mens iframen lastes,
   så ingenting hopper. youtube-nocookie settes i build/parts.mjs. */
/* Prosjektkorta på /franchise/. Filmen står øvst, fordi det er han du kom for,
   og teksten under seier kva du ser på. To i bredda frå 780, stabla under.
   .proj .video overstyrer max-width:60rem: inne i ei spalte er det spalta som
   set breidda, og «margin-inline:auto» ville berre midtstilt henne i seg sjølv. */
.projs{display:grid;gap:clamp(1.5rem,3vw,2.25rem);grid-template-columns:1fr}
@media (min-width:780px){.projs{grid-template-columns:repeat(2,1fr)}}
.proj .video{max-width:none;margin-inline:0}
.proj h3{margin:1.125rem 0 .5rem;letter-spacing:-.01em}
.proj p{font-size:.9375rem;line-height:1.6;color:var(--ink-2)}
.video{max-width:60rem;margin-inline:auto;border-radius:var(--r-card);overflow:hidden;
  background:#000;box-shadow:0 24px 56px -26px rgba(0,0,0,.75)}
.video iframe{display:block;width:100%;height:auto;aspect-ratio:16/9;border:0}
.video__cta{margin-top:1.75rem;text-align:center}


/* ── kampanje: prisanker og senterkort ──────────────────────────────────
   Kortene går rett til innmeldingen i ibooking, ett per senter, så ingen
   må lure på hvor de skal klikke. Stord ligger med vilje ikke her: de er
   franchise og står utenfor kr 49-kampanjen. */
.tilbud{text-align:center;margin-bottom:clamp(2rem,4vw,3rem)}
.tilbud__eb{font-size:.75rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:var(--orange);margin-bottom:.85rem}
.tilbud__pris{display:flex;align-items:baseline;justify-content:center;flex-wrap:wrap;gap:.4rem .9rem}
/* Merk spesifisiteten: .section--dark p vinner over en ren klasse, så
   normalprisen må skrives med foreldreklassen for å bli dempet. */
.section--dark .tilbud__was{margin-top:.7rem;font-size:1rem;color:#9A9A9A}
.tilbud__was s{text-decoration-thickness:2px;text-decoration-color:#6E6E6E}
.tilbud__pris b{font-size:clamp(3rem,10vw,5.5rem);line-height:.95;font-weight:800;color:#fff;
  letter-spacing:-.03em}
.tilbud__pris span{font-size:clamp(1rem,2.4vw,1.25rem);color:#D2D6DC}
.tilbud__sub{max-width:52ch;margin:1rem auto 0;font-size:1rem;line-height:1.65;color:#D2D6DC}

/* ── kampanjestripe over priskorta ─────────────────────────────────────
   Same tal som kampanjesiden, men på lys botn og i eit format som tåler å
   stå rett over tre priskort. To spalter frå 780: prisen til venstre og
   vilkåra til høgre, slik at stripa ikkje blir eit tårn som skyv korta
   under skjermkanten. Under 780 stablar ho seg. */
.kamp{background:linear-gradient(180deg,#FFF6F1,#FFFCFA);
  border:1px solid rgba(253,75,1,.3);border-radius:var(--r-card);
  padding:clamp(1.25rem,3vw,1.75rem);margin-bottom:clamp(1.5rem,3vw,2rem);
  display:grid;gap:1.25rem;align-items:center}
.kamp__eb{display:block;font-size:.75rem;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;color:var(--orange-ink);margin-bottom:.55rem}
.kamp__pris{display:flex;align-items:baseline;flex-wrap:wrap;gap:.3rem .7rem}
.kamp__pris b{font-size:clamp(2.5rem,7vw,3.5rem);line-height:.95;font-weight:800;
  letter-spacing:-.03em;color:var(--ink)}
.kamp__pris span{font-size:1rem;color:var(--ink-2)}
/* Stod som «Normalpris kr 459 i måneden», gjennomstreka, fram til 09.08.2026.
   Kunden si eiga kampanjeside har ingen gjennomstreka pris, og kr 459 er
   ikkje ein alternativ pris i dag: han er prisen ETTER bindingstida. Det står
   no som eit punkt i lista til høgre, der det høyrer heime. Plassen her tok i
   staden over kven tilbodet gjeld for, som er det kunden set fyrst. */
.kamp__hvem{margin-top:.5rem;font-size:.9375rem;color:var(--ink-3)}
/* Reint layout-ledd, men grid-barn treng min-width:0 for at lange ord
   ikkje skal sprengje spalta. Utan ein regel her melder build/rotcss.mjs
   klassa som ustyla, og det er rett: ei klasse utan reglar er ei klasse
   ingen veit om verkar. */
.kamp__bo{min-width:0}
.kamp__akt{display:flex;flex-wrap:wrap;align-items:center;gap:.75rem 1.25rem;margin-top:1.25rem}
@media (min-width:780px){
  .kamp{grid-template-columns:minmax(0,auto) minmax(0,1fr);gap:2rem}
  .kamp__ho{border-right:1px solid rgba(253,75,1,.22);padding-right:2rem}
}

/* ── prøveperiodestripe over priskorta, berre Stord ────────────────────
   Same layout som kampanjestripa, fordi ho gjer same jobben på same plass:
   to spalter frå 780 så korta ikkje blir skuva under skjermkanten, stabla
   under. Fargen er den gylne frå merket og ikkje den oransje, slik at ingen
   les henne som kr 49-kampanjen. Stord står utanfor den kampanjen.
   Markupen ligg i build/medlemsblokk.mjs, saman med prisspørsmålet. */
.prov{background:linear-gradient(180deg,#FFFAF0,#FFFEFB);
  border:1px solid rgba(248,168,24,.55);border-radius:var(--r-card);
  padding:clamp(1.25rem,3vw,1.75rem);margin-bottom:clamp(1.5rem,3vw,2rem);
  display:grid;gap:1.25rem;align-items:center}
.prov__eb{display:block;font-size:.75rem;font-weight:700;letter-spacing:.06em;
  color:var(--orange-ink);margin-bottom:.55rem}
.prov__t{font-size:clamp(1.75rem,4.5vw,2.5rem);line-height:1.1;font-weight:800;
  letter-spacing:-.025em;color:var(--ink)}
.prov__u{margin-top:.5rem;font-size:.9375rem;color:var(--ink-2)}
/* Reint layout-ledd, men grid-barn treng min-width:0 for at lange ord ikkje
   skal sprengje spalta. Same grunn som .kamp__bo, sjå kommentaren der. */
.prov__bo{min-width:0}
.prov__sub{font-size:.9375rem;line-height:1.6;color:var(--ink-2)}
.prov__sub a{color:var(--orange-ink)}
.prov__akt{display:flex;flex-wrap:wrap;align-items:center;gap:.75rem 1.25rem;margin-top:1rem}
@media (min-width:780px){
  .prov{grid-template-columns:minmax(0,auto) minmax(0,1fr);gap:2rem}
  .prov__ho{border-right:1px solid rgba(248,168,24,.45);padding-right:2rem}
}

.velg{display:grid;gap:1rem;grid-template-columns:1fr;margin-top:1.75rem}
@media (min-width:760px){.velg{grid-template-columns:repeat(3,1fr);gap:1.25rem}}
.velg__c{display:flex;flex-direction:column;gap:.35rem;text-decoration:none;
  background:var(--dark-2);border:1px solid var(--line-dark);border-radius:var(--r-card);
  padding:1.5rem 1.5rem 1.25rem;
  transition:transform .22s cubic-bezier(.22,1,.36,1),border-color .22s ease,box-shadow .22s ease}
.velg__c:hover{transform:translateY(-4px);border-color:var(--orange);
  box-shadow:0 20px 42px -20px rgba(0,0,0,.7)}
.velg__n{font-size:1.375rem;font-weight:700;color:#fff;letter-spacing:-.01em}
.velg__a{font-size:.875rem;color:#9A9A9A}
.velg__p{margin-top:.85rem;font-size:2rem;font-weight:800;color:var(--orange);line-height:1;
  letter-spacing:-.02em}
.velg__p i{font-style:normal;font-size:.8125rem;font-weight:500;color:#9A9A9A;
  display:block;margin-top:.4rem;letter-spacing:0}
.velg__b{margin-top:1.25rem;display:flex;align-items:center;justify-content:center;gap:.5rem;
  background:var(--orange-fill);color:#fff;font-weight:600;font-size:.9375rem;
  padding:.85rem 1rem;border-radius:var(--r-btn);
  box-shadow:0 2px 6px rgba(193,86,32,.3);transition:background .18s ease,gap .18s ease}
.velg__b svg{width:17px;height:17px;flex:none}
.velg__c:hover .velg__b{background:var(--orange-dark);gap:.75rem}
/* Hengande ikon, ikkje flex.
   Dette var «display:flex» med «flex-wrap:wrap». Teksten er eit anonymt
   flex-element som ikkje kan krympe under si eiga minstebreidd, så på smal
   skjerm braut han til ny linje og etterlét ikonet heilt åleine på linja over.
   Kunden: «fix the clock icon its by itself and looks wierd».
   Med absolutt plassert ikon og innrykk flyt teksten rundt som han skal, og
   lenka til slutt held seg inne i tekstflyten i staden for å bli eit eige
   flex-element. */
.velg__note{position:relative;padding-left:1.75rem;
  margin-top:1.5rem;font-size:.9375rem;line-height:1.6;color:#B4B4B4}
/* «> svg» og ikkje «svg»: den andre noten har ei lenke med eit pilikon inni,
   og ein usortert etterkommar-selektor ville ha kasta pila opp i hjørnet
   saman med klokka. */
.velg__note > svg{position:absolute;left:0;top:.2em;width:18px;height:18px;color:var(--orange)}
.velg__note .ln svg{width:16px;height:16px;vertical-align:-.2em;margin-left:.25rem}
.velg__note .ln{color:var(--orange)}


/* Gavekort-blokka på sentersidene. Samme note-komponent, men litt mer luft og
   litt større tekst, siden den står alene i sin egen seksjon og ikke som en
   fotnote under noe annet. */
.note--stor{padding:1.75rem 2rem;max-width:70ch;margin-inline:auto}
.note--stor p{font-size:1rem}
.note--stor .ln{margin-left:.35rem;white-space:nowrap}


/* ── gründerkort ────────────────────────────────────────────────────────
   To store kort med portrett. Egen komponent fordi .staff er bygget for fire
   trenere på rad og gir for smale bilder til to personer. */
.grunder{display:grid;gap:1.5rem;grid-template-columns:1fr;max-width:56rem}
@media (min-width:760px){.grunder{grid-template-columns:repeat(2,1fr);gap:1.75rem}}
.grunder__c{background:#fff;border:1px solid var(--line);border-radius:var(--r-card);
  overflow:clip;display:flex;flex-direction:column}
.grunder__c img{width:100%;aspect-ratio:4/5;object-fit:cover;object-position:center 22%;
  display:block;background:var(--dark)}
.grunder__b{padding:1.5rem 1.5rem 1.75rem;flex:1;display:flex;flex-direction:column}
.grunder__c h3{font-size:1.1875rem;margin-bottom:.2rem;letter-spacing:-.015em}
.grunder__rolle{font-size:.875rem;font-weight:700;color:var(--orange-ink);margin-bottom:.9rem}
.grunder__c p:last-child{font-size:.9375rem;line-height:1.6;color:var(--ink-2);margin:0}


/* ── handlingslinje nederst i lenkekort ─────────────────────────────────
   Samme uttrykk som «Se senteret» på senterkortene, så de to leses likt.
   Kortet er et rutenett med ikon og innhold; den indre kolonnen blir en
   flex-kolonne så linja legger seg nederst uansett hvor lang brødteksten
   er, og linjene står på rekke på tvers av kortene. */
.pinfo__c--link{align-items:stretch}
.pinfo__c--link > div{display:flex;flex-direction:column}
.pinfo__c--link > div > p{flex:1}
.pinfo__go{display:flex;align-items:center;gap:.375rem;margin-top:.875rem;
  font-size:.9375rem;font-weight:700;color:var(--orange-ink);transition:gap .2s ease}
/* Pila skal antyde retning, ikke rope. Ikonet er tegnet med stroke-width 2.4
   for bruk i store knapper, og i 15 px ved siden av en 15 px tekst ble den
   tyngre enn ordet den følger. Her er den mindre, tynnere og litt dempet, og
   arver fargen fra teksten, altså --orange-ink, samme oransje som lenkene
   ellers på lyse flater. Full styrke først når man holder over kortet. */
.pinfo__go svg{width:13px;height:13px;flex:none;stroke-width:1.7;opacity:.55;
  transition:opacity .2s ease}
.pinfo__c--link:hover .pinfo__go{gap:.6rem}
.pinfo__c--link:hover .pinfo__go svg{opacity:1}


/* ── trenerkort som ikke drar med seg naboene ───────────────────────────
   Kortene i en rad står nå like høye igjen, og det er en endring.

   De sto med align-items:start en periode, av en god grunn den gangen: «Les
   mer» brettet seg ut inne i kortet, og da vokste naboene like mye og sto
   igjen med et stort tomrom. Målt: alle tre gikk fra 314 til 1175 px.

   Den grunnen er borte. «Les mer» åpner nå et panel over siden, ikke inne i
   kortet, så ingenting kan vokse uventet. Da er felles høyde per rad det
   peneste: bunnkantene ligger på linje i stedet for å slutte tilfeldig etter
   hvor mange stikkord hver enkelt har.

   margin-top:auto skyver «Les mer»-linja helt ned, så også de står på rekke. */
.pt-c details{margin-top:auto}

/* ══ /kampanje/: landingsside for betalt annonsering ═══════════════════════
   Éin handling tel. Oransje er reservert for det som fører til innmelding,
   difor er menyknappen avfarga og prisen i senterkorta kvit. Reglane er
   scopa med .side-kampanje, som build/shell.mjs set på <body>.

   HER LÅG DET EIT TILBODSKORT. Det er fjerna etter beskjed frå kunden
   06.08.2026, saman med .tkort-reglane og komponenten P.tilbudskort. Med
   kortet borte er heltespalta ei vanleg éin-spalte, akkurat som på dei
   andre 155 sidene, og display:contents-omordninga på mobil har ingenting
   å omordne. Tala i tilbodet står no i hakelista i helten, og MERK at
   punktet «Kr 459/mnd etter endt bindingstid» er der av juridiske grunnar,
   ikkje av plasshensyn. Sjå kommentaren i build/site2.mjs. */

/* KNAPPEN OVER HAKELISTA, IKKJE UNDER.
   Med tilbodskortet borte fall knappen til 66 prosent av folden på 1440 og
   85 prosent på mobil, altså tilbake til problemet sida skulle løyse. Fire
   hakemerke mellom løftet og handlinga er 130 px, og dei kostar meir enn dei
   gir akkurat der. Rekkjefølgja blir difor: overskrift, ingress, KNAPP, og så
   hakelista som utdjuping under.
   .hero__copy er ei vanleg blokk elles på nettstaden, så «order» gjer
   ingenting før ho blir flex. Markupen er urørt: P.hero er den same på alle
   156 sidene. */
.side-kampanje .hero__copy{display:flex;flex-direction:column;align-items:flex-start}
  /* align-items:flex-start på forelderen er ikkje pynt. Flex-element fyller
     tverraksen som standard, så brødsmulepilla strekte seg over heile spalta
     og blei 630 px brei, medan ho er innhaldsbreid på alle dei andre sidene.
     Same gjaldt trustlinja. */
.side-kampanje .hero__copy > .crumb{order:1}
.side-kampanje .hero__copy > .hero__kick{order:2}
.side-kampanje .hero__copy > .h1{order:3}
.side-kampanje .hero__copy > .hero__lede{order:4;margin-bottom:1.75rem}
.side-kampanje .hero__copy > .hero__actions{order:5;margin-bottom:1.75rem}
.side-kampanje .hero__copy > .checks{order:6;margin-bottom:1.5rem}
.side-kampanje .hero__copy > .trustline{order:7}

/* Menyknappen står med same oransje fyll som på dei andre 155 sidene.
   Han var avfarga her ei stund, for å gjere hovudknappen til den einaste
   oransje flata over folden. Kunden vil ha menyen lik overalt, og det er
   riktig prioritering: ei landingsside som ikkje kjennest som resten av
   nettstaden, bryt tilliten akkurat i det klikket kostar pengar. Oransje er
   merkevarefargen, ikkje eit CTA-signal åleine. */

/* I senterkorta skal kjøpsfeltet vere den einaste oransje flata. Prisen blir
   kvit, pin-ikonet i noten grått. .ln får stå oransje: han ER klikkbar. */
.side-kampanje .velg__p{color:#fff}
.side-kampanje .velg__note svg{color:var(--ink-inv-2)}
.side-kampanje .velg__b{font-size:1.1875rem;font-weight:700}

/* Tre .btn--lg sprengjer 390 px i .endcta__btns, som berre har flex-wrap. */
@media (max-width:559px){
  .side-kampanje .endcta__btns{flex-direction:column;align-items:stretch}
  .side-kampanje .endcta__btns .btn{width:100%}
}

/* ══ luft mellom mørk seksjon og fyrste kvite kort, på telefon ═══════════
   .quick og .statbar har negativ toppmarg med vilje: kortet skal flyte litt
   opp over kanten av helten. Men seksjonen dei ligg i har «padding-top:0» i
   markupen, og «.hero + .section» gir 2,75rem tilbake på mobil. Netto blei
   det NULL: verken overlapp eller luft, berre eit kvitt kort limt fast i
   underkanten av eit mørkt felt.

   Målt med node build/kortavstand.mjs: 0 px på ni sider, 8 px på /main/,
   og minus 44 px på /personlig-trener/, der blokka er skoten inn mellom to
   lyse seksjonar og overlappet difor blir eit ekte samanfall.

   Kunden: «this box is also way to close to the top, fix this everywhere».

   Overlappet står urørt frå 860 px og opp, der det er ein bevisst effekt med
   god plass rundt. */
@media (max-width:859px){
  .quick,
  .statbar{margin-top:0}
}

/* Knappen i ein merknadsboks står på eiga linje, med luft over.
   Han låg inne i <p> og flaut med i linjebrytinga, så han enda midt i
   avsnittet mellom «drop-in.» og resten. */
.note__cta{margin-top:.875rem}
/* Ein note MED knapp er ikkje ein fotnote, han er eit val. Han fekk difor
   same forma som eit kort: meir luft, mjuk fylling, og på brei skjerm står
   knappen ved sida av teksten i staden for under. Kunden bad om det to
   gonger, og han hadde rett: «Foreign bank account?» er den siste utvegen
   for den som ikkje kan bruke avtalegiro, og han såg ut som ein fotnote.
   :has() gjer at notar UTAN knapp står som før, og dei er i fleirtal. */
.note:has(.note__cta){padding:1.5rem 1.625rem;gap:1rem 1.125rem;
  background:linear-gradient(180deg,#FFF6F1,#FFFCFA);
  border-color:rgba(253,75,1,.34)}
.note:has(.note__cta) p{font-size:1rem;line-height:1.65;max-width:62ch}
@media (min-width:860px){
  .note:has(.note__cta){grid-template-columns:22px minmax(0,1fr) auto;align-items:center}
  .note:has(.note__cta) > div{display:contents}
  .note:has(.note__cta) .note__cta{margin-top:0;grid-column:3;white-space:nowrap}
}
.note>div{min-width:0}

/* Leverandørlogoene i «Utstyret du bygger på» på /franchise/.
   Kunden 09.08.2026. Filene er svart strek på kvit botn, og kvitfargen er
   nøkla bort, så dei ligg rett på kortflata uansett kva tone ho har.
   Høgda styrer, ikkje breidda: dei to merka har ulikt sideforhold, 3,9 mot
   3,6, og med lik breidd ville Hoist stått synleg større enn Panatta. */
.logorad{display:flex;align-items:center;gap:1.25rem;margin-bottom:1rem}
.logo-lev{height:30px;width:auto;max-width:47%;object-fit:contain;display:block}

/* BILETE I NYHETSKORTA på /aktuelt/, lagt til 14.08.2026. Kunden bad om det:
   sida hadde fem saker og ikkje eitt bilete.

   Fullbreidde i kortet, altså negative marginar som opphevar padding-en, og
   eit fast sideforhold med object-fit. Då kan kva som helst av dei 48 bileta
   i biblioteket brukast utan at kortet endrar høgd, og utan at nokon må lage
   eit eige utsnitt per sak. Runda berre i toppen, for kortet er runda. */
/* MJUKARE HJØRNE OG MEIR LUFT, 14.08.2026, etter beskjed frå kunden.
   Biletet ligg no INNE i padding-en i staden for å gå heilt ut i kanten, med
   runding på alle fire hjørna. Fullbreidde med berre toppen runda gjorde at
   kortet såg ut som eit nyhetsbrev. Med luft rundt les det som eit kort.
   1.125rem er same runding som knappane elles på nettstaden. */
.art__bilde{margin:0 0 1.25rem;border-radius:1.125rem;overflow:hidden}
.art__bilde img{display:block;width:100%;aspect-ratio:16/10;object-fit:cover;border-radius:1.125rem}

/* ══ LYSARE PREG, 14.09.2026 ══════════════════════════════════════════════
   Kunden: «han vil at bildene skal være lysere og at siden generelt skal være
   lysere». Målt før endringa, 390 px: første skjermen på /mor-barn/ var 89 %
   mørke pikslar, framsida 60 %, /kampanje/ og /gruppetimer/ 68 %. Bileta
   aleine låg på lysheit 50 til 100 av 255 på dei fleste sidene, fordi dei
   ligg under ein nesten svart gradient (0,82 til 0,93 på mobil).

   Alt står her, SIST i pages.css, og overstyrer med same spesifisitet. Då
   ligg heile skiftet på éin stad og kan takast ut att i eitt stykke.
   Reglane i build/rot.html er ikkje endra, og kommentarane der om kvifor
   gradientane var så mørke gjeld framleis som grense: kvit tekst på foto
   må halde 4,5:1 mot det LYSASTE punktet bak seg. build/fotokontrast.mjs
   er vakta, og gradientane under er tunne akkurat så langt ho tillèt.

   Logoen er oransje og gul på gjennomsiktig botn, så han toler lys meny og
   lys botn utan eiga lys utgåve. */

/* ── 1. Bileta: litt lysare og friskare, og mykje mindre svart over dei ── */
@media (max-width:859px){
  main img:not([src*="logo"]):not([src$=".svg"]){filter:brightness(1.08) saturate(1.05)}
}

/* MOBIL: teksten dekkjer nesten heile helten, så gradienten kan ikkje bli så
   tunn som på PC. Fyrste forsøket (0,74 til 0,6) gav 15 tekstruter under
   4,5:1 i build/fotokontrast.mjs. Grepet er difor to: litt tettare der
   teksten står, og kvit tekst i staden for den lysegrå --ink-inv-2. Kvitt
   toler ein lysare bakgrunn: grensa for 4,5:1 går ved ei lysheit rundt 118
   for #fff, men rundt 92 for #D2D6DC. Botnen, der det kvite kortet og
   luft står, er tynnast, og det er der fotoet syner mest. */
/* ANDRE RUNDE PÅ MOBIL. Med gradienten over åleine var skilnaden knapt synleg
   side om side med før, fordi det er det LYSASTE punktet i fotoet som set
   grensa, og éin kvit lampe i taket er nok. Difor blir sjølve fotoet mjukare
   under 860 px: contrast(.78) løftar skuggane og pressar dei lysaste
   punkta ned mot rundt 230, og då held ein mykje tynnare gradient 4,5:1.
   Snittet i helten blir om lag dobbelt så lyst som med den gamle 0,82 til 0,93. */
@media (max-width:859px){
  /* Tre klassar sterk med vilje: den generelle «main img:not(...):not(...)»
     over er 0,2,2 og ville elles vunne og teke filteret bort. */
  /* MELLOMTING 15.09.2026: contrast(.66) gav eit grått slør over fotoet, og
     kunden syntest det blei «litt for lyst». contrast(.84) held fotoet klart,
     og gradienten er tettare att. Framleis lysare enn 0,82 til 0,93 før. */
  .hero .hero__media img:not([src$=".svg"]){filter:brightness(1.08) contrast(.84) saturate(1.06)}
  .hero__media::after{
    background:linear-gradient(180deg,rgba(24,24,24,.78) 0%,rgba(24,24,24,.74) 32%,rgba(24,24,24,.66) 50%,rgba(24,24,24,.64) 92%,rgba(24,24,24,.4) 100%)}
  /* Toppen er tettare enn resten: kick-linja øvst målte 3,38 med 0,54 og
     framleis 4,01 med 0,6, fordi taklys ofte ligg akkurat der. Ingress,
     knappar og tillitslinje heldt 4,5:1 med 0,52 og står der dei stod. */
  /* TREDJE RUNDE, «make the hero even brigther». Tala er rekna, ikkje prøvde
     fram. Kvit tekst krev lysheit 118 eller lågare bak seg for 4,5:1, og det
     er det lysaste punktet i fotoet som avgjer. contrast(.66) pressar 255 ned
     til 212. 0,52 x 24 + 0,48 x 212 gjev 114, altså 4,75:1. Snittet i
     fotoet blir samtidig løfta, for contrast under 1 dreg skuggane opp mot
     midten. Berre dei siste 8 prosenta, der kortet og luft står og ingen
     tekst, får vere tynnare. */
  .on-dark .hero__media ~ .hero__in .hero__lede,
  .on-dark .hero__media ~ .hero__in .trustline,
  .on-dark .hero__media ~ .hero__in .checks li,
  .hero:has(.hero__media).on-dark .hero__lede,
  .hero:has(.hero__media).on-dark .trustline,
  .hero:has(.hero__media).on-dark .checks li{color:#fff}
}
/* PC ER SOM FØR 14.09.2026, OG DET ER MED VILJE. Kunden 15.09.2026: «sånn
   alt på pc var før var perfekt». Den lysare helten, det lysare fotoet i
   avsluttande kort og band, og den kvite menyen gjeld difor BERRE på mobil.
   Her stod ei PC-utgåve der fotoet dekte heile helten, og ein kvit meny på
   alle breidder. Dei er tekne ut, ikkje overstyrde, så PC får reglane i
   build/rot.html og build/main.css uendra. Lys grå side og kvitaktige kort
   (seksjon 3 under) gjeld framleis på alle breidder: det bad han om sjølv,
   og eksempelet hans var eit PC-skjermbilete.

   KORTE TEKSTLINER I HELTEN ER SÅ BREIE SOM TEKSTEN, ikkje som spalta.
   build/fotokontrast.mjs målar det lysaste punktet i boksen til elementet, og
   ein blokk går ut til kanten av spalta der ingen bokstav står. Med
   fit-content er boksen der teksten er, og linjeskifta blir dei same. */
@media (max-width:859px){
  .hero .hero__kick,.hero .h1,.hero .trustline{width:fit-content;max-width:100%}
}

/* Avsluttande kort og bandet på framsida, berre mobil: fotoet fram, teksten
   står framleis på mørkt der han står. */
@media (max-width:899px){
  .endcta__media img{opacity:.85}
  .endcta__media::after{background:linear-gradient(180deg,rgba(24,24,24,.74) 0%,rgba(24,24,24,.6) 100%)}
  .endcta__trust span{color:#C9CDD3}
  .band__media img{opacity:.85}
  .band__media::after{background:linear-gradient(180deg,rgba(24,24,24,.76),rgba(24,24,24,.62))}
}

/* ── 2. Menyen: kvit, berre på mobil ───────────────────────────────────────
   900 px er brytpunktet der menyen går frå skuffe til lenkjer i baren, så
   nedtrekka og den aktive lenkja finst ikkje under det og treng ingen regel. */
@media (max-width:899px){
  .nav{background:#fff;border-bottom-color:var(--line)}
  .nav :where(a,button,summary):focus-visible{outline-color:var(--orange-fill)}
  /* Liten oransje tekst på kvitt: --orange er 3,26:1, --orange-ink 5,27:1. */
  .nav__lang,.nav__panel .nav__lang-m{border-color:var(--line-ui)}
  .nav__lang span,.nav__panel .nav__lang-m b{color:var(--orange-ink)}
  .nav__lang a,.nav__panel .nav__lang-m a{color:var(--ink-2);text-decoration-color:rgba(24,24,24,.35)}
  .nav__lang a:hover,.nav__lang a:focus-visible,
  .nav__panel .nav__lang-m a:hover,.nav__panel .nav__lang-m a:focus-visible{color:var(--ink)}
  .nav__lang a:active,.nav__panel .nav__lang-m a:active{color:var(--orange-ink)}
  .nav__drawer>summary{color:var(--ink);border-color:var(--line-ui)}
  .nav__drawer[open]>summary{background:rgba(232,104,38,.08)}
  .nav__panel{background:#fff;border-bottom-color:var(--line);box-shadow:0 18px 32px rgba(0,0,0,.08)}
  .nav__panel a{color:var(--ink);border-bottom-color:var(--line)}
  .nav__panel .btn{color:#fff}
  .nav__panel .nav__sub{color:var(--ink-2);border-bottom-color:var(--line)}
}

/* ── 3. MELLOMTING, 15.09.2026 ─────────────────────────────────────────────
   Kunden etter første runde: «Det ble lysere, men litt for lyst. Footer-meny
   må være mørk slik den var før. Videre så kan tekstboksene godt være
   tilnærmet off-white, men siden må være lys grå. Pr nå er det grått i
   grått.» Han la ved eit skjermbilete av gamle energyfitness.no: lys grå
   side, kvitaktige kort som løftar seg med ein mjuk skugge og utan kant.

   Difor er dette TEKE UT att frå fyrste runde: kvit botn, kvit fast linje
   nedst på mobil, og krem i staden for svart på heltar utan foto og på dei
   mørke seksjonane. Alt det står som før 14.09.2026. Menyen er framleis kvit
   og heltefotoa framleis lysare, for det klaga han ikkje på.

   «Grått i grått» var sida #F9FAFB og korta #FAFAFA med 1 px kant: to nesten
   kvite flater som ikkje skil seg. Sida blir lys grå, korta kvitaktige.

   DEN GRÅ TEKSTEN MÅ BLI MØRKARE, og det er ikkje smak. ENERGYs eigen grå
   #6B7280 er 4,6:1 på #F9FAFB, men berre 4,0:1 på #F0F0F0, altså under AA.
   #5A6170 er 5,4:1 der. Same grunn for kanten på knappar: #8C8C8C er 2,9:1
   mot #F0F0F0 og WCAG 1.4.11 krev 3:1, #838383 er 3,3:1.

   BERRE PÅ MOBIL, som alt anna i denne blokka. Nicholai 15.09.2026: «sånn alt
   på pc var før var perfekt (da mener jeg alt». Frå 900 px og opp gjeld
   difor dei opphavlege tokena og korta med kant, uendra. 899 og ikkje 859:
   det er brytpunktet der menyen blir skuffe, og der «mobil» byrjar for
   resten av sida. Heltereglane over held seg på 859 fordi helten sjølv
   byter oppsett der. */
@media (max-width:899px){
  :root{--light:#F0F0F0;--ink-2:#5A6170;--ink-3:#5A6170;--line-ui:#838383}

  /* Tekstboksane: kvitaktige, utan kant, med ein mjuk skugge, slik som på
     skjermbiletet hans. Kanten var det som gjorde dei grå mot grått.
     MED VILJE IKKJE MED: .plan (det framheva priskortet har ein oransje kant
     som skal stå), .kort og .statbar__in (kvite kort som ligg oppå helten med
     eigen skugge), og .faq details (rader med skiljeline, ikkje boksar).
     Hover-reglane (.card:hover, .pinfo__c--link:hover) er to klassar sterke
     og vinn framleis over denne. */
  .card,.pinfo__c,.quick__c,.rev,.news__c,.staff__c,.kontakt__c,.art,.step,.pt-c,.vurd,.grunder__c,.ptp__in,.sval__in,.ptab{
    background:#FBFBFA;border-color:transparent;
    box-shadow:0 1px 2px rgba(24,24,24,.04),0 12px 30px -16px rgba(24,24,24,.16)}
}

/* ══ HORTEN, 17.09.2026 ═══════════════════════════════════════════════════
   /horten/, kundens skisse for fase 1. Alt heng på .hero--horten og hrt-,
   så ingenting her kan røre dei sytti andre heltane. Sjå .hero--kamp i
   build/rot.html for kva som skjedde sist ein delt klasse blei skriven om.
   Står etter LYSARE PREG med vilje: mobilhelten her er ein annan helt. */
.hero--horten .hero__kick,.hrt-slutt .hero__kick{text-transform:uppercase;letter-spacing:.12em;font-size:.875rem;font-weight:700;color:var(--orange)}
.hero--horten .h1,.hrt-slutt .h2{text-transform:uppercase;font-weight:800;letter-spacing:-.015em;line-height:.98}
.hero--horten .h1{font-size:clamp(2.4rem,6.2vw,4.25rem)}
.hrt-periode{font-size:.75rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#fff}

/* Mobil: MODELLEN ØVST, som eit bilete over teksten, og teksten under.
   Kunden 19.09.2026: «Modellen synes ikke øverst». Fyrste utgåva hadde
   teksten fyrst og biletet under, så ho kom ikkje til syne før ein skrolla.
   Ho står ikkje BAK teksten, for då ville ansiktet forsvunne under det mørke
   laget kvit tekst treng. 4:3 og ikkje høgare: på 390 x 844 skal overskrifta
   og begge knappane framleis stå i fyrste skjermbilete. Biletet er skalert
   litt opp mot høgre, der ho står, og glir over i den mørke flata nedst. */
@media (max-width:859px){
  .hero--horten .hero__media{position:relative;inset:auto;order:0;z-index:0;margin:0;overflow:hidden}
  .hero--horten .hero__media img{aspect-ratio:4/3;height:auto;object-position:80% 6%;
    transform:scale(1.18);transform-origin:82% 0}
  .hero--horten .hero__media::after{background:linear-gradient(180deg,rgba(24,24,24,0) 58%,rgba(24,24,24,.7) 84%,#181818 100%)}
  .hero--horten .hero__in{order:1;padding-block:.5rem 2.25rem}
  .hrt-periode{font-size:.6875rem;letter-spacing:.08em}
  .hero--horten .hero__copy > .hero__actions{margin-bottom:1rem}
  .hero--horten .hero__copy > .hrt-periode{order:6}
}
@media (min-width:860px){
  .hero--horten .hero__media{inset:0 0 0 38%}
  .hero--horten .hero__media img{object-position:60% 6%}
  .hero--horten .hero__media::after{
    background:linear-gradient(90deg,#181818 0%,rgba(24,24,24,.82) 18%,rgba(24,24,24,.18) 48%,rgba(24,24,24,.08) 100%),linear-gradient(180deg,transparent 60%,rgba(24,24,24,.45) 100%);
  }
  .hero--horten .h1 .accent{white-space:nowrap}
  .hero--horten .hero__lede{font-size:1.125rem;max-width:44ch}
  .hero--horten .hero__in{grid-template-columns:minmax(0,48rem);padding-block:clamp(3rem,5vw,4.5rem) clamp(3rem,5vw,4.25rem)}
  .hero--horten .hero__actions{margin:1.75rem 0 1.5rem}
}

/* GRÅTT OG KVITT BYTER PLASS, kunden 17.09.2026: «mest mulig likt utkastet
   mitt med grå bakgrunn, hvite tekstbokser og omvendt». Målt på skissa:
   stripa og «Hvorfor» er grå med kvite kort, «Dette venter» og filmen er
   kvite med grå tekstflate i korta. Grået er eitt og same, --hrt-gra. */
.hero--horten ~ *{--hrt-gra:#F0F0EE}
/* Alle id-reglane under står bak «.hero--horten ~». #finn-oss finst òg på
   sentersidene, og ein naken regel her gjorde «Finn oss» kvit med strek på
   Larvik, Stord og Borgheim (fanga i gjennomgangen 19.09.2026). */
.hero--horten ~ #dette-venter,.hero--horten ~ #se-hva-som-kommer{background:#fff}
.hero--horten ~ #interesse{background:var(--hrt-gra)}

/* Stripa: lys flate, oransje ikon, «Behold farger og layout som ovenfor». */
.hrt-stripe{background:var(--hrt-gra);border-bottom:1px solid var(--line)}
.hrt-stripe__in{list-style:none;display:grid;grid-template-columns:repeat(2,1fr);gap:1.25rem 1rem;padding-block:1.5rem}
.hrt-stripe li{display:flex;align-items:center;gap:.8125rem}
.hrt-stripe svg{width:34px;height:34px;flex:none;color:var(--orange-fill)}
.hrt-stripe b{font-size:.9375rem;line-height:1.25;font-weight:700;color:var(--ink)}
@media (min-width:860px){
  .hrt-stripe__in{grid-template-columns:repeat(4,auto);justify-content:space-between;padding-block:1.75rem}
  .hrt-stripe svg{width:40px;height:40px}
  .hrt-stripe b{font-size:1.0625rem}
}

.hrt-kort{list-style:none;display:grid;gap:1rem;margin-top:2rem}
@media (min-width:560px){.hrt-kort{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1000px){.hrt-kort{grid-template-columns:repeat(4,1fr)}}
.hrt-kort__c{background:var(--hrt-gra);border-radius:var(--r-card);overflow:hidden;box-shadow:0 1px 2px rgba(24,24,24,.05),0 12px 30px -18px rgba(24,24,24,.22)}
.hrt-kort__c img{width:100%;aspect-ratio:306/186;object-fit:cover}
.hrt-kort__t{padding:1.125rem 1.25rem 1.375rem}
.hrt-kort__t p{color:#5A6170;font-size:.9375rem;line-height:1.5;margin-top:.25rem}

.hrt-film{display:grid;gap:1.75rem;align-items:center}
@media (min-width:860px){.hrt-film{grid-template-columns:1.15fr 1fr;gap:3rem}}
.hrt-film .video{max-width:none;width:100%;margin-inline:0}
.hrt-film__t .h2{margin:.25rem 0 .75rem}
.hrt-lenke{display:inline-flex;align-items:center;gap:.5rem;margin-top:1.25rem;padding-bottom:.375rem;
  font-weight:700;color:var(--ink);text-decoration:none;border-bottom:2px solid var(--orange-fill)}
.hrt-lenke svg{width:18px;height:18px;color:var(--orange-fill)}
.hrt-lenke:hover{color:var(--orange-fill)}

.hrt-grunner{list-style:none;display:grid;gap:1rem;margin-top:2rem}
@media (min-width:860px){.hrt-grunner{grid-template-columns:repeat(3,1fr)}}
.hrt-grunner .card{background:#fff;border-color:transparent;box-shadow:0 1px 2px rgba(24,24,24,.04),0 12px 30px -18px rgba(24,24,24,.18)}
.hrt-grunner__h{display:flex;align-items:center;gap:.875rem;margin-bottom:.625rem}
.hrt-grunner__h svg{width:34px;height:34px;flex:none;color:var(--orange-fill)}
.hrt-grunner__h b{font-size:1.0625rem}
.hrt-grunner .card > p:last-child{color:var(--ink-2);font-size:.9375rem;line-height:1.55}

/* Sluttbandet i full breidd, vektskiva frå skissa til høgre. */
.hrt-slutt{position:relative;background:#181818;overflow:hidden;isolation:isolate}
.hrt-slutt__media{display:none}
.hrt-slutt__in{position:relative;z-index:1;padding-block:clamp(2.75rem,5vw,3.75rem)}
.hrt-slutt .h2{font-size:clamp(1.9rem,4.4vw,3rem);color:#fff;margin:.375rem 0 .875rem}
.hrt-slutt .hero__lede{color:#fff;max-width:52ch}
.hrt-slutt .hero__actions{margin:1.5rem 0 0}
@media (min-width:860px){
  .hrt-slutt__media{display:block;position:absolute;inset:0 0 0 auto;width:min(42%,34rem);z-index:0}
  .hrt-slutt__media picture,.hrt-slutt__media img{width:100%;height:100%;object-fit:cover;object-position:30% 50%}
  .hrt-slutt__media::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#181818 0%,rgba(24,24,24,.35) 40%,rgba(24,24,24,0) 100%)}
}

/* Påmeldinga til trekninga, 18.09.2026. Tekst til venstre, skjemaet i eit
   kvitt kort til høgre på PC, under kvarandre på mobil. */
/* «Grå bakgrunn, hvite tekstbokser og omvendt»: «Hvorfor» over er grå med
   kvite kort, så påmeldinga er kvit med grått kort. */
.hero--horten ~ #bli-med{background:#fff}
.hrt-meld__in{display:grid;gap:1.5rem;align-items:start}
@media (min-width:860px){.hrt-meld__in{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:3rem}}
.hrt-meld__t .h2{margin:.25rem 0 .75rem}
.hrt-meld__kort{background:var(--hrt-gra);border-radius:var(--r-card);padding:clamp(1.25rem,3vw,2rem)}
.hrt-meld .skjema{max-width:none}
.hrt-meld .skjema__send{justify-self:start}
@media (max-width:640px){.hrt-meld .skjema__send{justify-self:stretch}}

/* «Her finner du oss», kunden 19.09.2026. Same rutenett som finn-oss på
   sentersidene (.finn i rot.html), med tre linjer i staden for adresseblokka. */
.hero--horten ~ #finn-oss{background:#fff;border-top:1px solid var(--line)}
.hrt-finn__liste{list-style:none;display:grid;gap:1rem;margin:1.25rem 0 1.5rem}
.hrt-finn__liste li{display:grid;grid-template-columns:28px 1fr;gap:.875rem;align-items:center}
.hrt-finn__liste svg{width:26px;height:26px;color:var(--orange-fill)}
.hrt-finn__liste span{font-size:1rem;line-height:1.45;color:var(--ink)}
/* Grå tekst på den grå skjemaflata: #6B7280 er berre 4,1:1 på #F0F0EE. */
.hrt-meld .skjema label,.hrt-meld .skjema__samtykke,.hrt-meld .skjema__merk{color:#4F5663}
/* Konkurransevilkåra under skjemaet: lukka som standard, så skjemaet står
   først, men alltid éitt klikk unna. */
.hrt-vilkar{margin-top:1.25rem;border-top:1px solid var(--line);padding-top:1rem;font-size:.875rem;color:#4F5663}
.hrt-vilkar summary{cursor:pointer;font-weight:600;color:var(--ink)}
.hrt-vilkar ul{margin:.75rem 0 0 1.1rem;display:grid;gap:.4rem;line-height:1.5}
.hrt-vilkar a{color:inherit;text-decoration:underline}

/* Ikona på mobil, kunden 19.09.2026: «iconene ble litt store». Stripa,
   «Hvorfor»-korta og «Her finner du oss» får same storleik som teksten dei
   står ved, ikkje større. PC står som før. */
@media (max-width:859px){
  .hrt-stripe svg{width:24px;height:24px}
  .hrt-stripe__in{gap:1rem .75rem;padding-block:1.25rem}
  .hrt-stripe li{gap:.625rem}
  .hrt-grunner__h svg{width:26px;height:26px}
  .hrt-finn__liste li{grid-template-columns:22px 1fr;gap:.75rem}
  .hrt-finn__liste svg{width:22px;height:22px}
}

/* Horten-kortet i senterlista, 19.09.2026. Same kort som dei fire andre, med
   eit merke som seier at senteret ikkje har opna. */
.senter--kommer .senter__b h3{display:flex;align-items:center;gap:.625rem;flex-wrap:wrap}
.senter__merke{font-size:.75rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:#fff;background:var(--orange-fill);border-radius:999px;padding:.25rem .625rem}

/* ExorLive på /energy-start/, 26.09.2026, etter illustrasjonen kunden sende.
   Tekst og kort til venstre, telefonen til høgre. Ikonrundingane er lyse med
   oransje ikon, som i illustrasjonen, og berre her: «Tre ting vi gjør sammen»
   rett under beheld dei fylte. */
.exor{display:grid;gap:2.5rem;align-items:center}
@media (min-width:960px){.exor{grid-template-columns:minmax(0,1fr) minmax(0,400px);gap:3rem}}
.exor .sec-head{margin-bottom:1.75rem}
.exor .why__cards{gap:1rem}
.exor .card{background:var(--card);padding:1.5rem}
.exor .icon-circle{background:#FDE9DC}
.exor .icon-circle svg{color:var(--orange)}
.exor__stripe{margin-top:1rem;display:flex;flex-wrap:wrap;align-items:center;gap:1rem 1.75rem;
  background:var(--card);border:1px solid var(--line);border-radius:var(--r-card);padding:1.25rem 1.5rem}
.exor__merke{display:flex;align-items:center;gap:.75rem;font-weight:700;font-size:1.5rem;letter-spacing:-.02em;margin:0;flex:none}
.exor__membro{color:var(--ink)}
.exor__membro::before{content:"!";color:var(--orange)}
.exor__pil{color:var(--ink-2);font-weight:400}
.exor__exor{color:var(--orange);font-style:italic}
.exor__om{margin:0;flex:1 1 16rem;font-size:.9375rem;line-height:1.6;color:var(--ink-2)}
@media (min-width:640px){.exor__om{border-left:1px solid var(--line);padding-left:1.75rem}}
.exor__bilde{display:flex;justify-content:center}
.exor__bilde img{width:100%;max-width:400px;height:auto}
@media (max-width:959px){.exor__bilde img{max-width:320px}}

/* Det nye punktet i Membro-lista på /inngang/, 26.09.2026. Lyst oransje felt
   og eit «Nytt»-merke, som i illustrasjonen kunden sende. */
.checks li:has(.nytt-punkt){background:#FEF1E8;border-radius:10px;padding:.75rem .875rem;margin-inline:-.875rem}
.nytt-merke{float:right;margin:.125rem 0 0 .75rem;font-size:.6875rem;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;color:var(--orange);background:#FDE3D2;border-radius:6px;padding:.1875rem .5rem;vertical-align:.1em;font-style:normal}

/* LYSBOKS-CSS-START */
/* Knappen rundt kvart gallerbilete. Han skal ikkje sjåast som ein knapp,
   berre oppføre seg som ein: peikar, fokusring og eit lite løft. */
.gal__b{display:block;width:100%;height:100%;padding:0;border:0;background:none;
  cursor:zoom-in;border-radius:inherit;overflow:clip}
.gal__b picture,.gal__b img{display:block;width:100%;height:100%}
.gal__b img{transition:transform .3s ease}
.gal__b:hover img{transform:scale(1.03)}
.gal__b:focus-visible{outline:3px solid var(--orange);outline-offset:3px}

.lys{border:0;padding:0;background:none;max-width:100vw;max-height:100dvh;
  width:100%;height:100%;overflow:hidden;color:#fff}
/* Nesten tett. Målt: ved .92 slapp ein kvit seksjon bak gjennom som srgb(31),
   mot 12 der bakgrunnen var mørk, og overskriftene på sida bak var framleis
   til å lese. Ved .97 blir det 17 mot 10, og biletet står aleine. */
.lys::backdrop{background:rgba(10,10,10,.97)}
.lys__f{margin:0;height:100%;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:1rem;padding:3.5rem 1rem 1.5rem}
.lys__b{display:flex;align-items:center;justify-content:center;min-height:0;flex:1}
.lys__b img{max-width:94vw;max-height:76dvh;width:auto;height:auto;
  object-fit:contain;border-radius:var(--r-card)}
.lys__t{font-size:.875rem;line-height:1.5;color:#D9DCE1;text-align:center;max-width:60ch}
.lys__x,.lys__nav{position:absolute;display:grid;place-items:center;cursor:pointer;
  background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.22);
  color:#fff;border-radius:999px;transition:background .16s}
.lys__x:hover,.lys__nav:hover{background:rgba(255,255,255,.24)}
.lys__x:focus-visible,.lys__nav:focus-visible{outline:3px solid var(--orange);outline-offset:2px}
.lys__x{top:1rem;right:1rem;width:44px;height:44px}
.lys__x svg{width:22px;height:22px}
.lys__nav{top:50%;transform:translateY(-50%);width:44px;height:44px}
.lys__nav svg{width:22px;height:22px}
.lys__nav--f{left:.75rem}
.lys__nav--f svg{transform:rotate(90deg)}
.lys__nav--n{right:.75rem}
.lys__nav--n svg{transform:rotate(-90deg)}
@media (min-width:900px){
  .lys__nav--f{left:1.5rem}
  .lys__nav--n{right:1.5rem}
}
/* LYSBOKS-CSS-SLUTT */

/* PANEL-CSS-START */
/* Pila på summary peikar ikkje lenger nedover mot noko som brettar seg ut,
   for ingenting brettar seg ut. Han peikar mot høgre, som ei lenke vidare. */
.pt-c summary svg{transform:rotate(-90deg)}
.pt-c details[open] summary svg{transform:rotate(-90deg)}
.pt-c summary{cursor:pointer}
.pt-c summary:hover{color:var(--orange-ink)}

.ptp{border:0;padding:0;background:none;max-width:100vw;max-height:100dvh;
  width:100%;height:100%;overflow:hidden}
.ptp::backdrop{background:rgba(10,10,10,.72)}
.ptp__in{background:#fff;border-radius:var(--r-card);max-width:44rem;
  margin:auto;padding:2rem 1.75rem 2.25rem;max-height:86dvh;overflow-y:auto}
.ptp__n{font-size:1.375rem;font-weight:800;letter-spacing:-.015em;color:var(--ink)}
.ptp__r{display:inline-block;margin-top:.5rem;padding:.25rem .625rem;border-radius:999px;
  background:#FDEDE4;color:var(--orange-ink);font-size:.8125rem;font-weight:700}
.ptp__b{margin-top:1.25rem;font-size:.9375rem;line-height:1.65;color:var(--ink-2)}
.ptp__b p{margin-bottom:.75rem}
.ptp__b h4{margin:1.5rem 0 .5rem;font-size:.8125rem;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;color:var(--ink)}
.ptp__b ul{margin:0 0 .5rem 1.125rem}
.ptp__b li{list-style:disc;margin-bottom:.3125rem}
/* Lukkeknappen må lesast på TO ulike bakgrunnar.
   Han ligg fast øvst til høgre i sjølve dialogen, ikkje i det kvite panelet,
   og kva han hamnar oppå kjem an på breidda:
     frå 704 px og opp er panelet smalare enn vindauget, så knappen står på
     den mørke bakgrunnen bak
     under 704 px fyller panelet heile breidda, og då står knappen OPPÅ kvitt
   Han var kvit med 14 prosent kvit fyll, altså usynleg på kvitt. På telefon
   såg ein berre den oransje fokusringen, og kunden melde at krysset mangla.
   Målt: knappen på 16,374 låg heilt inni det kvite panelet 0,0 til 390,726.
   Mørk fyll med lys ring les på begge: mørk sirkel mot kvitt, lys omriss mot
   mørkt. */
.ptp__x{position:absolute;top:1rem;right:1rem;width:44px;height:44px;z-index:2;
  display:grid;place-items:center;cursor:pointer;color:#fff;
  background:rgba(24,24,24,.80);border:1.5px solid rgba(255,255,255,.6);border-radius:999px}
.ptp__x:hover{background:rgba(24,24,24,.94)}
/* Namnet skal ikkje kunne renne inn under knappen. */
.ptp__n{padding-right:3.25rem}
.ptp__x:focus-visible{outline:3px solid var(--orange);outline-offset:2px}
.ptp__x svg{width:22px;height:22px}
@media (min-width:700px){
  .ptp__in{padding:2.25rem 2.5rem 2.5rem}
}
/* PORTRETTET I PANELET, 09.08.2026. Kunden: «this is still way to big».
   Fyrste forsøket sette storleiken på .pt-c__b .pt-c__foto, altså på
   <details>-varianten, og den regelen gjeld ikkje her: panelet flyttar
   innhaldet inn i .ptp og har si eiga CSS. Biletet stod difor framleis like
   breitt som panelet, 44rem, og skuva erfaring og utdanning under folden.
   Same storleik som i den andre varianten: 112 px, flytande til venstre, så
   teksten legg seg rundt. Ansiktet såg du alt på kortet du klikka på. */
.ptp .pt-c__foto{max-width:7rem;float:left;margin:0 .875rem .5rem 0;
  border-radius:10px;shape-outside:inset(0 round 10px)}
.ptp .pt-c__foto img{border-radius:10px}
/* Erfaring og utdanning startar på eiga linje i staden for å bryte rundt. */
.ptp h4{clear:left}
/* PANEL-CSS-SLUTT */

/* ── Instagram ──────────────────────────────────────────────────────────
   Rutenettet er kvadratisk fordi Instagram-miniatyrbileta er det. Tre i
   bredda på mobil er for smått til å sjå kva biletet viser, difor to. */
.igf{margin-top:2rem}
.igf__topp{display:flex;flex-wrap:wrap;align-items:center;gap:.875rem;margin-bottom:1.125rem}
.igf__folg{margin-left:auto}
.igf__ikon{width:44px;height:44px;border-radius:50%;background:var(--ink);
  display:grid;place-items:center;flex:none}
.igf__ikon svg{width:24px;height:24px;color:#fff;stroke-width:2.3}
.igf__namn{display:flex;flex-direction:column;line-height:1.3}
.igf__namn b{font-size:1rem;color:var(--ink)}
.igf__namn span{font-size:.875rem;color:var(--ink-3)}
.igf__folg{margin-left:auto}
.igf__rute{display:grid;grid-template-columns:repeat(2,1fr);gap:.5rem;list-style:none}
/* MOBIL: karusell, ikkje rutenett.
   Fem kvadratiske fliser i to spalter blir tre rader og nesten 600 px høgd
   på ein telefon, altså ein heil skjerm brukt på noko som er eit tillegg,
   ikkje eit hovudpoeng. Som karusell tek det éi rad, og dei tre siste er
   framleis tilgjengelege for den som vil sjå dei.
   Rada går heilt ut til skjermkantane, fordi ein karusell som stoppar inne
   i containeren ikkje ser ut som noko ein kan dra i. padding-inline set
   fyrste flisa på linje med teksten over, og scroll-padding gjer at snappen
   landar same stad.
   overscroll-behavior-INLINE, ikkje block: build/interact.mjs slår ut på
   låsing av blokkaksen, og med rette. Her gjeld det berre sidevegs, og
   hindrar at drakinga smittar over på heile sida. */
@media (max-width:599px){
  .igf__rute{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;
    overscroll-behavior-inline:contain;scrollbar-width:none;
    margin-inline:calc(50% - 50vw);padding-inline:var(--pad);
    scroll-padding-inline:var(--pad)}
  .igf__rute::-webkit-scrollbar{display:none}
  /* 46 % gir to heile fliser og ein synleg flik av den tredje. Fliken er
     heile grunnen til at nokon skjønner at det går an å dra. */
  .igf__rute > li{flex:0 0 46%;scroll-snap-align:start}
}
@media (min-width:600px){.igf__rute{grid-template-columns:repeat(3,1fr)}}
/* Talet på spalter følgjer talet på innlegg. Fast «repeat(6,1fr)» gav ei
   tom rute når feeden hadde fem, og det ser ut som eit bilete som ikkje
   lasta. --n blir sett i markupen. */
@media (min-width:900px){.igf__rute{grid-template-columns:repeat(var(--n,6),1fr)}}
.igf__rute a{display:block;border-radius:var(--r-card);overflow:clip;
  transition:transform .16s ease;position:relative}
.igf__rute a:hover{transform:translateY(-2px)}
/* Spelikonet. Diskret med vilje: det skal seie «dette er ein video», ikkje
   ta merksemda frå biletet. Difor halvgjennomsiktig svart skive og ingen
   ring rundt. pointer-events:none så heile flisa framleis er eitt klikkmål,
   ikkje eit ikon med eit hol rundt seg. */
.igf__spel{position:absolute;inset:0;display:grid;place-items:center;
  pointer-events:none}
.igf__spel svg{width:38px;height:38px;color:#fff;
  background:rgba(24,24,24,.42);border-radius:50%;padding:7px;
  filter:drop-shadow(0 2px 8px rgba(0,0,0,.35));
  transition:background .16s ease}
.igf__rute a:hover .igf__spel svg{background:rgba(24,24,24,.62)}
@media (min-width:900px){.igf__spel svg{width:32px;height:32px;padding:6px}}
.igf__rute img{display:block;width:100%;aspect-ratio:1;object-fit:cover;background:var(--card-soft)}
/* Følg-kortet. Ikkje ein stipla boks: dette er ferdig innhald, ikkje ein
   markering av noko som manglar. */
.igf--tom{display:grid;grid-template-columns:1fr;gap:1.25rem;justify-items:center;text-align:center;
  background:#fff;border:1px solid var(--line);border-radius:var(--r-card);
  padding:clamp(1.75rem,4vw,2.25rem)}
.igf--tom h3{font-size:1.125rem;margin-bottom:.5rem}
.igf--tom p{font-size:.9375rem;line-height:1.6;color:var(--ink-2);max-width:46ch;margin-bottom:1.25rem}
.igf__ikon--stor{width:56px;height:56px}
.igf__ikon--stor svg{width:30px;height:30px}
@media (min-width:640px){
  .igf--tom{grid-template-columns:auto 1fr;justify-items:start;text-align:left;align-items:center;gap:1.75rem}
}

/* SENTERVAL-CSS-START */
.sval{border:0;padding:0;background:none;max-width:100vw;max-height:100dvh;
  width:100%;height:100%;overflow:hidden}
.sval::backdrop{background:rgba(10,10,10,.72)}
.sval__in{position:relative;background:#fff;border-radius:var(--r-card);
  max-width:29rem;margin:auto;padding:2rem 1.75rem 2.25rem;max-height:86dvh;overflow-y:auto}
.sval__h{font-size:1.375rem;font-weight:800;letter-spacing:-.015em;color:var(--ink);
  padding-right:3.25rem}
.sval__l{margin-top:.5rem;font-size:.9375rem;line-height:1.6;color:var(--ink-2)}
.sval__liste{margin-top:1.5rem;display:grid;gap:.625rem}
.sval__liste a{display:flex;flex-direction:column;gap:.1875rem;
  padding:.9375rem 1.125rem;border:1px solid var(--line);border-radius:var(--r-card);
  text-decoration:none;background:#fff;
  transition:border-color .15s ease,background .15s ease}
.sval__liste a:hover,.sval__liste a:focus-visible{border-color:var(--orange);background:var(--cream)}
.sval__n{font-size:1rem;font-weight:700;color:var(--ink)}
.sval__a{font-size:.8125rem;color:var(--ink-3)}
/* Same grunn som i trenarpanelet: knappen kan hamne oppå kvitt, så han må
   vere mørk med lys ring for å lesast uansett breidd. */
.sval__x{position:absolute;top:1rem;right:1rem;width:44px;height:44px;z-index:2;
  display:grid;place-items:center;cursor:pointer;color:#fff;
  background:rgba(24,24,24,.80);border:1.5px solid rgba(255,255,255,.6);border-radius:999px}
.sval__x:hover{background:rgba(24,24,24,.94)}
.sval__x:focus-visible{outline:3px solid var(--orange);outline-offset:2px}
.sval__x svg{width:22px;height:22px}
/* SENTERVAL-CSS-SLUTT */

/* SAMTYKKE-CSS-START */
.samt{position:fixed;left:0;right:0;bottom:0;z-index:70;
  background:#fff;border-top:1px solid var(--line);
  box-shadow:0 -10px 30px rgba(0,0,0,.18);
  padding:1.125rem var(--pad) calc(1.125rem + env(safe-area-inset-bottom,0px))}
.samt__in{max-width:var(--maks);margin-inline:auto;
  display:flex;align-items:center;gap:1.5rem;flex-wrap:wrap}
.samt__txt{flex:1 1 22rem;min-width:0}
.samt__h{font-size:1rem;font-weight:800;letter-spacing:-.01em;color:var(--ink)}
.samt__t{margin-top:.375rem;font-size:.875rem;line-height:1.6;color:var(--ink-2)}
/* Like brede, like store, side om side. Se kommentaren i build/samtykke.mjs:
   et valg der den ene knappen er lettere å treffe enn den andre er ikke fritt. */
.samt__val{flex:0 0 auto;display:flex;gap:.625rem}
.samt__val .btn{min-width:11rem;justify-content:center}
/* HØYRE SIDE VIKER FOR CHATBOTEN, og dette er ikke pynt.
   Boblen fra Devos sitter nede til høyre med z-index 2147483647, det høyeste
   et heltall kan være, inne i en shadow DOM på et element uten id eller
   klasse. Den kan verken flyttes eller legges under noe utenfra.
   Uten dette lå den oppå «Kun nødvendige», målt både på 390 og 1440 px. Da er
   avslå-knappen den som er vanskeligst å treffe, og hele poenget med regelen
   rett over faller. Et valg der den ene knappen er delvis skjult er ikke fritt.
   5.5rem er boblens 80 px pluss litt luft. */
.samt{padding-right:calc(var(--pad) + 5.5rem)}
/* Den faste linja nedst viker mens banneret står. To faste linjer oppå
   hverandre dekker en fjerdedel av en telefonskjerm. */
.har-samt .ctabar{display:none}
/* På telefon er hver linje plass som blir tatt fra siden bak. Mindre skrift,
   tettere linjer og knappene på rad. Se kommentaren ved teksten i
   build/samtykke.mjs: boksen skal spørre, ikke dekke. */
@media (max-width:899px){
  /* Merk høyre verdi: denne kortformen kommer ETTER padding-right-regelen
     over og ville nullet den ut. Klaringen for chatboblen må stå her også. */
  .samt{padding:.9375rem calc(var(--pad) + 5.5rem) calc(.9375rem + env(safe-area-inset-bottom,0px)) var(--pad)}
  .samt__in{gap:.875rem}
  .samt__h{font-size:.9375rem}
  .samt__t{margin-top:.25rem;font-size:.8125rem;line-height:1.5}
  .samt__val{width:100%;display:grid;grid-template-columns:1fr 1fr;gap:.5rem}
  .samt__val .btn{min-width:0;padding-inline:.75rem;font-size:.9375rem}
}
/* Under 380 px blir to knapper ved siden av hverandre for trange til at
   «Kun nødvendige» får plass på én linje. Da står de over hverandre, og
   rekkefølgen er den samme. */
@media (max-width:379px){
  .samt__val{grid-template-columns:1fr}
}
@media print{.samt{display:none}}
/* «Les mer»-vinduet. Arver rammen fra .sval, se build/senterval.mjs, så det er
   samme vindu folk kjenner igjen fra sentervalget. Bare innmaten er egen. */
.samt-mer .sval__in{max-width:34rem}
.samt-mer__b{margin-top:1.25rem}
.samt-mer__b h3{font-size:.9375rem;font-weight:800;color:var(--ink);margin-top:1.25rem}
.samt-mer__b h3:first-child{margin-top:0}
.samt-mer__b p{margin-top:.375rem;font-size:.9375rem;line-height:1.65;color:var(--ink-2)}
/* SAMTYKKE-CSS-SLUTT */

/* TONEINN-CSS-START */
.js-toneinn .toneinn{opacity:0;transform:translateY(14px)}
.js-toneinn .toneinn--inn{opacity:1;transform:none;
  transition:opacity .55s cubic-bezier(.22,.61,.36,1),transform .55s cubic-bezier(.22,.61,.36,1)}
/* Kort og punkt i same rad kjem etter kvarandre i staden for på ein gong.
   60 ms er nok til at auget les det som ei rørsle, og lite nok til at ingen
   ventar på det siste kortet. */
.js-toneinn .toneinn--inn .card,.js-toneinn .toneinn--inn .pinfo__c,
.js-toneinn .toneinn--inn .plan,.js-toneinn .toneinn--inn .velg__c{animation:toneinn-opp .5s cubic-bezier(.22,.61,.36,1) backwards}
.js-toneinn .toneinn--inn>*>*:nth-child(2){animation-delay:.06s}
.js-toneinn .toneinn--inn>*>*:nth-child(3){animation-delay:.12s}
.js-toneinn .toneinn--inn>*>*:nth-child(4){animation-delay:.18s}
@keyframes toneinn-opp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){
  .js-toneinn .toneinn{opacity:1;transform:none;transition:none}
  .js-toneinn .toneinn--inn .card,.js-toneinn .toneinn--inn .pinfo__c,
  .js-toneinn .toneinn--inn .plan,.js-toneinn .toneinn--inn .velg__c{animation:none}
}
/* TONEINN-CSS-SLUTT */

/* SKJEMA-CSS-START */
.skjema-midt{display:flex;justify-content:center}
.skjema{display:grid;grid-template-columns:1fr 1fr;gap:.75rem;max-width:640px}
.skjema__felt{display:flex;flex-direction:column;gap:.35rem}
.skjema__felt--brei{grid-column:1/-1}
.skjema label{font-size:.85rem;font-weight:600;color:var(--ink-2)}
.skjema input,.skjema textarea{
  font:inherit;color:var(--ink);background:#fff;border:1px solid var(--line-ui);
  border-radius:10px;padding:.7rem .85rem;width:100%}
.skjema textarea{min-height:130px;resize:vertical}
.skjema input:focus-visible,.skjema textarea:focus-visible{
  outline:2px solid var(--orange);outline-offset:1px;border-color:var(--orange)}
/* Honningkrukka. Ute av synsfeltet, ute av tabrekkjefølgja, og skjult for
   skjermlesarar. Ikkje display:none: nokre robotar hoppar over det. */
.skjema__lokk{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.skjema__send{grid-column:1/-1}
.skjema__svar{grid-column:1/-1;margin:0;font-size:.95rem}
.skjema__svar[data-feil]{color:#b42318}
/* Samtykke med avkryssing, brukt på /horten/. Boksen står på fyrste linje av
   teksten, ikkje midt i avsnittet, og heile teksten er klikkbar. */
.skjema__samtykke{grid-column:1/-1;display:grid;grid-template-columns:auto 1fr;gap:.6rem;align-items:start;
  font-size:.875rem;line-height:1.5;font-weight:400;color:var(--ink-2)}
.skjema__samtykke input{width:1.125rem;height:1.125rem;margin:.15rem 0 0;accent-color:var(--orange-fill)}
.skjema__samtykke a{color:inherit;text-decoration:underline}
.skjema__merk{grid-column:1/-1;margin:0;font-size:.8125rem;color:var(--ink-2)}
@media (max-width:640px){.skjema{grid-template-columns:1fr}}
/* SKJEMA-CSS-SLUTT */