/* Vestfold Bygg & Betong Service AS
   Retning: «Lyst hus, tung grunn». Lys nordisk editorial.
   Ingen rammeverk, ingen CDN-JS. All bevegelse er CSS + IntersectionObserver.

   FORMSYSTEM (låst):
     interaktivt (knapper, nav, tagger) = pille, full radius
     flater (kort, bilder, felt, paneler) = 14 px
   AKSENT (låst): stål #2B4C5E er eneste aksent. Furu #B8814A brukes kun som
     strek og etikettfarge, aldri som konkurrerende aksent på knapper. */

:root{
  /* Ingen ren #fff eller #000. Alle nøytraler er trukket mot den varme
     betong/kalk-familien, så hvitt og sort hører hjemme i samme palett. */
  --hvit:#FDFCFA;
  --kalk:#F5F3EF;
  --betong:#E6E3DD;
  --betong-dyp:#CBC7BF;
  --blekk:#191817;
  --dempet:#5C6166;
  --stal:#2B4C5E;
  --stal-dyp:#1E3646;
  --stal-natt:#162936;
  --stal-lys:#D5E2E9;
  --lys:#FBFAF8;
  --furu:#B8814A;
  --furu-tekst:#8A5C2B;

  --sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  --vis:'Bricolage Grotesque',var(--sans);
  --mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;

  --maks:1280px;
  --kant:clamp(20px,5vw,60px);
  --luft:clamp(84px,10vw,150px);
  --r:14px;
  --r-liten:10px;
  --pille:999px;
  --ut:cubic-bezier(.16,1,.3,1);
  --rask:cubic-bezier(.23,1,.32,1);
  --t-press:150ms;
  --t-ui:200ms;
  --skygge:0 1px 2px rgba(25,24,23,.04),0 10px 30px rgba(25,24,23,.06);
  --skygge-hev:0 2px 6px rgba(25,24,23,.06),0 26px 60px rgba(25,24,23,.12);
  --skygge-nav:0 1px 2px rgba(25,24,23,.05),0 12px 40px rgba(25,24,23,.10);
  --topp-h:64px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:120px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  margin:0;background:var(--hvit);color:var(--blekk);
  font-family:var(--sans);font-size:17px;line-height:1.62;font-weight:400;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}

img{max-width:100%;height:auto;display:block}
a{color:inherit}
button{font:inherit;color:inherit}

h1,h2,h3,h4{font-family:var(--vis);font-weight:600;line-height:1.06;letter-spacing:-.028em;margin:0;text-wrap:balance}
/* Optisk venstrekant: F-en har luft i seg, så H1 rykkes en hårsbredd ut. */
h1{font-size:clamp(42px,5.6vw,80px);font-weight:650;letter-spacing:-.034em;margin-left:-.022em}
h2{font-size:clamp(30px,3.7vw,50px)}
h3{font-size:clamp(19px,1.9vw,24px);line-height:1.2;letter-spacing:-.018em}
h4{font-size:17.5px;letter-spacing:-.012em}
p{margin:0 0 1.05em;text-wrap:pretty}
p:last-child{margin-bottom:0}

.hopp{position:absolute;left:-9999px;top:0;background:var(--stal);color:var(--lys);padding:12px 18px;border-radius:var(--pille);z-index:300}
.hopp:focus{left:14px;top:14px}
:focus-visible{outline:2px solid var(--stal);outline-offset:3px;border-radius:4px}
.band :focus-visible,.cta :focus-visible,.bunn :focus-visible,.rute:focus-visible{
  outline-color:var(--lys);outline-offset:4px;
}

/* ---------- layout ---------- */
.inn{max-width:var(--maks);margin:0 auto;padding:0 var(--kant)}
.inn-bred{max-width:1620px;margin:0 auto;padding:0 var(--kant)}
section{padding:var(--luft) 0}
.kalk{background:var(--kalk)}

/* ---------- etiketter og typografi ---------- */
.etikett{
  font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.16em;
  text-transform:uppercase;color:var(--furu-tekst);
  display:flex;align-items:center;gap:11px;margin:0 0 22px;
}
.etikett::before{content:"";width:24px;height:1px;background:var(--furu);flex:none}
.ingress{font-size:clamp(18px,1.55vw,20.5px);line-height:1.58;color:var(--dempet);max-width:60ch}
.seksjonstopp{max-width:64ch;margin:0 0 clamp(44px,5vw,68px)}
.seksjonstopp p{margin-top:20px;font-size:18px;color:var(--dempet)}
.topp-delt{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(32px,5vw,80px);align-items:end;margin:0 0 clamp(44px,5vw,68px)}
.topp-delt p{font-size:18px;color:var(--dempet);margin:0;max-width:46ch}
@media (max-width:860px){.topp-delt{grid-template-columns:1fr;gap:24px;align-items:start}}

/* ---------- knapper ---------- */
.knapp{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:15px 30px;border-radius:var(--pille);border:1px solid transparent;
  font-size:15px;font-weight:550;letter-spacing:-.006em;text-decoration:none;cursor:pointer;
  transition:background var(--t-ui) var(--rask),color var(--t-ui) var(--rask),
             border-color var(--t-ui) var(--rask),box-shadow var(--t-ui) var(--rask),
             transform var(--t-press) var(--rask);
}
.knapp-primar{background:var(--stal);color:var(--lys);box-shadow:0 1px 2px rgba(25,24,23,.1)}
.knapp-sekundar{background:var(--hvit);color:var(--blekk);border-color:var(--betong-dyp)}
.knapp-lys{background:var(--lys);color:var(--stal-dyp)}
.knapp-kant-lys{background:transparent;color:var(--lys);border-color:rgba(255,255,255,.42)}
.knapp-liten{padding:11px 22px;font-size:14px}
.knapp:active{transform:scale(.97)}
.filter button:active,.indeks-pil:active{transform:scale(.97)}

.tekstlenke{
  display:inline-flex;align-items:center;gap:9px;color:var(--stal);
  font-weight:550;font-size:15px;text-decoration:none;
  border-bottom:1px solid var(--betong-dyp);padding-bottom:3px;
  transition:border-color .2s var(--ut),gap .2s var(--ut);
}

/* ---------- flytende pille-navigasjon ---------- */
.topp{
  position:fixed;inset:14px 0 auto;z-index:200;
  display:flex;justify-content:center;padding:0 14px;
  pointer-events:none;
}
.topp-pille{
  pointer-events:auto;
  width:100%;max-width:1180px;
  display:flex;align-items:center;justify-content:space-between;gap:18px;
  height:var(--topp-h);padding:0 10px 0 20px;
  border-radius:var(--pille);
  background:rgba(253,252,250,.74);
  backdrop-filter:blur(20px) saturate(180%);
  -webkit-backdrop-filter:blur(20px) saturate(180%);
  border:1px solid rgba(255,255,255,.6);
  box-shadow:var(--skygge-nav),inset 0 1px 0 rgba(255,255,255,.85);
  transition:max-width .5s var(--ut),background .4s var(--ut),box-shadow .4s var(--ut),
             height .4s var(--ut);
}
.topp.er-festet .topp-pille{
  max-width:1090px;height:58px;
  background:rgba(253,252,250,.9);
  box-shadow:0 2px 4px rgba(25,24,23,.06),0 16px 44px rgba(25,24,23,.14),inset 0 1px 0 rgba(255,255,255,.9);
}
@media (prefers-reduced-transparency:reduce){
  .topp-pille,.meny{background:rgba(253,252,250,.99);backdrop-filter:none;-webkit-backdrop-filter:none}
}

.merke{display:flex;align-items:center;gap:10px;text-decoration:none;flex:none}
.merke-ikon{width:28px;height:28px;flex:none}
.merke-tekst{display:flex;flex-direction:column;line-height:1;overflow:hidden}
.merke-navn{font-family:var(--vis);font-weight:650;font-size:15.5px;letter-spacing:-.03em;white-space:nowrap}
.merke-under{font-family:var(--mono);font-size:9px;letter-spacing:.18em;text-transform:uppercase;color:var(--dempet);margin-top:4px;white-space:nowrap}

.meny{display:flex;align-items:center;gap:2px;background:rgba(25,24,23,.045);border-radius:var(--pille);padding:4px;flex:none}
.meny a{
  position:relative;text-decoration:none;font-size:14.5px;font-weight:500;
  color:var(--dempet);padding:8px 16px;border-radius:var(--pille);
  transition:color .22s var(--ut),background .22s var(--ut);
  white-space:nowrap;
}
.meny a[aria-current]{color:var(--lys);background:var(--stal)}

.topp-handling{display:flex;align-items:center;gap:8px;flex:none}
.topp-tlf{
  font-variant-numeric:tabular-nums;
  display:inline-flex;align-items:center;gap:8px;text-decoration:none;
  font-family:var(--mono);font-size:13px;font-weight:500;letter-spacing:-.01em;
  padding:9px 14px;border-radius:var(--pille);
  transition:background .2s var(--ut);
}
.topp-tlf svg{opacity:.55;flex:none}

.meny-knapp{
  display:none;background:none;border:1px solid var(--betong-dyp);border-radius:var(--pille);
  width:42px;height:42px;align-items:center;justify-content:center;cursor:pointer;flex:none;
}
.meny-knapp span{display:block;width:16px;height:1.5px;background:var(--blekk);position:relative;transition:background .2s}
.meny-knapp span::before,.meny-knapp span::after{content:"";position:absolute;left:0;width:16px;height:1.5px;background:var(--blekk);transition:transform .3s var(--ut)}
.meny-knapp span::before{top:-5px}
.meny-knapp span::after{top:5px}
.meny-knapp[aria-expanded="true"] span{background:transparent}
.meny-knapp[aria-expanded="true"] span::before{transform:translateY(5px) rotate(45deg)}
.meny-knapp[aria-expanded="true"] span::after{transform:translateY(-5px) rotate(-45deg)}

/* Telefonnummeret blir til bare ikon før pillen blir trang. */
@media (max-width:1160px){
  .topp-tlf span{display:none}
  .topp-tlf{padding:9px 11px}
}
/* Nettbrett i liggende format er 1024 px bredt. Der er det ikke plass til full
   meny pluss telefon pluss knapp, så hamburgeren overtar allerede på 1080. */
@media (max-width:1080px){
  .meny-knapp{display:flex}
  .topp-handling .knapp{display:none}
  .topp-pille{padding:0 8px 0 16px}
  /* Kompakt nedtrekk forankret til hamburgeren, ikke et fullbreddeark.
     Pillen må ikke ha contain:paint eller overflow:hidden, som ville klippe det bort. */
  .meny{
    position:absolute;top:calc(var(--topp-h) + 22px);right:14px;left:auto;
    width:min(360px,calc(100vw - 28px));
    flex-direction:column;align-items:stretch;gap:2px;padding:10px;
    background:rgba(253,252,250,.985);
    backdrop-filter:blur(24px) saturate(180%);
    -webkit-backdrop-filter:blur(24px) saturate(180%);
    border:1px solid rgba(203,199,191,.5);
    border-radius:22px;box-shadow:var(--skygge-hev);
    transform-origin:top right;
    opacity:0;transform:translateY(-6px) scale(.97);pointer-events:none;
    transition:opacity .22s var(--rask),transform .22s var(--rask);
  }
  .meny.er-apen{opacity:1;transform:none;pointer-events:auto}
  .meny a{padding:14px 16px;font-size:16px;border-radius:14px}
  .meny-bunn{display:flex;gap:8px;padding:8px 6px 4px;border-top:1px solid var(--betong);margin-top:6px}
  .meny-bunn .knapp{flex:1}
}
@media (min-width:1081px){.meny-bunn{display:none}}
@media (max-width:420px){.merke-under{display:none}.merke-navn{font-size:14px}}

/* ---------- hero ---------- */
/* Fotoet er komponert for denne teksten: huset i høyre tredel, tom himmel og sjø
   til venstre. Da trengs bare et hvisk av slør, ikke en vask over hele flaten. */
/* Taket på 880 px hindrer at heroen blir uforholdsmessig høy på nettbrett i
   stående format, der 100svh er godt over tusen piksler. */
.hero{position:relative;min-height:min(100svh,880px);display:flex;align-items:flex-start;overflow:hidden}
.hero-bilde{position:absolute;inset:-5% 0 0}
.hero-bilde img{width:100%;height:100%;object-fit:cover;object-position:64% 62%}
.hero-slor{
  position:absolute;inset:0;
  background:
    linear-gradient(100deg,rgba(253,252,250,.62) 0,rgba(253,252,250,.24) 28%,rgba(253,252,250,0) 50%),
    linear-gradient(to top,var(--hvit) 0,rgba(253,252,250,.34) 11%,rgba(253,252,250,0) 21%);
}
.hero-inn{position:relative;width:100%;padding-top:calc(var(--topp-h) + clamp(52px,9vh,104px));padding-bottom:clamp(128px,15vh,180px)}
.hero h1{max-width:12ch}
.hero-tekst{max-width:38ch;margin:26px 0 34px;font-size:clamp(17px,1.45vw,19.5px);line-height:1.56;color:#3A4045}
.hero-handling{display:flex;flex-wrap:wrap;gap:12px}
@media (max-width:820px){
  /* Smal skjerm beskjærer bort den tomme venstresiden. I stedet for å legge tekst
     oppå fotoet får teksten sin egen flate, og bildet står som en ren ramme under. */
  .hero{min-height:0;flex-direction:column-reverse;overflow:visible}
  .hero-slor{display:none}
  .hero-bilde{position:relative;inset:auto;margin:0 var(--kant);border-radius:var(--r);overflow:hidden}
  .hero-bilde img{aspect-ratio:4/3;height:auto;object-position:74% 58%}
  .hero-inn{padding-top:calc(var(--topp-h) + 44px);padding-bottom:32px}
  .hero h1{max-width:none}
  .hero-tekst{max-width:none}
}

/* ordmaske */
.ord{display:inline-block;overflow:hidden;vertical-align:bottom;padding-bottom:.1em;margin-bottom:-.1em}
.ord > span{display:inline-block;transform:translateY(105%);opacity:0}
html.klar .ord > span{animation:ordInn .95s var(--ut) forwards;animation-delay:var(--d,0s)}
@keyframes ordInn{to{transform:none;opacity:1}}
.tonInn{opacity:0;transform:translateY(16px)}
html.klar .tonInn{animation:tonInn .85s var(--ut) forwards;animation-delay:var(--d,0s)}
@keyframes tonInn{to{opacity:1;transform:none}}

/* faktakort som overlapper heroen */
.fakta{position:relative;z-index:3;margin-top:clamp(-104px,-9vw,-72px)}
.fakta-rad{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(10px,1.2vw,16px)}
.fakta-kort{
  background:var(--hvit);border-radius:var(--r);padding:24px 24px 26px;
  box-shadow:var(--skygge);border:1px solid rgba(25,24,23,.05);
}
.fakta-kort dt{font-family:var(--mono);font-size:10px;letter-spacing:.17em;text-transform:uppercase;color:var(--dempet);margin-bottom:12px}
.fakta-kort dd{margin:0;font-family:var(--vis);font-size:19.5px;font-weight:600;letter-spacing:-.026em;line-height:1.16}
.fakta-kort dd small{display:block;font-family:var(--sans);font-size:13px;font-weight:400;color:var(--dempet);letter-spacing:0;margin-top:6px;line-height:1.45}
@media (max-width:900px){
  .fakta{margin-top:-56px}
  .fakta-rad{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:440px){.fakta-rad{grid-template-columns:1fr}}

/* ---------- utsagn ----------
   Sto tidligere som en fire-opp rad med store tall over små etiketter. Det er
   samme oppsett som faktakortene rett over, og det er i tillegg en gjenkjennelig
   nøkkeltall-mal. Erstattet med tre setninger som avdekkes med en vipe. */
.utsagn{margin:0;display:grid;gap:clamp(8px,.9vw,14px);max-width:min(100%,860px)}
.utsagn span{
  display:block;font-family:var(--vis);font-weight:600;
  font-size:clamp(22px,3.4vw,46px);line-height:1.12;letter-spacing:-.032em;
  transition:clip-path .9s var(--ut);
}
/* Klippet legges på først når skriptet har meldt seg. Uten JS står teksten synlig. */
html.klar .utsagn span{clip-path:inset(0 102% 0 0)}
.utsagn span:nth-child(2){transition-delay:.1s}
.utsagn span:nth-child(3){transition-delay:.2s}
html.klar .utsagn.er-inne span{clip-path:inset(0 0 0 0)}
.utsagn b{font-weight:600;color:var(--stal)}
.utsagn + p{margin-top:clamp(28px,3vw,40px);font-size:17px;color:var(--dempet);max-width:44ch}


/* ---------- splitt ---------- */
.splitt{display:grid;grid-template-columns:1.08fr .92fr;gap:clamp(36px,6vw,96px);align-items:center}
.splitt-bilde{position:relative;border-radius:var(--r);overflow:hidden}
.splitt-bilde img{width:100%;aspect-ratio:3/4;object-fit:cover;transform:scale(1.06)}
.splitt-bilde.flat img{aspect-ratio:4/3}
.merkelapp{
  position:absolute;left:20px;bottom:20px;right:20px;
  background:rgba(253,252,250,.9);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  padding:18px 22px;border-radius:var(--r-liten);max-width:280px;
  box-shadow:0 10px 30px rgba(25,24,23,.16);
}
.merkelapp strong{display:block;font-family:var(--vis);font-size:25px;letter-spacing:-.03em;line-height:1}
.merkelapp span{display:block;font-size:13.5px;color:var(--dempet);margin-top:7px;line-height:1.45}
@media (max-width:860px){
  .splitt{grid-template-columns:1fr;gap:36px}
  .splitt-bilde img,.splitt-bilde.flat img{aspect-ratio:4/3}
}

.punkter{list-style:none;padding:0;margin:28px 0 0;display:grid;gap:15px}
.punkter li{position:relative;padding-left:29px;font-size:16.5px;color:var(--dempet)}
.punkter li strong{color:var(--blekk);font-weight:550}
.punkter li::before{content:"";position:absolute;left:0;top:.62em;width:12px;height:1.5px;background:var(--furu)}

/* ---------- tjenesteindeks med bildevisning ---------- */
.indeks{display:grid;grid-template-columns:1fr .74fr;gap:clamp(40px,5vw,82px);align-items:start}
.indeks-liste{border-top:1px solid var(--betong)}
.indeks-rad{
  display:grid;grid-template-columns:1fr auto;gap:20px;align-items:center;
  padding:clamp(20px,2.3vw,28px) 0;border-bottom:1px solid var(--betong);
  text-decoration:none;position:relative;
}
/* Bare transform og opacity: ingen layout-egenskaper i bevegelse. */
.indeks-rad > span:not(.indeks-pil){transition:transform var(--t-ui) var(--rask)}
.indeks-rad::before{
  content:"";position:absolute;left:0;top:clamp(20px,2.3vw,28px);width:16px;height:1.5px;
  background:var(--furu);transform:translateY(.62em) scaleX(0);transform-origin:left center;
  transition:transform var(--t-ui) var(--rask);
}
.indeks-rad.er-aktiv > span:not(.indeks-pil){transform:translateX(26px)}
.indeks-rad.er-aktiv::before{transform:translateY(.62em) scaleX(1)}
.indeks-navn{font-family:var(--vis);font-size:clamp(20px,2.1vw,27px);font-weight:600;letter-spacing:-.026em;line-height:1.15;margin:0}
.indeks-rad p{margin:7px 0 0;font-size:14.5px;color:var(--dempet);line-height:1.5;max-width:44ch}
.indeks-pil{
  width:38px;height:38px;border-radius:var(--pille);border:1px solid var(--betong-dyp);
  display:grid;place-items:center;flex:none;color:var(--dempet);
  transition:background .3s var(--ut),border-color .3s var(--ut),color .3s var(--ut),transform .3s var(--ut);
}
.indeks-rad.er-aktiv .indeks-pil{background:var(--stal);border-color:var(--stal);color:var(--lys);transform:rotate(-45deg)}
.indeks-mini{display:none}

.indeks-visning{position:sticky;top:110px;border-radius:var(--r);overflow:hidden;aspect-ratio:4/5;background:var(--betong)}
.indeks-visning img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;transform:scale(1.05);filter:blur(6px);
  transition:opacity .42s var(--rask),transform .9s var(--ut),filter .42s var(--rask);
}
.indeks-visning img.er-fremme{opacity:1;transform:scale(1);filter:blur(0)}
.indeks-tekst{
  position:absolute;left:0;right:0;bottom:0;padding:26px 24px 22px;color:var(--lys);
  background:linear-gradient(to top,rgba(20,22,23,.86),rgba(20,22,23,0));
  font-size:14.5px;line-height:1.5;
}
@media (max-width:940px){
  .indeks{grid-template-columns:1fr}
  .indeks-visning{display:none}
  .indeks-rad{grid-template-columns:88px 1fr auto;gap:18px}
  .indeks-mini{display:block;width:88px;height:66px;border-radius:var(--r-liten);overflow:hidden;background:var(--betong)}
  .indeks-mini img{width:100%;height:100%;object-fit:cover}
  .indeks-rad.er-aktiv > span:not(.indeks-pil){transform:none}
  .indeks-rad.er-aktiv::before{transform:translateY(.62em) scaleX(0)}
}
@media (max-width:520px){
  .indeks-rad{grid-template-columns:1fr auto}
  .indeks-mini{display:none}
}

/* ---------- mørkt prosessbånd ---------- */
.band{background:var(--stal-natt);color:var(--lys);position:relative;overflow:hidden}
.band::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(120% 70% at 12% 0%,rgba(213,226,233,.14),transparent 58%);
}
.band > *{position:relative;z-index:1}
.band h2{color:var(--lys)}
.band .etikett{color:#E3B588}
.band .etikett::before{background:#E3B588}
.prosess-layout{display:grid;grid-template-columns:.86fr 1.14fr;gap:clamp(40px,6vw,96px);align-items:start}
.prosess-fast{position:sticky;top:120px}
.prosess-fast p{margin-top:20px;color:var(--stal-lys);font-size:17px;max-width:34ch}
.prosess-fast .knapp{margin-top:30px}
.steg{
  padding:clamp(26px,3vw,36px) 0;border-top:1px solid rgba(255,255,255,.15);
  display:grid;grid-template-columns:auto 1fr;gap:clamp(20px,3vw,40px);
  opacity:.4;transition:opacity .6s var(--ut);
}
.steg:last-child{border-bottom:1px solid rgba(255,255,255,.15)}
.steg.er-naa{opacity:1}
.steg-nr{font-family:var(--mono);font-size:12.5px;letter-spacing:.1em;color:#E3B588;padding-top:.5em}
.steg h3{color:var(--lys);margin-bottom:11px}
.steg p{font-size:15.5px;color:var(--stal-lys);line-height:1.6;margin:0;max-width:48ch}
@media (max-width:900px){
  .prosess-layout{grid-template-columns:1fr;gap:44px}
  .prosess-fast{position:static}
  .steg{opacity:1}
}

/* ---------- prosjekt-bento ---------- */
.bento{display:grid;grid-template-columns:repeat(6,1fr);grid-auto-rows:clamp(300px,25vw,430px);gap:clamp(12px,1.4vw,20px)}
.rute{
  position:relative;display:block;text-decoration:none;overflow:hidden;
  border-radius:var(--r);background:var(--betong);
}
.rute img{width:100%;height:100%;object-fit:cover;transition:transform 1.1s var(--ut)}
.rute::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(to top,rgba(20,22,23,.82) 0,rgba(20,22,23,.30) 42%,rgba(20,22,23,0) 72%);
}
.rute-tekst{position:absolute;left:0;right:0;bottom:0;padding:clamp(22px,2.4vw,30px);color:var(--lys);z-index:1}
.rute-merke{font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:#E3B588;display:block;margin-bottom:12px}
.rute h3{color:var(--lys)}
.rute p{margin:9px 0 0;font-size:14.5px;line-height:1.5;color:rgba(255,255,255,.82);max-width:40ch}
.rute-stor{grid-column:span 4}
.rute-smal{grid-column:span 2}
.rute-bred{grid-column:span 4}
.rute-hoy{grid-column:span 2}
@media (max-width:900px){
  .bento{grid-template-columns:repeat(2,1fr);grid-auto-rows:clamp(260px,38vw,330px)}
  .rute-stor,.rute-bred{grid-column:span 2}
  .rute-smal,.rute-hoy{grid-column:span 1}
}
@media (max-width:560px){
  .bento{grid-template-columns:1fr;grid-auto-rows:74vw}
  .rute-smal,.rute-hoy,.rute-stor,.rute-bred{grid-column:span 1}
}

/* ---------- sitat ---------- */
.sitat-blokk{display:grid;grid-template-columns:auto 1fr;gap:clamp(32px,5vw,72px);align-items:center}
.sitat-portrett{width:clamp(200px,23vw,310px);border-radius:var(--r);overflow:hidden;flex:none}
.sitat-portrett img{width:100%;aspect-ratio:3/4;object-fit:cover}
.sitat{
  margin:0;font-family:var(--vis);font-weight:500;
  hanging-punctuation:first;text-indent:-.06em;
  font-size:clamp(24px,3.3vw,44px);line-height:1.22;letter-spacing:-.03em;max-width:23ch;
}
.sitat cite{
  display:block;font-family:var(--sans);font-size:14.5px;font-style:normal;
  color:var(--dempet);margin-top:26px;letter-spacing:0;font-weight:450;line-height:1.5;
}
@media (max-width:760px){
  .sitat-blokk{grid-template-columns:1fr;gap:28px}
  .sitat-portrett{width:150px}
  .sitat{max-width:none}
}

/* ---------- kort og rader ---------- */
.kort-rad{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2vw,26px)}
.kort-rad-2{grid-template-columns:repeat(2,1fr)}
.kort{
  background:var(--hvit);border:1px solid var(--betong);border-radius:var(--r);
  padding:30px 28px 32px;display:flex;flex-direction:column;
  transition:transform .3s var(--ut),box-shadow .3s var(--ut),border-color .3s var(--ut);
}
.kort-lenke{text-decoration:none}
.kort h2,.kort h3{margin-bottom:12px}
.kort p{font-size:15.5px;color:var(--dempet);line-height:1.56}
.kort-topp{font-family:var(--mono);font-size:11px;letter-spacing:.15em;text-transform:uppercase;color:var(--furu-tekst);margin-bottom:18px}
@media (max-width:940px){.kort-rad{grid-template-columns:repeat(2,1fr)}}
@media (max-width:620px){.kort-rad,.kort-rad-2{grid-template-columns:1fr}}

/* prosjektgalleri (undersider) */
.galleri{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2vw,26px)}
.galleri .prosjekt-bred{grid-column:span 3;display:grid;grid-template-columns:1.3fr 1fr;align-items:stretch}
.galleri .prosjekt-bred .prosjekt-bilde{aspect-ratio:auto;min-height:360px}
.galleri .prosjekt-bred .prosjekt-tekst{padding:clamp(30px,3.4vw,52px);display:flex;flex-direction:column;justify-content:center}
.galleri .prosjekt-bred .prosjekt-tekst h2{font-size:clamp(24px,2.6vw,33px)}
.galleri .prosjekt-bred .prosjekt-tekst p{font-size:16.5px;max-width:38ch}
.galleri .prosjekt-halv{grid-column:span 2}
/* Kortene i samme rad skal bunne likt: bildet tar opp høydeforskjellen. */
.galleri .prosjekt{display:flex;flex-direction:column}
.galleri .prosjekt .prosjekt-bilde{flex:1 1 auto;aspect-ratio:auto;min-height:230px}
.galleri .prosjekt .prosjekt-bilde img{height:100%}
.galleri .prosjekt-halv .prosjekt-bilde{min-height:300px}
@media (max-width:940px){
  .galleri{grid-template-columns:repeat(2,1fr)}
  .galleri .prosjekt-bred{grid-column:span 2;grid-template-columns:1fr}
  .galleri .prosjekt-bred .prosjekt-bilde{aspect-ratio:16/9;min-height:0}
  .galleri .prosjekt-halv{grid-column:span 2}
}
@media (max-width:620px){
  .galleri{grid-template-columns:1fr}
  .galleri .prosjekt-bred,.galleri .prosjekt-halv{grid-column:span 1}
  .galleri .prosjekt .prosjekt-bilde{min-height:0;aspect-ratio:4/3}
}

/* prosjektkort (undersider) */
.prosjekt{
  display:block;text-decoration:none;background:var(--hvit);
  border:1px solid var(--betong);border-radius:var(--r);overflow:hidden;
  transition:transform .3s var(--ut),box-shadow .3s var(--ut),border-color .3s var(--ut);
}
.prosjekt-bilde{overflow:hidden;aspect-ratio:4/3}
.prosjekt-bilde img{width:100%;height:100%;object-fit:cover;transition:transform 1.1s var(--ut)}
.prosjekt-tekst{padding:24px 26px 28px}
.prosjekt-tekst h2,.prosjekt-tekst h3{font-family:var(--vis);font-weight:600;font-size:21px;line-height:1.2;letter-spacing:-.02em;margin:0 0 9px}
.prosjekt-tekst p{font-size:15px;color:var(--dempet);line-height:1.55;margin:0}
.prosjekt-merke{font-family:var(--mono);font-size:10.5px;letter-spacing:.15em;text-transform:uppercase;color:var(--furu-tekst);margin-bottom:14px;display:block}

.filter{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:clamp(28px,3.4vw,40px)}
.filter button{
  background:transparent;border:1px solid var(--betong-dyp);border-radius:var(--pille);
  padding:9px 19px;font-size:14px;font-weight:500;cursor:pointer;
  transition:background .2s var(--ut),border-color .2s var(--ut),color .2s var(--ut);
}
.filter button[aria-pressed="true"]{background:var(--stal);border-color:var(--stal);color:var(--lys)}

/* ---------- tilleggstjenester ----------
   Var en tredje fire-opp på samme side. Nå definisjonsrader med hårfin strek. */
.tillegg{border-top:1px solid var(--betong)}
.tillegg div{
  display:grid;grid-template-columns:minmax(190px,.34fr) 1fr;gap:clamp(20px,4vw,56px);
  padding:clamp(20px,2.2vw,28px) 0;border-bottom:1px solid var(--betong);align-items:baseline;
}
.tillegg h4{margin:0}
.tillegg p{font-size:15.5px;color:var(--dempet);line-height:1.55;margin:0;max-width:58ch}
@media (max-width:640px){
  .tillegg div{grid-template-columns:1fr;gap:8px}
}

/* ---------- områdetagger ---------- */
.omrade-liste{display:flex;flex-wrap:wrap;gap:9px;margin:0;padding:0;list-style:none}
.omrade-liste li{
  border:1px solid var(--betong-dyp);border-radius:var(--pille);padding:9px 19px;
  font-size:14.5px;background:var(--hvit);
  transition:border-color .25s var(--ut),transform .25s var(--ut);
}

/* ---------- CTA med bilde ---------- */
.cta{background:var(--stal-natt);color:var(--lys);padding:0;overflow:hidden}
.cta-grid{display:grid;grid-template-columns:.92fr 1.08fr;align-items:stretch}
.cta-bilde{position:relative;min-height:100%}
.cta-bilde img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.cta-tekst{padding:clamp(56px,7vw,110px) clamp(28px,5vw,86px)}
.cta h2{color:var(--lys);max-width:15ch}
.cta p{color:var(--stal-lys);font-size:18px;max-width:44ch;margin-top:20px}
.cta-handling{display:flex;flex-wrap:wrap;gap:12px;margin-top:34px}
@media (max-width:860px){
  .cta-grid{grid-template-columns:1fr}
  .cta-bilde{min-height:260px}
}

/* ---------- sidetopp ---------- */
.sidetopp{padding:calc(var(--topp-h) + clamp(64px,8vw,104px)) 0 clamp(46px,5vw,68px);background:var(--kalk);border-bottom:1px solid var(--betong)}
.sidetopp h1{font-size:clamp(36px,4.6vw,62px);max-width:16ch}
.sidetopp .ingress{margin-top:24px}
.smuler{font-size:13.5px;color:var(--dempet);margin-bottom:24px}
.smuler a{text-decoration:none;border-bottom:1px solid var(--betong-dyp)}
.smuler span{margin:0 9px;color:var(--betong-dyp)}

/* ---------- tjenestesider ---------- */
.tj-layout{display:grid;grid-template-columns:212px 1fr;gap:clamp(36px,5vw,76px);align-items:start}
.tj-meny{position:sticky;top:110px;list-style:none;margin:0;padding:0;display:grid;gap:2px}
/* Piller, ikke fargede sidestriper, og ingen animasjon av padding. */
.tj-meny a{
  display:block;text-decoration:none;font-size:14.5px;color:var(--dempet);
  padding:10px 14px;border-radius:var(--pille);
  transition:color var(--t-ui) var(--rask),background var(--t-ui) var(--rask);
}
@media (max-width:940px){.tj-layout{grid-template-columns:1fr}.tj-meny{display:none}}

.tj{padding:clamp(56px,6vw,84px) 0;border-top:1px solid var(--betong)}
.tj:first-child{border-top:0;padding-top:0}
.tj-hode{display:grid;grid-template-columns:auto 1fr;gap:22px;align-items:baseline;margin-bottom:28px}
.tj-hode h2{font-size:clamp(26px,3.1vw,38px)}
.tj-nr{font-family:var(--mono);font-size:12.5px;letter-spacing:.1em;color:var(--furu-tekst)}
.tj-bilde{border-radius:var(--r);overflow:hidden;margin-bottom:32px}
.tj-bilde img{aspect-ratio:3/2;object-fit:cover;width:100%}
.tj-kropp{display:grid;grid-template-columns:1.12fr .88fr;gap:clamp(28px,4vw,56px);align-items:start}
.tj-kropp p{color:var(--dempet);font-size:16.5px}
.tj-oppdrag{background:var(--kalk);border-radius:var(--r);padding:28px 30px}
.tj-oppdrag h4{margin-bottom:16px;font-size:15.5px}
.tj-oppdrag ul{list-style:none;margin:0;padding:0;display:grid;gap:11px}
.tj-oppdrag li{position:relative;padding-left:23px;font-size:15px;color:var(--dempet);line-height:1.5}
.tj-oppdrag li::before{content:"";position:absolute;left:0;top:.6em;width:10px;height:1.5px;background:var(--furu)}
.tj-bunn{margin-top:30px}
@media (max-width:760px){.tj-kropp{grid-template-columns:1fr}}

/* ---------- tabell ---------- */
.fakta-tabell{width:100%;border-collapse:collapse;margin-top:8px}
.fakta-tabell th,.fakta-tabell td{text-align:left;padding:15px 0;border-bottom:1px solid var(--betong);font-size:15.5px;vertical-align:top}
.fakta-tabell th{font-weight:500;color:var(--dempet);width:44%;font-size:14.5px}
.fakta-tabell tr:last-child th,.fakta-tabell tr:last-child td{border-bottom:0}

/* ---------- skjema ---------- */
.skjema-layout{display:grid;grid-template-columns:1.22fr .78fr;gap:clamp(32px,5vw,72px);align-items:start}
@media (max-width:880px){.skjema-layout{grid-template-columns:1fr}}
.felt{margin-bottom:20px}
.felt label{display:block;font-size:14.5px;font-weight:550;margin-bottom:8px}
.felt .hjelp{display:block;font-size:13.5px;color:var(--dempet);font-weight:400;margin-top:3px}
.felt input,.felt select,.felt textarea{
  width:100%;padding:14px 16px;border:1px solid var(--betong-dyp);border-radius:var(--r-liten);
  background:var(--hvit);font-family:var(--sans);font-size:16px;color:var(--blekk);
  transition:border-color .2s var(--ut),box-shadow .2s var(--ut);
}
.felt textarea{min-height:136px;resize:vertical;line-height:1.55}
.felt select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' stroke='%235A6169' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 16px center}
.felt input:focus,.felt select:focus,.felt textarea:focus{outline:none;border-color:var(--stal);box-shadow:0 0 0 3px rgba(43,76,94,.13)}
.felt.er-feil input,.felt.er-feil select,.felt.er-feil textarea{border-color:#A8342A}
.feil{display:block;color:#A8342A;font-size:13.5px;margin-top:6px}
.felt-rad{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media (max-width:560px){.felt-rad{grid-template-columns:1fr}}
.skjema-bunn{display:flex;flex-wrap:wrap;align-items:center;gap:18px;margin-top:8px}
.skjema-bunn small{font-size:13.5px;color:var(--dempet);max-width:32ch;line-height:1.45}
#skjema-status{display:block;color:#A8342A;font-size:14.5px;margin-top:14px}
.kvittering{background:var(--kalk);border:1px solid var(--betong);border-radius:var(--r);padding:34px 32px}
.kvittering h2{font-size:26px;margin-bottom:14px}
.kvittering p{font-size:16px;color:var(--dempet)}
.kontaktkort{background:var(--kalk);border-radius:var(--r);padding:34px 32px}
.kontaktkort h2{font-size:22px;margin-bottom:24px}
.kontaktkort dl{margin:0;display:grid;gap:20px}
.kontaktkort dt{font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--dempet);margin-bottom:6px}
.kontaktkort dd{margin:0;font-size:16px}
.kontaktkort dd a{text-decoration:none;border-bottom:1px solid var(--betong-dyp)}
.kontaktkort-note{margin-top:26px;padding-top:22px;border-top:1px solid var(--betong);font-size:14.5px;color:var(--dempet);line-height:1.55}

/* ---------- footer ---------- */
.bunn{background:var(--stal-dyp);color:var(--lys);padding:clamp(60px,7vw,90px) 0 32px}
.bunn-topp{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:clamp(32px,5vw,64px);padding-bottom:46px;border-bottom:1px solid rgba(255,255,255,.14)}
.bunn-om p{color:rgba(255,255,255,.72);font-size:15px;max-width:36ch;margin-top:20px;line-height:1.6}
.bunn .merke-navn{color:var(--lys)}
.bunn .merke-under{color:rgba(255,255,255,.55)}
.bunn h4{font-family:var(--mono);font-size:10.5px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.55);margin-bottom:20px}
.bunn ul{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.bunn a{color:rgba(255,255,255,.86);text-decoration:none;font-size:15px;transition:color .2s var(--ut)}
.bunn-under{display:flex;flex-wrap:wrap;justify-content:space-between;gap:14px;padding-top:26px;font-size:13.5px;color:rgba(255,255,255,.55)}
.bunn-under a{font-size:13.5px;color:rgba(255,255,255,.72);text-decoration:underline;text-underline-offset:3px}
@media (max-width:780px){.bunn-topp{grid-template-columns:1fr;gap:36px}}


/* Berøringsskjermer utløser :hover ved trykk og blir hengende der.
   Alle hover-effekter ligger derfor bak en pekerspørring. */
@media (hover:hover) and (pointer:fine){
  .knapp-primar:hover{background:var(--stal-dyp);transform:translateY(-2px);box-shadow:0 10px 24px rgba(43,76,94,.26)}
  .knapp-sekundar:hover{border-color:var(--blekk);transform:translateY(-2px);box-shadow:var(--skygge)}
  .knapp-lys:hover{transform:translateY(-2px);box-shadow:0 12px 30px rgba(25,24,23,.3)}
  .knapp-kant-lys:hover{border-color:var(--lys);background:rgba(255,255,255,.1)}
  .tekstlenke:hover{border-color:var(--stal);gap:14px}
  .meny a:hover{color:var(--blekk);background:rgba(255,255,255,.85)}
  .meny a[aria-current]:hover{color:var(--lys);background:var(--stal-dyp)}
  .topp-tlf:hover{background:rgba(25,24,23,.05)}
  .tj-meny a:hover{color:var(--blekk);background:var(--kalk)}
  .kort-lenke:hover{transform:translateY(-5px);box-shadow:var(--skygge-hev);border-color:transparent}
  .prosjekt:hover{transform:translateY(-5px);box-shadow:var(--skygge-hev);border-color:transparent}
  .prosjekt:hover .prosjekt-bilde img{transform:scale(1.045)}
  .rute:hover img{transform:scale(1.045)}
  .omrade-liste li:hover{border-color:var(--stal);transform:translateY(-2px)}
  .filter button:hover{border-color:var(--blekk)}
  .smuler a:hover{border-color:var(--blekk)}
  .kontaktkort dd a:hover{border-color:var(--blekk)}
  .bunn a:hover{color:var(--lys);text-decoration:underline;text-underline-offset:3px}
}

/* ---------- inntoning ---------- */
.rv{opacity:0;transform:translateY(18px);transition:opacity .8s var(--ut),transform .8s var(--ut)}
.rv.er-inne{opacity:1;transform:none}
.rv-d1{transition-delay:.07s}
.rv-d2{transition-delay:.14s}
.rv-d3{transition-delay:.21s}

/* scroll-drevet parallakse der nettleseren støtter det */
@supports (animation-timeline: view()){
  @media (prefers-reduced-motion:no-preference){
    .hero-bilde{animation:heroDrift linear both;animation-timeline:view();animation-range:entry 0% exit 100%}
    @keyframes heroDrift{from{transform:translateY(0)}to{transform:translateY(5%)}}
    .splitt-bilde img{animation:bildeDrift linear both;animation-timeline:view();animation-range:entry 0% exit 100%}
    @keyframes bildeDrift{from{transform:scale(1.06) translateY(-2.2%)}to{transform:scale(1.06) translateY(2.2%)}}
  }
}

html.vis .rv{opacity:1!important;transform:none!important;transition:none!important}
html.vis .ord > span{transform:none!important;opacity:1!important;animation:none!important}
html.vis .tonInn{opacity:1!important;transform:none!important;animation:none!important}
html.vis .steg{opacity:1!important}
html.vis .utsagn span{clip-path:none!important;transition:none!important}
html.vis .indeks-visning img:first-of-type{opacity:1}

@media (prefers-reduced-motion:reduce){
  /* Redusert bevegelse betyr mindre og mykere, ikke null. Toning som forklarer
     rekkefølge beholdes. All forflytning og skalering fjernes. */
  .rv{transform:none!important;transition:opacity .3s ease!important}
  .ord > span{transform:none!important;opacity:1!important;animation:none!important}
  .tonInn{transform:none!important;animation:tonInnRolig .3s ease forwards!important}
  @keyframes tonInnRolig{from{opacity:0}to{opacity:1}}
  .steg{transition:opacity .3s ease!important}
  html.klar .utsagn span{clip-path:none!important;transition:none!important}
  .rute img,.prosjekt-bilde img,.indeks-visning img,.splitt-bilde img{transform:none!important;filter:none!important}
  .knapp,.kort,.prosjekt,.kort-lenke,.omrade-liste li,.indeks-rad > span{transform:none!important;transition:background .2s ease,border-color .2s ease,color .2s ease!important}
  .topp-pille{transition:background .2s ease,box-shadow .2s ease!important}
  .hero-bilde{animation:none!important}
}

[hidden]{display:none!important}