/* ============================================================
   LummeCo konverteringsoptimalisert forside
   Design: premium skandinavisk. Merkevare gul/sort.
   ============================================================ */
/* Tokens fra LummeCos designsystem (Light Mode + typografiarkene).
   Kommentarene er systemets egne navn, saa det er mulig aa slaa opp. */
:root{
  /* Flater */
  --white:#ffffff;        /* Page BG Light */
  --paper:#ffffff;        /* sidebakgrunn = hvit i dette systemet */
  --paper-2:#f4f4fa;      /* BG Stack 1 */
  --paper-3:#e5e5f0;      /* BG Stack 2 */
  --line:#d1d1e0;         /* Border Light */
  --black:#000000;        /* beholdt: footer og kalkulator er valgt helsvarte */

  /* Tekst */
  --ink:#1f1f2e;          /* Text Prio 1 */
  --ink-2:#73738c;        /* Text Prio 2 */
  --ink-3:#9393a8;        /* Text Prio 3, kun dekor og stor tekst */
  --muted:#73738c;        /* broedtekst i annen prioritet, se notat over */
  --on-brand:#1f1f2e;     /* Text on brand */
  --on-brand-2:#474747;   /* Text on brand prio 2 */

  /* Merkevare */
  --brand-100:#fffbe0;    /* avledet lys tone til flater, ikke i arket */
  --brand-light:#ffea66;  /* Brand Light */
  --brand:#ffd61f;        /* Brand */
  --brand-dark:#e0be00;   /* Brand Dark: hex mangler i arket, midlertidig avledet */
  --brand-deep:var(--brand-dark);
  --brand-edge:var(--brand-dark);

  /* Status */
  --error-bg:#fde2e2;     /* Error Light Light */
  --error-line:#f7c1c1;   /* Error Border Light */
  --error:#ea4747;        /* Error */
  --success-bg:#cee7d7;   /* Success Light Light */
  --success-line:#93d8ac; /* Success Border Light */
  --success:#17843f;      /* Success */
  --danger:var(--error);

  /* Typografi. Mobilverdiene staar her, desktop overstyrer under. */
  --t-h1:1.75rem;    --t-h1-lh:2.25rem;  --t-h1-ls:-.018em; --t-h1-vekt:800;
  --t-h2:1.25rem;    --t-h2-lh:1.75rem;  --t-h2-ls:-.025em;
  --t-h3:1.125rem;   --t-h3-lh:1.5rem;
  --t-caps:.875rem;  --t-caps-lh:1.25rem;
  --t-lead:1.125rem; --t-lead-lh:1.75rem;
  --t-body:1rem;     --t-body-lh:1.5rem;
  --t-small:.875rem; --t-small-lh:1.25rem;

  --radius:16px;
  --radius-sm:10px;
  --shadow:0 12px 40px rgba(31,31,46,.10);
  --shadow-sm:0 4px 16px rgba(31,31,46,.07);
  --maxw:1144px;          /* innholdsbredden i designfila */
  --font:'Nunito Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
  --display:var(--font);
}

@media (min-width:900px){
  :root{
    --t-h1:3rem;      --t-h1-lh:3.5rem;   --t-h1-ls:-.01em; --t-h1-vekt:700;
    --t-h2:2rem;      --t-h2-lh:2.5rem;   --t-h2-ls:-.01em;
    --t-h3:1.5rem;    --t-h3-lh:2rem;
    --t-caps:1rem;    --t-caps-lh:1.5rem;
    --t-lead:1.25rem; --t-lead-lh:1.875rem;
    --t-body:1.125rem;--t-body-lh:1.75rem;
    --t-small:1rem;   --t-small-lh:1.5rem;
  }
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:120px}
body{
  margin:0;font-family:var(--font);color:var(--ink);background:var(--paper);
  font-size:var(--t-body);line-height:var(--t-body-lh);
  -webkit-font-smoothing:antialiased;
  /* clip, ikke hidden: hidden gjoer body til en scroll-beholder og bryter
     position:sticky lenger nede i treet. clip stopper overflyt uten det. */
  overflow-x:clip;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
/* Nivaaene foelger typografiarkene: level 1 og 2 er sidetittel og undertittel,
   level 3 er bokstittel. Vektene skifter med skjermbredden fordi arket bruker
   Extra Bold paa mobil og Bold paa desktop for level 1. */
h1{font-family:var(--display);font-weight:var(--t-h1-vekt);font-size:var(--t-h1);line-height:var(--t-h1-lh);letter-spacing:var(--t-h1-ls);margin:0}
h2{font-family:var(--display);font-weight:700;font-size:var(--t-h2);line-height:var(--t-h2-lh);letter-spacing:var(--t-h2-ls);margin:0}
h3,h4{font-family:var(--display);font-weight:700;font-size:var(--t-h3);line-height:var(--t-h3-lh);margin:0}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 22px;width:100%}
.wrap--narrow{max-width:820px}
.hl{color:var(--ink);background:linear-gradient(180deg,transparent 62%,var(--brand) 62%);padding:0 .06em}
.skip-link{position:absolute;left:-999px;top:0;background:var(--ink);color:#fff;padding:12px 18px;z-index:200}
.skip-link:focus{left:12px;top:12px;border-radius:8px}

/* ---------- Buttons ---------- */
.btn{
  --bg:var(--ink);--fg:#fff;
  display:inline-flex;align-items:center;justify-content:center;gap:.5em;
  font-family:var(--display);font-weight:600;font-size:15px;line-height:1;
  padding:14px 22px;border-radius:999px;border:2px solid transparent;
  background:var(--bg);color:var(--fg);cursor:pointer;transition:transform .12s ease,box-shadow .2s ease,background .2s ease;
  text-align:center;white-space:nowrap;max-width:100%;
}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0)}
.btn--primary{--bg:var(--brand);--fg:var(--ink);box-shadow:0 6px 0 var(--brand-edge)}
.btn--primary:hover{--bg:var(--brand-light);box-shadow:0 8px 0 var(--brand-edge),var(--shadow-sm)}
.btn--primary:active{--bg:var(--brand-deep);box-shadow:0 2px 0 var(--brand-edge);transform:translateY(4px)}
.btn--ghost{--bg:transparent;--fg:var(--ink);border-color:var(--ink)}
.btn--ghost:hover{--bg:var(--ink);--fg:#fff}
.btn--lg{padding:17px 30px;font-size:16.5px}
.btn--sm{padding:11px 18px;font-size:14px}
.btn--block{width:100%}

/* ---------- Campaign bar ---------- */
.campaign-bar{background:var(--brand);color:var(--ink);font-size:14px;display:block}
/* Har kampanjen en lenke, rendres baren som en <a>. Den skal fortsatt se ut
   som en bar, ikke som en lenke, men peke og gi tilbakemelding ved hover. */
a.campaign-bar{text-decoration:none;transition:background .15s ease}
a.campaign-bar:hover{background:var(--brand-dark,#f0c400)}
.campaign-bar__inner{display:flex;align-items:center;justify-content:center;gap:16px;padding:9px 22px;flex-wrap:wrap}
.campaign-bar__text strong{color:var(--ink)}
.campaign-bar__timer{font-family:var(--display);font-weight:700;background:rgba(31,31,46,.10);padding:3px 12px;border-radius:999px;font-variant-numeric:tabular-nums}

/* ---------- Header ---------- */
.site-header{position:sticky;top:0;z-index:100;background:rgba(255,255,255,.92);backdrop-filter:saturate(1.4) blur(10px);border-bottom:2px solid var(--line);transition:box-shadow .2s}
.site-header.is-stuck{border-bottom:2px solid var(--line)}
.site-header__inner{display:flex;align-items:center;gap:24px;height:70px}
.logo{display:inline-flex;align-items:center}
.logo__img{height:36px;width:auto;display:block}
/* Footeren er hvit, saa logoen skal staa som i headeren. Hvitfilteret var
   for den moerke footeren og gjorde den usynlig. */
.logo--footer .logo__img{height:32px}
.main-nav{display:flex;align-items:center;gap:24px;flex:1;justify-content:center;font-size:15px;font-weight:500}
.main-nav a{color:var(--ink-2);transition:color .15s;white-space:nowrap}
.main-nav a:hover{color:var(--ink)}
.site-header__cta{display:flex;align-items:center;gap:14px}

/* Dropdown trigger */
.has-drop{position:relative}
.drop-toggle{display:inline-flex;align-items:center;gap:6px;background:none;border:0;cursor:pointer;font-family:var(--font);font-size:15px;font-weight:500;color:var(--ink-2)}
.drop-toggle:hover,.has-drop.is-open .drop-toggle{color:var(--ink)}
.drop-toggle .caret{font-size:10px;transition:transform .22s ease}
.has-drop.is-open .caret{transform:rotate(180deg)}

/* Animated underline (desktop only) */
@media (min-width:1041px){
  .main-nav>a,.drop-toggle{position:relative;padding:6px 1px}
  .main-nav>a::after,.drop-toggle::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;border-radius:2px;background:var(--brand);transform:scaleX(0);transform-origin:left;transition:transform .22s ease}
  .main-nav>a:hover::after,.main-nav>a.is-active::after,.has-drop:hover .drop-toggle::after,.has-drop.is-open .drop-toggle::after{transform:scaleX(1)}
  .main-nav>a.is-active{color:var(--ink)}
}

/* Dropdown panel */
.drop{position:absolute;top:calc(100% + 16px);right:-8px;width:322px;background:var(--white);border:2px solid var(--line);border-radius:16px;padding:8px;display:flex;flex-direction:column;gap:2px;z-index:120;opacity:0;visibility:hidden;transform:translateY(8px);transition:opacity .18s ease,transform .18s ease}
.drop::before{content:"";position:absolute;top:-7px;right:34px;transform:rotate(45deg);width:13px;height:13px;background:var(--white);border-left:2px solid var(--line);border-top:2px solid var(--line)}
.has-drop.is-open>.drop{opacity:1;visibility:visible;transform:translateY(0)}
@media (hover:hover) and (min-width:1041px){
  .has-drop:hover>.drop{opacity:1;visibility:visible;transform:translateY(0)}
  .drop::after{content:"";position:absolute;top:-20px;left:0;right:0;height:20px}
}
.drop__item{display:flex;align-items:flex-start;gap:12px;padding:11px 12px;border-radius:11px;transition:background .15s}
.drop__item:hover{background:var(--brand-100)}
.drop__ic{flex-shrink:0;width:38px;height:38px;border-radius:10px;background:var(--brand-100);color:var(--ink);display:flex;align-items:center;justify-content:center}
.drop__ic svg{width:20px;height:20px}
.drop__txt{display:flex;flex-direction:column;gap:2px;line-height:1.3}
.drop__txt b{font-family:var(--display);font-weight:600;font-size:14.5px;color:var(--ink)}
.drop__txt small{font-size:12.5px;color:var(--muted)}
.drop__item--featured{background:#fffbe8;box-shadow:inset 0 0 0 1px var(--brand)}
.drop__item--featured:hover{background:#fff6cf}
.drop__item--featured .drop__ic{background:var(--brand);color:var(--ink)}
.drop__tag{display:inline-block;background:var(--brand);color:var(--ink);font-family:var(--font);font-size:10px;font-weight:600;letter-spacing:.02em;padding:2px 7px;border-radius:999px;margin-left:5px;vertical-align:middle}
/* Bunnlenkene paa en linje. Som tre fulle rader tok de mer plass enn
   halve menyen, uten aa si mer. */
.drop__foten{display:flex;flex-wrap:wrap;align-items:center;margin-top:10px;padding-top:12px;
  border-top:2px solid var(--line)}
.drop__foot{position:relative;padding:6px 16px;font-family:var(--display);font-weight:700;
  font-size:13px;color:var(--ink-2);white-space:nowrap;transition:color .15s ease}
.drop__foot:first-child{padding-left:10px}
.drop__foot+.drop__foot::before{content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);
  width:1px;height:15px;background:var(--line)}
.drop__foot:hover{color:var(--ink)}
/* ---------- Mega-meny: to kolonner i stedet for en hoy stabel ----------
   Aatte punkter under hverandre ble 560 px hoyt. To kolonner halverer hoyden
   og gir plass til undertekstene uten at de klemmes. */
.drop--mega{width:min(680px,calc(100vw - 32px));right:auto;left:-8px}
/* minmax(0,1fr), ikke 1fr: ellers gir lange titler kolonnene min-content
   som bredde, og rutenettet vokser ut av panelet. */
/* Fire punkter i hver kolonne, fylt nedover foer det hoppes til hoyre.
   Uten column-flow ville rutenettet fylt radvis og blandet rekkefolgen. */
.drop--mega .drop__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:6px 18px}
/* Samme inndeling som tjenestelista paa forsiden, saa menyen og siden
   forteller det samme. */
.drop__kol{display:flex;flex-direction:column;gap:2px;min-width:0}
.drop__tittel{margin:12px 0 5px;padding:0 10px;font-family:var(--display);font-weight:800;
  font-size:.6875rem;line-height:1;letter-spacing:.06em;text-transform:uppercase;color:var(--ink)}
.drop__kol>.drop__tittel:first-child{margin-top:4px}
/* Litt luft mellom toppkanten av menyen og den foerste kategoritittelen. */
.drop--mega .drop__grid{padding-top:8px}

/* Kategoritittel i skjemaet, samme form som i menyen. */
.lead__gruppe{margin:16px 0 4px;
  font-family:var(--display);font-weight:800;font-size:10.5px;line-height:1;
  letter-spacing:.08em;text-transform:uppercase;color:var(--ink)}
.lead__gruppe:first-child{margin-top:0}
.drop--mega .drop__txt{min-width:0}
.drop--mega .drop__txt b,.drop--mega .drop__txt small{overflow-wrap:anywhere}
.drop--mega .drop__item--featured{margin-bottom:6px}
.drop--mega::before{left:34px;right:auto}
@media (max-width:1080px){
  /* Naar panelet ikke lenger faar plass ved siden av knappen, sentreres det. */
  .drop--mega,  .has-drop.is-open>.drop--mega,.has-drop.is-open>  .drop--mega::before,}
@media (max-width:860px){
  .drop--mega .drop__grid{grid-template-columns:1fr;gap:0}
}
.drop--cities{width:210px}
.drop__link{padding:11px 14px;border-radius:10px;color:var(--ink-2);font-family:var(--display);font-weight:600;font-size:14.5px;transition:background .15s,color .15s}
.drop__link:hover{background:var(--brand-100);color:var(--ink)}

/* Hamburger */
.nav-toggle{display:none;flex-direction:column;justify-content:center;gap:5px;width:44px;height:40px;background:none;border:0;cursor:pointer;padding:9px 8px}
.nav-toggle span{display:block;height:2.5px;border-radius:2px;background:var(--ink);transition:.25s}
.nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7.5px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7.5px) rotate(-45deg)}

/* Collapse nav to mobile panel */
@media (max-width:1040px){
  .nav-toggle{display:flex}
  .site-header__cta{margin-left:auto}
  .main-nav{position:absolute;top:100%;left:0;right:0;flex-direction:column;align-items:stretch;justify-content:flex-start;gap:2px;margin:0;padding:12px 22px 20px;
    background:var(--paper);border-bottom:2px solid var(--line);display:none;max-height:calc(100vh - 70px);overflow:auto}
  .main-nav.is-open{display:flex}
  .main-nav>a,.drop-toggle{padding:15px 6px;border-bottom:2px solid var(--line);font-size:16px}
  .has-drop{width:100%}
  .drop-toggle{width:100%;justify-content:space-between}
  .drop{position:static;transform:none;width:auto;opacity:1;visibility:visible;border:0;box-shadow:none;border-radius:0;background:none;padding:4px 0 8px 6px;display:none}
  .drop::before{display:none}
  .has-drop.is-open>.drop{display:flex;transform:none}
  .drop__item{padding:11px 8px}
  .drop__ic{width:32px;height:32px}
  .drop__ic svg{width:18px;height:18px}
  .drop__foot{border-top:0;padding:11px 8px 4px}
  .main-nav>a:last-child{border-bottom:0}
}

/* ============================================================
   MOBILMENYEN
   ------------------------------------------------------------
   Foer laa de aatte tjenestene gjemt bak en liten pil, og resten
   var fem tekstlenker med hårstreker imellom. Her ligger alt
   framme: tjenestene som kort med ikon og undertekst, slik de ser
   ut ellers paa siden, og de oevrige sidene som store rader man
   treffer med tommelen. Panelet dekker skjermen og ruller for seg.
   ============================================================ */
@media (max-width:1040px){
  /* Absolutt, ikke fast: en forfar i toppfeltet danner egen ramme, og da
     ble et fast plassert panel maalt mot toppfeltet i stedet for vinduet.
     Hoyden regnes ut fra hvor panelet begynner. */
  .main-nav{position:absolute;top:100%;left:0;right:0;bottom:auto;
    height:calc(100dvh - var(--menytopp,70px));max-height:none;
    padding:18px 18px calc(22px + env(safe-area-inset-bottom));
    background:var(--paper);border-bottom:0;gap:0;
    overscroll-behavior:contain;-webkit-overflow-scrolling:touch;z-index:130}

  /* Tjenestene staar framme. En pil som skjuler halve menyen er ikke
     verdt tappen det koster aa finne den. */
  .has-drop{width:100%;order:-1}
  .drop-toggle{width:100%;justify-content:flex-start;pointer-events:none;
    padding:2px 0 10px;border-bottom:0;
    font-family:var(--display);font-size:12px;font-weight:800;
    letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
  .drop-toggle .caret{display:none}
  .drop,.has-drop.is-open>.drop{display:flex;padding:0;gap:8px}
  .drop__grid{display:grid;gap:8px}
  .drop__kol{display:grid;gap:8px}

  /* Gruppetittel: liten, rolig, og med luft over seg. */
  /* Padding null: basisregelen skyver titlene 10 piksler inn, og da stod de
     ikke paa linje med TJENESTER og kortene. */
  .drop__tittel{margin:20px 0 6px;padding:0;font-family:var(--display);font-size:11.5px;
    font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
  /* Basisregelen setter 4 piksler over foerste tittel i hver spalte og
     teller en pseudoklasse mer enn velgeren over. Den maa naas med samme
     vekt, ellers klistrer andre spaltes foerste tittel seg til kortet over. */
  .drop__kol>.drop__tittel:first-child{margin-top:28px}
  .drop__grid>.drop__kol:first-child>.drop__tittel:first-child{margin-top:0}

  /* Tjenestekortene: samme spraak som radene lenger nede paa sidene. */
  .drop__item{align-items:center;gap:13px;padding:12px 14px;border-radius:16px;
    background:var(--white);border:2px solid var(--line);
    transition:border-color .16s ease,transform .16s ease}
  .drop__item:active{transform:scale(.985);border-color:var(--ink)}
  .drop__item::after{content:"";margin-left:auto;flex:0 0 auto;
    width:8px;height:8px;border-right:2px solid var(--ink-2);border-top:2px solid var(--ink-2);
    transform:rotate(45deg);opacity:.5}
  .drop__ic{width:42px;height:42px;border-radius:13px}
  .drop__ic svg{width:21px;height:21px}
  .drop__txt b{font-size:15.5px}
  .drop__txt small{font-size:12.5px}
  .drop__item--featured{border-color:var(--brand);box-shadow:none}

  /* De oevrige sidene: store rader, ingen haarstreker. */
  .main-nav>a{display:flex;align-items:center;padding:15px 14px;margin-top:8px;
    border-bottom:0;border-radius:16px;background:var(--white);
    border:2px solid var(--line);
    font-family:var(--display);font-weight:700;font-size:16.5px;color:var(--ink)}
  .main-nav>a::after{content:"";margin-left:auto;
    width:8px;height:8px;border-right:2px solid var(--ink-2);border-top:2px solid var(--ink-2);
    transform:rotate(45deg);opacity:.5;position:static;background:none;border-radius:0}
  .main-nav>a:active{transform:scale(.985);border-color:var(--ink)}
  .main-nav>a.is-active{border-color:var(--brand);background:var(--brand-100)}
  .main-nav>a:first-of-type{margin-top:18px}

  /* Radene glir inn etter hverandre naar menyen aapnes. Bare foerste
     gang, og bare naar bevegelse er oensket. */
  @media (prefers-reduced-motion:no-preference){
    .main-nav.is-open>*{animation:menyInn .32s cubic-bezier(.16,.84,.44,1) both}
    .main-nav.is-open>*:nth-child(1){animation-delay:.02s}
    .main-nav.is-open>*:nth-child(2){animation-delay:.06s}
    .main-nav.is-open>*:nth-child(3){animation-delay:.1s}
    .main-nav.is-open>*:nth-child(4){animation-delay:.14s}
    .main-nav.is-open>*:nth-child(5){animation-delay:.18s}
    .main-nav.is-open>*:nth-child(6){animation-delay:.22s}
  }
}
/* Naar menyen er aapen laases rullingen bak den. Laasen settes paa baade html
   og body, for nettleserne er ikke enige om hvem som eier rullingen.
   ------------------------------------------------------------------------
   En laas gjoer normalt at en sticky topp slipper taket og hopper til sin
   plass i dokumentet, altsaa langt over skjermen. Derfor gaar toppfeltet over
   til position:fixed saa lenge menyen staar aapen: da henger den paa vinduet
   og ikke paa en rulleboks som nettopp forsvant. Menypanelet ligger absolutt
   under toppfeltet og foelger med. */
html.meny-aapen,body.meny-aapen{overflow:hidden}
body.meny-aapen .site-header{position:fixed;top:0;left:0;right:0}
@keyframes menyInn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.link-phone{display:inline-flex;align-items:center;gap:7px;font-family:var(--display);font-weight:700;color:var(--ink)}
.link-phone__icon{color:var(--ink)}
.link-phone--lg{font-size:22px}

/* Text Prio 2 gir 4,6:1 paa hvitt, men bare 4,2:1 saa snart flaten er tonet.
   Paa tonede beholdere stiger derfor sekundaertekst til Prio 1. Ett sted, fordi
   --muted arves nedover og alle etterkommere folger med. */
.guarantee,.article-tl,.article-cta,.article__body .toc,.husmaling__inner,
.compare-card,.drop__item,.price-table thead th,.chip,.xform__btn,
.article-note,.price-table__hl,.calc-section,.cta-final,.article-end-cta,.footer-cta{--muted:var(--ink);--ink-2:var(--ink)}
/* Hvitt kort inne i en tonet seksjon staar likevel paa hvitt, saa der
   gjelder den vanlige skalaen igjen. */
.calc-section .calc__card,.cta-final .lead{--muted:var(--ink-2);--ink-2:#73738c;border:2px solid var(--line)}

/* ---------- Eyebrow / section basics ---------- */
.eyebrow{display:inline-flex;align-items:center;gap:9px;font-family:var(--display);font-weight:700;font-size:var(--t-caps);line-height:var(--t-caps-lh);letter-spacing:.02em;text-transform:uppercase;color:var(--ink-2);margin:0 0 16px}
.eyebrow--center{justify-content:center;width:100%}
.eyebrow__dot{width:8px;height:8px;border-radius:50%;background:var(--brand);box-shadow:0 0 0 4px rgba(255,214,31,.25)}
.section{padding:78px 0}
.section--tight{padding:52px 0}
.section__title{font-size:var(--t-h2);line-height:var(--t-h2-lh);letter-spacing:var(--t-h2-ls);margin:0 0 18px;text-wrap:balance}
.section__title--center{text-align:center;max-width:760px;margin-left:auto;margin-right:auto}
.section__title--center.title-oneline{max-width:none}
.section__lead{font-size:var(--t-lead);line-height:var(--t-lead-lh);color:var(--ink-2);max-width:60ch;margin:0 0 8px;text-wrap:pretty}
/* Sentrert ingress faar mer bredde. 60ch er riktig for en venstrestilt
   tekstblokk, men brekker en kort sentrert linje midt i setningen. */
.section__lead--center{text-align:center;margin-left:auto;margin-right:auto;max-width:900px;text-wrap:balance}

/* Loepende tekst i seksjonene. Ett sted for rytmen, saa alle tekstseksjoner
   faar samme linjeavstand, samme avstand mellom avsnitt og samme mellomtittel. */
/* Maalet ligger paa avsnittene, ikke paa beholderen. Kappet vi beholderen ville
   ogsaa kortgrid og navigasjon inni en tekstseksjon blitt smalere. */
.prose>p{font-size:var(--t-body);line-height:var(--t-body-lh);color:var(--ink);margin:0 0 18px;max-width:58ch;text-wrap:pretty}
.prose>p:last-child{margin-bottom:0}
.prose h3{font-size:var(--t-h3);line-height:var(--t-h3-lh);margin:36px 0 12px;text-wrap:balance}
.prose h3:first-child{margin-top:0}

.prose .check-list{margin:24px 0}

/* ---------- Hero ---------- */
.hero{padding:46px 0 30px;background:
  radial-gradient(120% 90% at 100% 0%,var(--paper-2) 0%,transparent 55%),var(--paper)}
.hero__grid{display:grid;grid-template-columns:1.05fr .95fr;gap:52px;align-items:center}
.hero__title{font-size:var(--t-h1);line-height:var(--t-h1-lh);letter-spacing:var(--t-h1-ls);font-weight:var(--t-h1-vekt);margin:0 0 20px}
.hero__lead{font-size:var(--t-lead);line-height:var(--t-lead-lh);color:var(--ink-2);max-width:52ch;margin:0 0 26px}
.trust-row{list-style:none;display:flex;gap:26px;padding:0;margin:0 0 30px;flex-wrap:wrap}
.trust-row li{font-size:13.5px;color:var(--muted);line-height:1.3;display:flex;flex-direction:column}
.trust-row__num{font-family:var(--display);font-weight:700;font-size:20px;color:var(--ink)}
.trust-row__star{color:var(--brand-edge)}
.hero__actions{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:14px}
.hero__reassure{font-size:14px;color:var(--muted);margin:0}
.proof-strip{display:flex;align-items:center;gap:20px;flex-wrap:wrap;margin-top:40px;padding-top:24px;border-top:2px solid var(--line);font-size:13px;color:var(--muted)}
.proof-strip__logos{display:flex;gap:22px;flex-wrap:wrap;font-family:var(--display);font-weight:600;color:var(--ink-2);opacity:.7}
.proof-strip__alle{font-family:var(--display);font-weight:700;color:var(--ink);white-space:nowrap}
.proof-strip__alle:hover{color:var(--brand-edge)}

/* 3-stegs forvandling */
.xform{margin:0}
.xform__stage{position:relative;border-radius:var(--radius);overflow:hidden;aspect-ratio:1/1;background:var(--paper-2);border:2px solid var(--line)}
.xform__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .6s ease}
.xform__img.is-active{opacity:1}
.xform__badge{position:absolute;top:14px;left:14px;font-family:var(--display);font-weight:700;font-size:12px;letter-spacing:.04em;text-transform:uppercase;padding:6px 13px;border-radius:999px;color:#fff;background:rgba(31,31,46,.72);backdrop-filter:blur(4px);transition:background .3s ease}
.xform__badge[data-tone="bad"]{background:rgba(178,59,46,.92)}
.xform__badge[data-tone="mid"]{background:rgba(186,117,23,.94)}
.xform__badge[data-tone="good"]{background:var(--brand);color:var(--ink)}
.xform__badge[data-tone="bad"],.xform__badge[data-tone="mid"]{color:var(--white)}
.xform__controls{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:12px}
.xform__btn{display:flex;flex-direction:column;gap:2px;align-items:flex-start;text-align:left;padding:10px 12px;border:2px solid var(--line);border-radius:11px;background:var(--white);cursor:pointer;transition:.15s}
.xform__btn b{font-family:var(--display);font-weight:700;font-size:13px;color:var(--ink);line-height:1.15}
.xform__btn small{font-size:11px;color:var(--muted)}
.xform__btn:hover{border-color:var(--ink-2)}
.xform__btn.is-active{border-color:var(--ink);background:var(--brand-100);box-shadow:0 0 0 3px rgba(255,214,31,.3)}
.xform__meter{height:7px;border-radius:99px;background:var(--line);overflow:hidden;margin-top:12px}
.xform__meter span{display:block;height:100%;width:8%;border-radius:99px;background:var(--danger);transition:width .55s ease,background .55s ease}
.xform__cap{font-size:13px;color:var(--muted);margin-top:12px;text-align:center;min-height:1.2em}

/* ---------- Problem ---------- */
.problem__grid{display:grid;grid-template-columns:1.1fr .9fr;gap:44px;align-items:center}
/* Speilvendt: filmen til venstre, teksten til hoyre. Bare paa store skjermer,
   for stablet skal overskriften fortsatt komme forst. */
@media (min-width:941px){
  .problem__grid--speilet{grid-template-columns:.9fr 1.1fr}
  .problem__grid--speilet>div:first-child{order:2}
  .problem__grid--speilet>.media{order:1}
}
.check-list{list-style:none;padding:0;margin:0;display:grid;gap:14px}
.check-list li{position:relative;padding-left:34px;font-size:16px;color:var(--ink-2)}
.check-list li::before{content:"✓";position:absolute;left:0;top:-1px;width:22px;height:22px;border-radius:50%;background:var(--brand);color:var(--on-brand);font-size:13px;font-weight:700;display:flex;align-items:center;justify-content:center}
.check-list li b{color:var(--ink)}
.check-list--row{display:flex;flex-wrap:wrap;gap:14px 26px}
.check-list--row li{padding-left:28px}
/* Som --row, men i faste kolonner. Flex-wrap gir ujevne bredder og venstrekanter
   som ikke moetes; her ligger punktene i rutenett og linjerer opp mot hverandre. */
.check-list--grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:14px 28px}
.check-list--grid li{padding-left:30px}
@media(max-width:560px){.check-list--grid{grid-template-columns:1fr}}
.x-list{list-style:none;padding:0;margin:0;display:grid;gap:14px}
.x-list li{position:relative;padding-left:34px;font-size:16px;color:var(--ink-2)}
.x-list li::before{content:"✕";position:absolute;left:0;top:-1px;width:22px;height:22px;border-radius:50%;background:var(--error-bg);color:var(--error);font-size:12px;font-weight:700;display:flex;align-items:center;justify-content:center}
.info-card{background:var(--white);border:2px solid var(--line);border-radius:var(--radius);padding:28px 26px}
.info-card h3{font-size:19px;margin-bottom:16px}
/* 400px minimum gir to brede kolonner i stedet for fire smale. Fire kolonner ga
   28 tegn per linje, som leses som avisspalte og lager rester nederst i kortene. */
.info-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,400px),1fr));gap:22px;margin-top:42px}
/* Aatte korte fordeler leses bedre som fire i bredden enn som to.
   Brukes der kortene har en linje overskrift og to linjer tekst. */
.info-grid--fire{grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.info-grid--fire .info-card{padding:22px 22px 24px;gap:10px}
/* To linjer avsatt til tittelen uansett lengde, saa ikonet, tittelen og
   teksten staar paa samme hoeyde i alle kortene i raden. */
.info-grid--fire .info-card h3{font-size:17px;line-height:1.3;min-height:2.6em}
.info-grid--tre{grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.info-grid--tre .info-card{padding:24px 24px 26px;gap:12px}
.info-grid--tre .info-card h3{font-size:18px;line-height:1.3}
@media (max-width:1100px){ .info-grid--fire,.info-grid--tre{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:560px){ .info-grid--fire,.info-grid--tre{grid-template-columns:1fr} }
.info-grid .info-card{display:flex;flex-direction:column;align-items:flex-start;gap:14px;padding:30px 32px 32px}
.info-grid .info-card h3{font-size:var(--t-h3);line-height:var(--t-h3-lh);margin:0;text-wrap:balance}
.info-grid .info-card p{margin:0;color:var(--muted);font-size:16px;line-height:1.68;text-wrap:pretty}
.info-grid .info-card ul{margin:0}
/* Ikonet staar paa egen linje. Inline ved siden av tittelen tvang lange titler
   til aa bryte rundt ikonet, med innrykk som ikke fulgte noen kant. */
.info-card__ic{flex-shrink:0;width:40px;height:40px;border-radius:50%;background:var(--brand);color:var(--on-brand);display:flex;align-items:center;justify-content:center}
.info-card__ic svg{width:20px;height:20px}
/* Ni steg gaar opp i tre like rader. To kolonner etterlot steg 9 alene. */
.process{list-style:none;counter-reset:p;padding:0;margin:42px 0 0;display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.process li{display:flex;gap:16px;align-items:flex-start;background:var(--white);border:2px solid var(--line);border-radius:12px;padding:22px 22px 24px}
.process li::before{counter-increment:p;content:counter(p);flex-shrink:0;width:34px;height:34px;border-radius:9px;background:var(--brand);color:var(--ink);font-family:var(--display);font-weight:800;display:flex;align-items:center;justify-content:center}
.process b{font-family:var(--display);font-size:16.5px;line-height:1.3;display:block;margin-bottom:5px;text-wrap:balance}
.process p{margin:0;color:var(--muted);font-size:14.5px;line-height:1.6;text-wrap:pretty}
/* I to kolonner blir siste steg staaende alene naar antallet er oddetall.
   Da lar vi det ta hele bredden, saa det leses som et bevisst siste steg. */
@media(max-width:1000px){
  .process{grid-template-columns:repeat(2,1fr)}
  .process li:last-child:nth-child(odd){grid-column:1/-1}
}
@media(max-width:620px){.process{grid-template-columns:1fr}}

/* ---------- Prosess med bilder ----------
   Vekselvis bilde og tekst. Bildet bytter side annenhver gang, slik at oeyet
   faar en rytme i stedet for en kolonne som gjentar seg ni ganger. */
.prosess__liste{list-style:none;counter-reset:pi;padding:0;margin:44px 0 0;display:grid;gap:26px;grid-auto-rows:1fr}
.prosess__steg{display:grid;grid-template-columns:1fr 1fr;gap:0;align-items:stretch;
  background:var(--white);border:2px solid var(--line);border-radius:var(--radius);overflow:hidden}
.prosess__steg:nth-child(even) .prosess__bilde{order:-1}
.prosess__tekst{padding:clamp(24px,3vw,38px);display:flex;flex-direction:column;justify-content:center;gap:10px}
.prosess__nr{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;
  border-radius:11px;background:var(--brand);color:var(--on-brand);
  font-family:var(--display);font-weight:800;font-size:17px}
.prosess__tittel{font-size:var(--t-h3);line-height:var(--t-h3-lh);margin:0;text-wrap:balance}
.prosess__tekst p{margin:0;color:var(--ink-2);font-size:var(--t-body);line-height:var(--t-body-lh);text-wrap:pretty}
.prosess__bilde{position:relative;margin:0;min-height:280px;background:var(--paper-2);overflow:hidden}
.prosess__bilde img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
@media (max-width:820px){
  .prosess__steg{grid-template-columns:1fr}
  /* Paa mobil skal bildet alltid ligge under teksten, ellers hopper rekkefolgen. */
  .prosess__steg:nth-child(even) .prosess__bilde{order:0}
  .prosess__bilde{min-height:0;aspect-ratio:16/10}
  .prosess__liste{grid-auto-rows:auto}
}

/* ---------- Bildeband i full bredde ---------- */
.bildeband__topp{margin-bottom:34px}
.bildeband__rad{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));gap:14px}
.bildeband--full .bildeband__rad{gap:6px}
.bildeband__figur{margin:0;overflow:hidden;background:var(--paper-2)}
.bildeband--full .bildeband__figur{border-radius:0}
.bildeband__figur:not(.bildeband--full *){border-radius:var(--radius);border:2px solid var(--line)}
.bildeband__figur img{width:100%;height:100%;object-fit:cover;display:block;aspect-ratio:4/3}
.bildeband--full .bildeband__figur img{aspect-ratio:3/2}
.bildeband--full{padding-left:0;padding-right:0}
.bildeband--full .bildeband__rad{max-width:none;padding:0}

/* ---------- Sticky prisboks ved siden av lang tekst ---------- */
/* Maa strekke seg over hele radhoyden, ellers har kortet ingen strekning
   aa feste seg langs. align-self slaar grid-ens align-items:center. */
.sticky-cta{align-self:stretch;position:relative}
/* Smalere spalte enn den vanlige hoyrekolonnen: kortet trenger ikke
   samme bredde som et bilde eller en punktliste. */
.problem__grid:has(.sticky-cta){grid-template-columns:1.1fr .6fr}
/* Bildet følger høyden på teksten ved siden av, i stedet for å ligge som en
   lav strimmel med tomrom under. Beskjæres fra midten. */
/* text-wrap:balance gjoer linjene like lange, og da fyller ikke overskriften
   kolonnen sin. I todelte tekstseksjoner skal den bruke hele bredden. */
.problem__grid .section__title{text-wrap:normal;max-width:none}
.problem__grid>.media{align-self:stretch}
.problem__grid>.media img{height:100%;object-fit:cover;min-height:340px}
.sticky-cta__inner{position:sticky;top:128px;background:var(--paper-2);border:2px solid var(--line);
  border-radius:var(--radius);padding:26px 24px;display:grid;gap:12px;justify-items:center;text-align:center}
.sticky-cta__ic{display:inline-flex;align-items:center;justify-content:center;width:46px;height:46px;
  border-radius:13px;background:var(--brand);border:2px solid var(--ink);color:var(--on-brand);margin-bottom:4px}
/* Knappene skal fortsatt fylle bredden selv om alt annet er sentrert. */
.sticky-cta__inner>.btn{justify-self:stretch}
.sticky-cta__ic svg{width:24px;height:24px}
.sticky-cta__label{margin:0;font-family:var(--display);font-weight:700;font-size:var(--t-small);
  line-height:var(--t-small-lh);letter-spacing:.02em;text-transform:uppercase;color:var(--ink)}
.sticky-cta__num{margin:0;font-family:var(--display);font-weight:800;font-size:clamp(28px,3.4vw,38px);
  line-height:1.05;color:var(--ink);letter-spacing:-.02em}
.sticky-cta__num span{font-size:.5em;font-weight:700;color:var(--ink-2);margin-left:.15em}
.sticky-cta__num a{color:inherit;text-decoration:none}
.sticky-cta__num a:hover{color:var(--brand-dark)}
.sticky-cta__txt{margin:0 0 4px;font-size:var(--t-small);line-height:var(--t-small-lh);color:var(--ink)}
.sticky-cta .btn{width:100%}
.sticky-cta__foot{margin:4px 0 0;text-align:center}
@media (max-width:940px){
  /* Under bruddet staar den ikke lenger ved siden av teksten, saa da skal den
     heller ikke feste seg. */
  .sticky-cta__inner{position:static}
}

/* ---------- Nyeste guide: bredt kort over rutenettet ---------- */
.nyeste{display:grid;grid-template-columns:1fr 1fr;gap:0;align-items:stretch;margin:38px 0 22px;
  background:var(--white);border:2px solid var(--line);border-radius:var(--radius);overflow:hidden;
  transition:transform .15s ease,border-color .15s ease}
.nyeste:hover{transform:translateY(-4px);border-color:var(--ink-2)}
.nyeste__bilde{position:relative;margin:0;min-height:280px;background:var(--paper-2);overflow:hidden}
.nyeste__bilde img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.nyeste__tekst{padding:clamp(26px,3vw,40px);display:flex;flex-direction:column;justify-content:center;gap:10px}
.nyeste__merke{align-self:flex-start;background:var(--brand);color:var(--on-brand);
  font-family:var(--display);font-weight:700;font-size:12.5px;letter-spacing:.04em;text-transform:uppercase;
  padding:5px 12px;border-radius:999px}
.nyeste__tekst h3{font-size:var(--t-h2);line-height:var(--t-h2-lh);letter-spacing:var(--t-h2-ls);margin:0;text-wrap:balance}
.nyeste__tekst p{margin:0;color:var(--ink-2);font-size:var(--t-body);line-height:var(--t-body-lh);text-wrap:pretty}
.nyeste__mer{font-family:var(--display);font-weight:700;font-size:var(--t-body);color:var(--ink)}
/* Uten bilde skal teksten fylle hele kortet, ikke la halve staa tom. */
.nyeste:not(:has(.nyeste__bilde)){grid-template-columns:1fr}
@media (max-width:820px){
  .nyeste{grid-template-columns:1fr}
  .nyeste__bilde{min-height:0;aspect-ratio:16/10;order:-1}
}

/* ---------- Tidslinje: prosess steg for steg ----------
   Nummer i sirkel med en linje mellom, saa rekkefolgen leses som et forlop og
   ikke som fem loesrevne avsnitt. Linja tegnes paa hvert steg unntatt det
   siste, saa den aldri henger igjen under det nederste nummeret. */
.tidslinje__liste{list-style:none;counter-reset:tl;padding:0;margin:44px 0 0;display:grid;gap:0}
.tidslinje__steg{position:relative;display:grid;grid-template-columns:56px 1fr;gap:22px;padding-bottom:34px}
.tidslinje__steg:last-child{padding-bottom:0}
.tidslinje__steg::before{content:"";position:absolute;left:27px;top:52px;bottom:-4px;width:2px;background:var(--line)}
.tidslinje__steg:last-child::before{display:none}
.tidslinje__nr{position:relative;z-index:1;display:flex;align-items:center;justify-content:center;
  width:56px;height:56px;border-radius:50%;background:var(--brand);color:var(--on-brand);
  font-family:var(--display);font-weight:800;font-size:22px;line-height:1}
.tidslinje__innhold{padding-top:6px;min-width:0}
.tidslinje__tittel{font-size:var(--t-h3);line-height:var(--t-h3-lh);margin:0 0 4px;text-wrap:balance}
.tidslinje__notat{display:inline-block;background:var(--paper-2);border:2px solid var(--line);
  color:var(--ink);font-family:var(--display);font-weight:700;font-size:12.5px;
  padding:3px 10px;border-radius:999px;margin-bottom:10px}
.tidslinje__tekst p{margin:0 0 12px;color:var(--ink-2);font-size:var(--t-body);line-height:var(--t-body-lh);text-wrap:pretty}
.tidslinje__tekst p:last-child{margin-bottom:0}
.tidslinje__tekst a{color:var(--ink);text-decoration:underline;text-underline-offset:2px}
.tidslinje__fot{margin:34px 0 0;padding:22px 24px;background:var(--paper-2);border:2px solid var(--line);
  border-radius:var(--radius);color:var(--ink);font-size:var(--t-body);line-height:var(--t-body-lh);text-wrap:pretty}
@media (max-width:620px){
  .tidslinje__steg{grid-template-columns:44px 1fr;gap:16px;padding-bottom:28px}
  .tidslinje__nr{width:44px;height:44px;font-size:18px}
  .tidslinje__steg::before{left:21px;top:42px}
}

/* ---------- Post/article cards (Artikler) ---------- */
.post-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:24px;margin-top:38px}
.post-card{display:flex;flex-direction:column;background:var(--white);border:2px solid var(--line);border-radius:14px;overflow:hidden;transition:transform .15s,box-shadow .2s}
.post-card:hover{transform:translateY(-4px);border-color:var(--ink-2)}
.post-card__img{aspect-ratio:16/10;overflow:hidden;background:var(--paper-2)}
.post-card__img img{width:100%;height:100%;object-fit:cover;transition:transform .35s ease}
.post-card:hover .post-card__img img{transform:scale(1.05)}
.post-card__img--tom{display:grid;place-items:center;background:linear-gradient(135deg,var(--ink) 0%,#1d211d 100%)}

/* Kjerneblokker fra standardeditoren skal se ut som resten av siden.
   Artikler skrives i Gutenberg, så knapper, lister og FAQ kommer som
   wp-block-*-markup i stedet for temaets egne klasser. */
.article__body .wp-block-group{margin-block:0}
/* Kort svar og innholdsfortegnelsen er ogsaa wp-block-group, og mistet
   bunnmargen sin til regelen over. De to boksene klistret seg da sammen. */
.article__body .article-tl,
.article__body .toc{margin-block:0 30px}
.article__body .wp-block-buttons{display:flex;gap:10px;flex-wrap:wrap;margin:0}
.article__body .wp-block-button{margin:0}
.article__body .wp-block-button__link{
  display:inline-flex;align-items:center;justify-content:center;gap:.5em;
  font-family:var(--display);font-weight:600;font-size:14px;line-height:1;
  padding:11px 18px;border-radius:999px;border:2px solid transparent;
  background:var(--brand);color:var(--ink);text-decoration:none;
  box-shadow:0 5px 0 var(--brand-edge);
  transition:transform .12s ease,box-shadow .2s ease,background .2s ease;
}
.article__body .wp-block-button__link:hover{background:var(--brand-light);transform:translateY(-2px);box-shadow:0 7px 0 var(--brand-edge),var(--shadow-sm)}
.article__body .wp-block-button__link:active{background:var(--brand-deep);transform:translateY(3px);box-shadow:0 2px 0 var(--brand-edge)}
.article__body .is-style-outline .wp-block-button__link{background:transparent;border-color:var(--ink);color:var(--ink);
  /* Samme sokkel som den primaere, bare i noytral tone. Uten den sto
     den gule knappen paa en 5px kant mens telefonknappen svevde, og
     de to leste seg som to ulike ting i stedet for et par. */
  box-shadow:0 5px 0 var(--line)}
.article__body .is-style-outline .wp-block-button__link:hover{background:var(--ink);color:#fff;box-shadow:0 7px 0 var(--line)}
.article__body .is-style-outline .wp-block-button__link:active{box-shadow:0 2px 0 var(--line)}
/* Gruppeblokken legger inn en wrapper, så flex-oppsettet må ligge på den.
   Tekst til venstre, knapper til høyre, som i resten av designet. */
.article__body .article-cta > .wp-block-group__inner-container{
  display:grid;grid-template-columns:1fr auto;align-items:center;gap:6px 22px;
}
.article__body .article-cta > .wp-block-group__inner-container > *{grid-column:1;margin:0}
.article__body .article-cta .wp-block-buttons{grid-column:2;grid-row:1 / -1;align-self:center}
@media (max-width:640px){
  .article__body .article-cta > .wp-block-group__inner-container{grid-template-columns:1fr}
  .article__body .article-cta .wp-block-buttons{grid-column:1;grid-row:auto;margin-top:10px}
}
.article__body .wp-block-details{padding:4px 22px}
.article__body .wp-block-details summary{list-style:none}
.article__body .wp-block-details > summary::marker,
.article__body .wp-block-details > summary::-webkit-details-marker{display:none;content:""}
.article__body .faq{margin:34px 0}
/* I artikler pakker WordPress detaljeblokkene inn i en egen beholder, saa
   gap paa .faq naar dem ikke. Da la boksene seg helt inntil hverandre.
   Avstand mellom naboer virker uansett hvor dypt de ligger. */
.article__body .faq__item+.faq__item{margin-top:12px}
.article__body .faq-tittel{margin-top:48px}
.article__body .wp-block-list{margin:0 0 1.1em;padding-left:1.3em}
/* Innholdsfortegnelse: hoppelenker i lange guider */
.article__body .toc{background:var(--paper-2);border:2px solid var(--line);border-radius:var(--radius-sm);padding:18px 22px;margin:0 0 30px}
.article__body .toc__label{font-family:var(--display);font-weight:700;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink);margin:0 0 8px}
.article__body .toc .wp-block-list{margin:0;padding-left:1.1em}
.article__body .toc li{margin:0 0 5px;font-size:15px}
.article__body .toc a{color:var(--ink-2);text-decoration:none;border-bottom:2px solid transparent}
.article__body .toc a:hover{color:var(--ink);border-bottom-color:var(--brand)}
.article__body h2[id]{scroll-margin-top:96px}
.post-card__ph{font-family:var(--display);font-weight:700;font-size:.95rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2)}
.post-card__body{padding:20px 22px 24px;display:flex;flex-direction:column;flex:1}
.post-card__tag{align-self:flex-start;background:var(--brand-100);color:var(--ink);font-family:var(--display);font-weight:600;font-size:12px;padding:4px 11px;border-radius:999px;margin-bottom:12px}
.post-card h3{font-size:18px;line-height:1.25;margin-bottom:10px}
.post-card p{font-size:14.5px;color:var(--muted);margin:0 0 16px;flex:1}
.post-card__more{font-family:var(--display);font-weight:600;font-size:14.5px;color:var(--ink)}

/* ---------- Team cards (Kontakt) ---------- */
.team-dept{font-family:var(--display);font-weight:700;font-size:22px;margin:48px 0 4px}
.team-dept:first-of-type{margin-top:36px}
/* Fire per rad. Salg har aatte personer, som da blir to hele rader. */
.team-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:34px 20px;margin-top:26px}
@media (max-width:900px){.team-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:480px){.team-grid{grid-template-columns:1fr}}
/* Seksjonen ligger paa BG Stack 1, saa de hvite kortene loefter seg fra
   flaten. Paa hvit bakgrunn ville bare kanten skilt dem fra siden. */
.team-seksjon{background:var(--paper-2)}
/* Tonet flate: sekundaertekst maa opp fra 4,2:1 til Prio 1. */
.team-seksjon{--muted:var(--ink);--ink-2:var(--ink)}
/* Kortene staar paa hvitt inni, saa der gjelder den vanlige skalaen igjen. */
.team-seksjon .team-card{--muted:#73738c;--ink-2:#73738c}

/* Kort med kant rundt, men portrettet i en gul sirkel inni. Den firkantede
   rammen kuttet hodene i underkant, fordi bildene er portretter. */
.team-card{display:flex;flex-direction:column;background:var(--white);border:2px solid var(--line);
  border-radius:var(--radius);padding:26px 18px 24px;text-align:center;
  transition:border-color .15s ease,transform .15s ease}
.team-card:hover{border-color:var(--ink-2);transform:translateY(-3px)}
.team-card__img{width:150px;height:150px;margin:0 auto;border-radius:50%;background:var(--brand);overflow:hidden;position:relative}
.team-card__img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 18%}
.team-card__body{display:flex;flex-direction:column;flex:1;padding:16px 0 0}
.team-card__name{font-family:var(--display);font-weight:700;font-size:16.5px}
.team-card__role{font-size:13px;color:var(--muted);margin:2px 0 12px}
/* Spraakene som flagg. Kundene vil vite om de kan ringe og bli forstaatt,
   og et flagg leses raskere enn en setning. */
.team-card__lang{list-style:none;display:flex;flex-wrap:wrap;justify-content:center;gap:7px;padding:0;margin:0 0 12px}
.team-card__lang li{display:flex}
.flagg{display:inline-flex;width:24px;height:16px;border-radius:3px;overflow:hidden;
  border:1px solid var(--line);line-height:0}
.flagg svg{width:100%;height:100%;display:block}
/* Skjult for oeyet, lest av skjermlesere. Et flagg alene sier ikke hvilket
   spraak det er, saa navnet maa vaere tilgjengelig. */
.visuelt-skjult{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
.team-card__links{display:flex;flex-direction:column;gap:7px;font-size:13.5px;margin-top:auto}
.team-card__links a{color:var(--ink-2);display:inline-flex;align-items:center;justify-content:center;gap:7px}
.team-card__links a:hover{color:var(--ink)}
.team-card__links svg{width:15px;height:15px;flex-shrink:0}

/* ---------- Contact method cards ---------- */
.contact-methods{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:20px;margin-top:8px}
.contact-method{background:var(--white);border:2px solid var(--line);border-radius:14px;padding:26px 24px}
.contact-method__ic{width:46px;height:46px;border-radius:12px;background:var(--brand);color:var(--ink);display:flex;align-items:center;justify-content:center;margin-bottom:16px}
.contact-method__ic svg{width:22px;height:22px}
.contact-method h3{font-size:16px;margin-bottom:5px}
.contact-method a{font-family:var(--display);font-weight:700;font-size:18px;color:var(--ink);word-break:break-word}
.contact-method a:hover{color:var(--ink)}
.contact-method p{font-size:14px;color:var(--muted);margin:5px 0 0}

/* ---------- Steps ---------- */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:40px}
.step{background:var(--white);border:2px solid var(--line);border-radius:var(--radius);padding:22px 22px 26px}
.step__no{position:absolute;top:12px;left:12px;z-index:2;display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:11px;background:var(--brand);color:var(--ink);font-family:var(--display);font-weight:800;font-size:19px;box-shadow:0 0 0 4px #eef0e6,0 4px 12px rgba(230,182,25,.45)}
.step h3{font-size:20px;margin-bottom:8px}
.step p{margin:0;color:var(--muted);font-size:15.5px}

/* Animated step illustrations */
.step__viz{position:relative;height:150px;margin-bottom:22px;border-radius:12px;overflow:hidden;background:#eef0e6;border:2px solid var(--line)}
.step__viz::before{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(31,31,46,.07) 1px,transparent 1px);background-size:16px 16px;opacity:.7}
.step__viz .viz{position:relative;display:block;width:100%;height:100%}
/* Ingen film, intet bilde, ingen figur: da skal ruta ikke tegnes. Et tomt
   graatt felt med et tall i ser ut som et bilde som ikke lastet. */
.step__viz--tom{height:auto;margin-bottom:14px;background:none;border:0;overflow:visible}
.step__viz--tom::before{display:none}
.step__viz--tom .step__no{position:static;display:inline-flex;box-shadow:0 4px 12px rgba(230,182,25,.45)}
/* Staaende film i stedet for tegnet figur. Boksen faar hoeyden fra formatet,
   og prikkemoensteret slaas av siden filmen dekker hele flaten. */
/* Steg med foto. Boksen paa 150 px er laget for en tegnet figur og blir en
   stripe naar den fylles med et bilde, saa fotostegene faar 4:3 i stedet. */
.steps--bilde .step__viz{height:auto;aspect-ratio:4/3;background:var(--ink)}
.steps--bilde .step__viz::before{display:none}
.step__viz img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.steps--film .step__viz{height:auto;aspect-ratio:2/3;background:var(--ink)}
.steps--film .step__viz::before{display:none}
.step__viz--film video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
/* Play-knappen. Filmen ligger stille bak plakaten til kunden trykker; da
   faar knappen klassen er-i-gang og trekker seg bort. Den ligger over
   nummeret, saa trykkflaten er hele ruta og ikke bare sirkelen. */
.step__viz--film{cursor:pointer}
.step__play{position:absolute;left:50%;top:50%;z-index:3;width:68px;height:68px;
  padding:0;border:0;border-radius:50%;cursor:pointer;display:grid;place-items:center;
  background:var(--brand);color:var(--ink);transform:translate(-50%,-50%);
  box-shadow:0 10px 26px rgba(0,0,0,.4);transition:transform .2s ease,opacity .2s ease}
.step__play svg{width:30px;height:30px;fill:currentColor;margin-left:4px}
.step__play:hover,.step__play:focus-visible{transform:translate(-50%,-50%) scale(1.09)}
.step__viz--film.er-i-gang .step__play{opacity:0;pointer-events:none;transform:translate(-50%,-50%) scale(.7)}
@media (prefers-reduced-motion:reduce){.step__play{transition:none}}
.steps--film .step{display:flex;flex-direction:column}
/* Tekstene starter paa samme linje i alle tre kortene. Aa skyve dem ned mot
   bunnen ga et tydeligere sprang enn den ene linjen det skulle rette opp. */
.steps--film .step p{margin-top:0}
@media (max-width:900px){
  .steps--film .step__viz{aspect-ratio:3/4}
}
.viz-scan{filter:drop-shadow(0 0 5px rgba(255,214,31,.85))}
.viz-cleanbar{filter:drop-shadow(0 0 7px rgba(120,205,230,.85))}
.viz-dia{filter:drop-shadow(0 0 6px rgba(255,214,31,.6))}
.viz-check,.viz-spark,.viz-glow{transform-box:fill-box;transform-origin:center}
@media (prefers-reduced-motion:no-preference){
  .viz-scan{animation:vizScan 3.4s ease-in-out infinite}
  .viz-mag{animation:vizMag 3.4s ease-in-out infinite}
  .viz-check{animation:vizPop 3.4s ease-in-out infinite}
  .viz-hi{animation:vizHi 3.4s ease-in-out infinite}
  .viz-hi2{animation-delay:.5s}
  .viz-cleanbar{animation:vizCleanBar 3s linear infinite}
  .viz-moss{animation:vizMoss 3s ease-in-out infinite}
  .viz--clean .viz-spark{animation:vizSpark 3s ease-in-out infinite 1.3s}
  .viz-glow{animation:vizGlow 2.6s ease-in-out infinite}
  .viz-glint{animation:vizGlint 2.6s ease-in-out infinite}
  .viz--seal .viz-spark{animation:vizSpark 2.2s ease-in-out infinite}
  .viz-drop{animation:vizDrop 2.4s ease-in infinite}
}
@keyframes vizScan{0%{transform:translateY(0);opacity:.15}15%{opacity:.9}50%{transform:translateY(112px);opacity:.9}62%{opacity:0}100%{transform:translateY(0);opacity:0}}
@keyframes vizMag{0%{transform:translate(50px,108px)}50%{transform:translate(196px,54px)}100%{transform:translate(50px,108px)}}
@keyframes vizPop{0%,45%{opacity:0;transform:scale(.5)}60%,88%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(.5)}}
@keyframes vizHi{0%,100%{opacity:0}50%{opacity:1}}
@keyframes vizCleanBar{0%{transform:translateX(-24px)}100%{transform:translateX(252px)}}
@keyframes vizMoss{0%{opacity:1}22%{opacity:0}86%{opacity:0}100%{opacity:1}}
@keyframes vizSpark{0%,100%{opacity:0;transform:scale(.4)}50%{opacity:1;transform:scale(1)}}
@keyframes vizGlow{0%,100%{opacity:.55;transform:scale(.9)}50%{opacity:1;transform:scale(1.08)}}
@keyframes vizGlint{0%{transform:translateX(-32px)}100%{transform:translateX(72px)}}
@keyframes vizDrop{0%{transform:translateY(-16px);opacity:0}18%{opacity:1}68%{transform:translateY(96px);opacity:1}84%{transform:translateY(82px);opacity:.5}100%{transform:translateY(82px);opacity:0}}

/* ---------- Calculator ---------- */
.calc-section{background:var(--paper-2);color:var(--ink)}
.calc-section .section__lead{color:var(--ink-2)}
.calc-section .hl{color:var(--ink)}
.calc{display:grid;grid-template-columns:.92fr 1.08fr;gap:48px;align-items:center}
.calc__intro .eyebrow{color:var(--ink-2)}
.calc-section .check-list li{color:var(--ink)}
.calc-section .check-list li::before{background:var(--brand);color:var(--on-brand)}
.calc__usp{list-style:none;padding:0;margin:22px 0 0;display:grid;gap:12px;font-size:15.5px;color:var(--ink)}
.calc__usp li{position:relative;padding-left:34px;line-height:1.5}
.calc__usp li::before{content:"✓";position:absolute;left:0;top:-1px;width:22px;height:22px;border-radius:50%;
  background:var(--brand);color:var(--on-brand);font-size:13px;font-weight:700;
  display:flex;align-items:center;justify-content:center}
.calc__card{background:var(--white);color:var(--ink);border-radius:18px;padding:28px;border:2px solid var(--line)}
.calc__field{border:0;padding:0;margin:0 0 22px}
.calc__field legend{font-family:var(--display);font-weight:700;font-size:15px;margin-bottom:12px;padding:0}
.chip-group{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
/* Seks tjenester passer ikke i tre kolonner uten aa bli hoye og smale. */
.chip-group--tjenester{grid-template-columns:repeat(3,1fr)}
/* Samme ikon som i Tjenester-menyen, saa tjenesten kjennes igjen. */
.chip__ic{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;
  border-radius:10px;background:var(--paper-2);border:2px solid var(--line);color:var(--ink);
  margin-bottom:2px;transition:background .15s,border-color .15s}
.chip__ic svg{width:19px;height:19px}
.chip input:checked+span .chip__ic{background:var(--brand);border-color:var(--ink);color:var(--on-brand)}
.chip span b{font-family:var(--display);font-weight:700;font-size:14px;line-height:1.25}
@media (max-width:700px){.chip-group--tjenester{grid-template-columns:1fr 1fr}}
.calc__save[hidden]{display:none}
.chip{position:relative;cursor:pointer}
.chip input{position:absolute;opacity:0;inset:0;cursor:pointer}
.chip span{display:flex;flex-direction:column;gap:3px;align-items:center;text-align:center;padding:13px 8px;border:2px solid var(--line);border-radius:var(--radius-sm);background:var(--white);font-family:var(--display);font-weight:600;font-size:14px;transition:.15s}
.chip span small{font-weight:500;font-size:11.5px;color:var(--muted)}
.chip input:checked+span{border-color:var(--ink);background:var(--brand-100);box-shadow:0 0 0 3px rgba(255,214,31,.35)}
.chip input:focus-visible+span{outline:2px solid var(--ink)}
.range-wrap{display:flex;align-items:center;gap:16px}
input[type=range]{-webkit-appearance:none;appearance:none;height:6px;border-radius:99px;background:var(--line);flex:1;outline:none}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:24px;height:24px;border-radius:50%;background:var(--brand);border:3px solid var(--ink);cursor:pointer}
input[type=range]::-moz-range-thumb{width:22px;height:22px;border-radius:50%;background:var(--brand);border:3px solid var(--ink);cursor:pointer}
.range-wrap output{font-family:var(--display);font-weight:700;font-size:18px;min-width:82px;text-align:right;font-variant-numeric:tabular-nums}
.calc__hint{font-size:13px;color:var(--muted);margin:10px 0 0}
/* Hvit boks, ikke gul. Gult her konkurrerte med den gule knappen rett under,
   saa oeyet fikk to like sterke flater ved siden av hverandre. */
.calc__result{background:var(--paper-2);color:var(--ink);border:2px solid var(--line);border-radius:14px;padding:20px 22px;margin:6px 0 20px;display:grid;gap:12px}
.calc__price{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
/* Ved siden av hverandre brakk etiketten i to linjer mot et prisspenn
   som selv tar to linjer. Over prisen leses den paa en linje. */
@media (max-width:560px){
  .calc__price{display:block}
  .calc__price-label{display:block;margin-bottom:2px}
  .calc__price-val{display:block}
}
.calc__price-label{font-size:14px;color:var(--ink)}
.calc__price-val{font-family:var(--display);font-weight:800;font-size:clamp(20px,2.6vw,28px);white-space:nowrap;color:var(--ink)}
.calc__save{display:flex;justify-content:space-between;align-items:baseline;gap:12px;border-top:2px solid var(--line);padding-top:12px;font-size:14px}
.calc__save-label{color:var(--ink)}
.calc__save-val s{color:var(--ink-2);margin-right:8px}
.calc__save-val b{color:var(--ink)}
.calc__disclaimer{font-size:12px;color:var(--muted);text-align:center;margin:12px 0 0}

/* ---------- Kalkulatorens trinn ---------- */
.calc__steg[hidden]{display:none}

/* ============================================================
   KALKULATORENS FOERSTE STEG
   ------------------------------------------------------------
   Sju felt under hverandre ble en lang rulling, og prisen laa
   nederst der man ikke saa den mens man svarte. Nedtrekkene
   staar derfor i to spalter fra 780 piksler og opp, mens
   behandling, areal og prisen tar full bredde. Paa mobil er det
   fortsatt en spalte: to nedtrekk ved siden av hverandre paa en
   telefon blir for smalt til aa lese underteksten.
   ============================================================ */
@media (min-width:781px){
  .calc__steg--valg{display:grid;grid-template-columns:1fr 1fr;column-gap:20px;align-items:start}
  .calc__steg--valg>*{grid-column:1 / -1}
  .calc__steg--valg>.calc__sp{grid-column:auto}
  /* Klassen settes av JS, se stellSporsmal i app.js. */
  .calc__steg--valg>.calc__sp--bred{grid-column:1 / -1}
}

/* Valget paa to linjer ga hoye bokser: «Lite» over «saa vidt synlig». I
   spoersmaalene staar de to paa samme linje med et skilletegn imellom, saa
   feltet blir en droy halvpart saa hoyt uten at forklaringen forsvinner. */
.kalkvelg--linje .kalkvelg__knapp{padding:12px 15px;gap:10px}
.kalkvelg--linje .kalkvelg__txt{display:flex;align-items:baseline;gap:7px;min-width:0}
.kalkvelg--linje .kalkvelg__txt b{display:inline;font-size:15px;flex:0 0 auto}
.kalkvelg--linje .kalkvelg__txt small{display:inline;margin:0;font-size:13px;color:var(--ink-2);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.kalkvelg--linje .kalkvelg__opt{padding:9px 10px}
.kalkvelg--linje .kalkvelg__otxt{display:flex;align-items:baseline;gap:7px;min-width:0}
.kalkvelg--linje .kalkvelg__otxt b{display:inline;flex:0 0 auto}
.kalkvelg--linje .kalkvelg__otxt small{display:inline;margin:0;min-width:0;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* Omraadene har ingen forklaring. Da skal heller ikke skilletegnet vises. */
.kalkvelg--linje small:not(:empty)::before{content:"\00b7";margin-right:7px;color:var(--line-2,#c9c9d6)}
.kalkvelg--linje small:empty{display:none}
.calc__tilbake{margin:0 0 16px}
.calc__tilbake-knapp{background:none;border:0;padding:0;cursor:pointer;font-family:var(--display);
  font-weight:700;font-size:var(--t-small);color:var(--ink-2)}
.calc__tilbake-knapp:hover{color:var(--ink)}
.calc__oppsummering{display:grid;gap:2px;background:var(--brand-100);border:2px solid var(--brand);
  border-radius:12px;padding:16px 18px;margin-bottom:18px}
.calc__oppsummering span{font-size:var(--t-small);color:var(--ink-2)}
.calc__oppsummering b{font-family:var(--display);font-weight:800;font-size:22px;line-height:1.15;color:var(--ink)}
.calc__oppsummering small{font-size:var(--t-small);color:var(--ink-2)}
.calc__steg-lead{margin:0 0 18px;font-size:var(--t-small);line-height:var(--t-small-lh);color:var(--ink-2)}
.calc__steg .field{margin-bottom:14px}
.calc__steg input.is-feil{border-color:var(--error);box-shadow:0 0 0 3px rgba(234,71,71,.18)}
.calc__takk{text-align:center;padding:18px 0 6px}
.calc__takk-ikon{display:inline-flex;align-items:center;justify-content:center;width:64px;height:64px;
  border-radius:50%;background:var(--brand);color:var(--on-brand);font-size:32px;margin-bottom:16px}
.calc__takk h3{font-size:var(--t-h3);line-height:var(--t-h3-lh);margin:0 0 8px}
.calc__takk p{margin:0 0 10px;color:var(--ink-2);font-size:var(--t-body);line-height:var(--t-body-lh)}


/* ---------- Videorad ---------- */
.videorad .eyebrow{justify-content:center;width:100%}
.videorad__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:38px}
.videorad__item{margin:0;display:grid;gap:12px}
.videorad__item video{display:block;width:100%;aspect-ratio:9/16;object-fit:cover;
  border-radius:var(--radius);border:2px solid var(--line);background:var(--paper-2)}
.videorad__item figcaption{font-size:var(--t-small);line-height:var(--t-small-lh);color:var(--ink-2);text-align:center}
@media (max-width:820px){.videorad__grid{grid-template-columns:1fr 1fr;gap:16px}}
/* Paa mobil ble tredje klipp staaende alene med et tomrom ved siden av.
   Her ligger de tre paa rad og dras sideveis med tommelen. Klippene fester
   seg med snap, saa man alltid lander paa et helt klipp. Stripa gaar helt ut
   i kanten, slik at det neste klippet titter fram og inviterer til draget. */
@media (max-width:760px){
  .videorad__grid{display:flex;gap:14px;margin-top:28px;
    overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:22px;
    padding-inline:22px;margin-inline:-22px;
    -webkit-overflow-scrolling:touch;overscroll-behavior-x:contain;
    scrollbar-width:none}
  .videorad__grid::-webkit-scrollbar{display:none}
  .videorad__item{flex:0 0 min(72%,260px);scroll-snap-align:start}
}

/* ---------- Registerliste med sidemeny (personvern) ---------- */
.registre__topp{max-width:760px;margin-bottom:38px}
.registre__grid{display:grid;grid-template-columns:270px minmax(0,1fr);gap:44px;align-items:start}
.registre__meny{position:sticky;top:118px}
.registre__meny-tittel{margin:0 0 14px;font-family:var(--display);font-weight:800;font-size:var(--t-small);
  letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2)}
.registre__meny ul{list-style:none;padding:0;margin:0;display:grid;gap:6px}
.registre__meny a{display:block;padding:12px 15px;border-radius:12px;border:2px solid transparent;
  font-family:var(--display);font-weight:600;font-size:var(--t-small);line-height:1.35;
  color:var(--ink-2);transition:background .15s,color .15s,border-color .15s}
.registre__meny a:hover{background:var(--paper-2);color:var(--ink)}
.registre__meny a.is-paa{background:var(--brand-100);border-color:var(--brand);color:var(--ink);font-weight:800}
.registre__panel{border:2px solid var(--line);border-radius:var(--radius);background:var(--white);padding:34px 38px}
.registre__panel+.registre__panel{margin-top:22px}
.registre__panel[hidden]{display:none}
.registre__panel:focus{outline:none}
.registre__tittel{font-size:var(--t-h2);line-height:var(--t-h2-lh);margin:0 0 22px;
  padding-bottom:16px;border-bottom:2px solid var(--line)}
.registre .prose h3{font-size:var(--t-h3);line-height:var(--t-h3-lh);margin:30px 0 10px}
.registre .prose h4{font-size:var(--t-body);line-height:1.4;font-weight:800;margin:22px 0 8px}
.registre .prose>p,.registre .prose ul{max-width:70ch}
.registre .prose p{margin:0 0 14px}
.registre .prose ul{margin:0 0 16px;padding-left:22px;display:grid;gap:7px}
.registre .prose li{line-height:1.55}
@media (max-width:900px){
  .registre__grid{grid-template-columns:minmax(0,1fr);gap:26px}
  .registre__meny{position:static}
  .registre__meny ul{grid-template-columns:1fr 1fr;gap:8px}
  .registre__panel{padding:26px 22px}
}
@media (max-width:520px){.registre__meny ul{grid-template-columns:1fr}}

/* ---------- Comparison ---------- */
.table-scroll{overflow-x:auto;margin-top:34px;border-radius:var(--radius);border:2px solid var(--line)}
.compare{width:100%;border-collapse:collapse;background:var(--white);min-width:640px}
/* Etiketten med tjenestenavn hoerer bare til mobilvisningen. Paa desktop
   staar navnet i kolonneoverskriften og skal ikke gjentas i hver celle.
   Regelen maa staa foer mobilblokka, ellers vinner den ogsaa der. */
.compare td .compare__kol{display:none}
.compare th,.compare td{padding:16px 18px;text-align:left;border-bottom:1px solid var(--line);font-size:15px}
.compare thead th{font-family:var(--display);font-size:16px;vertical-align:bottom}
.compare tbody th{font-weight:600;color:var(--ink-2)}
.compare td{color:var(--muted)}
.compare__best{background:var(--brand-100)}
.compare thead .compare__best{border-top:3px solid var(--brand)}
.compare td.compare__best{color:var(--ink);font-weight:600}
.badge{display:inline-block;background:var(--brand);color:var(--ink);font-family:var(--font);font-size:11px;font-weight:600;padding:3px 9px;border-radius:999px;vertical-align:middle;margin-left:6px}

/* ---------- Dark section / gallery ---------- */
.section--dark{background:var(--brand);color:var(--ink)}
.section--dark .eyebrow{color:var(--ink)}
.section--dark .eyebrow__dot{background:var(--ink);box-shadow:0 0 0 4px rgba(31,31,46,.15)}
.section--dark .section__lead{color:rgba(31,31,46,.78)}
.section--dark .btn--primary{--bg:var(--ink);--fg:var(--white);box-shadow:0 6px 0 rgba(0,0,0,.35)}
.section--dark .btn--primary:hover{--bg:var(--ink-2);box-shadow:0 8px 0 rgba(0,0,0,.35),var(--shadow-sm)}
.section--dark .btn--primary:active{box-shadow:0 2px 0 rgba(0,0,0,.35);transform:translateY(4px)}
.gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:38px}
.gallery__item{margin:0;border-radius:var(--radius);overflow:hidden;background:#fff;border:2px solid rgba(31,31,46,.08)}
.gallery__item img{aspect-ratio:3/2;object-fit:cover;width:100%}
.gallery__item figcaption{padding:12px 16px;font-size:14px;font-weight:500}

/* ---------- Reviews ---------- */
.reviews{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:38px}
.review{margin:0;background:var(--white);border:2px solid var(--line);border-radius:var(--radius);padding:26px}
.review__stars{color:var(--brand-edge);letter-spacing:2px;font-size:17px;margin-bottom:12px}
.trust-row__star,.review__stars,.footer-rating__stars{text-shadow:0 0 1px rgba(31,31,46,.28)}
.review p{font-size:15.5px;margin:0 0 16px}
.review footer{font-size:14px;font-weight:600;color:var(--ink)}
/* ---------- Anmeldelsesmur ----------
   Tre rader som glir hver sin vei. Hver rad inneholder kortene to ganger,
   og sporet flyttes nøyaktig halve bredden, slik at sløyfen går rundt uten
   et synlig hopp. Kortene har fast bredde og klippet tekst, ellers spriker
   de fra to til fjorten linjer og muren ser rotete ut. */
.revmur{display:grid;gap:16px;margin-top:34px}
.revmur__rad{overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
.revmur__spor{display:flex;gap:16px;width:max-content;animation:revrull var(--fart,64s) linear infinite}
.revmur__rad--mot .revmur__spor{animation-direction:reverse}
@keyframes revrull{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}
.revmur:hover .revmur__spor,.revmur__spor:focus-within{animation-play-state:paused}

.revkort{flex:0 0 328px;width:328px;margin:0;position:relative;
  background:var(--white);border:2px solid var(--line);border-radius:var(--radius);
  padding:20px 22px 18px;display:flex;flex-direction:column;gap:10px}
.revkort__logo{position:absolute;top:16px;right:18px;display:inline-flex;line-height:0;opacity:.9}
.revkort .review__stars{margin:0;padding-right:26px}
.revkort blockquote{margin:0;font-size:15px;line-height:1.55;color:var(--muted);
  display:-webkit-box;-webkit-line-clamp:5;-webkit-box-orient:vertical;overflow:hidden;min-height:7.1em}
.revkort figcaption{margin-top:auto;font-size:13.5px;font-weight:700;color:var(--ink)}
.revkort figcaption span{font-weight:400;color:var(--ink-3)}

@media (max-width:700px){
  .revkort{flex-basis:270px;width:270px}
  .revmur{gap:12px}
}
/* Den som har slått av bevegelse i systemet skal slippe en mur som ruller. */
@media (prefers-reduced-motion:reduce){
  .revmur__spor{animation:none;flex-wrap:wrap;width:auto;justify-content:center}
  .revmur__rad{mask-image:none;-webkit-mask-image:none}
  .revmur__rad+.revmur__rad{display:none}
}

/* Kildemerke paa ekte anmeldelser. Google-navnet gjoer sitatet etterproevbart,
   og lenken gaar til anmeldelsen slik den staar hos Google. */
.review__kilde{display:inline-block;margin-left:8px;padding:2px 8px;border-radius:99px;
  background:var(--paper-2,#f2f2f6);color:var(--ink-2);font-size:11.5px;font-weight:700;
  letter-spacing:.03em;text-decoration:none;vertical-align:1px}
a.review__kilde:hover{background:var(--brand);color:var(--ink)}
.review footer span{color:var(--muted);font-weight:400}
.reviews__note{text-align:center;margin-top:26px;color:var(--muted);font-size:14px}

/* ---------- Guarantee ---------- */
.guarantee{background:var(--paper-2)}
.guarantee__inner{display:grid;grid-template-columns:auto 1fr;gap:44px;align-items:center}
.guarantee__seal{position:relative;width:172px;height:172px;flex-shrink:0;filter:drop-shadow(0 10px 22px rgba(31,31,46,.22))}
.seal-badge{display:block;width:100%;height:100%}
@media (prefers-reduced-motion:no-preference){.seal-glint{animation:sealGlint 4.2s ease-in-out infinite}}
@keyframes sealGlint{0%{transform:translateX(-8px)}40%,100%{transform:translateX(24px)}}

/* ---------- About ----------
   Tallene laa foer loest paa seksjonsbakgrunnen, som er nesten samme graa som
   seksjonen over. Da fikk oeyet ingen kant aa lese dem mot. Naa ligger de i ett
   hvitt kort med haarfine skiller, og beskrivelsen har sin egen sone under.  */
.about{text-align:center}
.about__inner{background:var(--white);border:2px solid var(--line);border-radius:var(--radius);padding:clamp(30px,3.6vw,44px) clamp(22px,3vw,40px)}
.about__stats{display:grid;grid-template-columns:repeat(4,1fr);gap:0}
.about__stats>div{position:relative;padding:2px 18px}
.about__stats>div+div::before{content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);width:1px;height:56px;background:var(--line)}
.about__num{display:block;font-family:var(--display);font-weight:800;font-size:clamp(28px,3.6vw,40px);line-height:1.05;letter-spacing:-.02em;color:var(--ink);font-variant-numeric:tabular-nums}
.about__star{color:var(--brand-edge);font-size:.72em;vertical-align:.14em;margin-left:.1em}
.about__lbl{display:block;margin-top:9px;font-size:13.5px;line-height:1.35;color:var(--muted)}
.about__text{max-width:64ch;margin:clamp(26px,3vw,34px) auto 0;padding-top:clamp(26px,3vw,34px);border-top:2px solid var(--line);color:var(--muted);font-size:15.5px;line-height:1.7;text-wrap:pretty}
.about__text p{margin:0}
.about__text strong,.about__text b{color:var(--ink)}
.about__text em{color:var(--ink);font-style:normal;font-weight:600}
@media (max-width:820px){
  /* Skillelinjene gir bare mening naar radene er hele. */
  .about__stats{grid-template-columns:1fr 1fr;gap:28px 0}
  .about__stats>div+div::before{display:none}
  .about__stats>div:nth-child(even)::before{display:block}
}

/* ---------- FAQ ---------- */
.faq{margin-top:32px;display:grid;gap:12px}
.faq__item{background:var(--white);border:2px solid var(--line);border-radius:var(--radius-sm);padding:4px 22px;
  transition:border-color .18s ease,background .18s ease}
.faq__item summary{list-style:none;cursor:pointer;font-family:var(--display);font-weight:600;font-size:17px;padding:18px 46px 18px 0;position:relative;
  transition:color .15s ease}
.faq__item summary::-webkit-details-marker{display:none}

/* Hele raden reagerer paa musepekeren, ikke bare teksten, saa det er tydelig
   at boksen kan aapnes. */
.faq__item:hover{border-color:var(--ink-3);background:var(--paper-2)}
.faq__item:hover summary{color:var(--ink)}
.faq__item summary:focus-visible{outline:2px solid var(--ink);outline-offset:4px;border-radius:6px}

/* Aapen boks er merket med merkevarefargen, saa man ser hvor man er i lista. */
.faq__item[open]{border-color:var(--brand);background:var(--brand-100)}
.faq__item[open]:hover{border-color:var(--brand-dark)}
.faq__item[open] summary{color:var(--ink);font-weight:700}
.faq__item[open] p{color:var(--ink)}

/* Plusstegnet ligger i en sirkel og roterer til et kryss naar boksen aapnes. */
.faq__item summary::after{content:"+";position:absolute;right:0;top:50%;margin-top:-16px;
  width:32px;height:32px;line-height:28px;text-align:center;border-radius:50%;
  background:var(--paper-2);border:2px solid var(--line);
  font-size:21px;font-weight:400;color:var(--ink);
  transition:transform .3s cubic-bezier(.22,.61,.36,1),background .18s ease,border-color .18s ease}
.faq__item:hover summary::after{background:var(--white);border-color:var(--ink-3)}
.faq__item[open] summary::after{transform:rotate(45deg);background:var(--brand);border-color:var(--ink)}
.faq__item p{margin:0;padding-bottom:18px;color:var(--muted);font-size:15.5px;overflow:hidden;transition:height .32s cubic-bezier(.22,.61,.36,1),opacity .24s ease,padding-bottom .32s cubic-bezier(.22,.61,.36,1)}
/* Svar med flere avsnitt eller en liste: boksen animeres, ikke avsnittene. */
.faq__svar{padding-bottom:18px;color:var(--muted);font-size:15.5px;overflow:hidden;transition:height .32s cubic-bezier(.22,.61,.36,1),opacity .24s ease,padding-bottom .32s cubic-bezier(.22,.61,.36,1)}
.faq__svar p{padding-bottom:0;transition:none}
.faq__svar p+p,.faq__svar ul{margin-top:11px}
.faq__svar ul{margin-bottom:0;padding-left:20px;display:grid;gap:7px}
.faq__svar li{color:inherit}
.faq__item[open] .faq__svar{color:var(--ink)}

/* ---------- Final CTA + lead form ---------- */
.cta-final{background:var(--paper-2);color:var(--ink)}
.cta-final .section__lead{color:var(--ink)}
.cta-final .hl{color:var(--ink);background:linear-gradient(180deg,transparent 60%,var(--brand) 60%)}
.cta-final__grid{display:grid;grid-template-columns:1fr .9fr;gap:52px;align-items:center}
.cta-final .eyebrow{color:var(--ink)}
.cta-final .check-list li{color:var(--ink)}
.cta-final .check-list li::before{background:var(--brand);color:var(--on-brand)}
.cta-final__call{margin-top:26px;padding-top:22px;border-top:2px solid var(--line);display:flex;flex-direction:column;gap:4px}
.cta-final__call span{font-size:14px;color:var(--ink)}
.cta-final__call .link-phone{color:var(--ink)}

.lead{background:var(--white);color:var(--ink);border:2px solid var(--line);border-radius:18px;padding:26px}
/* Trinnteller og segmentert framdrift. En sammenhengende stripe sier ikke hvor
   mange steg som gjenstaar, tre segmenter gjoer det. */
.lead__head{margin-bottom:22px}
.lead__meta{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:10px}
.lead__steg{font-family:var(--display);font-weight:800;font-size:13px;letter-spacing:.03em;text-transform:uppercase;color:var(--ink)}
.lead__tid{font-size:12.5px;color:var(--ink-2)}
.lead__progress{display:grid;grid-template-columns:repeat(3,1fr);gap:5px;height:5px;background:none;overflow:visible}
.lead__progress span{display:block;height:100%;border-radius:99px;background:var(--line);transition:background .3s ease}
.lead__progress span.is-paa{background:var(--brand)}
.lead__badge{display:inline-block;background:var(--brand-100);color:var(--ink);font-family:var(--display);font-weight:600;font-size:12.5px;padding:5px 12px;border-radius:999px;margin-bottom:12px}
.lead__progress{height:6px;border-radius:99px;background:var(--line);overflow:hidden}
.lead__step{display:none;animation:fade .3s ease}
.lead__step.is-active{display:block}
@keyframes fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.lead__q{font-size:21px;margin-bottom:16px}
.lead__opts{display:grid;gap:10px}
.lead__opt{display:flex;align-items:center;gap:14px;text-align:left;padding:13px 16px;border:2px solid var(--line);border-radius:12px;background:var(--white);font-family:var(--display);font-weight:600;font-size:15.5px;cursor:pointer;transition:.15s}
.lead__opt{position:relative}
/* Synlig markoer til venstre, saa valget leses som en radioknapp og ikke
   som en knapp man maa gjette paa. */
.lead__opt-mark{flex-shrink:0;width:22px;height:22px;border-radius:50%;border:2px solid var(--line);
  background:var(--white);position:relative;transition:border-color .15s,background .15s}
/* Tittel og forklaring under hverandre. Med ni valg maa forskjellen mellom
   dem vaere lesbar uten at man maa aapne menyen for aa sjekke. */
.lead__opt-txt{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px;line-height:1.3}
.lead__opt-txt b{font-family:var(--display);font-weight:700;font-size:15px;color:var(--ink)}
.lead__opt-txt small{font-weight:400;font-size:12.5px;color:var(--ink-2)}
/* Ni valg blir hoyt. Lista faar egen scroll saa knappen alltid er synlig. */
.lead__opts{max-height:min(46vh,420px);overflow-y:auto;padding-right:4px;
  scrollbar-width:thin;scrollbar-color:var(--line) transparent}
.lead__opts::-webkit-scrollbar{width:6px}
.lead__opts::-webkit-scrollbar-thumb{background:var(--line);border-radius:99px}
.lead__opt:hover{border-color:var(--ink-2);background:var(--paper-2)}
.lead__opt:hover .lead__opt-mark{border-color:var(--ink-2)}
.lead__opt:focus-visible{outline:none;border-color:var(--ink);box-shadow:0 0 0 3px rgba(255,214,31,.4)}
.lead__opt.is-selected{border-color:var(--ink);background:var(--brand-100)}
.lead__opt.is-selected .lead__opt-mark{border-color:var(--ink);background:var(--brand)}
/* Sentreres fra midten. En hake har optisk tyngdepunkt litt under
   boksens midte, derfor -58 % og ikke -50 %. */
.lead__opt.is-selected .lead__opt-mark::after{content:"";position:absolute;left:50%;top:50%;
  width:9px;height:5px;border-left:2.5px solid var(--on-brand);border-bottom:2.5px solid var(--on-brand);
  transform:translate(-50%,-58%) rotate(-45deg)}
.lead__next{margin-top:16px}
.lead__hjelp{margin:-8px 0 16px;font-size:13.5px;line-height:1.45;color:var(--ink-2)}
.lead__tekst{width:100%;display:block;margin-bottom:18px;padding:13px 15px;resize:vertical;
  border:2px solid var(--line);border-radius:var(--radius-sm);background:var(--white);
  font-family:var(--font);font-size:16px;line-height:1.5;color:var(--ink);transition:.15s}
.lead__tekst::placeholder{color:var(--ink-3)}
.lead__tekst:focus{outline:none;border-color:var(--ink);box-shadow:0 0 0 3px rgba(255,214,31,.35)}

/* Sleperen i oppfølgingsspørsmålene */
.lead__skala{margin-bottom:20px}
.lead__skala-topp{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-bottom:12px}
.lead__skala-topp label{font-size:13.5px;font-weight:600;color:var(--ink-2)}
.lead__skala-topp b{font-family:var(--display);font-weight:800;font-size:22px;color:var(--ink);font-variant-numeric:tabular-nums}
.lead__skala-topp b i{font-style:normal;font-size:13px;font-weight:600;color:var(--ink-2)}
.lead__range{width:100%;display:block;
  background:linear-gradient(to right,var(--brand) 0,var(--brand) var(--lead-p,30%),var(--line) var(--lead-p,30%))}
.lead__skala-ender{display:flex;justify-content:space-between;margin-top:9px;font-size:12.5px;color:var(--ink-2)}

/* Kvittering over svarene, rett over kontaktfeltene */
.lead__fasit{list-style:none;padding:0;margin:0 0 18px;border:2px solid var(--line);
  border-radius:12px;background:var(--paper-2);overflow:hidden}
.lead__fasit li{display:flex;justify-content:space-between;align-items:baseline;gap:14px;
  padding:9px 14px;font-size:13px;line-height:1.35;border-bottom:1px solid var(--line)}
.lead__fasit li:last-child{border-bottom:0}
.lead__fasit span{color:var(--ink-2)}
.lead__fasit b{font-family:var(--display);font-weight:700;color:var(--ink);text-align:right}
@keyframes leadShake{0%,100%{transform:translateX(0)}20%,60%{transform:translateX(-5px)}40%,80%{transform:translateX(5px)}}
.lead__opts.is-shake{animation:leadShake .35s ease}
/* Samtykke til personvern. Egen boks tegnet i CSS, siden nettleserens
   standard avkrysning ikke lar seg gi merkevarens gule farge. */
.samtykke{display:flex;align-items:flex-start;gap:11px;margin:4px 0 18px;cursor:pointer;
  font-size:13.5px;line-height:1.45;color:var(--ink-2)}
.samtykke input{position:absolute;opacity:0;width:0;height:0}
.samtykke__boks{flex-shrink:0;width:22px;height:22px;margin-top:1px;border-radius:6px;
  border:2px solid var(--line);background:var(--white);position:relative;transition:.15s}
.samtykke:hover .samtykke__boks{border-color:var(--ink-2)}
.samtykke input:checked+.samtykke__boks{border-color:var(--ink);background:var(--brand)}
.samtykke input:checked+.samtykke__boks::after{content:"";position:absolute;left:50%;top:50%;
  width:9px;height:5px;border-left:2.5px solid var(--on-brand);border-bottom:2.5px solid var(--on-brand);
  transform:translate(-50%,-58%) rotate(-45deg)}
.samtykke input:focus-visible+.samtykke__boks{outline:2px solid var(--ink);outline-offset:2px}
.samtykke input.is-feil+.samtykke__boks{border-color:var(--error);box-shadow:0 0 0 3px rgba(234,71,71,.18)}
.samtykke__txt a{color:var(--ink);text-decoration:underline}
.field{display:block;margin-bottom:14px}
/* display:block over slaar nettleserens egen regel for [hidden], og da ble
   feltet for borettslagsnavn staaende synlig paa sider der det ikke hoerer
   hjemme. Det saa ut som et vanlig felt, men var slaatt av og lot seg ikke
   fylle ut. */
.field[hidden]{display:none}
.field span{display:block;font-size:13.5px;font-weight:600;margin-bottom:6px;color:var(--ink-2)}
.field input{width:100%;padding:13px 15px;border:2px solid var(--line);border-radius:var(--radius-sm);font-family:var(--font);font-size:16px;background:var(--white);transition:.15s}
.field input:focus{outline:none;border-color:var(--ink);box-shadow:0 0 0 3px rgba(255,214,31,.35)}
.field input:invalid:not(:placeholder-shown){border-color:var(--danger)}
/* ---------- Adressesoek ---------- */
.field-rad{display:grid;grid-template-columns:100px 1fr;gap:12px}
/* Postnummer trenger lite plass og poststed mye, derfor 100px over. Telefon
   og e-post er like tunge og skal dele linja likt. Regelen staar her og ikke
   lenger nede: de to mediesporringene under kollapser .field-rad til én
   kolonne paa smale skjermer, og siden de har samme spesifisitet som denne,
   er det rekkefolgen som avgjor hvem som vinner. */
.field-rad--like{grid-template-columns:1fr 1fr}
.field--adr{position:relative;margin-bottom:14px}
.field--adr label{display:block;font-size:13.5px;font-weight:600;margin-bottom:6px;color:var(--ink-2)}
.field--adr input{width:100%;padding:13px 15px;border:2px solid var(--line);border-radius:var(--radius-sm);
  font-family:var(--font);font-size:16px;background:var(--white);transition:border-color .15s,box-shadow .15s}
.field--adr input:focus{outline:none;border-color:var(--ink);box-shadow:0 0 0 3px rgba(255,214,31,.35)}
.adr-liste{list-style:none;position:absolute;z-index:20;left:0;right:0;top:calc(100% + 4px);margin:0;padding:6px;
  max-height:264px;overflow-y:auto;background:var(--white);border:2px solid var(--line);
  border-radius:12px;box-shadow:0 12px 34px rgba(31,31,46,.14)}
.adr-liste[hidden]{display:none}
.adr-liste li{display:flex;flex-direction:column;gap:1px;padding:10px 12px;border-radius:9px;cursor:pointer;line-height:1.3}
.adr-liste li b{font-family:var(--display);font-weight:700;font-size:14.5px;color:var(--ink)}
.adr-liste li small{font-size:12.5px;color:var(--ink-2)}
.adr-liste li:hover,.adr-liste li.is-paa{background:var(--brand-100)}
.adr-status{margin:6px 0 0;font-size:12px;color:var(--ink-2);min-height:1em}
@media (max-width:420px){.field-rad{grid-template-columns:1fr}}
.lead__nav{display:flex;justify-content:space-between;gap:12px;margin-top:18px}
.lead__privacy{font-size:12px;color:var(--muted);margin:14px 0 0;text-align:center}
.lead__done{text-align:center;padding:20px 0}
.lead__check{width:64px;height:64px;border-radius:50%;background:var(--brand);color:var(--on-brand);font-size:32px;display:flex;align-items:center;justify-content:center;margin:0 auto 18px}
.lead__done a{color:var(--ink);font-weight:600}

/* ---------- Footer ---------- */
.site-footer{position:relative;overflow:hidden;background:var(--white);color:var(--ink-2)}
.site-footer::after{content:"";position:absolute;bottom:-140px;left:-90px;width:380px;height:380px;border-radius:50%;background:radial-gradient(circle,rgba(255,214,31,.10),transparent 70%);pointer-events:none}
.site-footer>*{position:relative;z-index:1}

/* Last-chance CTA band */
.footer-cta{background:var(--paper-3);padding:46px 0}
.footer-cta__inner{display:flex;align-items:center;justify-content:space-between;gap:28px;flex-wrap:wrap}
.footer-cta__text h2{color:var(--ink);font-size:clamp(23px,2.6vw,32px);margin:0;max-width:22ch}
.footer-cta__text p{color:var(--ink-2);margin:9px 0 0;font-size:16px}
.footer-cta__actions{display:flex;gap:12px;flex-wrap:wrap}
.btn--outline-light{--bg:transparent;--fg:var(--ink);border-color:var(--ink)}
.btn--outline-light:hover{--bg:var(--ink);--fg:var(--white);border-color:var(--ink)}

/* Main grid */
/* Lenkekolonnene tar bredden innholdet trenger, og merkevarekolonnen tar
   resten. Med fr-kolonner ble luften mellom kolonnene ulik, fordi hver
   kolonne fikk like mye plass uansett hvor korte lenkene var. */
.footer-main{display:grid;grid-template-columns:minmax(220px,1fr) repeat(4,minmax(0,max-content));gap:36px clamp(28px,4.4vw,60px);padding-block:54px 40px}
.site-footer__tag{margin:16px 0 0;font-size:14.5px;line-height:1.55;max-width:34ch;color:var(--ink-2)}
.site-footer__tag b{color:var(--ink);font-weight:800}
.footer-rating{margin-top:16px;font-size:13.5px;color:var(--ink-2)}
.footer-rating__stars{color:var(--brand-dark);letter-spacing:1px}
.footer-rating b{color:var(--ink)}
.footer-social{display:flex;gap:10px;margin-top:20px}
.footer-social a{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:11px;background:var(--paper-2);border:2px solid var(--line);color:var(--muted);transition:transform .18s,background .18s,color .18s}
.footer-social a:hover{background:var(--brand);border-color:var(--brand);color:var(--on-brand);transform:translateY(-3px)}
.footer-social svg{width:19px;height:19px}
/* Utmerkelse under de sosiale ikonene. Fast bredde, saa den ikke
   konkurrerer med logoen rett over. */
.footer-merke{display:block;width:104px;height:auto;margin:22px 0 0}
/* Lenken til hele oversikten skiller seg fra stedene over den. */
.footer-alle{font-weight:700;color:var(--ink)}

/* Knapp under stegene, sentrert under de tre kortene. */
.steps__cta{margin:34px 0 0;text-align:center}

/* Stedslista paa /byer/: flere spalter, saa 57 navn ikke blir en lang remse. */
.prose ul.stedliste{list-style:none;margin:0 0 30px;padding:0;
  columns:4 180px;column-gap:26px}
.prose ul.stedliste li{break-inside:avoid;margin:0 0 9px;padding:0;
  font-size:var(--t-small);line-height:1.45;color:var(--ink-2)}
.prose ul.stedliste li::before{content:none}
.prose ul.stedliste a{color:var(--ink);font-weight:600}
.footer-col h4{color:var(--ink);font-size:14px;font-weight:600;letter-spacing:.02em;margin:0 0 18px;position:relative;padding-bottom:11px}
.footer-col h4::after{content:"";position:absolute;left:0;bottom:0;width:22px;height:2px;border-radius:2px;background:var(--brand)}
.footer-col ul{list-style:none;padding:0;margin:0;display:grid;gap:12px;font-size:14.5px}
/* Undertitler i tjenestespalten: samme inndeling som menyen, men dempet
   nok til at kolonneoverskriften fortsatt leser som overskriften. */
.footer-gruppe{margin:0 0 10px;font-size:11.5px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:var(--ink)}
.footer-gruppe+ul{margin-bottom:20px}
.footer-col ul+.footer-gruppe{margin-top:0}
.footer-col a{color:var(--ink-2);display:inline-flex;align-items:center;gap:9px;transition:color .15s,transform .15s}
.footer-col a:hover{color:var(--ink);transform:translateX(3px)}
.footer-col li>span{display:inline-flex;align-items:flex-start;gap:9px;color:var(--ink-2);line-height:1.4}
.footer-col--contact .fi{color:var(--ink)}
.fi{width:16px;height:16px;flex-shrink:0;margin-top:1px}
.footer-org{font-size:13px;color:var(--ink-2)}

/* Bottom bar */
.footer-bottom{display:flex;justify-content:space-between;align-items:center;border-top:2px solid var(--line);padding-block:22px 32px;font-size:13px;color:var(--ink-2);flex-wrap:wrap;gap:12px}
/* Opplysningene staar som egne biter, skilt med prikk paa brede skjermer. */
.footer-bottom__jus{display:flex;flex-wrap:wrap;align-items:center;gap:0 8px}
.footer-bottom__jus>span+span::before{content:"\00b7";margin-right:8px;color:var(--line-2,#c9c9d6)}
/* Ligger na inne i .footer-bottom__jus og arver ·-skilletegnet derfra. Egen
   flex-basis:100% her tvang den ned pa egen rad pa desktop. */
.footer-bottom__links{display:flex;gap:20px;align-items:center}
.footer-bottom__links a{color:var(--ink-2);transition:color .15s}
.footer-bottom__links a:hover{color:var(--ink)}
.footer-top{font-weight:500}
.footer-credit{color:var(--ink-2);font-weight:500;transition:color .15s}
/* Hjertet skal staa paa linje med teksten, ikke loefte linjehoyden. */
.footer-hjerte{font-size:.95em;line-height:1;vertical-align:-1px}
.footer-credit:hover{color:var(--ink)}
.footer-addr{line-height:1.5}

/* ---------- Sticky mobile CTA ---------- */
/* ---------- Anslaget i befaringsskjemaet ----------
   Staar oeverst i kortet, over fremdriften, fordi det er svaret paa
   spoersmaalene og ikke en fotnote til dem. Gul flate: det er det eneste
   i skjemaet kunden kom for. */
.lead__pris{
  display:block;
  margin:0 0 18px;
  padding:14px 18px 15px;
  border-radius:14px;
  background:var(--brand-100,#fffbe0);
  border:1px solid var(--brand,#ffd61f);
}
.lead__pris[hidden]{display:none}
.lead__pris-merke{
  display:block;
  font-family:var(--display);font-weight:800;
  font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-2);
}
.lead__pris-tall{
  display:block;margin-top:3px;
  font-family:var(--display);font-weight:800;
  font-size:clamp(22px,3.4vw,28px);line-height:1.15;color:var(--ink);
}
.lead__pris-fot{display:block;margin-top:5px;font-size:12.5px;line-height:1.45;color:var(--ink-2)}

.mobile-cta{position:fixed;left:0;right:0;bottom:0;z-index:90;display:none;gap:10px;padding:10px 14px;background:rgba(250,248,242,.96);backdrop-filter:blur(10px);border-top:2px solid var(--line);border-top:2px solid var(--line)}

/* ---------- Flytende book-samtale-bar ---------- */
.float-bar{position:fixed;left:50%;bottom:22px;transform:translateX(-50%);z-index:95;display:flex;align-items:center;gap:14px;width:max-content;max-width:calc(100vw - 28px);background:var(--white);color:var(--ink);border:2px solid var(--line);border-radius:999px;padding:10px 12px;transition:transform .45s cubic-bezier(.22,.61,.36,1),opacity .3s ease}
.float-bar.is-hidden{transform:translateX(-50%) translateY(180%);opacity:0;pointer-events:none}
.float-bar__avatar{width:46px;height:46px;border-radius:50%;object-fit:cover;object-position:center top;flex-shrink:0;border:2px solid var(--line)}
.float-bar__txt{display:flex;flex-direction:column;line-height:1.25;min-width:0;padding-right:4px}
.float-bar__txt b{font-family:var(--display);font-weight:700;font-size:15px}
.float-bar__txt small{font-size:12.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.float-bar__cta{flex-shrink:0;box-shadow:none}
.float-bar__cta:hover{box-shadow:none}
.float-bar__close{flex-shrink:0;width:30px;height:30px;border-radius:50%;background:transparent;border:0;color:var(--muted);font-size:15px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:.15s}
.float-bar__close:hover{background:var(--paper);color:var(--ink)}
@media (max-width:620px){.float-bar{display:none}}

/* ---------- For borettslag ---------- */
.borettslag__grid{display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:center}
/* Det lyse baandet staar i egen ramme, slik at det leses som ett element
   og ikke flyter sammen med seksjonene over og under. Det moerke baandet
   trenger det ikke, der gjoer bakgrunnen samme jobb. */
/* Det lyse baandet er selve wrap-elementet, saa panelet gikk helt ut i
   kanten mens kort inne i wrap staar 22 piksler inn. Margin gir samme
   bredde som garantikortet rett over. */
.borettslag:not(.section--dark) .borettslag__grid{max-width:1100px;margin-inline:auto;background:var(--white);
  border:2px solid var(--line);border-radius:var(--radius);
  padding:clamp(26px,3.2vw,44px);gap:clamp(28px,3.4vw,48px)}
/* Fast forhold, ellers foelger ruta bildets eget format. Plakatbildet er
   staaende, og baandet ble tre ganger saa hoeyt som teksten ved siden av. */
.borettslag__media{margin:0;align-self:center;aspect-ratio:5/4;
  border-radius:14px;overflow:hidden;background:var(--paper-2)}
.borettslag__media img{width:100%;height:100%;object-fit:cover;display:block}
/* Logoer og merker skal vises hele, ikke beskjaeres til et utsnitt. */
.borettslag__media--hel{aspect-ratio:auto;background:transparent;padding:8px}
.borettslag__media--hel img{height:auto;max-height:280px;object-fit:contain;margin:0 auto;width:auto;max-width:100%}
.borettslag__copy .hl{color:var(--ink);background:linear-gradient(180deg,transparent 62%,#fff 62%)}
/* Jevn avstand mellom label, overskrift, ingress og knapp. Standardverdiene
   ga 16, 18 og 8 piksler, som leses som en skjev rytme. */
.borettslag__copy>*{margin-bottom:20px}
.borettslag__copy>*:last-child{margin-bottom:0}
.borettslag__copy .section__lead{margin-bottom:20px}
.borettslag__cards{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:1fr 1fr;gap:16px}
/* Fem kort eller flere: tre i bredden og en bredere hoeyrekolonne. Med to
   spalter ble kortstabelen nesten dobbelt saa hoey som teksten ved siden av. */
.borettslag__grid:has(.borettslag__cards li:nth-child(5)){grid-template-columns:.85fr 1.15fr}
.borettslag__cards:has(li:nth-child(5)){grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.borettslag__cards:has(li:nth-child(5)) li{padding:18px}
@media (max-width:1100px){
  .borettslag__cards:has(li:nth-child(5)){grid-template-columns:repeat(2,minmax(0,1fr))}
}
.borettslag__cards li{background:#fff;border:2px solid rgba(31,31,46,.08);border-radius:14px;padding:20px;display:flex;flex-direction:column;gap:5px}
.borettslag__ic{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:50%;background:var(--brand);color:var(--on-brand);margin-bottom:10px}
.borettslag__ic svg{width:18px;height:18px}
/* ™ skal ikke brekke ned paa egen linje etter navnet. */
.borettslag__cards b{font-family:var(--display);font-size:16px;text-wrap:balance;overflow-wrap:normal;word-break:normal;hyphens:none}
.borettslag__cards span:last-child{font-size:14px;color:var(--ink-2)}

/* ---------- Artikler (soft conversion) ---------- */
.article-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin:38px 0 0}
/* Filteret setter hidden paa kortene. Uten denne regelen vinner display
   fra klassen under, og kortene blir staaende selv om de er skjult. */
.article-card[hidden]{display:none}
.article-card{display:flex;flex-direction:column;background:var(--white);border:2px solid var(--line);border-radius:var(--radius);overflow:hidden;transition:transform .15s,box-shadow .2s}
.article-card:hover{transform:translateY(-4px);border-color:var(--ink-2)}
/* Bilde oeverst i guidekortet. Padding flyttes til teksten, slik at bildet
   kan gaa helt ut i kanten. Kort uten bilde faar samme hoyde av rutenettet. */
.article-card__img{position:relative;margin:0;aspect-ratio:16/10;background:var(--paper-2);overflow:hidden}
.article-card__img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .35s ease}
.article-card:hover .article-card__img img{transform:scale(1.04)}
.article-card__body{display:flex;flex-direction:column;flex:1;padding:22px 24px 24px}
.article-card__tag{align-self:flex-start;background:var(--brand-100);color:var(--ink);font-family:var(--display);font-weight:600;font-size:12px;padding:4px 11px;border-radius:999px;margin-bottom:14px}
.article-card h3{font-size:19px;margin-bottom:9px;line-height:1.2}
.article-card p{font-size:14.5px;color:var(--muted);margin:0 0 16px;flex:1}
.article-card__more{font-family:var(--display);font-weight:600;font-size:14.5px;color:var(--ink)}
.artikler__cta{text-align:center;margin:30px 0 0;font-size:16px;color:var(--muted)}
.artikler__cta a{color:var(--ink);font-weight:600;border-bottom:2px solid var(--brand)}

/* ---------- Husmaling band ---------- */
.husmaling__inner{display:grid;grid-template-columns:1.2fr .8fr;gap:40px;align-items:center;background:var(--paper-2);border:2px solid var(--line);border-radius:18px;padding:38px 40px}
.husmaling__cta{display:flex;flex-direction:column;gap:12px}

/* ---------- Breadcrumb ---------- */
.breadcrumb{padding-top:20px;font-size:13.5px;color:var(--muted);display:flex;gap:8px;flex-wrap:wrap}
.breadcrumb a{color:var(--ink-2)}
.breadcrumb a:hover{color:var(--ink)}
.breadcrumb span[aria-hidden]{color:var(--muted)}

/* ---------- Media frame (undersider) ---------- */
.media{border-radius:14px;overflow:hidden;margin:0;background:var(--paper-2);border:2px solid var(--line)}
.media img{display:block;width:100%;height:auto}
.media--cover{aspect-ratio:4/3}
.media--cover img{height:100%;object-fit:cover}
.media__cap{font-size:13px;color:var(--muted);text-align:center;margin-top:12px}

/* Underside-hero: mer luft + bilde i full høyde */
.hero--sub{padding:30px 0 52px}
.hero--sub .breadcrumb{padding-top:0;margin-bottom:32px}
.hero--sub .hero__title{margin-bottom:26px}
.hero--sub .hero__lead{margin-bottom:30px}
.hero--sub .check-list{gap:16px;margin:6px 0 34px}
.hero--sub .hero__actions{margin-bottom:16px}
.hero__media{align-self:stretch;min-height:460px}
.hero__media img{width:100%;height:100%;object-fit:cover}
/* Stående klipp beholder sitt eget format i stedet for å bli beskåret til
   en bred rute. Høyden styrer, bredden følger av 9:16, og rammen krymper
   med videoen så det ikke blir svarte felter på sidene. */
.hero__media--video{align-self:center;justify-self:center;min-height:0;width:auto;max-width:100%;
  margin-inline:auto;aspect-ratio:9/16;height:min(620px,74vh)}
.hero__media--video{position:relative}
.hero__media--video video{display:block;width:100%;height:100%;object-fit:cover;object-position:center}
/* Liten etikett over klippet. Moerk plate bak teksten, ellers forsvinner den
   naar videoen ruller forbi en lys flate som himmel eller sne. */
.hero__media-merke{position:absolute;top:0;left:0;right:0;z-index:2;
  display:flex;align-items:center;justify-content:center;gap:8px;
  padding:12px 16px;text-align:center;
  font-family:var(--display);font-weight:700;font-size:13.5px;line-height:1.3;
  color:#fff;letter-spacing:.01em;
  background:linear-gradient(to bottom,rgba(15,15,24,.72),rgba(15,15,24,0));
  text-shadow:0 1px 3px rgba(0,0,0,.45)}
/* Liten gul prikk foran, samme signal som eyebrow ellers paa siden. */
.hero__media-merke::before{content:"";flex:0 0 auto;width:8px;height:8px;border-radius:50%;
  background:var(--brand);box-shadow:0 0 0 3px rgba(255,214,31,.25)}
@media (max-width:520px){.hero__media-merke{font-size:12.5px;padding:10px 13px}}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:940px){
  .hero__grid,.calc,.cta-final__grid,.problem__grid,.guarantee__inner{grid-template-columns:minmax(0,1fr)}
  /* :has-regelen for prisboksen er mer spesifikk enn linja over, og maa
     derfor slaas av eksplisitt. Ellers blir tekstseksjoner med prisboks
     staaende i to kolonner paa mobil, og boksen havner utenfor skjermen. */
  .problem__grid:has(.sticky-cta){grid-template-columns:minmax(0,1fr)}
  /* I en kolonne har bildet ingen tekst aa matche hoyden med. */
  .problem__grid>.media img{height:auto;min-height:0;aspect-ratio:16/10}
  .guarantee__inner{justify-items:center;text-align:center}
  .check-list--row{justify-content:center}
  .steps,.reviews,.gallery,.article-cards{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .borettslag__grid,.husmaling__inner{grid-template-columns:minmax(0,1fr)}
  /* Seksjoner med seks kort har en egen regel lenger opp som setter to
     spalter. Den bruker :has() og vinner paa spesifisitet uansett hvor den
     staar, saa den maa gjentas her for at overskriften skal legge seg over
     kortene paa mobil i stedet for aa staa i en smal spalte ved siden av. */
  .borettslag__grid:has(.borettslag__cards li:nth-child(5)){grid-template-columns:minmax(0,1fr)}
  /* Ramma laa klemt mot skjermkanten, og da leste innholdet ikke som et
     kort. Luft paa utsiden gjoer boksen synlig. */
  .borettslag:not(.section--dark) .borettslag__grid{margin-inline:16px;width:auto;
    padding:26px 20px;text-align:center;justify-items:center}
  .borettslag:not(.section--dark) .borettslag__copy .check-list{justify-items:start;text-align:left}
  /* Ogsaa paa det gule baandet. Der staar merket under midtstilt, og da
     leste teksten ved siden av som om den hadde skrensa ut mot venstre. */
  .borettslag.section--dark .borettslag__copy{text-align:center}
  .borettslag.section--dark .borettslag__copy .check-list{justify-items:center}
  .footer-main{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .footer-brand{grid-column:1/-1}
  .footer-cta__inner{flex-direction:column;align-items:flex-start}
  .xform{order:-1}
  .hero--sub .hero__media{align-self:auto;min-height:0;aspect-ratio:16/10}
  /* Stående video tåler ikke 16:10 på mobil, da blir bare en stripe igjen. */
  .hero--sub .hero__media--video{aspect-ratio:9/16;height:min(560px,66vh)}
}
@media (max-width:620px){
  .section{padding:56px 0}
  .steps,.reviews,.gallery,.about__stats,.article-cards,.borettslag__cards{grid-template-columns:minmax(0,1fr)}
  /* :has()-regelen over teller som en klasse mer og vinner ellers, og da
     ble kortene staaende i to eller tre spalter som rant ut av skjermen
     med ett ord per linje. */
  .borettslag__cards:has(li:nth-child(5)){grid-template-columns:minmax(0,1fr)}
  .husmaling__inner{padding:28px 24px}
  .about__stats{grid-template-columns:1fr 1fr}
  .site-header__cta .link-phone__num{display:none}
  .footer-main{grid-template-columns:minmax(0,1fr)}
  /* Sentrert og stablet. Prikkene mellom bitene forsvinner, for de gir
     bare mening naar bitene staar paa samme linje. */
  .footer-bottom{flex-direction:column;align-items:center;text-align:center;gap:14px}
  .footer-bottom__jus{flex-direction:column;gap:4px}
  .footer-bottom__jus>span+span::before{content:none}
  .footer-bottom__links{gap:18px;flex-wrap:wrap;justify-content:center}
  /* Pa mobil star .footer-bottom__jus i kolonne, sa denne blir siste rad og
     far en egen skillelinje over seg. */
  .footer-bottom__laget{margin-top:8px;padding-top:12px;border-top:1px solid var(--line);width:100%}
  /* Linjen kommer naar man har passert heroen, ikke med én gang.
     Over heroen staar de samme to knappene allerede paa skjermen, og en
     fast linje med et tredje sett er stoey foer man har lest noe.
     Klassen settes i app.js. transform og ikke display, saa bunnpolstringen
     ligger fast og siden ikke hopper naar linjen kommer. */
  .mobile-cta{
    display:flex;
    transform:translateY(115%);
    visibility:hidden;
    transition:transform .24s cubic-bezier(.16,1,.3,1),visibility 0s linear .24s;
  }
  .mobile-cta.er-inne{
    transform:none;
    visibility:visible;
    transition:transform .24s cubic-bezier(.16,1,.3,1),visibility 0s;
  }
  body{padding-bottom:74px}
  .hero__actions .btn{width:100%}
  .campaign-bar__text{font-size:13px}
}
/* ===== Compare cards (fornying vs bytte) ===== */
.compare-cards{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:28px}
.compare-card{position:relative;background:var(--white);border:2px solid var(--line);border-radius:var(--radius);padding:26px 24px}
.compare-card--win{border-color:var(--brand);border-width:2px}
.compare-card__tag{display:inline-block;font-family:var(--display);font-weight:700;font-size:13px;letter-spacing:.02em;padding:5px 12px;border-radius:999px;background:var(--brand);color:var(--ink);margin-bottom:14px}
.compare-card__tag--muted{background:var(--paper-2);color:var(--muted)}
.compare-card__price{display:block;font-family:var(--display);font-weight:800;font-size:26px;line-height:1.15;color:var(--ink);margin-bottom:16px}
.compare-card--win .compare-card__price{color:var(--ink)}
.compare-card__list{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.compare-card__list li{position:relative;padding-left:26px;font-size:15px;color:var(--ink-2)}
.compare-card__list li::before{content:"";position:absolute;left:0;top:7px;width:14px;height:9px;border-left:2.5px solid var(--ink);border-bottom:2.5px solid var(--ink);transform:rotate(-45deg)}
.compare-card--muted .compare-card__list li::before,.compare-card__tag--muted ~ .compare-card__list li::before{border-color:var(--muted)}

/* ===== Results page ===== */
.results-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin:26px 0 6px}
.results-stat{background:var(--white);border:2px solid var(--line);border-radius:var(--radius);padding:22px 18px;text-align:center}
.results-stat b{display:block;font-family:var(--display);font-weight:800;font-size:30px;color:var(--ink);line-height:1}
.results-stat span{display:block;margin-top:6px;font-size:13.5px;color:var(--muted)}
.case-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:26px}
.case{background:var(--white);border:2px solid var(--line);border-radius:var(--radius);overflow:hidden;display:flex;flex-direction:column}
.case__img{aspect-ratio:16/10;background:var(--paper-2)}
.case__img img{width:100%;height:100%;object-fit:cover;display:block}
.case__body{padding:20px 22px;display:flex;flex-direction:column;gap:9px;flex:1}
.case__tag{font-family:var(--display);font-weight:700;font-size:12px;letter-spacing:.04em;text-transform:uppercase;color:var(--ink)}
.case__body h3{font-family:var(--display);font-weight:800;font-size:18px;color:var(--ink);margin:0}
.case__body p{margin:0;font-size:14.5px;color:var(--ink-2);line-height:1.55}
.case__save{margin-top:auto;padding-top:6px;font-family:var(--display);font-weight:700;color:var(--ink);font-size:15px}
@media (max-width:820px){
  .results-stats{grid-template-columns:1fr 1fr}
  .case-grid{grid-template-columns:1fr}
}

/* ===== Single article ===== */
.article{padding:8px 0 8px}
.article__head{margin:18px 0 22px}
.article__title{font-family:var(--display);font-weight:var(--t-h1-vekt);font-size:var(--t-h1);line-height:var(--t-h1-lh);letter-spacing:var(--t-h1-ls);color:var(--ink);margin:12px 0 14px}
.article__lead{font-size:var(--t-lead);line-height:var(--t-lead-lh);color:var(--ink-2);margin:0 0 18px;max-width:60ch}
.article__meta{display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-size:14px;color:var(--muted)}
.article__meta b{color:var(--ink)}
.article__avatar{width:40px;height:40px;border-radius:50%;object-fit:cover;background:var(--brand)}
.article__hero{margin:0 0 30px}
.article__hero img{width:100%;height:auto;border-radius:var(--radius);border:2px solid var(--line)}
.article__body{font-size:var(--t-body);line-height:var(--t-body-lh);color:var(--ink)}
.article__body h2{font-family:var(--display);font-weight:700;font-size:var(--t-h2);line-height:var(--t-h2-lh);color:var(--ink);margin:2em 0 .6em}
.article__body p{margin:0 0 1.15em}
.article__body ul,.article__body ol{margin:0 0 1.35em;padding-left:1.35em}
.article__body li{margin-bottom:.55em}
.article__body a{color:var(--ink);font-weight:600;text-decoration:underline;text-decoration-color:var(--brand-deep);text-decoration-thickness:2px;text-underline-offset:2px}
/* Lenkeregelen over er mer spesifikk enn .btn og overstyrte knappefargen,
   slik at konturknappen i den moerke slutt-CTA-en ble sort paa sort. */
.article__body .btn,
.article__body .btn:hover{color:var(--fg);text-decoration:none}

/* Quick-answer box (CTA 1) */
.article-tl{background:var(--paper-2);border:2px solid var(--line);border-left:4px solid var(--brand);border-radius:var(--radius);
  /* 26px i bunnen, ikke 20: knappene staar paa en 5px sokkel, og med
     lik padding hele veien rundt ble avstanden under dem optisk
     mindre enn over. */
  padding:20px 22px 26px;margin:0 0 30px}
.article-tl__label{font-family:var(--display);font-weight:700;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink);margin:0 0 6px}
.article-tl p{margin:0 0 14px;font-size:16px;color:var(--ink-2)}
/* Beholderklassen alene taper mot .article__body .wp-block-buttons{margin:0}
   lenger oppe, som er to klasser. Derfor samme prefiks her. */
.article__body .article-tl__actions{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-top:18px}
/* Siste avsnitt foer knappene gir fra seg bunnmargen sin, saa avstanden
   settes ett sted i stedet for aa bli summen av to. */
.article-tl p:last-of-type{margin-bottom:0}

/* Note / warning callout (CTA 2) */
.article-note{background:var(--brand-100);border-left:4px solid var(--brand);border-radius:var(--radius-sm);padding:16px 18px;margin:1.6em 0;font-size:15.5px}
.article-note--warn{background:var(--error-bg);border-left-color:var(--danger)}
.article-note b{color:var(--ink)}

/* Inline lead box (CTA 3) */
.article-cta{display:flex;align-items:center;gap:22px;flex-wrap:wrap;justify-content:space-between;background:var(--brand-100);border:2px solid var(--brand);border-radius:var(--radius);padding:24px 26px;margin:2em 0}
.article-cta__txt{flex:1 1 300px}
.article-cta__txt h3{font-family:var(--display);font-weight:800;font-size:20px;color:var(--ink);margin:0 0 6px}
.article-cta__txt p{margin:0;font-size:15px;color:var(--ink-2)}
.article-cta__actions{display:flex;gap:10px;flex-wrap:wrap}

/* Strong end CTA (CTA 4) */
.article-end-cta{background:var(--paper-2);color:var(--ink);border:2px solid var(--line);border-radius:var(--radius);padding:32px 30px;margin:2.4em 0 .5em;text-align:center}
.article-end-cta h3{font-family:var(--display);font-weight:800;font-size:var(--t-h3);line-height:var(--t-h3-lh);margin:0 0 8px;color:var(--ink)}
.article-end-cta p{margin:0 0 20px;color:var(--ink-2);font-size:var(--t-body);line-height:var(--t-body-lh)}
.article-end-cta__actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.post-grid--2{grid-template-columns:1fr 1fr}
@media (max-width:640px){
  .article-cta{padding:20px}
  .article-end-cta__actions .btn,.article-cta__actions .btn{width:100%}
  .post-grid--2{grid-template-columns:1fr}
}

/* ===== Stack cards (DIY-metoder) ===== */
.stack-cards{display:grid;gap:14px;margin-top:26px}
.stack-card{background:var(--white);border:2px solid var(--line);border-left:4px solid var(--brand);border-radius:var(--radius);padding:20px 22px}
.stack-card h3{font-family:var(--display);font-weight:800;font-size:18px;color:var(--ink);margin:0 0 8px}
.stack-card p{margin:0 0 6px;font-size:15px;color:var(--ink-2)}
.stack-card p:last-child{margin-bottom:0}
.stack-card--warn{border-left-color:var(--danger)}
.stack-card--warn h3{color:var(--danger)}

/* ===== Price table ===== */
.price-table-wrap{margin-top:24px;overflow-x:auto;border:2px solid var(--line);border-radius:var(--radius)}
.price-table{width:100%;border-collapse:collapse;background:var(--white);min-width:560px}
.price-table thead th{background:var(--paper-2);color:var(--ink);font-family:var(--display);font-weight:600;font-size:13px;text-align:left;padding:14px 18px;letter-spacing:.01em}
.price-table tbody td{padding:16px 18px;border-top:1px solid var(--line);font-size:15px;color:var(--ink-2);vertical-align:middle}
.price-table tbody td b{display:block;font-family:var(--display);color:var(--ink);font-size:16px}
.price-table tbody td small{display:block;color:var(--muted);font-size:12.5px;margin-top:2px}
.price-table__hl td{background:var(--brand-100)}
.price-table__hl td b{color:var(--ink)}

/* ============================================================
   PRISBORDET PAA MOBIL
   Samme grep som sammenligningstabellen: en blokk per tjeneste,
   med kolonnenavnet foran hver verdi. Ingen sideveis sveiping.
   ============================================================ */
@media (max-width:760px){
  .price-table-wrap{overflow-x:visible;border:0;border-radius:0;background:none}
  .price-table-wrap::after{content:none}
  .price-table{display:block;min-width:0;background:none}
  .price-table thead{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
  .price-table tbody{display:grid;gap:14px}
  .price-table tbody tr{display:block;background:var(--white);border:2px solid var(--line);
    border-radius:var(--radius);overflow:hidden}
  .price-table tbody td{display:flex;align-items:baseline;justify-content:space-between;gap:16px;
    padding:11px 18px;border:0;border-top:1px solid var(--line);font-size:15px;text-align:right}
  /* Tjenestenavnet blir overskrift for kortet. */
  .price-table tbody td:first-child{display:block;text-align:left;border-top:0;
    background:var(--paper-2);padding:14px 18px}
  .price-table tbody td:not(:first-child)::before{content:attr(data-etikett);
    flex:0 0 auto;font-size:13px;color:var(--muted);text-align:left}
  .price-table__hl td:first-child{background:var(--brand)}
  .price-table__hl td{background:var(--brand-100)}
}

/* Etiketten over overskriften faar ikke plass paa en linje paa smale
   skjermer naar den inneholder stedsnavn. Den krymper med skjermen i
   stedet for aa brekke i to. */
@media (max-width:600px){
  .hero .eyebrow,.hero--sub .eyebrow{font-size:clamp(10.5px,2.85vw,14px);letter-spacing:.012em}
  /* Noekkeltallene skal staa paa en rad uansett om de er tre eller fire.
     Med flex-wrap braekk det siste ned og la alene under de andre. Her
     deler de bredden likt i stedet, og skriften foelger skjermen. */
  .trust-row{display:flex;flex-wrap:nowrap;gap:8px;text-align:center}
  .trust-row li{flex:1 1 0;min-width:0;align-items:center;font-size:11px;line-height:1.25}
  .trust-row__num{font-size:clamp(13px,4vw,20px)}
}
@media (max-width:640px){
  .compare-cards{grid-template-columns:1fr}
  .compare-card__price{font-size:23px}
}
@media (prefers-reduced-motion:reduce){
  *{scroll-behavior:auto;animation:none!important;transition:none!important}
}

/* ============================================================
   MOBIL: hindrer sidelengs rulling
   ------------------------------------------------------------
   Hovedaarsaken var rutenett med 1fr-spor. 1fr betyr minmax(auto,1fr),
   og auto-minimum er min-content. Et langt ord som Diamantbehandling
   kan ikke brytes, saa sporet vokser forbi sin andel og skyver siden ut.
   minmax(0,1fr) lar sporet krympe, og ordbryting tar resten.
   ============================================================ */

/* clip paa html i tillegg til body. Safari foer 16 kjenner ikke clip, og
   faller tilbake til visible. Da er det max-width som holder siden inne. */
html{overflow-x:clip}
html,body{max-width:100%}

/* Rutenettbarn skal kunne krympe under sin egen min-content. Uten dette
   vokser sporet i stedet, og siden blir bredere enn skjermen. */
.steps>*,.reviews>*,.gallery>*,.article-cards>*,.chip-group>*,.videorad__grid>*,
.footer-col li,.registre__meny li,.field-rad>*,.lead__opts>*,
.calc>*,.hero__grid>*,.problem__grid>*,.cta-final__grid>*,.husmaling__inner>*,
.borettslag__grid>*,.registre__grid>*,.guarantee__inner>*{min-width:0}

/* Lange merkenavn og nettadresser brytes i stedet for aa skyve siden ut. */
body{overflow-wrap:break-word}
.chip span,.lead__opt-txt b,.kalk__alt-tekst b,.registre .prose,.article__body,
.footer-col a,.drop__txt b{overflow-wrap:break-word}

@media (max-width:1040px) and (min-width:941px){
  /* max-content-kolonnene trenger mer plass enn skjermen har her. Under 941
     tar de smalere bruddene over, og de staar lenger opp i fila. */
  .footer-main{grid-template-columns:1.5fr minmax(0,1fr) minmax(0,1fr) minmax(0,1fr)}
}

@media (max-width:900px){
  /* Tre staaende videoer ved siden av hverandre blir for smale. */
  .videorad__grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
}

@media (max-width:700px){
  /* Brikkene i kalkulatoren: to i bredden holder, tre blir for trangt. */
  .chip-group{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .chip span{padding:12px 10px;font-size:13.5px}
  .chip span small{font-size:11px}
}

@media (max-width:460px){
  /* Under dette er det bare plass til en brikke i bredden. */
  .chip-group{grid-template-columns:minmax(0,1fr)}
  .chip span{flex-direction:row;align-items:center;gap:10px;text-align:left}
  .chip__ic{margin-bottom:0}
  /* Sleperen og tallet under hverandre naar linja blir for kort. */
  .range-wrap{flex-wrap:wrap;gap:10px}
  .range-wrap output{min-width:0;text-align:left}
  .field-rad{grid-template-columns:1fr}
}

/* Tabeller ruller inne i sin egen ramme, ikke sammen med siden. Det er
   ingenting som forteller at de kan rulles, saa vi sier det. */
.table-scroll,.price-table-wrap{-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain}
@media (max-width:760px){
  .table-scroll::after,.price-table-wrap::after{content:"Sveip for å se hele tabellen";
    display:block;padding:10px 14px;font-size:12.5px;color:var(--ink-2);
    border-top:2px solid var(--line);background:var(--paper-2);position:sticky;left:0}
  .compare th,.compare td,.price-table th,.price-table td{padding:13px 14px;font-size:14px}
}

/* Beroeringsflater: minst 44 piksler hoye der man skal trykke. */
@media (hover:none){
  .footer-col a,.footer-bottom__links a,.registre__meny a{padding-block:7px}
  .lead__opt,.kalk__alt{min-height:52px}
  .float-bar__close{width:40px;height:40px}
}

/* Adresselinja i footeren er et inline-flex med ikon foran teksten. Den kunne
   ikke krympe, og stakk utenfor skjermkanten paa smale telefoner. */
.footer-col li>span{flex-wrap:wrap;max-width:100%}
.footer-col li>span>.footer-addr{min-width:0;flex:1 1 auto}
.footer-col li>a{max-width:100%}

/* Lange knappetekster brytes i stedet for aa stikke ut av pillen. */
@media (max-width:620px){
  .btn{white-space:normal;line-height:1.25}
  .btn--lg{padding:15px 22px;font-size:15.5px}
}
/* Kort variant av knappeteksten paa smale skjermer. */
.btn__kort{display:none}
@media (max-width:620px){
  .btn__lang{display:none}
  .btn__kort{display:inline}
}

/* Footeren paa telefon: to kolonner for lenkelistene, kontaktinfo i full
   bredde. Fire kolonner ga ordbryting midt i merkenavn og e-postadresser. */
@media (max-width:760px){
  .footer-main{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:30px 24px}
  .footer-brand{grid-column:1/-1}
  .footer-col--contact{grid-column:1/-1}
  .footer-col--contact ul{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px 20px}
  .footer-col--contact li:last-child{grid-column:1/-1}
}
@media (max-width:520px){
  .footer-main{grid-template-columns:minmax(0,1fr)}
  .footer-col--contact ul{grid-template-columns:minmax(0,1fr)}
}
/* Telefonnummer og e-post skal aldri brytes midt i. */
.footer-col--contact a{overflow-wrap:normal;word-break:keep-all}
.footer-col--contact li>span,.footer-col--contact li>a{align-items:center}

/* Knappen i headeren har for lite plass til aa brekke tekst. Der beholder vi
   en linje og krymper heller litt. */
.site-header__cta .btn,.mobile-cta .btn,.campaign-bar .btn{white-space:nowrap}
@media (max-width:520px){
  .site-header__cta .btn{padding:11px 14px;font-size:14px}
}
/* Paa smale telefoner ble toppen for trang: logo + telefon + Kom i gang +
   menyknapp fikk ikke plass, og menyknappen ble skjovet ut over hoyre kant.
   Knappen er det viktigste der, saa vi beholder den og fjerner heller
   telefonikonet: den faste linja nederst har allerede Ring. Mindre luft
   mellom elementene gir resten av plassen vi trenger. */
@media (max-width:480px){
  .site-header__inner{gap:14px}
  .site-header__cta{gap:10px}
  .site-header__cta .link-phone{display:none}
}

/* Tekst som bare vises paa brede eller smale skjermer. */
.vis-smal{display:none}
@media (max-width:620px){
  .vis-bred{display:none}
  .vis-smal{display:inline}
}

/* ============================================================
   LENKER I LOEPENDE TEKST
   ------------------------------------------------------------
   Gul strek under, som vokser til en gul markering ved peking.
   Streken tegnes med bakgrunnsbilde og ikke text-decoration, fordi
   background-size kan animeres. Det kan ikke understreking.
   ============================================================ */
.article__body p a,.article__body li a,.article__body td a,
.prose p a,.prose li a,.prose td a,
.tidslinje__tekst a,.tidslinje__fot a,
.prosess__tekst a,.section__lead a,.hero__lead a,
.registre .prose a,.artikler__cta a{
  color:var(--ink);font-weight:600;text-decoration:none;
  background-image:linear-gradient(var(--brand),var(--brand));
  background-repeat:no-repeat;
  background-position:0 100%;
  background-size:100% 2px;
  padding-bottom:1px;
  transition:background-size .22s cubic-bezier(.22,.61,.36,1),color .15s ease;
}
.article__body p a:hover,.article__body li a:hover,.article__body td a:hover,
.prose p a:hover,.prose li a:hover,.prose td a:hover,
.tidslinje__tekst a:hover,.tidslinje__fot a:hover,
.prosess__tekst a:hover,.section__lead a:hover,.hero__lead a:hover,
.registre .prose a:hover,.artikler__cta a:hover{
  background-size:100% 100%;
  color:var(--on-brand);
}
.article__body p a:focus-visible,.prose p a:focus-visible,
.tidslinje__tekst a:focus-visible,.section__lead a:focus-visible,
.registre .prose a:focus-visible{
  outline:2px solid var(--ink);outline-offset:2px;border-radius:3px;background-size:100% 100%;
}
/* Knapper i teksten skal ikke faa strek under. */
.article__body .btn,.prose .btn,.article__body .btn:hover,.prose .btn:hover{
  background-image:none;color:var(--fg);padding-bottom:14px;
}
@media (prefers-reduced-motion:reduce){
  .article__body p a,.prose p a,.tidslinje__tekst a,.section__lead a,.registre .prose a{transition:none}
}

/* ============================================================
   SAMMENLIGNINGSTABELL PAA MOBIL
   ------------------------------------------------------------
   Kunden vil ikke sveipe sideveis. Tabellen settes derfor om til
   blokker: en blokk per egenskap, med behandlingsnavnet foran hver
   verdi. Ingen dobbelt markup, samme innhold, bare stablet.
   ============================================================ */
@media (max-width:760px){
  .table-scroll{overflow-x:visible;border:0;border-radius:0;background:none}
  /* Sveipehintet hoerer ikke hjemme naar det ikke er noe aa sveipe. */
  .table-scroll::after{content:none}

  .compare{display:block;min-width:0;background:none;border-collapse:separate}
  .compare thead{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
  .compare tbody{display:grid;gap:14px}

  .compare tr{display:grid;gap:0;background:var(--white);border:2px solid var(--line);
    border-radius:var(--radius);overflow:hidden}

  /* Egenskapen blir overskrift for blokken. */
  .compare tbody th[scope=row]{display:block;padding:14px 18px;background:var(--paper-2);
    border-bottom:2px solid var(--line);font-family:var(--display);font-weight:800;
    font-size:15px;color:var(--ink);text-align:left}

  .compare td{display:flex;align-items:center;justify-content:space-between;gap:16px;
    padding:12px 18px;border:0;border-bottom:1px solid var(--line);font-size:15px;text-align:right}
  .compare td:last-child{border-bottom:0}
  /* Behandlingsnavnet med ikon, samme som i menyen. */
  .compare td .compare__kol{display:inline-flex;align-items:center;gap:9px;flex:1 1 auto;
    font-family:var(--display);font-weight:600;font-size:14px;color:var(--ink-2);text-align:left}
  /* Verdien maa kunne krympe og bryte. Med flex:0 0 auto ble lange
     verdier som "Tak med restlevetid som skal vare lenge" liggende i
     full bredde og rant ut av kortet. */
  .compare .compare__verdi{flex:0 1 auto;min-width:0;overflow-wrap:break-word}
  .compare td .compare__kol{flex:0 1 auto}

  /* Den anbefalte behandlingen beholder uthevingen sin. */
  .compare td.compare__best{background:var(--brand-100)}
}
@media (max-width:560px){
  /* Paa smale skjermer er det ikke plass til navn og verdi ved siden
     av hverandre. Da staar verdien under, venstrestilt som navnet. */
  .compare td{display:block;text-align:left}
  .compare td .compare__kol{display:flex;margin-bottom:4px}
  .compare .compare__verdi{display:block;padding-left:39px}
  .compare td.compare__best .compare__kol{color:var(--ink);font-weight:800}
}

/* Tjenesteikon i sammenligningstabellen, samme sett som i Tjenester-menyen. */
.compare__ic{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;
  width:30px;height:30px;border-radius:9px;background:var(--paper-2);
  border:2px solid var(--line);color:var(--ink)}
.compare__ic svg{width:16px;height:16px}
.compare thead th{vertical-align:bottom}
/* Ikonet tar sin egen linje, mens navn og merkelapp foelger paa samme linje. */
.compare thead th .compare__ic{display:flex;margin-bottom:8px}
.compare thead th .compare__navn{display:inline}
.compare thead th .badge{display:inline-block;vertical-align:middle;margin-left:8px}
.compare thead th.compare__best .compare__ic{background:var(--brand);border-color:var(--ink);color:var(--on-brand)}
/* I tabellhodet staar ikonet over navnet, i mobilblokkene foran. */
@media (max-width:760px){
  .compare .compare__kol .compare__ic{width:26px;height:26px;border-radius:8px}
  .compare .compare__kol .compare__ic svg{width:14px;height:14px}
  .compare td.compare__best .compare__ic{background:var(--brand);border-color:var(--ink);color:var(--on-brand)}
}

/* ---------- Kundereferanse med video ---------- */
.referanse__grid{display:grid;grid-template-columns:1fr 1fr;gap:52px;align-items:center}
.referanse__tekst .section__lead{margin-bottom:26px}
.referanse__sitat{margin:0 0 28px;padding:22px 24px;border-left:4px solid var(--brand);
  background:var(--paper-2);border-radius:0 var(--radius) var(--radius) 0}
.referanse__sitat p{margin:0 0 14px;font-size:var(--t-lead);line-height:var(--t-lead-lh);
  color:var(--ink);font-style:italic}
.referanse__sitat footer{display:flex;flex-direction:column;gap:2px;font-style:normal}
.referanse__sitat footer b{font-family:var(--display);font-weight:800;font-size:var(--t-small);color:var(--ink)}
.referanse__sitat footer span{font-size:var(--t-small);color:var(--ink-2)}

/* Samme format og hoyde som klippene i heroen, saa videoene ser like ut
   uansett hvor paa siden de staar. */
.referanse__media{position:relative;margin:0;border-radius:var(--radius);overflow:hidden;
  border:2px solid var(--line);background:var(--paper-2);
  aspect-ratio:9/16;height:min(620px,74vh);width:auto;max-width:100%;
  justify-self:center;align-self:center}
.referanse__media video,.referanse__media img{display:block;width:100%;height:100%;object-fit:cover}

/* Klikkflaten dekker hele bildet, saa man ikke maa treffe en liten trekant. */
.referanse__spill{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:14px;cursor:pointer;
  border:0;background:linear-gradient(to bottom,rgba(15,15,24,.15),rgba(15,15,24,.55));
  color:#fff;font-family:var(--display);transition:background .2s ease}
.referanse__spill:hover{background:linear-gradient(to bottom,rgba(15,15,24,.25),rgba(15,15,24,.65))}
.referanse__spill:focus-visible{outline:3px solid var(--brand);outline-offset:-4px}
.referanse__spill-ic{display:flex;align-items:center;justify-content:center;width:68px;height:68px;
  border-radius:50%;background:var(--brand);color:var(--on-brand);
  box-shadow:0 8px 24px rgba(0,0,0,.3);transition:transform .18s ease}
.referanse__spill:hover .referanse__spill-ic{transform:scale(1.07)}
.referanse__spill-ic svg{width:30px;height:30px;margin-left:3px}
.referanse__spill-txt{font-weight:800;font-size:var(--t-small);letter-spacing:.02em;
  text-shadow:0 1px 4px rgba(0,0,0,.5)}
.referanse__spill-txt i{font-style:normal;opacity:.85;font-weight:600}
.referanse__spill[hidden]{display:none}

/* Foer filmen er lastet opp staar ruten som en tydelig plassholder. */
.referanse__media--venter{display:flex;align-items:center;justify-content:center;
  border-style:dashed}
.referanse__venter{font-family:var(--display);font-weight:700;font-size:var(--t-small);
  color:var(--ink-3);letter-spacing:.02em}

@media (max-width:940px){
  .referanse__grid{grid-template-columns:1fr;gap:32px;justify-items:center}
  .referanse__tekst{justify-self:stretch}
  .referanse__media{aspect-ratio:9/16;height:min(560px,66vh)}
}

/* ---------- Frostsprengning: mekanismen som en kjede ----------
   Kjeden gaar nedover, ikke paa tvers, fordi den staar i den smale
   venstrekolonnen. Ingen ramme rundt: innholdet flyter i teksten.
   Fargene er hentet fra designsystemet, ingen egne hex. */
.frost{position:relative;margin:0 0 28px}

.frost__tittel{margin:0 0 22px;font-family:var(--display);font-weight:800;
  font-size:var(--t-h3);line-height:var(--t-h3-lh);color:var(--ink)}

.frost__steg{list-style:none;margin:0;padding:0;counter-reset:frost;position:relative}
.frost__steg li{position:relative;counter-increment:frost;
  display:grid;grid-template-columns:44px 1fr;gap:16px;padding:0 0 22px 0}
/* Streken som binder stegene sammen. */
.frost__steg li:not(:last-child)::after{content:"";position:absolute;left:21px;top:44px;bottom:6px;
  width:2px;background:var(--line)}
.frost__steg li:last-child{padding-bottom:0}

.frost__steg li::before{content:counter(frost);grid-row:1/3;
  display:flex;align-items:center;justify-content:center;width:44px;height:44px;
  border-radius:14px;background:var(--white);border:2px solid var(--line);color:var(--ink);
  font-family:var(--display);font-weight:800;font-size:18px}
/* Siste steg er der skaden skjer, og markeres med merkevarefargen. */
.frost__steg li:last-child::before{background:var(--brand);border-color:var(--ink);color:var(--on-brand)}

.frost__steg b{display:block;font-family:var(--display);font-weight:800;
  font-size:var(--t-body);line-height:1.3;color:var(--ink);padding-top:11px}
/* Tittel og forklaring hoerer sammen og skal ligge tett. Den negative margen
   spiser opp linjeboksens luft, som ellers gir et sprang paa 17 px. */
.frost__steg span{display:block;margin-top:-4px;font-size:var(--t-small);
  line-height:1.45;color:var(--ink-2);max-width:52ch}

/* Sluttmerknaden staar som en notis under kjeden, ikke i egen ramme.
   En hvit boks paa hvit bakgrunn ville flytt fritt naar rammen rundt er borte. */
.frost__fot{margin:20px 0 0;padding:16px 0 0;border-top:2px solid var(--line);
  font-size:var(--t-small);line-height:var(--t-small-lh);color:var(--ink)}
@media (max-width:520px){
  .frost__steg li{grid-template-columns:38px 1fr;gap:13px}
  .frost__steg li::before{width:38px;height:38px;font-size:16px;border-radius:12px}
  .frost__steg li:not(:last-child)::after{left:18px;top:38px}
}

/* ---------- Garanti og tall i ett kort ----------
   Loftet til venstre, beviset til hoyre, i samme ramme. Som to seksjoner
   under hverandre tok de dobbelt saa mye hoyde og leste som to paastander
   uten sammenheng. Alle farger fra designsystemet. */
.tillit__kort{background:var(--white);border:2px solid var(--line);border-radius:var(--radius);
  padding:clamp(26px,3.2vw,40px) clamp(22px,3vw,40px)}
.tillit__hoved{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(230px,.75fr);gap:clamp(28px,3.4vw,46px);align-items:center}
/* Uten dette presser innhold som ikke kan brytes (den ett-linjes sjekklista
   under) venstre spalte vid, og tallblokken til hoyre klemmes ned til noen
   piksler saa tallene brekker vertikalt. min-width:0 lar spaltene foelge
   forholdet, og tallblokken har uansett et gulv paa 230 piksler. */
.tillit__hoved>*{min-width:0}
.tillit__lofte{display:block}

/* Seglet sitter midt paa overkanten av kortet og bryter ramma, saa det leses
   som et stempel paa dokumentet og ikke som et ikon inne i teksten. */
.tillit__kort{position:relative;padding-top:clamp(44px,4.4vw,58px)}
.tillit__segl{position:absolute;top:0;left:50%;transform:translate(-50%,-50%);
  width:76px;height:76px;border-radius:50%;overflow:hidden;z-index:2;
  box-shadow:0 6px 18px rgba(20,20,30,.18)}
.tillit__segl svg{width:100%;height:100%;display:block}
/* Glans som sveiper over seglet. Uten bevegelse ser gullet flatt ut. */
.tillit__segl::after{content:"";position:absolute;inset:-30%;pointer-events:none;
  background:linear-gradient(105deg,transparent 38%,rgba(255,255,255,.85) 48%,transparent 58%);
  transform:translateX(-120%);animation:seglglans 4.5s ease-in-out infinite}
@keyframes seglglans{
  0%,68%{transform:translateX(-120%)}
  84%,100%{transform:translateX(120%)}
}
@media (prefers-reduced-motion:reduce){ .tillit__segl::after{animation:none;opacity:0} }
.tillit__tekst .section__title{margin:0 0 10px}
.tillit__tekst .section__lead{margin:0 0 16px}
.tillit__tekst .section__lead p:last-child{margin-bottom:0}

/* Skillelinje mot tallene, ikke en ny ramme. */
.tillit__tall{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 12px;
  padding-left:clamp(24px,2.6vw,38px);border-left:2px solid var(--line);text-align:center}
.tillit__num{display:block;font-family:var(--display);font-weight:800;
  font-size:clamp(26px,2.9vw,34px);line-height:1.05;letter-spacing:-.02em;color:var(--ink);
  font-variant-numeric:tabular-nums}
.tillit__stjerne{color:var(--brand-edge);font-size:.72em;vertical-align:.14em;margin-left:.08em}
.tillit__lbl{display:block;margin-top:6px;font-size:13px;line-height:1.35;color:var(--muted)}

.tillit__note{margin:clamp(20px,2.4vw,28px) 0 0;padding-top:18px;border-top:2px solid var(--line);
  font-size:var(--t-small);line-height:var(--t-small-lh);color:var(--muted);text-align:center}
.tillit__note p:last-child{margin-bottom:0}

@media (max-width:940px){
  .tillit__hoved{grid-template-columns:minmax(0,1fr);gap:26px}
  .tillit__tall{padding-left:0;padding-top:24px;border-left:0;border-top:2px solid var(--line);
    grid-template-columns:repeat(4,minmax(0,1fr))}
}
@media (max-width:620px){
  /* Lista skal lese som en liste. Midtstilt gir ujevn venstrekant og
     haker som ikke staar under hverandre. */
  .tillit__tekst,.tillit__tekst .check-list li{text-align:left}
  /* Lista er en flex-rad, og en annen mobilregel sentrerer alle slike.
     justify-items gjelder ikke i flex, saa den maa overstyres her. */
  .tillit__tekst .check-list{justify-items:start;justify-content:flex-start}
  .tillit__tekst .check-list--row{justify-content:flex-start}
  .tillit__lofte{grid-template-columns:minmax(0,1fr);gap:16px}
  .tillit__segl{width:64px;height:64px}
  .tillit__tall{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* ---------- Tjenester gruppert ----------
   En liste med brede rader, ikke et rutenett med kort. Rutenettet ga tomrom
   i gruppene med en tjeneste uansett hvordan det ble satt opp. Filmen ligger
   i en staaende rute til venstre, saa den beholder formatet den er filmet i.
   Alle farger fra designsystemet. */
.tjgrupper__topp{max-width:820px;margin:0 auto 44px;text-align:center}
/* Ingressen sto paa tre korte linjer midt i en bred boks. text-wrap:balance
   gjoer linjene like lange, og med en lang setning betyr det at teksten
   krymper langt innenfor spalta. pretty holder bare den siste linja fra aa
   bli et enkelt ord, og lar resten fylle bredden. */
.tjgrupper__topp .section__lead--center{max-width:none;text-wrap:pretty}
.tjgruppe{padding:28px 0;border-top:2px solid var(--line)}
.tjgruppe:first-of-type{border-top:0;padding-top:0}

.tjgruppe__hode{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 16px;margin:0 0 14px}
.tjgruppe__tittel{margin:0;font-family:var(--display);font-weight:800;
  font-size:var(--t-h3);line-height:var(--t-h3-lh);color:var(--ink)}
.tjgruppe__sub{margin:0;font-size:var(--t-small);line-height:var(--t-small-lh);color:var(--ink-2)}

.tjliste{display:flex;flex-direction:column;gap:10px}

.tjrad{display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;align-items:center;gap:18px;
  padding:14px 18px 14px 14px;border:2px solid var(--line);border-radius:16px;background:var(--white);
  color:var(--ink);text-decoration:none;
  transition:border-color .16s ease,background .16s ease,box-shadow .16s ease}
.tjrad:hover{border-color:var(--ink);box-shadow:0 6px 18px rgba(20,20,30,.07)}
.tjrad:focus-visible{outline:2px solid var(--ink);outline-offset:3px}

/* Staaende rute, samme forhold som klippene er filmet i. */
.tjrad__media{position:relative;overflow:hidden;flex:0 0 auto;
  width:66px;height:88px;border-radius:12px;
  background:var(--paper-2);border:2px solid var(--line);
  display:flex;align-items:center;justify-content:center;
  transition:border-color .16s ease}
.tjrad:hover .tjrad__media{border-color:var(--ink)}
.tjrad__plakat,.tjrad__film{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.tjrad__film{opacity:0;transition:opacity .35s ease}
.tjrad--film:hover .tjrad__film{opacity:1}
.tjrad__ic{display:flex;align-items:center;justify-content:center;color:var(--ink);
  transition:color .16s ease}
.tjrad__ic svg{width:24px;height:24px}
.tjrad:hover .tjrad__ic{color:var(--brand-edge)}

.tjrad__tekst{min-width:0}
.tjrad__navn{display:block;font-family:var(--display);font-weight:700;
  font-size:var(--t-body);line-height:1.3;overflow-wrap:normal;word-break:normal;hyphens:none}
.tjrad__sub{display:block;margin-top:3px;font-size:var(--t-small);
  line-height:var(--t-small-lh);color:var(--ink-2)}

.tjrad__meta{flex:0 0 auto;padding:6px 12px;border-radius:999px;
  background:var(--brand-100);border:2px solid var(--brand);
  font-family:var(--display);font-weight:800;font-size:12.5px;color:var(--ink);white-space:nowrap}
.tjrad:hover .tjrad__meta{background:var(--brand)}
.tjrad__pil{display:flex;color:var(--ink-2);transition:color .16s ease,transform .16s ease}
.tjrad__pil svg{width:20px;height:20px}
.tjrad:hover .tjrad__pil{color:var(--ink);transform:translateX(3px)}

@media (max-width:640px){
  .tjgruppe{padding:24px 0}
  .tjrad{grid-template-columns:auto minmax(0,1fr) auto;gap:14px;padding:12px 14px}
  .tjrad__media{width:56px;height:74px}
  /* Noekkeltallet flyttes under navnet naar raden blir smal. Radgapet
     settes til null: ellers legger bade gap og marg seg mellom underteksten
     og merkelappen, og det ble et tomrom paa over tjue piksler. */
  .tjrad{column-gap:14px;row-gap:0}
  .tjrad__meta{grid-column:2;grid-row:2;justify-self:start;margin-top:6px;
    padding:4px 10px;font-size:12px}
  .tjrad__pil{grid-column:3;grid-row:1/3}
}
@media (prefers-reduced-motion:reduce){
  .tjrad,.tjrad__film,.tjrad__pil{transition:none}
}

/* ---------- NPS-maaler ----------
   Tallet alene sier lite. Maaleren viser hvor 85 ligger paa skalaen fra
   minus 100 til 100, og hvor bransjen ligger, og da forstaar man forskjellen
   uten aa kunne hva NPS er. */
.nps__topp{max-width:720px;margin:0 auto 38px;text-align:center}
.nps__kort{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(24px,3vw,44px);align-items:center;
  background:var(--white);border:2px solid var(--line);border-radius:var(--radius);
  padding:clamp(26px,3.2vw,42px)}
.nps__maler{margin:0;text-align:center}
.nps__maler svg{width:100%;max-width:360px;height:auto;display:block;margin:0 auto}
.nps__bue{fill:none;stroke-width:26;stroke-linecap:butt}
.nps__bue--rod{stroke:#d64545}
.nps__bue--gul{stroke:var(--brand)}
.nps__bue--gronn{stroke:#2f9e5f}
.nps__snittstrek{stroke:var(--ink-2);stroke-width:2;stroke-dasharray:4 3}
.nps__nal{stroke:var(--ink);stroke-width:5;stroke-linecap:round}
.nps__nav{fill:var(--ink)}
.nps__akse{fill:var(--muted);font-size:13px;font-family:var(--display);font-weight:700}
.nps__maler figcaption{margin-top:6px}
.nps__tall{display:block;font-family:var(--display);font-weight:800;font-size:clamp(46px,6vw,68px);
  line-height:1;letter-spacing:-.03em;color:var(--ink);font-variant-numeric:tabular-nums}
.nps__lbl{display:block;margin-top:4px;font-family:var(--display);font-weight:800;
  font-size:var(--t-caps);letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.nps__snitt{display:block;margin-top:12px;font-size:var(--t-small);color:var(--ink-2)}
.nps__tall-kort{display:grid;gap:14px}
.nps__rute{border-radius:16px;padding:24px 26px;color:#fff}
.nps__rute b{display:block;font-family:var(--display);font-weight:800;
  font-size:clamp(30px,3.6vw,42px);line-height:1;letter-spacing:-.02em}
.nps__rute span{display:block;margin-top:8px;font-size:var(--t-small);line-height:1.4;opacity:.94}
.nps__rute--ja{background:#2f9e5f}
.nps__rute--nei{background:#d64545}
.nps__punkter{grid-column:1/-1;list-style:none;display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));gap:14px 20px;
  margin:clamp(22px,2.6vw,30px) 0 0;padding:clamp(20px,2.4vw,26px) 0 0;
  border-top:2px solid var(--line)}
.nps__punkter li{position:relative;padding-left:26px;font-size:var(--t-small);
  line-height:1.4;color:var(--ink)}
.nps__punkter li::before{content:"";position:absolute;left:0;top:3px;width:16px;height:16px;
  border-radius:50%;background:var(--brand);box-shadow:inset 0 0 0 2px var(--ink)}
.calc__etter{margin:10px 0 0;font-size:var(--t-small);line-height:1.45;color:var(--ink-2)}
@media (max-width:860px){ .nps__punkter{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:520px){ .nps__punkter{grid-template-columns:1fr} }
.nps__note{max-width:70ch;margin:18px auto 0;text-align:center;
  font-size:var(--t-small);line-height:var(--t-small-lh);color:var(--muted)}
@media (max-width:860px){
  .nps__kort{grid-template-columns:minmax(0,1fr);gap:26px}
  .nps__tall-kort{grid-template-columns:1fr 1fr}
}
@media (max-width:520px){ .nps__tall-kort{grid-template-columns:1fr} }

/* ---------- Soek og filter over artiklene ---------- */
.artfilter{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:12px 16px;margin:0 0 26px}
.artfilter__sok{position:relative;flex:1 1 260px;max-width:380px}
.artfilter__ic{position:absolute;left:15px;top:50%;transform:translateY(-50%);
  width:18px;height:18px;color:var(--muted);pointer-events:none}
.artfilter__sok input{width:100%;padding:12px 16px 12px 44px;border:2px solid var(--line);
  border-radius:12px;background:var(--white);font:inherit;font-size:var(--t-small);color:var(--ink)}
.artfilter__sok input:focus{outline:none;border-color:var(--ink)}
.artfilter__sok input:focus+.artfilter__ic,.artfilter__sok:focus-within .artfilter__ic{color:var(--ink)}

/* Nedtrekk i stedet for en rad med knapper. Emnene er mange nok til at
   knappene tok en hel linje uten aa gi mer oversikt. */
/* Nedtrekket i filteret er samme komponent som i kalkulatoren, bare smalere. */
.kalkvelg--smal{flex:0 0 auto;min-width:216px}
.kalkvelg--smal .kalkvelg__knapp{padding:11px 14px;gap:10px}
.kalkvelg--smal .kalkvelg__txt b{font-size:var(--t-small)}
.kalkvelg--smal .kalkvelg__panel{left:auto;right:0;min-width:100%}
.artfilter__tomt{flex:1 1 100%;margin:6px 0 0;font-size:var(--t-small);color:var(--ink-2)}

/* ---------- Nedtrekk for behandling i kalkulatoren ----------
   Seks ruter tok en halv skjerm og taalte ikke kategoritilter. Et nedtrekk
   viser valget som er gjort, og kategoriene faar plass uten tomrom. */
.kalkvelg{position:relative}
.kalkvelg__knapp{display:flex;align-items:center;gap:14px;width:100%;
  padding:14px 16px;border:2px solid var(--line);border-radius:14px;background:var(--white);
  text-align:left;cursor:pointer;font:inherit;color:var(--ink);
  transition:border-color .15s ease,box-shadow .15s ease}
.kalkvelg__knapp:hover{border-color:var(--ink)}
.kalkvelg.er-apen .kalkvelg__knapp{border-color:var(--ink);box-shadow:0 6px 18px rgba(20,20,30,.08)}
.kalkvelg__ic{display:flex;align-items:center;justify-content:center;flex:0 0 auto;
  width:42px;height:42px;border-radius:12px;background:var(--brand);border:2px solid var(--ink);
  color:var(--on-brand)}
.kalkvelg__ic svg{width:21px;height:21px}
.kalkvelg__txt{flex:1 1 auto;min-width:0}
.kalkvelg__txt b{display:block;font-family:var(--display);font-weight:700;font-size:16px;line-height:1.25}
.kalkvelg__txt small{display:block;margin-top:2px;font-size:var(--t-small);color:var(--ink-2)}
.kalkvelg__pil{flex:0 0 auto;width:20px;height:20px;color:var(--ink-2);transition:transform .2s ease}
.kalkvelg.er-apen .kalkvelg__pil{transform:rotate(180deg)}

.kalkvelg__panel{position:absolute;left:0;right:0;top:calc(100% + 8px);z-index:30;
  max-height:min(62vh,420px);overflow-y:auto;padding:8px;
  background:var(--white);border:2px solid var(--ink);border-radius:16px;
  box-shadow:0 18px 40px rgba(20,20,30,.16)}
.kalkvelg__gruppe{margin:12px 0 4px;padding:0 10px;font-family:var(--display);font-weight:800;
  font-size:10.5px;line-height:1;letter-spacing:.08em;text-transform:uppercase;color:var(--ink)}
.kalkvelg__panel>.kalkvelg__gruppe:first-child{margin-top:4px}
.kalkvelg__opt{display:flex;align-items:center;gap:12px;padding:10px;border-radius:12px;cursor:pointer;
  transition:background .12s ease}
.kalkvelg__opt:hover{background:var(--paper-2)}
.kalkvelg__opt input{position:absolute;opacity:0;pointer-events:none}
.kalkvelg__oic{display:flex;align-items:center;justify-content:center;flex:0 0 auto;
  width:38px;height:38px;border-radius:11px;background:var(--paper-2);border:2px solid var(--line);
  color:var(--ink);transition:background .12s ease,border-color .12s ease,color .12s ease}
.kalkvelg__oic svg{width:19px;height:19px}
.kalkvelg__otxt{flex:1 1 auto;min-width:0}
.kalkvelg__otxt b{display:block;font-family:var(--display);font-weight:700;font-size:15px;line-height:1.25}
.kalkvelg__otxt small{display:block;margin-top:1px;font-size:13px;color:var(--ink-2)}
.kalkvelg__hake{flex:0 0 auto;width:18px;height:18px;color:var(--ink);opacity:0;transition:opacity .12s ease}
.kalkvelg__opt:has(input:checked){background:var(--brand-100)}
.kalkvelg__opt:has(input:checked) .kalkvelg__oic{background:var(--brand);border-color:var(--ink);color:var(--on-brand)}
.kalkvelg__opt:has(input:checked) .kalkvelg__hake{opacity:1}
.kalkvelg__opt:has(input:focus-visible){outline:2px solid var(--ink);outline-offset:2px}

/* Garantien og utmerkelsen hoerer sammen. Da trenger de ikke full
   seksjonsavstand mellom seg. */
.section.tillit+.section.borettslag{padding-top:0}

/* Overskriften paa forsiden skal staa paa to linjer. Ved 48 piksler krevde
   foerste linje 645 piksler i en spalte paa 550, og brakk til tre. */
.hero--home .hero__title{font-size:clamp(30px,3.1vw,44px)}

/* Stjerne paa paakrevde felt. Uten border-bottom faar den ikke den
   prikkede understreken nettleseren gir abbr som standard. */
.paakrevd{color:var(--brand-edge);font-weight:700;text-decoration:none;border-bottom:0;cursor:help}

/* ---------- Foer og etter ----------
   To bilder oppa hverandre. Foer-bildet klippes fra hoyre av --fe-pos, som
   spaken styrer. Spaken er et ekte range-felt: da fungerer tastatur, skjermleser
   og berøring uten at vi skriver dragelogikk selv. Selve feltet er usynlig og
   ligger over hele flaten, mens streken og grepet er det man ser. */
.fegrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:26px;margin-top:34px}
.fekort{margin:0}
.fe{position:relative;border-radius:var(--radius);overflow:hidden;border:2px solid var(--line);
  background:var(--ink);aspect-ratio:4/3;touch-action:pan-y}
.fe__bilde{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;user-select:none}
.fe__bilde--for{clip-path:inset(0 calc(100% - var(--fe-pos)) 0 0)}

.fe__merke{position:absolute;top:14px;z-index:3;padding:5px 12px;border-radius:99px;
  font-size:12px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
  background:rgba(22,22,31,.72);color:#fff;backdrop-filter:blur(4px);pointer-events:none}
.fe__merke--v{left:14px}
.fe__merke--h{right:14px;background:var(--brand);color:var(--ink)}

.fe__strek{position:absolute;top:0;bottom:0;left:var(--fe-pos);width:3px;margin-left:-1.5px;
  background:#fff;box-shadow:0 0 0 1px rgba(22,22,31,.25);z-index:4;pointer-events:none}
.fe__grep{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:46px;height:46px;border-radius:50%;background:#fff;border:3px solid var(--brand);
  box-shadow:0 6px 20px rgba(22,22,31,.3);display:grid;place-items:center}
.fe__grep::before,.fe__grep::after{content:"";position:absolute;width:0;height:0;
  border-top:6px solid transparent;border-bottom:6px solid transparent}
.fe__grep::before{left:11px;border-right:8px solid var(--ink)}
.fe__grep::after{right:11px;border-left:8px solid var(--ink)}

/* Naar JavaScript har tatt over dragingen, skal ikke range-feltet ogsaa
   svare paa pekeren. Feltet er fortsatt i fanerekkefolgen og styres med
   piltastene som foer. */
.fe--js .fe__spak{pointer-events:none}

/* Spaken dekker hele bildet, men vises ikke. Bare knasten kan gripes. */
/* Kalkulatorens regel for alle range-felt setter hoyden til 6 px og vinner
   paa spesifisitet. Uten element og attributt i velgeren blir dragefeltet en
   seks piksler hoy stripe midt i bildet, og da foles slideren som om den
   ikke virker. */
input[type=range].fe__spak{position:absolute;inset:0;z-index:5;width:100%;height:100%;margin:0;
  border-radius:0;flex:none;
  appearance:none;-webkit-appearance:none;background:transparent;cursor:ew-resize;outline:none}
input[type=range].fe__spak::-webkit-slider-runnable-track{background:transparent;border:0;height:100%}
input[type=range].fe__spak::-moz-range-track,input[type=range].fe__spak::-moz-range-progress{background:transparent;border:0}
/* Knasten maa ha en fast hoyde. Med height:100% tegnet Chrome likevel sin
   egen runde knott oeverst paa sporet, og da fikk skillelinjen en prikk paa toppen. */
input[type=range].fe__spak::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:46px;height:46px;
  border:0;border-radius:50%;background:transparent;box-shadow:none;cursor:ew-resize}
input[type=range].fe__spak::-moz-range-thumb{width:46px;height:46px;border:0;border-radius:50%;
  background:transparent;box-shadow:none;cursor:ew-resize}
.fe__spak:focus-visible+.fe__merke,.fe__spak:focus-visible~.fe__strek .fe__grep{outline:3px solid var(--ink);outline-offset:3px}

.fekort__tekst{margin-top:14px;display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;font-size:15px}
.fekort__tekst b{color:var(--ink)}
.fekort__tekst span{color:var(--muted)}
.fekort__merke{margin-left:auto;font-style:normal;font-size:12px;font-weight:800;
  background:var(--brand-100,#fff9dd);border:1px solid var(--brand-line,#f0c400);
  color:var(--ink);padding:3px 10px;border-radius:99px}

@media (max-width:820px){
  .fegrid{grid-template-columns:minmax(0,1fr);gap:22px}
  .fekort__merke{margin-left:0}
}

.femer{margin:30px 0 0}

/* Filmen i tekstseksjonen paa forsiden staar bare paa store skjermer. Paa
   mobil legger den seg som et hoyt staaende klipp mellom overskriften og
   punktlista og skyver poenget langt ned. Heroen rett over har allerede
   film, saa den andre gir ingenting ekstra. */
@media (max-width:780px){
  .home .problem__grid .hero__media--video{display:none}
}

/* ============================================================
   HURTIGSKJEMA
   ------------------------------------------------------------
   Navn, telefon og en knapp paa en linje. Den som er klar til aa
   bli ringt skal ikke maatte gjennom seks steg foerst. Under 780
   piksler stables feltene: to felt og en knapp ved siden av
   hverandre paa en telefon blir for smalt til aa treffe.
   ============================================================ */
.hurtig--gul{background:var(--brand)}
/* Gul knapp paa gul bunn forsvinner. Paa baandet gaar den moerk, som paa de
   andre gule seksjonene. */
.hurtig--gul .btn--primary{--bg:var(--ink);--fg:var(--white);box-shadow:0 6px 0 rgba(0,0,0,.35)}
.hurtig--gul .btn--primary:hover{--bg:var(--ink-2);box-shadow:0 8px 0 rgba(0,0,0,.35),var(--shadow-sm)}
.hurtig--gul .btn--primary:active{box-shadow:0 2px 0 rgba(0,0,0,.35);transform:translateY(4px)}
.hurtig__inner{max-width:1000px;margin-inline:auto;text-align:center}
.hurtig__tittel{font-family:var(--display);font-weight:800;font-size:clamp(22px,3vw,30px);margin:0 0 6px}
.hurtig__lead{margin:0 0 22px;font-size:var(--t-small);line-height:var(--t-small-lh);color:var(--ink)}
.hurtig--gul .hurtig__lead{color:rgba(31,31,46,.78)}
.hurtig__skjema{display:flex;gap:12px;align-items:stretch;justify-content:center;flex-wrap:wrap}
.hurtig__felt{flex:1 1 220px;min-width:0;max-width:280px;display:block}
.hurtig__felt input{width:100%;height:100%;min-height:56px;padding:14px 18px;border-radius:999px;
  border:2px solid var(--ink);background:var(--white);font:inherit;font-size:16px;color:var(--ink)}
.hurtig__felt input::placeholder{color:#8a8a9c}
.hurtig__felt input:focus-visible{outline:3px solid var(--ink);outline-offset:2px}
.hurtig__felt input.er-feil{border-color:var(--error);box-shadow:0 0 0 3px rgba(234,71,71,.18)}
.hurtig__skjema .btn{flex:0 0 auto;min-height:56px}
/* Fella skal ikke sees, men heller ikke skjules med display:none: enkelte
   roboter hopper over felt de ser er skjult paa den maaten. */
.hurtig__felle{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.hurtig__kvittering{flex:1 0 100%;margin:6px 0 0;font-weight:700}
/* Den smale utgaven som staar inne i priskortet: felt under hverandre, full
   bredde, og ingen gul bunn aa ta hensyn til. */
/* Kortet er et rutenett med justify-items:center, saa alt krymper til sitt
   eget innhold. Knappene har allerede justify-self:stretch; skjemaet maa ha
   det samme, ellers blir feltene smalere enn knappen under. */
.sticky-cta__inner>.hurtig__skjema{justify-self:stretch;width:100%}
.hurtig__skjema--smal{flex-direction:column;align-items:stretch;gap:10px;margin-top:4px}
.hurtig__skjema--smal .hurtig__felt{max-width:none;flex:1 1 auto}
.hurtig__skjema--smal .hurtig__felt input{min-height:50px;padding:12px 16px;font-size:15px;
  border-width:2px;border-color:var(--line)}
.hurtig__skjema--smal .hurtig__felt input:focus-visible{border-color:var(--ink)}
.hurtig__skjema--smal .btn{width:100%;justify-content:center;min-height:50px}
.sticky-cta__eller{margin:12px 0 8px;text-align:center;font-size:13px;color:var(--ink-2)}
.hurtig__smaa{margin:16px auto 0;max-width:60ch;font-size:13px;line-height:1.5;color:var(--ink-2)}
.hurtig__samtykke{margin:4px auto 0;max-width:60ch;font-size:13px;line-height:1.5;color:var(--ink-2)}
/* Bunnteksten paa en annonseside: logo til venstre, det juridiske til hoyre.
   Da er avsenderen det oyet finner foerst, og aarstall og org.nr staar der de
   ikke tar oppmerksomhet. */
.footer-bottom--lp{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap}
.footer-bottom--lp .footer-bottom__jus{margin-left:auto;text-align:right;justify-content:flex-end}
.logo--bunn{flex:0 0 auto;display:inline-flex;align-items:center}
.logo--bunn .logo__img{height:30px;width:auto;display:block}
/* Setning nummer to i overskriften begynner paa ny linje. Uten dette flyter
   den inn i den uthevede delen, og markeringen brekker midt i et ord. */
.hero__title-slutt{display:block}
/* Tallblokken paa landingssidene sto i to spalter med en tom halvdel til
   hoyre, og «dokumentert holdbarhet» brakk i to under 15 aar. Fire spalter
   bruker plassen som allerede var der, og da faar hver etikett en linje. */
@media (min-width:1000px){
  /* Fire spalter ble for smalt og ga tre linjer per etikett. To spalter med
     mer bredde er riktig kompromiss: da faar teksten under tallet en linje. */
  .lp .tillit__hoved{grid-template-columns:1fr 1fr}
  .lp .tillit__tall{gap:22px 18px}
  .lp .tillit__lbl{white-space:nowrap}
}
/* Overskriften paa landingssiden staar ved siden av skjemaet og har derfor
   bare rundt 550 piksler aa gaa paa. Med den vanlige stoerrelsen brakk
   foerste setning i to, og tittelen ble tre linjer i stedet for to. */
.lp .hero__title{font-size:clamp(28px,3.1vw,42px)}

/* Telefon og e-post ved siden av hverandre. To korte felt under hverandre
   gjor steget hoyere enn det trenger aa vaere, og adressen under skyves
   under folden paa en liten skjerm. */
@media (min-width:520px){
  /* .is-active maa staa i velgeren. Uten den slaar display:grid regelen som
     skjuler steget, og kontaktsteget ble staaende synlig under steg 1. */
  .lead__step[data-step="kontakt"].is-active{display:grid;grid-template-columns:1fr 1fr;column-gap:14px}
  .lead__step[data-step="kontakt"]>*{grid-column:1 / -1}
  .lead__step[data-step="kontakt"]>.field:has(input[name="telefon"]),
  .lead__step[data-step="kontakt"]>.field:has(input[name="epost"]){grid-column:auto}
}

/* Tre korte punkter skal staa paa en linje naar det er plass. Ellers brekker
   de i to og en, og lista ser ut som om noe mangler. */
@media (min-width:900px){
  /* Vil staa paa en linje naar det er plass, men skal wrappe naar spalta er
     trang. Med nowrap ville lista spilt ut av spalta og dyttet tallblokken vekk. */
  .tillit__tekst .check-list--row{flex-wrap:wrap;gap:12px 20px}
  .tillit__tekst .check-list--row li{white-space:nowrap}
}

@media (max-width:640px){
  .footer-bottom--lp{flex-direction:column;text-align:center}
  .footer-bottom--lp .footer-bottom__jus{margin-left:0;text-align:center;justify-content:center}
}
.hurtig--gul .hurtig__samtykke{color:rgba(31,31,46,.7)}
.hurtig--gul .hurtig__samtykke a{color:var(--ink)}
.hurtig--gul .hurtig__smaa{color:rgba(31,31,46,.7)}
.hurtig--gul .hurtig__smaa a{color:var(--ink)}
@media (max-width:780px){
  .hurtig__skjema{flex-direction:column;align-items:stretch}
  .hurtig__felt{max-width:none;flex:1 1 auto}
  .hurtig__skjema .btn{width:100%;justify-content:center}
}

/* Toppen paa en landingsside har ingen meny, saa knappen og telefonen
   skal ha luften menyen ellers tar. */
.lp .site-header__inner{gap:16px}
.lp .site-header__cta{margin-left:auto}

/* Besparelsen mot et takbytte, under prisen i kalkulatoren. Helt rund som
   knappen over, og med luft nok til at de to ikke leses som en enhet.
   999px og ikke 50 %: prosent regnes ut fra hoyde og bredde hver for seg og
   gir en oval naar teksten gaar over to linjer. */
.calc__spart{margin:20px 0 0;padding:11px 22px;border-radius:999px;
  background:var(--brand-100);border:1px solid var(--brand-line,#f0c400);
  font-size:14.5px;line-height:1.45;color:var(--ink);text-align:center}
.calc__spart b{font-family:var(--display);font-weight:800}

/* ---------- Innglidning ved scroll ----------
   Klassen .inn settes av app.js, og bare paa det som ligger under
   skjermkanten. Under prefers-reduced-motion finnes reglene ikke, saa alt
   staar synlig med en gang. Bare opacity og transform animeres; begge gaar
   paa kompositoren og tvinger ikke ny layout mens man scroller. */
@media (prefers-reduced-motion:no-preference){
  /* Ingen overgang her. Ligger den paa .inn, starter en overgang i det
     klassen settes, og elementet toner ut mens man ser paa det. Naar
     overgangen bare finnes paa slutt-tilstanden, gjelder den den ene veien
     vi faktisk vil animere: inn. */
  .inn{opacity:0;transform:translateY(22px)}
  .inn--vis{opacity:1;transform:none;
    transition:opacity .7s cubic-bezier(.16,.84,.44,1) var(--inn-vent,0ms),
               transform .7s cubic-bezier(.16,.84,.44,1) var(--inn-vent,0ms)}
}
/* Papir har ingen skjermkant aa krysse. Uten dette ville alt som ikke var
   scrollet forbi blitt hvitt i utskriften og i PDF. */
@media print{
  .inn{opacity:1 !important;transform:none !important}
}

/* Invitasjonskortet fyller den tomme ruten paa siste rad. Det har egen klasse
   og ikke .fekort, slik at telleregelen under bare teller ekte par. */
.fekort-cta{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;
  gap:12px;padding:32px 26px;border-radius:var(--radius);aspect-ratio:4/3;
  border:2px dashed var(--brand-line,#f0c400);background:var(--brand-100,#fff9dd)}
.fekort-cta__tittel{margin:0;font-size:clamp(20px,2.2vw,26px);font-weight:800;line-height:1.2;color:var(--ink)}
.fekort-cta__tekst{margin:0;max-width:34ch;color:var(--muted);font-size:15px;line-height:1.55}
.section--dark .fekort-cta{background:rgba(255,255,255,.92);border-color:rgba(22,22,31,.35)}
@media (max-width:820px){
  .fekort-cta{aspect-ratio:auto;padding:28px 22px}
}

/* Nøyaktig tre par staar paa en rad, slik galleriet paa forsiden gjorde.
   Fire eller flere gaar tilbake til to kolonner, der bildene faar plass. */
.fegrid:has(.fekort:nth-child(3)):not(:has(.fekort:nth-child(4))){grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:1000px){
  .fegrid:has(.fekort:nth-child(3)):not(:has(.fekort:nth-child(4))){grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:820px){
  .fegrid:has(.fekort:nth-child(3)):not(:has(.fekort:nth-child(4))){grid-template-columns:minmax(0,1fr)}
}