.u-section-1 .u-sheet-1 {
  min-height: 1082px;
}

.u-section-1 .u-image-1 {
  width: 715px;
  height: 792px;
  margin: 87px auto 0;
}
.u-section-1 .u-image-1.hero-video {
  display: block;
  object-fit: cover;
}

.u-section-1 .u-shape-1 {
  width: 208px;
  --radius: 10px;
  height: 67px;
  margin: -79px 213px 0 auto;
}

.u-section-1 .u-text-1 {
  font-family: "FieldGothicTEST-No.75";
  font-size: 2.25rem;
  margin: -67px 221px 0 719px;
}

.u-section-1 .u-btn-1 {
  background-image: none;
  padding: 0;
}

.u-section-1 .u-shape-2 {
  width: 127px;
  --radius: 10px;
  height: 48px;
  margin: -111px 213px 0 auto;
}

.u-section-1 .u-text-2 {
  font-family: "FieldGothicTEST-No.75";
  font-size: 2.25rem;
  margin: -53px 231px 60px 819px;
}

.u-section-1 .u-btn-2 {
  background-image: none;
  padding: 0;
}

@media (max-width: 1199px) {
  .u-section-1 .u-text-1 {
    margin-right: 121px;
    margin-left: 619px;
  }

  .u-section-1 .u-text-2 {
    margin-right: 131px;
    margin-left: 719px;
  }
}

@media (max-width: 991px) {
  .u-section-1 .u-text-1 {
    margin-right: 11px;
    margin-left: 509px;
  }

  .u-section-1 .u-text-2 {
    margin-right: 21px;
    margin-left: 609px;
  }
}

@media (max-width: 767px) {
  .u-section-1 .u-sheet-1 {
    min-height: 888px;
  }

  .u-section-1 .u-image-1 {
    width: 540px;
    height: 598px;
  }

  .u-section-1 .u-shape-1 {
    margin-top: 115px;
  }

  .u-section-1 .u-text-1 {
    font-size: 2rem;
    margin-right: 0;
    margin-left: 340px;
  }

  .u-section-1 .u-text-2 {
    font-size: 2rem;
    margin-right: 0;
    margin-left: 450px;
  }
}

@media (max-width: 575px) {
  .u-section-1 .u-sheet-1 {
    min-height: 667px;
  }

  .u-section-1 .u-image-1 {
    width: 340px;
    height: 377px;
  }

  .u-section-1 .u-shape-1 {
    margin-right: 132px;
  }

  .u-section-1 .u-text-1 {
    margin-left: 140px;
  }

  .u-section-1 .u-text-2 {
    margin-left: 250px;
  }
}

.u-section-2 .u-sheet-1 {
  min-height: 3614px;
  position: relative;
  overflow: hidden;
}

.u-section-2 .u-image-1 {
  width: 230px;
  height: 131px;
  margin: 81px auto 0;
}

.u-section-2 .u-image-2 {
  width: 409px;
  height: 230px;
  margin: 105px auto 0 161px;
}

.u-section-2 .u-image-3 {
  width: 375px;
  height: 161px;
  margin: -177px 168px 0 auto;
}

.u-section-2 .u-text-1 {
  font-family: "FieldGothicTEST-No.82";
  font-size: 1.5rem;
  margin: -200px 451px 0 auto;
}

.u-section-2 .u-image-4 {
  width: 435px;
  height: 300px;
  margin: 189px 78px 0 auto;
}

.u-section-2 .u-image-5 {
  width: 243px;
  height: 155px;
  margin: -211px auto 0 367px;
}

.u-section-2 .u-image-6 {
  width: 446px;
  height: 250px;
  margin: 112px auto 0 173px;
}

.u-section-2 .u-text-2 {
  font-family: "FieldGothicTEST-No.82";
  font-size: 1.5rem;
  margin: -216px 403px 0 auto;
}

.u-section-2 .u-image-7 {
  width: 373px;
  height: 131px;
  margin: -13px 128px 0 auto;
}

.u-section-2 .u-image-8 {
  width: 421px;
  height: 237px;
  margin: 64px 78px 0 auto;
}

.u-section-2 .u-text-3 {
  font-family: "FieldGothicTEST-No.82";
  font-size: 1.5rem;
  margin: -181px auto 0;
}

.u-section-2 .u-image-9 {
  width: 483px;
  height: 90px;
  margin: 1px 530px 0 auto;
}

.u-section-2 .u-image-10 {
  width: 472px;
  height: 284px;
  margin: 60px auto 0 147px;
  position: relative;
  z-index: 10;
}

/* JUSTERT. u-image-11 skal ligge under neste kort */
.u-section-2 .u-image-11 {
  width: 520px;
  height: 300px;
  margin-top: -351px;
  margin-right: 0;
  margin-bottom: 0;
  margin-left: auto;
  position: relative;
  z-index: 12;
}

/* JUSTERT. u-image-12 skal ligge over u-image-11 */
.u-section-2 .u-image-12 {
  width: 455px;
  height: 256px;
  margin: -109px 61px 0 auto;
  position: relative;
  z-index: 22;
}

.u-section-2 .u-image-13 {
  width: 502px;
  height: 42px;
  margin: -140px auto 0 95px;
}

.u-section-2 .u-image-14 {
  width: 491px;
  height: 260px;
  margin: 90px auto 0 119px;
}

.u-section-2 .u-image-15 {
  width: 389px;
  height: 53px;
  margin: -156px 105px 0 auto;
}

.u-section-2 .u-image-16 {
  width: 407px;
  height: 300px;
  margin: 111px 89px 0 auto;
}

.u-section-2 .u-text-4 {
  font-family: "FieldGothicTEST-No.82";
  font-size: 1.5rem;
  margin: -217px 512px 0 495px;
}

.u-section-2 .u-image-17 {
  width: 477px;
  height: 72px;
  margin: 1px auto 0 164px;
}

.u-section-2 .u-image-18 {
  width: 441px;
  height: 263px;
  margin: 116px auto 0 147px;
}

.u-section-2 .u-text-5 {
  font-family: "FieldGothicTEST-No.82";
  font-size: 1.5rem;
  margin: -186px 438px 0 auto;
}

.u-section-2 .u-image-19 {
  width: 550px;
  height: 42px;
  margin: 1px -18px 0 auto;
}

.u-section-2 .u-image-20 {
  width: 334px;
  height: 616px;
  margin: 105px 65px 0 auto;
}

.u-section-2 .u-text-6 {
  font-family: "FieldGothicTEST-No.82";
  font-size: 1.5rem;
  margin: -295px 400px 0 auto;
}

.u-section-2 .u-image-21 {
  width: 569px;
  height: 111px;
  margin: 1px auto 0 172px;
}

.u-section-2 .u-text-7 {
  font-family: "FieldGothicTEST-No.82";
  margin: 273px auto 28px -19px;
}
/* ---------- PROJECT CATEGORY POSITIONS ---------- */

.u-section-2 .u-text-8,
.u-section-2 .u-text-9,
.u-section-2 .u-text-10,
.u-section-2 .u-text-11{
  position:absolute;
  font-family:"FieldGothicTEST-No.82";
  font-size:1.5rem;
  color:white;
  z-index:30;
}

@media (max-width: 1199px) {
  .u-section-2 .u-text-1 {
    margin-right: 372px;
  }

  .u-section-2 .u-text-2 {
    margin-right: 332px;
  }

  .u-section-2 .u-image-9 {
    margin-right: 457px;
  }

  .u-section-2 .u-text-4 {
    margin-right: 422px;
    margin-left: 408px;
  }

  .u-section-2 .u-text-5 {
    margin-right: 361px;
  }

  .u-section-2 .u-text-6 {
    margin-right: 330px;
  }
}

@media (max-width: 991px) {
  .u-section-2 .u-text-1 {
    margin-right: 285px;
  }

  .u-section-2 .u-text-2 {
    margin-right: 254px;
  }

  .u-section-2 .u-image-9 {
    margin-right: 237px;
  }

  .u-section-2 .u-text-4 {
    margin-right: 323px;
    margin-left: 313px;
  }

  .u-section-2 .u-text-5 {
    margin-right: 277px;
  }

  .u-section-2 .u-text-6 {
    margin-right: 253px;
  }

  .u-section-2 .u-image-21 {
    margin-left: 151px;
  }
}

@media (max-width: 767px) {
  .u-section-2 .u-sheet-1 {
    min-height: 3459px;
  }

  .u-section-2 .u-image-2 {
    margin-top: 1047px;
    margin-left: 131px;
  }

  .u-section-2 .u-image-3 {
    margin-top: -1146px;
    margin-right: 165px;
  }

  .u-section-2 .u-text-1 {
    font-size: 1.3333333333333333rem;
    margin-top: 1414px;
    margin-right: 214px;
  }

  .u-section-2 .u-image-4 {
    margin-top: 786px;
    margin-right: 57px;
  }

  .u-section-2 .u-image-5 {
    margin-top: -1313px;
    margin-left: 297px;
  }

  .u-section-2 .u-image-6 {
    margin-top: 224px;
    margin-left: 94px;
  }

  .u-section-2 .u-text-2 {
    font-size: 1.3333333333333333rem;
    margin-right: 191px;
  }

  .u-section-2 .u-image-8 {
    margin-top: -665px;
  }

  .u-section-2 .u-text-3 {
    font-size: 1.3333333333333333rem;
  }

  .u-section-2 .u-image-9 {
    margin-right: 57px;
  }

  .u-section-2 .u-image-10 {
    margin-top: 1891px;
    margin-left: 68px;
  }

  .u-section-2 .u-image-11 {
    width: 540px;
    height: 311px;
    margin-right: 0;
  }

  .u-section-2 .u-image-12 {
    margin-top: -40px;
  }

  .u-section-2 .u-image-13 {
    margin-top: -215px;
    margin-left: 38px;
  }

  .u-section-2 .u-image-14 {
    margin-top: 60px;
    margin-left: 49px;
  }

  .u-section-2 .u-image-15 {
    margin-top: -151px;
  }

  .u-section-2 .u-image-16 {
    margin-top: -829px;
  }

  .u-section-2 .u-text-4 {
    font-size: 1.3333333333333333rem;
    margin-right: 242px;
    margin-left: 235px;
  }

  .u-section-2 .u-image-17 {
    margin-left: 63px;
  }

  .u-section-2 .u-image-18 {
    margin-left: 99px;
  }

  .u-section-2 .u-text-5 {
    font-size: 1.3333333333333333rem;
    margin-right: 208px;
  }

  .u-section-2 .u-text-6 {
    font-size: 1.3333333333333333rem;
    margin-top: -289px;
    margin-right: 190px;
  }

  .u-section-2 .u-image-21 {
    width: 540px;
    height: 105px;
    margin-left: 0;
  }

  .u-section-2 .u-text-7 {
    margin-top: 1382px;
    margin-bottom: -1598px;
  }
}

@media (max-width: 575px) {
  .u-section-2 .u-sheet-1 {
    min-height: 2650px;
  }

  .u-section-2 .u-image-2 {
    width: 340px;
    height: 191px;
    margin-left: 0;
  }

  .u-section-2 .u-image-3 {
    width: 340px;
    height: 146px;
    margin-right: 0;
  }

  .u-section-2 .u-text-1 {
    margin-top: 1429px;
    margin-right: 135px;
  }

  .u-section-2 .u-image-4 {
    width: 340px;
    height: 234px;
    margin-top: 747px;
    margin-right: 0;
  }

  .u-section-2 .u-image-5 {
    margin-top: -1236px;
    margin-left: 97px;
  }

  .u-section-2 .u-image-6 {
    width: 340px;
    height: 191px;
    margin-top: 238px;
    margin-left: 0;
  }

  .u-section-2 .u-text-2 {
    margin-top: -157px;
    margin-right: 120px;
  }

  .u-section-2 .u-image-7 {
    width: 340px;
    height: 119px;
    margin-right: 0;
  }

  .u-section-2 .u-image-8 {
    width: 340px;
    height: 191px;
    margin-top: -599px;
    margin-right: 0;
  }

  .u-section-2 .u-text-3 {
    margin-top: -135px;
  }

  .u-section-2 .u-image-9 {
    width: 340px;
    height: 63px;
    margin-right: 0;
  }

  .u-section-2 .u-image-10 {
    width: 340px;
    height: 205px;
    margin-top: 1850px;
    margin-left: 0;
  }

  .u-section-2 .u-image-11 {
    width: 340px;
    height: 196px;
    margin-top: -272px;
  }

  .u-section-2 .u-image-12 {
    width: 340px;
    height: 191px;
    margin-top: 60px;
    margin-right: 0;
  }

  .u-section-2 .u-image-13 {
    width: 340px;
    height: 28px;
    margin-top: -101px;
    margin-left: 0;
  }

  .u-section-2 .u-image-14 {
    width: 340px;
    height: 180px;
    margin-left: 0;
  }

  .u-section-2 .u-image-15 {
    width: 340px;
    height: 46px;
    margin-top: -31px;
    margin-right: 0;
  }

  .u-section-2 .u-image-16 {
    width: 340px;
    height: 251px;
    margin-top: -820px;
    margin-right: 0;
  }

  .u-section-2 .u-text-4 {
    margin-top: -168px;
    margin-left: 148px;
    margin-right: 152px;
  }

  .u-section-2 .u-image-17 {
    width: 340px;
    height: 51px;
    margin-left: 0;
  }

  .u-section-2 .u-image-18 {
    width: 340px;
    height: 203px;
    margin-left: 0;
  }

  .u-section-2 .u-text-5 {
    margin-right: 131px;
    margin-top: -126px;
  }

  .u-section-2 .u-image-19 {
    width: 340px;
    height: 26px;
    margin-right: 0;
  }

  .u-section-2 .u-image-20 {
    margin-right: 6px;
  }

  .u-section-2 .u-text-6 {
    margin-top: -250px;
    margin-right: 120px;
  }

  .u-section-2 .u-image-21 {
    width: 340px;
    height: 66px;
  }

  .u-section-2 .u-text-7 {
    margin-top: 1340px;
    margin-bottom: -1605px;
  }
}

.u-section-3 {
  background-image: none;
}

.u-section-3 .u-sheet-1 {
  min-height: 212px;
}

.u-section-3 .u-social-icons-1 {
  height: 60px;
  width: 232px;
  min-width: 124px;
  margin: 23px auto 0;
}

.u-section-3 .u-icon-2 {
  height: 60px;
  width: 60px;
  display: inline-flex;
}

.u-section-3 .u-text-1 {
  font-family: "FieldGothicTEST-No.82";
  font-size: 0.875rem;
  margin: 44px auto 0;
}

.u-section-3 .u-text-2 {
  font-family: "FieldGothicTEST-No.82";
  font-size: 0.875rem;
  width: 344px;
  margin: 17px auto 23px;
}

@media (max-width: 1199px) {
  .u-section-3 .u-social-icons-1 {
    min-height: 16px;
  }
}

@media (max-width: 575px) {
  .u-section-3 .u-text-2 {
    width: 340px;
  }
}

@font-face {
  font-family: 'FieldGothicTEST-No.75';
  font-style: normal;
  font-weight: 400;
  src: url(fonts/FieldGothicTEST-No.75.woff);
}
@font-face {
  font-family: 'FieldGothicTEST-No.82';
  font-style: normal;
  font-weight: 400;
  src: url(fonts/FieldGothicTEST-No.82.woff);
}

/* global site font */
body,
.u-body,
.u-text,
.u-nav-link,
h1, h2, h3, h4, h5, h6,
p,
a {
  font-family: "FieldGothicTEST-No.82", Arial, sans-serif !important;
  font-weight: 400 !important;
}

/* all normal text */
.u-text,
.u-section-2 .u-text-1,
.u-section-2 .u-text-2,
.u-section-2 .u-text-3,
.u-section-2 .u-text-4,
.u-section-2 .u-text-5,
.u-section-2 .u-text-6,
.u-section-2 .u-text-7,
.u-section-3 .u-text-1,
.u-section-3 .u-text-2 {
  font-family: "FieldGothicTEST-No.82", Arial, sans-serif !important;
  font-weight: 400 !important;
}

/* navigation menu */
.u-nav-link {
  font-family: "FieldGothicTEST-No.82", Arial, sans-serif !important;
}

/* except hero buttons */
.u-section-1 .u-text-1,
.u-section-1 .u-text-2,
.u-section-1 .u-text-1 a,
.u-section-1 .u-text-2 a {
  font-family: "FieldGothicTEST-No.75", Arial, sans-serif !important;
}

/* hide top menu on frontpage only */
.u-body.u-xl-mode .u-header,
.u-body .u-header {
  display: none;
}
header.u-header {
  display: none !important;
}
.u-body header.u-header {
  display: none !important;
}

.u-body .u-section-1 {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

.u-body .u-section-1 .u-sheet-1 {
  padding-top: 0 !important;
}
.u-section-1 .u-image-1 {
  margin-top: 0 !important;
}

.u-section-1 {
  padding-top: 0 !important;
  margin-top: 0 !important;
  min-height: 100vh !important;
}

.u-section-1 .u-sheet-1 {
  min-height: 100vh !important;
  padding-top: 0 !important;
}

/* project click overlays */
.project-hit {
  position: absolute;
  display: block;
  z-index: 50;
  text-decoration: none;
  cursor: pointer;
  border-radius: 6px;
  transform: translateZ(0);
}

.project-hit::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: rgba(255, 255, 255, 0.12);
  opacity: 0;
  transition: opacity 220ms ease, box-shadow 220ms ease, transform 220ms ease;
}

.project-hit:hover::after,
.project-hit:focus-visible::after {
  opacity: 1;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
}

.project-hit:hover {
  transform: translateY(-2px);
}

.project-hit:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.55);
  outline-offset: 2px;
}

.projects {
  width: 100%;
  max-width: 1100px;
  margin: 140px auto 0 auto;
  display: flex;
  flex-direction: column;
  gap: 120px;
}

.project-card {
  position: relative;
  display: block;
  width: 100%;
  border-radius: 12px;
  overflow: hidden;
  text-decoration: none;
}

.project-media img {
  width: 100%;
  height: auto;
  display: block;
}

.project-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 60px;
  background: rgba(20,20,20,0);
  transition: background 250ms ease;
}

.project-card:hover .project-overlay {
  background: rgba(40,40,40,0.55);
}

.project-logo {
  max-width: 45%;
  height: auto;
}

.project-type {
  font-family: "FieldGothicTEST-No.82";
  color: white;
  font-size: 22px;
  opacity: 0.8;
}

.cover-width-anchor{
  position: absolute;
  height: 1px;
  left: 0;
  right: 0;
  top: 0;
  pointer-events: none;
  opacity: 0;
}


/* Bla */
.u-section-2 .u-text-8{
  top: 760px;
  left: 410px;
}

/* Så langt så bra */
.u-section-2 .u-text-9{
  top: 1460px;
  left: 530px;
}

/* Første søndag i november */
.u-section-2 .u-text-10{
  top: 1750px;
  left: 120px;
}

/* Far som sønn */
.u-section-2 .u-text-11{
  top: 2250px;
  left: 520px;
}
}/* FORCE STACKING FIX FOR SLSB OVER FSN */
.u-section-2 .u-image-11,
.u-section-2 .u-image-12,
.u-section-2 .u-image-13 {
  position: relative !important;
}

.u-section-2 .u-image-11 {
  z-index: 1 !important;
}

.u-section-2 .u-image-12 {
  z-index: 10 !important;
}

.u-section-2 .u-image-13 {
  z-index: 11 !important;
}
/* Fix overlap rundt Første søndag i november */
.u-section-2 .u-image-12 {
  margin-top: 60px !important;
}

/* Juster FSN logo i forhold til nytt bilde nivå */
.u-section-2 .u-image-13 {
  margin-top: -140px !important;
}

/* project modal overlay */
.project-modal{
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: none;
  font-family: "FieldGothicTEST-No.82", Arial, sans-serif;
}
.project-modal.is-open{
  display: block;
}
.project-modal__backdrop{
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.78);
}
.project-modal__panel{
  position: relative;
  width: min(1100px, calc(100vw - 48px));
  max-height: calc(100vh - 48px);
  margin: 24px auto;
  background: rgba(10,10,10,0.92);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 14px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.project-modal__close{
  position: absolute;
  top: 10px;
  right: 12px;
  z-index: 2;
  width: 42px;
  height: 42px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.18);
  background: rgba(0,0,0,0.35);
  color: #fff;
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
}
.project-modal__media{
  background: #000;
  position: relative;
}
.project-modal__video{
  width: 100%;
  height: auto;
  max-height: 60vh;
  display: block;
}

/* "Kommer snart" overlay for prosjekter uten video */
.coming-soon-overlay{
  position: absolute;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.55);
  color: #fff;
  font-family: "FieldGothicTEST-No.82", Arial, sans-serif;
  font-size: 28px;
  letter-spacing: 2px;
  text-align: center;
  pointer-events: none;
  z-index: 3;
}

.coming-soon-overlay.on{
  display: flex;
}
.project-modal__body{
  padding: 18px 22px 22px 22px;
  color: rgba(255,255,255,0.92);
}
.project-modal__title{
  margin: 0 0 6px 0;
  font-size: 28px;
  letter-spacing: 0.2px;
}
.project-modal__meta{
  font-size: 15px;
  opacity: 0.85;
  margin-bottom: 12px;
}
.project-modal__desc{
  margin: 0 0 16px 0;
  font-size: 16px;
  opacity: 0.92;
}
.project-modal__creditsTitle{
  margin: 0 0 8px 0;
  font-size: 16px;
  opacity: 0.9;
}
.project-modal__creditsList{
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 6px;
}
.project-modal__creditsList li{
  display: flex;
  gap: 10px;
  font-size: 15px;
  opacity: 0.88;
}
.project-modal__creditsRole{
  min-width: 180px;
  opacity: 0.75;
}
@media (max-width: 575px){
  .project-modal__panel{
    width: calc(100vw - 20px);
    margin: 10px auto;
    max-height: calc(100vh - 20px);
  }
  .project-modal__body{
    padding: 14px 14px 18px 14px;
  }
  .project-modal__title{
    font-size: 22px;
  }
  .project-modal__creditsRole{
    min-width: 130px;
  }
}
/* modal typography and scrolling fixes */
.project-modal__video{
  max-height: 55vh;
}

.project-modal__body{
  flex: 1;
  overflow: auto;
  padding: 14px 18px 18px 18px;
}

.project-modal__title{
  font-size: 22px;
  margin-bottom: 4px;
}

.project-modal__meta{
  font-size: 13px;
  margin-bottom: 10px;
}

.project-modal__desc{
  font-size: 13px;
  margin-bottom: 10px;
}

.project-modal__credits-title{
  font-size: 14px;
  margin-bottom: 8px;
}

.project-modal__credits-item{
  font-size: 13px;
}

/* make credits more compact */
.project-modal__credits-role{
  min-width: 120px;
  padding-right: 10px;
}

.project-modal__credits-list{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 28px;
}

/* mobile */
@media (max-width: 767px){
  .project-modal__video{
    max-height: 48vh;
  }

  .project-modal__credits-list{
    grid-template-columns: 1fr;
  }

  .project-modal__title{
    font-size: 20px;
  }
}
.passoverlay{
  position: fixed;
  inset: 0;
  z-index: 100000;
  display: none;
}

.passoverlay.on{
  display: block;
}

.passoverlay__backdrop{
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.65);
}

.passoverlay__panel{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(520px, calc(100vw - 48px));
  background: rgba(15,15,15,0.92);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 16px;
  padding: 22px;
  color: #fff;
}

.passoverlay__close{
  position: absolute;
  top: 10px;
  right: 12px;
  width: 38px;
  height: 38px;
  border-radius: 999px;
  background: rgba(0,0,0,0.25);
  border: 1px solid rgba(255,255,255,0.18);
  color: #fff;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}

.passoverlay__title{
  margin: 0 0 6px 0;
  font-size: 22px;
}

.passoverlay__hint{
  margin: 0 0 14px 0;
  opacity: 0.75;
  font-size: 14px;
}

.passoverlay__row{
  display: flex;
  gap: 10px;
}

.passoverlay__input{
  flex: 1;
  height: 44px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.18);
  background: rgba(0,0,0,0.35);
  color: #fff;
  padding: 0 12px;
  outline: none;
}

.passoverlay__btn{
  height: 44px;
  padding: 0 14px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.18);
  background: rgba(255,255,255,0.12);
  color: #fff;
  cursor: pointer;
}

.passoverlay__error{
  margin: 12px 0 0 0;
  font-size: 14px;
  color: #fff;
  opacity: 0;
}

.passoverlay__error.on{
  opacity: 1;
}.passoverlay{
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: none;
}

.passoverlay.on{
  display: block;
}

.passoverlay__backdrop{
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.65);
}

.passoverlay__panel{
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: min(520px, calc(100vw - 40px));
  background: rgba(15,15,15,0.95);
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 12px;
  padding: 18px;
  color: white;
}

.passoverlay__title{
  margin: 0 0 6px 0;
  font-size: 18px;
}

.passoverlay__text{
  margin: 0 0 12px 0;
  font-size: 14px;
  opacity: 0.85;
}

.passoverlay__input{
  width: 100%;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.16);
  color: white;
  border-radius: 10px;
  padding: 12px;
  font-size: 14px;
  outline: none;
}

.passoverlay__error{
  margin: 10px 0 0 0;
  font-size: 13px;
  color: #ffb4b4;
  display: none;
}

.passoverlay__error.on{
  display: block;
}

.passoverlay__actions{
  margin-top: 14px;
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

.passoverlay__btn{
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.16);
  color: white;
  border-radius: 10px;
  padding: 10px 12px;
  font-size: 13px;
  cursor: pointer;
}

.passoverlay__btnPrimary{
  background: rgba(255,255,255,0.18);
}.project-modal__media{
  position: relative;
}

.project-modal__lock{
  position: absolute;
  inset: 0;
  z-index: 5;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.45);
}

.project-modal__lock.on{
  display: flex;
}

.project-modal__unlockBtn{
  background: rgba(255,255,255,0.16);
  border: 1px solid rgba(255,255,255,0.22);
  color: #fff;
  border-radius: 12px;
  padding: 12px 14px;
  font-size: 14px;
  cursor: pointer;
}

.passoverlay{
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: none;
}

.passoverlay.on{
  display: block;
}

.passoverlay__backdrop{
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.65);
}

.passoverlay__panel{
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: min(520px, calc(100vw - 40px));
  background: rgba(15,15,15,0.95);
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 12px;
  padding: 18px;
  color: white;
}

.passoverlay__title{
  margin: 0 0 6px 0;
  font-size: 18px;
}

.passoverlay__text{
  margin: 0 0 12px 0;
  font-size: 14px;
  opacity: 0.85;
}

.passoverlay__input{
  width: 100%;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.16);
  color: white;
  border-radius: 10px;
  padding: 12px;
  font-size: 14px;
  outline: none;
}

.passoverlay__error{
  margin: 10px 0 0 0;
  font-size: 13px;
  color: #ffb4b4;
  display: none;
}

.passoverlay__error.on{
  display: block;
}

.passoverlay__actions{
  margin-top: 14px;
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

.passoverlay__btn{
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.16);
  color: white;
  border-radius: 10px;
  padding: 10px 12px;
  font-size: 13px;
  cursor: pointer;
}

.passoverlay__btnPrimary{
  background: rgba(255,255,255,0.18);
}
/* ─── MOBILE (≤767px) — single authoritative block ───────────────────────── */

/* Hidden on desktop, shown only on mobile */
.mobile-projects {
  display: none;
}

/* Hide mobile-only description on desktop */
.mobile-description {
  display: none;
}

@media (max-width: 767px) {

  html, body {
    overflow-x: hidden;
  }

  /* ── Section 2: let it flow normally ── */
  .u-section-2 .u-sheet-1 {
    min-height: auto !important;
    overflow: visible !important;
    padding-bottom: 80px;
  }

  /* ── Hide every desktop collage element ── */
  .u-section-2 .u-image-2,  .u-section-2 .u-image-3,
  .u-section-2 .u-image-4,  .u-section-2 .u-image-5,
  .u-section-2 .u-image-6,  .u-section-2 .u-image-7,
  .u-section-2 .u-image-8,  .u-section-2 .u-image-9,
  .u-section-2 .u-image-10, .u-section-2 .u-image-11,
  .u-section-2 .u-image-12, .u-section-2 .u-image-13,
  .u-section-2 .u-image-14, .u-section-2 .u-image-15,
  .u-section-2 .u-image-16, .u-section-2 .u-image-17,
  .u-section-2 .u-image-18, .u-section-2 .u-image-19,
  .u-section-2 .u-image-20, .u-section-2 .u-image-21,
  .u-section-2 .project-hit,
  .u-section-2 .u-text-1,  .u-section-2 .u-text-2,
  .u-section-2 .u-text-3,  .u-section-2 .u-text-4,
  .u-section-2 .u-text-5,  .u-section-2 .u-text-6,
  .u-section-2 .u-text-8,  .u-section-2 .u-text-9,
  .u-section-2 .u-text-10, .u-section-2 .u-text-11 {
    display: none !important;
  }

  /* ── Taket logo header ── */
  .u-section-2 .u-image-1 {
    width: 180px;
    height: auto;
    margin: 40px auto 0 auto;
    display: block;
  }

  /* ── Intro text ── */
  .u-section-2 .u-text-7 {
    width: calc(100vw - 48px);
    max-width: 460px;
    margin: 28px auto 0 auto;
    font-size: 0.95rem;
    line-height: 1.6;
    text-align: center;
    color: rgba(255,255,255,0.72);
  }

  /* ── Project feed ── */
  .mobile-projects {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    width: 100%;
    padding: 32px 20px 60px;
    box-sizing: border-box;
    margin: 0;
  }

  /* ── Project card ── */
  .mproj {
    display: block;
    position: relative;
    width: 100%;
    max-width: 480px;
    border-radius: 16px;
    overflow: hidden;
    text-decoration: none;
    background: #111;
    /* Tap feedback */
    transition: transform 0.18s ease, box-shadow 0.18s ease;
    -webkit-tap-highlight-color: transparent;
  }

  .mproj:active {
    transform: scale(0.975);
  }

  /* ── Film still: fixed 16:9 aspect ratio ── */
  .mproj__media {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    background: #0a0a0a;
    overflow: hidden;
  }

  .mproj__media img {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
    display: block !important;
    max-width: none !important;
  }

  /* ── Gradient overlay ── */
  .mproj__overlay {
    position: absolute;
    inset: 0;
    z-index: 3;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 14px 16px;
    background: linear-gradient(
      to bottom,
      rgba(0,0,0,0.30) 0%,
      rgba(0,0,0,0)    35%,
      rgba(0,0,0,0)    55%,
      rgba(0,0,0,0.72) 100%
    );
    pointer-events: none;
  }

  /* ── Category label — top left ── */
  .mproj__type {
    display: inline-block;
    font-family: "FieldGothicTEST-No.82", Arial, sans-serif;
    font-size: 13px;
    letter-spacing: 0.08em;
    color: rgba(255,255,255,0.88);
    text-transform: uppercase;
    align-self: flex-start;
  }

  /* ── Title logo — bottom left ── */
  .mproj__logo {
    display: block;
    width: auto;
    max-width: min(230px, 65%);
    height: auto;
    align-self: flex-start;
    filter: drop-shadow(0 2px 12px rgba(0,0,0,0.7));
  }

  /* ── Intro text — hidden on mobile (shown via .mobile-description instead) ── */
  .u-section-2 .u-text-7 {
    display: none !important;
  }

  /* ── Description text at bottom, above footer ── */
  .mobile-description {
    display: block !important;
    width: calc(100vw - 48px);
    max-width: 460px;
    margin: 32px auto 40px auto;
    font-size: 0.82rem !important;
    line-height: 1.6;
    text-align: center;
    color: rgba(255,255,255,0.60);
  }

  /* ── Hero video ── */
  .u-section-1 .u-sheet-1 {
    position: relative;
  }

  .u-section-1 .u-image-1.hero-video {
    width: calc(100vw - 28px) !important;
    height: 56vh !important;
    margin: 14px auto 0 auto !important;
    border-radius: 18px !important;
    object-fit: cover !important;
    display: block !important;
    overflow: hidden;
  }

  /* ── Hero CTA buttons ── */
  .u-section-1 .u-shape-1,
  .u-section-1 .u-text-1,
  .u-section-1 .u-shape-2,
  .u-section-1 .u-text-2 {
    position: absolute !important;
    margin: 0 !important;
    z-index: 10;
  }

  .u-section-1 .u-shape-2 {
    right: 22px !important;
    bottom: 76px !important;
    width: 122px !important;
    height: 44px !important;
  }
  .u-section-1 .u-text-2 {
    right: 32px !important;
    bottom: 84px !important;
    font-size: 1.7rem !important;
    line-height: 1 !important;
  }

  .u-section-1 .u-shape-1 {
    right: 22px !important;
    bottom: 20px !important;
    width: 160px !important;
    height: 48px !important;
  }
  .u-section-1 .u-text-1 {
    right: 32px !important;
    bottom: 28px !important;
    font-size: 1.7rem !important;
    line-height: 1 !important;
  }
}

.u-section-2 .u-image-19{
  height: 40px !important;
  width: auto !important;
  max-width: 450px;
}/* flytt MiniDesk logo mot høyre */
.u-section-2 .u-image-19{
  position: relative !important;
  left: -120px !important;
}

/* =============================================
   TAKET — SMOOTHNESS & POLISH UPGRADES
   ============================================= */

/* 1. Smooth scroll + font rendering */
html {
  scroll-behavior: smooth;
}
body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}



/* 3. Modal animation — fade + slide up */
.project-modal {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.32s ease;
}
.project-modal.is-open {
  opacity: 1;
  pointer-events: all;
}
.project-modal__panel {
  transform: translateY(28px);
  transition: transform 0.42s cubic-bezier(0.22, 1, 0.36, 1);
}
.project-modal.is-open .project-modal__panel {
  transform: translateY(0);
}

/* 4. Desktop collage — smooth transition on images */
.u-section-2 .u-image-2,
.u-section-2 .u-image-4,
.u-section-2 .u-image-6,
.u-section-2 .u-image-8,
.u-section-2 .u-image-10,
.u-section-2 .u-image-11,
.u-section-2 .u-image-12,
.u-section-2 .u-image-14,
.u-section-2 .u-image-16,
.u-section-2 .u-image-18,
.u-section-2 .u-image-20 {
  transition: transform 0.42s cubic-bezier(0.22, 1, 0.36, 1),
              filter 0.42s ease;
  will-change: transform;
}
.project-image-hover {
  transform: scale(1.03) !important;
  filter: brightness(1.1) !important;
}

/* Logo/title elements fade on hover */
.project-logo-hover {
  opacity: 0.7 !important;
  transition: opacity 0.3s ease !important;
}

/* 5. Scroll fade-in for mobile cards */
.fade-in-up {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.55s ease, transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}
.fade-in-up.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* 6. Lock hint overlay on video */
.project-modal__lock-hint {
  position: absolute;
  inset: 0;
  display: none; /* hidden by default — JS sets display:flex to show */
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  background: #000;
  color: white;
  font-family: "FieldGothicTEST-No.82", Arial, sans-serif;
  font-size: 1rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  pointer-events: all;
  cursor: pointer;
  z-index: 100;
  border-radius: 4px;
  transition: opacity 0.3s ease;
}

.project-modal__lock-hint.hidden {
  display: none;
}
/* Make media wrapper relative so lock hint positions correctly */
.project-modal__media {
  position: relative;
}

/* 7. Mobile card hover feel */
.mproj {
  transition: transform 0.28s ease, box-shadow 0.28s ease;
}
@media (hover: hover) {
  .mproj:hover {
    transform: scale(1.012);
    box-shadow: 0 8px 32px rgba(0,0,0,0.45);
  }
}

/* 8. Passoverlay smooth entrance */
.passoverlay {
  transition: opacity 0.25s ease;
  opacity: 0;
  pointer-events: none;
}
.passoverlay.on {
  opacity: 1;
  pointer-events: all;
}
.passoverlay__panel {
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
  transform: translateY(16px) scale(0.98);
}
.passoverlay.on .passoverlay__panel {
  transform: translateY(0) scale(1);
}



/* ─── MOBILE FIXES: modal close, password overlay ─────────────────────────── */

@media (max-width: 767px) {

  /* Larger, easier-to-tap close button */
  .project-modal__close {
    width: 52px !important;
    height: 52px !important;
    font-size: 32px !important;
    top: 8px !important;
    right: 8px !important;
    z-index: 20 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: rgba(0,0,0,0.65) !important;
    border: 1.5px solid rgba(255,255,255,0.3) !important;
  }

  /* Make modal panel scroll internally so close button stays visible */
  .project-modal__panel {
    display: flex !important;
    flex-direction: column !important;
    max-height: calc(100vh - 20px) !important;
    margin: 10px auto !important;
    overflow: hidden !important;
  }

  .project-modal__body {
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  /* Password overlay — stack vertically, stays on screen above keyboard */
  .passoverlay__panel {
    width: calc(100vw - 32px) !important;
    top: auto !important;
    bottom: 20px !important;
    left: 16px !important;
    transform: none !important;
    position: fixed !important;
    border-radius: 16px !important;
    padding: 20px !important;
  }

  .passoverlay.on .passoverlay__panel {
    transform: none !important;
  }

  .passoverlay__row {
    flex-direction: column !important;
    gap: 10px !important;
  }

  .passoverlay__input {
    width: 100% !important;
    box-sizing: border-box !important;
    height: 48px !important;
    font-size: 16px !important; /* prevents iOS zoom on focus */
  }

  .passoverlay__btn {
    width: 100% !important;
    height: 48px !important;
    font-size: 16px !important;
  }

  .passoverlay__close {
    width: 44px !important;
    height: 44px !important;
    font-size: 26px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
}

/* ── Standalone social icons (nicepage-independent) ── */
.taket-social-icons {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 40px;
  margin: 23px auto 0;
  width: 232px;
  height: 60px;
}

.taket-social-icons a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  opacity: 0.9;
  transition: opacity 0.2s ease;
}

.taket-social-icons a:hover {
  opacity: 1;
}