/* ---------- Fonter (selvhostet, ingen tredjepart) ----------
   ITF Free Font License + OnlineWebFonts-konvertering (demo) – ikke lisensiert for kommersiell levering + SIL Open Font License 1.1. Se assets/fonts/lisenser/
   Variable filer: én per stil dekker hele vektaksen 100-900.
   ---------------------------------------------------------- */
@font-face{
  font-family:'Suisse Intl';
  src:url('../assets/fonts/suisse-intl-300-normal.woff2') format('woff2');
  font-weight:300;font-style:normal;font-display:swap;
}
@font-face{
  font-family:'Suisse Intl';
  src:url('../assets/fonts/suisse-intl-400-normal.woff2') format('woff2');
  font-weight:400;font-style:normal;font-display:swap;
}
@font-face{
  font-family:'Suisse Intl';
  src:url('../assets/fonts/suisse-intl-600-normal.woff2') format('woff2');
  font-weight:600;font-style:normal;font-display:swap;
}
@font-face{
  font-family:'Suisse Intl';
  src:url('../assets/fonts/suisse-intl-700-normal.woff2') format('woff2');
  font-weight:700;font-style:normal;font-display:swap;
}
@font-face{
  font-family:'Familjen Grotesk';
  src:url('../assets/fonts/familjen-grotesk-normal.woff2') format('woff2');
  font-weight:100 900;font-style:normal;font-display:swap;
}
@font-face{
  font-family:'Newsreader';
  src:url('../assets/fonts/newsreader-normal.woff2') format('woff2');
  font-weight:100 900;font-style:normal;font-display:swap;
}
@font-face{
  font-family:'Switzer';
  src:url('../assets/fonts/switzer-normal.woff2') format('woff2');
  font-weight:100 900;font-style:normal;font-display:swap;
}
@font-face{
  font-family:'IBM Plex Mono';
  src:url('../assets/fonts/ibm-plex-mono-normal.woff2') format('woff2');
  font-weight:100 900;font-style:normal;font-display:swap;
}

/* ---------- Design DNA ----------
   Oppsett: Hämmerli & Caccia (haemmerlicaccia.ch): svart navneflate + innfelt foto, loddrette prosjektstriper,
   display 96 px / lh 0,90 / -4 %, mono-merker i hakeparentes, kald grå flate #EBEBEB.
   Hero 2 og detaljer: AAT Architecten (aat-architecten.be): setning nederst til venstre, stående bilde til høyre,
   to grå trinn i teksten, ingen knapper, seksjonsluft 128 px.
   Aksent: treverket i Steinerskolen i Stavanger, prøvetatt i kundens eget foto (#9D4A29). */
:root{
  --c-papir:#EBEBEB; --c-flate:#F6F6F5; --c-blekk:#0A0A09; --c-dempet:#5C5C5A; --c-linje:#0A0A09;
  --c-panel:#050504; --c-panel-tekst:#FFFFFF; --c-panel-dempet:#A3A3A0; --c-panel-aksent:#E0A27B;
  --c-aksent:#9D4A29; --c-fokus:#9D4A29;
  --f-display:'Suisse Intl', 'Helvetica Neue', Arial, sans-serif; --w-display:400; --lh-display:.9; --ls-display:-.04em;
  --f-tekst:'Suisse Intl', 'Helvetica Neue', Arial, sans-serif;
  --f-mono:'IBM Plex Mono', ui-monospace, Menlo, monospace;
  --s-1:8px; --s-2:16px; --s-3:24px; --s-4:32px; --s-5:48px; --s-6:64px; --s-7:96px; --s-8:128px;
  --kant:16px; --topp:32px;
  --t-display:clamp(52px, 6.6vw, 96px); --t-hero:clamp(56px, 6.3vw, 92px); --t-setning:clamp(28px, 3.1vw, 46px);
  --t-stor:clamp(22px, 2.2vw, 32px); --t-tekst:17px; --t-liten:14px; --t-mono:12px;
  --ease:cubic-bezier(.23,1,.32,1);
  --z-dekor:1; --z-sticky:100; --z-dokk:200; --z-overlay:300; --z-panel:400; --z-varsel:500;
}
:root[data-pal="2"]{
  --c-papir:#F4F2F1; --c-flate:#FBFAF9; --c-blekk:#2A2A2A; --c-dempet:#5F5B58; --c-linje:#2A2A2A;
  --c-panel:#24302F; --c-panel-tekst:#F4F2F1; --c-panel-dempet:#A9B3B1; --c-panel-aksent:#E3B48F;
  --c-aksent:#84472D; --c-fokus:#84472D;
}
:root[data-pal="3"]{
  --c-papir:#E6E0D6; --c-flate:#F1ECE4; --c-blekk:#241A16; --c-dempet:#5E5048; --c-linje:#241A16;
  --c-panel:#341514; --c-panel-tekst:#F1E6DA; --c-panel-dempet:#C3A99B; --c-panel-aksent:#EAC299;
  --c-aksent:#8A3B1C; --c-fokus:#8A3B1C;
}
:root[data-font="2"]{
  --f-display:'Familjen Grotesk', Arial, sans-serif; --w-display:500; --lh-display:.92; --ls-display:-.035em;
  --f-tekst:'Switzer', Arial, sans-serif;
}
:root[data-font="3"]{
  --f-display:'Newsreader', Georgia, serif; --w-display:300; --lh-display:.96; --ls-display:-.025em;
  --f-tekst:'Switzer', Arial, sans-serif;
}

/* ---------- Grunnlag ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:calc(var(--topp) + var(--s-2))}
body{margin:0;background:var(--c-papir);color:var(--c-blekk);font:400 var(--t-tekst)/1.5 var(--f-tekst);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img,video{display:block;max-width:100%;height:auto}
a{color:inherit}
h1,h2,h3,p,ul,figure,blockquote{margin:0;padding:0}
ul{list-style:none}
[hidden]{display:none!important}
:focus-visible{outline:2px solid var(--c-fokus);outline-offset:3px;border-radius:2px}
.vis-skjermleser{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.hopp{position:absolute;left:var(--kant);top:-60px;z-index:var(--z-varsel);background:var(--c-blekk);color:var(--c-papir);padding:12px 16px}
.hopp:focus{top:8px}
.ramme{padding-inline:var(--kant);max-width:1440px;margin-inline:auto}
.ikon{width:1.1em;height:1.1em;flex:none;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.merknad{font:400 var(--t-mono)/1.4 var(--f-mono);letter-spacing:.02em;text-transform:uppercase;color:var(--c-dempet)}
.lenke{display:inline-flex;align-items:center;gap:.45em;min-height:44px;text-decoration:underline;text-underline-offset:.22em;text-decoration-thickness:1px}
.lenke:hover{color:var(--c-aksent)}
.seksjon__tittel{font:var(--w-display) var(--t-display)/var(--lh-display) var(--f-display);letter-spacing:var(--ls-display);margin-bottom:var(--s-6)}

/* Mørke flater overstyrer tokens, ikke reglene (regel 4) */
.hero__flate,.sitat,.topp,.bunn{--c-blekk:var(--c-panel-tekst);--c-dempet:var(--c-panel-dempet);--c-aksent:var(--c-panel-aksent);--c-fokus:var(--c-panel-aksent);background:var(--c-panel);color:var(--c-blekk)}

/* ---------- Topplinje: fire ord spredt over bredden ---------- */
.topp{position:sticky;top:0;z-index:var(--z-sticky)}
.topp__rad{display:grid;grid-template-columns:repeat(4,1fr);align-items:center;height:var(--topp);padding-inline:var(--kant);font-size:16px}
.topp__rad a{text-decoration:none;display:flex;align-items:center;height:100%}
.topp__rad a:nth-child(2){justify-self:center}.topp__rad a:nth-child(3){justify-self:center}.topp__rad a:nth-child(4){justify-self:end}
.topp__rad a:hover{color:var(--c-panel-aksent)}

/* ---------- Heroene ---------- */
.hero{display:none}
:root[data-hero="1"] .hero[data-hero="1"],:root[data-hero="2"] .hero[data-hero="2"]{display:grid}
.anim-hero .hero__line-in{transform:translateY(150%)}
.anim-hero .hero__sub{opacity:0}
.hero__line{display:block;overflow:hidden;padding:.2em .25em .26em;margin:-.2em -.25em -.26em}
.hero__line-in{display:block}

/* Hero 1 */
.hero--navn{grid-template-columns:1fr 1fr;grid-template-rows:minmax(0,1fr);height:max(620px, calc(100svh - var(--topp)))}
.hero__flate{display:flex;flex-direction:column;justify-content:space-between;padding:var(--s-5) var(--kant) var(--s-2)}
.hero__topp{display:grid;gap:var(--s-2);max-width:30em}
.hero__sted{font:400 var(--t-mono)/1.4 var(--f-mono);letter-spacing:.04em;text-transform:uppercase;color:var(--c-dempet)}
.hero__ingress{font-size:var(--t-stor);line-height:1.25;letter-spacing:-.01em}
.hero__lenker{display:flex;flex-wrap:wrap;gap:0 var(--s-4)}
.hero__navn{display:flex;flex-direction:column;font:var(--w-display) var(--t-hero)/var(--lh-display) var(--f-display);letter-spacing:var(--ls-display);margin-top:var(--s-5)}
.hero__bilde{position:relative;padding:var(--s-2);background:var(--c-papir);display:flex;flex-direction:column;gap:var(--s-1);min-height:0;overflow:hidden}
.hero__bilde img{flex:1 1 0;width:100%;height:100%;min-height:0;object-fit:cover}

/* Hero 2 */
.hero--setning{grid-template-columns:minmax(0,7fr) minmax(0,4fr);gap:var(--s-5);min-height:max(620px, calc(100svh - var(--topp)));padding:var(--s-5) var(--kant);background:var(--c-flate)}
.hero__tekst{display:flex;flex-direction:column;justify-content:flex-end;gap:var(--s-4)}
.hero__setning{display:flex;flex-direction:column;font:var(--w-display) var(--t-setning)/1.12 var(--f-display);letter-spacing:-.015em}
.hero__film{position:relative;overflow:hidden;background:var(--c-papir)}
.hero__film video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}

/* ---------- Prosjekter: loddrette striper ---------- */
.prosjekter{padding-block:var(--s-8)}
.trekk{display:flex;height:min(72vh,680px);min-height:520px;border-right:1px solid var(--c-linje)}
.trekk__ledd{display:flex;border-left:1px solid var(--c-linje);min-width:0}
.trekk__ledd.er-aapen{flex:1}
.trekk__hode{margin:0;font:inherit}
.trekk__hode button{all:unset;box-sizing:border-box;cursor:pointer;display:flex;flex-direction:row;justify-content:space-between;align-items:center;width:76px;height:100%;padding:var(--s-2) 0;writing-mode:vertical-rl;transform:rotate(180deg)}
.trekk__hode button:focus-visible{outline:2px solid var(--c-fokus);outline-offset:-4px}
.trekk__navn{font:var(--w-display) 26px/1 var(--f-display);letter-spacing:-.01em;order:2}
.trekk__merke{font:400 var(--t-mono)/1 var(--f-mono);letter-spacing:.04em;text-transform:uppercase;color:var(--c-dempet);order:1}
.trekk__hode button:hover .trekk__navn{color:var(--c-aksent)}
.trekk__innhold{flex:1;min-width:0;display:flex;flex-direction:column;gap:var(--s-2);padding:var(--s-2) var(--s-3) var(--s-2) 0}
.trekk__innhold img{flex:1;min-height:0;width:100%;object-fit:cover}
.trekk__innhold p{max-width:36em;color:var(--c-dempet)}

/* ---------- Sitat ---------- */
.sitat{padding-block:var(--s-8)}
.sitat__rad{display:grid;grid-template-columns:minmax(0,8fr) minmax(0,4fr);gap:var(--s-6);align-items:end}
.sitat__tekst p{font:var(--w-display) var(--t-stor)/1.25 var(--f-display);letter-spacing:-.01em;max-width:30em}
.sitat__tekst footer{margin-top:var(--s-3)}
.sitat__tekst cite{font-style:normal;color:var(--c-dempet)}
.sitat__bilde{display:grid;gap:var(--s-1)}
.sitat__bilde img{aspect-ratio:4/5;object-fit:cover;width:100%}

/* ---------- Modeller og rom ---------- */
.rom{padding-top:var(--s-8)}
.rom__tittel{font:var(--w-display) var(--t-stor)/1.2 var(--f-display);margin-bottom:var(--s-4)}
.rom__rad{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s-2);padding-inline:var(--kant);max-width:1440px;margin-inline:auto}
.rom__rad li{display:grid;gap:var(--s-1);align-content:start}
.rom__rad img{aspect-ratio:3/4;object-fit:cover;width:100%}

/* ---------- Kontoret ---------- */
.kontor{padding-block:var(--s-8)}
.kontor__rad{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:var(--s-6);align-items:start}
.kontor__ingress{font-size:var(--t-stor);line-height:1.3;letter-spacing:-.01em}
.partnere{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-4)}
.partner{border-top:1px solid var(--c-linje);padding-top:var(--s-2)}
.partner__navn{font:var(--w-display) 26px/1.1 var(--f-display);letter-spacing:-.01em}
.partner__rolle{color:var(--c-dempet);margin:4px 0 var(--s-2)}
.fakta{display:grid;gap:2px}
.fakta li,.fakta a{display:flex;gap:.6em;align-items:flex-start;min-height:44px;padding-block:10px;text-decoration:none;line-height:1.35}
.fakta a{padding-block:0;align-items:center}
.fakta .ikon{margin-top:.12em;color:var(--c-aksent)}
.fakta a:hover span{text-decoration:underline;text-underline-offset:.2em}
.fakta--stor{font-size:20px}
.tidligere{margin-top:var(--s-7);border-top:1px solid var(--c-linje)}
.tidligere summary{cursor:pointer;display:flex;align-items:center;gap:.6em;min-height:56px;font-size:20px;list-style:none}
.tidligere summary::-webkit-details-marker{display:none}
.tidligere summary::after{content:'+';margin-left:auto;font-size:24px}
.tidligere[open] summary::after{content:'−'}
.tidligere__liste{columns:3;column-gap:var(--s-5);padding-block:var(--s-3)}
.tidligere__liste li{break-inside:avoid;display:flex;justify-content:space-between;gap:var(--s-2);padding-block:6px;border-bottom:1px solid color-mix(in srgb, var(--c-linje) 18%, transparent);font-size:15px}

/* ---------- Kontakt og kart ---------- */
.kontakt{padding-block:var(--s-8);background:var(--c-flate)}
.kontakt__rad{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:var(--s-6);align-items:end}
.kontakt .seksjon__tittel{margin-bottom:var(--s-4)}
.kart__ramme{position:relative;overflow:hidden}
.kart__bilde{width:100%;aspect-ratio:9/4;object-fit:cover}
.kart__nal{position:absolute;left:50%;top:50%;display:flex;align-items:center;gap:8px;transform:translate(-9px,-9px)}
.kart__punkt{width:18px;height:18px;border-radius:50%;background:var(--c-aksent);box-shadow:0 0 0 4px var(--c-flate)}
.kart__etikett{white-space:nowrap;background:var(--c-blekk);color:var(--c-flate);font:400 var(--t-liten)/1 var(--f-tekst);padding:8px 10px}
.kart__under{display:flex;flex-wrap:wrap;align-items:center;gap:0 var(--s-4);margin-top:var(--s-1)}
.kart__under .merknad a{color:inherit}

/* ---------- Bunn ---------- */
.bunn{padding-block:var(--s-6) var(--s-5)}
.bunn__rad{display:grid;grid-template-columns:auto 1fr auto auto;gap:var(--s-4);align-items:end}
.bunn__logo{display:block;width:212px;aspect-ratio:425/142;background:var(--c-blekk);-webkit-mask:url(/assets/img/logo.png) no-repeat 0 0/contain;mask:url(/assets/img/logo.png) no-repeat 0 0/contain}
.kart__under .merknad a,.bunn__kreditt a{display:inline-flex;align-items:center;min-height:44px}
.bunn__kreditt a{font-size:var(--t-liten);color:var(--c-dempet);text-underline-offset:.2em}
.bunn__kreditt a:hover{color:var(--c-blekk)}

/* ---------- Dokk (mobil) ---------- */
.dokk{display:none}

/* ---------- Designvalg ---------- */
.lab{position:fixed;right:12px;bottom:12px;z-index:var(--z-panel);font:500 13px/1 var(--f-tekst);color:#111}
.lab__veksle{display:flex;align-items:center;gap:8px;min-height:44px;padding:0 14px;border:1px solid rgba(0,0,0,.12);border-radius:999px;background:rgba(255,255,255,.82);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);cursor:pointer;font:inherit;color:inherit;transition:transform .16s var(--ease)}
.lab__veksle:active{transform:scale(.97)}
.lab__panel{position:absolute;right:0;bottom:52px;display:grid;gap:8px;padding:12px;border:1px solid rgba(0,0,0,.12);border-radius:16px;background:rgba(255,255,255,.88);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);min-width:220px}
.lab__gruppe{display:flex;align-items:center;gap:6px}
.lab__merke{width:26px;font-size:16px}
.lab__gruppe button{min-width:44px;min-height:44px;border:1px solid rgba(0,0,0,.18);border-radius:10px;background:transparent;font:inherit;color:inherit;cursor:pointer}
.lab__gruppe button[aria-pressed="true"]{background:#111;color:#fff;border-color:#111}
.lab__kreditt{font-size:11px;color:#555;padding-top:4px}
.lab__kreditt a{color:#111}

/* ---------- Mobil: ruter, ikke ramse opp ---------- */
@media (max-width: 899px){
  :root{--topp:48px; --t-tekst:16px}
  .topp__rad{font-size:14px;gap:var(--s-2)}
  .topp__rad a:nth-child(1){grid-column:span 1;white-space:nowrap}
  .topp__rad{grid-template-columns:auto 1fr auto auto;column-gap:14px}
  .topp__rad a:nth-child(2){justify-self:end}
  .hero--navn{grid-template-columns:1fr;grid-template-rows:auto;height:auto}
  .hero__flate{padding:var(--s-4) var(--kant) var(--s-2);min-height:58svh}
  .hero__ingress{font-size:20px}
  .hero__navn{font-size:clamp(40px,12.6vw,64px)}
  .hero__bilde{padding:var(--kant)}
  .hero__bilde img{flex:none;aspect-ratio:4/3}
  .hero--setning{grid-template-columns:1fr;min-height:0;padding:var(--s-5) var(--kant) var(--s-4);gap:var(--s-4)}
  .hero__setning{font-size:clamp(21px,6.3vw,30px)}
  .hero__film{width:78%;justify-self:end;aspect-ratio:3/4;height:auto;max-height:min(52svh,440px)}
  .seksjon__tittel{font-size:clamp(44px,13vw,60px);margin-bottom:var(--s-4)}
  .prosjekter,.sitat,.kontor,.kontakt{padding-block:var(--s-6)}
  .rom{padding-top:var(--s-6)}
  .trekk{flex-direction:column;height:auto;min-height:0;border-right:0;border-bottom:1px solid var(--c-linje)}
  .trekk__ledd{flex-direction:column;border-left:0;border-top:1px solid var(--c-linje)}
  .trekk__hode button{writing-mode:horizontal-tb;transform:none;flex-direction:row;width:100%;height:auto;min-height:52px;padding:10px 0;align-items:baseline;gap:var(--s-2)}
  .trekk__navn{order:1;font-size:20px}
  .trekk__merke{order:2;white-space:nowrap}
  .trekk__innhold{padding:0 0 var(--s-2)}
  .trekk__innhold img{flex:none;aspect-ratio:3/2}
  .trekk__innhold p{font-size:15px}
  .sitat__rad{grid-template-columns:1fr;gap:var(--s-4)}
  .sitat__tekst p{font-size:21px}
  .sitat__bilde{display:none}
  .rom__rad{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:12px;scrollbar-width:none;padding-bottom:4px}
  .rom__rad::-webkit-scrollbar{display:none}
  .rom__rad li{flex:0 0 62%;scroll-snap-align:start}
  .kontor__rad{grid-template-columns:1fr;gap:var(--s-4)}
  .kontor__ingress{font-size:19px}
  .partnere{grid-template-columns:1fr;gap:var(--s-3)}
  .partner .fakta li:nth-child(n+2){display:none}
  .tidligere{margin-top:var(--s-5)}
  .tidligere__liste{columns:1}
  .kontakt__rad{grid-template-columns:1fr;gap:var(--s-3)}
  .fakta--stor{font-size:18px}
  .kart__bilde{aspect-ratio:4/3}
  .bunn{padding-block:var(--s-5) 96px}
  .bunn__rad{grid-template-columns:1fr;gap:var(--s-2)}
  .bunn__logo{width:170px}
  .dokk{position:fixed;left:0;right:0;bottom:0;z-index:var(--z-dokk);display:grid;grid-template-columns:1fr 1fr;background:var(--c-panel);color:var(--c-panel-tekst);transform:translateY(110%);transition:transform .3s var(--ease)}
  .dokk a{display:flex;align-items:center;justify-content:center;gap:8px;min-height:60px;text-decoration:none;font-size:16px}
  .dokk a+a{border-left:1px solid rgba(255,255,255,.18)}
  .dokk-ute .dokk{transform:none}
  .dokk-ute .lab{bottom:72px}
  .lab__veksle-tekst{display:none}
}
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important}
  .anim-hero .hero__line-in{transform:none}
  .anim-hero .hero__sub{opacity:1}
}