/* ═══════════════════════════════════════════════════════════════
   SYNLIG BEDRIFT — designsystem v2 («Bli funnet. Bli valgt.»)
   Brukes av den nye forsiden og alle nye undersider.
   Fonter: Archivo Expanded (display) + Inter (brødtekst)
   ═══════════════════════════════════════════════════════════════ */

:root{
  --coal:#171310;
  --coal-2:#211c17;
  --bone:#f4f0e8;
  --amber:#c0762c;
  --amber-2:#d98c3f;
  --muted:#7a7267;
  --muted-l:#b8ac9c;
  --line:rgba(23,19,16,.13);
  --line-d:rgba(244,240,232,.12);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:'Inter',sans-serif;background:var(--bone);color:var(--coal);line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
body::after{
  content:"";position:fixed;inset:0;z-index:9999;pointer-events:none;opacity:.045;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
.wrap{max-width:1240px;margin:0 auto;padding:0 28px}

h1,h2,h3,.disp{font-family:'Archivo Expanded','Archivo',sans-serif;text-transform:uppercase;letter-spacing:-.01em}

/* ── Header ── */
header.site{position:fixed;top:0;left:0;right:0;z-index:100;transition:background .3s,box-shadow .3s;padding:18px 0}
header.site.solid{background:rgba(244,240,232,.96);box-shadow:0 1px 0 var(--line);backdrop-filter:blur(8px)}
header.site .wrap{display:flex;align-items:center;justify-content:space-between}
.logo{font-family:'Archivo Expanded',sans-serif;font-weight:900;font-size:1.05rem;text-transform:uppercase;letter-spacing:.02em;color:#fff;transition:color .3s}
header.site.solid .logo{color:var(--coal)}
header.site.dark-page .logo{color:var(--coal)}
.logo em{font-style:normal;color:var(--amber)}
nav.desktop{display:flex;gap:34px;align-items:center}
nav.desktop a{font-size:.86rem;font-weight:600;color:rgba(255,255,255,.85);transition:color .2s}
header.site.solid nav.desktop a,header.site.dark-page nav.desktop a{color:var(--coal)}
nav.desktop a:hover{color:var(--amber)}
.btn{display:inline-block;font-weight:700;font-size:.88rem;padding:13px 26px;border-radius:2px;transition:transform .15s,background .2s;cursor:pointer;border:none;font-family:'Inter',sans-serif}
.btn-amber{background:var(--amber);color:#fff}
.btn-amber:hover{background:var(--amber-2);transform:translateY(-1px)}
.btn-ghost{border:1.5px solid rgba(255,255,255,.5);color:#fff;background:none}
.btn-ghost:hover{border-color:#fff}
.btn-dark{border:1.5px solid var(--coal);color:var(--coal);background:none}
.btn-dark:hover{background:var(--coal);color:var(--bone)}
.burger{display:none;background:none;border:none;cursor:pointer;z-index:110;width:30px;height:22px;position:relative}
.burger span{position:absolute;left:0;width:100%;height:2px;background:#fff;transition:all .25s}
header.site.solid .burger span,header.site.dark-page .burger span{background:var(--coal)}
body.menu-open .burger span{background:#fff}
body.menu-open .burger span:nth-child(1){top:10px;transform:rotate(45deg)}
body.menu-open .burger span:nth-child(2){opacity:0}
body.menu-open .burger span:nth-child(3){top:10px;transform:rotate(-45deg)}
.burger span:nth-child(1){top:0}.burger span:nth-child(2){top:10px}.burger span:nth-child(3){top:20px}
.mobile-menu{position:fixed;inset:0;background:var(--coal);z-index:105;display:flex;flex-direction:column;justify-content:center;padding:40px;gap:8px;opacity:0;pointer-events:none;transition:opacity .3s}
body.menu-open .mobile-menu{opacity:1;pointer-events:auto}
.mobile-menu a{font-family:'Archivo Expanded',sans-serif;font-weight:800;font-size:1.7rem;text-transform:uppercase;color:var(--bone);padding:6px 0}
.mobile-menu a:active{color:var(--amber)}

/* ── Hero (forside) ── */
.hero{min-height:100svh;display:flex;align-items:flex-end;color:#fff;position:relative;overflow:hidden;padding-bottom:64px}
.hero-img{position:absolute;inset:0;z-index:-2;background-size:cover;background-position:center 30%;transform:scale(1.06);animation:slowzoom 16s ease-out forwards}
@keyframes slowzoom{to{transform:scale(1)}}
.hero::before{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(23,19,16,.55),rgba(23,19,16,.18) 42%,rgba(23,19,16,.92))}
.hero .kick{font-weight:700;font-size:.85rem;letter-spacing:.14em;text-transform:uppercase;color:var(--amber-2);margin-bottom:18px;text-shadow:0 1px 14px rgba(23,19,16,.85)}
.hero h1{font-size:clamp(2.8rem,7.5vw,6.4rem);font-weight:900;line-height:.95;margin-bottom:24px}
.hero h1 em{font-style:normal;color:var(--amber-2)}
.hero p{max-width:520px;font-size:1.06rem;color:rgba(255,255,255,.88);margin-bottom:32px}
.hero-cta{display:flex;gap:14px;flex-wrap:wrap}

/* ── Hero (underside — lavere, samme språk) ── */
.hero--sub{min-height:72svh;padding-bottom:56px}
.hero--sub h1{font-size:clamp(2.4rem,5.8vw,4.6rem)}

/* Skjerm-hero: laptop viser tjenestenavnet. Løft laptopen, mørkere bunn så
   overskriften er lesbar under skjermteksten (ingen dobling). */
.hero--screen{min-height:88svh}
.hero--screen .hero-img{background-position:center 12%}
.hero--screen::before{background:linear-gradient(180deg,rgba(23,19,16,.28) 0%,rgba(23,19,16,.08) 26%,rgba(23,19,16,.72) 64%,rgba(23,19,16,.97) 100%)}
.hero--screen h1{font-size:clamp(2rem,4.6vw,3.4rem)}
.hero--screen .kick{margin-bottom:14px}
@media(max-width:720px){
  .hero--screen{min-height:82svh}
  .hero--screen .hero-img{background-position:center 8%}
  .hero--screen::before{background:linear-gradient(180deg,rgba(23,19,16,.42) 0%,rgba(23,19,16,.5) 38%,rgba(23,19,16,.82) 62%,rgba(23,19,16,.97) 100%)}
}

/* ── Stats-stripe ── */
.stats{background:var(--coal);color:var(--bone)}
.stats-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}
.stat{padding:40px 26px;border-right:1px solid var(--line-d);min-width:0}
.stat:last-child{border-right:none}
.stat b{font-family:'Archivo Expanded',sans-serif;font-weight:900;font-size:clamp(1.4rem,1.7vw,2rem);display:block;line-height:1.15}
.stat b em{font-style:normal;color:var(--amber)}
.stat span{font-size:.85rem;color:var(--muted-l)}

/* ── Seksjoner ── */
section{padding:110px 0}
.sec-head{display:flex;justify-content:space-between;align-items:flex-end;gap:30px;flex-wrap:wrap;margin-bottom:56px}
.sec-head h2{font-size:clamp(2rem,4.4vw,3.4rem);font-weight:900;line-height:1.02;max-width:640px}
.sec-head h2 em{font-style:normal;color:var(--amber)}
.sec-head p{color:var(--muted);max-width:340px;font-size:.98rem}
.sec-dark{background:var(--coal);color:var(--bone)}
.sec-dark .sec-head p{color:var(--muted-l)}

/* ── Foto-kort ── */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.card{position:relative;height:470px;overflow:hidden;display:flex;flex-direction:column;justify-content:flex-end;color:#fff;border-radius:3px}
.card .bg{position:absolute;inset:0;background-size:cover;background-position:center;transition:transform .65s cubic-bezier(.2,.6,.2,1)}
.card:hover .bg{transform:scale(1.07)}
.card::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(23,19,16,0) 32%,rgba(23,19,16,.93))}
.card .body{position:relative;z-index:2;padding:28px}
.card h3{font-size:1.7rem;font-weight:800;line-height:1.05;margin-bottom:8px}
.card p{font-size:.9rem;color:rgba(255,255,255,.82);max-width:300px}
.card .go{position:absolute;top:22px;right:22px;z-index:2;width:40px;height:40px;border:1.5px solid rgba(255,255,255,.45);border-radius:50%;display:grid;place-items:center;font-size:1rem;transition:background .2s,border-color .2s}
.card:hover .go{background:var(--amber);border-color:var(--amber)}

/* ── Innholdsseksjoner på undersider ── */
.prose{max-width:720px}
.prose p{margin-bottom:18px;color:#3c352d}
.prose h3{font-size:1.2rem;font-weight:800;margin:34px 0 12px}
.checkliste{list-style:none;margin:26px 0;display:grid;gap:12px}
.checkliste li{padding-left:30px;position:relative;font-weight:500}
.checkliste li::before{content:"";position:absolute;left:0;top:11px;width:16px;height:2px;background:var(--amber)}
.split2{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center}
.split2 img{border-radius:3px}

/* ── Nummererte punkter (gjenbruk fra metoden) ──
   Standard = lys bakgrunn. Inne i .sec-dark (eller .metode) byttes fargene automatisk. */
.steg-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;border-top:1px solid var(--line);border-left:1px solid var(--line)}
.steg-grid--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.steg{padding:34px 28px 38px;border-right:1px solid var(--line);border-bottom:1px solid var(--line);position:relative;transition:background .25s;display:block}
.steg:hover{background:#ece7dd}
.steg .n{font-family:'Archivo Expanded',sans-serif;font-weight:900;font-size:2.8rem;color:var(--amber);line-height:1;display:block;margin-bottom:14px}
.steg h3{font-size:1.05rem;font-weight:800;margin-bottom:10px;color:var(--coal)}
.steg p{font-size:.87rem;color:var(--muted);line-height:1.55}
.steg .pil{position:absolute;top:36px;right:20px;color:var(--muted);opacity:0;transition:opacity .2s}
.steg:hover .pil{opacity:1;color:var(--amber)}
/* mørk kontekst */
.sec-dark .steg-grid,.metode .steg-grid{border-color:var(--line-d)}
.sec-dark .steg,.metode .steg{border-color:var(--line-d)}
.sec-dark .steg:hover,.metode .steg:hover{background:var(--coal-2)}
.sec-dark .steg h3,.metode .steg h3{color:var(--bone)}
.sec-dark .steg p,.metode .steg p{color:var(--muted-l)}
.sec-dark .steg .pil,.metode .steg .pil{color:var(--muted-l)}
/* eldre alias */
.steg-grid.lys{border-color:var(--line)}
.steg-grid.lys .steg{border-color:var(--line)}
.steg-grid.lys .steg:hover{background:#ece7dd}
.steg-grid.lys .steg h3{color:var(--coal)}
.steg-grid.lys .steg p{color:var(--muted)}

/* ── Prosjektgalleri (nettsider vi har lagd) ── */
.work-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.work-card{display:block;border:1px solid var(--line);border-radius:3px;overflow:hidden;background:#fff;transition:transform .2s,box-shadow .25s}
.work-card:hover{transform:translateY(-3px);box-shadow:0 14px 34px rgba(23,19,16,.14)}
.work-shot{aspect-ratio:16/10;background-color:#dfd9cf;background-position:center top;background-size:cover;background-repeat:no-repeat}
.work-meta{padding:15px 18px;display:flex;justify-content:space-between;align-items:center;gap:10px}
.work-meta h3{font-size:.92rem;font-weight:800;line-height:1.2}
.work-meta span{color:var(--amber);font-size:.78rem;font-weight:700;white-space:nowrap}
@media(max-width:1020px){.work-grid{grid-template-columns:1fr 1fr}}
@media(max-width:720px){.work-grid{grid-template-columns:1fr}}

/* ── FAQ ── */
.faq{max-width:820px}
.faq details{border-bottom:1px solid var(--line);padding:4px 0}
.faq summary{font-family:'Archivo Expanded',sans-serif;font-weight:700;text-transform:uppercase;font-size:.98rem;padding:20px 36px 20px 4px;cursor:pointer;list-style:none;position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:8px;top:16px;font-size:1.5rem;color:var(--amber);transition:transform .2s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq .svar{padding:0 4px 22px;color:#3c352d;max-width:680px}

/* ── Band (parallax) ── */
.band{min-height:520px;display:flex;align-items:center;color:#fff;position:relative;padding:90px 0;
  background-attachment:fixed;background-size:cover;background-position:center}
.band::before{content:"";position:absolute;inset:0;background:rgba(23,19,16,.72)}
.band .wrap{position:relative;z-index:2}
.band h2{font-size:clamp(2rem,4.6vw,3.6rem);font-weight:900;line-height:1.03;max-width:720px;margin-bottom:22px}
.band h2 em{font-style:normal;color:var(--amber-2)}
.band p{max-width:560px;color:rgba(255,255,255,.85);margin-bottom:14px}

/* ── CTA-kort ── */
.cta .inner{background:var(--coal);color:var(--bone);border-radius:4px;padding:80px 64px;display:flex;justify-content:space-between;align-items:center;gap:40px;flex-wrap:wrap;position:relative;overflow:hidden}
.cta .inner::after{content:"";position:absolute;right:-80px;top:-80px;width:340px;height:340px;border-radius:50%;background:radial-gradient(circle,rgba(192,118,44,.25),transparent 65%)}
.cta h2{font-size:clamp(1.9rem,4vw,3.2rem);font-weight:900;line-height:1.04;max-width:560px}
.cta h2 em{font-style:normal;color:var(--amber-2)}
.cta .act{display:flex;gap:14px;flex-wrap:wrap;position:relative;z-index:2;align-items:center}
.cta .tel{font-family:'Archivo Expanded',sans-serif;font-weight:800;font-size:1.4rem;color:var(--bone);display:flex;align-items:center}
.cta .tel:hover{color:var(--amber-2)}

/* ── Footer ── */
footer.site{background:var(--coal);color:var(--muted-l);padding:56px 0 40px;border-top:1px solid var(--line-d)}
.foot{display:flex;justify-content:space-between;gap:30px;flex-wrap:wrap;font-size:.85rem}
.foot .fl{font-family:'Archivo Expanded',sans-serif;font-weight:900;text-transform:uppercase;color:var(--bone);font-size:1rem;margin-bottom:8px}
.foot .slogan{font-weight:600;color:var(--bone)}
.foot a:hover{color:var(--amber-2)}

/* ── Book en prat-modal ── */
.kmodal{position:fixed;inset:0;z-index:200;display:none;align-items:center;justify-content:center;padding:20px}
.kmodal.open{display:flex}
.kmodal .bak{position:absolute;inset:0;background:rgba(23,19,16,.72);backdrop-filter:blur(3px)}
.kmodal .boks{position:relative;z-index:2;background:var(--bone);border-radius:4px;max-width:460px;width:100%;padding:38px 34px;max-height:92svh;overflow-y:auto}
.kmodal h3{font-size:1.4rem;font-weight:900;margin-bottom:6px}
.kmodal h3 em{font-style:normal;color:var(--amber)}
.kmodal .under{color:var(--muted);font-size:.92rem;margin-bottom:22px}
.kmodal .lukk{position:absolute;top:14px;right:14px;width:36px;height:36px;border:none;background:none;font-size:1.5rem;cursor:pointer;color:var(--muted);line-height:1}
.kmodal .lukk:hover{color:var(--coal)}
.kmodal label{display:block;font-size:.78rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;margin:14px 0 5px;color:#3c352d}
.kmodal input,.kmodal textarea{width:100%;padding:12px 14px;border:1.5px solid var(--line);border-radius:2px;background:#fff;font-family:'Inter',sans-serif;font-size:.95rem;color:var(--coal)}
.kmodal input:focus,.kmodal textarea:focus{outline:none;border-color:var(--amber)}
.kmodal .send{width:100%;margin-top:20px;padding:15px}
.kmodal .feil{display:none;color:#a33;font-size:.88rem;margin-top:10px}
.kmodal .ring{margin-top:20px;padding-top:18px;border-top:1px solid var(--line);text-align:center;font-size:.92rem;color:var(--muted)}
.kmodal .ring a{font-family:'Archivo Expanded',sans-serif;font-weight:800;font-size:1.15rem;color:var(--coal);display:inline-block;margin-top:4px}
.kmodal .ring a:hover{color:var(--amber)}
.kmodal .takk{display:none;text-align:center;padding:30px 0 16px}
.kmodal .takk .hake{width:56px;height:56px;border-radius:50%;background:var(--amber);color:#fff;display:grid;place-items:center;font-size:1.6rem;margin:0 auto 18px}
.kmodal .takk p{color:#3c352d;max-width:300px;margin:0 auto}
.kmodal.sendt form,.kmodal.sendt .under{display:none}
.kmodal.sendt .takk{display:block}

/* ── Reveal ── */
.reveal{opacity:0;transform:translateY(34px);transition:opacity .7s ease,transform .7s ease}
.reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion: reduce){
  .reveal{opacity:1;transform:none;transition:none}
  .hero-img{animation:none;transform:none}
}

/* ── Responsivt ── */
@media(max-width:1020px){
  .cards{grid-template-columns:1fr 1fr}
  .stats-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .stat{border-bottom:1px solid var(--line-d)}
  .steg-grid,.steg-grid--3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .split2{grid-template-columns:1fr;gap:40px}
}
@media(max-width:720px){
  nav.desktop{display:none}
  .burger{display:block}
  section{padding:74px 0}
  .stats-grid{grid-template-columns:1fr}
  .stat{padding:26px 28px;border-right:none}
  .stat b{font-size:1.8rem}
  .cards{grid-template-columns:1fr}
  .card{height:400px}
  .band{background-attachment:scroll}
  .cta .inner{padding:52px 30px}
  .steg-grid,.steg-grid--3{grid-template-columns:1fr}
}