/* Vinkelhaken Snekker. Nesten svart, blyantgul og trebrun. Tommestokken går igjen som detalj. */
@font-face{font-family:"Archivo";font-weight:800;font-display:swap;src:url(/fonter/archivo-latin-800-normal.woff2) format("woff2")}
@font-face{font-family:"Work Sans";font-weight:400;font-display:swap;src:url(/fonter/work-sans-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"Work Sans";font-weight:600;font-display:swap;src:url(/fonter/work-sans-latin-600-normal.woff2) format("woff2")}
:root{
  --bakgrunn:#F3F0E8;
  --tekst:#1F2326;
  --tekst-2:#5A5F63;
  --hoved:#E8B53A;        /* blyantgul */
  --hoved-tekst:#1F2326;
  --mork:#1F2326;
  --aksent:#9A5B2E;       /* tre */
  --flate:#E7E2D6;
  --linje:#D6D0C2;
  --tittel:"Archivo",system-ui,sans-serif;
  --brod:"Work Sans",system-ui,sans-serif;
  --radius:6px;
  --maks:1180px;
  --knapp-radius:4px;
  --felt-kant:#B8B1A2;
  --felt-radius:4px;
  --bunn-bakgrunn:#1F2326;
  --topp-bakgrunn:rgba(243,240,232,.96);
  --tomme:repeating-linear-gradient(90deg,var(--mork) 0 2px,transparent 2px 24px),repeating-linear-gradient(90deg,var(--mork) 0 1px,transparent 1px 6px);
}
h1,h2,h3{font-weight:800;letter-spacing:-.015em;text-transform:none}
h1{font-size:clamp(2.6rem,6.2vw,5rem);line-height:1}
h2{font-size:clamp(1.9rem,3.6vw,2.8rem);line-height:1.05}
h3{font-size:1.25rem;line-height:1.2}
.merke span{font-family:var(--tittel);font-weight:800;font-size:1.35rem;letter-spacing:-.01em;text-transform:uppercase}
.merke span i{font-style:normal;font-weight:600;font-family:var(--brod);font-size:.8rem;letter-spacing:.14em;display:block;color:var(--aksent);margin-top:2px}
.bunn .merke span{color:#fff}
.bunn .merke span i{color:var(--hoved)}
.ingress{font-size:clamp(1.1rem,1.6vw,1.25rem);color:var(--tekst-2);max-width:34em}
.knapper{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
.knapp-hoved{box-shadow:inset 0 -3px 0 rgba(0,0,0,.18)}
.knapp-strek{color:var(--tekst)}
.knapp-strek:hover{background:var(--flate)}
.etikett{display:inline-flex;align-items:center;gap:10px;font-weight:600;font-size:.82rem;letter-spacing:.14em;text-transform:uppercase;color:var(--aksent);margin-bottom:14px}
.etikett::before{content:"";width:28px;height:3px;background:var(--hoved)}

/* Tommestokk */
.tomme{height:16px;background:var(--hoved);position:relative}
.tomme::after{content:"";position:absolute;inset:0 0 auto 0;height:9px;background:var(--tomme);opacity:.75}

/* Helt */
.helt{padding:clamp(36px,6vw,80px) 0 clamp(48px,7vw,88px)}
.helt-rad{display:grid;grid-template-columns:1fr 1.1fr;gap:clamp(28px,5vw,64px);align-items:center}
.helt h1 em{font-style:normal;background:linear-gradient(transparent 60%,var(--hoved) 60%);padding:0 .05em}
.helt .ingress{margin-top:22px}
.helt-bilde{position:relative}
.helt-bilde img,.helt-bilde .plassholder{width:100%;aspect-ratio:4/3.3;object-fit:cover;border-radius:var(--radius);min-height:0}
.befaring-merke{position:absolute;right:-16px;top:-16px;margin:0;background:var(--mork);color:#fff;padding:14px 18px;border-radius:var(--radius);font-family:var(--tittel);font-weight:800;line-height:1.1;font-size:1.05rem;text-transform:uppercase;box-shadow:6px 6px 0 var(--hoved)}
.befaring-merke span{display:block;font-family:var(--brod);font-weight:400;text-transform:none;font-size:.85rem;color:rgba(255,255,255,.8);margin-top:4px}
.fakta{list-style:none;margin:30px 0 0;padding:20px 0 0;border-top:1px solid var(--linje);display:flex;flex-wrap:wrap;gap:12px 28px}
.fakta li{display:flex;align-items:center;gap:8px;font-weight:600}
.fakta svg{width:20px;height:20px;color:var(--aksent)}

/* Seksjoner */
.seksjon{padding:clamp(56px,8vw,100px) 0}
.seksjon-tett{padding-top:clamp(28px,4vw,48px)}
.seksjon-mork{background:var(--mork);color:#fff}
.seksjon-mork h2{color:#fff}
.seksjon-mork .etikett{color:var(--hoved)}
.seksjon-flate{background:var(--flate)}
.seksjon-hode{display:flex;justify-content:space-between;align-items:end;gap:24px;margin-bottom:32px;flex-wrap:wrap}
.seksjon-hode h2{max-width:18ch}
.to-kol{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,72px);align-items:center}
.to-kol h2{margin-bottom:16px}

/* Tjenester */
.tjenester{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}
.tjeneste{display:grid;align-content:start;gap:10px;text-decoration:none;border-top:4px solid var(--mork);padding-top:14px}
.tjeneste img,.tjeneste .plassholder{width:100%;aspect-ratio:4/3.2;object-fit:cover;border-radius:var(--radius);min-height:0}
.tjeneste h3{margin-top:6px}
.tjeneste p{margin:0;color:var(--tekst-2)}
.tjeneste:hover h3{text-decoration:underline;text-decoration-color:var(--hoved);text-decoration-thickness:3px;text-underline-offset:4px}

/* Slik jobber vi */
.steg{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:2px;counter-reset:steg}
.steg li{counter-increment:steg;background:rgba(255,255,255,.05);padding:26px 22px;display:grid;gap:8px;align-content:start}
.steg li::before{content:counter(steg);font-family:var(--tittel);font-weight:800;font-size:2.6rem;line-height:1;color:var(--hoved)}
.steg h3{color:#fff;font-size:1.2rem}
.steg p{margin:0;color:rgba(255,255,255,.78)}

.bilde-stor img,.bilde-stor .plassholder{width:100%;aspect-ratio:4/3.3;object-fit:cover;border-radius:var(--radius);min-height:0}
.bilde-hoy img,.bilde-hoy .plassholder{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:var(--radius);min-height:0;max-height:620px}

/* Tjenestesiden */
.tjeneste-rad{display:grid;grid-template-columns:1fr 1.1fr;gap:clamp(24px,4vw,56px);align-items:center;padding:clamp(28px,4vw,44px) 0;border-top:1px solid var(--linje);scroll-margin-top:84px}
.tjeneste-rad:nth-child(even) .tjeneste-bilde{order:2}
.tjeneste-bilde img,.tjeneste-bilde .plassholder{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--radius);min-height:0}
.tjeneste-rad h2{font-size:clamp(1.6rem,2.8vw,2.1rem);margin-bottom:12px}
.tjeneste-rad ul{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:8px}
.tjeneste-rad li,.haker li{display:flex;gap:10px;align-items:flex-start}
.tjeneste-rad li svg,.haker svg{width:20px;height:20px;flex:none;color:var(--aksent);margin-top:3px}
.pris-linje{margin-top:22px;padding:18px 20px;background:var(--flate);border-left:4px solid var(--hoved);border-radius:var(--radius)}
.pris-linje b{font-family:var(--tittel);font-weight:800}

/* Undersider */
.side-topp{padding:clamp(44px,6vw,84px) 0 0}
.side-topp h1{max-width:15ch}
.side-topp .ingress{margin-top:18px}
.tekst p{max-width:36em}
.haker{list-style:none;margin:22px 0 0;padding:0;display:grid;gap:12px}

#befaring{scroll-margin-top:80px}
#befaring .to-kol{align-items:start}
.skjema{background:#fff;padding:clamp(20px,3vw,34px);border-radius:var(--radius);border:1px solid var(--linje);border-top:6px solid var(--hoved)}
.befaring-info{display:grid;gap:16px}
.kontakt-linjer{display:grid;gap:10px;margin-top:20px}
.kontakt-linjer a,.kontakt-linjer p{display:flex;gap:10px;align-items:center;text-decoration:none;font-weight:600;margin:0}
.kontakt-linjer svg{width:20px;height:20px;color:var(--aksent);flex:none}
.tider-tittel{margin:28px 0 12px;font-size:1.3rem}

@media (max-width:980px){
  .helt-rad,.to-kol,.tjeneste-rad{grid-template-columns:1fr}
  .tjeneste-rad:nth-child(even) .tjeneste-bilde{order:0}
  .tjenester,.steg{grid-template-columns:1fr 1fr}
}
@media (max-width:640px){
  .tjenester,.steg{grid-template-columns:1fr}
  .befaring-merke{right:10px;top:10px}
  .helt .knapp{flex:1 1 auto}
}