/* ==========================================================================
   Vikos Prosjekt - designsystem (utkast 2026)
   Referanse: snohetta.com / reiulframstadarkitekter.com
   Palett videreført fra eksisterende Vikos-profil (#294E7A / #F07E37 / #DDDAD8)
   ========================================================================== */

/* --- 1. Tokens ---------------------------------------------------------- */
:root{
  --ink:        #141719;
  --ink-80:     #3c4247;
  --ink-55:     #6e757b;
  --ink-35:     #9aa0a5;

  --paper:      #ffffff;
  --sand:       #F3F1ED;
  --sand-2:     #E8E4DD;
  --line:       #DAD6CF;
  --line-soft:  rgba(20,23,25,.10);

  --blue:       #294E7A;
  --blue-deep:  #1B3454;
  --orange:     #F07E37;

  --sans: "Inter Tight", "Avenir Next", Avenir, "Helvetica Neue", Helvetica, Arial, sans-serif;
  --serif: "Instrument Serif", "Times New Roman", Times, serif;

  --pad:  clamp(20px, 4.6vw, 76px);
  --gap:  clamp(16px, 2vw, 34px);
  --max:  1680px;

  --hdr:  clamp(66px, 7vw, 92px);

  --ease: cubic-bezier(.22,.61,.36,1);
}

/* --- 2. Reset / base ---------------------------------------------------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  margin:0;
  font-family:var(--sans);
  font-size:clamp(1rem,.96rem + .22vw,1.12rem);
  line-height:1.62;
  font-weight:400;
  color:var(--ink);
  background:var(--paper);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img,svg{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
h1,h2,h3,h4,p,figure,dl,dd{ margin:0; }
ul,ol{ margin:0; padding:0; list-style:none; }
::selection{ background:var(--blue); color:#fff; }
:focus-visible{ outline:2px solid var(--blue); outline-offset:3px; }

/* --- 3. Typografi ------------------------------------------------------- */
.display{
  font-size:clamp(2.7rem, 7.4vw, 7.2rem);
  line-height:.94;
  font-weight:300;
  letter-spacing:-.035em;
}
.h1{ font-size:clamp(2rem, 4.6vw, 4.4rem); line-height:1.02; font-weight:300; letter-spacing:-.03em; }
.h2{ font-size:clamp(1.55rem, 2.9vw, 2.7rem); line-height:1.1;  font-weight:300; letter-spacing:-.024em; }
.h3{ font-size:clamp(1.15rem, 1.5vw, 1.45rem); line-height:1.25; font-weight:400; letter-spacing:-.012em; }

.lead{
  font-size:clamp(1.18rem, 1.05rem + .78vw, 1.95rem);
  line-height:1.36; font-weight:300; letter-spacing:-.018em;
}
.serif{ font-family:var(--serif); font-weight:400; letter-spacing:-.01em; }

.label{
  font-size:.7rem; text-transform:uppercase; letter-spacing:.16em;
  font-weight:500; color:var(--ink-55);
}
.muted{ color:var(--ink-55); }
.measure{ max-width:62ch; }
.measure-sm{ max-width:46ch; }
.mt-s{ margin-top:14px; } .mt-m{ margin-top:26px; } .mt-l{ margin-top:clamp(28px,4vw,56px); }

/* Understreket lenke som tegner seg inn */
.ulink{ position:relative; display:inline-block; }
.ulink::after{
  content:""; position:absolute; left:0; right:0; bottom:-2px; height:1px;
  background:currentColor; transform:scaleX(0); transform-origin:right;
  transition:transform .5s var(--ease);
}
.ulink:hover::after{ transform:scaleX(1); transform-origin:left; }

/* Pil-lenke */
.arrow{ display:inline-flex; align-items:baseline; gap:.6em; font-size:.95rem; }
.arrow em{ font-style:normal; transition:transform .45s var(--ease); }
.arrow:hover em{ transform:translateX(.35em); }

/* --- 4. Layout ---------------------------------------------------------- */
.wrap{ width:100%; max-width:var(--max); margin-inline:auto; padding-inline:var(--pad); }
.section{ padding-block:clamp(64px, 9vw, 160px); }
.section--tight{ padding-block:clamp(44px, 5.5vw, 90px); }
.sand{ background:var(--sand); }
.dark{ background:var(--ink); color:var(--paper); }
.dark .label,.dark .muted{ color:rgba(255,255,255,.6); }
.rule{ height:1px; background:var(--line); border:0; margin:0; }

.grid{ display:grid; gap:var(--gap); grid-template-columns:repeat(12,1fr); }
.col-4{ grid-column:span 4; } .col-5{ grid-column:span 5; }
.col-6{ grid-column:span 6; } .col-7{ grid-column:span 7; }
.col-8{ grid-column:span 8; } .col-12{ grid-column:span 12; }
.start-7{ grid-column-start:7; } .start-6{ grid-column-start:6; }
@media (max-width:900px){
  .col-4,.col-5,.col-6,.col-7,.col-8{ grid-column:span 12; }
  .start-7,.start-6{ grid-column-start:1; }
}

/* Seksjonsoverskrift med hårstrek */
.sechead{
  display:flex; justify-content:space-between; align-items:baseline; gap:var(--gap);
  padding-bottom:18px; border-bottom:1px solid var(--line); margin-bottom:clamp(28px,4vw,60px);
}
.dark .sechead{ border-color:rgba(255,255,255,.18); }

/* --- 5. Header ---------------------------------------------------------- */
.hdr{
  position:fixed; inset:0 0 auto 0; z-index:80;
  height:var(--hdr); display:flex; align-items:center;
  transition:background .45s var(--ease), color .45s var(--ease), border-color .45s var(--ease);
  border-bottom:1px solid transparent;
}
.hdr__in{ width:100%; max-width:var(--max); margin-inline:auto; padding-inline:var(--pad);
  display:flex; align-items:center; justify-content:space-between; gap:var(--gap); }
.hdr__logo img{ height:clamp(22px,2.3vw,28px); width:auto; }
.hdr__logo .lg-dark{ display:none; }

.nav{ display:flex; align-items:center; gap:clamp(16px,2vw,32px); }
.nav a{ font-size:.86rem; position:relative; padding-block:6px; }
.nav a::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:1px; background:currentColor;
  transform:scaleX(0); transform-origin:right; transition:transform .45s var(--ease);
}
.nav a:hover::after,.nav a[aria-current="page"]::after{ transform:scaleX(1); transform-origin:left; }

.hdr--over{ color:#fff; }
.hdr--solid{ background:rgba(255,255,255,.88); backdrop-filter:blur(14px) saturate(1.4);
  color:var(--ink); border-bottom-color:var(--line-soft); }
.hdr--solid .lg-white{ display:none; }
.hdr--solid .lg-dark{ display:block; }

/* Når fullskjermmenyen er åpen skal headeren alltid være lys på mørk bunn */
body.menu-open .hdr{ background:transparent; backdrop-filter:none; color:#fff; border-bottom-color:transparent; }
body.menu-open .hdr .lg-white{ display:block; }
body.menu-open .hdr .lg-dark{ display:none; }

.burger{ display:none; width:34px; height:34px; position:relative; }
.burger i{ position:absolute; left:4px; right:4px; height:1.5px; background:currentColor;
  transition:transform .4s var(--ease); }
.burger i:nth-child(1){ top:13px; } .burger i:nth-child(2){ top:21px; }
body.menu-open .burger{ color:#fff; }
body.menu-open .burger i:nth-child(1){ transform:translateY(4px) rotate(45deg); }
body.menu-open .burger i:nth-child(2){ transform:translateY(-4px) rotate(-45deg); }

@media (max-width:920px){
  .nav{ display:none; }
  .burger{ display:block; }
}
/* Uten JavaScript virker ikke fullskjermmenyen - vis lenkene i stedet */
html:not(.js) .burger{ display:none; }
@media (max-width:920px){
  html:not(.js) .nav{ display:flex; flex-wrap:wrap; justify-content:flex-end; gap:4px 14px; }
  html:not(.js) .hdr{ position:absolute; height:auto; padding-block:12px;
    background:rgba(255,255,255,.9); color:var(--ink); }
  html:not(.js) .hdr .lg-white{ display:none; } html:not(.js) .hdr .lg-dark{ display:block; }
}

/* Fullskjerm-meny */
.menu{
  position:fixed; inset:0; z-index:70; background:var(--ink); color:#fff;
  display:flex; flex-direction:column; justify-content:center;
  padding:var(--hdr) var(--pad) var(--pad);
  clip-path:inset(0 0 100% 0); transition:clip-path .7s var(--ease); pointer-events:none;
}
body.menu-open .menu{ clip-path:inset(0 0 0 0); pointer-events:auto; }
body.menu-open{ overflow:hidden; }
.menu nav a{ display:block; font-size:clamp(1.8rem,7vw,3.2rem); font-weight:300;
  letter-spacing:-.03em; line-height:1.24; opacity:0; transform:translateY(18px);
  transition:opacity .5s var(--ease), transform .5s var(--ease); }
body.menu-open .menu nav a{ opacity:1; transform:none; }
.menu nav a:nth-child(1){ transition-delay:.10s } .menu nav a:nth-child(2){ transition-delay:.15s }
.menu nav a:nth-child(3){ transition-delay:.20s } .menu nav a:nth-child(4){ transition-delay:.25s }
.menu nav a:nth-child(5){ transition-delay:.30s } .menu nav a:nth-child(6){ transition-delay:.35s }
.menu nav a:nth-child(7){ transition-delay:.40s } .menu nav a:nth-child(8){ transition-delay:.45s }
.menu__foot{ margin-top:auto; padding-top:30px; border-top:1px solid rgba(255,255,255,.18);
  display:flex; flex-wrap:wrap; gap:8px 28px; font-size:.86rem; color:rgba(255,255,255,.65); }

/* --- 6. Hero ------------------------------------------------------------ */
.hero{ position:relative; min-height:100svh; display:flex; align-items:flex-end;
  color:#fff; overflow:hidden; background:var(--ink); }
.hero__media{ position:absolute; inset:0; }
.hero__media img{ width:100%; height:100%; object-fit:cover; object-position:center 40%;
  transform:scale(1.07); animation:heroIn 3s var(--ease) forwards; }
@keyframes heroIn{ to{ transform:scale(1); } }
.hero__media::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(10,12,14,.52) 0%, rgba(10,12,14,.10) 32%, rgba(10,12,14,.28) 60%, rgba(10,12,14,.80) 100%);
}
.hero__in{ position:relative; z-index:2; width:100%; padding-bottom:clamp(40px,7vh,92px); }
.hero .display{ max-width:15ch; text-wrap:balance; }
.hero__meta{ display:flex; flex-wrap:wrap; gap:10px 28px; margin-top:clamp(20px,3vw,34px);
  padding-top:20px; border-top:1px solid rgba(255,255,255,.28); }
.hero__meta .label{ color:rgba(255,255,255,.78); }

.hero--page{ min-height:clamp(56svh,60vw,78svh); }
.hero--flat{ min-height:auto; background:var(--paper); color:var(--ink); display:block;
  padding-top:calc(var(--hdr) + clamp(52px,9vw,140px)); padding-bottom:clamp(36px,5vw,74px); }

.scrollcue{ position:absolute; right:var(--pad); bottom:clamp(40px,7vh,92px); z-index:2;
  writing-mode:vertical-rl; font-size:.66rem; letter-spacing:.2em; text-transform:uppercase;
  color:rgba(255,255,255,.75); display:flex; align-items:center; gap:12px; }
.scrollcue::after{ content:""; width:1px; height:56px; background:rgba(255,255,255,.5);
  transform-origin:top; animation:cue 2.6s var(--ease) infinite; }
@keyframes cue{ 0%{transform:scaleY(.15)} 45%{transform:scaleY(1)} 100%{transform:scaleY(.15)} }
@media (max-width:920px){ .scrollcue{ display:none; } }

/* --- 7. Prosjektindeks -------------------------------------------------- */
.index{ border-top:1px solid var(--line); }
.index__row{
  display:grid; grid-template-columns:4.5rem 1fr 13rem 10rem; align-items:center; gap:var(--gap);
  padding:clamp(18px,2.4vw,30px) 0; border-bottom:1px solid var(--line);
  transition:padding-left .55s var(--ease);
}
.index__row:hover{ padding-left:clamp(8px,1.4vw,26px); }
.index__row .no{ font-size:.74rem; letter-spacing:.1em; color:var(--ink-35); }
.index__row .ttl{ font-size:clamp(1.3rem,2.6vw,2.3rem); font-weight:300; letter-spacing:-.026em; line-height:1.08; }
.index__row .typ,.index__row .st{ font-size:.82rem; color:var(--ink-55); }
.index__row .st{ text-align:right; }
@media (max-width:820px){
  .index__row{ grid-template-columns:2.6rem 1fr; row-gap:4px; }
  .index__row .typ{ grid-column:2; } .index__row .st{ grid-column:2; text-align:left; }
}
.peek{
  position:fixed; top:0; left:0; width:min(24vw,320px); aspect-ratio:3/4; z-index:60;
  pointer-events:none; opacity:0; transform:translate(-50%,-50%) scale(.94);
  transition:opacity .4s var(--ease), transform .55s var(--ease); overflow:hidden;
}
.peek img{ width:100%; height:100%; object-fit:cover; }
.peek.on{ opacity:1; transform:translate(-50%,-50%) scale(1); }
@media (max-width:1000px), (hover:none){ .peek{ display:none; } }

/* Statusprikk */
.dot{ display:inline-block; width:6px; height:6px; border-radius:50%; margin-right:.55em;
  background:var(--ink-35); vertical-align:middle; }
.dot--bygging{ background:var(--orange); }
.dot--utvikling{ background:var(--blue); }
.dot--ferdig{ background:var(--ink-35); }

/* --- 8. Prosjektkort ---------------------------------------------------- */
.cards{ display:grid; gap:clamp(28px,4vw,72px) var(--gap); grid-template-columns:repeat(2,1fr); }
@media (max-width:820px){ .cards{ grid-template-columns:1fr; } }
.card__media{ position:relative; overflow:hidden; aspect-ratio:4/5; background:var(--sand-2); }
.card--wide .card__media{ aspect-ratio:16/10; }
.card__media img{ width:100%; height:100%; object-fit:cover; transition:transform 1.1s var(--ease); }
.card:hover .card__media img{ transform:scale(1.045); }
.card__body{ display:flex; justify-content:space-between; align-items:baseline; gap:var(--gap);
  padding-top:16px; margin-top:16px; border-top:1px solid var(--line); }
.card__ttl{ font-size:clamp(1.2rem,1.9vw,1.7rem); font-weight:300; letter-spacing:-.022em; }
.card__meta{ font-size:.8rem; color:var(--ink-55); text-align:right; white-space:nowrap; }

/* --- 9. Fakta / nøkkeltall ---------------------------------------------- */
.facts{ display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  border-top:1px solid var(--line); }
.facts > div{ padding:22px var(--gap) 22px 0; border-bottom:1px solid var(--line); }
.facts dt{ font-size:.7rem; text-transform:uppercase; letter-spacing:.16em; color:var(--ink-55); margin-bottom:8px; }
.facts dd{ font-size:clamp(1.02rem,1.4vw,1.3rem); font-weight:300; letter-spacing:-.015em; line-height:1.3; }

.stats{ display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:var(--gap); }
.stats .n{ font-size:clamp(2.1rem,4.2vw,3.6rem); font-weight:300; letter-spacing:-.04em; line-height:1; }
.stats .t{ font-size:.86rem; color:var(--ink-55); margin-top:12px; max-width:26ch; }
.dark .stats .t{ color:rgba(255,255,255,.6); }

/* --- 10. Liste med hårstrek --------------------------------------------- */
.hairlist{ border-top:1px solid var(--line); }
.hairlist li{ border-bottom:1px solid var(--line); }
.hairlist a,.hairlist .row{ display:flex; align-items:baseline; justify-content:space-between;
  gap:var(--gap); padding:clamp(14px,1.8vw,22px) 0; transition:padding-left .5s var(--ease); }
.hairlist a:hover{ padding-left:14px; }
.hairlist .t{ font-size:clamp(1.05rem,1.7vw,1.5rem); font-weight:300; letter-spacing:-.02em; }
.hairlist .d{ font-size:.86rem; color:var(--ink-55); max-width:44ch; text-align:right; }
.dark .hairlist,.dark .hairlist li{ border-color:rgba(255,255,255,.18); }
.dark .hairlist .d{ color:rgba(255,255,255,.6); }

/* --- 11. Menneskene ----------------------------------------------------- */
.people{ display:grid; gap:clamp(26px,3vw,48px) var(--gap); grid-template-columns:repeat(4,1fr); }
@media (max-width:1100px){ .people{ grid-template-columns:repeat(3,1fr); } }
@media (max-width:760px){  .people{ grid-template-columns:repeat(2,1fr); } }
.person__media{ position:relative; overflow:hidden; aspect-ratio:4/5; background:var(--sand-2); }
.person__media img{ width:100%; height:100%; object-fit:cover; object-position:center 20%;
  filter:grayscale(1) contrast(1.02); transition:filter .8s var(--ease), transform 1.1s var(--ease); }
.person:hover .person__media img{ filter:grayscale(0); transform:scale(1.04); }
.person__name{ font-size:clamp(1rem,1.2vw,1.18rem); font-weight:400; letter-spacing:-.015em; margin-top:14px; }
.person__role{ font-size:.82rem; color:var(--ink-55); margin-top:2px; }
.person__bio{ font-size:.88rem; color:var(--ink-80); margin-top:14px; line-height:1.55; }
.person__contact{ margin-top:12px; font-size:.84rem; display:flex; flex-direction:column; gap:3px; color:var(--ink-55); }

/* --- 12. Sitat / manifest ----------------------------------------------- */
.quote{ font-family:var(--serif); font-weight:400;
  font-size:clamp(1.7rem, 4.2vw, 3.9rem); line-height:1.1; letter-spacing:-.02em; max-width:19ch; }
.quote--wide{ max-width:27ch; }

/* --- 13. Bildeband ------------------------------------------------------ */
.band img{ width:100%; height:clamp(280px,52vw,720px); object-fit:cover; }
.band figcaption{ padding-top:14px; font-size:.8rem; color:var(--ink-55); }

.duo{ display:grid; grid-template-columns:1fr 1fr; gap:var(--gap); }
@media (max-width:820px){ .duo{ grid-template-columns:1fr; } }
.duo img{ width:100%; aspect-ratio:4/3; object-fit:cover; }

/* --- 14. Kontakt-CTA ---------------------------------------------------- */
.cta .big{ font-size:clamp(2rem,6.2vw,5.4rem); font-weight:300; letter-spacing:-.035em; line-height:1.02; }

/* --- 15. Footer --------------------------------------------------------- */
.ftr{ background:var(--ink); color:rgba(255,255,255,.82); padding-block:clamp(48px,6vw,86px); }
.ftr a:hover{ color:#fff; }
.ftr__grid{ display:grid; grid-template-columns:2fr 1fr 1fr 1.2fr; gap:clamp(28px,3vw,48px); }
@media (max-width:900px){ .ftr__grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .ftr__grid{ grid-template-columns:1fr; } }
.ftr__logo img{ height:28px; width:auto; margin-bottom:20px; }
.ftr h4{ font-size:.7rem; text-transform:uppercase; letter-spacing:.16em; font-weight:500;
  color:rgba(255,255,255,.45); margin-bottom:16px; }
.ftr li{ margin-bottom:8px; font-size:.92rem; }
.ftr__bot{ display:flex; flex-wrap:wrap; justify-content:space-between; gap:12px 28px;
  margin-top:clamp(40px,5vw,72px); padding-top:22px; border-top:1px solid rgba(255,255,255,.16);
  font-size:.78rem; color:rgba(255,255,255,.45); }

/* --- 16. Scroll-avdekking ----------------------------------------------- */
/* Innholdet er synlig som standard. Bare naar JavaScript er aktivt skjules
   det for a kunne tones inn - slik at siden aldri blir tom om skriptet feiler. */
.rv{ transition:opacity .9s var(--ease), transform .9s var(--ease); }
html.js .rv{ opacity:0; transform:translateY(26px); }
html.js .rv.in{ opacity:1; transform:none; }
.rv-2{ transition-delay:.09s } .rv-3{ transition-delay:.18s } .rv-4{ transition-delay:.27s }

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.01ms !important; transition-duration:.01ms !important; }
  .rv{ opacity:1; transform:none; }
  html{ scroll-behavior:auto; }
}

/* --- 17. Utkastmerke (fjernes ved lansering) ---------------------------- */
.draftbar{ position:fixed; right:14px; bottom:14px; z-index:90;
  background:var(--ink); color:#fff; font-size:.66rem; letter-spacing:.12em; text-transform:uppercase;
  padding:9px 13px; opacity:.8; }
.draftbar:hover{ opacity:1; }