/* =========================================================================
   Viva North AS - static site stylesheet
   Dark, cinematic investment-company site. No build step, no external requests.
   Single accent (antique gold) locked across the whole page.
   ========================================================================= */

/* -------------------------------------------------------------------------
   0. Self-hosted type

   Open Sans, served from this project. Nothing is fetched from a CDN.

   Two weights ship, and only two: Regular carries every heading and every
   paragraph (headings are set at 400 by design, not bold), SemiBold carries
   the uppercase labels, buttons and nav. Declaring the real 600 file stops
   the browser synthesising a bold, which smears the wide letter-spacing
   those labels rely on.

   Licensed under the SIL Open Font License 1.1. The licence text ships
   alongside the fonts at assets/fonts/OFL.txt, as the OFL requires.
   ------------------------------------------------------------------------- */

/* WOFF2, subset to the unicode-range declared below: 255 KB of .ttf became
   36 KB. The subset and this range must stay in step — a character outside the
   range is simply not painted with this font, however complete the file is.
   Rebuild and check coverage with scratchpad/subset_fonts.py + verify_fonts.py
   whenever the copy gains an unusual character. */
@font-face {
  font-family: "Open Sans";
  src: url("assets/fonts/OpenSans-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  /* Latin plus the Norwegian characters, so the browser can skip the file
     entirely on pages that never use them. */
  unicode-range: U+0000-00FF, U+0100-017F, U+2000-206F, U+20AC, U+2122;
}

@font-face {
  font-family: "Open Sans";
  src: url("assets/fonts/OpenSans-SemiBold.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0100-017F, U+2000-206F, U+20AC, U+2122;
}

/* -------------------------------------------------------------------------
   1. Design tokens
   ------------------------------------------------------------------------- */

:root {
  /* --- Palette: near-black blue-charcoal base, one antique-gold accent --- */
  --bg:            #0a0d11;  /* page base                                   */
  --bg-raised:     #0e131a;  /* alternating section                         */
  --surface:       #131b24;  /* cards                                       */
  --surface-2:     #18222d;  /* card hover / insets                         */
  --line:          #212c37;  /* hairline on dark                            */
  --line-strong:   #33414f;  /* stronger divider                            */

  --gold:          #c7a45f;  /* primary accent            (8.4:1 on --bg)   */
  --gold-bright:   #ddc287;  /* large display accent / hover                */
  --gold-deep:     #a2803c;  /* pressed / fine detail                       */

  --text:          #edeff2;  /* primary text              (15.9:1)          */
  --text-soft:     #a9b2bc;  /* secondary text            (8.9:1)           */
  --text-mute:     #808b96;  /* captions, eyebrows        (4.7:1)           */
  --on-gold:       #10140a;  /* text on a gold fill       (8.1:1)           */

  /* --- Typography ---
     Open Sans is self-hosted (see section 0) and carries the whole page.
     The three roles are kept as separate tokens even though they now resolve
     to one family: they mark intent, so a future second face can be dropped
     into one role without hunting through the rules that use it.
     The fallbacks below are only used during the swap or if a file fails. */
  --font-display: "Open Sans", "Segoe UI Variable Text", "Segoe UI", system-ui,
                  -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial,
                  sans-serif;
  --font-serif:   "Open Sans", "Segoe UI Variable Text", "Segoe UI", system-ui,
                  -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial,
                  sans-serif;
  --font-sans:    "Open Sans", "Segoe UI Variable Text", "Segoe UI", system-ui,
                  -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial,
                  sans-serif;

  /* --- Fluid type scale --- */
  --step--2: clamp(0.72rem,  0.70rem + 0.09vw, 0.78rem);
  --step--1: clamp(0.82rem,  0.79rem + 0.13vw, 0.9rem);
  --step-0:  clamp(1rem,     0.97rem + 0.16vw, 1.08rem);
  --step-1:  clamp(1.15rem,  1.09rem + 0.28vw, 1.32rem);
  --step-2:  clamp(1.4rem,   1.28rem + 0.55vw, 1.75rem);
  --step-3:  clamp(1.75rem,  1.5rem  + 1.15vw, 2.5rem);
  --step-4:  clamp(2.3rem,   1.9rem  + 1.9vw,  3.4rem);
  --step-5:  clamp(2.9rem,   2.2rem  + 3.3vw,  5rem);

  --tracking-wide:  0.16em;
  --tracking-wider: 0.28em;

  /* --- Layout --- */
  --content-width: 1200px;
  --gutter: clamp(1.25rem, 4vw, 3rem);
  --measure: 62ch;
  --header-height: 5rem;
  --section-space: clamp(4.5rem, 9vw, 9rem);

  --radius: 4px;

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

/* -------------------------------------------------------------------------
   2. Reset and base
   ------------------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

[hidden] { display: none !important; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  background-color: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: var(--step-0);
  line-height: 1.65;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3 { margin: 0; font-weight: 400; line-height: 1.1; }

p { margin: 0; }
a { color: inherit; }
ul { margin: 0; padding: 0; list-style: none; }
svg { display: block; }
address { font-style: normal; }
blockquote { margin: 0; }
dl, dd, dt, figure { margin: 0; }
img { max-width: 100%; }

::selection { background-color: var(--gold); color: var(--on-gold); }

/* -------------------------------------------------------------------------
   3. Focus, skip link, utilities
   ------------------------------------------------------------------------- */

:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
}

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  left: var(--gutter); top: 0;
  z-index: 100;
  transform: translateY(-120%);
  padding: 0.75rem 1.25rem;
  background-color: var(--gold);
  color: var(--on-gold);
  font-size: var(--step--1);
  font-weight: 600;
  text-decoration: none;
  border-radius: var(--radius);
}
.skip-link:focus { transform: translateY(0.5rem); }

.wrap {
  width: min(100% - (var(--gutter) * 2), var(--content-width));
  margin-inline: auto;
}

/* Shared small label: eyebrow / section wayfinding, also matches nav anchors */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  font-family: var(--font-sans);
  font-size: var(--step--2);
  font-weight: 600;
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--gold);
}
.eyebrow::before {
  content: "";
  width: 2rem;
  height: 1px;
  background-color: var(--gold);
  opacity: 0.6;
}

/* -------------------------------------------------------------------------
   4. Brand mark (compass-north monogram, gold)
   ------------------------------------------------------------------------- */

.mark {
  width: 2.1rem; height: 2.1rem;
  flex: none;
  fill: none;
  stroke-linecap: butt;
  stroke-linejoin: miter;
}
.mark__ring  { stroke: var(--gold); stroke-width: 0.9; opacity: 0.45; }
.mark__north { stroke: var(--gold); stroke-width: 2; }
.mark__south { stroke: var(--gold-deep); stroke-width: 2; opacity: 0.85; }

.brand__name {
  font-family: var(--font-display);
  font-size: 1.05rem;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--text);
  white-space: nowrap;
}
.brand__name b { font-weight: 400; color: var(--gold); }

/* -------------------------------------------------------------------------
   5. Site header (transparent over hero, solid once scrolled)
   ------------------------------------------------------------------------- */

.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 50;
  transition: background-color 0.3s var(--ease-out), border-color 0.3s var(--ease-out);
  border-bottom: 1px solid transparent;
}
.site-header.is-scrolled {
  background-color: rgba(10, 13, 17, 0.85);
  -webkit-backdrop-filter: blur(12px) saturate(140%);
  backdrop-filter: blur(12px) saturate(140%);
  border-bottom-color: var(--line);
}

.site-header__inner {
  width: min(100% - (var(--gutter) * 2), var(--content-width));
  margin-inline: auto;
  min-height: var(--header-height);
  display: flex;
  align-items: center;
  gap: clamp(0.6rem, 2vw, 1.5rem);
}

@media (max-width: 480px) {
  .brand__name { font-size: 0.92rem; letter-spacing: 0.1em; }
  .lang__btn { padding: 0.35rem 0.5rem; }
  .nav-toggle { width: 2.5rem; height: 2.5rem; }
}

.brand {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  text-decoration: none;
  margin-right: auto;
}

.site-nav__list {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 2vw, 2rem);
}
.site-nav__list a {
  display: inline-block;
  padding: 0.4rem 0;
  font-size: var(--step--1);
  letter-spacing: 0.02em;
  color: var(--text-soft);
  text-decoration: none;
  position: relative;
  transition: color 0.2s var(--ease-out);
}
.site-nav__list a::after {
  content: "";
  position: absolute;
  left: 0; bottom: -2px;
  width: 100%; height: 1px;
  background-color: var(--gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.25s var(--ease-out);
}
.site-nav__list a:hover { color: var(--text); }
.site-nav__list a:hover::after { transform: scaleX(1); }

/* Language switch */
.lang {
  display: flex;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  overflow: hidden;
}
.lang__btn {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  appearance: none;
  border: 0; margin: 0;
  padding: 0.4rem 0.7rem;
  background-color: transparent;
  color: var(--text-soft);
  font-family: inherit;
  font-size: var(--step--2);
  font-weight: 600;
  letter-spacing: var(--tracking-wide);
  cursor: pointer;
  transition: background-color 0.2s var(--ease-out), color 0.2s var(--ease-out);
}
.lang__btn + .lang__btn { border-left: 1px solid var(--line-strong); }
.lang__btn:hover { color: var(--text); }
.lang__btn.is-active { background-color: var(--gold); color: var(--on-gold); }

/* Mobile menu button */
.nav-toggle {
  display: none;
  appearance: none;
  width: 2.75rem; height: 2.75rem;
  padding: 0;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background-color: transparent;
  color: var(--text);
  cursor: pointer;
  align-items: center;
  justify-content: center;
}
.nav-toggle__bars,
.nav-toggle__bars::before,
.nav-toggle__bars::after {
  display: block;
  width: 1.15rem; height: 1.5px;
  background-color: currentColor;
}
.nav-toggle__bars { position: relative; }
.nav-toggle__bars::before, .nav-toggle__bars::after {
  content: ""; position: absolute; left: 0;
}
.nav-toggle__bars::before { top: -0.36rem; }
.nav-toggle__bars::after  { top: 0.36rem; }

@media (max-width: 940px) {
  .js .nav-toggle { display: inline-flex; }
  .js .site-nav {
    position: fixed;
    inset: var(--header-height) 0 auto 0;
    display: none;
    background-color: rgba(10, 13, 17, 0.97);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--line);
    padding: 1rem var(--gutter) 1.75rem;
  }
  .js .site-header.is-open { background-color: rgba(10, 13, 17, 0.97); border-bottom-color: transparent; }
  .js .site-header.is-open .site-nav { display: block; }
  .site-nav__list { flex-direction: column; align-items: stretch; gap: 0; }
  .site-nav__list li + li a { border-top: 1px solid var(--line); }
  .site-nav__list a { padding: 0.95rem 0; font-size: var(--step-0); color: var(--text); }
  .site-nav__list a::after { display: none; }
}
@media (max-width: 940px) {
  .no-js .site-header { position: absolute; }
}

/* -------------------------------------------------------------------------
   6. Buttons
   ------------------------------------------------------------------------- */

.button {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.95rem 1.9rem;
  font-family: var(--font-sans);
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  border-radius: var(--radius);
  border: 1px solid var(--gold);
  transition: background-color 0.2s var(--ease-out),
              color 0.2s var(--ease-out),
              transform 0.12s var(--ease-out);
}
.button--primary { background-color: var(--gold); color: var(--on-gold); }
.button--primary:hover { background-color: var(--gold-bright); border-color: var(--gold-bright); }
.button--ghost { background-color: transparent; color: var(--gold); }
.button--ghost:hover { background-color: rgba(199, 164, 95, 0.1); }
.button:active { transform: translateY(1px); }
/* Inline SVG, matching .domain__icon's stroke convention. currentColor keeps
   the arrow on the label's colour through every button variant and state. */
.button__arrow {
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 0.2s var(--ease-out);
}
.button:hover .button__arrow { transform: translateX(3px); }
/* The hero arrow points down at an anchor further down the page, so it should
   nudge the way it points rather than sideways. */
.button:hover .button__arrow--down { transform: translateY(3px); }

/* -------------------------------------------------------------------------
   7. Hero
   ------------------------------------------------------------------------- */

.hero {
  position: relative;
  min-height: 100svh;
  display: grid;
  align-items: center;
  padding-top: var(--header-height);
  overflow: hidden;
  isolation: isolate;
}

/* Atmosphere: layered aurora curtains + a vignette, all behind the content.
   Signature element. Northern lights for the North; drawn in CSS so there is
   no photo of a facility the company does not own, and no network request.
   An optional real photo can drop into .hero__photo below. */
.hero__atmosphere {
  position: absolute;
  inset: 0;
  z-index: -2;
  background:
    radial-gradient(120% 80% at 70% -10%, #16202b 0%, transparent 55%),
    radial-gradient(90% 70% at 15% 10%, #10161d 0%, transparent 60%),
    linear-gradient(180deg, #0b0f14 0%, var(--bg) 70%);
}
.hero__aurora {
  position: absolute;
  z-index: -1;
  top: -20%; right: -10%;
  width: 90%; height: 90%;
  pointer-events: none;
  background:
    radial-gradient(closest-side, rgba(120, 200, 150, 0.16), transparent 70%),
    radial-gradient(closest-side, rgba(90, 170, 190, 0.14), transparent 70%);
  filter: blur(40px);
  opacity: 0.9;
}
.hero__aurora::before,
.hero__aurora::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    conic-gradient(from 200deg at 60% 40%,
      transparent 0deg,
      rgba(126, 205, 155, 0.22) 60deg,
      rgba(96, 178, 196, 0.18) 130deg,
      transparent 220deg);
  filter: blur(50px);
  mix-blend-mode: screen;
  transform-origin: 60% 40%;
}
.hero__aurora::after {
  background:
    conic-gradient(from 40deg at 40% 55%,
      transparent 0deg,
      rgba(150, 190, 130, 0.16) 70deg,
      transparent 200deg);
  opacity: 0.7;
}

/* Optional real photo. Hidden unless main.js confirms the file loaded. */
.hero__photo {
  position: absolute;
  inset: 0;
  z-index: -1;
  object-fit: cover;
  width: 100%; height: 100%;
  opacity: 0;
  transition: opacity 0.8s var(--ease-out);
}
.hero__photo.is-loaded { opacity: 0.55; }
.hero__photo.is-loaded + .hero__scrim { opacity: 1; }
.hero__scrim {
  position: absolute; inset: 0; z-index: -1; opacity: 0;
  background: linear-gradient(90deg, rgba(10,13,17,0.92) 0%, rgba(10,13,17,0.6) 45%, rgba(10,13,17,0.35) 100%);
}

.hero__body { max-width: 60rem; padding-block: 3rem; }

.hero__title {
  margin-top: 1.75rem;
  font-family: var(--font-display);
  font-size: var(--step-5);
  line-height: 1.02;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  text-wrap: balance;
}
.hero__title .accent {
  display: block;
  color: var(--gold);
}

.hero__lede {
  margin-top: 1.9rem;
  max-width: 46ch;
  font-size: var(--step-1);
  color: var(--text-soft);
}

.hero__actions {
  margin-top: 2.6rem;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

/* -------------------------------------------------------------------------
   8. Section shell
   ------------------------------------------------------------------------- */

.section {
  position: relative;
  padding-block: var(--section-space);
  scroll-margin-top: var(--header-height);
}
.section--raised { background-color: var(--bg-raised); }
.section__head { max-width: 46ch; }
.section__title {
  margin-top: 1.25rem;
  font-family: var(--font-display);
  font-size: var(--step-4);
  letter-spacing: 0.01em;
  text-transform: uppercase;
  text-wrap: balance;
}
.section__lede {
  margin-top: 1.5rem;
  max-width: var(--measure);
  font-size: var(--step-1);
  color: var(--text-soft);
}

/* -------------------------------------------------------------------------
   9. Domains band (replaces the mockup's fabricated stat band)
   ------------------------------------------------------------------------- */

.domains {
  border-block: 1px solid var(--line);
}
.domains__lede {
  max-width: var(--measure);
  font-size: var(--step-1);
  color: var(--text-soft);
}
.domains__lede b { color: var(--text); font-weight: 400; }
.domains__grid {
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
  display: grid;
  gap: 1px;
  background-color: var(--line);
  border: 1px solid var(--line);
}
.domain {
  background-color: var(--bg);
  padding: clamp(1.75rem, 3vw, 2.5rem) clamp(1.25rem, 2.5vw, 2rem);
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.domain__icon {
  width: 2.5rem; height: 2.5rem;
  fill: none;
  stroke: var(--gold);
  stroke-width: 1.25;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.domain__name {
  font-family: var(--font-display);
  font-size: var(--step-2);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  overflow-wrap: break-word;
  hyphens: auto;
}
.domain__text { font-size: var(--step--1); color: var(--text-mute); }

@media (min-width: 640px) { .domains__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .domains__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* -------------------------------------------------------------------------
   10. Investments (four holdings, bento grid)
   ------------------------------------------------------------------------- */

.section__bar {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
}

.holdings {
  margin-top: clamp(2.5rem, 5vw, 3.75rem);
  display: grid;
  gap: clamp(1rem, 2vw, 1.5rem);
}

.holding {
  position: relative;
  background-color: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: clamp(1.75rem, 3vw, 2.75rem);
  display: flex;
  flex-direction: column;
  transition: border-color 0.25s var(--ease-out), transform 0.25s var(--ease-out), background-color 0.25s var(--ease-out);
}
.holding:hover {
  border-color: var(--gold-deep);
  background-color: var(--surface-2);
  transform: translateY(-3px);
}
.holding::before {
  content: "";
  position: absolute;
  left: 0; top: clamp(1.75rem, 3vw, 2.75rem);
  width: 2px; height: 2.25rem;
  background-color: var(--gold);
  opacity: 0;
  transition: opacity 0.25s var(--ease-out);
}
.holding:hover::before { opacity: 1; }

.holding__sector {
  font-size: var(--step--2);
  font-weight: 600;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--gold);
}
.holding__name {
  margin-top: 1rem;
  font-family: var(--font-display);
  font-size: var(--step-3);
  text-transform: uppercase;
  letter-spacing: 0.01em;
}
.holding__text {
  margin-top: 1.1rem;
  color: var(--text-soft);
  max-width: 52ch;
}
.holding__list {
  margin-top: 1.5rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}
.holding__list li {
  font-size: var(--step--1);
  color: var(--text-soft);
  padding: 0.4rem 0.85rem;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
}

/* Outbound link to the portfolio company. margin-top:auto pins it to the
   foot of the card so the links line up across cards of differing height. */
.holding__link {
  margin-top: auto;
  padding-top: 1.75rem;
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--gold);
  text-decoration: none;
}
.holding__link > span:first-child {
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s var(--ease-out);
}
.holding__link:hover > span:first-child { border-bottom-color: var(--gold); }

.holding__link-icon {
  width: 0.7em;
  height: 0.7em;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 0.2s var(--ease-out);
}
.holding__link:hover .holding__link-icon { transform: translate(2px, -2px); }

/* Lenkene fra forsiden til undersidene. Samme uttrykk som lenken ut til
   selskapets eget nettsted, men pila peker rett fram: den blir på
   nettstedet. Står to lenker i samme kort, holder den første seg nederst
   (margin-top: auto) og den andre følger tett etter. */
.holding__link + .holding__link { margin-top: 0; padding-top: 0.75rem; }
.holding__link--internal:hover .holding__link-icon,
.more-link:hover .holding__link-icon { transform: translateX(2px); }
.more-link {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  margin-top: 1.75rem;
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--gold);
  text-decoration: none;
}
.more-link > span:first-child {
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s var(--ease-out);
}
.more-link:hover > span:first-child { border-bottom-color: var(--gold); }

@media (min-width: 800px) {
  .holdings { grid-template-columns: repeat(2, 1fr); }
}

/* -------------------------------------------------------------------------
   11. About (split)
   ------------------------------------------------------------------------- */

.about__grid {
  display: grid;
  gap: clamp(2.5rem, 5vw, 4.5rem);
  align-items: center;
}
.about__body { max-width: 54ch; }
.about__text { margin-top: 1.5rem; display: grid; gap: 1.15rem; color: var(--text-soft); }
.about__actions { margin-top: 2.25rem; }

.about__figure {
  position: relative;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  min-height: 22rem;
  background:
    radial-gradient(100% 80% at 80% 0%, rgba(199, 164, 95, 0.10), transparent 60%),
    linear-gradient(160deg, #141c26 0%, #0c1116 100%);
  display: grid;
  place-items: center;
  isolation: isolate;
}
.about__figure img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* Fallback motif when no photo present: a large ghosted compass mark */
.about__motif {
  width: min(60%, 16rem);
  height: auto;
  opacity: 0.5;
}

@media (min-width: 900px) {
  .about__grid { grid-template-columns: 1.05fr 0.95fr; }
  .about__figure { min-height: 30rem; }
}

/* -------------------------------------------------------------------------
   12. Approach (a genuine sequence, so numbers earn their place)
   ------------------------------------------------------------------------- */

.approach__steps {
  margin-top: clamp(2.5rem, 5vw, 3.75rem);
  display: grid;
  gap: 1px;
  background-color: var(--line);
  border: 1px solid var(--line);
  counter-reset: step;
}
.step {
  background-color: var(--bg-raised);
  padding: clamp(1.75rem, 3.5vw, 3rem) clamp(1.5rem, 3vw, 2.5rem);
  counter-increment: step;
}
.step__num {
  font-family: var(--font-display);
  font-size: var(--step-4);
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1px var(--gold-deep);
  text-stroke: 1px var(--gold-deep);
}
.step__num::before { content: "0" counter(step); }
.step__name {
  margin-top: 1.25rem;
  font-family: var(--font-display);
  font-size: var(--step-2);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.step__text { margin-top: 0.9rem; color: var(--text-soft); }

.approach__note {
  margin-top: clamp(2.5rem, 4vw, 3rem);
  max-width: var(--measure);
  font-size: var(--step-1);
  color: var(--text-mute);
}

@media (min-width: 800px) {
  .approach__steps { grid-template-columns: repeat(3, 1fr); }
}

/* -------------------------------------------------------------------------
   13. Contact
   ------------------------------------------------------------------------- */

.contact__grid {
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
  display: grid;
  gap: clamp(2rem, 4vw, 3rem);
}
.contact__item h3 {
  font-family: var(--font-sans);
  font-size: var(--step--2);
  font-weight: 600;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--gold);
}
.contact__item p, .contact__item address {
  margin-top: 0.9rem;
  font-family: var(--font-serif);
  font-size: var(--step-1);
  line-height: 1.5;
  color: var(--text);
}
.contact__item a { color: var(--text); text-decoration-color: var(--line-strong); text-underline-offset: 0.25em; transition: text-decoration-color 0.2s var(--ease-out); }
.contact__item a:hover { text-decoration-color: var(--gold); }
.contact__role { font-size: var(--step--1) !important; font-family: var(--font-sans) !important; color: var(--text-mute) !important; margin-top: 0.35rem !important; }

@media (min-width: 700px) { .contact__grid { grid-template-columns: repeat(3, 1fr); } }

/* -------------------------------------------------------------------------
   14. Footer
   ------------------------------------------------------------------------- */

.site-footer {
  border-top: 1px solid var(--line);
  padding-block: clamp(3rem, 6vw, 4.5rem) 2.5rem;
  background-color: var(--bg);
}
.site-footer__top {
  display: grid;
  gap: 2.5rem;
}
.site-footer__brand { max-width: 30ch; }
.site-footer__brand .brand { margin-right: 0; }
.site-footer__tag { margin-top: 1.25rem; color: var(--text-mute); font-size: var(--step--1); }

.footer-col__title {
  font-size: var(--step--2);
  font-weight: 600;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--text-mute);
  margin: 0 0 1.1rem;
}
.footer-col ul { display: grid; gap: 0.7rem; }
.footer-col a { color: var(--text-soft); text-decoration: none; font-size: var(--step--1); transition: color 0.2s var(--ease-out); }
.footer-col a:hover { color: var(--gold); }
.footer-col p { color: var(--text-soft); font-size: var(--step--1); }

.site-footer__bottom {
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
  padding-top: 1.75rem;
  border-top: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 2rem;
  align-items: center;
  font-size: var(--step--2);
  color: var(--text-mute);
}
.site-footer__legal { display: flex; flex-wrap: wrap; gap: 1.5rem; margin-left: auto; }
/* legal links */
.site-footer__legal a { color: var(--text-mute); text-decoration: none; transition: color 0.2s var(--ease-out); }
.site-footer__legal a:hover { color: var(--gold); }

/* Compact footer for the standalone legal pages */
.site-footer--compact { padding-block: 2.5rem; }
.site-footer--compact .site-footer__bottom { margin-top: 0; padding-top: 0; border-top: 0; }

@media (min-width: 720px) {
  .site-footer__top {
    grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
    gap: 3rem;
  }
}

/* -------------------------------------------------------------------------
   15. Standalone legal pages
   ------------------------------------------------------------------------- */

.page { padding-block: calc(var(--header-height) + clamp(2.5rem, 6vw, 4.5rem)) var(--section-space); }
.page__title { font-family: var(--font-display); font-size: var(--step-4); text-transform: uppercase; letter-spacing: 0.01em; max-width: 20ch; }
.page__updated,
.page__subtitle { margin-top: 1rem; font-size: var(--step--1); color: var(--text-mute); }
.page__body { margin-top: clamp(2.5rem, 5vw, 3.5rem); max-width: var(--measure); display: grid; gap: 2.5rem; }
.page__body h2 { font-family: var(--font-display); font-size: var(--step-2); text-transform: uppercase; letter-spacing: 0.01em; margin-bottom: 0.9rem; }
.page__body h3 { margin: 1.75rem 0 0.5rem; font-family: var(--font-sans); font-size: var(--step--1); font-weight: 600; letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--gold); }
.page__body p { color: var(--text-soft); }
.page__body p + p { margin-top: 0.9rem; }
.page__body a { color: var(--text); text-underline-offset: 0.25em; text-decoration-color: var(--line-strong); transition: text-decoration-color 0.2s var(--ease-out); }
.page__body a:hover { text-decoration-color: var(--gold); }

/* Oversikten over hva som lagres, på informasjonskapsler.html. Første og
   foreløpig eneste tabellen på nettstedet. Den ruller i sin egen boks i
   stedet for å dytte sida bortover på små skjermer - fem kolonner får
   ikke plass på 320 px uansett hvor mye vi krymper skriften. */
.page__body ul { margin-top: 0.9rem; display: grid; gap: 0.6rem; color: var(--text-soft); }
.page__body li { position: relative; padding-left: 1.5rem; }
.page__body li::before { content: ""; position: absolute; left: 0; top: 0.75em; width: 0.75rem; height: 1px; background-color: var(--gold); }
/* Brødsmuler på undersidene. Samme gulle .eyebrow som står over
   seksjonstitlene på forsiden, så ingen ny komponent. Lenken er
   understreket fordi den ellers har nøyaktig samme farge som teksten
   ved siden av (a { color: inherit }). */
.page .breadcrumb { margin-bottom: 1.25rem; flex-wrap: wrap; }
.page .breadcrumb a { text-decoration: underline; text-underline-offset: 0.3em; text-decoration-thickness: 1px; }
.page .breadcrumb a:hover { text-decoration-thickness: 2px; }
/* Kildelinja nederst på undersidene: hvor opplysningene er hentet og når. */
.page__body .page__source { margin-top: 1.25rem; font-size: var(--step--1); color: var(--text-mute); }
.page__links { margin-top: clamp(3rem, 6vw, 4rem); padding-top: 2rem; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: 0.75rem 2rem; font-size: var(--step--1); }
.page__links a { color: var(--text-soft); text-underline-offset: 0.25em; text-decoration-color: var(--line-strong); transition: color 0.2s var(--ease-out); }
.page__links a:hover { color: var(--gold); }

/* -------------------------------------------------------------------------
   15b. Key figures, ownership roles, FAQ, enquiries
   ------------------------------------------------------------------------- */

.facts { padding-block: clamp(2.5rem, 5vw, 3.5rem); border-top: 1px solid var(--line); }
.facts__grid {
  margin: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1.5rem, 3vw, 2.5rem);
}
@media (min-width: 900px) { .facts__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.fact { display: flex; flex-direction: column-reverse; justify-content: flex-end; gap: 0.5rem; }
.fact__value {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--step-4);
  line-height: 1;
  color: var(--gold-bright);
}
.fact__label { font-size: var(--step--1); color: var(--text-mute); max-width: 26ch; }

.holding__role {
  margin-top: 0.6rem;
  font-size: var(--step--1);
  color: var(--text-mute);
}
.holdings__partners {
  margin-top: clamp(2rem, 4vw, 3rem);
  max-width: var(--measure);
  color: var(--text-soft);
}
.holdings__partners b { color: var(--text); font-weight: 600; }

.page__body .page__disclaimer,
.page > .page__disclaimer {
  margin-top: 2rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--line);
  font-size: var(--step--1);
  color: var(--text-mute);
}
.page > .page__disclaimer { max-width: var(--measure); }
.page__disclaimer a { color: inherit; text-underline-offset: 0.25em; }

.page__links--pager { justify-content: space-between; }

.faq__item { border-bottom: 1px solid var(--line); }
.faq__item:first-of-type { border-top: 1px solid var(--line); margin-top: 0.5rem; }
.faq__item summary {
  padding: 1rem 2rem 1rem 0;
  position: relative;
  cursor: pointer;
  list-style: none;
  color: var(--text);
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after {
  content: "+";
  position: absolute;
  right: 0.25rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--gold);
  font-size: 1.25em;
}
.faq__item[open] summary::after { content: "\2013"; }
.faq__item summary:hover { color: var(--gold-bright); }
.faq__item p { padding-bottom: 1.1rem; }

.page__body .enquiry-list { margin-bottom: 1.5rem; }
.enquiry-list a { color: var(--text); text-underline-offset: 0.25em; text-decoration-color: var(--gold-deep); }
.enquiry-list a:hover { color: var(--gold-bright); }

/* -------------------------------------------------------------------------
   15c. Print: light, plain, every link's address written out
   ------------------------------------------------------------------------- */

@media print {
  :root { --bg: #fff; --bg-raised: #fff; --surface: #fff; --surface-2: #fff; --line: #ccc; --line-strong: #999;
          --text: #000; --text-soft: #222; --text-mute: #444; --gold: #6b5420; --gold-bright: #6b5420; }
  html, body { background: #fff !important; color: #000; }
  .site-header, .nav-toggle, .lang, .skip-link, .hero__atmosphere, .hero__aurora, .hero__photo, .hero__scrim,
  .hero__actions, .about__figure, .page__links, .site-footer__top, .site-footer__legal, .more-link { display: none !important; }
  .js [data-reveal] { opacity: 1 !important; transform: none !important; }
  .hero, .section, .page, .facts { min-height: 0 !important; padding-block: 1.5rem !important; }
  .page { padding-top: 0 !important; }
  .domains__grid, .domain { background: #fff !important; }
  a[href^="http"]::after, a[href^="mailto:"]::after { content: " (" attr(href) ")"; font-size: 0.85em; color: #444; }
  .holding__link-icon, .domain__icon, .button__arrow { display: none; }
  .faq__item p { display: block; }
  h1, h2, h3 { break-after: avoid; }
  .holding, .fact, .faq__item, .contact__item { break-inside: avoid; }
}

/* -------------------------------------------------------------------------
   16. Motion: scroll reveal + aurora drift
   ------------------------------------------------------------------------- */

@media (prefers-reduced-motion: no-preference) {
  .js [data-reveal] {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity 0.8s var(--ease-out), transform 0.8s var(--ease-out);
  }
  .js [data-reveal].is-visible { opacity: 1; transform: none; }

  .hero__aurora::before { animation: aurora-drift-1 22s ease-in-out infinite alternate; }
  .hero__aurora::after  { animation: aurora-drift-2 28s ease-in-out infinite alternate; }
}

@keyframes aurora-drift-1 {
  0%   { transform: translate3d(0, 0, 0) rotate(0deg) scale(1); opacity: 0.9; }
  100% { transform: translate3d(-4%, 3%, 0) rotate(8deg) scale(1.12); opacity: 1; }
}
@keyframes aurora-drift-2 {
  0%   { transform: translate3d(0, 0, 0) rotate(0deg) scale(1.05); opacity: 0.6; }
  100% { transform: translate3d(5%, -2%, 0) rotate(-6deg) scale(1); opacity: 0.85; }
}