/* Arctonia: the frame every public page shares — the navigation, the footer and
   the line with CVR and the legal links. It is the front page's own frame,
   value for value, so a visitor who clicks on from the front page stays in the
   same house. One file: the React pages load it, and a change here is a change
   everywhere.

   Everything is prefixed ar- (classes, custom properties and the keyframe), so
   it can sit beside Tailwind and the rest of the app without touching it.
   Markup: docs/forside/sider/ramme.html. Behaviour (the nav's tone and veil,
   the footer's sky): /brand/arctonia-ramme.js. Fonts:
   /fonts/forside/forside-fonts.css. */

:root{
  --ar-ink:#0d1117;
  --ar-paper:#f0f3f3;
  --ar-serif:"Bodoni Moda",'Didot','Bodoni MT',serif;
  --ar-display:"Geist",-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --ar-sans:"Poppins",-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --ar-u:calc(100vw / 1600);        /* 1 design px at the 1600-wide reference */
}
@media (max-width:900px){ :root{--ar-u:calc(100vw / 430)} }
@media (max-width:900px) and (orientation:landscape){ :root{--ar-u:calc(100vw / 900)} }

.ar-skip{position:absolute;left:-9999px;top:0;z-index:300;background:#fff;color:#0d1117;
  padding:10px 16px;border-radius:0 0 6px 0;font:400 12px/1.2 var(--ar-sans);letter-spacing:.08em;
  text-transform:uppercase;text-decoration:none}
.ar-skip:focus{left:0}
.ar-vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);
  clip-path:inset(50%);white-space:nowrap}
.ar-logo{display:block;width:auto;aspect-ratio:1385/211;fill:currentColor;overflow:visible}

/* ── the navigation ─────────────────────────────────────────────────
   --nav-ink runs from 0 (light type, for a dark ground) to 1 (ink, for
   paper) and --nav-veil from 0 (clear) to 1 (frosted). On a sub page
   arctonia-ramme.js sets both from what is under the bar; the front page
   drives them every frame from its scenes and marks the bar data-styret. */
.ar-nav{
  position:fixed;top:0;left:0;right:0;z-index:60;
  display:flex;align-items:center;justify-content:space-between;
  padding:calc(26*var(--ar-u)) calc(40*var(--ar-u));
  font-family:var(--ar-sans);font-weight:300;-webkit-font-smoothing:antialiased;
  color:#101418;transition:color .45s ease;
}
.ar-nav a{color:inherit;text-decoration:none}
.ar-nav a:focus-visible{outline:2px solid #7fb2d8;outline-offset:3px;border-radius:4px}
.ar-brand{display:flex;align-items:center;flex:0 0 auto}
.ar-brand .ar-logo{height:max(13px, calc(16*var(--ar-u)))}
.ar-links{flex:1;display:flex;justify-content:center;gap:calc(52*var(--ar-u))}
.ar-links a,.ar-right a{
  font-size:max(11px, calc(11*var(--ar-u)));letter-spacing:calc(1.25*var(--ar-u));
  text-transform:uppercase;font-weight:400;opacity:.86;transition:opacity .3s
}
.ar-links a:hover,.ar-right a:hover,.ar-links a[aria-current]{opacity:1}
.ar-right{flex:0 0 auto;display:flex;align-items:center;gap:calc(30*var(--ar-u))}
/* Log ind: the word stands by the icon, because an icon alone was what the
   customers could not find */
.ar-login{display:inline-flex;align-items:center;gap:calc(8*var(--ar-u))}
.ar-login svg{width:max(15px, calc(16*var(--ar-u)));height:max(15px, calc(16*var(--ar-u)));flex:none}
.ar-pill{
  display:inline-flex;align-items:center;justify-content:center;
  height:calc(37*var(--ar-u));padding:0 calc(24*var(--ar-u));
  border:1px solid rgba(16,20,24,.55);border-radius:999px;
  background:rgba(255,255,255,.35);backdrop-filter:blur(9px);-webkit-backdrop-filter:blur(9px);
  transition:background .3s,border-color .45s,color .45s,opacity .3s;
}
.ar-pill:hover{background:rgba(255,255,255,.62)}
/* every page scrolls under the bar, so the bar gets a frosted ground in the
   tone its type already has */
.ar-nav::before{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;
  opacity:var(--nav-veil, 0);transition:opacity .35s ease;
  background:rgba(241,244,244,.82);
  -webkit-backdrop-filter:saturate(1.5) blur(16px);backdrop-filter:saturate(1.5) blur(16px);
  box-shadow:0 1px 0 rgba(13,17,23,.09)}
@supports (color: color-mix(in srgb, red 50%, blue)){
  .ar-nav{color:color-mix(in srgb, #101418 calc(var(--nav-ink, 1) * 100%), #ffffff)}
  .ar-pill{
    border-color:color-mix(in srgb, rgba(16,20,24,.55) calc(var(--nav-ink, 1) * 100%), rgba(255,255,255,.55));
    background:color-mix(in srgb, rgba(255,255,255,.35) calc(var(--nav-ink, 1) * 100%), rgba(255,255,255,.10))}
  .ar-pill:hover{
    background:color-mix(in srgb, rgba(255,255,255,.62) calc(var(--nav-ink, 1) * 100%), rgba(255,255,255,.22))}
  .ar-nav::before{
    background:color-mix(in srgb, rgba(241,244,244,.82) calc(var(--nav-ink, 1) * 100%), rgba(10,14,20,.72));
    box-shadow:0 1px 0 color-mix(in srgb, rgba(13,17,23,.09) calc(var(--nav-ink, 1) * 100%), rgba(255,255,255,.07))}
}
/* the front page eases the tone every frame itself */
.ar-nav[data-styret],.ar-nav[data-styret] .ar-pill,.ar-nav[data-styret]::before{transition:none}

@media (max-width:900px){
  .ar-nav{padding:calc(18*var(--ar-u)) calc(20*var(--ar-u))}
  .ar-brand .ar-logo{height:max(13px, calc(15*var(--ar-u)))}
  .ar-links{display:none}
  .ar-right{gap:calc(16*var(--ar-u))}
  .ar-right a:not(.ar-pill):not(.ar-login){display:none}
  /* on a phone the icon carries Log ind, with the word for screen readers */
  .ar-login{position:relative;min-width:44px;min-height:44px;justify-content:center;margin:-10px -6px}
  .ar-login svg{width:20px;height:20px}
  .ar-login span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .ar-pill{height:calc(32*var(--ar-u));padding:0 calc(16*var(--ar-u))}
  /* the pill is drawn small on a phone; its touch target reaches 44 px */
  .ar-pill{position:relative}
  .ar-pill::after{content:'';position:absolute;inset:-8px -6px}
}

/* ── the call to action ─────────────────────────────────────────── */
.ar-cta{
  display:inline-flex;align-items:center;justify-content:center;
  height:calc(63*var(--ar-u));padding:0 calc(44*var(--ar-u));
  border:0;border-radius:999px;background:#0d1117;color:#fff;cursor:pointer;
  font:400 max(12px, calc(13.5*var(--ar-u)))/1 var(--ar-sans);letter-spacing:calc(2.2*var(--ar-u));
  text-transform:uppercase;text-decoration:none;
  box-shadow:0 calc(10*var(--ar-u)) calc(28*var(--ar-u)) rgba(40,60,80,.18);
  transition:transform .4s cubic-bezier(.16,1,.3,1),background .3s
}
.ar-cta:hover{transform:translateY(calc(-3*var(--ar-u)))}
.ar-cta:focus-visible{outline:2px solid #7fb2d8;outline-offset:3px}
@media (max-width:900px){ .ar-cta{height:calc(52*var(--ar-u));font-size:max(12px, calc(13*var(--ar-u)))} }

/* ── the footer: observatory ────────────────────────────────────────
   Six layers, each drifting at its own rate as the footer comes up: stars,
   aurora, a far ridge, a near ridge, a graticule and a vignette. Parallax is
   applied to the stack, not to the content, so the type never moves. */
.ar-fod{
  position:relative;z-index:2;background:#080d14;color:#c8d3dd;overflow:hidden;
  padding:calc(230*var(--ar-u)) calc(60*var(--ar-u)) calc(40*var(--ar-u));
  font-family:var(--ar-sans);font-weight:300;-webkit-font-smoothing:antialiased;
}
.ar-fod a:focus-visible{outline:1px solid #cfdbe4;outline-offset:4px}
.ar-fx{position:absolute;inset:calc(-60*var(--ar-u)) 0 0;pointer-events:none;overflow:hidden}
.ar-fx > *{position:absolute;left:0;right:0;will-change:transform}
.ar-fx-stars{top:0;height:calc(560*var(--ar-u));width:100%;display:block}
.ar-fx-aurora{top:calc(40*var(--ar-u));height:calc(300*var(--ar-u));
  background:
    radial-gradient(58% 100% at 26% 100%, rgba(94,196,206,.20) 0%, rgba(94,196,206,0) 70%),
    radial-gradient(46% 100% at 63% 100%, rgba(126,168,220,.16) 0%, rgba(126,168,220,0) 72%),
    radial-gradient(38% 100% at 86% 100%, rgba(94,196,206,.13) 0%, rgba(94,196,206,0) 70%);
  filter:blur(calc(16*var(--ar-u)));opacity:.9}
.ar-fx-ridge-far{top:calc(40*var(--ar-u));height:calc(340*var(--ar-u));width:116%;left:-8%;
  object-fit:cover;object-position:50% 28%;opacity:.26;filter:blur(calc(1.6*var(--ar-u)));
  -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 14%,#000 52%,transparent 100%);
          mask-image:linear-gradient(to bottom,transparent 0,#000 14%,#000 52%,transparent 100%)}
.ar-fx-ridge-near{top:calc(84*var(--ar-u));height:calc(376*var(--ar-u));width:100%;
  object-fit:cover;object-position:50% 52%;opacity:.72;
  -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 12%,#000 42%,transparent 96%);
          mask-image:linear-gradient(to bottom,transparent 0,#000 12%,#000 42%,transparent 96%)}
.ar-fx-grat{top:0;height:calc(620*var(--ar-u));opacity:.5;
  background-image:repeating-linear-gradient(to right, rgba(160,196,214,.09) 0 1px, transparent 1px calc(80*var(--ar-u))),
                   repeating-linear-gradient(to bottom, rgba(160,196,214,.07) 0 1px, transparent 1px calc(80*var(--ar-u)));
  -webkit-mask-image:radial-gradient(72% 78% at 50% 26%, #000 0%, transparent 100%);
          mask-image:radial-gradient(72% 78% at 50% 26%, #000 0%, transparent 100%)}
.ar-fx-veil{top:0;bottom:0;height:auto;
  background:linear-gradient(to bottom, rgba(8,13,20,0) 0%, rgba(8,13,20,.55) 46%, rgba(8,13,20,.93) 100%)}
.ar-fod-inner{position:relative;z-index:2}

.ar-fmast{display:grid;grid-template-columns:calc(700*var(--ar-u)) 1fr;gap:calc(48*var(--ar-u));
  align-items:end;padding-bottom:calc(44*var(--ar-u));border-bottom:1px solid rgba(255,255,255,.12)}
.ar-fmast h2{
  font-family:var(--ar-display);font-weight:400;letter-spacing:-.036em;
  font-size:calc(84*var(--ar-u));line-height:.88;color:#eef4f8;white-space:nowrap;margin:0
}
.ar-fmast p{font-size:max(13px, calc(16*var(--ar-u)));line-height:max(22px, calc(26*var(--ar-u)));
  color:#8b9aa8;font-weight:300;max-width:calc(420*var(--ar-u));margin:0 0 0 auto}

.ar-frow{display:grid;grid-template-columns:repeat(4,1fr) calc(300*var(--ar-u));
  gap:calc(34*var(--ar-u));align-items:start;margin-top:calc(56*var(--ar-u))}
.ar-fcol{border-top:1px solid rgba(255,255,255,.13);padding-top:calc(14*var(--ar-u))}
.ar-fcol h3{font-size:max(11px, calc(11*var(--ar-u)));letter-spacing:calc(1.9*var(--ar-u));
  text-transform:uppercase;color:#748494;font-weight:400;margin:0 0 calc(16*var(--ar-u))}
.ar-fcol h3 .ar-logo{height:max(10px, calc(11*var(--ar-u)));color:#8fa0b0}
.ar-fcol a{display:flex;justify-content:space-between;align-items:baseline;gap:calc(10*var(--ar-u));
  color:#a9b7c4;text-decoration:none;font-size:max(12px, calc(13.5*var(--ar-u)));
  padding:calc(6*var(--ar-u)) 0;transition:color .3s}
.ar-fcol a i{font-style:normal;font-family:var(--ar-serif);color:#44525f;
  font-size:max(11px, calc(11*var(--ar-u)));font-variant-numeric:tabular-nums}
.ar-fcol a:hover,.ar-fcol a[aria-current]{color:#fff}
.ar-fpanel{border:1px solid rgba(255,255,255,.13);padding:calc(18*var(--ar-u));display:grid;gap:calc(11*var(--ar-u));
  background:rgba(12,19,28,.55);backdrop-filter:blur(calc(3*var(--ar-u)))}
.ar-fpanel .ar-prow{display:flex;justify-content:space-between;align-items:baseline;
  font-size:max(11px, calc(11*var(--ar-u)));letter-spacing:calc(.9*var(--ar-u));color:#7e8d9b;text-transform:uppercase}
.ar-fpanel .ar-prow b{font-family:var(--ar-serif);font-weight:400;color:#dbe6ef;letter-spacing:.02em;
  font-size:max(12px, calc(14*var(--ar-u)));font-variant-numeric:tabular-nums}
.ar-fpanel .ar-prow b .ar-logo{height:max(10px, calc(12*var(--ar-u)));color:#dbe6ef}
.ar-fpanel .ar-bar{height:calc(3*var(--ar-u));background:rgba(255,255,255,.10);position:relative;overflow:hidden}
.ar-fpanel .ar-bar i{position:absolute;inset:0 26% 0 0;background:linear-gradient(90deg,#4e7f96,#9fd4e4)}

.ar-dispatch{display:grid;grid-template-columns:calc(420*var(--ar-u)) 1fr;gap:calc(48*var(--ar-u));
  align-items:center;margin-top:calc(46*var(--ar-u));padding:calc(30*var(--ar-u)) 0;
  border-top:1px solid rgba(255,255,255,.12);border-bottom:1px solid rgba(255,255,255,.12)}
.ar-dispatch h2{font-family:var(--ar-display);font-weight:400;margin:0;
  font-size:calc(28*var(--ar-u));color:#e6eef4;letter-spacing:-.024em}
.ar-dispatch p{font-size:max(11px, calc(12.5*var(--ar-u)));color:#7e8d9b;margin:calc(6*var(--ar-u)) 0 0}
.ar-dispatch .ar-cta{margin:0;justify-self:end;background:#e9f1f6;color:#0b1119;box-shadow:none}
.ar-dispatch .ar-cta:hover{background:#fff}

.ar-fseal{position:absolute;right:calc(60*var(--ar-u));top:calc(74*var(--ar-u));
  width:calc(118*var(--ar-u));height:calc(118*var(--ar-u));opacity:.42;z-index:3}
.ar-fseal svg{width:100%;height:100%;display:block;animation:ar-spin 44s linear infinite}
@keyframes ar-spin{to{transform:rotate(360deg)}}
.ar-fbase{
  margin-top:calc(34*var(--ar-u));
  display:flex;justify-content:space-between;align-items:center;gap:calc(26*var(--ar-u));
  font-size:max(11px, calc(11*var(--ar-u)));letter-spacing:calc(1.1*var(--ar-u));color:#748494;text-transform:uppercase;
  font-variant-numeric:tabular-nums
}
.ar-glyphs{display:flex;gap:calc(16*var(--ar-u));opacity:.6}
.ar-glyphs svg{width:calc(15*var(--ar-u));height:calc(15*var(--ar-u))}
/* the company line and the legal links */
.ar-flegal{margin-top:calc(14*var(--ar-u));padding-top:calc(14*var(--ar-u));border-top:1px solid rgba(255,255,255,.08);
  display:flex;justify-content:space-between;align-items:center;gap:calc(26*var(--ar-u));flex-wrap:wrap;
  font-size:max(11px, calc(11*var(--ar-u)));letter-spacing:calc(1.1*var(--ar-u));color:#748494;text-transform:uppercase}
.ar-flegal nav{display:flex;gap:calc(22*var(--ar-u));flex-wrap:wrap;align-items:center}
.ar-flegal a,.ar-flegal button{color:#93a2b1;text-decoration:none;font:inherit;letter-spacing:inherit;text-transform:inherit;
  background:none;border:0;padding:0;cursor:pointer;transition:color .2s}
.ar-flegal a:hover,.ar-flegal button:hover{color:#fff}
.ar-flegal button:focus-visible{outline:1px solid #cfdbe4;outline-offset:4px}

@media (max-width:900px){
  .ar-fod{padding:calc(210*var(--ar-u)) calc(22*var(--ar-u)) calc(34*var(--ar-u))}
  .ar-fx-stars{height:calc(420*var(--ar-u))}
  .ar-fx-aurora{height:calc(230*var(--ar-u))}
  .ar-fx-ridge-far{height:calc(230*var(--ar-u));top:calc(34*var(--ar-u))}
  .ar-fx-ridge-near{height:calc(260*var(--ar-u));top:calc(74*var(--ar-u))}
  .ar-fx-grat{height:calc(460*var(--ar-u))}
  .ar-fmast{grid-template-columns:1fr;gap:calc(24*var(--ar-u));padding-bottom:calc(32*var(--ar-u))}
  .ar-fmast p{margin-left:0;max-width:100%}
  .ar-fmast h2{font-size:calc(40*var(--ar-u))}
  .ar-frow{grid-template-columns:1fr;gap:calc(26*var(--ar-u));margin-top:calc(36*var(--ar-u))}
  .ar-fseal{display:none}
  .ar-fcol a{font-size:max(13px, calc(15*var(--ar-u)))}
  .ar-fpanel{padding:calc(16*var(--ar-u))}
  .ar-dispatch{grid-template-columns:1fr;gap:calc(22*var(--ar-u));margin-top:calc(38*var(--ar-u))}
  .ar-dispatch h2{font-size:calc(25*var(--ar-u));text-wrap:balance}
  .ar-dispatch .ar-cta{justify-self:stretch}
  .ar-fbase{flex-direction:column;align-items:flex-start;gap:calc(10*var(--ar-u))}
}
@media (max-width:760px){
  .ar-flegal{flex-direction:column;align-items:flex-start;gap:12px}
  .ar-flegal a,.ar-flegal button{min-height:44px;display:inline-flex;align-items:center}
}
@media (prefers-reduced-motion:reduce){
  .ar-fseal svg{animation:none}
  .ar-cta,.ar-nav,.ar-pill,.ar-nav::before{transition:none}
}

/* Arctonia (repo): Arabic, right to left. The frame's fonts have no Arabic
   glyphs, so the site's own Arabic faces stand behind them, and arrows that
   point forward are mirrored. */
[dir="rtl"]{
  --ar-serif:"Bodoni Moda","Amiri","Noto Sans Arabic",serif;
  --ar-display:"Geist","Noto Kufi Arabic","Noto Sans Arabic",-apple-system,sans-serif;
  --ar-sans:"Poppins","Noto Sans Arabic",-apple-system,sans-serif;
}
[dir="rtl"] .ar-pil{transform:scaleX(-1)}
[dir="rtl"] .ar-pil.tilbage{transform:none}
/* A link parked at left:-9999px is scrollable in a right-to-left page (the
   page grew 10,000px wide); there it parks off the right edge instead. */
[dir="rtl"] .ar-skip{left:auto;right:-9999px;border-radius:0 0 0 6px}
[dir="rtl"] .ar-skip:focus{right:0}
/* The page you are on is underlined, so it reads as where you are, not only
   a little brighter (Jordan, 2026-10-06). */
.ar-links a[aria-current]{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:calc(7*var(--ar-u))}
/* In React the frame's .ar-side is a div, not <body>. Its overflow-x:hidden
   (arctonia-side.css) made that div a scroll box, so position:sticky inside it
   (the portfolio's scene) never stuck and the island's chapters scrolled away
   instead of playing. clip trims sideways overflow the same way without
   making a scroll box. */
div.ar-side{overflow-x:clip;overflow-y:visible}

/* ── the phone's menu (2026-10-06) ─────────────────────────────────────
   Logo left, then Book et møde and a button with the word Menu (an icon
   alone was what customers could not find). Log ind lives in the sheet, so
   the bar keeps two things on the right.

   The bar stays on top of the open sheet: the logo is the same element and
   never moves. The button's word turns to Luk and its two lines to a cross;
   the bar's type eases to ink and the pill steps aside. The sheet unfolds as
   a circle from the button (--ar-menu-x/y, set by arctonia-ramme.js) and the
   pages follow one by one. Behaviour: arctonia-ramme.js, menu(). Markup:
   docs/forside/sider/ramme.html. Front page bar: .nav; sub pages: .ar-nav. */
.ar-menuknap,.ar-menu{display:none}
.ar-menu-aaben,.ar-menu-aaben body{overflow:hidden}
@media (max-width:900px){
  .ar-right .ar-login,.navright a.login{display:none!important}
  .ar-menuknap{display:inline-flex;align-items:center;gap:9px;min-height:44px;margin:-6px -8px -6px -2px;padding:0 8px;
    background:none;border:0;color:inherit;cursor:pointer;
    font:400 11px/1 var(--ar-sans);letter-spacing:.14em;text-transform:uppercase}
  .ar-menuknap:focus-visible{outline:2px solid #7fb2d8;outline-offset:2px;border-radius:4px}
  .ar-menuord{display:grid}
  .ar-menuord>span{grid-area:1/1;transition:opacity .3s ease,transform .45s cubic-bezier(.7,0,.2,1)}
  .ar-menuord .luk{opacity:0;transform:translateY(6px)}
  .ar-menuknap[aria-expanded="true"] .ar-menuord .menu{opacity:0;transform:translateY(-6px)}
  .ar-menuknap[aria-expanded="true"] .ar-menuord .luk{opacity:1;transform:none}
  .ar-menuikon{position:relative;display:block;width:18px;height:11px}
  .ar-menuikon i{position:absolute;left:0;right:0;height:1px;background:currentColor;
    transition:transform .5s cubic-bezier(.7,0,.2,1)}
  .ar-menuikon i:first-child{top:2px}
  .ar-menuikon i:last-child{top:8px}
  .ar-menuknap[aria-expanded="true"] .ar-menuikon i:first-child{transform:translateY(3px) rotate(45deg)}
  .ar-menuknap[aria-expanded="true"] .ar-menuikon i:last-child{transform:translateY(-3px) rotate(-45deg)}
  .ar-menu:not([hidden]){display:flex}

  /* the bar over the sheet: on top, clear, in ink, without the pill */
  .ar-menu-aaben .ar-nav,.ar-menu-skifter .ar-nav,
  .ar-menu-aaben .nav,.ar-menu-skifter .nav{z-index:130}
  .ar-menu-aaben .ar-nav,.ar-menu-aaben .nav{--nav-ink:1!important;--nav-veil:0!important}
  /* ...in ink by day; at night the sheet is ink, so the bar's type is light */
  html[data-tema="nat"].ar-menu-aaben .ar-nav,html[data-tema="nat"].ar-menu-aaben .nav{--nav-ink:0!important}
  .ar-menu-skifter .ar-nav,.ar-menu-skifter .nav{transition:color .5s ease!important}
  .ar-menu-skifter .ar-nav::before,.ar-menu-skifter .nav::before{transition:opacity .3s ease!important}
  .ar-menu-aaben .ar-right .ar-pill,.ar-menu-aaben .navright .pill{opacity:0;pointer-events:none}
  .ar-menu-skifter .ar-right .ar-pill,.ar-menu-skifter .navright .pill{transition:opacity .3s ease,border-color .5s,background .5s,color .5s!important}
}

.ar-menu{position:fixed;inset:0;z-index:120;flex-direction:column;
  background:var(--ar-paper);color:var(--ar-ink);
  padding:calc(var(--ar-menu-top, 64px) + 6px) 20px calc(env(safe-area-inset-bottom, 0px) + 28px);
  overflow-y:auto;overscroll-behavior:contain;font-family:var(--ar-sans);font-weight:300;
  clip-path:circle(0px at var(--ar-menu-x, 100%) var(--ar-menu-y, 0px));
  transition:clip-path .55s cubic-bezier(.7,0,.2,1)}
.ar-menu.aaben{clip-path:circle(160vmax at var(--ar-menu-x, 100%) var(--ar-menu-y, 0px));
  transition:clip-path .75s cubic-bezier(.7,0,.2,1)}
.ar-menu a{color:inherit;text-decoration:none}
.ar-menu a:focus-visible,.ar-menu button:focus-visible{outline:2px solid #7fb2d8;outline-offset:3px;border-radius:4px}

.ar-menu-sider{list-style:none;margin:0;padding:0;border-top:1px solid rgba(13,17,23,.12)}
.ar-menu-sider a{display:flex;align-items:baseline;gap:18px;padding:16px 0;border-bottom:1px solid rgba(13,17,23,.12);
  font:400 30px/1.1 var(--ar-display);letter-spacing:-.025em}
.ar-menu-sider a i{font:400 13px/1 var(--ar-serif);font-style:normal;color:#5d6874;width:22px;flex:none}
.ar-menu-sider a[aria-current] span{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:6px}
.ar-menu-fod{margin-top:auto;display:grid;gap:18px;padding-top:32px}
.ar-menu .ar-login{display:inline-flex!important;align-items:center;justify-content:flex-start;gap:10px;min-height:44px;
  margin:0;min-width:0;position:static;font:400 12px/1 var(--ar-sans);letter-spacing:.14em;text-transform:uppercase}
.ar-menu .ar-login svg{width:20px;height:20px}
.ar-menu .ar-login span{position:static;width:auto;height:auto;overflow:visible;clip:auto;white-space:normal}
.ar-menu .ar-cta,.ar-menu .ar-cta:visited{width:100%;margin:0;color:#fff}
/* at night the sheet is ink, so the button is light with ink type; :visited
   is named too, or a visited link keeps the day's white on the light button */
html[data-tema="nat"] .ar-menu .ar-cta,html[data-tema="nat"] .ar-menu .ar-cta:visited{
  background:#e6eef3;color:#0a1220;box-shadow:0 10px 30px rgba(0,0,0,.4)}
.ar-menu-kontakt{font-size:13px;color:#4a5562}
.ar-menu-kontakt a{text-decoration:underline;text-underline-offset:3px;text-decoration-color:rgba(13,17,23,.3)}
html[data-tema="nat"] .ar-menu-kontakt{color:rgba(227,234,240,.66)}
html[data-tema="nat"] .ar-menu-kontakt a{text-decoration-color:rgba(227,234,240,.3)}

/* the pages follow the circle, one by one; on the way out they leave together */
.ar-menu-sider li,.ar-menu-fod>*{opacity:0;transform:translateY(14px);
  transition:opacity .2s ease,transform .3s ease}
.ar-menu.aaben .ar-menu-sider li,.ar-menu.aaben .ar-menu-fod>*{opacity:1;transform:none;
  transition:opacity .5s ease,transform .7s cubic-bezier(.16,1,.3,1)}
.ar-menu.aaben .ar-menu-sider li:nth-child(1){transition-delay:.16s}
.ar-menu.aaben .ar-menu-sider li:nth-child(2){transition-delay:.21s}
.ar-menu.aaben .ar-menu-sider li:nth-child(3){transition-delay:.26s}
.ar-menu.aaben .ar-menu-sider li:nth-child(4){transition-delay:.31s}
.ar-menu.aaben .ar-menu-sider li:nth-child(5){transition-delay:.36s}
.ar-menu.aaben .ar-menu-fod>*{transition-delay:.44s}

@media (prefers-reduced-motion:reduce){
  .ar-menu,.ar-menu.aaben,.ar-menu-sider li,.ar-menu-fod>*,.ar-menuikon i,.ar-menuord>span{transition:none!important}
  .ar-menu{clip-path:none}
}

/* ── night mode ("blåtryk") ───────────────────────────────────────────
   Arctonia: the toggle in the bar is the O. By day a ring with rays, a sun
   drawn as the logo's O; at night a crescent, as a shadow slides over it.
   Pressing it lets night fall from the button (View Transitions; see tema()
   in arctonia-ramme.js). The pages' own sheets carry their night colours. */
.ar-tema{display:inline-grid;place-items:center;flex:none;width:40px;height:40px;margin:-6px -6px;padding:0;
  border:0;border-radius:50%;background:none;color:inherit;cursor:pointer;opacity:.86;transition:opacity .3s}
.ar-tema:hover{opacity:1}
.ar-tema:focus-visible{outline:2px solid #7fb2d8;outline-offset:2px}
.ar-tema svg{width:max(17px, calc(18*var(--ar-u)));height:max(17px, calc(18*var(--ar-u)));overflow:visible}
.ar-tema-skive{fill:currentColor;fill-opacity:0;stroke:currentColor;stroke-width:1.5;transition:fill-opacity .5s ease}
.ar-tema-bid{transform:translate(9px,-9px);transition:transform .65s cubic-bezier(.65,0,.35,1)}
.ar-tema-straaler{fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;transform-origin:12px 12px;
  transition:transform .65s cubic-bezier(.65,0,.35,1), opacity .4s ease}
html[data-tema="nat"] .ar-tema-skive{fill-opacity:1}
html[data-tema="nat"] .ar-tema-bid{transform:none}
html[data-tema="nat"] .ar-tema-straaler{opacity:0;transform:rotate(60deg) scale(.4)}
::view-transition-old(root),::view-transition-new(root){animation:none;mix-blend-mode:normal}
:root[data-tema-skift]::view-transition-new(root){animation:ar-tema-ind .9s cubic-bezier(.65,0,.35,1) both}
@keyframes ar-tema-ind{from{clip-path:circle(0 at var(--tema-x) var(--tema-y))}to{clip-path:circle(var(--tema-r) at var(--tema-x) var(--tema-y))}}
@media (prefers-reduced-motion:reduce){ .ar-tema *{transition:none!important} }

/* the night's ground for every page in the frame */
html[data-tema="nat"]{--ar-paper:#0a1220;--ar-ink:#e3eaf0;color-scheme:dark}
/* on the narrowest phones the toggle needs the room the word "Menu" takes;
   the button keeps its name for a screen reader */
@media (max-width:379px){
  .ar-menuord{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
}