/* ============================================================
   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;
}
.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}
.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}
.drop__foot{margin-top:4px;padding:12px;border-top:2px solid var(--line);font-family:var(--display);font-weight:600;font-size:13.5px;color:var(--ink);transition:color .15s}
.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);
  grid-auto-flow:column;grid-template-rows:repeat(4,auto);gap:2px}
.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;grid-auto-flow:row;grid-template-rows:none}
}
.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}
}
.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 a{color:var(--ink);text-decoration:underline;text-underline-offset:2px;text-decoration-thickness:1px}
.prose a:hover{text-decoration-thickness:2px}
.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}

/* 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}
.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}
.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. */
.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}
.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);box-shadow:none}
.article__body .is-style-outline .wp-block-button__link:hover{background:var(--ink);color:#fff}
/* 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}
.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%}
.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}
.calc__price-label{font-size:14px;color:var(--ink)}
.calc__price-val{font-family:var(--display);font-weight:800;font-size:clamp(22px,3.4vw,30px);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}
.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__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}}
@media (max-width:520px){.videorad__grid{grid-template-columns:1fr;max-width:340px;margin-inline:auto}}

/* ---------- 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: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}
.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)}
.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)}

/* ---------- 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}
.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}
.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,max-content);gap:36px clamp(28px,4.4vw,60px);padding:54px 0 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}
.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}
.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:22px 0 32px;font-size:13px;color:var(--ink-2);flex-wrap:wrap;gap:12px}
.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}
.footer-credit:hover{color:var(--ink)}
.footer-addr{line-height:1.5}

/* ---------- Sticky mobile CTA ---------- */
.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}
.borettslag__copy .hl{color:var(--ink);background:linear-gradient(180deg,transparent 62%,#fff 62%)}
.borettslag__cards{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:1fr 1fr;gap:16px}
.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}
.borettslag__cards b{font-family:var(--display);font-size:16px}
.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}
.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 video{display:block;width:100%;height:100%;object-fit:cover;object-position:center}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:940px){
  .hero__grid,.calc,.cta-final__grid,.problem__grid,.guarantee__inner{grid-template-columns: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:1fr 1fr}
  .borettslag__grid,.husmaling__inner{grid-template-columns:1fr}
  .footer-main{grid-template-columns:1fr 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,.chip-group,.article-cards,.borettslag__cards{grid-template-columns:1fr}
  .husmaling__inner{padding:28px 24px}
  .about__stats{grid-template-columns:1fr 1fr}
  .chip-group{grid-template-columns:1fr 1fr 1fr}
  .site-header__cta .link-phone__num{display:none}
  .footer-main{grid-template-columns:1fr}
  .footer-bottom{flex-direction:column;align-items:flex-start}
  .mobile-cta{display:flex}
  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}
.article__body a:hover{color:var(--ink)}
/* 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);padding:20px 22px;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)}
.article-tl__actions{display:flex;gap:10px;flex-wrap:wrap}

/* 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)}
@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}
}