

@font-face {
  font-family: "Mona Sans";
  src: url("../assets/fonts/mona-sans-var.woff2") format("woff2");
  font-weight: 200 900;
  font-stretch: 75% 125%;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: light;

  
  --grunn: #f4f2ee;          
  --grunn-eik: #e9e6e0;      
  --grunn-dyp: #dfdbd3;      
  --flate: #fbfaf7;          
  --vindu-tom: #e2ded7;      

  
  --tekst: #17181a;          
  --tekst-demp: #55585c;     
  --tekst-svak: #b2b0ab;     

  
  --aksent: #17181a;
  --aksent-lys: #3b3e43;
  --aksent-svak: rgba(23, 24, 26, 0.06);
  --aksent-linje: rgba(23, 24, 26, 0.26);

  
  --knapp: #1f2227;
  --knapp-hover: #3a3e45;
  --knapp-tekst: #f4f2ee;

  
  --linje: rgba(23, 24, 26, 0.13);
  --linje-sterk: rgba(23, 24, 26, 0.32);

  
  --nav-flate: rgba(244, 242, 238, 0.86);
  --skygge-kort: 0 28px 70px rgba(17, 18, 20, 0.26);

  
  --rom: #212428;
  --rom-dyp: #1a1c20;
  --rom-flate: #2b2f34;
  --rom-rgb: 33, 36, 40;     
  --rom-tekst: #eeedea;      
  --rom-demp: #a9acb0;       
  --rom-svak: #6b6f75;
  --rom-linje: rgba(238, 237, 234, 0.15);
  --rom-linje-sterk: rgba(238, 237, 234, 0.36);

  
  --dis-topp: rgba(17, 18, 20, 0.58);
  --dis-midt: rgba(17, 18, 20, 0.3);
  --dis-svak: rgba(17, 18, 20, 0.12);
  --dis-ingen: rgba(17, 18, 20, 0);
  --skygge-bunn: rgba(17, 18, 20, 0.5);
  --skygge-ingen: rgba(17, 18, 20, 0);
  --skygge-bunn-dyp: rgba(17, 18, 20, 0.66);  
  --skygge-bunn-lett: rgba(17, 18, 20, 0.18);
  --skrift-skygge-bilde: 0 1px 2px rgba(17, 18, 20, 0.3), 0 0 22px rgba(17, 18, 20, 0.32);
  --knapp-pa-bilde-hover: #ffffff;
  --tekst-pa-bilde: #f7f5f1;
  --linje-pa-bilde: rgba(247, 245, 241, 0.5);
  --linje-pa-bilde-svak: rgba(247, 245, 241, 0.22);
  --tekst-pa-bilde-demp: rgba(247, 245, 241, 0.8);
  --glass-pa-bilde: rgba(17, 18, 20, 0.4);

  
  --flate-mork: #212428;
  --tekst-mork-demp: rgba(238, 237, 234, 0.7);
  --linje-mork: rgba(238, 237, 234, 0.14);
  --knapp-pa-film: rgba(17, 18, 20, 0.55);

  
  --feil: #b3402c;

  
  --font-display: "Mona Sans", "Helvetica Neue", "Avenir Next", sans-serif;
  --font-body: "Mona Sans", "Helvetica Neue", "Avenir Next", sans-serif;
  --bredde-tittel: 108%;     
  --bredde-merke: 125%;      
  --tekst-brod: clamp(1.0625rem, 1rem + 0.25vw, 1.125rem);   
  --tekst-ingress: clamp(1.125rem, 1.05rem + 0.35vw, 1.35rem);
  --tekst-liten: 0.9375rem;
  --tekst-merke: 0.75rem;
  --tekst-h1: clamp(2.3rem, 1.4rem + 3.2vw, 3.7rem);
  --tekst-h2: clamp(2.2rem, 1.2rem + 3.3vw, 4.6rem);
  --tekst-h3: clamp(1.55rem, 1.2rem + 1.1vw, 2.3rem);
  --tekst-manifest: clamp(1.85rem, 1rem + 2.9vw, 4.1rem);

  
  --marg: clamp(1rem, 3.4vw, 3.5rem);                         
  --seksjon-luft: clamp(3.5rem, 2.25rem + 4vw, 6.5rem);
  --maks: 1480px;
  --nav-h: 4rem;
  --meny-flate: var(--flate);                               
  --meny-kant: rgba(23, 24, 26, 0.09);
  --meny-skygge: 0 1px 2px rgba(23, 24, 26, 0.06), 0 24px 48px -22px rgba(23, 24, 26, 0.42);
  --ringelinje-h: 4.5rem;

  
  --hero-reise: 0.85;     
  --ease-ut: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-myk: cubic-bezier(0.65, 0, 0.35, 1);

  
  --radius: 2px;
}

.rom {
  --grunn: var(--rom);
  --grunn-eik: var(--rom);
  --grunn-dyp: var(--rom-dyp);
  --flate: var(--rom-flate);
  --vindu-tom: var(--rom-flate);
  --tekst: var(--rom-tekst);
  --tekst-demp: var(--rom-demp);
  --tekst-svak: var(--rom-svak);
  --aksent: var(--rom-tekst);
  --aksent-lys: #ffffff;
  --aksent-svak: rgba(238, 237, 234, 0.08);
  --aksent-linje: var(--rom-linje-sterk);
  --linje: var(--rom-linje);
  --linje-sterk: var(--rom-linje-sterk);
  --knapp: var(--rom-tekst);
  --knapp-hover: #ffffff;
  --knapp-tekst: var(--rom);
  color-scheme: dark;
  background: var(--rom);
  color: var(--rom-tekst);
}

@media (min-width: 1024px) {
  :root {
    --nav-h: 5rem;
  }
}

@media (pointer: coarse) {
  :root {
    --hero-reise: 0.75;
  }
}

:root {
  --k1-papir: var(--flate);        
  --k1-svak-ord: 0.27;             
  --k1-reise: 1.5;                 
  --k1-innmarg: 0.5rem;            
  --k1-strip-h: 2.15rem;           
  --k1-fakta-h: 5.4rem;            
  --k1-rute: rgba(23, 24, 26, 0.045); 
  --k1-rute-str: 3.125cqw;         
  --k1-ramme-andel: 0.6;           
  --k1-pre: 0.3;                   
}

@media (pointer: coarse) {
  :root {
    --k1-reise: 1.1;
  }
}

@media (min-width: 100rem) and (min-height: 62.5rem) {
  :root {
    --k1-ramme-andel: 0.66;
  }
}

:root {
  --s01-topp: clamp(3.25rem, 2.25rem + 3.5vw, 6rem);       
  --s01-bunn: clamp(3rem, 2rem + 3vw, 5rem);               
  --s01-liste-gap: clamp(1rem, 2.4vw, 1.5rem);             
  --s01-radius: 3px;                                       
  --s01-skygge: 0 1px 2px rgba(17, 18, 20, 0.16), 0 18px 36px -18px rgba(17, 18, 20, 0.4), 0 60px 110px -44px rgba(17, 18, 20, 0.5);
  --s01-lys: linear-gradient(180deg, rgba(244, 242, 238, 0.06) 0%, rgba(244, 242, 238, 0) 58%);   
  --s01-slor: #111214;                                     
  --s01-felt-pad: clamp(1.25rem, 0.6rem + 1.9vw, 2.75rem); 
  --s01-felt-pad-y: clamp(1.25rem, 0.75rem + 1.5vw, 2.5rem);   
  --s01-navn-str: clamp(1.85rem, 0.9rem + 2.9vw, 3.6rem);  
  --s01-navn-h: 7.4svh;                                    
  --s01-navn-h-tett: 6svh;                                 
  --s01-andel: 0.64;                                       
  --s01-andel-b: 0.6;                                      
  --s01-forhold-min: 1.08;                                 
  --s01-kort-maks: 0.62;                                   
  --s01-tekst-stor: 1.5rem;                                
  --s01-rad: 0.92;                                         
  --s01-rad-gap: calc(var(--marg) + 0.5rem);               
  --s01-reise-a: 1.8;                                      
  --s01-reise-b: 1.6;                                      
  --s01-kant: 1.75rem;                                     
  --s01-kant-smal: 1.25rem;                                
}

@media (pointer: coarse) {
  :root {
    --s01-reise-a: 1.32;
    --s01-reise-b: 1.2;
  }
}

@media (min-width: 80rem) {
  :root {
    --s01-kort-maks: 0.46;
  }
}

@media (min-width: 80rem) and (max-aspect-ratio: 17/10) {
  :root {
    --s01-andel: 0.7;
    --s01-andel-b: 0.63;
  }
}

:root {
  --s02-reise: 1.25;            
  --s02-g: clamp(0.625rem, 0.4rem + 0.6vw, 1rem);       
  --s02-radius: 3px;            
  --s02-topp: clamp(3rem, 2rem + 3vw, 5.25rem);          
  --s02-bunn: clamp(3rem, 2rem + 3vw, 5rem);             
  --s02-tekst-luft: clamp(1rem, 0.4rem + 1.4vw, 2rem);   
  --s02-skygge: 0 1px 2px rgba(17, 18, 20, 0.32), 0 22px 44px -20px rgba(17, 18, 20, 0.72), 0 64px 110px -42px rgba(17, 18, 20, 0.8);
  --s02-skygge-tekst: linear-gradient(0deg, rgba(17, 18, 20, 0.66) 0%, rgba(17, 18, 20, 0.3) 52%, rgba(17, 18, 20, 0) 100%);
  --s02-linje-str: clamp(1.1875rem, 1.05rem + 0.6vw, 1.5rem);   
  --s02-slutt-str: clamp(1.0625rem, 0.95rem + 0.25vw, 1.25rem); 
  
  --s02-tittel-pinne: clamp(2rem, min(0.9rem + 2.7vw, 6.6svh), 3.5rem);
  --s02-linje-pinne: clamp(1.125rem, min(0.75rem + 0.95vw, 3.6svh), 1.5rem);
  --s02-rad-b: clamp(9rem, 30svh, 17rem);       
  --s02-forhold: 1.25;          
  --s02-scene-topp: clamp(0.75rem, 2.4svh, 1.5rem);      
  --s02-scene-bunn: clamp(0.875rem, 3svh, 1.75rem);
}

@media (pointer: coarse) {
  :root {
    --s02-reise: 1;
  }
}

:root {
  --s05-luft: clamp(3rem, 2rem + 3.2vw, 5.25rem);   
  --s05-foto-forhold: 1.5304;                       
  --s05-andel: 0.52;                                
  --s05-gap: clamp(2rem, 3.4vw, 3.5rem);            
  --s05-hode-gap: clamp(1.1rem, 2.6svh, 1.9rem);    
  --s05-pinn-pad: clamp(0.85rem, 3svh, 2rem);       
  --s05-bildetekst-h: 2.15rem;                      
  --s05-reise: 0.8;                                 
  --s05-pre: 0.15;                                  
  --s05-svak: 0.34;                                 
  --s05-knott: 2.75rem;                             
  --s05-linje-skygge: 0 0 0 1px rgba(17, 18, 20, 0.08), 0 0 18px rgba(17, 18, 20, 0.34);
  --s05-knott-skygge: 0 10px 26px rgba(17, 18, 20, 0.32), 0 1px 3px rgba(17, 18, 20, 0.3);
  --s05-chip-flate: rgba(23, 24, 26, 0.84);         
}

@media (pointer: coarse) {
  :root {
    --s05-reise: 0.55;
  }
}

@media (min-height: 50rem) {
  :root {
    --s05-andel: 0.6;
  }
}

:root {
  --s06-fuge: 0.5rem;                  
  --s06-andel-min: 0.44;               
  --s06-andel-maks: 0.58;              
  --s06-forhold: 1.32;                 
  --s06-slor: 0.6;                     
  --s06-skygge: linear-gradient(to top, rgba(17, 18, 20, 0.9) 0%, rgba(17, 18, 20, 0.74) 38%, rgba(17, 18, 20, 0.36) 70%, rgba(17, 18, 20, 0) 100%);  
  --s06-tekst-skygge: 0 1px 3px rgba(17, 18, 20, 0.5), 0 0 18px rgba(17, 18, 20, 0.3);
  
  --s06-antall: 7;                     
  --s06-hold: 0.48;                    
  --s06-skifte: 0.34;                  
  --s06-dvel: 0.12;                    
  --s06-slutt: 0.1;                    
  --s06-reise: calc(var(--s06-hold) + (var(--s06-antall) - 1) * var(--s06-skifte) + (var(--s06-antall) - 2) * var(--s06-dvel) + var(--s06-slutt));
  --s06-pre: 0.8;                      
  --s06-kryp: 0.02;                    
  --s06-drift: 0.08;                   
  --s06-kort-gap: clamp(1.75rem, 3vw, 2.25rem);  
  --s06-kol-gap: clamp(1rem, 2vw, 1.5rem);      
  --s06-pos-kjokken: 50% 44%;          
}

@media (max-width: 63.99rem) {
  :root {
    --s06-andel-min: 0.46;
    --s06-andel-maks: 0.58;
    --s06-forhold: 0.9;
    --s06-hold: 0.42;
    --s06-skifte: 0.28;
    --s06-dvel: 0.12;
    --s06-slutt: 0.08;
  }
}

@media (pointer: coarse) {
  :root {
    --s06-hold: 0.38;
    --s06-skifte: 0.24;
    --s06-dvel: 0.1;
    --s06-slutt: 0.06;
  }
}

:root {
  --s07-reise: 1.8;                 
  --s07-pre: 0.62;                  
  --s07-innmarg: 0.5rem;            
  --s07-strip-h: 2.15rem;           
  --s07-band: 1.35rem;              
  --s07-band-smal: 0.5rem;          
  --s07-ark-andel: 0.62;            
  --s07-svak: 0.5;                  
  --s07-halo: rgba(33, 36, 40, 0.9);   
  --s07-navn-str: clamp(0.625rem, 0.58rem + 0.14vw, 0.71875rem);   
  --s07-hjem-str: clamp(0.75rem, 0.7rem + 0.2vw, 0.875rem);
}

@media (pointer: coarse) {
  :root {
    --s07-reise: 1.4;
  }
}

@media (min-width: 100rem) and (min-height: 62.5rem) {
  :root {
    --s07-ark-andel: 0.66;
  }
}

:root {
  --s08-topp: clamp(3.25rem, 2.25rem + 3.25vw, 5.75rem);   
  --s08-bunn: clamp(3.25rem, 2.25rem + 3vw, 5.25rem);      
  --s08-kort: var(--flate);                                
  --s08-kort-kant: rgba(23, 24, 26, 0.07);                 
  --s08-kort-skygge: 0 1px 2px rgba(23, 24, 26, 0.05), 0 36px 70px -44px rgba(23, 24, 26, 0.45);
  --s08-kort-pad: clamp(1.25rem, 0.7rem + 1.7vw, 2.25rem);
  --s08-felt-h: 3.25rem;                                   
  --s08-felt-flate: var(--grunn);                          
  --s08-felt-kant: rgba(23, 24, 26, 0.14);
  --s08-felt-ring: rgba(23, 24, 26, 0.12);                 
  --s08-feil-ring: rgba(179, 64, 44, 0.16);                
  --s08-tlf-demp: rgba(244, 242, 238, 0.7);                
  --s08-tlf-ikon: rgba(244, 242, 238, 0.12);               
  --s08-ordmerke: var(--rom-tekst);                        
  --s08-ordmerke-k: 8.52;                                  
  --s08-loft: 1.5rem;                                      
}

:root {
  --s03o-topp: clamp(2.75rem, 1.5rem + 3vw, 4.5rem);    
  --s03o-rad: clamp(1.5rem, 1rem + 2vw, 2.75rem);        
  --s03o-gap: 1.5rem;                                     
  --s03o-forhold: 5 / 6;                                  
  --s03o-forhold-bred: 1 / 1;                             
  --s03o-selfie-andel: 40%;                               
  --s03o-utstikk: 1rem;                                   
  --s03o-fall: 1.25rem;                                   
  --s03o-svai: 12px;                                      
  --s03o-fot: var(--ringelinje-h);                        
  --s03o-skygge: 0 1px 2px rgba(17, 18, 20, 0.08), 0 26px 50px -22px rgba(17, 18, 20, 0.46);
  --s03o-skygge-loft: 0 1px 2px rgba(17, 18, 20, 0.08), 0 34px 60px -24px rgba(17, 18, 20, 0.5);
  --s03o-verdi: clamp(1.0625rem, 1rem + 0.3vw, 1.25rem);  
  --s03o-fakta-luft: clamp(1rem, 0.8rem + 0.6vw, 1.4rem); 
  --s03o-fakta-rad: 1.25rem;                              
}

@media (min-width: 64rem) {
  :root {
    --s03o-selfie-andel: 38%;
    --s03o-utstikk: -12%;
    --s03o-fall: 0rem;
    --s03o-svai: 34px;
    --s03o-fot: 0rem;
  }
}

:root {
  --s34-reise: 2.4;                 
  --s34-gap: clamp(0.75rem, 1.2vw, 1.25rem);    
  --s34-kolonne-gap: clamp(1.25rem, 2.4vw, 2rem);   
  --s34-svak: 0.55;                 
  --s34-nr-b: 2.25rem;              
  --s34-steg-str: clamp(1.25rem, 0.55rem + 2.4svh, 1.875rem);   
  --s34-kort-slor: linear-gradient(to bottom, rgba(17, 18, 20, 0.5) 0%, rgba(17, 18, 20, 0.24) 36%, rgba(17, 18, 20, 0) 54%, rgba(17, 18, 20, 0.1) 74%, rgba(17, 18, 20, 0.6) 100%);   
  --s34-tlf-str: clamp(2.2rem, 12cqw, 6rem);    
  --s34-tlf-reserve: clamp(2.2rem, 1.4rem + 2.6vw, 3.9rem);   
  --s34-ramme: var(--rom-dyp);      
  --s34-skygge: rgba(17, 18, 20, 0.55);         
  --s34-kant-skygge: 0 -1.25rem 2.5rem -0.75rem rgba(10, 11, 12, 0.55);   
  --s34-slor: rgba(17, 18, 20, 0.42);           
  --s34-vent: 4rem;                 
  --s34-hode2-h: 6rem;              
  --s34-navn-h: 2.75rem;            
  --s34-film-gap: 1.5rem;           
}

@media (pointer: coarse) {
  :root {
    --s34-reise: 1.8;
  }
}

:root {
  --hero-tittel-str: min(clamp(2.4rem, 1.2rem + 2.4vw, 3.6rem), 6.8vh);  
  --hero-himmel-luft: clamp(0.25rem, 1.2vh, 1.25rem);                   
  --hero-logg-str: clamp(1.2rem, 0.85rem + 0.85vw, 1.65rem);            
  --hero-logg-str-mobil: 1.0625rem;                                     
  --hero-logg-h: 1.9em;                                                 
  --hero-cta-loft: 1rem;                                                
  
  --hero-skygge-himmel: rgba(17, 18, 20, 0.4);
  --hero-skygge-himmel-svak: rgba(17, 18, 20, 0.13);
  --hero-tittel-skygge: 0 1px 2px rgba(17, 18, 20, 0.32), 0 0 30px rgba(17, 18, 20, 0.3);
}

:root {
  --u-topp: clamp(1.5rem, 0.75rem + 2.6vw, 3.25rem);      
  --u-topp-bunn: clamp(1.75rem, 1rem + 2.4vw, 3rem);      
  --u-luft: clamp(2.75rem, 1.75rem + 3.4vw, 5rem);        
  --u-gap: clamp(1rem, 2vw, 1.5rem);                      
  --u-kolonne-gap: clamp(2rem, 4vw, 4rem);                
  --u-radius: 3px;                                        
  --u-tittel: clamp(2.25rem, 1.3rem + 2.6vw, 3.75rem);    
  --u-h2: clamp(1.85rem, 1.15rem + 2.2vw, 3.1rem);        
  --u-h3: clamp(1.35rem, 1.12rem + 0.75vw, 1.75rem);      
  --u-chips-h: 4rem;                                      
  --u-detalj-andel: 38%;                                  
  --u-detalj-ut: 0.75rem;                                 
  --u-detalj-fall: 2.25rem;                               
  --u-skygge: 0 1px 2px rgba(17, 18, 20, 0.07), 0 18px 40px -24px rgba(17, 18, 20, 0.38);       
  --u-skygge-loft: 0 1px 2px rgba(17, 18, 20, 0.08), 0 30px 60px -26px rgba(17, 18, 20, 0.5);   
  --u-skygge-foto: 0 1px 2px rgba(17, 18, 20, 0.09), 0 28px 56px -30px rgba(17, 18, 20, 0.5);   
  --u-skygge-detalj: 0 1px 2px rgba(17, 18, 20, 0.1), 0 26px 50px -22px rgba(17, 18, 20, 0.48); 
  --u-chip-flate: rgba(23, 24, 26, 0.84);                 
  --u-knott: 2.75rem;                                     
  --u-knott-skygge: 0 10px 26px rgba(17, 18, 20, 0.32), 0 1px 3px rgba(17, 18, 20, 0.3);
  --u-linje-skygge: 0 0 0 1px rgba(17, 18, 20, 0.08), 0 0 18px rgba(17, 18, 20, 0.34);
  --u-maske: #000;                                        
  --u-rad-h: clamp(11rem, 6rem + 12vw, 18rem);            
  --u-en-h: min(34rem, 72svh);                            
  --u-omrade-min: 24rem;                                  
}

@media (min-width: 64rem) {
  :root {
    --u-detalj-andel: 36%;
    --u-detalj-ut: -1.5rem;
    --u-detalj-fall: 2.75rem;
  }
}

