@import url('https://fonts.googleapis.com/css2?family=Anton&family=Inter:wght@400;500;600;700&display=swap');

:root{
  --paper:#ECE6DC;        /* varm krem */
  --paper-2:#E4DCCF;
  --ink:#1B1712;          /* nær-sort, varm */
  --charcoal:#16120E;     /* mørke seksjoner/hero */
  --accent:#DB5C2E;       /* rust/oransje */
  --accent-dark:#B34A22;
  --muted:#6a625a;        /* brødtekst på papir */
  --muted-dark:#b7ada1;   /* tekst på mørk */
  --line:#d3c9ba;
  --line-dark:#332b23;
  --display:'Anton', Impact, sans-serif;
  --sans:'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --max:1160px;
}
*{box-sizing:border-box; margin:0; padding:0}
html{scroll-behavior:smooth}
body{background:var(--paper); color:var(--ink); font-family:var(--sans); line-height:1.6; -webkit-font-smoothing:antialiased}
a{color:inherit; text-decoration:none}
.wrap{max-width:var(--max); margin:0 auto; padding:0 32px}

/* Display / poster type */
.display{font-family:var(--display); font-weight:400; text-transform:uppercase; letter-spacing:.01em; line-height:.92}
.eyebrow{font-size:13px; font-weight:600; letter-spacing:.22em; text-transform:uppercase; color:var(--accent); display:flex; align-items:center; gap:14px}
.eyebrow::before{content:''; width:34px; height:2px; background:var(--accent); display:inline-block}
.eyebrow.center{justify-content:center}

/* Buttons — skarpe kanter */
.btn{display:inline-flex; align-items:center; gap:10px; font-weight:600; font-size:14px; letter-spacing:.08em; text-transform:uppercase; padding:16px 26px; border:2px solid transparent; cursor:pointer; transition:.15s; font-family:var(--sans)}
.btn-primary{background:var(--accent); color:#fff; border-color:var(--accent)}
.btn-primary:hover{background:var(--accent-dark); border-color:var(--accent-dark)}
.btn-ghost{background:transparent; color:#fff; border-color:rgba(255,255,255,.5)}
.btn-ghost:hover{border-color:#fff; background:rgba(255,255,255,.08)}
.btn-dark{background:var(--ink); color:#fff; border-color:var(--ink)}
.btn-dark:hover{background:var(--accent); border-color:var(--accent)}

/* Header */
.header{position:absolute; top:0; left:0; right:0; z-index:20}
.header .wrap{display:flex; align-items:center; justify-content:space-between; padding-top:26px; padding-bottom:26px}
.brand{display:flex; align-items:center; gap:14px}
.mark{width:44px; height:44px; background:var(--accent); transform:rotate(45deg); display:flex; align-items:center; justify-content:center; flex-shrink:0}
.ic{width:1em; height:1em; display:inline-block; vertical-align:-.15em; flex-shrink:0}
.mark .ic{transform:rotate(-45deg); color:#fff; font-size:22px}
.brand .name{font-family:var(--display); text-transform:uppercase; font-size:24px; color:#fff; line-height:1}
.brand .sub{font-size:10px; letter-spacing:.28em; color:var(--muted-dark); text-transform:uppercase; margin-top:3px}
.nav{display:flex; align-items:center; gap:34px}
.nav a{font-size:13px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:#fff; opacity:.85}
.nav a:hover{opacity:1; color:var(--accent)}
.nav .btn{padding:13px 22px}

/* Hero */
.hero{position:relative; min-height:96vh; background:var(--charcoal); background-image:url('hero.jpg'); background-size:cover; background-position:center; color:#fff; display:flex; align-items:center; overflow:hidden}
.hero::before{content:''; position:absolute; inset:0; background:linear-gradient(90deg, rgba(18,14,10,.86) 0%, rgba(18,14,10,.55) 55%, rgba(18,14,10,.35) 100%), radial-gradient(120% 90% at 82% 8%, rgba(219,92,46,.45), rgba(219,92,46,0) 46%)}
.hero .wrap{position:relative; z-index:2; width:100%; padding-top:130px; padding-bottom:70px}
.hero h1{font-size:clamp(56px,11vw,150px); margin:20px 0 0}
.hero h1 .l2{color:var(--accent); display:block}
.hero p.lead{font-size:clamp(17px,2vw,21px); max-width:520px; color:#e9e2d8; margin:30px 0 0; line-height:1.55}
.hero .cta{display:flex; gap:16px; flex-wrap:wrap; margin-top:38px}
.scrolltag{position:absolute; right:34px; bottom:40px; writing-mode:vertical-rl; font-size:11px; letter-spacing:.35em; text-transform:uppercase; color:var(--muted-dark); z-index:2}

/* Lead-seksjon (mørk, tett under hero) */
.leadstrip{background:var(--ink); color:#fff; padding:0}
.leadstrip .inner{max-width:var(--max); margin:0 auto; padding:56px 32px; display:grid; grid-template-columns:1fr 1.1fr; gap:56px; align-items:center}
.leadstrip h2{font-size:clamp(30px,4vw,52px)}
.leadstrip .l2b{color:var(--accent)}
.leadstrip p{color:var(--muted-dark); margin-top:16px; max-width:360px}
form.lead{display:grid; grid-template-columns:1fr 1fr; gap:14px}
form.lead .full{grid-column:1/-1}
form.lead input,form.lead textarea{width:100%; background:#221c16; border:2px solid var(--line-dark); color:#fff; padding:15px 16px; font-size:15px; font-family:var(--sans); outline:none}
form.lead input:focus,form.lead textarea:focus{border-color:var(--accent)}
form.lead input::placeholder,form.lead textarea::placeholder{color:#8a8075}
form.lead textarea{min-height:76px; resize:vertical}
form.lead .note{grid-column:1/-1; font-size:12px; color:#8a8075; margin-top:-4px}
.okmsg{grid-column:1/-1; background:#1f3324; border:2px solid #2f6b45; color:#8fe3ad; padding:18px; font-size:15px}

/* Seksjoner på papir */
.section{padding:96px 0}
.section-head{max-width:640px; margin-bottom:52px}
.section-head h2{font-size:clamp(34px,5vw,64px); margin-top:18px}
.section-head p{color:var(--muted); font-size:17px; margin-top:18px}

/* Directory — redaksjonelle rader */
.slot{border:2px solid var(--ink); background:var(--accent); color:#fff; padding:30px 34px; display:flex; align-items:center; justify-content:space-between; gap:24px; margin-bottom:26px; flex-wrap:wrap}
.slot .st{font-family:var(--display); text-transform:uppercase; font-size:26px; line-height:1}
.slot .sp{font-size:15px; opacity:.92; margin-top:6px; max-width:460px}
.rowlist{border-top:2px solid var(--ink)}
.row{display:flex; align-items:center; gap:24px; padding:22px 6px; border-bottom:1px solid var(--line)}
.row .num{font-family:var(--display); font-size:34px; color:var(--line); width:58px; flex-shrink:0; line-height:1}
.row.top .num{color:var(--accent)}
.row .main{flex:1; min-width:0}
.row .nm{font-weight:700; font-size:19px; letter-spacing:-.01em}
.row .badge{display:inline-block; font-size:10px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; background:var(--accent); color:#fff; padding:3px 9px; margin-right:10px; vertical-align:2px}
.row .rt{color:var(--muted); font-size:14px; margin-top:3px; display:flex; align-items:center; gap:8px; flex-wrap:wrap}
.stars{color:var(--accent); letter-spacing:1px}
.row .tel{font-family:var(--display); font-size:22px; color:var(--ink); letter-spacing:.02em; white-space:nowrap}
.row .call{margin-left:8px}

/* Featured card (premium når kjøpt) */
.featured{border:2px solid var(--ink); background:var(--ink); color:#fff; padding:30px 34px; display:flex; align-items:center; gap:26px; margin-bottom:26px; flex-wrap:wrap}
.featured .num{font-family:var(--display); font-size:40px; color:var(--accent)}
.featured .fmain{flex:1; min-width:200px}
.featured .fnm{font-family:var(--display); text-transform:uppercase; font-size:30px; line-height:1}
.featured .frt{color:var(--muted-dark); margin-top:8px}

/* Trust strip */
.trust{background:var(--ink); color:#fff}
.trust .inner{max-width:var(--max); margin:0 auto; padding:34px 32px; display:flex; gap:56px; flex-wrap:wrap; justify-content:center}
.trust .t{display:flex; align-items:center; gap:12px; font-size:14px; letter-spacing:.04em; color:#e9e2d8}
.trust .t .ic{color:var(--accent); font-size:22px}

/* Footer */
footer{background:var(--charcoal); color:var(--muted-dark); padding:64px 0 40px}
footer .display{color:#fff; font-size:34px; margin-bottom:10px}
footer a{color:var(--accent)}
footer .cols{display:flex; justify-content:space-between; gap:40px; flex-wrap:wrap; border-top:1px solid var(--line-dark); margin-top:28px; padding-top:24px; font-size:13px}

@media(max-width:860px){
  .nav{display:none}
  .leadstrip .inner{grid-template-columns:1fr; gap:32px}
  .section{padding:64px 0}
}
/* Logo-strip — alle elektrikere */
.logos{background:var(--paper-2); border-top:2px solid var(--ink); border-bottom:2px solid var(--ink)}
.logos .wrap{padding:20px 32px}
.logos .lbl{font-size:12px; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); margin-bottom:14px}
.logostrip{display:grid; grid-template-columns:repeat(auto-fill, minmax(185px, 1fr)); gap:12px}
.logotile{display:flex; align-items:center; justify-content:center; text-align:center; border:2px solid var(--ink); background:var(--paper); padding:12px 16px; height:70px; font-family:var(--display); text-transform:uppercase; font-size:15px; line-height:1.05; color:var(--ink); transition:.15s}
.logotile:hover{background:var(--accent); color:#fff; border-color:var(--accent)}

/* Profil-sider (pSEO) */
.phero{background:var(--charcoal); color:#fff; padding:130px 0 60px; position:relative}
.phero .eyebrow{margin-bottom:16px}
.phero h1{font-size:clamp(38px,7vw,84px)}
.phero .prt{color:#e9e2d8; margin-top:16px; font-size:17px}
.phero .pcta{display:flex; gap:14px; flex-wrap:wrap; margin-top:28px}
.pinfo{padding:64px 0}
.pinfo .grid{display:grid; grid-template-columns:1fr 1fr; gap:18px; max-width:720px}
.pcard{border:2px solid var(--ink); padding:20px 22px}
.pcard .k{font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted)}
.pcard .v{font-family:var(--display); text-transform:uppercase; font-size:26px; margin-top:6px}
.pback{display:inline-flex; gap:8px; align-items:center; margin-top:36px; font-weight:600; text-transform:uppercase; letter-spacing:.06em; font-size:14px; color:var(--accent)}

/* Katalog-radknapper + navnelenker */
.btn-ghost-ink{background:transparent; color:var(--ink); border-color:var(--ink)}
.btn-ghost-ink:hover{background:var(--ink); color:#fff; border-color:var(--ink)}
.btn-ghost-dark{background:transparent; color:#fff; border-color:rgba(255,255,255,.5)}
.btn-ghost-dark:hover{border-color:#fff; background:rgba(255,255,255,.1)}
.row .nm a,.fnm a{color:inherit; text-decoration:none}
.row .nm a:hover,.fnm a:hover{color:var(--accent)}
.row .btn{padding:11px 16px; font-size:13px}
.featured .btn{padding:12px 18px; font-size:13px}

@media(max-width:560px){
  .wrap{padding:0 20px}
  form.lead{grid-template-columns:1fr}
  .row{flex-wrap:wrap; align-items:center; gap:10px 14px; padding:18px 4px}
  .row .num{font-size:26px; width:34px; flex:0 0 auto}
  .row .main{flex:1 1 60%; min-width:0}
  .row .tel{display:none}
  .row .btn{flex:1 1 40%; justify-content:center; padding:13px 10px}
  .featured{gap:12px 14px}
  .featured .num{width:34px}
  .featured .fmain{flex:1 1 100%; min-width:0}
  .featured .btn{flex:1 1 40%; justify-content:center}
  .pinfo .grid{grid-template-columns:1fr}
}

/* Hero med skjema (CRO) */
.hero .herogrid{display:grid; grid-template-columns:1.05fr .95fr; gap:48px; align-items:center}
.herogrid h1{font-size:clamp(42px,6vw,92px); margin-top:16px}
.herotext .lead{max-width:460px}
.herotrust{display:flex; gap:22px; flex-wrap:wrap; margin-top:26px; color:#e9e2d8; font-size:14px}
.herotrust span{display:flex; align-items:center; gap:8px}
.herotrust .ic{color:var(--accent); font-size:18px}
.heroform{background:var(--paper); color:var(--ink); padding:28px 28px 30px; border:2px solid #000}
.heroform .eyebrow{color:var(--accent)}
.heroform .fh{color:var(--ink); font-size:clamp(30px,4vw,44px); margin:10px 0 18px}
.heroform form.lead input,.heroform form.lead textarea{background:#fff; border:2px solid var(--line); color:var(--ink)}
.heroform form.lead input::placeholder{color:#9a9186}
.heroform form.lead input:focus,.heroform form.lead textarea:focus{border-color:var(--accent)}
.heroform .note{color:var(--muted)}

/* Slik funker det */
.steps{display:grid; grid-template-columns:repeat(3,1fr); gap:26px}
.step{border-top:3px solid var(--accent); padding-top:20px}
.step .stepn{font-family:var(--display); font-size:40px; color:var(--accent); line-height:1}
.step h3{font-family:var(--display); text-transform:uppercase; font-weight:400; font-size:22px; margin:10px 0 8px}
.step p{color:var(--muted); font-size:15px}

/* Repeat-CTA under katalogen */
.repeatcta{margin-top:40px; border:2px solid var(--ink); background:var(--ink); color:#fff; padding:28px 32px; display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap}
.repeatcta .rct{font-family:var(--display); text-transform:uppercase; font-size:24px}
.repeatcta .rcs{color:var(--muted-dark); margin-top:4px; font-size:15px; max-width:420px}
.repeatcta .btn-dark{background:var(--accent); border-color:var(--accent); color:#fff}
.repeatcta .btn-dark:hover{background:var(--accent-dark); border-color:var(--accent-dark)}

@media(max-width:860px){
  .hero .herogrid{grid-template-columns:1fr; gap:30px}
  .hero .wrap{padding-top:112px; padding-bottom:56px}
  .steps{grid-template-columns:1fr}
}

/* Profil-sider — beriket innhold */
.crumbs{font-size:12px; letter-spacing:.04em; color:var(--muted-dark); margin-bottom:20px}
.crumbs a{color:var(--muted-dark)}
.crumbs a:hover{color:var(--accent)}
.crumbs span{opacity:.5; margin:0 5px}
.pintro{background:var(--paper); padding:46px 0 6px}
.lead-para{font-size:19px; line-height:1.7; max-width:760px; color:var(--ink)}
.pservices{padding:52px 0}
.svcgrid{display:grid; grid-template-columns:repeat(3,1fr); gap:20px}
.svc{border:2px solid var(--ink); padding:22px}
.svc .ic{font-size:26px; color:var(--accent)}
.svc h3{font-family:var(--display); text-transform:uppercase; font-weight:400; font-size:20px; margin:12px 0 8px}
.svc p{color:var(--muted); font-size:15px}
.pfaq{padding:8px 0 64px}
.faq{border-top:1px solid var(--line); padding:22px 0}
.faq h3{font-size:18px; font-weight:500; margin-bottom:8px}
.faq p{color:var(--muted); font-size:16px; max-width:760px}
.prelated-sec{padding:54px 0; background:var(--paper-2); border-top:2px solid var(--ink)}
.prelated{display:flex; flex-wrap:wrap; gap:10px; margin-bottom:24px}
.rellink{border:2px solid var(--ink); background:var(--paper); padding:10px 16px; font-weight:600; font-size:14px; transition:.15s}
.rellink:hover{background:var(--accent); color:#fff; border-color:var(--accent)}
@media(max-width:640px){ .svcgrid{grid-template-columns:1fr} }