/* ElektrikerLillehammer — V2 designforslag
   Samme merkevare (Anton + Inter, krem, rust), men roligere og tydeligere:
   Anton kun på H1, Inter på resten. Lyse kort på krem. Ring-knapp med nummer synlig. */

:root{
  --bg:#F5F0E8;
  --bg-soft:#EDE6DA;
  --surface:#FFFFFF;
  --ink:#17130F;
  --ink-2:#3A332C;
  --muted:#6B6259;
  --line:#E2D9CC;
  --accent:#C8501F;        /* fyll med hvit tekst: 4,6:1 */
  --accent-ink:#A9431A;    /* tekst på lys bakgrunn */
  --accent-soft:#F7E3D8;
  --dark:#17130F;
  --dark-2:#241E18;
  --on-dark:#EDE6DA;
  --on-dark-muted:#B3A898;
  --ok:#2F7A4B;
  --display:'Anton', Impact, sans-serif;
  --sans:'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --r:10px;
  --max:1180px;
}
*,*::before,*::after{box-sizing:border-box}
*{margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--bg); color:var(--ink); font:400 17px/1.6 var(--sans); -webkit-font-smoothing:antialiased}
a{color:inherit; text-decoration:none}
.wrap{max-width:var(--max); margin:0 auto; padding:0 24px}
.ic{width:1.1em; height:1.1em; flex-shrink:0; vertical-align:-.18em}
:focus-visible{outline:3px solid var(--accent); outline-offset:3px; border-radius:4px}

/* Prototype-merke */
.proto{background:var(--ink); color:var(--on-dark-muted); font-size:13px; text-align:center; padding:7px 16px}
.proto a{color:#fff; text-decoration:underline}

/* Toppmeny */
.top{position:sticky; top:0; z-index:30; background:rgba(245,240,232,.92); backdrop-filter:saturate(1.4) blur(10px); border-bottom:1px solid var(--line)}
.top-in{display:flex; align-items:center; gap:32px; height:68px}
.logo{display:flex; align-items:center; gap:10px; font-size:18px; letter-spacing:-.01em; color:var(--ink)}
.logo b{font-weight:700}
.logo-mark{width:34px; height:34px; border-radius:8px; background:var(--accent); color:#fff; display:grid; place-items:center}
.logo-mark .ic{width:20px; height:20px}
.menu{display:flex; gap:26px; margin-left:auto}
.menu a{font-size:15px; font-weight:500; color:var(--ink-2)}
.menu a:hover{color:var(--accent-ink)}
.top-cta{font-size:14px; font-weight:600; padding:9px 14px; border:1.5px solid var(--ink); border-radius:8px}
.top-cta:hover{background:var(--ink); color:#fff}

/* Hero */
.hero{padding:56px 0 48px}
.hero-in{display:grid; grid-template-columns:1.2fr .9fr; grid-template-areas:"copy podium" "needs podium"; column-gap:56px; align-items:start}
.hero-copy{grid-area:copy}
.hero-needs{grid-area:needs}
.podium{grid-area:podium}
.kicker{display:flex; align-items:center; gap:10px; font-size:14px; font-weight:500; color:var(--muted)}
.dot{width:8px; height:8px; border-radius:50%; background:var(--ok); box-shadow:0 0 0 4px rgba(47,122,75,.15)}
.hero h1{font-family:var(--display); font-weight:400; text-transform:uppercase; font-size:clamp(46px,6.2vw,84px); line-height:.95; letter-spacing:.005em; margin:18px 0 0}
.hero h1 em{font-style:normal; color:var(--accent); display:block}
.lede{font-size:19px; line-height:1.55; color:var(--ink-2); max-width:540px; margin-top:20px}
.ask{font-size:14px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); margin:34px 0 12px}
.needs{display:grid; grid-template-columns:repeat(3,1fr); gap:10px}
.need{display:flex; gap:12px; align-items:flex-start; background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:14px; transition:border-color .15s, transform .15s, box-shadow .15s}
.need:hover{border-color:var(--accent); transform:translateY(-1px); box-shadow:0 6px 18px -10px rgba(23,19,15,.35)}
.need-ic{width:36px; height:36px; border-radius:8px; background:var(--accent-soft); color:var(--accent-ink); display:grid; place-items:center; flex-shrink:0}
.need b{display:block; font-size:15px; font-weight:600; line-height:1.25}
.need small{display:block; font-size:13px; color:var(--muted); line-height:1.35; margin-top:2px}

/* Topp 3-panel */
.podium{background:var(--surface); border:1px solid var(--line); border-radius:14px; overflow:hidden; box-shadow:0 24px 50px -30px rgba(23,19,15,.45)}
.podium-head{display:flex; justify-content:space-between; align-items:flex-end; gap:12px; padding:120px 20px 16px; color:#fff;
  background:linear-gradient(180deg, rgba(23,19,15,.05) 0%, rgba(23,19,15,.85) 100%), url('/hero.jpg') center 40%/cover}
.podium-head span{font-weight:700; font-size:20px; letter-spacing:-.01em}
.podium-head a{font-size:14px; font-weight:500; opacity:.9; white-space:nowrap}
.podium-head a:hover{opacity:1; text-decoration:underline}
.podium ol{list-style:none}
.mini{display:grid; grid-template-columns:32px 1fr 48px; align-items:center; gap:12px; padding:14px 20px; border-bottom:1px solid var(--line)}
.mini-rank{width:32px; height:32px; border-radius:50%; background:var(--bg); display:grid; place-items:center; font-weight:700; font-size:15px}
.mini:first-child .mini-rank{background:var(--accent); color:#fff}
.mini-name{font-weight:600; font-size:16px; line-height:1.3}
.mini-name:hover{color:var(--accent-ink)}
.mini-name small{display:block; font-weight:400; font-size:13px; color:var(--muted); margin-top:2px}
.mini-call{width:48px; height:48px; border-radius:10px; background:var(--ink); color:#fff; display:grid; place-items:center}
.mini-call:hover{background:var(--accent)}
.podium-foot{display:flex; gap:8px; align-items:center; font-size:13px; color:var(--muted); padding:12px 20px; background:var(--bg)}
.podium-foot .ic{color:var(--accent)}

/* Tillitsstripe */
.trust{border-top:1px solid var(--line); border-bottom:1px solid var(--line); background:var(--surface)}
.trust-in{display:flex; flex-wrap:wrap; justify-content:space-between; gap:12px 28px; padding:16px 24px; font-size:15px; font-weight:500; color:var(--ink-2)}
.trust span{display:flex; align-items:center; gap:8px}
.trust .ic{color:var(--ok)}

/* Seksjoner */
.sec{padding:80px 0}
.sec-soft{background:var(--bg-soft)}
.sec-head{display:flex; justify-content:space-between; align-items:flex-end; gap:24px 48px; flex-wrap:wrap; margin-bottom:32px}
.label{font-size:13px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--accent-ink); margin-bottom:8px}
h2{font-size:clamp(28px,3.4vw,40px); font-weight:700; letter-spacing:-.025em; line-height:1.12}
.sec-note{max-width:420px; color:var(--muted); font-size:15px}
.more{display:inline-flex; align-items:center; gap:8px; font-weight:600; color:var(--accent-ink); margin-top:24px}
.more:hover{gap:12px}
.sec-head .more{margin-top:0}

/* Kort */
.cards{display:grid; gap:12px}
.card{display:grid; grid-template-columns:56px 1fr auto; gap:20px; align-items:center; background:var(--surface); border:1px solid var(--line); border-radius:12px; padding:20px 24px}
.card.is-top{border-color:var(--accent); box-shadow:inset 4px 0 0 var(--accent)}
.card-rank{font-family:var(--display); font-size:34px; line-height:1; color:#CFC4B5}
.card.is-top .card-rank{color:var(--accent)}
.card-name{font-size:19px; font-weight:700; letter-spacing:-.01em; line-height:1.3; display:flex; flex-wrap:wrap; align-items:center; gap:8px}
.card-name a:hover{color:var(--accent-ink)}
.badge{font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; background:var(--accent-soft); color:var(--accent-ink); padding:3px 8px; border-radius:4px}
.card-meta{margin-top:4px; font-size:15px; color:var(--muted)}
.card-meta b{color:var(--ink); font-weight:700}
.stars{color:#E0A100; letter-spacing:1px; font-size:15px}
.stars .off{color:#DDD3C5}
.card-addr{margin-top:2px; font-size:14px; color:var(--muted); display:flex; gap:6px; align-items:center}
.card-actions{display:flex; flex-direction:column; align-items:flex-end; gap:8px}
.card-links{display:flex; gap:16px; font-size:14px; font-weight:500; color:var(--ink-2)}
.card-links a{display:inline-flex; gap:4px; align-items:center}
.card-links a:hover{color:var(--accent-ink); text-decoration:underline}
.card-links .ic{width:14px; height:14px}
.spes{margin-top:20px; font-size:15px; color:var(--muted); display:flex; gap:10px; align-items:flex-start}
.spes a{color:var(--accent-ink); font-weight:600; text-decoration:underline}
.spes .ic{color:var(--accent); margin-top:3px}

/* Knapper */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:10px; font:600 16px/1 var(--sans); padding:15px 20px; border-radius:10px; transition:background .15s; white-space:nowrap}
.btn-call{background:var(--ink); color:#fff; min-width:210px}
.btn-call:hover{background:var(--accent)}
.btn-call.is-hot{background:var(--accent)}
.btn-call.is-hot:hover{background:#A9431A}
.btn-light{background:#fff; color:var(--ink)}
.btn-light:hover{background:var(--bg)}

/* Hytte */
.sec-dark{background:var(--dark); color:var(--on-dark)}
.sec-dark .label{color:#F08A5D}
.sec-dark .sec-note{color:var(--on-dark-muted)}
.places{display:grid; grid-template-columns:repeat(4,1fr); gap:14px}
.place{display:flex; flex-direction:column; gap:2px; background:var(--dark-2); border:1px solid #3A3129; border-radius:12px; padding:22px; transition:border-color .15s, background .15s}
.place:hover{border-color:#F08A5D; background:#2C251E}
.place-ic{color:#F08A5D; margin-bottom:14px}
.place-ic .ic{width:28px; height:28px}
.place b{font-size:22px; font-weight:700; color:#fff; letter-spacing:-.01em}
.place small{font-size:14px; color:var(--on-dark-muted)}
.place-go{margin-top:18px; font-size:14px; font-weight:600; color:#fff; display:flex; gap:6px; align-items:center}
.also{margin-top:24px; font-size:15px; color:var(--on-dark-muted)}
.also a{color:#fff; text-decoration:underline; text-underline-offset:3px}

/* Priser */
.prices{display:grid; grid-template-columns:repeat(3,1fr); gap:14px}
.price{background:var(--surface); border:1px solid var(--line); border-radius:12px; padding:26px}
.price b{font-size:clamp(30px,3.4vw,42px); font-weight:700; letter-spacing:-.03em}
.price span{font-size:16px; color:var(--muted); font-weight:500}
.price small{display:block; margin-top:6px; font-size:15px; color:var(--ink-2)}

/* Tips */
.tips{display:grid; grid-template-columns:repeat(2,1fr); gap:12px}
.tip{display:flex; justify-content:space-between; align-items:center; gap:16px; background:var(--surface); border:1px solid var(--line); border-radius:12px; padding:20px 22px; font-weight:600; font-size:16px; line-height:1.35}
.tip .ic{color:var(--accent-ink); transition:transform .15s}
.tip:hover{border-color:var(--accent)}
.tip:hover .ic{transform:translateX(4px)}

/* Rangering + FAQ */
.two{display:grid; grid-template-columns:.9fr 1.1fr; gap:64px}
.two h2{margin-bottom:24px}
.how{list-style:none; counter-reset:n; display:grid; gap:16px}
.how li{counter-increment:n; position:relative; padding-left:48px; color:var(--ink-2)}
.how li::before{content:counter(n); position:absolute; left:0; top:-2px; width:32px; height:32px; border-radius:50%; background:var(--accent-soft); color:var(--accent-ink); font-weight:700; display:grid; place-items:center; font-size:15px}
.how b{color:var(--ink)}
.faq details{border-bottom:1px solid var(--line)}
.faq details:first-child{border-top:1px solid var(--line)}
.faq summary{list-style:none; cursor:pointer; display:flex; justify-content:space-between; gap:16px; align-items:center; padding:18px 0; font-weight:600; font-size:17px}
.faq summary::-webkit-details-marker{display:none}
.faq summary .ic{transition:transform .2s; color:var(--muted)}
.faq details[open] summary .ic{transform:rotate(180deg)}
.faq details p{padding:0 0 18px; color:var(--ink-2); max-width:620px}

/* For elektrikere */
.pro{background:var(--accent); color:#fff; padding:44px 0}
.pro-in{display:flex; justify-content:space-between; align-items:center; gap:24px; flex-wrap:wrap}
.pro .label{color:#FBD9C8}
.pro h2{font-size:clamp(24px,2.6vw,32px)}
.pro p{opacity:.9; margin-top:6px}

/* Bunntekst */
.foot{background:var(--dark); color:var(--on-dark-muted); padding:56px 0 64px; font-size:15px}
.foot-in{display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:40px}
.foot .logo{color:#fff}
.foot-brand p{margin-top:14px; max-width:320px}
.foot h4{color:#fff; font-size:14px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; margin-bottom:12px}
.foot-in > div:not(.foot-brand) a{display:block; padding:4px 0}
.foot a:hover{color:#fff}

/* Nettbrett */
@media (max-width:980px){
  .hero-in{grid-template-columns:1fr; grid-template-areas:"copy" "podium" "needs"; row-gap:28px}
  .ask{margin-top:4px}
  .places{grid-template-columns:repeat(2,1fr)}
  .two{grid-template-columns:1fr; gap:56px}
  .foot-in{grid-template-columns:1fr 1fr}
  .foot-brand{grid-column:1/-1}
}

/* Mobil */
@media (max-width:680px){
  body{font-size:16px}
  .wrap{padding:0 16px}
  .menu{display:none}
  .top-in{height:60px; justify-content:space-between}
  .top-cta{font-size:13px; padding:7px 10px; white-space:nowrap}
  .logo{font-size:16px}
  .logo-mark{width:30px; height:30px}
  .podium-head{padding-top:64px}
  .hero h1{font-size:44px}
  .lede{margin-top:14px}
  .hero{padding:32px 0 36px}
  .lede{font-size:17px}
  .needs{grid-template-columns:1fr 1fr; gap:8px}
  .need{padding:12px; gap:10px}
  .need small{display:none}
  .need-ic{width:32px; height:32px}
  .trust-in{padding:14px 16px; font-size:14px; justify-content:flex-start}
  .sec{padding:56px 0}
  .card{grid-template-columns:36px 1fr; gap:12px 14px; padding:18px 16px}
  .card-rank{font-size:26px}
  .card-actions{grid-column:1/-1; align-items:stretch}
  .card-links{justify-content:center}
  .btn-call{min-width:0; width:100%}
  .hide-m{display:none}
  .places{grid-template-columns:1fr 1fr; gap:10px}
  .place{padding:16px}
  .place b{font-size:18px}
  .prices{grid-template-columns:1fr}
  .tips{grid-template-columns:1fr}
  .foot-in{grid-template-columns:1fr 1fr; gap:28px}
}