/* Kontinuum — delt grunnstilark
 * =============================
 *
 * Autoritativ kilde for alt som er felles paa tvers av sidene. Foer dette
 * fantes de samme reglene kopiert inline i ni HTML-filer, og de hadde drevet
 * fra hverandre: fire ulike containerbredder, to ulike mobilgutter, og en
 * logo som stod 50 px fra hverandre avhengig av hvilken side du var paa.
 *
 * Alle fargene og fontvariablene under er hentet uendret fra sidene. De var
 * byte-identiske i alle ni filer, saa sammenslaaingen endrer ingen farge.
 *
 * Sideunik CSS blir liggende lokalt i hver side. Det er bare de felles
 * layout- og merkevarereglene som er samlet her.
 *
 * Serveres fra /assets/css/kontinuum-base.css, altsaa rotabsolutt. Sidene
 * ligger paa flere mappenivaaer, og 404-siden vises for vilkaarlige adresser
 * der en relativ sti ikke kan fungere.
 */

/* ---------------------------------------------------------------- fonter
 * Selvhostet, ingen forespoersler til Google. Laa foer duplisert i hver side
 * med ulike relative stier, slik at /forankret/ lastet sitt eget sett.
 */
@font-face{font-family:'Lora';font-style:normal;font-weight:400;font-display:swap;src:url('/assets/fonts/lora-latin-400-normal.woff2') format('woff2');}
@font-face{font-family:'Lora';font-style:normal;font-weight:500;font-display:swap;src:url('/assets/fonts/lora-latin-500-normal.woff2') format('woff2');}
@font-face{font-family:'Lora';font-style:normal;font-weight:600;font-display:swap;src:url('/assets/fonts/lora-latin-600-normal.woff2') format('woff2');}
@font-face{font-family:'Lora';font-style:italic;font-weight:400;font-display:swap;src:url('/assets/fonts/lora-latin-400-italic.woff2') format('woff2');}
@font-face{font-family:'Lora';font-style:italic;font-weight:500;font-display:swap;src:url('/assets/fonts/lora-latin-500-italic.woff2') format('woff2');}
@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url('/assets/fonts/inter-latin-400-normal.woff2') format('woff2');}
@font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;src:url('/assets/fonts/inter-latin-500-normal.woff2') format('woff2');}
@font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;src:url('/assets/fonts/inter-latin-600-normal.woff2') format('woff2');}

/* ------------------------------------------------------------ variabler */
:root{
  /* Palett — uendret fra dagens profil */
  --paper:#F6F0E8;
  --surface:#FBF7F1;
  --sunken:#EFE7DB;
  --hairline:#E3DACB;
  --ink:#24211E;
  --muted:#6B6358;
  --olive:#5E6B4F;
  --terra:#B5764F;
  --terra-700:#9E5A3C;
  --moss:#394234;
  --cream:#F6F0E8;
  /* Dempet footertekst. Laa foer hardkodet som #CDC6B8 i seks filer. */
  --cream-muted:#CDC6B8;
  /* Terrakotta paa moss i footerlenker, hardkodet som #D6A283 foer. */
  --terra-light:#D6A283;

  /* Radier — uendret */
  --r-s:10px;
  --r-m:14px;
  --r-l:20px;

  /* Typografi — uendret */
  --serif:'Lora',Georgia,serif;
  --sans:'Inter','Liberation Sans',-apple-system,'Segoe UI',Roboto,Arial,sans-serif;

  /* Breddesystem.
   * Tre bevisste bredder innenfor samme ytre rutenett. Verdiene er
   * innholdsbredder: containeren legger sidegutteren utenpaa.
   *
   * wide      ramme og flater: topplinje, footer, hero, kort, bilder
   * standard  vanlige innholdsseksjoner
   * readable  loepende tekst og juridisk innhold
   *
   * Lesebredden er 720 px mot dagens 592-712. Ved 18 px gir det rundt 78
   * tegn per linje, som fortsatt er innenfor et godt leseintervall.
   */
  --page-gutter:clamp(18px, 4vw, 32px);
  --content-wide:1200px;
  --content-standard:1040px;
  --content-readable:720px;
}

/* ---------------------------------------------------------- grunnoppsett */
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  font-size:18px;
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
}

/* Hindrer at et bredt element kan skyve hele siden sidelengs. */
img,svg,video{max-width:100%;}

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

/* -------------------------------------------------------------- shell
 * Det ytre rutenettet. Alle tre breddene deler samme sidegutter, slik at
 * venstre gridlinje er den samme uansett hvilken bredde en seksjon bruker.
 */
.k-shell{
  width:100%;
  margin-inline:auto;
  padding-inline:var(--page-gutter);
  max-width:calc(var(--content-standard) + 2 * var(--page-gutter));
}
.k-shell--wide{max-width:calc(var(--content-wide) + 2 * var(--page-gutter));}
.k-shell--readable{max-width:calc(var(--content-readable) + 2 * var(--page-gutter));}

/* Tekstspalte inne i en bredere shell. Uten egen sidegutter, siden den
 * ytre shellen allerede har lagt paa gutteren. */
.k-text,
.k-les{max-width:var(--content-readable);}

/* Alle sider deler ETT ytre rutenett, ogsaa rene tekstsider.
 *
 * Grunnen er en direkte foelge av kravet om at logoen skal staa identisk paa
 * alle sider: da maa topplinja ha samme bredde overalt. Hvis innholdsrammen
 * er smalere enn topplinja, faar logoen en annen venstrekant enn teksten
 * under, og de to ser ut til aa hoere til hvert sitt system.
 *
 * Loesningen er at rammen er den samme, og at baandene inne i den er smalere
 * og venstrestilte. Da starter logo, tittel, broedtekst og kort paa samme
 * gridlinje, uansett hvor brede de er.
 */
.wrap > *{max-width:var(--content-standard);}

/* Sider som er bygget for full bredde melder seg ut per seksjon. */
.wrap.k-bred > *{max-width:none;}

/* Kjernen i «bred ramme, smal tekst».
 *
 * Innholdsrammen kan vaere 1040 eller 1200 px, men loepende tekst skal aldri
 * bli bredere enn lesebredden. Regelen treffer bare tekstelementer, saa kort,
 * rutenett, bilder og andre flater faar bruke hele rammen.
 *
 * Inne i en tokolonners grid er kolonnen allerede smalere enn 720 px, saa
 * regelen er et rent tak og endrer ingenting der.
 */
.wrap p,
.wrap li,
.wrap h2,
.wrap h3,
.wrap blockquote,
.wrap .sub,
.wrap .lead,
.wrap .intro,
.wrap .support,
.wrap .pullquote{max-width:var(--content-readable);}

/* Unntak: elementer som er ramme eller rad, ikke loepende tekst. */
.wrap .btn-row,
.wrap .cta-group,
.wrap .waitlist-fields,
.wrap .package-price,
.wrap .mapping-price,
.wrap .amount,
.wrap .price{max-width:none;}

/* ------------------------------------------------------------- topplinje
 * Reglene laa foer i partials/topplinje.html og ble kopiert inn i hver side
 * ved bygg. De hoerer hjemme her; partialen eier bare markupen.
 */
.k-topbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding-block:26px 8px;
  font-family:var(--sans);
}
.k-topbar a{text-decoration:none;}

.k-brand{display:flex;align-items:center;gap:10px;flex-shrink:0;}
/* Merket er kun symbol — det inneholder ingen tekst. Navnet staar derfor som
   ekte tekst ved siden av, ikke bakt inn i bildet. Da kan det leses opp,
   soekes i og skaleres med brukerens tekststoerrelse. */
.k-mark{width:33px;height:32px;display:block;flex-shrink:0;}
.k-name{
  font-family:var(--serif);font-weight:600;font-size:25px;
  letter-spacing:.01em;color:var(--ink);line-height:1;white-space:nowrap;
}
/* Lockup: Kontinuum-merket, en haarfin strek, og produktets eget navn. */
.k-produkt{
  display:flex;align-items:center;gap:10px;color:var(--ink);
  font-family:var(--serif);font-weight:600;font-size:17px;letter-spacing:.01em;
  /* Samme line-height som .k-name. Uten den arvet produktnavnet 1,62 fra body
   * og gjorde topplinja 1,3 px hoyere paa produktsidene enn paa husets egne. */
  line-height:1;
}
.k-produkt::before{content:"";width:1px;height:19px;background:var(--hairline);}

.k-nav{display:flex;align-items:center;gap:18px;}
.k-nav > a{color:var(--olive);font-size:15px;font-weight:500;white-space:nowrap;}
.k-nav > a:hover{color:var(--terra-700);}
.k-nav > a[aria-current="page"]{color:var(--ink);font-weight:600;}

.k-drop{position:relative;}
.k-drop summary{
  list-style:none;cursor:pointer;color:var(--olive);font-size:15px;
  font-weight:500;display:flex;align-items:center;gap:5px;user-select:none;
}
.k-drop summary::-webkit-details-marker{display:none;}
.k-drop summary::after{
  content:"";width:6px;height:6px;border-right:1.6px solid currentColor;
  border-bottom:1.6px solid currentColor;transform:rotate(45deg) translateY(-2px);
  transition:transform .15s ease;
}
.k-drop[open] summary::after{transform:rotate(-135deg) translateY(-2px);}
.k-drop summary:hover{color:var(--terra-700);}

.k-menu{
  position:absolute;right:0;top:calc(100% + 10px);min-width:268px;
  background:var(--surface);border:1px solid var(--hairline);border-radius:var(--r-m);
  box-shadow:0 8px 24px rgba(36,33,30,.10);padding:8px;z-index:40;
}
.k-menu a{display:block;padding:10px 12px;border-radius:var(--r-s);}
.k-menu a:hover{background:var(--sunken);}
.k-m-name{display:block;font-family:var(--serif);font-weight:600;font-size:16px;color:var(--ink);}
.k-m-desc{display:block;font-size:13.5px;color:var(--muted);margin-top:2px;line-height:1.4;}
.k-m-group{
  font-size:11.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
  color:var(--muted);padding:12px 12px 5px;margin-top:4px;border-top:1px solid var(--hairline);
}
.k-menu a.k-soon .k-m-name{color:var(--muted);font-weight:500;}

/* ------------------------------------------------- tilgjengelighet, fokus */
.k-skip{
  position:absolute;left:-9999px;top:0;background:var(--terra-700);color:var(--cream);
  padding:10px 16px;border-radius:0 0 var(--r-s) 0;font-size:15px;font-weight:600;z-index:60;
}
.k-skip:focus{left:0;}

.k-drop summary:focus-visible,
.k-nav a:focus-visible,
.k-brand:focus-visible,
a:focus-visible,
button:focus-visible,
summary:focus-visible{outline:2px solid var(--terra-700);outline-offset:3px;border-radius:4px;}

/* ------------------------------------------------------------ sidetitler
 * Fire varianter knyttet til sidetype, ikke til hvilken fil man er i. Foer
 * hadde ni sider seks ulike H1-stoerrelser uten system.
 *
 *   k-tittel--hero   produkt- og forsidehero      /  og  /forankret/
 *   k-tittel--bred   bred landingsside            /studio/
 *   k-tittel         standard informasjonsside    /om-kontinuum, /kommer
 *   k-tittel--rolig  teksttung, juridisk, enkel   om-forankret, personvern,
 *                                                 takk, 404
 *
 * Stoerrelsene skalerer med clamp, saa mobil trenger ingen egne regler.
 * Ingen tittel blir bredere enn lesebredden, selv naar rammen er 1200 px:
 * en overskrift over full bredde er vanskelig aa lese i ett blikk.
 */
.k-tittel,
.k-tittel--hero,
.k-tittel--bred,
.k-tittel--rolig{
  font-family:var(--serif);
  font-weight:600;
  color:var(--ink);
  letter-spacing:-.01em;
  text-wrap:balance;
  max-width:var(--content-readable);
  /* Ett tall for avstanden fra topplinja ned til sidetittelen, mot dagens
   * spenn fra 36 til 124 px. Sider uten egen innledningsseksjon faar den
   * herfra. */
  margin:clamp(28px, 3.4vw, 48px) 0 18px;
}

/* Har siden en innledningsseksjon eller et kort, eier den avstanden i stedet,
 * slik at de to ikke legges oppaa hverandre.
 *
 * Etterkommer, ikke direkte barn: paa Forankret ligger tittelen i .hero-text
 * inne i .hero. Med en barneselektor traff regelen ikke, og siden fikk baade
 * heroens padding og tittelens margin — 96 px mot 48 paa forsiden. */
:is(.hero, .card, .cta) :is(.k-tittel, .k-tittel--hero, .k-tittel--bred, .k-tittel--rolig){
  margin-top:0;
}
.k-tittel--hero{font-size:clamp(32px, 2.2vw + 24px, 44px);line-height:1.14;letter-spacing:.005em;}
.k-tittel--bred{font-size:clamp(32px, 1.6vw + 25px, 42px);line-height:1.16;}
.k-tittel{font-size:clamp(30px, 1.2vw + 25px, 40px);line-height:1.18;}
.k-tittel--rolig{font-size:clamp(26px, .8vw + 22px, 34px);line-height:1.22;}

/* Avstanden fra topplinja ned til sidetittelen. Ett tall for hele nettstedet,
 * i stedet for dagens spenn fra 36 til 124 px. Sidene setter den paa sin egen
 * .hero eller tilsvarende innledningsseksjon. */
.k-tittelseksjon{padding-block:clamp(28px, 3.4vw, 48px) 8px;}

/* ------------------------------------------------------------ fotografi
 * Redaksjonelle bilder fra bildebanken. Bildene er allerede fargebehandlet,
 * saa det ligger ingen filter, opacity eller toning oppaa dem her.
 *
 *   k-foto            liggende bilde i standardbaandet
 *   k-foto--smal      liggende bilde paa lesebredden, som en rolig pause
 *   k-foto-side       staaende bilde ved siden av tekst
 *
 * Radius og haarfin kant foelger kortstilen, slik at bildene hoerer til de
 * oevrige flatene og ikke ser paalimte ut.
 */
.k-foto{
  display:block;
  width:100%;
  height:auto;
  border-radius:var(--r-l);
  border:1px solid var(--hairline);
  margin:clamp(20px, 2.6vw, 34px) 0;
  background:var(--sunken);
}
.k-foto--smal{max-width:var(--content-readable);}
/* Mindre luft over. Brukes der bildet foelger rett etter en hero og
   tilbudet under skal komme raskere fram. */
.k-foto--tett{margin-top:clamp(8px, 1.2vw, 16px);}

/* Bilde og tekst side ved side. Stables under 720 px, og bildet kommer
 * foerst slik at det ikke havner etter en lang tekstblokk paa mobil. */
.k-foto-side{
  display:grid;
  gap:clamp(18px, 2.4vw, 30px);
  align-items:start;
  margin:clamp(20px, 2.6vw, 34px) 0;
}
.k-foto-side > img{
  display:block;width:100%;height:auto;
  border-radius:var(--r-l);border:1px solid var(--hairline);background:var(--sunken);
}
@media (min-width:720px){
  .k-foto-side{grid-template-columns:minmax(0,300px) minmax(0,1fr);}
  .k-foto-side > img{position:sticky;top:24px;}
}

/* Bildetekst. Bare der teksten faktisk tilfoerer noe. */
.k-bildetekst{
  color:var(--muted);
  font-size:14.5px;
  line-height:1.5;
  margin:-8px 0 0;
  max-width:var(--content-readable);
}

/* --------------------------------------------------------------- footer
 * Grunnreglene. Hver side beholder sitt eget innhold og sine egne lenker.
 */
footer{
  background:var(--moss);
  color:var(--cream);
  margin-top:clamp(28px, 4vw, 44px);
  border-radius:var(--r-l) var(--r-l) 0 0;
}
footer .inner{
  margin-inline:auto;
  padding-block:30px 40px;
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;
}
footer .fm{font-family:var(--serif);font-weight:600;font-size:18px;color:var(--cream);}
footer p{color:var(--cream-muted);font-size:14px;margin:6px 0 0;width:100%;}
footer a{color:var(--terra-light);}
footer .juridisk{color:var(--cream-muted);font-size:13px;margin:14px 0 0;width:100%;}
.footer-symbol{width:32px;height:auto;}

/* ------------------------------------------------------ smale skjermer */
@media (max-width:560px){
  .k-topbar{padding-top:18px;gap:8px;}
  .k-brand{gap:8px;}
  .k-mark{width:27px;height:26px;}
  .k-name{font-size:21px;}
  .k-produkt{font-size:15px;gap:8px;}
  .k-produkt::before{height:16px;}
  .k-nav{gap:13px;}
  .k-nav > a,.k-drop summary{font-size:14px;}
  .k-menu{min-width:0;width:min(84vw,268px);}
  /* Har siden et produktnavn, blir navnet for bredt paa en 390 px skjerm.
     Da skjules teksten og merket staar alene — identiteten er fortsatt til
     stede, bare kortere. Lenken har aria-label, saa merket har fortsatt et
     meningsfullt navn naar den synlige teksten forsvinner. */
  .k-brand:has(.k-produkt) .k-name{display:none;}
}

@media (max-width:520px){
  body{font-size:17px;}
}

/* Smaa telefoner. Paa 320 px stakk topplinja 25 px utenfor viewporten og gav
 * vannrett rulling paa forsiden, Om og Kommer. Feilen fantes ogsaa foer denne
 * runden. Merket, navnetrekket og navigasjonen krymper et hakk til her, slik
 * at raden faar plass uten at noe maa fjernes fra navigasjonen. */
@media (max-width:400px){
  .k-topbar{gap:6px;}
  .k-brand{gap:6px;}
  .k-mark{width:24px;height:23px;}
  .k-name{font-size:19px;}
  .k-nav{gap:10px;}
  .k-nav > a,.k-drop summary{font-size:13.5px;}
  .k-drop summary{gap:4px;}
}