:root{
  --black:#000; --white:#fff; --gray40:#666; --container:1200px; --header-h:56px;
  --hero-url: none;
}
*{box-sizing:border-box;}
html, body{margin:0;padding:0;height:100%;scroll-behavior:smooth;}
body.theme{font-family:Helvetica, Arial, sans-serif;color:var(--black);background:var(--white);line-height:1.4;}

/* Header */
.site-header{position:fixed;top:0;left:0;right:0;z-index:100;background:var(--white);
  display:flex;align-items:center;justify-content:space-between;padding:10px 24px;border-bottom:1px solid rgba(0,0,0,0.08);}
.logo img{height:28px;width:auto;display:block;}
.nav{display:flex;gap:24px;}
.nav-link{text-decoration:none;color:var(--black);}

/* Sticky stack + z-layers */
.scroll-sections{position:relative; z-index:0;}
.sticky-section{position:relative;height:auto;display:block;}
.hero {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
}
.hero::before,
.hero::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background-image: var(--hero-url-a);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0;
  transition: opacity 250ms ease-in-out;
}

/* ::before bruker --hero-url-a, ::after bruker --hero-url-b */
.hero::after {
  background-image: var(--hero-url-b);
}

/* Hvilket lag som er synlig */
.hero.hero-show-a::before {
  opacity: 1;
}

.hero.hero-show-b::after {
  opacity: 1;
}

.sek1{z-index:2;background-color:#fff;}
.sek1 {
  padding-top: 4rem;   /* mer luft – juster tallet fritt */
}

.sek2{z-index:3;background-color:#fff;
 padding: 40px 0;   /* luft over og under ALT innholdet */ 
}
.sek3{z-index:4;background-color:#fff;
padding: 40px 0;   /* luft over og under ALT innholdet */}

.video-wrapper {
  margin: 0;          /* fjerner 40px margin på venstre/høyre */
  width: 100%;
}

.standard-width video {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 0; /* Hvis du vil ha hjørner */
}

.sek3 .text-col {
  max-width: none;      /* lar teksten følge container-bredden */
  margin: 40px 40;     /* fjern auto-centering */
  padding: 0;           /* hvis noe eksisterte fra før */
}
/* Fjern maks-bredde på paragrafene i denne seksjonen */
.sek3 .text-col p {
  max-width: none;
}

.sek4{z-index:5;background-color:#fff;}

/* Two-column */
.container{width:min(var(--container),92%);margin:0 auto;}
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center;padding-bottom:80px;}
.text-col p{max-width:56ch;}
.image-col img{width:100%;height:auto;max-height:80vh;object-fit:cover;}

/* Carousel (portrait) */
.carousel{position:relative;width:100%;height:80vh;max-height:800px;overflow:hidden;background:#fff;}
.carousel img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:none;}
.carousel img.is-active{display:block;}

/* Om page: match Sek1 layout */
.om-section {
  padding-top: 5rem;
}

.om-section .image-col img {
  width: 100%;
  height: auto;
  max-width: 700px;
  object-fit: contain;
  display: block;
  margin: 0 auto;
}


/* Sticky Kontakt + Footer in one sheet */
.contact-sticky{
  z-index:6;
  height:100vh;
  background:#f9f9f9;
  display:flex;flex-direction:column;justify-content:space-between;align-items:center;
  padding:0;
}
.contact-wrapper{width:100%;height:100%;display:flex;flex-direction:column;justify-content:space-between;}
.contact-card{
  width:min(600px,92%);margin:80px auto 0 auto;background:#fff;border:1px solid #eee;border-radius:12px;
  padding:32px;box-shadow:0 4px 20px rgba(0,0,0,0.05);
}
.contact-card h2{text-align:center;margin-bottom:24px;}
.contact-card label{display:block;margin-bottom:6px;font-weight:700;}
.contact-card input,.contact-card textarea{width:100%;padding:12px;margin-bottom:16px;border:1px solid #ccc;border-radius:6px;font-family:Helvetica,Arial,sans-serif;}
.contact-card button{display:block;width:100%;background:#000;color:#fff;border:0;border-radius:6px;padding:12px;cursor:pointer;font-weight:700;}
.contact-card button:hover{background:#333;}
.contact-info{text-align:center;margin-top:12px;}
.contact-info a{text-decoration:none;color:#000;}

/* Footer locked at bottom of contact sheet */
.site-footer{background:#000;color:#fff;width:100%;padding:16px 0;}
.site-footer .foot{width:min(var(--container),92%);margin:0 auto;display:flex;justify-content:space-between;align-items:center;}

/* Håndskrift-overskrifter som bilde */
.h-handwritten {
  display: block;
  max-width: 360px;     /* Endre størrelsen her */
  width: 100%;          /* Holder proporsjoner */
  margin: 0 0 30px;  /* Plasserer midtstilt + luft under */
  height: auto;
}
/* Tablet */
@media (max-width: 1024px) {
  .h-handwritten {
    max-width: 240px;   /* litt mindre */
    margin-bottom: 25px;
  }
}

/* Mobil */
@media (max-width: 600px) {
  .h-handwritten {
    max-width: 180px;   /* mye mindre */
    margin-bottom: 18px;
  }
}


/* Projects */
.container.proj{padding-top:80px;}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;}
.grid-4 img{width:100%;display:block;}
.project{display:flex;flex-direction:column;gap:6px;}
.project h3{font-size:14px;font-weight:700;margin:0;}
.project a{text-decoration:none;color:inherit;}

/* Lightbox */
.lightbox{position:fixed;inset:0;background:rgba(0,0,0,0.92);display:flex;align-items:center;justify-content:center;z-index:9999;}
.lightbox.hidden{display:none;}
.lightbox-inner{max-width:92vw;max-height:88vh;display:flex;flex-direction:column;gap:10px;align-items:center;}
.lightbox-img{max-width:92vw;max-height:80vh;object-fit:contain;}
.lightbox-cap{color:#fff;font-size:14px;opacity:0.8;}
.lightbox-next,.lightbox-prev,.lightbox-close{
  position:fixed;top:50%;transform:translateY(-50%);background:transparent;border:0;color:#fff;
  font-size:42px;cursor:pointer;line-height:1;padding:8px 14px;
}
.lightbox-next{right:20px;}
.lightbox-prev{left:20px;}
.lightbox-close{top:20px;right:20px;transform:none;font-size:32px;}

/* Responsive */
@media (max-width:820px){
  .two-col{grid-template-columns:1fr;gap:20px;}
  .carousel{height:52vh;}
  .grid-4{grid-template-columns:repeat(2,1fr);}
}
@media (max-width:520px){
  .grid-4{grid-template-columns:1fr;}
  .carousel{height:46vh;}
}
/* MOBILOPPSETT FOR SEK1–SEK4 */
@media (max-width: 600px) {

  /* Stack kolonner og gi luft på sidene */
  .sek1 .container.two-col,
  .sek2 .container.two-col,
  .sek3 .container.two-col,
  .sek4 .container.two-col {
    display: flex;
    flex-direction: column;
    padding-left: 24px;
    padding-right: 24px;
  }

  /* Bildesiden (karusell) sentreres innenfor seksjonen */
  .sek1 .image-col,
  .sek2 .image-col,
  .sek3 .image-col,
  .sek4 .image-col {
    width: 100%;
    display: flex;
    justify-content: center;
  }

  /* Karusell-/bildebredden på mobil */
  .sek1 .carousel,
  .sek2 .carousel,
  .sek3 .carousel,
  .sek4 .carousel {
    width: 100%;
    max-width: 420px;      /* juster bredde her for alle seksjoner */
    margin-left: auto;
    margin-right: auto;
  }

  /* Tekstkolonnen matcher bredden til bildet */
  .sek1 .text-col,
  .sek2 .text-col,
  .sek3 .text-col,
  .sek4 .text-col {
    width: 100%;
    max-width: 420px;      /* samme som .carousel */
    margin: 24px auto 0 auto;
    text-align: left;
  }

  .sek1 .text-col p,
  .sek2 .text-col p,
  .sek3 .text-col p,
  .sek4 .text-col p {
    margin-top: 0;
  }

  /* Håndskrift-overskrifter inni tekstkolonnene */
  .sek1 .h-handwritten,
  .sek2 .h-handwritten,
  .sek3 .h-handwritten,
  .sek4 .h-handwritten {
    display: block;
    max-width: 260px;      /* juster hvis de føles store på mobil */
    height: auto;
    margin-bottom: 12px;
  }
}
/* Tving alltid bilde over tekst på mobil */
@media (max-width: 600px) {

  .sek1 .image-col,
  .sek2 .image-col,
  .sek3 .image-col,
  .sek4 .image-col {
    order: 0;
  }

  .sek1 .text-col,
  .sek2 .text-col,
  .sek3 .text-col,
  .sek4 .text-col {
    order: 1;
  }
}