/* ──────────────────────────────────────────────────────────────────────────
   forside-ny.css  —  KUN for preview-siden /forside-ny
   Alle klasser er prefikset v2- for å aldri kollidere med styles.css.
   Rør IKKE styles.css. Gjenbruker eksisterende tokens (--ink, --line, --accent,
   --paper, --radius, --display ...). Én ny, godkjent farge: --paper-warm.
   ────────────────────────────────────────────────────────────────────────── */

:root{
  /* Eneste nye farge. Varm sekundærflate under tjeneste-bentoen.
     Skru av: sett denne lik var(--paper). Justér varmen: endre hue (~80) / chroma. */
  --paper-warm: oklch(0.974 0.012 83);
}

/* ── Innstramming: tettere seksjonsrytme enn standard ── */
.v2-sec{padding:clamp(34px,4.4vw,62px) 0}

/* ── HERO: tekst til venstre, hero-bilde til høyre ── */
.v2-hero{padding:clamp(26px,4vw,52px) 0 clamp(12px,1.6vw,18px)}
.v2-hero-inner{display:grid;grid-template-columns:1.12fr .88fr;gap:clamp(26px,4vw,56px);align-items:center}

/* ── Slank faktastripe rett under hero (full bredde, tre kolonner, tett) ── */
.v2-factbar{padding:0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--paper-2)}
.v2-factbar-grid{display:grid;grid-template-columns:repeat(3,1fr)}
.v2-fb{padding:11px 26px 12px}
.v2-fb + .v2-fb{border-left:1px solid var(--line)}
.v2-fb-num{font-family:var(--display);font-weight:800;font-size:clamp(1.45rem,2.6vw,1.95rem);line-height:1.05;letter-spacing:-.01em;color:var(--ink)}
.v2-fb-lbl{margin-top:5px;color:var(--ink-2);font-size:.88rem;line-height:1.45}
.v2-fb-src{margin-top:6px;font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3)}
/* Tett luft mellom stripa og tjeneste-bentoen under */
.v2-factbar + .v2-sec{padding-top:clamp(20px,2.6vw,30px)}

/* ── TJENESTER som bento på varm flate ── */
.v2-svc{background:var(--paper-warm)}
.v2-bento{display:grid;gap:16px}

/* Ankerkloss: «01 Sikkerhetssjekk» — døra inn. Svart kant, ekstra vekt. */
.v2-anchor{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:22px 30px;
  padding:clamp(24px,3vw,38px);border:1.5px solid var(--line);border-radius:var(--radius);background:var(--paper)}
.v2-anchor-main{max-width:54ch}
.v2-anchor h3{font-size:clamp(1.4rem,2.7vw,1.95rem);margin:9px 0 9px;color:var(--ink)}
.v2-anchor p{color:var(--ink-2);font-size:.98rem;line-height:1.55;max-width:52ch}
.v2-anchor-links{display:flex;flex-wrap:wrap;align-items:center;gap:12px 22px}

/* Rutenett: de seks øvrige (02–07) som kompakte kort */
.v2-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.v2-card{display:flex;flex-direction:column;gap:9px;padding:22px 22px;border:1px solid var(--line-2);border-radius:var(--radius);
  background:var(--paper);transition:border-color .2s ease}
.v2-card:hover{border-color:var(--accent)}
.v2-card-top{display:flex;align-items:center;gap:12px}
.v2-card-num{font-family:var(--display);font-weight:800;font-size:.82rem;letter-spacing:.04em;color:var(--accent)}
.v2-card h3{color:var(--ink);font-size:1.08rem;margin:0;line-height:1.25}
.v2-card .svc-more{margin-top:auto;padding-top:4px}

/* ── Responsiv ── */
@media (max-width:920px){
  .v2-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:860px){
  .v2-hero-inner{grid-template-columns:1fr}
}
@media (max-width:620px){
  .v2-factbar-grid{grid-template-columns:1fr}
  .v2-fb + .v2-fb{border-left:none;border-top:1px solid var(--line)}
}
@media (max-width:560px){
  .v2-grid{grid-template-columns:1fr}
  .v2-anchor{align-items:flex-start}
}