@font-face {
  font-family: "Montserrat";
  src: url("montserrat.woff2") format("woff2");
  font-weight: 400 600;
  font-style: normal;
  font-display: swap;
}

:root {
  --pf-skrift: "Montserrat", system-ui, -apple-system, "Segoe UI", sans-serif;

  --navy-950: #0c171e;
  --navy-900: #13232c;
  --navy-800: #1a2f3b;
  --slate-700: #31434c;
  --slate-500: #6e818c;
  --slate-300: #9aa8b0;
  --frost-100: #e5e8eb;
  --ice-400: #8fbcd4;
  --signal-400: #e0893a;

  --surface: var(--navy-900);
  --surface-sunken: var(--navy-950);
  --surface-raised: var(--navy-800);
  --ink: var(--frost-100);
  --ink-muted: var(--slate-300);
  --border: var(--slate-500);
  --divider: var(--slate-700);
  --accent: var(--ice-400);
  --on-accent: var(--navy-900);
  --signal: var(--signal-400);

  --radius-sm: 4px;
  --radius-md: 8px;
  --marg: 48px;
  --bredde: 1120px;
  
  --inn: max(var(--marg), calc((100% - var(--bredde)) / 2));
  color-scheme: dark;
}
@media (max-width: 700px) { :root { --marg: 20px; } }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--surface-sunken);
  color: var(--ink);
  font-family: var(--pf-skrift);
  font-size: 17px;
  line-height: 1.6;
  font-weight: 400;
}
img { display: block; max-width: 100%; height: auto; }
h1, h2, p, dl, dd, figure { margin: 0; }
a { color: var(--accent); text-underline-offset: 0.18em; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: var(--radius-sm); }

.knapp {
  display: inline-block;
  padding: 13px 22px;
  border-radius: var(--radius-md);
  background: var(--accent);
  color: var(--on-accent);
  font-weight: 600;
  font-size: 15px;
  letter-spacing: 0.04em;
  line-height: 20px;
  text-decoration: none;
  border: 1px solid var(--accent);
}
.knapp:hover { background: var(--frost-100); border-color: var(--frost-100); }
.knapp-stille { background: transparent; color: var(--ink); border-color: var(--border); padding: 9px 16px; }
.knapp-stille:hover { background: var(--surface-raised); border-color: var(--ink-muted); }

.helt {
  position: relative;
  min-height: max(620px, 100svh);
  display: flex; align-items: flex-end;
  background: var(--surface);
  overflow: hidden;
}
.helt-bilde { position: absolute; inset: 0; }
.helt-bilde img { width: 100%; height: 100%; object-fit: cover; }
.helt-bilde::after { content: ""; position: absolute; inset: 0; background: rgb(12 23 30 / 0.5); }
.helt-innhold {
  position: relative;
  width: 100%;
  padding: 0 var(--inn) clamp(48px, 9vh, 96px);
}
.helt h1 {
  font-weight: 600;
  font-size: clamp(40px, 6.4vw, 84px);
  line-height: 1.02;
  letter-spacing: -0.015em;
  max-width: 13ch;
  text-wrap: balance;
}

@media (prefers-reduced-motion: no-preference) {
  .helt-bilde img { animation: inn 1.6s ease-out both; }
  @keyframes inn { from { opacity: 0; } to { opacity: 1; } }
}

.bunn {
  margin: 120px var(--inn) 0;
  padding: 28px 0 40px;
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 32px;
  border-top: 1px solid var(--divider);
  color: var(--ink-muted); font-size: 14px;
}

.kontakt { margin-top: 24px; font-size: 15px; color: var(--ink); }
.kontakt a { color: var(--accent); }

.stengt .helt { min-height: 100svh; align-items: center; }
.stengt .merke img { width: clamp(220px, 34vw, 400px); height: auto; }
.stengt .linje { margin-top: 32px; max-width: 30em; font-size: clamp(17px, 1.6vw, 20px); }
.stengt .inngang { margin-top: 32px; }
.stengt .bunn { position: absolute; bottom: 0; left: 0; right: 0; margin: 0; padding: 0 var(--inn) 24px; border-top: 0; }
.helt-bilde img { object-position: 78% 70%; }