/* ══════════════════════════════════════════════════════════
   Idéhus Ålesund — v2
   Kjedens rødfarge (#c60c28) er beholdt som signal, men uttrykket
   er modernisert: én grotesk (Inter) i store grader med stram
   knipning, hvit grunn, og fotografiene som varmen i designet.
   Ingen serif — den var det som fikk v1 til å føles gammeldags.
   ══════════════════════════════════════════════════════════ */

@font-face{
  font-family:'Inter';src:url('/assets/fonts/inter-var-latin.woff2') format('woff2');
  font-weight:100 900;font-style:normal;font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215;
}
@font-face{
  font-family:'Inter';src:url('/assets/fonts/inter-var-latin-ext.woff2') format('woff2');
  font-weight:100 900;font-style:normal;font-display:swap;
  unicode-range:U+0100-02BA,U+02BD-02C5,U+1E00-1E9F,U+2C60-2C7F,U+A720-A7FF;
}

:root{
  --blekk:#12110f;
  --blekk-2:#2a2724;
  --grafitt:#5f5a55;
  --grafitt-2:#8a837c;
  --rod:#c60c28;
  --rod-m:#a8091f;
  --petrol:#2f6f70;
  --gronn:#2e7d52;
  --papir:#fff;
  --sand:#f5f3ef;
  --sand-2:#ebe7e0;
  --dis:#eaf0f0;
  --strek:rgba(18,17,15,.12);
  --strek-2:rgba(18,17,15,.07);
  --strek-lys:rgba(255,255,255,.16);

  --sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --wrap:1280px;
  --gutt:clamp(20px,4.5vw,56px);
  --luft:clamp(68px,8.5vw,124px);
  --r:10px;
  --r-s:6px;
  --ease:cubic-bezier(.22,.61,.36,1);
  --skygge:0 1px 2px rgba(18,17,15,.05),0 8px 28px rgba(18,17,15,.07);
  --skygge-h:0 2px 6px rgba(18,17,15,.07),0 18px 46px rgba(18,17,15,.13);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:88px}
body{
  margin:0;background:var(--papir);color:var(--blekk);
  font-family:var(--sans);font-size:17px;line-height:1.62;font-weight:400;
  letter-spacing:-.005em;-webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{margin:0;font-weight:600;line-height:1.06;letter-spacing:-.032em}
h1{font-size:clamp(2.6rem,6vw,5.1rem);letter-spacing:-.042em}
h2{font-size:clamp(1.9rem,3.7vw,3.05rem)}
h3{font-size:clamp(1.15rem,1.7vw,1.4rem);letter-spacing:-.022em;line-height:1.2}
h4{font-size:1rem;letter-spacing:-.01em}
p{margin:0 0 1.05em}
p:last-child{margin-bottom:0}
::selection{background:var(--rod);color:#fff}
:focus-visible{outline:2.5px solid var(--rod);outline-offset:3px;border-radius:2px}

.wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding-inline:var(--gutt)}
.skip{position:absolute;left:-9999px;top:0;z-index:200;background:var(--blekk);color:#fff;padding:12px 20px}
.skip:focus{left:0}

/* ── Typografiske hjelpere ─────────────────────────────── */
.stikk{
  font-size:12.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  color:var(--rod);margin:0 0 16px;display:flex;align-items:center;gap:10px;
}
.stikk::before{content:'';width:22px;height:2px;background:var(--rod);flex:none;border-radius:2px}
.stikk--lys{color:#fff}
.ingress{font-size:clamp(1.04rem,1.35vw,1.19rem);line-height:1.58;color:var(--grafitt);max-width:62ch}
.seksjon--mork .ingress{color:rgba(255,255,255,.7)}
.midt{text-align:center;margin-inline:auto}
.midt .stikk{justify-content:center}

.merkelapp{
  display:inline-flex;align-items:center;padding:5px 11px;border-radius:100px;
  background:var(--sand-2);color:var(--blekk-2);
  font-size:12px;font-weight:600;letter-spacing:.01em;white-space:nowrap;
}
.merkelapp--gronn{background:rgba(46,125,82,.13);color:var(--gronn)}
.merkelapp--rod{background:rgba(198,12,40,.1);color:var(--rod)}

/* ── Knapper ───────────────────────────────────────────── */
.knapp{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  background:var(--rod);color:#fff;border:1.5px solid var(--rod);
  padding:14px 26px;border-radius:100px;cursor:pointer;
  font-family:var(--sans);font-size:15px;font-weight:600;letter-spacing:-.005em;
  transition:background .22s var(--ease),border-color .22s var(--ease),transform .22s var(--ease),box-shadow .22s var(--ease);
}
.knapp:hover{background:var(--rod-m);border-color:var(--rod-m);transform:translateY(-2px);box-shadow:0 10px 24px rgba(198,12,40,.24)}
.knapp:active{transform:translateY(0)}
.knapp--liten{padding:10px 18px;font-size:14px}
.knapp--full{width:100%}
.knapp--linje{background:transparent;color:var(--blekk);border-color:var(--strek)}
.knapp--linje:hover{background:var(--blekk);border-color:var(--blekk);color:#fff;box-shadow:none}
.knapp--klar{background:transparent;color:#fff;border-color:rgba(255,255,255,.4)}
.knapp--klar:hover{background:#fff;border-color:#fff;color:var(--blekk);box-shadow:none}

/* ── Topp ──────────────────────────────────────────────── */
.topp{
  position:sticky;top:0;z-index:100;background:rgba(255,255,255,.86);
  backdrop-filter:saturate(180%) blur(16px);-webkit-backdrop-filter:saturate(180%) blur(16px);
  border-bottom:1px solid transparent;transition:border-color .3s var(--ease),box-shadow .3s var(--ease);
}
.topp.er-limt{border-bottom-color:var(--strek-2);box-shadow:0 1px 20px rgba(18,17,15,.05)}
.topp__rad{display:flex;align-items:center;gap:26px;height:80px}
.merke{display:flex;align-items:baseline;gap:7px;flex:none}
.merke__navn{font-size:23px;font-weight:700;color:var(--rod);letter-spacing:-.035em}
.merke__sted{font-size:10.5px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--blekk)}

.nav{display:flex;gap:4px;margin-left:auto}
.nav a{
  font-size:14.5px;font-weight:500;color:var(--blekk-2);padding:9px 14px;border-radius:100px;
  transition:background .2s var(--ease),color .2s var(--ease);
}
.nav a:hover{background:var(--sand);color:var(--blekk)}
.nav a[aria-current="page"]{color:var(--rod);background:rgba(198,12,40,.07)}

.topp__handling{display:flex;align-items:center;gap:14px;flex:none}
.tlf{font-size:14.5px;font-weight:600;white-space:nowrap}
.tlf:hover{color:var(--rod)}
.meny-knapp{display:none;width:44px;height:44px;background:none;border:1px solid var(--strek);border-radius:100px;cursor:pointer;padding:0;place-items:center}
.meny-knapp span{display:block;width:17px;height:1.8px;background:var(--blekk);margin:3.5px auto;border-radius:2px;transition:.26s var(--ease)}
.meny-knapp[aria-expanded="true"] span:first-child{transform:translateY(5.3px) rotate(45deg)}
.meny-knapp[aria-expanded="true"] span:last-child{transform:translateY(-5.3px) rotate(-45deg)}

/* ── Seksjoner ─────────────────────────────────────────── */
.seksjon{padding-block:var(--luft)}
.seksjon--sand{background:var(--sand)}
.seksjon--mork{background:var(--blekk);color:#fff}
.seksjon--mork h2,.seksjon--mork h3{color:#fff}
.seksjon--tett{padding-block:clamp(52px,6vw,84px)}
.seksjon__topp{max-width:760px;margin-bottom:clamp(38px,4.5vw,60px)}
.seksjon__topp h2{margin-bottom:16px}
.seksjon__hode{display:flex;align-items:flex-end;justify-content:space-between;gap:28px;flex-wrap:wrap;margin-bottom:clamp(34px,4vw,54px)}
.seksjon__hode .seksjon__topp{margin-bottom:0}

/* ── Hero (delt) ───────────────────────────────────────── */
.hero{position:relative;background:var(--blekk);color:#fff;overflow:hidden}
.hero__rutenett{display:grid;grid-template-columns:minmax(0,1.38fr) minmax(0,1fr);align-items:stretch;min-height:min(80vh,720px)}
.hero__tekst{display:flex;flex-direction:column;justify-content:center;padding:clamp(56px,7vw,96px) clamp(20px,4.5vw,56px) clamp(56px,7vw,96px) max(var(--gutt),calc((100vw - var(--wrap))/2 + var(--gutt)));}
.hero__tekst h1{margin-bottom:20px;letter-spacing:-.05em;font-size:clamp(2.7rem,5.3vw,5.2rem);line-height:1.0;white-space:nowrap}
.hero__tekst .ingress{color:rgba(255,255,255,.78);max-width:44ch}
.hero__knapper{display:flex;flex-wrap:wrap;gap:12px;margin-top:34px}
/* Egen bakgrunn mens bildet lastes. Uten den er feltet helt svart fram
   til bildet maler, og det leser som at siden er ødelagt — særlig på
   mobil der bildet ligger øverst. */
.hero__media{position:relative;overflow:hidden;min-height:340px;background:#2b2a27}
.hero__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scale(1.06);animation:heroInn 1.5s var(--ease) forwards}
@keyframes heroInn{to{transform:scale(1)}}
.hero__media::after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,rgba(18,17,15,.5),transparent 34%)}

/* Lys hero. Den mørke varianten er beholdt til prosjektsidene, der et
   fotografi tåler svart bakgrunn. På forsiden ble helsvart for hardt. */
.hero--lys{background:var(--sand);color:var(--blekk)}
.hero--lys .hero__tekst .stikk{color:var(--rod)}
.hero--lys .hero__tekst .ingress{color:var(--grafitt)}
.hero--lys .hero__media::after{background:linear-gradient(90deg,rgba(245,243,239,.75),transparent 26%)}
.hero--lys .hero__media{background:var(--sand-2)}
.hero--lys .hero__strimmel{border-top-color:var(--strek);background:transparent}
.hero--lys .strimmel b{color:var(--blekk)}
.hero--lys .strimmel span{color:var(--grafitt)}
.hero--lys .knapp--klar{color:var(--blekk);border-color:var(--strek)}
.hero--lys .knapp--klar:hover{background:var(--blekk);border-color:var(--blekk);color:#fff}
.hero--lys h1{text-shadow:none}

.hero__strimmel{border-top:1px solid var(--strek-lys)}
.strimmel{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;padding-block:24px}
.strimmel>div{min-width:0}
.strimmel b{display:block;font-size:clamp(1.4rem,2.2vw,1.85rem);font-weight:600;letter-spacing:-.03em;line-height:1.1}
.strimmel span{font-size:12.5px;color:rgba(255,255,255,.58)}

/* ── Tre spor ──────────────────────────────────────────── */
.spor{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.spor__kort{
  display:flex;flex-direction:column;background:var(--papir);border:1px solid var(--strek-2);
  border-radius:var(--r);padding:clamp(26px,2.8vw,36px);min-width:0;
  transition:transform .3s var(--ease),box-shadow .3s var(--ease),border-color .3s var(--ease);
}
.spor__kort:hover{transform:translateY(-4px);box-shadow:var(--skygge-h);border-color:transparent}
/* Nummeret var en rød sirkel — det leser som et onboarding-steg i en
   SaaS-app, ikke som en boligutvikler. Nå er det et tall over en hårstrek. */
.spor__nr{
  display:block;color:var(--rod);font-size:13px;font-weight:600;
  letter-spacing:.1em;font-variant-numeric:tabular-nums;
  padding-bottom:14px;margin-bottom:20px;border-bottom:1px solid var(--strek-2);
}
.spor__kort--flat{border-color:var(--strek-lys);background:transparent}
.spor__kort--flat:hover{transform:none;box-shadow:none;border-color:rgba(255,255,255,.32)}
.seksjon--mork .spor__kort{background:transparent;border-color:var(--strek-lys)}
.seksjon--mork .spor__kort p{color:rgba(255,255,255,.66)}
.seksjon--mork .spor__nr{border-bottom-color:var(--strek-lys)}
/* Strektegninger, håndskrevet SVG. Generative bilder driver i stil mellom
   hvert bilde — tre ikoner ville ikke matchet hverandre. Her arver de
   linjefargen fra teksten, så de virker i både lys og mørk seksjon. */
.spor__ikon{
  display:block;width:64px;height:48px;margin:0 0 16px;
  fill:none;stroke:currentColor;stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round;
  transition:transform .3s var(--ease);
}
.spor__kort:hover .spor__ikon{transform:translateY(-2px)}
.spor__kort h3{margin-bottom:10px}
.spor__kort p{color:var(--grafitt);font-size:15.5px;flex:1}
.spor__lenke{margin-top:20px;font-size:14.5px;font-weight:600;color:var(--rod);display:inline-flex;align-items:center;gap:7px}
.spor__lenke::after{content:'→';transition:transform .22s var(--ease)}
.spor__kort:hover .spor__lenke::after{transform:translateX(4px)}

/* ── Editorielt bånd ───────────────────────────────────── */
/* Et fullbredde bilde som bryter rytmen av seksjoner. Uten et slikt
   pusterom får siden samme takt hele veien ned, og det er mye av det
   som får et nettsted til å føles som en mal. */
/* Egen mørk bunn: bildet er lazy, og uten en bakgrunn her blir feltet en
   utvasket grå boks til det har lastet. Samme grunn som på .hero__media. */
/* To bilder side om side i stedet for ett bredt. Ett fullbredde-bilde ble
   beskaaret til ~3.9:1 mot kildens 2.1 — bygget ble da skaaret gjennom paa
   midten og saa oedelagt ut. To paneler ligger naer kildeforholdet, og vi
   faar vist dobbelt saa mye faktisk arbeid. */
/* Utsagnsseksjon, ikke bildebaand.
   Baandet var et letterbox-format som ingen av bildene passet i: bygget
   ble skaaret gjennom paa midten, flyfotoet viste utsikt og ikke hus, og
   to paneler leste som en sammenligning. Formatet var problemet, ikke
   bildevalget. Siden har rikelig med foto fra foer (hero, prosjektkort,
   modellkort), saa denne seksjonen gjoer jobben sin med typografi. */
.band{
  background:var(--blekk);color:#fff;
  padding-block:clamp(64px,9vw,120px);
}
.band__innhold{padding:0}
.band__innhold .wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gutt)}
.band__sitat{
  font-size:clamp(1.7rem,4vw,3.2rem);font-weight:600;letter-spacing:-.038em;
  line-height:1.12;max-width:20ch;margin:0;text-wrap:balance;
}
.band__sitat::before{
  content:'';display:block;width:38px;height:3px;background:var(--rod);
  border-radius:2px;margin-bottom:26px;
}

/* ── Tallrad ───────────────────────────────────────────── */
.tallrad{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,180px),1fr));
  gap:24px;border-top:1px solid var(--strek);padding-top:30px;
}
.tallrad>div{min-width:0}
.tallrad b{
  display:block;font-size:clamp(1.7rem,3vw,2.5rem);font-weight:600;
  letter-spacing:-.035em;line-height:1.05;margin-bottom:4px;
}
.tallrad span{font-size:14px;color:var(--grafitt)}
.seksjon--mork .tallrad{border-top-color:var(--strek-lys)}
.seksjon--mork .tallrad span{color:rgba(255,255,255,.6)}

/* ── Prosjektkort ──────────────────────────────────────── */
.prosjekter{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,380px),1fr));gap:24px}
.prosjektkort{
  display:flex;flex-direction:column;background:var(--papir);border-radius:var(--r);
  overflow:hidden;border:1px solid var(--strek-2);min-width:0;
  transition:transform .34s var(--ease),box-shadow .34s var(--ease);
}
.prosjektkort:hover{transform:translateY(-5px);box-shadow:var(--skygge-h)}
.prosjektkort__bilde{aspect-ratio:16/10;overflow:hidden;background:var(--sand-2)}
.prosjektkort__bilde img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease)}
.prosjektkort:hover .prosjektkort__bilde img{transform:scale(1.05)}
.prosjektkort__tekst{padding:clamp(22px,2.4vw,30px);display:flex;flex-direction:column;gap:9px;flex:1}
.prosjektkort__sted{font-size:13px;font-weight:600;color:var(--petrol);margin:0;letter-spacing:.01em}
.prosjektkort__tekst p{color:var(--grafitt);font-size:15.5px;margin:0}
.prosjektkort__merker{display:flex;flex-wrap:wrap;gap:7px;margin-top:auto;padding-top:12px}

/* ── Husmodeller ───────────────────────────────────────── */
.filter{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:12px}
.filter__knapp{
  background:var(--papir);border:1.5px solid var(--strek);color:var(--blekk-2);
  padding:9px 17px;border-radius:100px;cursor:pointer;
  font-family:var(--sans);font-size:14px;font-weight:500;
  transition:.2s var(--ease);
}
.filter__knapp:hover{border-color:var(--blekk);color:var(--blekk)}
.filter__knapp.er-valgt{background:var(--blekk);border-color:var(--blekk);color:#fff}
.filter-rad{display:flex;flex-wrap:wrap;gap:22px;align-items:center;margin-bottom:26px}
.filter-gruppe{display:flex;flex-direction:column;gap:9px;min-width:0}
.filter-gruppe > span{font-size:12px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--grafitt-2)}
.filter-teller{font-size:14.5px;color:var(--grafitt);margin-bottom:22px}

/* ── Kategorigrupper ───────────────────────────────────── */
.kat-gruppe{margin-bottom:clamp(38px,4.5vw,58px)}
.kat-gruppe:last-child{margin-bottom:0}
.kat-gruppe.er-skjult{display:none}
.kat-hode{
  display:flex;align-items:center;gap:14px;
  padding-bottom:14px;margin-bottom:22px;border-bottom:1px solid var(--strek);
}
.kat__ikon{
  width:44px;height:33px;flex:none;fill:none;stroke:var(--blekk);
  stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;
}
.kat-hode h3{font-size:clamp(1.25rem,2vw,1.6rem);margin:0}
.kat-hode__tall{
  margin-left:auto;font-size:13px;font-weight:500;color:var(--grafitt-2);
  white-space:nowrap;
}

.modeller{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,262px),1fr));gap:20px}
.modell{min-width:0}
.modell__lenke{
  display:flex;flex-direction:column;height:100%;background:var(--papir);
  border:1px solid var(--strek-2);border-radius:var(--r);overflow:hidden;
  transition:transform .3s var(--ease),box-shadow .3s var(--ease);
}
.modell__lenke:hover{transform:translateY(-4px);box-shadow:var(--skygge-h)}
.modell__bilde{aspect-ratio:3/2;overflow:hidden;background:var(--sand-2)}
.modell__bilde img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)}
.modell__lenke:hover .modell__bilde img{transform:scale(1.06)}
.modell__tekst{padding:17px 18px 18px;display:flex;flex-direction:column;gap:7px;flex:1}
.modell__tall{display:flex;align-items:baseline;gap:9px;flex-wrap:wrap;margin:0;font-size:14.5px;color:var(--grafitt)}
.modell__tall b{color:var(--blekk);font-weight:600;white-space:nowrap}
.modell__tall span{white-space:nowrap}
.modell__merke{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:auto 0 0;padding-top:9px}
.modell__type{font-size:12.5px;color:var(--grafitt-2)}
.modell.er-skjult{display:none}
.kort__tom{width:100%;height:100%;background:var(--sand-2)}
.tom-treff{padding:52px 0;text-align:center;color:var(--grafitt)}

/* ── Enheter i et prosjekt ─────────────────────────────── */
.enheter{display:flex;flex-direction:column;gap:20px}
.enhet{
  display:grid;grid-template-columns:minmax(0,0.9fr) minmax(0,1.1fr);gap:0;
  background:var(--papir);border:1px solid var(--strek-2);border-radius:var(--r);
  overflow:hidden;transition:box-shadow .3s var(--ease);
}
.enhet:hover{box-shadow:var(--skygge)}
.enhet__bilde{overflow:hidden;background:var(--sand-2);min-height:230px}
.enhet__bilde img{width:100%;height:100%;object-fit:cover}
.enhet__tekst{padding:clamp(24px,2.6vw,34px);display:flex;flex-direction:column;gap:10px;min-width:0}
.enhet__type{font-size:12.5px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--petrol);margin:0}
.enhet__beskrivelse{color:var(--grafitt);font-size:15.5px;margin:0}
.enhet__pris{font-size:1.32rem;font-weight:600;letter-spacing:-.028em;margin:4px 0 0}
.enhet__prisnote{font-size:12.5px;font-weight:500;color:var(--grafitt-2);letter-spacing:0}
.enhet__pris--tekst{font-size:1.05rem;color:var(--petrol)}
.enhet__fakta{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,132px),1fr));gap:12px 18px;margin:14px 0 4px;padding:16px 0 0;border-top:1px solid var(--strek-2)}
.enhet__fakta div{min-width:0}
.enhet__fakta dt{font-size:12px;color:var(--grafitt-2);margin:0 0 2px}
.enhet__fakta dd{font-size:14.5px;font-weight:600;margin:0}
.enhet .knapp{align-self:flex-start;margin-top:14px}

/* ── Prosess ───────────────────────────────────────────── */
.trinn{list-style:none;margin:0;padding:0;display:grid;gap:0}
.trinn__punkt{display:grid;grid-template-columns:auto minmax(0,1fr);gap:clamp(20px,3.4vw,48px);padding:clamp(24px,2.8vw,34px) 0;border-top:1px solid var(--strek-2);align-items:start}
.seksjon--mork .trinn__punkt{border-top-color:var(--strek-lys)}
.trinn__punkt:last-child{border-bottom:1px solid var(--strek-2)}
.seksjon--mork .trinn__punkt:last-child{border-bottom-color:var(--strek-lys)}
.trinn__nr{font-size:14px;font-weight:600;color:var(--rod);padding-top:.32em;font-variant-numeric:tabular-nums}
.trinn__punkt h3{margin-bottom:8px}
.trinn__punkt p{color:var(--grafitt);max-width:64ch;margin:0}
.seksjon--mork .trinn__punkt p{color:rgba(255,255,255,.68)}

/* ── Faner + stegpanel ─────────────────────────────────── */
/* Tre spor stablet under hverandre ga en side man scrollet i evigheter.
   Nå vises ett spor om gangen, og stegene ligger i rutenett i stedet for
   som fullbreddrader. Alt innhold er beholdt.
   Uten JS vises alle tre panelene — .js settes av et lite inline-skript
   i <head>, slik at det ikke blinker. */
.faner{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:clamp(28px,3.5vw,42px)}
.fane{
  display:flex;flex-direction:column;align-items:flex-start;gap:2px;
  background:var(--papir);border:1.5px solid var(--strek-2);border-radius:var(--r);
  padding:20px 20px 18px;cursor:pointer;text-align:left;min-width:0;
  font-family:var(--sans);color:var(--blekk);
  transition:border-color .22s var(--ease),box-shadow .22s var(--ease),transform .22s var(--ease);
}
.fane:hover{border-color:var(--strek);transform:translateY(-2px);box-shadow:var(--skygge)}
.fane.er-aktiv{border-color:var(--blekk);box-shadow:var(--skygge)}
.fane__ikon{
  width:52px;height:39px;margin-bottom:10px;fill:none;stroke:currentColor;
  stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;
  color:var(--grafitt-2);transition:color .22s var(--ease);
}
.fane.er-aktiv .fane__ikon{color:var(--rod)}
.fane__tittel{font-size:1.06rem;font-weight:600;letter-spacing:-.02em}
.fane__under{font-size:13.5px;color:var(--grafitt)}

.panel__hode{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-bottom:8px}
.panel__hode h3{font-size:clamp(1.3rem,2.2vw,1.75rem)}
.panel__ingress{color:var(--grafitt);max-width:64ch;margin:8px 0 0}

.steg{
  list-style:none;margin:26px 0 0;padding:0;
  display:grid;grid-template-columns:repeat(3,1fr);gap:1px;
  background:var(--strek-2);border:1px solid var(--strek-2);border-radius:var(--r);overflow:hidden;
}
.steg li{background:var(--papir);padding:24px 22px 22px;min-width:0;position:relative}
.steg__nr{
  display:block;font-size:12px;font-weight:600;color:var(--rod);
  letter-spacing:.1em;font-variant-numeric:tabular-nums;margin-bottom:12px;
}
.steg h4{font-size:1.02rem;font-weight:600;margin-bottom:7px;letter-spacing:-.018em}
.steg p{font-size:14.8px;color:var(--grafitt);margin:0}

/* Uten JS: ingen faner, alle panel synlige */
.faner{display:none}
.js .faner{display:grid}
.js .panel{display:none}
.js .panel.er-aktiv{display:block;animation:panelInn .32s var(--ease) both}
@keyframes panelInn{from{opacity:0;transform:translateY(8px)}}
.panel + .panel{margin-top:44px}
.js .panel + .panel{margin-top:0}

/* ── Todelt ────────────────────────────────────────────── */
.todelt{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(32px,5vw,80px);align-items:start}
.todelt--midt{align-items:center}
.todelt__v,.todelt__h{min-width:0}
.fakta{margin:26px 0 0;display:grid;border-top:1px solid var(--strek)}
.fakta>div{display:flex;justify-content:space-between;gap:18px;padding:13px 0;border-bottom:1px solid var(--strek-2)}
.fakta dt{font-size:14.5px;color:var(--grafitt);margin:0}
.fakta dd{font-size:14.5px;font-weight:600;margin:0;text-align:right}

.bilderamme{border-radius:var(--r);overflow:hidden;background:var(--sand-2)}
.bilderamme img{width:100%;height:auto}

/* ── Kommuner ──────────────────────────────────────────── */
.kommuner{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:9px}
.kommuner li{
  padding:9px 17px;border:1px solid var(--strek-lys);border-radius:100px;
  font-size:14.5px;font-weight:500;transition:.22s var(--ease);
}
.kommuner li:hover{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.4)}

/* ── Kontakt ───────────────────────────────────────────── */
.kontakt-blokk{margin-top:30px;border-top:1px solid var(--strek-2)}
.kontakt-linje{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:6px 18px;padding:16px 0;border-bottom:1px solid var(--strek-2);transition:padding-left .22s var(--ease)}
.kontakt-linje:hover{padding-left:7px}
.kontakt-linje__merke{display:inline-flex;align-items:center;gap:9px;font-size:12px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--grafitt-2)}
.kl__ikon{width:17px;height:17px;flex:none;fill:none;stroke:var(--petrol);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.kontakt-linje:hover .kl__ikon{stroke:var(--rod)}
.kontakt-linje__verdi{font-size:1.08rem;font-weight:500}
.kontakt-linje:hover .kontakt-linje__verdi{color:var(--rod)}

.skjema{background:var(--papir);border:1px solid var(--strek-2);border-radius:var(--r);padding:clamp(24px,3vw,36px);box-shadow:var(--skygge)}
.felt{display:flex;flex-direction:column;gap:6px;margin-bottom:16px;min-width:0}
.felt-rad{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,170px),1fr));gap:0 16px}
.felt label{font-size:12.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--grafitt)}
.felt input,.felt select,.felt textarea{
  font-family:var(--sans);font-size:16px;color:var(--blekk);background:var(--sand);
  border:1.5px solid transparent;border-radius:var(--r-s);padding:13px 14px;width:100%;
  transition:border-color .2s var(--ease),background .2s var(--ease);
}
.felt textarea{resize:vertical;min-height:108px}
.felt input:focus,.felt select:focus,.felt textarea:focus{outline:none;border-color:var(--blekk);background:var(--papir)}
.skjema__note{font-size:13.5px;color:var(--grafitt);margin:14px 0 0;line-height:1.5}

/* ── Veiviser (huskatalog) ─────────────────────────────── */
.veiviser{max-width:780px}
.veiviser__steg{
  list-style:none;display:flex;gap:8px;margin:0 0 30px;padding:0;flex-wrap:wrap;
  counter-reset:none;
}
.veiviser__steg li{
  display:flex;align-items:center;gap:9px;flex:1;min-width:0;
  font-size:14px;font-weight:500;color:var(--grafitt-2);
  padding-bottom:12px;border-bottom:2px solid var(--strek-2);
  transition:color .25s var(--ease),border-color .25s var(--ease);
}
.veiviser__steg li span{
  display:grid;place-items:center;width:24px;height:24px;flex:none;border-radius:100px;
  background:var(--sand-2);color:var(--grafitt-2);font-size:12px;font-weight:600;
  transition:.25s var(--ease);
}
.veiviser__steg li.er-aktiv{color:var(--blekk);border-bottom-color:var(--rod)}
.veiviser__steg li.er-aktiv span{background:var(--rod);color:#fff}
.veiviser__steg li.er-ferdig span{background:var(--gronn);color:#fff}

.vsteg{display:none;border:0;padding:0;margin:0;min-width:0}
.vsteg.er-aktiv{display:block;animation:panelInn .3s var(--ease) both}
.vsteg__tittel{font-size:clamp(1.25rem,2vw,1.6rem);font-weight:600;letter-spacing:-.025em;padding:0;margin-bottom:6px}
.vsteg__hjelp{color:var(--grafitt);font-size:15px;margin-bottom:22px}

.valgkort{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.valg{
  position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:3px;
  border:1.5px solid var(--strek-2);border-radius:var(--r);padding:20px;cursor:pointer;
  background:var(--papir);transition:.22s var(--ease);min-width:0;
}
.valg:hover{border-color:var(--strek);transform:translateY(-2px);box-shadow:var(--skygge)}
.valg input{position:absolute;opacity:0;width:0;height:0}
.valg svg{width:46px;height:35px;fill:none;stroke:var(--grafitt-2);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;margin-bottom:8px;transition:stroke .22s var(--ease)}
.valg__navn{font-weight:600;letter-spacing:-.018em}
.valg__under{font-size:13.5px;color:var(--grafitt)}
.valg:has(input:checked){border-color:var(--rod);box-shadow:0 0 0 1px var(--rod)}
.valg:has(input:checked) svg{stroke:var(--rod)}
.valg input:focus-visible ~ svg{outline:2.5px solid var(--rod);outline-offset:4px;border-radius:2px}

.bryter-liste{display:flex;flex-direction:column;gap:2px;margin:20px 0 0}
.bryter{
  display:flex;align-items:flex-start;gap:12px;padding:13px 0;cursor:pointer;
  border-bottom:1px solid var(--strek-2);font-size:15.5px;
}
.bryter:last-child{border-bottom:0}
.bryter input{width:19px;height:19px;flex:none;margin:1px 0 0;accent-color:var(--rod);cursor:pointer}
.bryter--samtykke{align-items:flex-start;border:1px solid var(--strek-2);border-radius:var(--r);padding:16px;background:var(--sand);margin-top:18px}
.bryter--samtykke span{font-size:14.5px;color:var(--grafitt);line-height:1.55}

.postfelt{margin-top:18px;padding-top:18px;border-top:1px solid var(--strek-2)}
.pakrevd{color:var(--rod)}
.feil{color:var(--rod);font-size:14px;font-weight:500;margin:14px 0 0}

.oppsummering{margin:0 0 4px;border-top:1px solid var(--strek)}
.oppsummering > div{display:flex;justify-content:space-between;gap:20px;padding:13px 0;border-bottom:1px solid var(--strek-2)}
.oppsummering dt{font-size:14px;color:var(--grafitt);margin:0}
.oppsummering dd{font-size:14.5px;font-weight:600;margin:0;text-align:right;min-width:0}

.veiviser__knapper{display:flex;justify-content:space-between;gap:12px;margin-top:28px;flex-wrap:wrap}

/* ── Bunn ──────────────────────────────────────────────── */
.bunn{background:var(--blekk);color:rgba(255,255,255,.66);padding-top:clamp(56px,7vw,86px)}
.bunn__topp{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.5fr);gap:clamp(34px,5vw,72px);padding-bottom:clamp(42px,5vw,64px)}
.bunn__ord .merke__navn{font-size:26px}
.bunn__ord .merke__sted{color:#fff;margin-left:8px}
.bunn__ord p{margin:16px 0 22px;font-size:15px;max-width:38ch}
.bunn__kolonner{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,140px),1fr));gap:28px}
.bunn__kol{display:flex;flex-direction:column;gap:9px;min-width:0}
.bunn__kol h4{font-size:11.5px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;color:#fff;margin-bottom:5px}
.bunn__kol a,.bunn__kol span{font-size:14.5px;transition:color .2s var(--ease)}
.bunn__kol a:hover{color:#fff}
.bunn__linje{display:flex;flex-wrap:wrap;gap:8px 24px;justify-content:space-between;border-top:1px solid var(--strek-lys);padding-block:22px;font-size:13px;color:rgba(255,255,255,.45)}
.bunn__linje p{margin:0}
.bunn__skille{padding-inline:7px;opacity:.5}
.bunn__kreditt{color:rgba(255,255,255,.7);border-bottom:1px solid rgba(255,255,255,.22);padding-bottom:1px;transition:color .2s var(--ease),border-color .2s var(--ease)}
.bunn__kreditt:hover{color:#fff;border-color:#fff}

/* ── Bevegelse ─────────────────────────────────────────── */
@view-transition{navigation:auto}
::view-transition-old(root){animation:ut .16s var(--ease) both}
::view-transition-new(root){animation:inn .3s var(--ease) both}
@keyframes ut{to{opacity:0}}
@keyframes inn{from{opacity:0;transform:translateY(9px)}}

.vis{opacity:0;transform:translateY(16px);transition:opacity .62s var(--ease),transform .62s var(--ease)}
.vis.er-inne{opacity:1;transform:none}

/* ── Responsivt ────────────────────────────────────────── */
@media(max-width:1080px){
  .spor{grid-template-columns:1fr;gap:14px}
  .todelt{grid-template-columns:1fr;gap:32px}
  .bunn__topp{grid-template-columns:1fr;gap:36px}
}
@media(max-width:900px){
  .hero__rutenett{grid-template-columns:1fr;min-height:0}
  /* nowrap gjelder bare den brede varianten — på smal skjerm må
     overskriften få brekke, ellers renner den ut av viewporten. */
  .hero__tekst h1{white-space:normal}
  .hero__tekst{padding:clamp(48px,9vw,72px) var(--gutt);order:2}
  /* Bildet legges tilbake i normal flyt her. Absolutt posisjonering inne
     i en aspect-ratio-boks er nødvendig i den todelte desktopvarianten
     (bildet må fylle kolonnehøyden), men i én kolonne gjør den at bildet
     ikke males i det hele tatt — resultatet er en svart blokk øverst på
     mobil. Et vanlig blokkbilde kan ikke feile på den måten. */
  .hero__media{order:1;aspect-ratio:auto;min-height:0;position:relative}
  .hero__media img{
    position:static;width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;
    transform:none;animation:none;
  }
  .hero__media::after{background:linear-gradient(180deg,rgba(18,17,15,.32),transparent 45%)}
  .enhet{grid-template-columns:1fr}
  .enhet__bilde{aspect-ratio:16/10;min-height:0}
  .nav{
    position:fixed;inset:80px 0 auto;flex-direction:column;gap:0;margin:0;
    background:var(--papir);border-bottom:1px solid var(--strek);
    padding:10px var(--gutt) 22px;
    transform:translateY(-10px);opacity:0;pointer-events:none;transition:.26s var(--ease);
  }
  .nav.er-apen{transform:none;opacity:1;pointer-events:auto}
  .nav a{padding:14px 4px;border-bottom:1px solid var(--strek-2);border-radius:0;font-size:16px}
  .meny-knapp{display:grid}
  .knapp--liten{display:none}
}
@media(max-width:900px){
  .steg{grid-template-columns:repeat(2,1fr)}
  .faner{grid-template-columns:1fr;gap:8px}
  .fane{flex-direction:row;align-items:center;gap:14px;padding:14px 16px;flex-wrap:wrap}
  .fane__ikon{width:40px;height:30px;margin:0}
  .fane__under{width:100%;padding-left:54px;margin-top:-4px}
}
@media(max-width:640px){
  body{font-size:16.5px}
  html{scroll-padding-top:80px}
  .strimmel{grid-template-columns:1fr 1fr;gap:20px}
  .steg{grid-template-columns:1fr}
  .kat-hode__tall{display:none}
  .valgkort{grid-template-columns:1fr}
  .valg{flex-direction:row;align-items:center;gap:14px;padding:14px 16px;flex-wrap:wrap}
  .valg svg{width:38px;height:29px;margin:0}
  .valg__under{width:100%;padding-left:52px;margin-top:-3px}
  .veiviser__steg li{font-size:0;gap:0;flex:1}
  .veiviser__steg li span{font-size:12px;margin-inline:auto}
  .veiviser__knapper .knapp{flex:1}
  /* To paneler side om side blir ~190px hver paa mobil — for smaatt til
     aa se hva som staar der. Stables i stedet. */
  .band__sitat{max-width:none}
  .tallrad{grid-template-columns:1fr 1fr;gap:20px}
  .bunn__linje{flex-direction:column;gap:6px}
  .trinn__punkt{grid-template-columns:1fr;gap:6px}
  .tlf{display:none}
  .modeller{grid-template-columns:repeat(auto-fill,minmax(min(100%,152px),1fr));gap:12px}
  .modell__tekst{padding:13px 13px 15px}
  .hero__knapper .knapp{width:100%}
  .fakta>div{flex-direction:column;gap:2px}
  .fakta dd{text-align:left}
}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
  html{scroll-behavior:auto}
  .vis{opacity:1;transform:none}
  .hero__media img{animation:none;transform:none}
  @view-transition{navigation:none}
}
@media print{
  .topp,.hero__knapper,.filter,.filter-rad,.meny-knapp,.skjema{display:none}
  body{background:#fff;color:#000}
  .seksjon--mork,.bunn,.hero{background:#fff;color:#000}
}

/* ── Fullbredde hero (kun forsiden) ────────────────────────────────────
   Den delte varianten la et stort tomt sandfelt til venstre paa brede
   skjermer, fordi teksten starter der innholdsbredden starter mens bildet
   forst begynner midt paa. Her dekker bildet hele bredden, og teksten
   ligger fortsatt i innholdsbredden slik at den flukter med logoen. */
.hero--full{position:relative;isolation:isolate;background:#12110f;overflow:hidden;display:flex;flex-direction:column;justify-content:flex-end;min-height:min(90vh,1010px)}
.hero--full .hero__bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 68%;z-index:-2}
.hero--full::after{
  content:'';position:absolute;inset:0;z-index:-1;
  background:
    linear-gradient(100deg,rgba(12,11,10,.88) 0%,rgba(12,11,10,.7) 26%,rgba(12,11,10,.3) 55%,rgba(12,11,10,.08) 100%),
    linear-gradient(180deg,rgba(12,11,10,.35) 0%,rgba(12,11,10,0) 30%);
}
.hero--full .hero__inn{padding-block:clamp(64px,9vw,120px);margin-top:auto}
.hero--full h1{color:#fff;text-shadow:0 2px 34px rgba(0,0,0,.34)}
.hero--full .ingress{color:rgba(255,255,255,.88);max-width:44ch;text-shadow:0 1px 18px rgba(0,0,0,.42)}
.hero--full .stikk{color:#fff}
/* Tallrekka faar sin egen bunn — uten den drukner sifrene i bildet. */
.hero--full .hero__strimmel{
  position:relative;z-index:0;background:rgba(12,11,10,.9);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  border-top:1px solid rgba(255,255,255,.14);
}
.hero--full .strimmel b{color:#fff}
.hero--full .strimmel span{color:rgba(255,255,255,.6)}
@media(max-width:900px){
  .hero--full{min-height:0}
  .hero--full .hero__bg{position:relative;height:auto;aspect-ratio:16/10;z-index:0}
  .hero--full::after{background:linear-gradient(180deg,rgba(12,11,10,.25),rgba(12,11,10,.9) 62%)}
  .hero--full .hero__inn{padding-block:clamp(40px,8vw,64px)}
  .hero--full h1{white-space:normal}
}

/* ── Husmodellside ─────────────────────────────────────────────────────
   Delt hero, ikke fullbredde. Modellbildene varierer fra 1200 til 2133 px;
   over hele bredden blir de minste synlig uskarpe. I en halv kolonne
   trenger de rundt halvparten av oppløsningen, og alle 52 blir skarpe.
   Nøkkeltallene ligger i tekstpanelet, der det ellers ble stående tomt. */
.hero--modell{background:var(--sand);color:var(--blekk);overflow:hidden}
.modellhero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);align-items:stretch;min-height:min(66vh,600px)}
.modellhero__tekst{
  display:flex;flex-direction:column;justify-content:center;
  padding:clamp(44px,5vw,68px) clamp(20px,4vw,52px) clamp(44px,5vw,68px)
          max(var(--gutt),calc((100vw - var(--wrap))/2 + var(--gutt)));
}
.modellhero__tekst h1{font-size:clamp(2.4rem,4.6vw,4.1rem);letter-spacing:-.046em;margin-bottom:16px}
.modellhero__tekst .ingress{max-width:46ch}
.modellhero__tekst .hero__knapper{margin-top:28px}
.modellhero__media{position:relative;overflow:hidden;background:var(--sand-2);min-height:300px}
.modellhero__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 55%}

/* Nøkkeltallene fyller den tomme delen av tekstpanelet */
.modellhero__tall{
  display:grid;grid-template-columns:repeat(2,1fr);
  gap:18px 26px;margin:34px 0 0;padding-top:22px;border-top:1px solid var(--strek);max-width:420px;
}
.modellhero__tall > div{min-width:0}
.modellhero__tall dt{font-size:12.5px;color:var(--grafitt-2);margin:0 0 3px;letter-spacing:.04em}
.modellhero__tall dd{margin:0;font-size:clamp(1.1rem,1.7vw,1.4rem);font-weight:600;letter-spacing:-.028em}

.galleri{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr));gap:16px}
.galleri__bilde{margin:0;border-radius:var(--r);overflow:hidden;background:var(--sand-2)}
.galleri__bilde img{width:100%;height:100%;object-fit:cover;aspect-ratio:3/2;transition:transform .6s var(--ease)}
.galleri__bilde:hover img{transform:scale(1.03)}

/* Plantegninger er strektegninger på hvit bunn — hele tegningen må være
   lesbar, derfor contain og ingen beskjæring. */
.planer{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));gap:14px}
.plan{margin:0;border:1px solid var(--strek-2);border-radius:var(--r);overflow:hidden;background:#fff;padding:10px}
.plan img{width:100%;height:auto;object-fit:contain}

@media(max-width:900px){
  .modellhero{grid-template-columns:1fr;min-height:0}
  .modellhero__tekst{order:2;padding:clamp(34px,7vw,54px) var(--gutt)}
  .modellhero__media{order:1;min-height:0;position:relative}
  /* position:static, ikke relative: inset:0 fra grunnregelen henger igjen
     på et relativt posisjonert bilde, og da males det ikke i det hele tatt
     på mobil — ruta blir stående tom. Samme fiks som .hero__media fikk.
     Målt 2026-08-18: standardavvik 391 (ensfarget) før, 15 000+ etter. */
  .modellhero__media img{
    position:static;inset:auto;width:100%;height:auto;aspect-ratio:16/10;
    object-fit:cover;
  }
}
@media(max-width:640px){
  .modellhero__tall{grid-template-columns:1fr 1fr;gap:14px 20px}
}

/* ── Til salgs ─────────────────────────────────────────────────────────
   Egen side som samler ledige enheter paa tvers av prosjektene. Prosjekt-
   sidene forteller om omraadet; denne svarer paa «hva kan jeg kjoepe naa». */
.salgsliste{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,330px),1fr));gap:22px}
.salgskort{display:flex;flex-direction:column;background:var(--papir);border:1px solid var(--strek-2);
  border-radius:var(--r);overflow:hidden;min-width:0;transition:transform .3s var(--ease),box-shadow .3s var(--ease)}
.salgskort:hover{transform:translateY(-4px);box-shadow:var(--skygge-h)}
.salgskort.er-skjult{display:none}
.salgskort__bilde{aspect-ratio:16/10;overflow:hidden;background:var(--sand-2)}
.salgskort__bilde img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)}
.salgskort:hover .salgskort__bilde img{transform:scale(1.04)}
.salgskort__tekst{padding:22px;display:flex;flex-direction:column;gap:7px;flex:1}
.salgskort__sted{font-size:13px;color:var(--grafitt);margin:0}
.salgskort__sted a{color:var(--petrol);font-weight:600}
.salgskort__sted a:hover{color:var(--rod)}
.salgskort h3{margin:0;font-size:1.12rem}
.salgskort__type{font-size:12.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--grafitt-2);margin:0}
.salgskort__pris{font-size:1.22rem;font-weight:600;letter-spacing:-.028em;margin:6px 0 0}
.salgskort__pris--tekst{font-size:1.02rem;color:var(--petrol)}
.salgskort__fakta{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,110px),1fr));
  gap:10px 16px;margin:12px 0 0;padding-top:12px;border-top:1px solid var(--strek-2)}
.salgskort__fakta div{min-width:0}
.salgskort__fakta dt{font-size:11.5px;color:var(--grafitt-2);margin:0 0 2px}
.salgskort__fakta dd{font-size:14px;font-weight:600;margin:0}
.salgskort__merker{display:flex;flex-wrap:wrap;gap:6px;margin:12px 0 0}
.salgskort__knapper{display:flex;flex-wrap:wrap;gap:8px;margin-top:auto;padding-top:16px}

/* ══════════════════════════════════════════════════════════
   PROSJEKTSIDER — landingssider for Fjellfoten og Hatlane
   Panorama. Delt med husmodellsidene der det gir mening
   (.galleri, .planer, .fakta), egne klasser der de trenger
   mer: boligkort med tegninger, tabeller og fullbredde bånd.
   ══════════════════════════════════════════════════════════ */

/* Kildebildene har motivet på ulik høyde: huset på Fjellfoten ligger
   lavt i rammen, bygget på Hatlane midt i. Én fast object-position
   ville beskåret hodet av det ene og bakken av det andre. */
.hero__bg--hoy{object-position:center 32%}
.hero__bg--midt{object-position:center 50%}
.hero__bg--lav{object-position:center 72%}

.note{
  font-size:14px;color:var(--grafitt-2);line-height:1.5;
  margin:14px 0 0;max-width:64ch;
}
.note a{color:var(--petrol);font-weight:600;text-decoration:underline;text-underline-offset:2px}
.note a:hover{color:var(--rod)}

.merkelapp--dempet{background:var(--sand-2);color:var(--grafitt-2)}

/* ── Punktlister ───────────────────────────────────────── */
.punkter{list-style:none;margin:22px 0 0;padding:0;display:grid;gap:2px}
.punkter li{
  position:relative;padding:11px 0 11px 30px;font-size:15.5px;
  border-bottom:1px solid var(--strek-2);
}
.punkter li::before{
  content:'';position:absolute;left:2px;top:19px;
  width:9px;height:9px;border-radius:2px;background:var(--rod);
}
.punkter--to{grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));gap:0 32px}

/* ── Boligtyper ────────────────────────────────────────── */
.boliger{display:grid;gap:clamp(28px,3.5vw,44px)}
.bolig{
  border:1px solid var(--strek-2);border-radius:var(--r);
  background:var(--papir);padding:clamp(22px,2.6vw,34px);min-width:0;
}
.seksjon--sand .bolig{background:var(--papir)}
.bolig__hode{
  display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:space-between;
  gap:14px 24px;padding-bottom:22px;margin-bottom:clamp(22px,2.4vw,30px);
  border-bottom:1px solid var(--strek);
}
.bolig__hode .stikk{margin-bottom:9px}
.bolig__hode h3{font-size:clamp(1.35rem,2.2vw,1.85rem)}
.bolig__merker{display:flex;flex-wrap:wrap;gap:6px;margin:0}
/* align-items:start, ikke stretch. Stretch fyller høyden, men da mater
   object-fit:cover bildet ut i sidene igjen — nettopp innzoomingen Kim
   reagerte på 2026-08-18. Riktig utsnitt slår tom plass under bildet. */
.bolig__rutenett{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,3vw,44px);align-items:start}
.bolig__bilde{margin:0;border-radius:var(--r-s);overflow:hidden;background:var(--sand-2)}
.bolig__bilde img{width:100%;height:100%;object-fit:cover;aspect-ratio:3/2}
.bolig__tekst{min-width:0}
.bolig__pris{
  font-size:clamp(1.3rem,2vw,1.65rem);font-weight:600;letter-spacing:-.03em;
  margin:18px 0 0;
}
.bolig__pris--tekst{font-size:1.1rem;color:var(--petrol)}
.bolig__pris .enhet__prisnote{font-size:13px;font-weight:500;color:var(--grafitt-2);letter-spacing:0}
.bolig__knapper{display:flex;flex-wrap:wrap;gap:9px;margin:24px 0 0}

/* ── Tabeller ──────────────────────────────────────────── */
/* Rammen er ikke pynt: uten overflow-x her sprenger en femkolonners
   tabell med priser sidebredden på 320 px og drar hele siden sidelengs. */
.tabellramme{
  margin-top:clamp(22px,2.6vw,30px);overflow-x:auto;
  border:1px solid var(--strek-2);border-radius:var(--r-s);
}
.tabell{width:100%;border-collapse:collapse;font-size:14.5px;min-width:440px}
.tabell caption{
  caption-side:top;text-align:left;padding:14px 16px;
  font-size:13px;color:var(--grafitt);border-bottom:1px solid var(--strek-2);
}
.tabell th,.tabell td{padding:12px 16px;text-align:left;border-bottom:1px solid var(--strek-2)}
.tabell thead th{
  font-size:11.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
  color:var(--grafitt-2);background:var(--sand);
}
.tabell tbody th{font-weight:600}
.tabell tbody tr:last-child th,.tabell tbody tr:last-child td{border-bottom:0}
.tabell__pris{font-weight:600;white-space:nowrap}

/* ── Utvidbare felt ────────────────────────────────────── */
/* <details> og ikke JS: innholdet står i HTML-en uansett, så både
   søkemotorer og folk uten JS får plantegningene. */
.utvid{margin-top:clamp(22px,2.6vw,30px);border-top:1px solid var(--strek-2)}
.utvid summary{
  cursor:pointer;list-style:none;padding:16px 0 0;
  font-size:14.5px;font-weight:600;color:var(--petrol);
  display:flex;align-items:center;gap:9px;
}
.utvid summary::-webkit-details-marker{display:none}
.utvid summary::before{
  content:'';width:9px;height:9px;flex:none;
  border-right:2px solid currentColor;border-bottom:2px solid currentColor;
  transform:rotate(45deg) translate(-2px,-2px);transition:transform .22s var(--ease);
}
.utvid[open] summary::before{transform:rotate(-135deg) translate(-2px,-2px)}
.utvid summary:hover{color:var(--rod)}
.utvid .galleri,.utvid .planer{margin-top:20px}

/* ── Bildetekster ──────────────────────────────────────── */
.galleri__bilde figcaption,.plan figcaption{
  font-size:13px;color:var(--grafitt-2);padding:10px 2px 0;line-height:1.45;
}
.galleri__bilde{display:flex;flex-direction:column}
.galleri__bilde img{flex:none}

/* ── Kart og situasjonsplan ────────────────────────────── */
.kart{
  margin:0;border:1px solid var(--strek-2);border-radius:var(--r);
  background:#fff;padding:clamp(12px,1.6vw,22px);
}
.kart img{width:100%;height:auto;object-fit:contain;margin-inline:auto}
.kart figcaption{font-size:13.5px;color:var(--grafitt-2);padding-top:14px;text-align:center}

/* ── Fullbredde bildebånd ──────────────────────────────── */
.prosjektband{position:relative;isolation:isolate;background:var(--blekk);color:#fff;overflow:hidden}
.prosjektband__bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 55%;z-index:-2}
.prosjektband::after{
  content:'';position:absolute;inset:0;z-index:-1;
  background:linear-gradient(100deg,rgba(12,11,10,.86) 0%,rgba(12,11,10,.62) 40%,rgba(12,11,10,.16) 100%);
}
.prosjektband__inn{padding-block:clamp(78px,11vw,168px)}
.prosjektband .band__sitat{max-width:22ch;text-shadow:0 2px 30px rgba(0,0,0,.4)}

@media(max-width:900px){
  .bolig__rutenett{grid-template-columns:1fr}
  .bolig__bilde img{aspect-ratio:16/10}
}
@media(max-width:620px){
  .bolig{padding:20px 16px}
  .bolig__hode{flex-direction:column;align-items:flex-start}
  .punkter--to{grid-template-columns:1fr}
  .kart{padding:10px}
}

/* Sidetittelen skal være h1 av hensyn til søk, men se ut som en
   seksjonsoverskrift — ikke som forsidens display-type. Sju sider
   manglet h1 helt og åpnet med h2. */
.seksjon__topp h1,.todelt__v h1{
  font-size:clamp(1.9rem,3.7vw,3.05rem);letter-spacing:-.032em;line-height:1.06;
}


/* ══════════════════════════════════════════════════════════
   PROSJEKT-HERO — delt, ikke fullbredde.
   Samme grunn som husmodellsidene: kildebildene fra FINN er
   1600 px brede. Over hele bredden av en 2560 px skjerm blir
   de både oppskalert og beskåret hardt — hero-en er da 3,9:1
   mot bildets 1,78:1, så man ser en stripe av midten. Og
   diagonalgradienten som gjør teksten lesbar mørkner nettopp
   venstre halvdel, der bygget står.
   Delt hero løser begge: teksten får egen bunn og trenger
   ingen gradient, og bildet vises i sin egen rute uten at noe
   forsvinner ut av bildet.
   ══════════════════════════════════════════════════════════ */
.hero--prosjekt{background:var(--blekk);color:#fff;overflow:hidden;min-height:0;display:block}
.hero--prosjekt::after{content:none}
.prosjekthero{
  display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);
  align-items:stretch;min-height:min(62vh,560px);
}
.prosjekthero__tekst{
  display:flex;flex-direction:column;justify-content:center;
  padding:clamp(40px,5vw,68px) clamp(24px,3.5vw,52px) clamp(40px,5vw,68px)
          max(var(--gutt),calc((100vw - var(--wrap))/2 + var(--gutt)));
}
.prosjekthero__tekst h1{
  color:#fff;font-size:clamp(2.3rem,4.4vw,3.9rem);letter-spacing:-.045em;
  line-height:1.02;margin-bottom:16px;
}
.prosjekthero__tekst .ingress{color:rgba(255,255,255,.82);max-width:46ch}
.prosjekthero__tekst .hero__knapper{margin-top:28px}
.prosjekthero__media{position:relative;overflow:hidden;background:var(--sand-2);min-height:320px}
.prosjekthero__media img{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:center 52%;
}
@media(max-width:900px){
  .prosjekthero{grid-template-columns:1fr;min-height:0}
  .prosjekthero__tekst{order:2;padding:clamp(34px,7vw,54px) var(--gutt)}
  /* Bildet tilbake i normal flyt — absolutt posisjonering i en
     aspect-ratio-boks males ikke i en kolonne. Samme felle som
     .hero__media lenger oppe. */
  .prosjekthero__media{order:1;min-height:0}
  .prosjekthero__media img{
    position:static;inset:auto;width:100%;height:auto;aspect-ratio:16/10;
    object-fit:cover;
  }
}