/* liftutleiere.no — industriell/utilitær: asfalt, varselgul, skravur.
   Ingen rammeverk. Kvadratiske hjørner. Condensed plakat-typografi. */

:root{
  --asfalt:#17181A;
  --asfalt-2:#1F2124;
  --betong:#E9E7E1;
  --betong-2:#DFDCD4;
  --hvit:#F7F6F2;
  --ink:#141517;
  --gul:#F5C400;
  --gul-morn:#C79E00;
  --stal:#6E7178;
  --stal-lys:#9A9DA3;
  --line:#C8C4BA;
  --line-dark:#33363B;
  --gronn:#2E7D46;
  --display:'Big Shoulders Display', 'Arial Narrow', sans-serif;
  --sans:'IBM Plex Sans', 'Helvetica Neue', sans-serif;
  --mono:'IBM Plex Mono', monospace;
  --max:1180px;
  --stripe:repeating-linear-gradient(-45deg,var(--gul) 0 14px,var(--ink) 14px 28px);
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:var(--sans);background:var(--betong);color:var(--ink);line-height:1.55;-webkit-font-smoothing:antialiased}
img{max-width:100%}
a{color:inherit}
.wrap{max-width:var(--max);margin:0 auto;padding:0 20px}

/* ---------- topplinje + nav ---------- */
.hazard{height:10px;background:var(--stripe)}
header.site{background:var(--asfalt);color:var(--hvit);border-bottom:1px solid var(--line-dark)}
.nav{display:flex;align-items:center;justify-content:space-between;padding:14px 0;gap:16px}
.logo{font-family:var(--display);font-weight:800;font-size:26px;letter-spacing:.5px;text-transform:uppercase;text-decoration:none;display:flex;align-items:center;gap:10px}
.logo .dot{width:14px;height:14px;background:var(--gul);display:inline-block}
.logo span em{color:var(--gul);font-style:normal}
.nav-links{display:flex;gap:22px;align-items:center}
.nav-links a{color:var(--stal-lys);text-decoration:none;font-size:14px;font-weight:500;text-transform:uppercase;letter-spacing:.08em}
.nav-links a:hover{color:var(--hvit)}
.nav-links a.cta{background:var(--gul);color:var(--ink);padding:9px 16px;font-weight:700}
.nav-links a.cta:hover{background:var(--hvit);color:var(--ink)}

/* ---------- hero ---------- */
.hero{color:var(--hvit);padding:56px 0 46px;position:relative;overflow:hidden;
  background:
    linear-gradient(to right, rgba(20,21,23,.96) 0%, rgba(20,21,23,.88) 42%, rgba(20,21,23,.55) 75%, rgba(20,21,23,.38) 100%),
    var(--asfalt) url('/bilder/hero.jpg') center 38%/cover no-repeat}
.hero>.wrap{position:relative;z-index:1}
.hero::after{content:"";position:absolute;right:-140px;top:-40px;width:420px;height:520px;
  background:repeating-linear-gradient(-45deg,transparent 0 26px,rgba(245,196,0,.05) 26px 52px);transform:rotate(8deg);pointer-events:none}
.eyebrow{font-family:var(--mono);font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:var(--gul);margin-bottom:14px}
.hero h1{font-family:var(--display);font-weight:800;text-transform:uppercase;line-height:.95;
  font-size:clamp(44px,8.5vw,110px);letter-spacing:.5px}
.hero h1 .g{color:var(--gul)}
.hero p.lede{max-width:640px;margin-top:18px;color:var(--stal-lys);font-size:17px}
.hero .tall{display:flex;gap:34px;margin-top:26px;flex-wrap:wrap}
.hero .tall div{border-left:3px solid var(--gul);padding-left:12px}
.hero .tall b{font-family:var(--display);font-size:30px;font-weight:800;display:block;line-height:1}
.hero .tall span{font-size:12px;text-transform:uppercase;letter-spacing:.1em;color:var(--stal-lys)}

/* ---------- søk + filter ---------- */
.sok-panel{background:var(--gul);border-bottom:3px solid var(--ink)}
.sok-inner{display:flex;gap:0;padding:18px 0;flex-wrap:wrap;align-items:stretch}
.sok-inner input[type=search]{flex:1;min-width:240px;border:3px solid var(--ink);background:var(--hvit);
  padding:14px 16px;font-size:17px;font-family:var(--sans);outline:none}
.sok-inner input[type=search]:focus{background:#fff}
.chips{display:flex;gap:8px;margin-left:14px;align-items:center;flex-wrap:wrap}
.chip{border:3px solid var(--ink);background:transparent;color:var(--ink);font-family:var(--display);
  font-weight:700;text-transform:uppercase;letter-spacing:.06em;font-size:15px;padding:10px 16px;cursor:pointer}
.chip.aktiv{background:var(--ink);color:var(--gul)}
.chip:hover:not(.aktiv){background:rgba(0,0,0,.08)}

/* ---------- seksjoner ---------- */
.sek{padding:46px 0}
.sek-hode{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin-bottom:22px;flex-wrap:wrap}
.sek h2{font-family:var(--display);font-weight:800;text-transform:uppercase;font-size:clamp(28px,4.5vw,44px);line-height:1}
.sek-hode .hint{font-family:var(--mono);font-size:12px;color:var(--stal);letter-spacing:.06em}

/* ---------- fylkesgrid ---------- */
.fylker{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:10px}
.fylke-kort{border:2px solid var(--ink);background:var(--hvit);padding:16px 16px 13px;text-decoration:none;
  display:flex;justify-content:space-between;align-items:baseline;transition:transform .08s ease}
.fylke-kort:hover{background:var(--gul);transform:translate(-2px,-2px);box-shadow:4px 4px 0 var(--ink)}
.fylke-kort b{font-family:var(--display);font-weight:800;text-transform:uppercase;font-size:19px;letter-spacing:.03em}
.fylke-kort span{font-family:var(--mono);font-size:13px;color:var(--stal)}

/* ---------- rader (oppføringer) ---------- */
.rowlist{display:flex;flex-direction:column;gap:10px}
.row{display:grid;grid-template-columns:56px 1fr auto;gap:16px;align-items:center;
  background:var(--hvit);border:2px solid var(--ink);padding:16px 18px;position:relative}
.row .nr{font-family:var(--display);font-weight:800;font-size:30px;color:var(--stal-lys);line-height:1}
.row.featured{border:3px solid var(--ink);background:#FFF8DF;box-shadow:6px 6px 0 var(--gul)}
.row.featured .nr{color:var(--gul-morn)}
.row-info a.navn{font-family:var(--display);font-weight:800;font-size:22px;text-transform:uppercase;
  letter-spacing:.02em;text-decoration:none;line-height:1.1}
.row-info a.navn:hover{background:var(--gul)}
.row-meta{display:flex;gap:12px;flex-wrap:wrap;margin-top:5px;font-size:13.5px;color:var(--stal);align-items:center}
.badge{font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;
  border:1.5px solid var(--ink);padding:2px 7px;color:var(--ink);background:var(--betong-2)}
.badge.lift{background:var(--gul);font-weight:600}
.badge.frem{background:var(--ink);color:var(--gul);border-color:var(--ink);font-weight:600}
.badge.kjede{background:transparent;color:var(--stal);border-color:var(--stal)}
.stjerne{color:var(--gul-morn);font-weight:700}
.g-attr{font-size:11px;color:var(--stal-lys)}
.g-attr a{color:var(--stal)}
.row-handling{display:flex;gap:8px;align-items:center}
.btn{display:inline-block;border:2px solid var(--ink);padding:10px 16px;font-weight:700;font-size:14px;
  text-decoration:none;text-transform:uppercase;letter-spacing:.05em;font-family:var(--sans);cursor:pointer;background:var(--hvit)}
.btn:hover{background:var(--betong-2)}
.btn-gul{background:var(--gul)}
.btn-gul:hover{background:var(--ink);color:var(--gul)}
.btn-mork{background:var(--ink);color:var(--hvit)}
.btn-mork:hover{background:var(--gul);color:var(--ink)}
.tom{border:2px dashed var(--stal);padding:26px;text-align:center;color:var(--stal);display:none}

/* ---------- profilside ---------- */
.brodsmule{font-family:var(--mono);font-size:12px;color:var(--stal);padding:18px 0 0}
.brodsmule a{color:var(--stal)}
.profil-hode{padding:26px 0 34px}
.profil-hode h1{font-family:var(--display);font-weight:800;text-transform:uppercase;font-size:clamp(34px,6vw,64px);line-height:.98}
.profil-badges{display:flex;gap:8px;margin-top:12px;flex-wrap:wrap}
.profil-grid{display:grid;grid-template-columns:1.4fr .9fr;gap:26px;padding-bottom:52px;align-items:start}
.kort{background:var(--hvit);border:2px solid var(--ink);padding:22px}
.kort h2{font-family:var(--display);font-weight:800;text-transform:uppercase;font-size:22px;margin-bottom:12px}
.fakta{list-style:none}
.fakta li{display:flex;justify-content:space-between;gap:14px;padding:9px 0;border-bottom:1px solid var(--line);font-size:14.5px}
.fakta li:last-child{border-bottom:none}
.fakta .n{color:var(--stal);text-transform:uppercase;font-size:11.5px;letter-spacing:.08em;font-family:var(--mono);padding-top:2px;white-space:nowrap}
.fakta .v{text-align:right;font-weight:500;overflow-wrap:anywhere}
/* Steglister: lange setninger skal leses fra venstre, ikke ligge høyrejustert */
.fakta.steg li{align-items:flex-start;gap:14px}
.fakta.steg .n{font-family:var(--display);font-size:20px;line-height:1.1;padding-top:0;
  color:var(--gul-morn);letter-spacing:0;text-transform:none;min-width:18px}
.fakta.steg .v{text-align:left;font-weight:400;line-height:1.5}
.vurdering-stor{display:flex;align-items:baseline;gap:10px;margin:4px 0 2px}
.vurdering-stor b{font-family:var(--display);font-size:52px;font-weight:800;line-height:1}
.cta-kort{background:var(--asfalt);color:var(--hvit);border:2px solid var(--ink);padding:22px;position:relative}
.cta-kort::before{content:"";position:absolute;top:0;left:0;right:0;height:8px;background:var(--stripe)}
.cta-kort h2{font-family:var(--display);font-weight:800;text-transform:uppercase;font-size:22px;margin:10px 0 8px;color:var(--gul)}
.cta-kort p{font-size:14px;color:var(--stal-lys);margin-bottom:14px}

/* ---------- bli synlig / prisside ---------- */
.pris-kort{background:var(--hvit);border:3px solid var(--ink);max-width:520px;box-shadow:8px 8px 0 var(--gul)}
.pris-topp{background:var(--ink);color:var(--gul);padding:16px 22px;font-family:var(--display);
  font-weight:800;text-transform:uppercase;font-size:22px;letter-spacing:.04em}
.pris-body{padding:24px 22px}
.pris-tall{font-family:var(--display);font-weight:800;font-size:64px;line-height:1}
.pris-tall small{font-size:20px;color:var(--stal);font-family:var(--sans);font-weight:500}
.pris-body ul{list-style:none;margin:18px 0}
.pris-body li{padding:8px 0 8px 30px;position:relative;border-bottom:1px solid var(--line);font-size:15px}
.pris-body li::before{content:"■";position:absolute;left:2px;color:var(--gul-morn);font-size:13px}

/* ---------- artikkel (typesider, prisside) ---------- */
.artikkel{max-width:780px;padding:26px 20px 40px}
.artikkel h1{font-family:var(--display);font-weight:800;text-transform:uppercase;
  font-size:clamp(34px,6vw,64px);line-height:.98;margin-bottom:14px}
.artikkel .ingress{font-size:19px;line-height:1.5;color:var(--ink);margin-bottom:26px;
  border-left:4px solid var(--gul);padding-left:16px}
.artikkel h2{font-family:var(--display);font-weight:800;text-transform:uppercase;
  font-size:clamp(24px,3.4vw,32px);line-height:1.05;margin:34px 0 12px}
.artikkel p{margin-bottom:14px;font-size:16.5px;line-height:1.65}
.artikkel p b{font-weight:700}
.artikkel a{color:var(--ink);text-decoration:underline;text-underline-offset:3px;
  text-decoration-color:var(--gul-morn);text-decoration-thickness:2px}
.artikkel a:hover{background:var(--gul);text-decoration-color:transparent}
.artikkel .fylker{margin-top:14px}

.faq{margin-top:6px}
.faq details{border:2px solid var(--ink);background:var(--hvit);margin-bottom:8px}
.faq summary{padding:13px 16px;cursor:pointer;font-weight:700;font-size:16px;list-style:none;
  display:flex;justify-content:space-between;align-items:center;gap:12px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-family:var(--display);font-size:24px;line-height:1;color:var(--gul-morn)}
.faq details[open] summary{background:var(--gul);border-bottom:2px solid var(--ink)}
.faq details[open] summary::after{content:"–"}
.faq details p{padding:14px 16px;margin:0;font-size:15.5px}

.pristabell{width:100%;border-collapse:collapse;border:2px solid var(--ink);background:var(--hvit);
  font-size:15.5px;margin:6px 0 8px;min-width:520px}
.pristabell th,.pristabell td{padding:11px 14px;border-bottom:1px solid var(--line);text-align:left}
.pristabell th{font-family:var(--mono);font-size:11.5px;text-transform:uppercase;
  letter-spacing:.08em;background:var(--betong-2)}
.pristabell tr:last-child td{border-bottom:none}
.pristabell td:first-child{font-weight:700}

/* ---------- footer ---------- */
footer.site{background:var(--asfalt);color:var(--stal-lys);margin-top:30px}
.foot{display:flex;justify-content:space-between;gap:20px;padding:34px 0;flex-wrap:wrap;font-size:13.5px}
.foot a{color:var(--stal-lys)}
.foot .f-logo{font-family:var(--display);font-weight:800;text-transform:uppercase;font-size:20px;color:var(--hvit)}
.foot .f-logo em{color:var(--gul);font-style:normal}

/* ---------- responsivt ---------- */
@media(max-width:860px){
  .profil-grid{grid-template-columns:1fr}
  .row{grid-template-columns:1fr;gap:10px}
  .row .nr{display:none}
  .row-handling{justify-content:flex-start}
  .chips{margin-left:0;margin-top:10px}
}
@media(max-width:560px){
  .nav-links a:not(.cta){display:none}
  .hero{padding:38px 0 32px}
  .sek{padding:34px 0}
}