/* Vik Byggmester — «Bygget som tegnet.»
   Ro (fluid.glass) × rød typografi (septiembre) × tegning→foto (archidomo) */

:root {
  --papir: #f4f2ed;
  --hvit: #fbfaf7;
  --sort: #141412;
  --sort-myk: #22211e;
  --rod: #c22e1f;
  --rod-mork: #9e2317;
  --graa: #6e6a63;
  --strek: rgba(20, 20, 18, 0.14);
  --strek-lys: rgba(251, 250, 247, 0.18);
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  background: var(--papir);
  color: var(--sort);
  font-family: "Schibsted Grotesk", sans-serif;
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; }
h1, h2, h3 { font-weight: 700; letter-spacing: -0.025em; line-height: 1.05; }

.mono {
  font-family: "IBM Plex Mono", monospace;
  font-size: 11.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 500;
}
.mono-rod { color: var(--rod); }
.pluss::before { content: "+ "; color: var(--rod); }

/* ---------- Nav ---------- */
nav {
  position: sticky;
  top: 0;
  z-index: 60;
  background: var(--papir);
  border-bottom: 1px solid var(--strek);
}
.nav-inner {
  max-width: 1280px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px clamp(20px, 4vw, 40px);
  gap: 20px;
}
.wordmark {
  text-decoration: none;
  font-weight: 800;
  font-size: 21px;
  letter-spacing: -0.02em;
  display: flex;
  align-items: baseline;
  gap: 8px;
}
.wordmark span { color: var(--rod); }
.wordmark small {
  font-family: "IBM Plex Mono", monospace;
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--graa);
}
.nav-links { display: flex; gap: clamp(18px, 2.6vw, 34px); align-items: center; }
.nav-links a:not(.knapp) {
  text-decoration: none;
  font-size: 14.5px;
  font-weight: 500;
  opacity: 0.8;
  padding-bottom: 3px;
  border-bottom: 2px solid transparent;
}
.nav-links a:not(.knapp):hover { opacity: 1; }
.nav-links a.aktiv { opacity: 1; border-bottom-color: var(--rod); }
.knapp {
  display: inline-block;
  background: var(--sort);
  color: var(--hvit);
  text-decoration: none;
  font-family: "IBM Plex Mono", monospace;
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 500;
  padding: 13px 24px;
  border: none;
  cursor: pointer;
  transition: background 0.2s;
}
.knapp:hover { background: var(--rod); }
.knapp-rod { background: var(--rod); }
.knapp-rod:hover { background: var(--sort); }
.knapp-lys { background: var(--hvit); color: var(--sort); }
.knapp-lys:hover { background: var(--sort); color: var(--hvit); }
@media (max-width: 880px) {
  .nav-links a:not(.knapp) { display: none; }
}

/* ---------- Hero ---------- */
.hero {
  position: relative;
  min-height: 92svh;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
}
.hero-bilde { position: absolute; inset: 0; }
.hero-bilde img { width: 100%; height: 100%; object-fit: cover; }
.hero-bilde::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(20,20,18,0.72) 0%, rgba(20,20,18,0.12) 45%, rgba(20,20,18,0.25) 100%);
}
.hero-innhold {
  position: relative;
  z-index: 2;
  color: var(--hvit);
  padding: 0 clamp(20px, 4vw, 40px) clamp(44px, 7vh, 80px);
  max-width: 1280px;
  margin: 0 auto;
  width: 100%;
}
.hero-innhold .mono { display: block; margin-bottom: 20px; color: rgba(251,250,247,0.75); }
.hero-innhold h1 {
  font-size: clamp(46px, 7.4vw, 104px);
  font-weight: 800;
  max-width: 900px;
}
.hero-innhold h1 em { font-style: normal; color: var(--rod); }
.hero-under {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 24px;
  flex-wrap: wrap;
  margin-top: 28px;
}
.hero-under p { max-width: 460px; font-size: 18px; color: rgba(251,250,247,0.85); }

/* ---------- Seksjoner ---------- */
.seksjon { padding: clamp(72px, 11vh, 130px) clamp(20px, 4vw, 40px); }
.inner { max-width: 1280px; margin: 0 auto; }
.seksjon-hode { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; flex-wrap: wrap; margin-bottom: clamp(32px, 5vh, 56px); }
.seksjon-hode h2 { font-size: clamp(30px, 4vw, 52px); }
.seksjon-hode .mono { color: var(--graa); }

/* ---------- Manifest ---------- */
.manifest { position: relative; }
.manifest .mono { display: block; margin-bottom: 26px; color: var(--graa); }
.manifest p {
  font-size: clamp(28px, 4.2vw, 54px);
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.15;
  max-width: 1000px;
}
.manifest p em { font-style: normal; color: var(--rod); }
.manifest .fotnote {
  margin-top: 34px;
  font-family: "IBM Plex Mono", monospace;
  font-size: 12px;
  letter-spacing: 0.1em;
  color: var(--graa);
  text-transform: uppercase;
}

/* ---------- Tegning → virkelighet ---------- */
.avsloring { background: var(--hvit); border-top: 1px solid var(--strek); border-bottom: 1px solid var(--strek); }
.avsloring-ramme {
  position: relative;
  max-width: 1100px;
  margin: 0 auto;
  overflow: hidden;
}
.avsloring-ramme img { width: 100%; aspect-ratio: 16/9.5; object-fit: cover; }
.avsloring-ramme.hoy { max-width: 720px; }
.avsloring-ramme.hoy img { aspect-ratio: 4/5; }
.avsloring-foto {
  position: absolute;
  inset: 0;
  clip-path: inset(0 100% 0 0);
  transition: clip-path 2.2s cubic-bezier(0.65, 0, 0.2, 1);
}
.avsloring-ramme.vis .avsloring-foto { clip-path: inset(0 0 0 0); }
.avsloring-linje {
  position: absolute;
  top: 0; bottom: 0;
  left: 0;
  width: 2px;
  background: var(--rod);
  opacity: 0;
  transition: left 2.2s cubic-bezier(0.65, 0, 0.2, 1), opacity 0.3s;
}
.avsloring-ramme.vis .avsloring-linje { left: calc(100% - 2px); opacity: 1; }
.avsloring-tekst {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  max-width: 1100px;
  margin: 18px auto 0;
}

/* ---------- Prosjektkort ---------- */
.prosjekt-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(18px, 2.5vw, 32px);
}
@media (max-width: 880px) { .prosjekt-grid { grid-template-columns: 1fr; } }
.prosjekt-kort { text-decoration: none; display: block; }
.prosjekt-kort .bilde { overflow: hidden; position: relative; }
.prosjekt-kort img {
  aspect-ratio: 4/5;
  object-fit: cover;
  width: 100%;
  transition: transform 0.6s ease;
}
.prosjekt-kort:hover img { transform: scale(1.04); }
.prosjekt-kort .fakta {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 14px 0 4px;
  border-bottom: 1px solid var(--strek);
}
.prosjekt-kort h3 { font-size: 21px; font-weight: 700; }
.prosjekt-kort .mono { color: var(--graa); }
.prosjekt-kort .sted { font-size: 14.5px; color: var(--graa); margin-top: 6px; }

/* ---------- Prosess ---------- */
.prosess { background: var(--hvit); border-top: 1px solid var(--strek); }
.prosess-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(24px, 3.5vw, 56px);
}
@media (max-width: 880px) { .prosess-grid { grid-template-columns: 1fr; } }
.steg .mono { color: var(--rod); display: block; margin-bottom: 14px; font-size: 13px; }
.steg h3 { font-size: 21px; margin-bottom: 10px; }
.steg p { color: var(--graa); font-size: 15.5px; }

/* ---------- Tallstripe ---------- */
.tall-stripe { background: var(--sort); color: var(--hvit); }
.tall-stripe .inner {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  padding: clamp(40px, 6vh, 64px) 0;
}
@media (max-width: 880px) { .tall-stripe .inner { grid-template-columns: repeat(2, 1fr); } }
.tall .verdi {
  font-size: clamp(34px, 4vw, 52px);
  font-weight: 800;
  letter-spacing: -0.03em;
}
.tall .verdi span { color: var(--rod); }
.tall .mono { color: rgba(251,250,247,0.6); margin-top: 8px; display: block; }

/* ---------- Aktuelt ---------- */
.aktuelt-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(20px, 3vw, 44px);
}
@media (max-width: 720px) { .aktuelt-grid { grid-template-columns: 1fr; } }
.aktuelt-kort {
  border-top: 2px solid var(--sort);
  padding-top: 20px;
  text-decoration: none;
  display: block;
}
.aktuelt-kort:hover h3 { color: var(--rod); }
.aktuelt-kort .mono { color: var(--graa); }
.aktuelt-kort h3 { font-size: 23px; margin: 10px 0 8px; transition: color 0.2s; }
.aktuelt-kort p { color: var(--graa); font-size: 15.5px; }

/* ---------- CTA ---------- */
.cta-band {
  background: var(--rod);
  color: var(--hvit);
}
.cta-band .inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 28px;
  flex-wrap: wrap;
  padding: clamp(44px, 7vh, 72px) 0;
}
.cta-band h2 { font-size: clamp(28px, 3.6vw, 46px); max-width: 640px; }
.cta-band p { color: rgba(251,250,247,0.85); margin-top: 10px; max-width: 520px; }

/* ---------- Kontakt/skjema ---------- */
.kontakt-kolonner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(32px, 5vw, 88px);
  align-items: start;
}
@media (max-width: 860px) { .kontakt-kolonner { grid-template-columns: 1fr; } }
.kontakt-kolonner dt {
  font-family: "IBM Plex Mono", monospace;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--rod);
  margin-top: 22px;
}
.kontakt-kolonner dd { margin-top: 5px; font-size: 18px; }
.kontakt-kolonner dd a { text-decoration: none; font-weight: 500; }
form label {
  display: block;
  font-family: "IBM Plex Mono", monospace;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--graa);
  margin: 20px 0 6px;
}
form input, form select, form textarea {
  width: 100%;
  background: var(--hvit);
  border: 1px solid var(--strek);
  color: var(--sort);
  font-family: "Schibsted Grotesk", sans-serif;
  font-size: 16px;
  padding: 12px 14px;
  transition: border-color 0.2s;
}
form input:focus, form select:focus, form textarea:focus { outline: none; border-color: var(--rod); }
form textarea { resize: vertical; min-height: 96px; }

/* ---------- Footer ---------- */
footer { background: var(--sort); color: rgba(251,250,247,0.65); }
.footer-inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: clamp(44px, 7vh, 72px) clamp(20px, 4vw, 40px) 32px;
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: clamp(24px, 4vw, 64px);
}
@media (max-width: 760px) { .footer-inner { grid-template-columns: 1fr; } }
.footer-inner h4 {
  font-family: "IBM Plex Mono", monospace;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--rod);
  margin-bottom: 14px;
  font-weight: 500;
}
.footer-inner a, .footer-inner p { color: rgba(251,250,247,0.75); text-decoration: none; display: block; margin-bottom: 7px; font-size: 15.5px; }
.footer-inner a:hover { color: var(--hvit); }
.footer-merke {
  font-weight: 800;
  font-size: clamp(60px, 10vw, 140px);
  letter-spacing: -0.04em;
  color: var(--hvit);
  line-height: 0.9;
}
.footer-merke span { color: var(--rod); }
.footer-bunn {
  border-top: 1px solid var(--strek-lys);
  max-width: 1280px;
  margin: 0 auto;
  padding: 16px clamp(20px, 4vw, 40px) 24px;
  display: flex;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  font-family: "IBM Plex Mono", monospace;
  font-size: 11.5px;
}
.footer-bunn a { color: var(--rod); text-decoration: none; }
.footer-bunn a:hover { text-decoration: underline; }

/* ---------- Mobilmeny ---------- */
.burger {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  width: 40px; height: 40px;
  position: relative;
  z-index: 80;
}
.burger span {
  display: block;
  width: 22px; height: 2px;
  background: var(--sort);
  margin: 5px auto;
  transition: transform 0.3s, opacity 0.3s, background 0.3s;
}
body.meny-aapen .burger span { background: var(--hvit); }
body.meny-aapen .burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
body.meny-aapen .burger span:nth-child(2) { opacity: 0; }
body.meny-aapen .burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.mobilmeny {
  position: fixed;
  inset: 0;
  z-index: 70;
  background: rgba(20, 20, 18, 0.98);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 26px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s ease;
}
body.meny-aapen .mobilmeny { opacity: 1; pointer-events: auto; }
.mobilmeny a {
  font-size: 30px;
  font-weight: 700;
  color: var(--hvit);
  text-decoration: none;
  letter-spacing: -0.02em;
}
.mobilmeny a:hover { color: var(--rod); }
body.meny-aapen { overflow: hidden; }
@media (max-width: 880px) { .burger { display: block; } }

/* ---------- Undersider ---------- */
.side-hode {
  padding: clamp(56px, 9vh, 100px) clamp(20px, 4vw, 40px) clamp(36px, 6vh, 64px);
  max-width: 1280px;
  margin: 0 auto;
}
.side-hode .mono { display: block; margin-bottom: 18px; color: var(--graa); }
.side-hode h1 { font-size: clamp(40px, 6vw, 84px); font-weight: 800; max-width: 900px; }
.side-hode h1 em { font-style: normal; color: var(--rod); }
.side-hode .ingress { max-width: 560px; font-size: 18.5px; color: var(--graa); margin-top: 20px; }

.case-fakta {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  border-top: 2px solid var(--sort);
  border-bottom: 1px solid var(--strek);
  padding: 20px 0;
  margin: clamp(28px, 4vh, 44px) 0;
}
@media (max-width: 720px) { .case-fakta { grid-template-columns: repeat(2, 1fr); } }
.case-fakta .verdi { font-weight: 800; font-size: 19px; letter-spacing: -0.01em; }
.case-fakta .mono { color: var(--graa); margin-top: 4px; display: block; }

.case-bilder { display: grid; gap: clamp(18px, 3vh, 32px); max-width: 1100px; margin: 0 auto; }
.case-bilder figure { margin: 0; }
.case-bilder img { width: 100%; object-fit: cover; }
.case-bilder figcaption {
  font-family: "IBM Plex Mono", monospace;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--graa);
  margin-top: 10px;
}
.case-tekst { max-width: 680px; margin: 0 auto clamp(40px, 6vh, 64px); }
.case-tekst p { margin-bottom: 16px; font-size: 17.5px; }
.case-tekst p:first-child { font-size: 21px; font-weight: 500; }

.neste-prosjekt {
  display: block;
  background: var(--sort);
  color: var(--hvit);
  text-decoration: none;
  padding: clamp(36px, 6vh, 56px) clamp(20px, 4vw, 40px);
  text-align: center;
  transition: background 0.25s;
}
.neste-prosjekt:hover { background: var(--rod); }
.neste-prosjekt .mono { color: rgba(251,250,247,0.65); display: block; margin-bottom: 10px; }
.neste-prosjekt .navn { font-size: clamp(26px, 3.4vw, 42px); font-weight: 800; letter-spacing: -0.02em; }

.tjeneste-blokk {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(28px, 5vw, 80px);
  align-items: center;
  padding: clamp(36px, 6vh, 60px) 0;
  border-top: 1px solid var(--strek);
}
@media (max-width: 860px) { .tjeneste-blokk { grid-template-columns: 1fr; } }
.tjeneste-blokk img { aspect-ratio: 4/3; object-fit: cover; width: 100%; }
.tjeneste-blokk .mono { color: var(--rod); display: block; margin-bottom: 12px; }
.tjeneste-blokk h2 { font-size: clamp(26px, 3.2vw, 40px); margin-bottom: 14px; }
.tjeneste-blokk p { color: var(--graa); margin-bottom: 12px; }
.tjeneste-blokk ul { list-style: none; margin-top: 14px; }
.tjeneste-blokk li { padding: 8px 0 8px 24px; position: relative; font-size: 15.5px; border-bottom: 1px dotted var(--strek); }
.tjeneste-blokk li::before { content: "+"; position: absolute; left: 0; color: var(--rod); font-weight: 700; }

.artikkel { max-width: 680px; margin: 0 auto; padding-bottom: clamp(44px, 7vh, 72px); }
.artikkel .mono { color: var(--rod); }
.artikkel h2 { font-size: clamp(26px, 3.4vw, 40px); margin: 12px 0 18px; }
.artikkel p { margin-bottom: 16px; }
.artikkel + .artikkel { border-top: 1px solid var(--strek); padding-top: clamp(40px, 6vh, 64px); }

/* ---------- Sertifiseringer ---------- */
.sert-splitt {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(28px, 5vw, 72px);
  align-items: center;
  max-width: 1280px;
  margin: 0 auto;
  padding: clamp(40px, 7vh, 80px) clamp(20px, 4vw, 40px) clamp(48px, 8vh, 88px);
}
@media (max-width: 880px) { .sert-splitt { grid-template-columns: 1fr; } }
.sert-splitt .mono { display: block; margin-bottom: 18px; color: var(--graa); }
.sert-splitt h1 { font-size: clamp(40px, 6vw, 84px); font-weight: 800; }
.sert-splitt h1 em { font-style: normal; color: var(--rod); }
.sert-splitt .ingress { max-width: 520px; font-size: 18.5px; color: var(--graa); margin-top: 20px; }
.sert-splitt img {
  aspect-ratio: 4/3.4;
  object-fit: cover;
  width: 100%;
}

.sert-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(18px, 2.5vw, 32px);
}
@media (max-width: 960px) { .sert-grid { grid-template-columns: 1fr; } }
.sert-kort {
  background: var(--hvit);
  border: 1px solid var(--strek);
  padding: clamp(24px, 3vw, 34px);
  display: grid;
  grid-template-columns: auto 1fr;
  gap: clamp(20px, 2.5vw, 30px);
  align-items: start;
  position: relative;
  overflow: hidden;
  transition: transform 0.25s, box-shadow 0.25s;
}
.sert-kort:hover { transform: translateY(-3px); box-shadow: 0 16px 36px rgba(20, 20, 18, 0.09); }
.sert-kort:hover .stempel { transform: rotate(4deg) scale(1.05); }

.stempel {
  width: clamp(84px, 8vw, 104px);
  height: clamp(84px, 8vw, 104px);
  border-radius: 50%;
  border: 2.5px solid var(--rod);
  box-shadow: inset 0 0 0 4px var(--hvit), inset 0 0 0 5.5px var(--rod);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  color: var(--rod);
  transform: rotate(-6deg);
  transition: transform 0.3s ease;
  flex-shrink: 0;
  opacity: 0.88;
  mask-image: radial-gradient(circle at 30% 60%, black 92%, rgba(0,0,0,0.72) 100%);
}
.stempel .kode {
  font-family: "IBM Plex Mono", monospace;
  font-weight: 500;
  font-size: clamp(19px, 2vw, 24px);
  letter-spacing: 0.04em;
  line-height: 1;
}
.stempel .aar {
  font-family: "IBM Plex Mono", monospace;
  font-size: 8.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}
.stempel-sort { border-color: var(--sort); box-shadow: inset 0 0 0 4px var(--hvit), inset 0 0 0 5.5px var(--sort); color: var(--sort); transform: rotate(3deg); }

.sert-kort .topp {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}
.sert-kort .topp .mono { color: var(--graa); }
.sert-kort h2 { font-size: clamp(21px, 2.4vw, 27px); margin-bottom: 10px; }
.sert-kort > div p { color: var(--graa); font-size: 15px; margin-bottom: 14px; }
.sert-kort .betyr {
  border-left: 3px solid var(--rod);
  background: var(--papir);
  padding: 12px 16px;
  font-size: 15px;
  color: var(--sort);
}
.sert-kort .betyr strong {
  display: block;
  font-family: "IBM Plex Mono", monospace;
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--rod);
  margin-bottom: 5px;
}
@media (max-width: 560px) {
  .sert-kort { grid-template-columns: 1fr; }
  .stempel { margin-bottom: 4px; }
}

/* ---------- Animasjon ---------- */
.fade {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.85s ease, transform 0.85s ease;
}
.fade.vis { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .fade { opacity: 1; transform: none; transition: none; }
  .avsloring-foto { transition: none; clip-path: inset(0 0 0 0) !important; }
  .avsloring-linje { display: none; }
  html { scroll-behavior: auto; }
}