/* ============================================================================
   VAERN Systems — site stylesheet
   Design system: "Industry / Night Ops" (steel-blue wireframe on a dark technical ground)
   Website release: v1.0.2 (23 August 2026) — stylesheet ?v=7.2
   Tokens derived from the internal Industry design system.
   Self-hosted Barlow / Barlow Condensed. No external requests.
   ========================================================================== */

/* ── fonts (self-hosted, latin + latin-ext) ─────────────────────────────── */
@font-face{font-family:"Barlow";font-style:normal;font-weight:400;font-display:swap;
  src:url(../fonts/barlow-400-latin.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Barlow";font-style:normal;font-weight:400;font-display:swap;
  src:url(../fonts/barlow-400-latin-ext.woff2) format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Barlow";font-style:normal;font-weight:500;font-display:swap;
  src:url(../fonts/barlow-500-latin.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Barlow";font-style:normal;font-weight:500;font-display:swap;
  src:url(../fonts/barlow-500-latin-ext.woff2) format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Barlow";font-style:normal;font-weight:600;font-display:swap;
  src:url(../fonts/barlow-600-latin.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Barlow";font-style:normal;font-weight:600;font-display:swap;
  src:url(../fonts/barlow-600-latin-ext.woff2) format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Barlow Condensed";font-style:normal;font-weight:400;font-display:swap;
  src:url(../fonts/barlow-condensed-400-latin.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Barlow Condensed";font-style:normal;font-weight:400;font-display:swap;
  src:url(../fonts/barlow-condensed-400-latin-ext.woff2) format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Barlow Condensed";font-style:normal;font-weight:500;font-display:swap;
  src:url(../fonts/barlow-condensed-500-latin.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Barlow Condensed";font-style:normal;font-weight:500;font-display:swap;
  src:url(../fonts/barlow-condensed-500-latin-ext.woff2) format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Barlow Condensed";font-style:normal;font-weight:600;font-display:swap;
  src:url(../fonts/barlow-condensed-600-latin.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Barlow Condensed";font-style:normal;font-weight:600;font-display:swap;
  src:url(../fonts/barlow-condensed-600-latin-ext.woff2) format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

/* ── tokens ─────────────────────────────────────────────────────────────── */
:root{
  /* ground & ink */
  --bg:#12161c; --bg-1:#171c23; --bg-2:#1d232b; --panel:#151a21;
  --ink:#e8ebee; --ink-2:#a9b1b8; --ink-3:#7d858d;
  --line:rgba(232,235,238,.12); --line-2:rgba(232,235,238,.25);

  /* accent — one voice (mono scheme). Ramp steps from the system. */
  --brass:#7fa6cc;            /* base accent — chrome, rules, icons */
  --brass-2:#a9c6e2;          /* accent-300 — accent text on dark ground (AA) */
  --brass-3:#5980a6;          /* accent-500 — quiet accent */
  --brass-solid:#46698c;      /* the one solid object: primary button */
  --brass-tint:rgba(127,166,204,.10);
  --brass-line:rgba(127,166,204,.45);
  --steel:#9aa1a7; --steel-tint:rgba(154,161,167,.14);
  --ok:#5fae88;

  /* ── Dansk heraldik paa moerk grund (v4.8) ──────────────────────────────
     Hentet fra tre danske forsvarsemblemer: Dannebrog-roed, kronernes guld og
     skjoldenes dybe marineblaa. Staalblaa (--brass) er stadig den baerende
     stemme — Night Ops er ikke lavet om. Roed og guld er KRYDDERI: roed dér
     hvor noget er en trussel eller et valg, guld til de smaa heraldiske
     markoerer. Bruges de bredt, holder temaet op med at vaere Night Ops.

     Begge er loeftet i lyshed i forhold til de trykte originaler. En Dannebrog-
     roed (#C8102E) og en metallisk guld gaar begge i staa mod #12161c; disse
     to rammer AA paa den moerke grund. */
  --alert:#dc4f5f;                  /* Dannebrog-roed, loeftet til moerk grund — STREGER, rammer, markoerer */
  --alert-2:#e8737f;                /* samme roed, loeftet igen — TEKST. #dc4f5f rammer kun 4,43:1
                                       paa --panel og --navy og falder dermed under AA for broedtekst;
                                       #e8737f ligger paa 5,4-6,2:1 mod alle sitets grunde. */
  --alert-line:rgba(220,79,95,.42);
  --alert-tint:rgba(220,79,95,.10);
  --gold:#d4af5a;                   /* kronernes guld — kun smaa markoerer */
  --gold-2:#8a7134;                 /* samme guld, daempet til streger */
  --gold-line:rgba(212,175,90,.38);
  --navy:#0d1a2b;                   /* skjoldenes marineblaa — sektionsgrund */

  /* type */
  --sans:"Barlow",system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --mono:"Barlow Condensed",system-ui,sans-serif;   /* the label voice */
  --data:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; /* numerals */

  /* space — 0.85× density */
  --s1:3px; --s2:7px; --s3:10px; --s4:15px; --s5:22px; --s6:32px; --s7:48px; --s8:72px;
  --wrap:1200px; --head-h:64px;
  --ease:cubic-bezier(.22,.61,.36,1);

  /* elevation */
  --shadow-sm:0 1px 2px rgba(0,0,0,.5);
  --shadow-md:0 3px 10px rgba(0,0,0,.5);
  --shadow-lg:0 12px 32px rgba(0,0,0,.6);

  /* registration mark (blueprint "+") */
  --mark:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='11'%3E%3Cpath d='M5.5 0v11M0 5.5h11' stroke='%237fa6cc' stroke-width='1'/%3E%3C/svg%3E");
  --mark-light:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='11'%3E%3Cpath d='M5.5 0v11M0 5.5h11' stroke='%23ffffff' stroke-width='1' opacity='.75'/%3E%3C/svg%3E");
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--sans); font-size:16px; line-height:1.58; font-weight:400;
  letter-spacing:0; overflow-x:hidden;
  /* the modular board: a whisper of grid under everything */
  background-image:
    linear-gradient(rgba(232,235,238,.04) 1px,transparent 1px),
    linear-gradient(90deg,rgba(232,235,238,.04) 1px,transparent 1px);
  background-size:48px 48px;
  background-position:center top;
  background-attachment:fixed;
}
h1,h2,h3,h4{font-family:var(--mono); font-weight:600; line-height:1.02; letter-spacing:-.005em; margin:0}
h1{font-size:clamp(2.7rem,7vw,4.7rem)}
h2{font-size:clamp(1.95rem,4.2vw,3rem)}
h3{font-size:clamp(1.3rem,2.3vw,1.7rem); font-weight:600}
h4{font-size:1.2rem; font-weight:600; letter-spacing:.005em}
p{margin:0}
a{color:var(--brass-2); text-decoration:none; text-underline-offset:3px; transition:color .18s var(--ease)}
a:hover{color:var(--brass)}
img,svg{display:block; max-width:100%}
ul{margin:0; padding:0; list-style:none}
:focus{outline:none}
:focus-visible{outline:2px solid var(--gold); outline-offset:2px}
::selection{background:rgba(127,166,204,.3); color:var(--ink)}
.skip{position:absolute; left:-9999px; top:0; background:var(--brass-solid); color:#fff; padding:10px 16px; z-index:200; font-family:var(--mono); font-weight:600; font-size:.9rem; letter-spacing:.1em; text-transform:uppercase}
.skip:focus{left:8px; top:8px}

/* ── layout ─────────────────────────────────────────────────────────────── */
.wrap{max-width:var(--wrap); margin:0 auto; padding:0 clamp(20px,5vw,40px)}
.section{padding:clamp(44px,7.5vw,var(--s8)) 0; position:relative}
.section+.section{border-top:1px solid var(--line)}
.stack>*+*{margin-top:var(--s4)}
.mono{font-family:var(--mono)}
.muted{color:var(--ink-2)} .faint{color:var(--ink-3)}
.center{text-align:center}
.lede{font-size:clamp(1.06rem,1.7vw,1.3rem); line-height:1.6; color:var(--ink-2); max-width:62ch; font-weight:400}

/* labels & section headers — Barlow Condensed, wide-tracked, uppercase */
.kicker{display:inline-flex; align-items:center; gap:10px; font-family:var(--mono); font-weight:600; font-size:.86rem; letter-spacing:.26em; text-transform:uppercase; color:var(--brass-2)}
.kicker::before{content:""; width:22px; height:1px; background:var(--brass); opacity:.85}
.kicker.plain::before{display:none}
.sec-head{display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap:var(--s3) var(--s6); margin-bottom:var(--s6); padding-bottom:var(--s3); border-bottom:1px solid var(--line)}
.sec-head .h{max-width:36ch}
/* Sektionsnummeret er sitets mest "heraldiske" element — et lille maerke i
   hjoernet af hvert opslag. Det er dér guldet fra kronerne hoerer hjemme, og
   det er lille nok til at Night Ops ikke skifter karakter. */
.sec-no{font-family:var(--data); font-size:.7rem; letter-spacing:.22em; color:var(--gold); text-transform:uppercase; white-space:nowrap; display:inline-flex; align-items:center; gap:9px}
.sec-no::before{content:""; width:14px; height:1px; background:var(--gold-2)}
.eyebrow{font-family:var(--mono); font-weight:600; font-size:.8rem; letter-spacing:.22em; text-transform:uppercase; color:var(--ink-3)}

/* ── blueprint frame ────────────────────────────────────────────────────── */
.frame{position:relative; border:1px solid var(--line-2)}
.frame>.corner{position:absolute; width:11px; height:11px; color:var(--brass); opacity:1}
.frame>.corner::before,.frame>.corner::after{content:""; position:absolute; background:currentColor}
.frame>.corner::before{left:5px; top:0; width:1px; height:100%}
.frame>.corner::after{top:5px; left:0; width:100%; height:1px}
.corner.tl{top:-6px; left:-6px} .corner.tr{top:-6px; right:-6px}
.corner.bl{bottom:-6px; left:-6px} .corner.br{bottom:-6px; right:-6px}

/* registration marks without extra markup */
.marked{
  background-image:var(--mark),var(--mark),var(--mark),var(--mark);
  background-repeat:no-repeat;
  background-position:-5px -5px, calc(100% + 5px) -5px, -5px calc(100% + 5px), calc(100% + 5px) calc(100% + 5px);
}

/* ── buttons ────────────────────────────────────────────────────────────── */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:10px; cursor:pointer;
  font-family:var(--mono); font-weight:600; font-size:.95rem; letter-spacing:.12em; text-transform:uppercase;
  padding:13px 24px; border:1px solid var(--line-2); background:transparent; color:var(--ink);
  border-radius:0; transition:all .18s var(--ease); text-decoration:none; position:relative}
.btn svg{width:15px; height:15px; stroke:currentColor; fill:none; stroke-width:1.5}
.btn:hover{border-color:var(--brass); color:var(--brass-2); background:var(--brass-tint)}
.btn:active{background:rgba(127,166,204,.18)}
.btn-accent{
  background-color:var(--brass-solid); border-color:var(--brass-solid); color:#fff; font-weight:600;
  background-image:var(--mark-light),var(--mark-light),var(--mark-light),var(--mark-light);
  background-repeat:no-repeat;
  background-position:-5px -5px, calc(100% + 5px) -5px, -5px calc(100% + 5px), calc(100% + 5px) calc(100% + 5px);
}
.btn-accent:hover{background-color:#52789b; border-color:#52789b; color:#fff}
.btn-accent:active{background-color:#38536d; border-color:#38536d}
.btn-line:hover{background:var(--brass-tint)}
.btn-sm{padding:9px 16px; font-size:.86rem}

/* ── header / nav ───────────────────────────────────────────────────────── */
.site-head{position:sticky; top:0; z-index:100; background:rgba(18,22,28,.86); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); border-bottom:1px solid var(--line-2)}
.head-inner{display:flex; align-items:center; gap:var(--s5); height:var(--head-h)}
.brand{display:flex; align-items:center; gap:11px; text-decoration:none; color:var(--ink); margin-right:auto; flex:none}
.brand svg{width:30px; height:30px; flex:none}
.brand .bn{display:block; font-family:var(--mono); font-weight:600; letter-spacing:.3em; font-size:1.24rem; line-height:1}
.brand .bs{display:block; font-family:var(--mono); font-weight:500; letter-spacing:.38em; font-size:.6rem; color:var(--brass-2); margin-top:3px; text-transform:uppercase}
.primary .nav-list{display:flex; align-items:center; gap:2px}
.nav-link{display:inline-flex; align-items:center; gap:6px; font-family:var(--mono); font-weight:500; font-size:1.02rem; letter-spacing:.04em; color:var(--ink-2); padding:8px 13px; background:none; border:0; cursor:pointer; transition:color .18s var(--ease)}
.nav-link:hover,.nav-link[aria-current="page"]{color:var(--ink)}
.nav-link[aria-current="page"]{color:var(--brass-2)}
.nav-link svg{width:12px; height:12px; stroke:currentColor; fill:none; stroke-width:1.5; transition:transform .2s var(--ease)}
.has-menu{position:relative}
.has-menu[data-open="true"] .nav-link svg{transform:rotate(180deg)}
.menu{position:absolute; top:calc(100% + 6px); left:0; min-width:318px; background:var(--panel); border:1px solid var(--line-2); padding:7px; opacity:0; visibility:hidden; transform:translateY(-6px); transition:all .18s var(--ease); box-shadow:var(--shadow-lg)}
.has-menu[data-open="true"] .menu,.has-menu:hover .menu,.has-menu:focus-within .menu{opacity:1; visibility:visible; transform:translateY(0)}
.menu a{display:block; padding:10px 12px; color:var(--ink-2); font-size:.92rem; border-left:2px solid transparent; transition:all .16s var(--ease)}
.menu a:hover{color:var(--ink); background:var(--brass-tint); border-left-color:var(--brass)}
/* formål øverst (b), navn under (span) — samme rækkefølge som produktkortene */
.menu a b{display:block; color:var(--brass-2); font-weight:600; letter-spacing:.16em; font-family:var(--mono); font-size:.92rem; margin:0; text-transform:uppercase}
.menu a span{display:block; color:var(--ink); font-family:var(--mono); font-weight:600; font-size:1rem; letter-spacing:.22em; text-transform:uppercase; margin-top:3px}
.menu a:hover b{color:var(--brass)}
.head-actions{display:flex; align-items:center; gap:var(--s3); flex:none}
.lang{display:inline-flex; align-items:center; gap:4px; font-family:var(--mono); font-weight:600; font-size:.88rem; letter-spacing:.1em; background:none; border:1px solid var(--line-2); color:var(--ink-3); padding:6px 10px; cursor:pointer}
.lang:hover{border-color:var(--brass); color:var(--ink-2)}
.lang [data-lang]{transition:color .16s var(--ease)}
.lang [data-lang].on{color:var(--brass-2)}
.lang .sep{color:var(--ink-3); opacity:.5}
.menu-btn{display:none; font-family:var(--mono); font-weight:600; font-size:.9rem; letter-spacing:.12em; background:none; border:1px solid var(--line-2); color:var(--ink); padding:8px 12px; cursor:pointer; text-transform:uppercase}

/* ── hero ───────────────────────────────────────────────────────────────── */
.hero{position:relative; padding:clamp(52px,9vw,104px) 0 clamp(44px,6.5vw,76px); overflow:hidden}
.hero-grid{display:grid; grid-template-columns:1.15fr .85fr; gap:clamp(28px,5vw,64px); align-items:center}
.hero h1{margin:var(--s4) 0 var(--s5); max-width:16ch}
.hero .lede{max-width:54ch}
.hero-cta{display:flex; flex-wrap:wrap; gap:var(--s3); margin-top:var(--s6)}
.hero-visual{position:relative; aspect-ratio:1; width:100%; max-width:460px; margin-left:auto}
.hero-meta{display:flex; gap:var(--s5); margin-top:var(--s6); flex-wrap:wrap}
.hero-meta .m{border-left:1px solid var(--brass-line); padding-left:var(--s3)}
.hero-meta .m b{display:block; font-family:var(--mono); font-size:1.06rem; color:var(--ink); font-weight:600; letter-spacing:.04em}
.hero-meta .m span{font-size:.82rem; color:var(--ink-3)}

/* ── radar scopes (v5.0) ──────────────────────────────────────────────────
   Ét instrument-sprog for alle sitets radarskaerme: konsol-skopet i demo-
   blokken og det stille skop i undersidernes hero. Forsidens levende
   sensorlag (.xhero-live / .lv) er et andet lag og roeres ikke herfra.

   SVG skalerer aflaest af enhedens pixelforhold — der er ingen bitmap at
   opskalere, saa skopet staar knivskarpt paa Retina uden DPR-kode. Alt er
   tegnet i én 200x200-viewBox med centrum i (100,100), saa ringe, pejle-
   maerker og sweep deler nulpunkt og ikke kan glide fra hinanden.

   Farvefordeling: staalblaa er stemmen (ringe, sweep, bekraeftede spor),
   roed er KUN det klassificerede spor, guld er KUN nordmaerket. */
.radar{width:100%; height:auto; aspect-ratio:1; overflow:visible;
  shape-rendering:geometricPrecision}
/* skopets grund — en svag glød ud fra centrum, saa skiven har dybde */
.radar .rg0{stop-color:var(--brass); stop-opacity:.18}
.radar .rg1{stop-color:var(--brass); stop-opacity:.05}
.radar .rg2{stop-color:var(--brass); stop-opacity:0}
.radar .scope{stroke:none}
.radar .ring{fill:none; stroke:var(--line-2); stroke-width:1}
.radar .ring.faint{stroke:var(--line)}
.radar .ring.rim{stroke:var(--brass-line); stroke-width:1.2}
.radar .tick{stroke:var(--ink-3); stroke-width:.9}
.radar .tick.med{stroke:var(--steel); stroke-width:1}
.radar .tick.maj{stroke:var(--brass); stroke-width:1.3}
.radar .tick.north{stroke:var(--gold); stroke-width:1.8}
.radar .cross{stroke:var(--line-2); stroke-width:1}
.radar .bearing{fill:var(--ink-2); font-family:var(--mono); font-weight:600;
  font-size:9px; letter-spacing:.12em}
.radar .bearing.n{fill:var(--gold)}
.radar .rng{fill:var(--ink-3); font-family:var(--data); font-size:6px; letter-spacing:.18em}
/* sporene: hale, prik, og for det klassificerede spor ogsaa bracket + etiket */
.radar .trail{fill:none; stroke:var(--brass-3); stroke-width:1; stroke-linecap:round}
.radar .trail.hot{stroke:var(--alert)}
.radar .hist{fill:var(--brass-3)}
.radar .hist.hot{fill:var(--alert)}
.radar .track{fill:var(--steel); stroke:none}
.radar .track.conf{fill:var(--brass-2)}
.radar .track.hot{fill:var(--alert)}
.radar .brk{fill:none; stroke:var(--alert); stroke-width:1.2}
.radar .lb{font-family:var(--data); font-size:6.4px; letter-spacing:.16em; fill:var(--ink-2)}
.radar .lb.hot{fill:var(--alert-2)}
/* sweepet: fast streg forrest, hale der toner ud bagved — samme idiom som
   forsidens sensorlag, saa de to instrumenter laeses som samme system */
.radar .swp{fill:var(--brass); stroke:none}
.radar .sweep-line{stroke:var(--brass-2); stroke-width:1.3}
.radar .sweep-grp{transform-box:view-box; transform-origin:100px 100px}
@media (prefers-reduced-motion:no-preference){
  .radar .sweep-grp{animation:sweep 12s linear infinite}
  .radar .track.pulse{animation:pulse 3.2s var(--ease) infinite}
}
@keyframes sweep{to{transform:rotate(360deg)}}
@keyframes pulse{0%,100%{opacity:.45} 50%{opacity:1}}

/* Det stille skop i undersidernes hero. Var foer fire nøgne ringe, halvt ude
   af billedet i to kanter; nu et helt instrument, der ligger inde i sektionen
   og ikke beskaeres. Under 940 px er det vaek — der er ingen plads ved siden
   af rubrikken, og et halvt skop bag teksten er stoej. */
.phero-scope{position:absolute; top:50%; right:clamp(0px,2.5vw,48px);
  transform:translateY(-50%); width:clamp(200px,23vw,300px);
  opacity:.62; pointer-events:none; z-index:0}
.phero .wrap{position:relative; z-index:1}
/* Under 1140 px er der ikke plads til det store skop ved siden af rubrikken.
   Det bliver mindre og traeder tilbage — men bliver INDE i sektionen: en
   halvt beskaaret skive er praecis den "ufaerdige" fornemmelse, passet
   skulle af med. */
@media(max-width:1140px){ .phero-scope{opacity:.45; width:210px; right:10px} }
@media(max-width:940px){ .phero-scope{display:none} }

/* ── generic grids ──────────────────────────────────────────────────────── */
.grid{display:grid; gap:1px; background:var(--line-2)}
.grid.cols-2{grid-template-columns:repeat(2,1fr)}
.grid.cols-3{grid-template-columns:repeat(3,1fr)}
.cards{display:grid; gap:var(--s4)}
.cards.c2{grid-template-columns:repeat(2,1fr)}
.cards.c3{grid-template-columns:repeat(3,1fr)}

/* dual-audience — transparent line drawings */
.duo{display:grid; grid-template-columns:1fr 1fr; gap:var(--s5)}
.duo-card{position:relative; padding:var(--s6); border:1px solid var(--line-2); background:transparent; display:flex; flex-direction:column; gap:var(--s3); transition:border-color .2s var(--ease),background .2s var(--ease); text-decoration:none; color:var(--ink)}
.duo-card:hover{border-color:var(--brass); background:var(--brass-tint)}
.duo-card h3{color:var(--ink)}
.duo-card .go{margin-top:auto; font-family:var(--mono); font-weight:600; font-size:.9rem; letter-spacing:.14em; text-transform:uppercase; color:var(--brass-2); display:inline-flex; gap:8px; align-items:center}
.duo-card:hover .go svg{transform:translateX(4px)}
.duo-card .go svg{width:14px; height:14px; stroke:currentColor; fill:none; stroke-width:1.5; transition:transform .2s var(--ease)}

/* ── product pillar cards — formål først, navn under ─────────────────────────
   Rækkefølgen er pointen: man skal kunne se HVAD modulet er (sensor, effektor,
   datalink) før man ser hvad det hedder. Navnene er nordiske og siger intet i
   sig selv til en indkøber, der første gang lander på siden. Samme mønster
   går igen i menuen (.menu a), footeren (.fprod), produkt-heroen (.phid-*)
   og modulrækken nederst på produktsiderne (.tag-mod). */
.pcard{position:relative; padding:var(--s5); border:1px solid var(--line-2); background-color:transparent; display:flex; flex-direction:column; gap:var(--s3); text-decoration:none; color:var(--ink); transition:border-color .2s var(--ease),background-color .2s var(--ease),transform .2s var(--ease);
  background-image:var(--mark),var(--mark),var(--mark),var(--mark);
  background-repeat:no-repeat;
  background-position:-5px -5px, calc(100% + 5px) -5px, -5px calc(100% + 5px), calc(100% + 5px) calc(100% + 5px)}
.pcard:hover{border-color:var(--brass); background-color:var(--brass-tint); transform:translateY(-2px)}
.picon{width:40px; height:40px; stroke:var(--brass); fill:none; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round}
/* 1 · formålet — det første øjet rammer */
.pcard .pfunc{display:block; font-family:var(--mono); font-weight:600; font-size:1.42rem; line-height:1.04; letter-spacing:.1em; text-transform:uppercase; color:var(--brass-2); padding-right:46px}
.pcard .pfunc i{display:block; font-style:normal; font-size:.78rem; font-weight:500; letter-spacing:.18em; color:var(--ink-3); margin-top:7px}
/* ikonet træder til side, så formålet ejer den øverste linje */
.pcard .picon{position:absolute; top:var(--s5); right:var(--s5); width:32px; height:32px}
/* 2 · navnet — under formålet, adskilt af en tynd regel */
.pcard .pname{font-family:var(--mono); font-weight:600; font-size:1.02rem; letter-spacing:.24em; color:var(--ink); text-transform:uppercase; border-top:1px solid var(--line); padding-top:var(--s3)}
.pcard:hover .pname{border-top-color:var(--brass-line)}
/* 3 · hvad det gør, i klartekst */
.pcard .pdesc{font-size:.92rem; color:var(--ink-2); flex:1}
.pcard .pfoot{display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap:var(--s3)}
.pcard .go{font-family:var(--mono); font-weight:600; font-size:.84rem; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-3)}
.pcard:hover .go{color:var(--brass-2)}
.pcard .pstep{font-family:var(--data); font-size:.68rem; letter-spacing:.2em; text-transform:uppercase; color:var(--ink-3); white-space:nowrap}

/* flow */
.flow{display:grid; grid-template-columns:repeat(5,1fr); gap:1px; background:var(--line-2); border:1px solid var(--line-2)}
.flow .step{background:var(--bg); padding:var(--s5) var(--s4); position:relative}
.flow .step .n{font-family:var(--data); font-size:.7rem; color:var(--brass-2); letter-spacing:.16em}
.flow .step .verb{display:block; font-family:var(--mono); font-weight:600; font-size:1.32rem; margin:var(--s2) 0 var(--s1); line-height:1.1}
.flow .step .who{font-family:var(--mono); font-weight:600; font-size:.82rem; letter-spacing:.14em; color:var(--brass-2); text-transform:uppercase}
.flow .step p{font-size:.86rem; color:var(--ink-2); margin-top:var(--s3)}
.flow .step:not(:last-child)::after{content:"→"; position:absolute; right:-11px; top:calc(var(--s5) + 2px); color:var(--brass); font-size:.9rem; z-index:2; background:var(--bg); width:20px; text-align:center}

/* principle band */
.principle{background:var(--bg-1); border-top:1px solid var(--brass-line); border-bottom:1px solid var(--brass-line)}
.principle .big{font-family:var(--mono); font-size:clamp(1.9rem,4vw,2.9rem); font-weight:600; max-width:22ch; line-height:1.06}
.principle .three{display:flex; flex-wrap:wrap; gap:var(--s5); margin-top:var(--s6)}
.principle .three .p{display:flex; align-items:center; gap:10px; font-family:var(--mono); font-weight:600; font-size:.98rem; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-2)}
.principle .three .p .dot{width:7px; height:7px; background:var(--brass); flex:none; transform:rotate(45deg)}

/* demo console card */
.console{position:relative; border:1px solid var(--line-2); background-color:transparent; padding:0; overflow:hidden}
.console-bar{display:flex; align-items:center; gap:12px; padding:11px 16px; border-bottom:1px solid var(--line-2); font-family:var(--mono); font-weight:600; font-size:.86rem; letter-spacing:.18em; color:var(--ink-3); text-transform:uppercase}
.console-bar .live{display:inline-flex; align-items:center; gap:7px; color:var(--ok)}
.console-bar .live::before{content:""; width:7px; height:7px; border-radius:50%; background:var(--ok)}
.console-bar .dots{margin-left:auto; display:flex; gap:6px}
.console-bar .dots i{width:8px; height:8px; border:1px solid var(--line-2); display:block}
.console-body{display:grid; grid-template-columns:1.1fr .9fr; gap:0}
.console-body .txt{padding:clamp(24px,4vw,var(--s7))}
.console-body .txt h3{margin-bottom:var(--s4)}
.console-scope{position:relative; border-left:1px solid var(--line-2); min-height:280px; display:grid; place-items:center; padding:var(--s5);
  background:radial-gradient(circle at 50% 48%, rgba(127,166,204,.13) 0%, rgba(13,26,43,.55) 62%, var(--navy) 100%)}
.console .readouts{display:flex; flex-wrap:wrap; gap:var(--s4); margin-top:var(--s5)}
.console .readouts .r{font-family:var(--data); font-size:.74rem}
.console .readouts .r b{display:block; color:var(--ink); font-size:.95rem; letter-spacing:.02em; margin-bottom:2px; font-weight:600}
.console .readouts .r span{color:var(--ink-3); letter-spacing:.14em; text-transform:uppercase; font-size:.66rem}

/* ── tables ─────────────────────────────────────────────────────────────── */
.dtable{width:100%; border-collapse:collapse; font-size:.94rem}
.dtable caption{text-align:left; font-family:var(--mono); font-weight:600; font-size:.86rem; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-3); padding-bottom:var(--s3)}
.dtable th{text-align:left; font-family:var(--mono); font-weight:600; font-size:.86rem; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-2); padding:var(--s3); border-bottom:1px solid var(--line-2); background:var(--bg-1)}
.dtable td{padding:var(--s3); border-bottom:1px solid var(--line); color:var(--ink-2); vertical-align:top}
.dtable td b{color:var(--ink); font-weight:600}
.dtable .src{font-size:.8rem; color:var(--ink-3)}
.dtable tr:hover td{background:var(--brass-tint)}
/* modulregister — formålskolonnen bærer rækken, navnet er andenprioritet */
.dtable .r-func{font-family:var(--mono); font-weight:600; font-size:.98rem; letter-spacing:.14em; text-transform:uppercase; color:var(--brass-2)}
.dtable .r-name{font-family:var(--mono); font-weight:600; font-size:.94rem; letter-spacing:.2em; text-transform:uppercase; color:var(--ink)}
.dtable .r-not{color:var(--ink-3)}
/* På en telefon giver fire kolonner ulæselige spalter — rækken stables i
   stedet, og hver celle får sin kolonneoverskrift med via data-h. */
@media(max-width:760px){
  .dtable.stack thead{position:absolute; left:-9999px}
  .dtable.stack tr{display:block; border:1px solid var(--line-2); margin-bottom:var(--s4); padding:var(--s3)}
  .dtable.stack td{display:block; border:0; padding:var(--s2) 0}
  .dtable.stack td+td{border-top:1px solid var(--line)}
  .dtable.stack td[data-h]::before{content:attr(data-h); display:block; font-family:var(--mono); font-weight:600; font-size:.72rem; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-3); margin-bottom:3px}
  .dtable.stack tr:hover td{background:transparent}
}

/* ── timeline ───────────────────────────────────────────────────────────── */
.timeline{position:relative; padding-left:var(--s5)}
.timeline::before{content:""; position:absolute; left:5px; top:6px; bottom:6px; width:1px; background:var(--line-2)}
.timeline li{position:relative; padding:0 0 var(--s6) var(--s5)}
.timeline li:last-child{padding-bottom:0}
.timeline li::before{content:""; position:absolute; left:-1px; top:5px; width:11px; height:11px; border:1px solid var(--brass); background:var(--bg)}
.timeline li.done::before{background:var(--gold); border-color:var(--gold)}
.timeline .when{font-family:var(--mono); font-weight:600; font-size:.88rem; letter-spacing:.16em; color:var(--brass-2); text-transform:uppercase}
.timeline .what{display:block; margin-top:3px; color:var(--ink); font-weight:500}
.timeline .what small{display:block; color:var(--ink-2); font-weight:400; font-size:.88rem; margin-top:4px; letter-spacing:normal}

/* ── use-case / info cards ──────────────────────────────────────────────── */
.icard{position:relative; padding:var(--s5); border:1px solid var(--line-2); background-color:transparent; display:flex; flex-direction:column; gap:var(--s3); height:100%;
  background-image:var(--mark),var(--mark),var(--mark),var(--mark);
  background-repeat:no-repeat;
  background-position:-5px -5px, calc(100% + 5px) -5px, -5px calc(100% + 5px), calc(100% + 5px) calc(100% + 5px)}
.icard .ic-ico{width:32px; height:32px; stroke:var(--brass); fill:none; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round}
.icard h3,.icard h4{color:var(--ink); font-size:1.2rem}
.icard p{font-size:.92rem; color:var(--ink-2)}
.icard .ph{font-family:var(--mono); font-weight:600; font-size:.82rem; color:var(--ink-3); letter-spacing:.1em; text-transform:uppercase; border:1px dashed var(--line-2); padding:2px 8px; display:inline-block; align-self:flex-start}
/* sensortype-kort (VIGIL) — hvad den måler, og hvad den ikke kan alene */
.icard .ic-func{font-family:var(--mono); font-weight:600; font-size:1.36rem; line-height:1.05; letter-spacing:.12em; text-transform:uppercase; color:var(--brass-2)}
.icard .ic-role{font-family:var(--mono); font-weight:600; font-size:1rem; letter-spacing:.04em; color:var(--ink)}
.icard .ic-lim{margin-top:auto; border-top:1px solid var(--line); padding-top:var(--s3); font-size:.88rem; color:var(--ink-3)}
.icard .ic-lim b{display:block; font-family:var(--mono); font-weight:600; font-size:.78rem; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-2); margin-bottom:3px}

/* checklist */
.checks{display:grid; gap:var(--s3)}
.checks li{display:flex; gap:12px; align-items:flex-start; font-size:.97rem; color:var(--ink-2)}
.checks li svg{width:17px; height:17px; stroke:var(--ok); fill:none; stroke-width:1.5; flex:none; margin-top:4px}
.checks li b{color:var(--ink); font-weight:600}

/* tags */
.tags{display:flex; flex-wrap:wrap; gap:var(--s2)}
.tag{font-family:var(--mono); font-weight:600; font-size:.84rem; letter-spacing:.12em; text-transform:uppercase; padding:4px 11px; border:1px solid var(--line-2); color:var(--ink-2)}
.tag.accent{border-color:var(--brass-line); color:var(--brass-2); background:var(--brass-tint)}
.tag.steel{border-color:var(--line-2); color:var(--steel); background:var(--steel-tint)}
/* modulrækken nederst på produktsiderne — formål over navn, som alle andre steder */
.tag-mod{display:block; padding:8px 13px; line-height:1.2; text-decoration:none; transition:border-color .16s var(--ease),color .16s var(--ease)}
.tag-mod i{display:block; font-style:normal; font-weight:500; font-size:.7rem; letter-spacing:.18em; color:var(--ink-3); margin-bottom:2px}
.tag-mod b{display:block; font-weight:600; letter-spacing:.16em}
.tag-mod.accent i{color:var(--brass-2)}
.tag-mod:hover{border-color:var(--brass-line); color:var(--brass-2); background:var(--brass-tint)}
.tag-mod:hover i{color:var(--brass-2)}

/* stat / figure */
.figs{display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:1px; background:var(--line-2); border:1px solid var(--line-2)}
.fig{background:var(--bg); padding:var(--s5) var(--s4)}
.fig .v{font-size:clamp(1.7rem,3.2vw,2.3rem); font-weight:600; color:var(--ink); font-family:var(--mono); letter-spacing:0; line-height:1}
.fig .v b{color:var(--gold); font-weight:600}
.fig .l{font-size:.86rem; color:var(--ink-2); margin-top:var(--s2)}
.fig .src{font-size:.74rem; color:var(--ink-3); margin-top:var(--s2); font-family:var(--data)}

/* note / disclaimer */
.note{border-left:2px solid var(--brass); padding:var(--s3) var(--s4); background:var(--brass-tint); font-size:.9rem; color:var(--ink-2)}
.disclaimer{font-family:var(--data); font-size:.76rem; letter-spacing:.02em; color:var(--ink-3); border-top:1px solid var(--line); padding-top:var(--s4); margin-top:var(--s6); line-height:1.7}

/* forms */
.field{display:block; margin-bottom:var(--s4)}
.field label{display:block; font-family:var(--mono); font-weight:600; font-size:.88rem; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-2); margin-bottom:7px}
.field input,.field textarea,.field select{width:100%; background:var(--panel); border:1px solid var(--line-2); color:var(--ink); font-family:var(--sans); font-size:.97rem; padding:12px 14px; border-radius:0; transition:border-color .16s var(--ease)}
.field textarea{min-height:130px; resize:vertical}
.field input:hover,.field textarea:hover,.field select:hover{border-color:var(--brass-line)}
.field input:focus-visible,.field textarea:focus-visible,.field select:focus-visible{border-color:var(--brass); outline-offset:0}
.field input::placeholder,.field textarea::placeholder{color:var(--ink-3)}

/* contact rows */
.crow{display:flex; gap:var(--s4); align-items:baseline; padding:var(--s4) 0; border-bottom:1px solid var(--line)}
.crow .k{font-family:var(--mono); font-weight:600; font-size:.88rem; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-3); flex:0 0 130px}
.crow .v{color:var(--ink)}

/* ── footer ─────────────────────────────────────────────────────────────── */
.site-foot{border-top:1px solid var(--line-2); background:var(--bg-1); padding:var(--s7) 0 var(--s5)}
.foot-grid{display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:var(--s6)}
.foot-brand .brand{margin-bottom:var(--s4)}
.foot-brand p{color:var(--ink-2); font-size:.92rem; max-width:36ch}
.foot-col h2,.foot-col h5{font-family:var(--mono); font-weight:600; font-size:.88rem; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-3); margin:0 0 var(--s3)}
.foot-col ul{display:grid; gap:10px}
.foot-col a{color:var(--ink-2); font-size:.92rem}
.foot-col a:hover{color:var(--brass-2)}
/* produktlisten i footeren — formål over navn */
.foot-col .fprod{display:block; line-height:1.2}
.foot-col .fprod .ff{display:block; font-family:var(--mono); font-weight:500; font-size:.74rem; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-3); transition:color .16s var(--ease)}
.foot-col .fprod .fn{display:block; font-family:var(--mono); font-weight:600; font-size:.95rem; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-2); margin-top:1px; transition:color .16s var(--ease)}
.foot-col .fprod:hover .ff,.foot-col .fprod:hover .fn{color:var(--brass-2)}
.foot-col ul.prod-list{gap:13px}
.foot-bottom{margin-top:var(--s7); padding-top:var(--s4); border-top:1px solid var(--line); display:flex; flex-wrap:wrap; gap:var(--s3) var(--s5); justify-content:space-between; align-items:center}
.foot-bottom .legal{font-family:var(--data); font-size:.72rem; letter-spacing:.02em; color:var(--ink-3); line-height:1.75}
.foot-bottom .soc{display:flex; gap:var(--s4)}
.foot-bottom .soc a{font-family:var(--mono); font-weight:600; font-size:.88rem; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3)}
.foot-bottom .soc a:hover{color:var(--brass-2)}

/* page hero (interior) */
.phero{padding:clamp(44px,6.5vw,84px) 0 clamp(32px,4.5vw,56px); border-bottom:1px solid var(--line-2); position:relative; overflow:hidden}
.phero h1{max-width:21ch; margin:var(--s4) 0 var(--s4)}
.phero .lede{max-width:62ch}
/* produkt-identitet i heroen — formålet stort øverst, navnet under.
   Erstatter den gamle rækkefølge, hvor navnet stod som en lille mono-linje
   inde i h1 og formålet var en kicker på 0.86rem. */
.phid{display:block; margin-top:var(--s5)}
.phid-func{display:block; font-family:var(--mono); font-weight:600; font-size:clamp(1.55rem,3.3vw,2.25rem); line-height:1.02; letter-spacing:.08em; text-transform:uppercase; color:var(--brass-2)}
.phid-func i{display:block; font-style:normal; font-size:.44em; font-weight:500; letter-spacing:.2em; color:var(--ink-3); margin-top:9px}
.phid-name{display:inline-block; margin-top:var(--s4); padding-top:var(--s3); border-top:1px solid var(--brass-line); font-family:var(--mono); font-weight:600; font-size:clamp(1rem,1.7vw,1.25rem); letter-spacing:.32em; text-transform:uppercase; color:var(--ink)}
.phero h1.phid-h{margin-top:var(--s5)}
.crumb{font-family:var(--mono); font-weight:600; font-size:.86rem; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-3)}
.crumb a{color:var(--ink-3)} .crumb a:hover{color:var(--brass-2)}

/* prose helpers */
.two-col{display:grid; grid-template-columns:1fr 1fr; gap:clamp(28px,5vw,64px); align-items:start}
.split{display:grid; grid-template-columns:.9fr 1.1fr; gap:clamp(28px,5vw,56px); align-items:center}

/* ── responsive ─────────────────────────────────────────────────────────── */
@media(max-width:940px){
  .primary{position:fixed; inset:var(--head-h) 0 auto 0; background:var(--panel); border-bottom:1px solid var(--line-2); padding:var(--s4) clamp(20px,5vw,40px); transform:translateY(-120%); transition:transform .28s var(--ease); max-height:calc(100vh - var(--head-h)); overflow:auto; box-shadow:var(--shadow-md)}
  .site-head[data-nav-open="true"] .primary{transform:translateY(0)}
  .primary .nav-list{flex-direction:column; align-items:stretch; gap:0}
  .nav-link{padding:14px 4px; font-size:1.1rem; border-bottom:1px solid var(--line); width:100%; justify-content:space-between}
  .menu{position:static; opacity:1; visibility:visible; transform:none; box-shadow:none; border:0; border-bottom:1px solid var(--line); padding:0 0 var(--s3) var(--s3); min-width:0; display:none; background:transparent}
  .has-menu[data-open="true"] .menu{display:block}
  .menu-btn{display:inline-flex}
  .head-actions .contact-btn{display:none}
  .hero-grid,.two-col,.split,.console-body,.duo{grid-template-columns:1fr}
  .hero-visual{max-width:340px; margin:var(--s5) auto 0}
  .console-scope{border-left:0; border-top:1px solid var(--line-2)}
  .flow{grid-template-columns:1fr 1fr}
  .flow .step:not(:last-child)::after{display:none}
  .cards.c3,.cards.c2{grid-template-columns:1fr 1fr}
  .foot-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:600px){
  .cards.c3,.cards.c2,.flow,.foot-grid,.grid.cols-2,.grid.cols-3{grid-template-columns:1fr}
  .crow{flex-direction:column; gap:4px}
  .crow .k{flex-basis:auto}
  .hero-meta{gap:var(--s4)}
}
@media(prefers-reduced-motion:reduce){*{animation:none!important; transition:none!important}}

/* ── media slots (render / loop placeholders) — duotone figures ─────────── */
figure.mslot{margin:0; position:relative; background:transparent}
.mslot .mslot-stage{position:relative; aspect-ratio:16/9; overflow:hidden; border:1px solid var(--line-2);
  background-color:var(--bg-1);
  background-image:
    var(--mark),var(--mark),var(--mark),var(--mark),
    linear-gradient(rgba(232,235,238,.05) 1px,transparent 1px),
    linear-gradient(90deg,rgba(232,235,238,.05) 1px,transparent 1px);
  background-repeat:no-repeat,no-repeat,no-repeat,no-repeat,repeat,repeat;
  background-position:5px 5px, calc(100% - 5px) 5px, 5px calc(100% - 5px), calc(100% - 5px) calc(100% - 5px), center, center;
  background-size:auto,auto,auto,auto,44px 44px,44px 44px}
.mslot.ratio-wide .mslot-stage{aspect-ratio:21/9}
/* duotone: content photography is desaturated and washed in the accent */
.mslot-stage img,.mslot-stage video{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; filter:grayscale(.45) contrast(1.06) brightness(.97) saturate(.9)}
.mslot.filled .mslot-stage::after,
.mslot.has-photo .mslot-stage::after{content:""; position:absolute; inset:0; background:var(--brass); mix-blend-mode:color; opacity:.28; pointer-events:none; z-index:1}
.mslot.no-duotone .mslot-stage img,.mslot.no-duotone .mslot-stage video{filter:none}
.mslot.no-duotone.filled .mslot-stage::after,
.mslot.no-duotone.has-photo .mslot-stage::after{display:none}
/* Skærmbilleder af egen software må ikke duotones — så bliver UI'et ulæseligt.
   Sæt .no-duotone på figuren, når slottet viser et interface. */
.mslot-photo[hidden],.mslot-video[hidden]{display:none}
/* Cross-fade-loopet: to <video> med samme fil, forskudt i tid. JS sætter kun
   opacity til 0 — denne transition er selve overtoningen. Varigheden skal
   matche FADE i media-slot.js. */
.mslot-video{transition:opacity 2.5s linear}
/* ── inline technical figures (drawn, not photographed) ──────────────────
   Tegnede blueprint-figurer i media-slottene indtil der findes rigtige
   renders/fotos. De genbruger .dscn-svg-vokabularet fra opstillings-
   scenerne, så de ikke bliver et andet sprog på samme site. Lægger man en
   rigtig fil i slottet, skjules figuren automatisk (media-slot.js) — den
   slettes aldrig, så man kan fortryde ved at fjerne filen igen. */
.mslot .mslot-art{position:absolute; inset:0; width:100%; height:100%; display:block; z-index:0}
.mslot.has-art .mslot-stage,
.mslot.has-photo .mslot-stage{background-image:none; background-color:var(--bg-1)}
/* pladsholder-overlejringen skal stadig kunne klikkes, men ikke ligge og larme
   oven på tegningen — den toner frem på hover/fokus */
.mslot.has-art .mslot-ph,
.mslot.has-photo .mslot-ph{opacity:0; background:rgba(18,22,28,.92); transition:opacity .18s var(--ease)}
.mslot.has-art .mslot-ph:hover,.mslot.has-art .mslot-ph:focus-visible,
.mslot.has-photo .mslot-ph:hover,.mslot.has-photo .mslot-ph:focus-visible{opacity:1; z-index:2}
.vfig .lbl{font-family:var(--mono); font-weight:600; font-size:13.5px; letter-spacing:.14em;
  text-transform:uppercase; fill:var(--ink-2); stroke:none}
.vfig .lbl-a{fill:var(--brass-2)}
.vfig .lbl-s{font-family:var(--mono); font-weight:500; font-size:11.5px; letter-spacing:.08em;
  fill:var(--ink-3); stroke:none}
.vfig .num{font-family:var(--data); font-size:11px; fill:var(--ink-3); stroke:none}
.vfig .lead{stroke:var(--brass-line); fill:none; stroke-width:1}
.vfig .dot{fill:var(--brass); stroke:none}
.vfig .pnl{fill:var(--panel); stroke:var(--line-2)}
.vfig .pnl-a{fill:var(--brass-tint); stroke:var(--brass-line)}
.vfig .sld{fill:var(--brass); stroke:none}
.vfig .reg{stroke:var(--brass); fill:none; stroke-width:1; opacity:.5}
.vfig .arw{stroke:var(--brass); fill:none; stroke-width:1.4}
.vfig .arwh{fill:var(--brass); stroke:none}
.vfig .bnd{stroke:var(--line-2); fill:none; stroke-dasharray:6 5}
/* På en telefon er 21:9 så lavt at en 13px-etiket i viewBox'en ender på fire
   skærmpixels. At skrue op for skriften hjælper ikke — så sprænger teksten
   kasserne. I stedet får figuren en mindstebredde og lov at scrolle vandret;
   så er den stadig læsbar, og siden selv scroller ikke sidelæns. */
/* NB: der ligger allerede en @media(max-width:600px) længere nede som sætter
   .mslot.ratio-wide .mslot-stage tilbage til 16/9. Den er lige så specifik og
   står senere i filen, så vores regel skal have en klasse mere for at vinde —
   derfor .has-art.ratio-wide og ikke bare .has-art. */
@media (max-width:760px){
  .mslot.has-art .mslot-stage,
  .mslot.has-art.ratio-wide .mslot-stage{aspect-ratio:auto; height:auto;
    overflow-x:auto; overflow-y:hidden; -webkit-overflow-scrolling:touch}
  .mslot.has-art .mslot-art{position:relative; inset:auto; width:900px; min-width:900px; height:auto}
  .mslot.has-art .mslot-ph,.mslot.has-art .mslot-tools{display:none}
}

.mslot-ph{position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:9px; text-align:center; cursor:pointer; padding:var(--s5); background:transparent}
.mslot-ph::before{content:""; position:absolute; left:50%; top:14px; bottom:14px; width:1px; background:var(--line); pointer-events:none}
.mslot-ph::after{content:""; position:absolute; top:50%; left:14px; right:14px; height:1px; background:var(--line); pointer-events:none}
.mslot-ph>*{position:relative; z-index:1}
.mslot-ph svg{width:30px; height:30px; stroke:var(--brass); fill:none; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round}
.mslot-tag{font-family:var(--mono); font-weight:600; font-size:.82rem; letter-spacing:.24em; text-transform:uppercase; color:var(--brass-2)}
.mslot-name{font-family:var(--mono); font-weight:600; font-size:1.24rem; color:var(--ink); max-width:36ch; line-height:1.1}
.mslot-hint{font-family:var(--mono); font-weight:600; font-size:.84rem; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3); border:1px dashed var(--line-2); padding:6px 12px; margin-top:4px; transition:all .18s var(--ease)}
.mslot-ph:hover .mslot-hint,.mslot.drag .mslot-hint{border-color:var(--brass); color:var(--brass-2)}
.mslot.drag{outline:1px solid var(--brass); outline-offset:3px}
.mslot.drag .mslot-stage{background-color:var(--brass-tint)}
.mslot.filled .mslot-ph{display:none}
.mslot-tools{position:absolute; top:10px; right:10px; z-index:2; display:flex; gap:6px; opacity:0; transition:opacity .18s var(--ease)}
.mslot.filled:hover .mslot-tools,.mslot.filled:focus-within .mslot-tools{opacity:1}
@media(hover:none){.mslot.filled .mslot-tools{opacity:1}}
.mslot-tools button{font-family:var(--mono); font-weight:600; font-size:.8rem; letter-spacing:.1em; text-transform:uppercase; background:rgba(18,22,28,.92); border:1px solid var(--line-2); color:var(--ink-2); padding:6px 10px; cursor:pointer}
.mslot-tools button:hover{color:var(--ink); border-color:var(--brass)}
.mslot figcaption{display:flex; gap:var(--s3); align-items:baseline; padding:var(--s3) 2px 0; font-size:.86rem; color:var(--ink-2)}
.mslot figcaption .fno{font-family:var(--mono); font-weight:600; font-size:.8rem; letter-spacing:.18em; color:var(--brass-2); text-transform:uppercase; white-space:nowrap}
/* Billedteksten skal passe til det, slottet faktisk viser. "Tegnet, ikke
   fotograferet" er en løgn, i samme sekund der ligger et foto i slottet. */
.mslot .cap-photo{display:none}
.mslot.has-photo .cap-art,.mslot.filled .cap-art{display:none}
.mslot.has-photo .cap-photo,.mslot.filled .cap-photo{display:inline}
@media(max-width:600px){ .mslot.ratio-wide .mslot-stage{aspect-ratio:16/9} .mslot-name{font-size:1.05rem} }

/* ── deployment scenarios (solutions) — isometriske opstillings-tegninger ─ */
.dscn-tabs{display:flex; flex-wrap:wrap; gap:var(--s2); margin-bottom:var(--s4)}
.dscn-tab{display:inline-flex; align-items:center; gap:8px; font-family:var(--mono); font-weight:600; font-size:.9rem; letter-spacing:.14em; text-transform:uppercase; padding:9px 16px; border:1px solid var(--line-2); background:transparent; color:var(--ink-2); cursor:pointer; transition:all .18s var(--ease)}
.dscn-tab svg{width:14px; height:14px; stroke:currentColor; fill:none; stroke-width:1.5; flex:none}
.dscn-tab:hover{border-color:var(--brass); color:var(--brass-2); background:var(--brass-tint)}
.dscn-tab[aria-selected="true"]{background:var(--brass-solid); border-color:var(--brass-solid); color:#fff}
.dscn-key{display:flex; flex-wrap:wrap; gap:var(--s3) var(--s5); margin-bottom:var(--s4); font-family:var(--mono); font-weight:600; font-size:.8rem; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-3)}
.dscn-key>span{display:inline-flex; align-items:center; gap:8px}
.dscn-key i{width:11px; height:11px; border-radius:50%; display:block; flex:none}
.dscn-key .kv{background:var(--brass-solid)}
.dscn-key .kp{background:var(--panel); border:1px solid var(--steel)}
.dscn-key .kt{background:transparent; border:1px dashed var(--alert)}
.dscn-key .ko{background:transparent; border:1px solid var(--ok)}
.dscn-defs{position:absolute; width:0; height:0; overflow:hidden}
.dscn-stage{position:relative; border:1px solid var(--line-2); background-color:var(--bg-1); overflow:hidden; cursor:crosshair;
  background-image:
    radial-gradient(ellipse 62% 55% at 50% 46%, rgba(127,166,204,.07), transparent 72%),
    linear-gradient(rgba(232,235,238,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(232,235,238,.045) 1px,transparent 1px);
  background-size:auto,44px 44px,44px 44px}
.dscn-stage>svg{width:100%; height:auto; display:block}
.dscn-svg{color:var(--ink-3)}
.dscn-svg .gp{fill:var(--panel); stroke:var(--line-2)}
.dscn-svg .gp2{fill:var(--bg-2); stroke:var(--line-2)}
.dscn-svg .rf{fill:var(--panel); stroke:var(--line-2)}
.dscn-svg .fa{fill:var(--bg-1); stroke:var(--line-2)}
.dscn-svg .fb{fill:var(--bg-2); stroke:var(--line-2)}
.dscn-svg .ln{stroke:var(--line-2); fill:none}
.dscn-svg .lnf{stroke:var(--line); fill:none}
.dscn-svg .cl{stroke:var(--panel); fill:none; stroke-width:1.6}
.dscn-svg .wtr{fill:rgba(127,166,204,.12); stroke:var(--brass-line)}
.dscn-svg .vs{color:var(--brass)}
.dscn-svg .pt{color:var(--steel)}
.dscn-svg .th{color:var(--alert)}
.dscn-svg .okc{color:var(--ok)}
.dscn-svg .cov{fill:var(--brass); opacity:.07; stroke:none}
.dscn-svg .covl{stroke:var(--brass-3); fill:none; stroke-dasharray:3 6}
.dscn-svg .covp{fill:var(--steel); opacity:.06; stroke:none}
.dscn-svg .covpl{stroke:var(--steel); fill:none; stroke-dasharray:2 5; opacity:.6}
.dscn-svg .mesh{stroke:var(--brass-3); fill:none; stroke-dasharray:2 6; stroke-width:1.2}
.dscn-svg .thp{stroke:var(--alert); fill:none; stroke-dasharray:5 6; stroke-width:1.3}
.dscn-svg .okp{stroke:var(--ok); fill:none; stroke-dasharray:5 6; stroke-width:1.2}
/* v2: gradienter, skygger, sweep, ping, trackhistorik */
.dscn-svg .covg{stroke:none}
.dscn-svg .shd{stroke:none; pointer-events:none}
.dscn-svg .wtrg{stroke:var(--brass-line)}
.dscn-svg .swf{fill:var(--brass); opacity:.10; stroke:none}
.dscn-svg .swl{stroke:var(--brass); opacity:.5; stroke-width:1.2; fill:none}
.dscn-svg .ping{stroke:var(--alert); fill:none; stroke-width:1.2}
.dscn-svg .ping-ok{stroke:var(--ok)}
.dscn-svg .thd{fill:var(--alert); stroke:none}
@media (prefers-reduced-motion:no-preference){
  .dscn-svg .thp{animation:dscn-dash-th 1.7s linear infinite}
  .dscn-svg .okp{animation:dscn-dash-th 3.2s linear infinite}
  .dscn-svg .mesh{animation:dscn-dash-mesh 2.6s linear infinite}
}
@keyframes dscn-dash-th{to{stroke-dashoffset:-22}}
@keyframes dscn-dash-mesh{to{stroke-dashoffset:-16}}
.dscn-marks{position:absolute; inset:0}
.dmk{position:absolute; transform:translate(-50%,-50%); width:25px; height:25px; display:grid; place-items:center; font-family:var(--data); font-size:.72rem; font-weight:600; line-height:1; background:var(--brass-solid); color:#fff; border:1px solid rgba(255,255,255,.65); outline:1px solid var(--brass-solid); border-radius:50%; cursor:pointer; padding:0; box-shadow:var(--shadow-sm); transition:transform .16s var(--ease),box-shadow .16s var(--ease); z-index:2}
.dmk.p{background:var(--panel); color:var(--steel); border-color:var(--steel); outline-color:var(--steel)}
.dmk.t{background:var(--bg); color:var(--alert-2); border:1px dashed var(--alert); outline:none}
.dmk.o{background:var(--bg); color:var(--ok); border:1px solid var(--ok); outline:none}
.dmk::before{content:""; position:absolute; top:calc(100% + 1px); left:calc(50% - .5px); width:1px; height:11px; background:var(--brass-solid); opacity:.5; pointer-events:none}
.dmk.p::before{background:var(--steel)}
.dmk.t::before{background:var(--alert)}
.dmk.o::before{background:var(--ok)}
.dmk:hover,.dmk.on{transform:translate(-50%,-50%) scale(1.25); box-shadow:var(--shadow-md); z-index:4}
.dmk.on::after{content:""; position:absolute; inset:-7px; border:1px solid currentColor; border-radius:50%; opacity:.5}
.dscn-tb{position:absolute; right:10px; bottom:10px; z-index:1; border:1px solid var(--line-2); background:rgba(21,26,33,.88); padding:7px 11px; display:grid; gap:2px; font-family:var(--mono); font-weight:600; text-transform:uppercase; letter-spacing:.14em; font-size:.6rem; color:var(--ink-3); text-align:right; pointer-events:none}
.dscn-tb b{font-size:.68rem; color:var(--brass-2); letter-spacing:.2em}
@media(max-width:600px){ .dscn-tb{display:none} }
.dscn-panel figcaption{display:flex; gap:var(--s3); align-items:baseline; padding:var(--s3) 2px 0; font-size:.86rem; color:var(--ink-2)}
.dscn-panel figcaption .fno{font-family:var(--mono); font-weight:600; font-size:.8rem; letter-spacing:.18em; color:var(--brass-2); text-transform:uppercase; white-space:nowrap}
.dscn-legend{display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--line-2); border:1px solid var(--line-2); margin-top:var(--s5)}
.dleg{display:flex; gap:12px; padding:12px 14px; background:var(--bg); cursor:pointer; align-items:flex-start; transition:background .16s var(--ease)}
.dleg:hover,.dleg.on{background:var(--brass-tint)}
.dleg .n{flex:none; width:22px; height:22px; display:grid; place-items:center; font-family:var(--data); font-size:.68rem; font-weight:600; background:var(--brass-solid); color:#fff; border-radius:50%; margin-top:2px}
.dleg.p .n{background:var(--panel); color:var(--steel); border:1px solid var(--steel)}
.dleg.t .n{background:transparent; color:var(--alert-2); border:1px dashed var(--alert)}
.dleg.o .n{background:transparent; color:var(--ok); border:1px solid var(--ok)}
.dleg .tx{flex:1}
.dleg .tx b{font-family:var(--mono); font-weight:600; font-size:.9rem; letter-spacing:.08em; text-transform:uppercase; color:var(--ink); display:block}
.dleg .tx p{font-size:.85rem; color:var(--ink-2); margin-top:2px}
.dleg .go{font-family:var(--mono); font-weight:600; font-size:.74rem; letter-spacing:.14em; text-transform:uppercase; white-space:nowrap}
.dleg .gl{flex:none; width:30px; height:36px; align-self:center; opacity:.9}
.dleg.on .n,.dleg:hover .n{box-shadow:0 0 0 3px var(--brass-tint)}
.gl .meshg{stroke:var(--brass-3); stroke-dasharray:2 4; fill:none; stroke-width:1.4}
.gl .meshd{fill:var(--brass); stroke:none}
@media(max-width:600px){ .dleg .gl{display:none} }
@media(max-width:940px){ .dscn-legend{grid-template-columns:1fr} }
@media(max-width:600px){ .dmk{width:20px; height:20px; font-size:.6rem} .dleg{padding:10px 12px} }

/* ── reveal on scroll ───────────────────────────────────────────────────── */
[data-rv]{opacity:0; transform:translateY(12px); transition:opacity .65s var(--ease),transform .65s var(--ease)}
[data-rv].rv-in{opacity:1; transform:none}

/* ── refinements ────────────────────────────────────────────────────────── */
h1,h2,h3{text-wrap:balance}
p{text-wrap:pretty}
.section{scroll-margin-top:calc(var(--head-h) + 12px)}
.nav-link[aria-current="page"]{box-shadow:inset 0 -2px 0 var(--gold)}

/* ════ v4 · Night Ops-forside — fuldbredde-hero med levende sensorlag ════ */
.xhero{position:relative; min-height:min(88vh,820px); display:flex; align-items:flex-end; overflow:hidden; border-bottom:1px solid var(--line-2); background:#0d1218}
.xhero .mslot{position:absolute; inset:0; margin:0}
.xhero .mslot .mslot-stage{position:absolute; inset:0; aspect-ratio:auto; border:0; background:none}
.xhero .mslot figcaption{display:none}
.xhero-wash{position:absolute; inset:0; z-index:2; pointer-events:none;
  background:linear-gradient(78deg, rgba(11,16,22,.92) 0%, rgba(11,16,22,.72) 34%, rgba(11,16,22,.28) 62%, rgba(11,16,22,.14) 100%),
             linear-gradient(0deg, rgba(13,19,26,.94) 0%, rgba(13,19,26,0) 44%)}
.xhero-live{position:absolute; inset:0; width:100%; height:100%; z-index:3; pointer-events:none}
.xhero-inner{position:relative; z-index:4; width:100%; padding-top:120px; padding-bottom:clamp(36px,6vw,64px)}
.xhero .kicker{color:var(--brass-2)}
.xhero .kicker::before{background:var(--brass-2)}
.xhero h1{color:#fff; margin:var(--s4) 0 var(--s5); max-width:15ch; font-size:clamp(2.9rem,7.4vw,5.2rem)}
.xhero .lede{color:rgba(233,238,243,.86); max-width:56ch}
.xhero .btn{border-color:rgba(255,255,255,.5); color:#fff}
.xhero .btn:hover{border-color:#fff; color:#fff; background:rgba(255,255,255,.12)}
.xhero .btn-accent{background-color:var(--brass); border-color:var(--brass); color:#0d131a}
.xhero .btn-accent:hover{background-color:#9dbdda; border-color:#9dbdda; color:#0d131a}
.xhero-meta{display:flex; gap:var(--s5); margin-top:var(--s6); flex-wrap:wrap}
.xhero-meta .m{border-left:1px solid var(--brass-line); padding-left:var(--s3)}
.xhero-meta .m b{display:block; font-family:var(--mono); font-size:1.02rem; color:#fff; font-weight:600; letter-spacing:.04em}
.xhero-meta .m span{font-size:.8rem; color:rgba(233,238,243,.6)}
.xhero-note{position:absolute; right:clamp(20px,5vw,40px); bottom:14px; z-index:5; font-family:var(--data); font-size:.56rem; letter-spacing:.2em; text-transform:uppercase; color:rgba(233,238,243,.5)}
.lv .ring{fill:none; stroke:rgba(185,207,228,.35)}
.lv .ring.f{stroke:rgba(185,207,228,.16)}
.lv .swp{fill:var(--brass); stroke:none}
.lv .swline{stroke:rgba(205,225,244,.95); stroke-width:1.6}
.lv .effl{stroke:rgba(95,174,136,.75); stroke-width:1.2; stroke-dasharray:3 5}
.lv .effd{fill:#eef4f9; stroke:none}
.lv .ping{fill:none; stroke:#eef4f9; stroke-width:1.4}
.lv .trk{fill:none; stroke:#e0a48c; stroke-width:1.2; stroke-dasharray:5 6}
.lv .dia{fill:none; stroke:#e8b09a; stroke-width:1.5}
.lv .brk{fill:none; stroke:rgba(233,238,243,.85); stroke-width:1.2}
.lv .lb{font-family:var(--mono); font-weight:600; font-size:13px; letter-spacing:.14em; fill:#fff}
.lv .lb2{font-family:var(--data); font-size:10.5px; letter-spacing:.14em; fill:rgba(233,238,243,.75)}
@media (prefers-reduced-motion:no-preference){
  .lv .brk{animation:lv-pulse 2.4s var(--ease) infinite}
}
@keyframes lv-pulse{0%,100%{opacity:.5} 50%{opacity:1}}
@media(max-width:760px){ .xhero{min-height:74vh} .xhero-live{display:none}
  /* Noten SKAL blive staaende: ogsaa paa mobil er hero-baggrunden AI-genereret
     (stillbilledet index-family.jpg), og deklarationen skal moede den besoegende
     ved foerste eksponering.

     .xhero er flex-row: en note i flowet ville blive et SOESKENDE-flexitem ved
     siden af .wrap og klemme overskriften ned til under 200 px. Derfor bliver
     den absolut placeret — men strukket over hele bredden med samme indrykning
     som .wrap, i stedet for at staa i hjoernet, hvor der ikke er plads paa en
     telefon.

     Den staar OEVERST paa mobil, ikke nederst: heroen er hoejere end en
     telefonskaerm, saa en note i bunden ligger under folden — og kravet er, at
     oplysningen gives senest ved FOERSTE eksponering. Oeverst moeder den
     laeseren samtidig med billedet. */
  .xhero-note{position:absolute; left:0; right:0; top:0; bottom:auto; width:100%;
    padding:9px 20px 11px; text-align:left; font-size:.5rem; letter-spacing:.1em;
    line-height:1.45; color:rgba(233,238,243,.78);
    background:linear-gradient(180deg,rgba(18,22,28,.78) 0%,rgba(18,22,28,0) 100%)} }
/* kategori-indgange — funktion øverst, navn under */
.cat-rail{display:grid; grid-template-columns:repeat(5,1fr); gap:var(--s4)}
.cat{position:relative; display:flex; flex-direction:column; gap:var(--s2); padding:var(--s4); border:1px solid var(--line-2); text-decoration:none; color:var(--ink); transition:border-color .2s var(--ease),background-color .2s var(--ease),transform .2s var(--ease);
  background-image:var(--mark),var(--mark),var(--mark),var(--mark); background-repeat:no-repeat;
  background-position:-5px -5px, calc(100% + 5px) -5px, -5px calc(100% + 5px), calc(100% + 5px) calc(100% + 5px)}
.cat:hover{border-color:var(--brass); background-color:var(--brass-tint); transform:translateY(-2px)}
.cat .cico{width:30px; height:30px; stroke:var(--brass); fill:none; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round}
.cat b{font-family:var(--mono); font-weight:600; font-size:1.3rem; line-height:1.02; letter-spacing:.1em; text-transform:uppercase; color:var(--brass-2)}
.cat i{font-style:normal; font-size:.82rem; color:var(--ink-2); flex:1}
.cat .cname{font-family:var(--mono); font-weight:600; font-size:.86rem; letter-spacing:.22em; text-transform:uppercase; color:var(--ink); border-top:1px solid var(--line); padding-top:var(--s2); margin-top:var(--s2)}
.cat:hover .cname{border-top-color:var(--brass-line)}
@media(max-width:940px){ .cat-rail{grid-template-columns:repeat(2,1fr)} }
@media(max-width:600px){ .cat-rail{grid-template-columns:1fr} }
/* hvorfor nu — dokumenterede hændelser + milepæle */
.threat-grid{display:grid; grid-template-columns:2.1fr .9fr; gap:var(--s6); align-items:start}
.inc-grid{display:grid; grid-template-columns:1fr 1fr; gap:var(--s4)}
.inc{position:relative; padding:var(--s4); border:1px solid var(--line-2); border-top:2px solid var(--alert); background:var(--panel); display:flex; flex-direction:column; gap:var(--s2)}
.inc .d{font-family:var(--data); font-size:.72rem; letter-spacing:.18em; text-transform:uppercase; color:var(--alert-2)}
.inc .pl{font-family:var(--mono); font-weight:600; font-size:.84rem; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3)}
.inc h3,.inc h4{font-size:1.16rem; line-height:1.12}
.inc .im{font-size:.86rem; color:var(--ink-2); border-top:1px solid var(--line); padding-top:var(--s2); margin-top:auto}
.mile{border:1px solid var(--line-2); padding:var(--s4); display:grid; gap:var(--s3); align-content:start}
.mile h3,.mile h4{font-size:1.05rem}
.mile .mrow{border:1px dashed var(--line-2); border-left:2px solid var(--gold-line); padding:var(--s3); font-size:.86rem; color:var(--ink-3)}
.mile .mrow b{display:block; font-family:var(--mono); font-weight:600; font-size:.76rem; letter-spacing:.18em; text-transform:uppercase; color:var(--gold); margin-bottom:2px}
.src-line{font-family:var(--data); font-size:.72rem; letter-spacing:.04em; color:var(--ink-3); margin-top:var(--s4)}
@media(max-width:940px){ .threat-grid{grid-template-columns:1fr} .inc-grid{grid-template-columns:1fr 1fr} }
@media(max-width:600px){ .inc-grid{grid-template-columns:1fr} }
/* sektorer */
.sect-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:var(--s4)}
.scard{position:relative; padding:var(--s5) var(--s4); border:1px solid var(--line-2); text-decoration:none; color:var(--ink); display:flex; flex-direction:column; gap:var(--s3); transition:border-color .2s var(--ease),background-color .2s var(--ease)}
.scard:hover{border-color:var(--brass); background-color:var(--brass-tint)}
.scard .sico{width:32px; height:32px; stroke:var(--brass); fill:none; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round}
.scard h3,.scard h4{font-size:1.2rem}
.scard p{font-size:.88rem; color:var(--ink-2); flex:1}
.scard .go{font-family:var(--mono); font-weight:600; font-size:.8rem; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-3)}
.scard:hover .go{color:var(--brass-2)}
@media(max-width:940px){ .sect-grid{grid-template-columns:1fr 1fr} }
@media(max-width:600px){ .sect-grid{grid-template-columns:1fr} }
/* FAQ */
.faq{border:1px solid var(--line-2); border-bottom:0}
.faq details{border-bottom:1px solid var(--line-2)}
.faq summary{list-style:none; cursor:pointer; display:flex; align-items:baseline; justify-content:space-between; gap:var(--s4); padding:var(--s4); font-family:var(--mono); font-weight:600; font-size:1.12rem; letter-spacing:.02em; transition:background .16s var(--ease)}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{background:var(--brass-tint)}
.faq summary::after{content:"+"; font-family:var(--mono); color:var(--brass-2); font-size:1.3rem; line-height:1; flex:none}
.faq details[open] summary::after{content:"−"}
.faq .fa-body{padding:0 var(--s4) var(--s4); color:var(--ink-2); font-size:.95rem; max-width:78ch}

/* ════ v4.4 · Nedstigning — scroll-styret billedkæde, AI-koncept (deklareret) ════ */
/* Standard = fallback-figur + legend (mobil, reduced motion, ingen JS).
   JS tilføjer .dive-on ≥761px → scrub-sekvensen vises, fallback-figuren skjules.
   Legenden står ALTID — spec-teksten bor der (samme princip som .dscn-legend). */
.dive-seq{display:none; height:620vh; position:relative}
.dive.dive-on .dive-seq{display:block}
.dive.dive-on .dive-fallback{display:none}
.dive-stage{position:sticky; top:var(--head-h); height:calc(100vh - var(--head-h)); overflow:hidden; background:#0d1218; border-top:1px solid var(--line-2); border-bottom:1px solid var(--line-2); z-index:1}
.dive-frames{position:absolute; inset:0}
.dive-frames::after{content:""; position:absolute; inset:0; background:var(--brass); mix-blend-mode:color; opacity:.28; pointer-events:none}
.dive-f{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; filter:grayscale(.45) contrast(1.06) brightness(.97) saturate(.9); will-change:opacity,transform}
.dive-hud{position:absolute; left:clamp(20px,5vw,40px); top:clamp(18px,3vw,30px); z-index:4; display:grid}
.dive-hud-line{grid-area:1/1; font-family:var(--data); font-size:.72rem; letter-spacing:.22em; text-transform:uppercase; color:rgba(233,238,243,.85); opacity:0; transition:opacity .3s var(--ease)}
.dive-hud-line.on{opacity:1}
.dive-marks{position:absolute; inset:0; z-index:3; pointer-events:none; overflow:hidden}
.dive-co{position:absolute; transform:translate(-50%,-50%); display:flex; flex-direction:column; align-items:center; gap:8px; opacity:0; transition:opacity .4s var(--ease)}
.dive-co:nth-child(odd){flex-direction:column-reverse}
.dive-co.on{opacity:1}
.dive-co i{font-style:normal; width:22px; height:22px; display:grid; place-items:center; font-family:var(--data); font-size:.68rem; font-weight:600; background:var(--brass-solid); color:#fff; border:1px solid rgba(255,255,255,.65); border-radius:50%}
.dive-co b{font-family:var(--mono); font-weight:600; font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; color:#fff; white-space:nowrap; background:rgba(13,18,24,.72); border:1px solid var(--line-2); padding:3px 8px}
.dive-note{position:absolute; right:clamp(20px,5vw,40px); bottom:14px; z-index:4; font-family:var(--data); font-size:.66rem; letter-spacing:.2em; text-transform:uppercase; color:rgba(233,238,243,.55)}
.dive-cue{position:absolute; left:clamp(20px,5vw,40px); bottom:14px; z-index:4; font-family:var(--data); font-size:.66rem; letter-spacing:.26em; text-transform:uppercase; color:rgba(233,238,243,.5); transition:opacity .35s var(--ease)}
.dive-cue.off{opacity:0}
.dive-fallback{margin:0}
.dive-fallback img{display:block; width:100%; height:auto}
.dive-fallback figcaption{font-family:var(--data); font-size:.68rem; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3); padding:9px 12px; border-top:1px solid var(--line-2)}
.dive-legend{margin-top:var(--s5)}
.dive-spread{position:absolute; inset:0; width:100%; height:100%; opacity:0; pointer-events:none}
@media(max-width:760px){ .dive-seq{height:420vh} .dive-co b{display:none} .dive-hud-line{font-size:.62rem; letter-spacing:.16em} }
@media(max-width:600px){ .dive-legend{grid-template-columns:1fr} }

/* ════ v4.5 · Farvepas — blødere duotone (ovenfor), sektionstinter, glød og billedbaggrund ════ */
.section.tint{background:linear-gradient(180deg,var(--navy) 0%,var(--bg) 100%)}
.section.glow{overflow:hidden}
.section.glow::before{content:""; position:absolute; inset:0; pointer-events:none; background:radial-gradient(1100px 460px at 16% 0%, rgba(127,166,204,.12), transparent 62%)}
.section.bgimg{overflow:hidden}
.section.bgimg::before{content:""; position:absolute; inset:0; pointer-events:none; background-image:linear-gradient(90deg, rgba(18,22,28,.96) 0%, rgba(18,22,28,.88) 45%, rgba(18,22,28,.60) 100%), url("../img/platform-arch.jpg"); background-size:cover; background-position:center}
.section.bgimg>.wrap{position:relative; z-index:1}

/* ════ v4.7 · OVERFLYVNINGEN (.flyover) — scroll-scrubbet videosekvens ════
   Erstatter v4.4/4.5's .dive (CSS'en ovenfor står stadig — den bruges ikke af
   nogen side, men fjernes ikke, jf. projektreglen om aldrig at slette).

   FARVE: her er der med vilje INGEN duotone. Videoen er i dagslys og naturlige
   farver — det er hele pointen med sektionen. Sammenhængen til Night Ops bæres
   af HUD-laget (stålblå) og af en diskret vignet, som holder teksten læsbar
   uden at gøre billedet mørkt.

   JS tilføjer .fo-on, når frame 0 er hentet → sekvensen vises, fallback-figuren
   skjules. Uden frames / uden JS / ved reduceret bevægelse sker det aldrig, og
   fallback-figuren + legenden står — sektionen efterlader aldrig et hul. */
.fo-seq{display:none; height:760vh; position:relative}
.flyover.fo-on .fo-seq{display:block}
.flyover.fo-on .fo-fallback{display:none}
.fo-stage{position:sticky; top:var(--head-h); height:calc(100vh - var(--head-h));
  overflow:hidden; background:#0d1218; border-top:1px solid var(--line-2);
  border-bottom:1px solid var(--line-2); z-index:1}
.fo-canvas{position:absolute; inset:0; width:100%; height:100%; display:block}
/* vignet: kun i kanterne, så HUD'en kan læses. Midten røres ikke. */
.fo-vig{position:absolute; inset:0; pointer-events:none; z-index:2;
  background:
    linear-gradient(180deg, rgba(13,18,24,.62) 0%, rgba(13,18,24,0) 24%, rgba(13,18,24,0) 72%, rgba(13,18,24,.66) 100%),
    radial-gradient(130% 100% at 50% 50%, rgba(13,18,24,0) 52%, rgba(13,18,24,.42) 100%)}

/* ── fasetekst + højdetæller ── */
.fo-meta{position:absolute; left:clamp(20px,5vw,40px); top:clamp(18px,3vw,30px); z-index:5}
.fo-phase{display:grid}
.fo-ph{grid-area:1/1; font-family:var(--mono); font-weight:600; font-size:1.02rem;
  letter-spacing:.2em; text-transform:uppercase; color:#fff; opacity:0;
  transition:opacity .32s var(--ease); text-shadow:0 1px 10px rgba(13,18,24,.9);
  display:flex; align-items:center; gap:11px; white-space:nowrap}
.fo-ph::before{content:""; flex:0 0 auto; width:26px; height:1px; background:var(--brass-2)}
.fo-ph.on{opacity:1}
.fo-alt{margin-top:9px; display:flex; align-items:baseline; gap:6px; transition:opacity .4s var(--ease);
  font-family:var(--data); color:var(--brass-2); text-shadow:0 1px 10px rgba(13,18,24,.9)}
.fo-alt b{font-size:1.5rem; font-weight:600; letter-spacing:.02em; font-variant-numeric:tabular-nums}
.fo-alt span{font-size:.64rem; letter-spacing:.24em; opacity:.75}
/* Sporets status står i HUD-kolonnen, ikke ved bracket'en. Bracket'en kan kun
   stå, når dronen faktisk er i billedet — men beslutningskæden løber hele vejen,
   og "CONFIRMED · EO/IR" falder præcis dér, hvor kameraet er nede ved masten.
   Plade bag: varm rød tekst forsvinder mod en lys himmel. */
.fo-track{margin-top:12px; display:grid; gap:2px; justify-items:start; opacity:0;
  transition:opacity .32s var(--ease)}
.fo-track.on{opacity:1}
.fo-track b,.fo-track em{font-family:var(--data); letter-spacing:.16em; white-space:nowrap;
  background:rgba(13,18,24,.74); border:1px solid var(--alert-line); padding:2px 8px}
.fo-track b{font-size:.68rem; color:#fff}
.fo-track em{font-style:normal; font-size:.6rem; color:var(--alert-2)}

/* ── markører ── */
.fo-marks{position:absolute; inset:0; z-index:4; pointer-events:none; overflow:hidden}
/* left/top er 0 med vilje: JS flytter markoererne med transform, ikke med
   layout-egenskaber. En transform koster ingen genberegning af sidens layout —
   left/top gjorde, og det var med til at faa scrubben til at hakke. */
.fo-mk{position:absolute; left:0; top:0; transform:translate(-50%,-50%); display:flex;
  align-items:center; gap:9px; visibility:hidden; will-change:transform,opacity}
.fo-mk i{flex:0 0 auto; width:15px; height:15px; border-radius:50%; position:relative;
  border:1.5px solid var(--brass-2); background:rgba(127,166,204,.16)}
.fo-mk i::after{content:""; position:absolute; inset:-9px; border-radius:50%;
  border:1px solid var(--brass-line); animation:fo-pulse 2.6s var(--ease) infinite}
.fo-mk b{font-family:var(--mono); font-weight:600; font-size:.74rem; letter-spacing:.15em;
  text-transform:uppercase; color:#fff; white-space:nowrap;
  background:rgba(13,18,24,.74); border:1px solid var(--brass-line); padding:3px 9px;
  backdrop-filter:blur(2px)}
.fo-mk.flip{flex-direction:row-reverse}            /* label på indersiden nær højre kant */
.fo-mk-r i{border-color:#fff}                      /* sensortyperne: hvid prik, blå ring */
.fo-mk-e i{border-color:var(--alert); background:var(--alert-tint)}
.fo-mk-e i::after{border-color:var(--alert-line)}
.fo-mk-e b{border-color:var(--alert-line)}
@keyframes fo-pulse{0%{transform:scale(.72); opacity:.9} 70%{transform:scale(1.5); opacity:0} 100%{opacity:0}}

/* ── sporet ── */
.fo-trk{position:absolute; left:0; top:0; transform:translate(-50%,-50%); z-index:4;
  visibility:hidden; pointer-events:none; will-change:transform,opacity}
.fo-brk{display:block; width:52px; height:52px; --c:var(--alert); --t:1.5px; --l:14px;
  background:
    linear-gradient(var(--c),var(--c)) 0 0/var(--l) var(--t) no-repeat,
    linear-gradient(var(--c),var(--c)) 0 0/var(--t) var(--l) no-repeat,
    linear-gradient(var(--c),var(--c)) 100% 0/var(--l) var(--t) no-repeat,
    linear-gradient(var(--c),var(--c)) 100% 0/var(--t) var(--l) no-repeat,
    linear-gradient(var(--c),var(--c)) 0 100%/var(--l) var(--t) no-repeat,
    linear-gradient(var(--c),var(--c)) 0 100%/var(--t) var(--l) no-repeat,
    linear-gradient(var(--c),var(--c)) 100% 100%/var(--l) var(--t) no-repeat,
    linear-gradient(var(--c),var(--c)) 100% 100%/var(--t) var(--l) no-repeat}


/* ── noter ── */
.fo-note{position:absolute; right:clamp(20px,5vw,40px); bottom:14px; z-index:5; max-width:52%;
  text-align:right; font-family:var(--data); font-size:.62rem; letter-spacing:.14em;
  text-transform:uppercase; color:rgba(255,255,255,.62); text-shadow:0 1px 8px rgba(13,18,24,.9)}
.fo-cue{position:absolute; left:clamp(20px,5vw,40px); bottom:14px; z-index:5;
  font-family:var(--data); font-size:.66rem; letter-spacing:.3em; text-transform:uppercase;
  color:rgba(255,255,255,.66); transition:opacity .35s var(--ease);
  text-shadow:0 1px 8px rgba(13,18,24,.9)}
.fo-cue::after{content:""; display:block; width:1px; height:22px; margin:7px auto 0;
  background:linear-gradient(180deg,rgba(255,255,255,.7),transparent);
  animation:fo-cue 1.9s var(--ease) infinite}
.fo-cue.off{opacity:0}
/* fremdrift gennem sekvensen — sektionen er lang, og man skal kunne se, at den
   har en ende. Ligger over vignetten, under markørerne. */
.fo-bar{position:absolute; left:0; right:0; bottom:0; height:2px; z-index:5;
  background:rgba(255,255,255,.13)}
.fo-bar i{display:block; height:100%; background:var(--brass-2); transform:scaleX(0);
  transform-origin:0 50%; will-change:transform}
@keyframes fo-cue{0%{transform:translateY(-6px); opacity:0} 40%{opacity:1} 100%{transform:translateY(8px); opacity:0}}

/* ── fallback (ingen frames endnu / ingen JS / reduceret bevægelse) ── */
.fo-fallback{margin:0}
.fo-fallback img{display:block; width:100%; height:auto}
.fo-fallback figcaption{font-family:var(--data); font-size:.68rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--ink-3); padding:9px 12px; border-top:1px solid var(--line-2)}
.fo-legend{margin-top:var(--s5)}

@media(max-width:760px){
  .fo-seq{height:520vh}
  /* En 21:9-frame i en fuldhøj telefon-stage beskæres så voldsomt, at man kun
     ser en fjerdedel af billedets bredde. En lavere stage viser mere af
     motivet — og lader sektionen ånde i stedet for at fylde hele skærmen. */
  .fo-stage{top:calc(var(--head-h) + 4vh); height:72vh}
  .fo-mk b{font-size:.64rem; letter-spacing:.1em; padding:2px 6px}
  .fo-mk-r b,.fo-mk-e b{max-width:44vw; white-space:normal}
  .fo-ph{font-size:.7rem; letter-spacing:.13em}
  .fo-alt b{font-size:1.2rem}
  .fo-note{max-width:64%; font-size:.55rem; letter-spacing:.1em}
  .fo-brk{width:40px; height:40px}
}
@media(max-width:600px){ .fo-legend{grid-template-columns:1fr} }

/* ════ v4.8 · DET DYNAMISKE (.dyn) — hvorfor to lokationer ikke ligner hinanden ════
   Sektionen baerer den danske heraldik tydeligst: marineblaa grund fra
   skjoldene, guld paa numrene fra kronerne. Staalblaa er stadig teksten og
   stregerne — det er derfor den stadig laeses som Night Ops og ikke som et
   nyt tema. */
.dyn{background:linear-gradient(180deg,var(--navy) 0%,var(--bg) 78%)}
.dyn-lede{max-width:74ch; margin-top:var(--s5)}
.dyn-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s5); margin-top:var(--s7)}
.dyn-c{position:relative; padding:var(--s5) 0 0; border-top:1px solid var(--gold-line)}
.dyn-n{display:block; font-family:var(--data); font-size:.72rem; letter-spacing:.24em;
  color:var(--gold); margin-bottom:var(--s3)}
.dyn-c b{display:block; font-family:var(--mono); font-weight:600; font-size:1.18rem;
  line-height:1.28; letter-spacing:.01em; color:var(--ink); margin-bottom:var(--s3)}
.dyn-c p{margin:0; color:var(--ink-2); font-size:.95rem}
.dyn .src-line{margin-top:var(--s7)}
@media(max-width:900px){ .dyn-grid{grid-template-columns:1fr; gap:var(--s6)} }

/* ════ v4.11 · Sociale knapper i footeren ════
   Var to nøgne tekstlinks. Nu rigtige knapper med ikon, så LinkedIn kan findes
   i det halve sekund nogen leder efter den. LinkedIn-mærket bruges monokromt
   (currentColor) — deres brandregler tillader netop den variant på farvet
   grund, og formen er urørt. */
.soc{display:flex; gap:var(--s3); flex-wrap:wrap; align-items:center}
.soc-btn{display:inline-flex; align-items:center; gap:9px; padding:9px 15px;
  border:1px solid var(--line-2); color:var(--ink-2); background:var(--bg-1);
  font-family:var(--mono); font-weight:600; font-size:.82rem; letter-spacing:.14em;
  text-transform:uppercase; transition:color .18s var(--ease), border-color .18s var(--ease),
  background .18s var(--ease)}
.soc-btn svg{width:17px; height:17px; flex:0 0 auto}
.soc-btn:hover,.soc-btn:focus-visible{color:var(--ink); border-color:var(--brass-line);
  background:var(--brass-tint)}
@media(max-width:520px){ .soc-btn{padding:8px 12px; font-size:.76rem} }


/* ════════════════════════════════════════════════════════════════════════
   v5.0 · LIV I NIGHT OPS
   Klagen var, at sitet var for graat og for ensartet. Aarsagen var ikke
   paletten — den var, at ALLE undersider koerte den samme flade grund
   sektion efter sektion, og at roed/guld/marineblaa kun blev brugt paa
   forsiden. Passet her goer to ting og kun to:

     1 · Sektionsgrunde skifter, saa to nabosektioner aldrig deler grund.
     2 · De tre heraldiske farver faar hver sin faste betydning, saa de
         laeses som information og ikke som pynt:
             roed  = trussel, haendelse, klassificeret spor
             guld  = maerket: sektionsnummer, naaet milepael, noegletal,
                     nordmaerke, aktiv side, tastaturfokus
             navy  = skiftende sektionsgrund
     Staalblaa er stadig stemmen. Regnestykket paa forsiden efter passet:
     ~78 % Night Ops-grund og -tekst, ~16 % staalblaa, ~6 % roed+guld.
   ════════════════════════════════════════════════════════════════════════ */

/* ── 1 · sektionsgrunde ────────────────────────────────────────────────── */
/* .tint findes i forvejen (navy -> bg). .tint-up vender forloebet, saa en
   raekke sektioner kan skiftevis toene ned og op uden at to naboer moedes
   i samme tone. .panelled er den stille tredje grund. */
.section.tint-up{background:linear-gradient(180deg,var(--bg) 0%,var(--navy) 100%)}
.section.panelled{background:var(--bg-1)}
/* naar to sektioner har hver sin grund, er stregen imellem dem overfloedig */
.section.tint+.section:not(.principle),.section.tint-up+.section:not(.principle),
.section.panelled+.section:not(.principle),
.section+.section.tint,.section+.section.tint-up,.section+.section.panelled{border-top-color:transparent}

/* ── 2 · sektionsmaerket ───────────────────────────────────────────────── */
/* Et kort guldsegment i venstre ende af sektionsstregen. Det er sitets
   mindste heraldiske element og det eneste sted guldet gentages paa hver
   eneste sektion — nok til at oejet finder rytmen, for lidt til at temaet
   skifter karakter. */
.sec-head{position:relative}
.sec-head::after{content:""; position:absolute; left:0; bottom:-1px;
  width:44px; height:1px; background:var(--gold); opacity:.9}

/* ── 3 · princip-baandet faar dansk kant ───────────────────────────────── */
/* Roed og guld i én kort streg oeverst til venstre. Ikke et flag, ikke et
   emblem — to farvede maal paa en teknisk kant, som paa en maalestok. */
.principle{position:relative}
.principle::before{content:""; position:absolute; left:0; top:0; height:2px;
  width:clamp(120px,18vw,220px);
  background:linear-gradient(90deg,var(--alert) 0 45%,var(--gold) 45% 100%)}

/* ── 4 · status og data ────────────────────────────────────────────────── */
/* Levende-prikken i konsolbjaelken skal pulse — en stillestaaende "LIVE" er
   en paastand, en pulserende er en tilstand. */
@media (prefers-reduced-motion:no-preference){
  .console-bar .live::before{animation:pulse 2.4s var(--ease) infinite}
}
/* taginformation med tilstand */
.tag.gold{border-color:var(--gold-line); color:var(--gold); background:rgba(212,175,90,.08)}
.tag.alert{border-color:var(--alert-line); color:var(--alert-2); background:var(--alert-tint)}
.tag.ok{border-color:rgba(95,174,136,.42); color:var(--ok); background:rgba(95,174,136,.10)}
/* tidslinjens naaede punkter faar guldstregen med sig */
.timeline li.done .when{color:var(--gold)}

/* ── 5 · beroeringsmaal og tastatur ────────────────────────────────────── */
/* Sprogknappen og menuknappen var 30-32 px hoeje. 44 px er den mindste
   maalflade en tommel rammer paalideligt. */
@media(max-width:940px){
  .lang,.menu-btn{min-height:44px; padding-inline:14px}
  .head-actions{gap:var(--s2)}
}
/* Fokusrammen maa ikke skjules bag den klaebende header */
.skip:focus{left:8px; top:8px}
a:focus-visible,button:focus-visible,summary:focus-visible{border-radius:0}

/* ── 6 · figurer og billeder ───────────────────────────────────────────── */
/* Reserver pladsen, saa siden ikke hopper mens et billede hentes. */
.mslot-stage img,.mslot-stage video{background:var(--bg-1)}

/* ── 7 · 404 ───────────────────────────────────────────────────────────── */
.e404{display:grid; gap:var(--s5); max-width:64ch}
.e404 .code{font-family:var(--data); font-size:clamp(3.4rem,9vw,6rem); line-height:1;
  color:var(--gold); letter-spacing:.06em}
.e404 .links{display:flex; flex-wrap:wrap; gap:var(--s3); margin-top:var(--s3)}

/* ── 8 · formularernes fejl og kvittering ──────────────────────────────────
   Formularerne sender ikke til en server — de aabner mailklienten. Der er
   derfor ingen "sendt"-tilstand at lyve om: kvitteringen fortaeller hvad der
   faktisk skete, og giver adressen, hvis maskinen ikke har en mailklient. */
.field.bad input,.field.bad textarea,.field.bad select{border-color:var(--alert)}
.field .fe{display:block; margin-top:6px; font-family:var(--data); font-size:.74rem;
  letter-spacing:.05em; color:var(--alert-2)}
.form-err,.form-note{margin:var(--s4) 0 0; padding:var(--s3) var(--s4);
  font-size:.9rem; color:var(--ink-2)}
.form-err{border-left:2px solid var(--alert); background:var(--alert-tint)}
.form-note{border-left:2px solid var(--ok); background:rgba(95,174,136,.10)}
.form-err[hidden],.form-note[hidden]{display:none}

/* ── 9 · beroeringsmaal i footeren ─────────────────────────────────────────
   De nøgne tekstlinks i footerkolonnerne var 18 px hoeje. Med afstanden
   mellem punkterne klarer de akkurat WCAG 2.2's undtagelse for spredning,
   men en tommel rammer dem daarligt. Lidt luft ind i selve linket loeser
   det uden at aendre layoutet. */
@media(max-width:940px){
  .foot-col ul a{display:inline-block; padding:5px 0}
  .foot-col ul{gap:6px}
}