/* ============================================================
   BRAND 2026-10 · Twin Arc-identiteten
   Kilde: _admin/design-brand-2026-10/ (Claude Design-eksport).
   Forside, ydelser, cases og kontakt bygges 1:1 af _admin/tools/build-brand.py.
   Denne fil bærer identiteten over på resten af sitet: cookie-banner,
   header, footer og farver/typografi på de ældre sider.
   Instrument Sans + IBM Plex Mono · #1D1D1F ink · #F5F5F7 flade · #3355FF accent
   ============================================================ */
:root {
  --bn-ink: #1D1D1F;
  --bn-ink2: #424245;
  --bn-muted: #6E6E73;
  --bn-faint: #86868B;
  --bn-line: #E1E1E6;
  --bn-field: #D2D2D7;
  --bn-surface: #F5F5F7;
  --bn-bg: #FFFFFF;
  --bn-accent: #3355FF;
  --bn-accent-soft: #7C95FF;
  --bn-violet: #8B5CFF;
  --bn-pink: #FF5C8A;
  --bn-amber: #FFB547;
  --bn-ease: cubic-bezier(.2,.7,.2,1);
  --bn-font: 'Instrument Sans', Helvetica, Arial, sans-serif;
  --bn-mono: 'IBM Plex Mono', ui-monospace, monospace;
}

/* ---------- cookie-banner (assets/js/cookie-consent.js) ---------- */
#wp-cc {
  position: fixed; left: 20px; bottom: 20px; z-index: 9999;
  width: min(400px, calc(100vw - 40px));
  opacity: 0; transform: translateY(16px) scale(0.98);
  pointer-events: none; visibility: hidden;
  font-family: var(--bn-font);
  transition: opacity 320ms var(--bn-ease), transform 320ms var(--bn-ease), visibility 320ms;
}
#wp-cc.is-open { opacity: 1; transform: none; pointer-events: auto; visibility: visible; }
.wp-cc-card {
  background: rgba(255,255,255,0.92); backdrop-filter: saturate(180%) blur(20px); -webkit-backdrop-filter: saturate(180%) blur(20px);
  border: 1px solid rgba(0,0,0,0.06); border-radius: 28px;
  box-shadow: 0 40px 80px -40px rgba(0,0,0,0.35), 0 6px 16px rgba(0,0,0,0.06);
  padding: 26px 26px 22px; color: var(--bn-ink);
}
.wp-cc-title { font-family: var(--bn-font); font-size: 21px; font-weight: 600; letter-spacing: -0.03em; color: var(--bn-ink); margin: 0 0 8px; }
.wp-cc-body { font-size: 14px; line-height: 1.5; color: var(--bn-ink2); margin: 0 0 18px; }
.wp-cc-link { color: var(--bn-accent); font-weight: 500; text-decoration: none; white-space: nowrap; }
.wp-cc-link:hover { text-decoration: underline; }
.wp-cc-rows { display: flex; flex-direction: column; gap: 8px; margin-bottom: 18px; }
.wp-cc-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; background: var(--bn-surface); border-radius: 16px; padding: 12px 16px; }
.wp-cc-row-name { font-size: 14px; font-weight: 600; color: var(--bn-ink); }
.wp-cc-row-sub { font-size: 12px; color: var(--bn-muted); margin-top: 1px; }
.wp-cc-always { font-family: var(--bn-mono); font-size: 11px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.06em; color: #1E7B34; background: #E6F6EA; border-radius: 999px; padding: 4px 10px; white-space: nowrap; }
.wp-cc-switch { position: relative; display: inline-block; width: 44px; height: 26px; flex-shrink: 0; cursor: pointer; }
.wp-cc-switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.wp-cc-slider { position: absolute; inset: 0; background: var(--bn-field); border-radius: 999px; transition: background .3s var(--bn-ease); }
.wp-cc-slider::before { content: ''; position: absolute; height: 22px; width: 22px; left: 2px; top: 2px; background: #fff; border-radius: 50%; box-shadow: 0 1px 3px rgba(0,0,0,0.2); transition: transform .3s var(--bn-ease); }
.wp-cc-switch input:checked + .wp-cc-slider { background: var(--bn-accent); }
.wp-cc-switch input:checked + .wp-cc-slider::before { transform: translateX(18px); }
.wp-cc-switch input:focus-visible + .wp-cc-slider { outline: 2px solid var(--bn-accent); outline-offset: 3px; }
.wp-cc-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.wp-cc-btn { font-family: inherit; font-size: 15px; font-weight: 500; padding: 12px 16px; border-radius: 999px; cursor: pointer; border: 0; transition: transform .3s var(--bn-ease), background .3s; }
.wp-cc-btn:hover { transform: scale(1.04); }
.wp-cc-btn-primary { background: var(--bn-ink); color: #fff; }
.wp-cc-btn-primary:hover { background: #000; }
.wp-cc-btn-ghost { background: #fff; color: var(--bn-ink); box-shadow: inset 0 0 0 1px var(--bn-field); }
.wp-cc-btn:focus-visible { outline: 2px solid var(--bn-accent); outline-offset: 3px; }
#wp-cc-reopen {
  position: fixed; left: 20px; bottom: 20px; z-index: 9998;
  display: none; align-items: center; gap: 6px;
  background: rgba(255,255,255,0.92); backdrop-filter: saturate(180%) blur(20px); -webkit-backdrop-filter: saturate(180%) blur(20px);
  color: var(--bn-ink); border: 1px solid rgba(0,0,0,0.06);
  border-radius: 999px; padding: 8px 14px; font-family: var(--bn-font); font-size: 12px; font-weight: 500;
  cursor: pointer; box-shadow: 0 8px 24px rgba(0,0,0,0.10);
  transition: transform .3s var(--bn-ease);
}
#wp-cc-reopen.is-visible { display: inline-flex; }
#wp-cc-reopen:hover { transform: scale(1.04); }
#wp-cc-reopen:focus-visible { outline: 2px solid var(--bn-accent); outline-offset: 3px; }
#wp-cc-reopen svg { color: var(--bn-accent); }
@media (max-width: 520px) {
  #wp-cc { left: 12px; right: 12px; bottom: 12px; width: auto; }
  .wp-cc-actions { grid-template-columns: 1fr; }
  #wp-cc-reopen { left: 12px; bottom: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  #wp-cc, .wp-cc-slider::before, .wp-cc-btn, #wp-cc-reopen { transition: none; }
}

/* ---------- header (sync-header.py) · samme markup som designets nav ---------- */
.bn-login:hover { background: rgba(0,0,0,0.06) !important; }
.bn-nav a:hover, .bn-foot a:hover { text-decoration: underline; }
.bn-nav .bn-login:hover, .bn-nav a[style*="border-radius:999px"]:hover, .bn-foot a[style*="display:flex"]:hover { text-decoration: none; }
.bn-nav, .bn-foot { font-family: var(--bn-font); -webkit-font-smoothing: antialiased; }
.bn-nav *, .bn-foot * { box-sizing: border-box; font-family: inherit; }
.bn-nav a, .bn-foot a { text-decoration: none; }
.bn-menu { display: none; background: none; border: 0; padding: 8px; margin: -8px; cursor: pointer; color: var(--bn-ink); }
.bn-menu svg { display: block; }
.bn-mobile-only { display: none !important; }
@media (max-width: 900px) {
  .bn-links { display: none !important; }
  .bn-menu { display: block; }
  nav.bn-open .bn-links { display: flex !important; position: absolute; left: 0; right: 0; top: 52px; flex-direction: column; align-items: flex-start; gap: 0 !important; padding: 8px 24px 16px; background: rgba(255,255,255,0.96); backdrop-filter: saturate(180%) blur(20px); -webkit-backdrop-filter: saturate(180%) blur(20px); border-bottom: 1px solid rgba(0,0,0,0.06); }
  nav.bn-open .bn-links a { font-size: 17px; padding: 12px 0; width: 100%; }
  nav.bn-open .bn-mobile-only { display: block !important; color: var(--bn-muted) !important; }
  .bn-login-label { display: none; }
}
a:focus-visible, button:focus-visible, [role=button]:focus-visible, input:focus-visible, textarea:focus-visible { outline: 2px solid var(--bn-accent); outline-offset: 3px; }
/* de gamle sider uden wp26 kører stadig body{zoom:.8}: header og footer vises i ægte størrelse */
body:not(.w26):not(.bn-page) .bn-nav, body:not(.w26):not(.bn-page) .bn-foot { zoom: 1.25; }
@media (max-width: 1024px) { body:not(.w26):not(.bn-page) .bn-nav, body:not(.w26):not(.bn-page) .bn-foot { zoom: 1; } }

/* ---------- resten af sitet: wp26 + wpx får Twin Arc-paletten ---------- */
body.w26 {
  --x-bg: #FFFFFF; --x-surface: #F5F5F7; --x-sunk: #E8E8ED;
  --x-ink: #1D1D1F; --x-ink2: #424245; --x-mute: #6E6E73; --x-mute2: #86868B;
  --x-line: rgba(0,0,0,.06); --x-line2: #D2D2D7;
  --x-black: #000000; --x-dtext: #F5F5F7; --x-dmute: #A1A1A6; --x-dline: rgba(255,255,255,.12);
  --x-accent: #3355FF;
  --x-font: 'Instrument Sans', Helvetica, Arial, sans-serif;
  --x-mono: 'IBM Plex Mono', ui-monospace, monospace;
  --x-ease: cubic-bezier(.2,.7,.2,1);
  --x-shadow: 0 40px 80px -40px rgba(0,0,0,.35);
  --w-accent: #3355FF; --w-accent-ink: #3355FF; --w-accent-lt: #7C95FF;
  --g-bg: #FFFFFF; --g-surface: #F5F5F7; --g-ink: #1D1D1F; --g-ink2: #424245; --g-mute: #6E6E73;
  background: #FFFFFF; color: #1D1D1F;
  font-family: var(--x-font); -webkit-font-smoothing: antialiased;
}
body.w26 main { margin-top: 0 !important; }
.w26 .w-h1, .w26 .w-h2, .w26 .x-h2, .w26 .x-display { letter-spacing: -0.045em; }
.w26 .x-mute, .w26 .w-h2 .x-mute { color: var(--bn-faint); }
.w26 a:not([class]) { color: var(--bn-accent); }
.w26 .w-grad, .w26 .w-h1 .k, .w26 .w-h2 .k, .w26 .x-display .k, .w26 .x-h2 .k {
  background: linear-gradient(90deg, var(--bn-pink), var(--bn-amber) 45%, var(--bn-violet) 85%, var(--bn-accent));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
/* reveal og knapper med designets bevægelse: 32 px løft, 1,1 s, .2/.7/.2/1 */
.w26 .w-rv { transform: translateY(32px); transition: opacity 1.1s var(--bn-ease), transform 1.2s var(--bn-ease); }
.w26 .w-btn, .x-btn { transition: transform .3s var(--bn-ease), background .3s, box-shadow .3s !important; }
.w26 .w-btn:hover, .x-btn:hover { transform: scale(1.04); }
.w26 .w-btn--primary:hover, .x-btn--ink:hover { background: #000; }
.w26 .w-link { color: var(--bn-accent); }
.w26 .w-link::after { content: '›'; }
/* orange glød og detaljer → blå/violet */
.w26 .w-glow-floor { background: radial-gradient(closest-side, rgba(51,85,255,.22), transparent); }
.w26 .w-spot::after, .w26 .w-spot.w-tile:not(.w-tile--img):not(.w-tile--dark)::after { background: radial-gradient(500px circle at var(--mx, 50%) var(--my, 50%), rgba(51,85,255,.07), transparent 60%); }
.w26 .w-term .p { color: var(--bn-accent-soft); }
.x-horizon { box-shadow: 0 -1px 0 rgba(124,149,255,.8), 0 -16px 50px -10px rgba(51,85,255,.5), 0 -110px 200px -40px rgba(139,92,255,.3); }
.x-horizon::after { background: radial-gradient(closest-side, rgba(170,185,255,.55), transparent); }
.x-flow div:nth-child(2) { box-shadow: inset 0 0 0 1px rgba(51,85,255,.5); background: linear-gradient(180deg, rgba(51,85,255,.14), rgba(51,85,255,.02)); }
.x-reach a:hover b { color: var(--bn-accent-soft); }
.w26 .w-hero--dark .w-window { box-shadow: 0 0 0 1px rgba(255,255,255,.12), 0 60px 140px -30px rgba(51,85,255,.5), 0 30px 60px -20px rgba(0,0,0,.8); }
@media (prefers-reduced-motion: reduce) {
  .w26 .w-rv { transform: none; transition: opacity .3s; }
  .w26 .w-btn:hover, .x-btn:hover { transform: none; }
}

/* ---------- juridiske sider (styles-minimal) ---------- */
body:not(.w26):not(.bn-page) { font-family: var(--bn-font); color: var(--bn-ink); }
body:not(.w26):not(.bn-page) h1, body:not(.w26):not(.bn-page) h2, body:not(.w26):not(.bn-page) h3 { font-family: var(--bn-font); letter-spacing: -0.03em; color: var(--bn-ink); }
body:not(.w26):not(.bn-page) main a { color: var(--bn-accent); }

/* ---------- styles.css' gamle orange tokens (formularer, skip-link, fokus) ---------- */
:root {
  --blue: #3355FF; --blue-lt: #F5F7FF; --blue-dk: #2340D9; --blue-light: #E3E8FF;
  --sunset-1: #7C95FF; --sunset-2: #8B5CFF; --sunset-3: #FF5C8A;
  --focus-ring: #3355FF;
}
.cf-error-msg { color: #D70015 !important; }
.skip-link { background: var(--bn-ink) !important; }
/* styles-minimal.css skjuler svg[aria-hidden]: symbolet og ikonerne i header/footer skal ses */
.bn-nav svg[aria-hidden], .bn-foot svg[aria-hidden] { display: block !important; }
/* gamle globale nav-regler (styles-minimal/styles.css) må ikke ramme den nye nav */
nav.bn-nav { height: auto !important; min-height: 0 !important; padding: 0 !important; margin: 0 !important; display: block !important; width: auto !important; left: auto; right: auto; box-shadow: none; }

/* ---------- tryk-feedback (Apple: reagér på pointer-down, slip blødt) ----------
   Ind i :active på 100 ms ease-out; ud igen med elementets egen transition
   (designets .2/.7/.2/1). Specificiteten slår designets .whN:hover. */
.bn-page a, .bn-page [role=button], .bn-nav a, .bn-nav button, .w26 a, .w26 button, .wp-cc-btn, #wp-cc-reopen { -webkit-tap-highlight-color: transparent; }
.bn-page a[style*="border-radius:999px"]:not([class^="wh"]),
.bn-page span[role=button], .bn-nav a[style*="border-radius:999px"], .bn-login, .bn-menu,
.w26 .w-btn, .x-btn, .cf-btn, .cf-svc, .wp-cc-btn, #wp-cc-reopen {
  transition: transform .35s var(--bn-ease), background .3s, box-shadow .3s, opacity .3s;
}
.bn-page a[style*="border-radius:999px"]:not([class^="wh"]):hover, .bn-nav a[style*="border-radius:999px"]:hover { transform: scale(1.04); }
.bn-page a[style*="border-radius:999px"]:active, .bn-page span[role=button]:active,
.bn-nav a[style*="border-radius:999px"]:active, .bn-nav .bn-login:active, .bn-nav .bn-menu:active,
.w26 .w-btn:active, body .x-btn:active, body .cf-btn:active, body .wp-cc-btn:active, body #wp-cc-reopen:active {
  transform: scale(.96) !important; transition: transform 100ms ease-out, background .3s !important;
}
.bn-page span[data-chip]:active, body .cf-svc:active { transform: scale(.94) !important; transition: transform 100ms ease-out !important; }
/* store kort og ydelses-ikoner trykkes en anelse ned */
.bn-page a[style*="border-radius:28px"]:active { transform: scale(.985) !important; transition: transform 120ms ease-out !important; }
.bn-page a[style*="flex-direction:column;align-items:center;gap:14px"]:active { transform: scale(.94) !important; transition: transform 100ms ease-out !important; }
/* tekstlinks og FAQ-rækker: kort highlight i stedet for skala */
.bn-page a:not([style*="border-radius"]):not([style*="flex-direction:column"]), .bn-nav .bn-links a, .bn-foot a, .bn-page [data-faq] { transition: opacity .3s var(--bn-ease); }
.bn-page a:not([style*="border-radius"]):not([style*="flex-direction:column"]):active, .bn-nav .bn-links a:active, .bn-foot a:active, .bn-page [data-faq]:active { opacity: .55; transition: opacity 80ms ease-out; }
.bn-page [data-faq] > span:last-child { transition: transform .4s var(--bn-ease), background .3s; }
.bn-page [data-faq]:active > span:last-child { transform: scale(.85) !important; transition: transform 100ms ease-out !important; }

/* menuknap: to streger bliver til et kryds, menuen glider blødt ned fra navigationen */
.bn-menu path { transition: transform .35s var(--bn-ease); transform-box: fill-box; transform-origin: center; }
nav.bn-open .bn-menu .bn-l1 { transform: translateY(4px) rotate(45deg); }
nav.bn-open .bn-menu .bn-l2 { transform: translateY(-4px) rotate(-45deg); }
@keyframes bn-drop { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
@media (max-width: 900px) { nav.bn-open .bn-links { animation: bn-drop .32s var(--bn-ease) both; } }

/* kontaktformularen: tak-tilstanden materialiserer sig */
@keyframes bn-arrive { from { opacity: 0; transform: scale(.97) translateY(8px); } to { opacity: 1; transform: none; } }
#bn-sent:not([hidden]) { animation: bn-arrive .6s var(--bn-ease) both; }

@media (prefers-reduced-motion: reduce) {
  .bn-page a:active, .bn-page span[role=button]:active, .bn-nav a:active, .bn-nav button:active, .w26 .w-btn:active, body .x-btn:active, body .cf-btn:active, body .cf-svc:active, body .wp-cc-btn:active, .bn-page span[data-chip]:active { transform: none !important; opacity: .7; }
  .bn-page a[style*="border-radius:999px"]:hover, .bn-nav a[style*="border-radius:999px"]:hover { transform: none; }
  .bn-menu path, nav.bn-open .bn-links, #bn-sent:not([hidden]) { animation: none; transition: none; }
}

/* ---------- artikler (body.bn-page.bn-article, stemples af sync-header.py) ---------- */
body.bn-article { zoom: 1; background: #FFFFFF; color: var(--bn-ink); font-family: var(--bn-font); -webkit-font-smoothing: antialiased; }
body.bn-article main { margin-top: 0 !important; }
.bn-article h1, .bn-article h2, .bn-article h3, .bn-article p, .bn-article li, .bn-article a, .bn-article span, .bn-article blockquote { font-family: var(--bn-font); }
.bn-article .page-bg-network .pn-arc { stroke: var(--bn-accent); opacity: .08; }
.bn-article .page-bg-network .pn-node { fill: var(--bn-accent); opacity: .18; }
.bn-article .page-bg-network .pn-glow { fill: var(--bn-pink); opacity: .06; }
.bn-article .art-progress { background: linear-gradient(90deg, var(--bn-pink), var(--bn-amber) 45%, var(--bn-violet) 85%, var(--bn-accent)); box-shadow: none; }
.bn-article .art-crumb, .bn-article .ar-crumb { color: var(--bn-faint); font-size: 13px; }
.bn-article .art-crumb a, .bn-article .ar-crumb a { color: var(--bn-accent); font-weight: 500; }
.bn-article .art-cat, .bn-article .ar-cat, .bn-article .ar-tag {
  font-family: var(--bn-mono); font-size: 12px; font-weight: 500; letter-spacing: .06em;
  color: var(--bn-ink2); background: var(--bn-surface); border: 0; padding: 6px 12px; border-radius: 999px;
}
.bn-article .art-h1 { font-size: clamp(40px, 5.4vw, 72px); font-weight: 600; letter-spacing: -0.045em; line-height: 1; color: var(--bn-ink); }
.bn-article .art-lead { font-size: clamp(19px, 1.9vw, 24px); line-height: 1.4; color: var(--bn-ink2); font-weight: 400; letter-spacing: -0.01em; }
.bn-article .art-meta { color: var(--bn-faint); font-weight: 500; font-size: 13px; border-color: var(--bn-line); }
.bn-article .art-tldr { background: var(--bn-surface); border: 0; border-radius: 28px; padding: 28px 32px; }
.bn-article .art-tldr-label { font-family: var(--bn-mono); font-weight: 500; letter-spacing: .06em; color: var(--bn-accent); }
.bn-article .art-tldr li::before { color: var(--bn-accent); }
.bn-article .art-tldr li { color: var(--bn-ink2); font-size: 17px; }
.bn-article .art-body { font-size: 18px; line-height: 1.6; color: var(--bn-ink2); }
.bn-article .art-body strong { color: var(--bn-ink); font-weight: 600; }
.bn-article .art-body a:not(.art-cta-btn) { color: var(--bn-accent); text-decoration-color: rgba(51,85,255,.35); }
.bn-article .art-body h2 { font-size: clamp(28px, 3.2vw, 40px); font-weight: 600; letter-spacing: -0.035em; line-height: 1.05; color: var(--bn-ink); padding-left: 0; margin-top: 64px; }
.bn-article .art-body h2::before { display: none; }
.bn-article .art-body h3 { font-weight: 600; letter-spacing: -0.02em; color: var(--bn-ink); }
.bn-article .art-body ul li::marker { color: var(--bn-accent); }
.bn-article .art-body blockquote { background: var(--bn-surface); border-left: 0; border-radius: 28px; padding: 28px 32px; font-style: normal; font-size: 20px; letter-spacing: -0.015em; color: var(--bn-ink); }
.bn-article .art-compare { background: var(--bn-surface); border: 0; border-radius: 28px; overflow: hidden; }
.bn-article .art-compare-head { background: transparent; }
.bn-article .art-compare-head span { font-family: var(--bn-mono); font-weight: 500; letter-spacing: .04em; }
.bn-article .art-compare-head .us { color: var(--bn-accent); }
.bn-article .art-compare-row { border-color: var(--bn-line); }
.bn-article .art-cta-inline { background: #000000; border-radius: 32px; position: relative; overflow: hidden; }
.bn-article .art-cta-inline::before { background: radial-gradient(circle at 30% 20%, rgba(51,85,255,.30), transparent 55%), radial-gradient(circle at 75% 70%, rgba(255,92,138,.26), transparent 55%); }
.bn-article .art-cta-inline h3 { font-weight: 600; letter-spacing: -0.04em; color: #F5F5F7; }
.bn-article .art-cta-inline p { color: #A1A1A6; }
/* artikel-oversigten: samme intro som designets Cases/Ydelser */
.bn-article .ar-hero { background: #FFFFFF; color: var(--bn-ink); text-align: left; padding: clamp(72px, 9vw, 120px) 24px clamp(40px, 5vw, 64px); position: relative; overflow: hidden; }
.bn-article .ar-hero::before { content: ''; position: absolute; inset: auto; left: 55%; top: -30%; width: 46vw; height: 46vw; max-width: 640px; max-height: 640px; border-radius: 50%; background: radial-gradient(circle, rgba(51,85,255,.22), rgba(51,85,255,0) 65%); filter: blur(30px); animation: bn-hub-drift 18s ease-in-out infinite alternate; }
@keyframes bn-hub-drift { from { transform: translate(0,0); } to { transform: translate(-6vw,6vh) scale(1.1); } }
.bn-article .ar-hero-inner { max-width: 1200px; margin: 0 auto; display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 24px 48px; }
.bn-article .ar-hero .ar-tag { display: none; }
.bn-article .ar-hero h1 { margin: 0; font-size: clamp(56px, 8vw, 112px); font-weight: 600; letter-spacing: -0.045em; line-height: .98; color: var(--bn-ink); animation: bn-hub-rise 1.1s var(--bn-ease) both; }
.bn-article .ar-hero p { margin: 0; max-width: 460px; font-size: clamp(19px, 1.9vw, 24px); line-height: 1.4; color: var(--bn-ink2); animation: bn-hub-rise 1.1s var(--bn-ease) .15s both; }
@keyframes bn-hub-rise { from { opacity: 0; transform: translateY(32px); } to { opacity: 1; transform: none; } }
.bn-article .ar-crumb { max-width: 1200px; padding: 0 24px; }
.bn-article .ar-section { max-width: 1200px; padding: 32px 24px clamp(96px, 11vw, 160px); }
.bn-article .ar-grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap: 16px; }
@media (prefers-reduced-motion: reduce) { .bn-article .ar-hero::before, .bn-article .ar-hero h1, .bn-article .ar-hero p { animation: none; } }
.bn-article .art-cta-btn { background: #FFFFFF; color: #000 !important; border-radius: 999px; box-shadow: none; font-weight: 500; font-size: 17px; padding: 14px 28px; transition: transform .3s var(--bn-ease); }
.bn-article .art-cta-btn:hover { background: #FFFFFF; transform: scale(1.04); }
.bn-article .art-cta-btn:active { transform: scale(.96); transition: transform 100ms ease-out; }
.bn-article .art-related-title { font-family: var(--bn-mono); font-weight: 500; letter-spacing: .06em; color: var(--bn-muted); }
.bn-article .art-related h2 { font-size: clamp(32px, 4vw, 48px); font-weight: 600; letter-spacing: -0.04em; color: var(--bn-ink); }
.bn-article .art-related-card, .bn-article .ar-card { background: var(--bn-surface); border: 0; border-radius: 28px; padding: 28px; transition: transform .5s var(--bn-ease), box-shadow .5s; }
.bn-article .art-related-card:hover, .bn-article .ar-card:hover { transform: scale(1.02); box-shadow: 0 40px 80px -40px rgba(0,0,0,.35); border-color: transparent; }
.bn-article .art-related-card:active, .bn-article .ar-card:active { transform: scale(.985); transition: transform 120ms ease-out; }
.bn-article .art-related-cat { font-family: var(--bn-mono); font-weight: 500; letter-spacing: .06em; color: var(--bn-accent); }
.bn-article .art-related-card h3, .bn-article .ar-card h2 { font-weight: 600; letter-spacing: -0.025em; color: var(--bn-ink); }
.bn-article .art-related-card:hover .arrow, .bn-article .ar-card:hover .ar-arrow { color: var(--bn-accent); }
.bn-article .ar-meta { border-color: var(--bn-line); color: var(--bn-faint); font-weight: 500; }
.bn-article .art-reveal { transform: translateY(32px); transition: opacity 1.1s var(--bn-ease), transform 1.2s var(--bn-ease); }
@media (prefers-reduced-motion: reduce) { .bn-article .art-reveal { transform: none; transition: opacity .3s; } }
/* sprogskift i headeren (desktop); på mobil ligger det i menuen */
.bn-lang:hover { background: rgba(0,0,0,0.06); color: #1D1D1F !important; }
.bn-lang:active { transform: scale(.94); transition: transform 100ms ease-out; }
@media (max-width: 900px) { .bn-lang { display: none !important; } }
/* scroll-reveal fra site-header.js */
.bn-rv { opacity: 0; transform: translateY(32px); }
.bn-rv.bn-in { opacity: 1; transform: none; transition: opacity 1.1s var(--bn-ease), transform 1.2s var(--bn-ease), box-shadow .5s; }
.bn-rv.bn-in:hover { transition-delay: 0s !important; }