/* Stiftselskab.dk · site.css
   The new design (Figma file Stiftselskab.dk, page Website, section Dev).
   Class names are the layer names in Figma. Desktop values are the 1440 frame,
   mobile values (max-width: 991px) the 390 frame. Spec: docs/2026-09-28-figma-dev-version.md */

@font-face { font-family: "Mona Sans"; src: url("../fonts/Mona-Sans-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Mona Sans"; src: url("../fonts/Mona-Sans-Medium.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
/* Bold: MonaSans-Bold.woff2 from github/mona-sans v1.0.1 (OFL), same metrics as the v1.0 Regular and Medium above. */
@font-face { font-family: "Mona Sans"; src: url("../fonts/Mona-Sans-SemiBold.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Mona Sans"; src: url("../fonts/Mona-Sans-Bold.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }

:root {
  --_colors---hd--l-bg: #f1f1ec;
  --_colors---hd--l-bg-2: #ffffff;
  --_colors---hd--l-bg-3: #e9e9e3;
  --_colors---hd--dk-bg: #060a12;
  --_colors---hd--dk-bg-2: rgba(255, 255, 255, .2);
  --_colors---hd--dk-bg-3: rgba(255, 255, 255, .1);
  --_colors---hd--dk-text-100: #000000;
  --_colors---hd--dk-text-70: #56564e;
  --_colors---hd--dk-text-50: #8b8b81;
  --_colors---hd--l-text-100: #ffffff;
  --_colors---hd--l-text-70: rgba(255, 255, 255, .7);
  --_colors---hd--l-text-50: rgba(255, 255, 255, .55);
  --_colors---hd--dk-faded: rgba(0, 0, 0, .1);
  --_colors---hd--l-faded: rgba(255, 255, 255, .2);
  --_colors---hd--brand-400: #7684ff;
  --_colors---hd--brand-500: #4f46e5;
  --_colors---hd--brand-700: #4f46e5;
  --_colors---hd--carousel-arrow: #4d4d4d;
  --_colors---hd--value-card-bg: #fefefe;          /* the value illustrations' own background at the mobile crops */
  --_colors---hd--security-card-tint: rgba(117, 117, 117, .2);
  --_colors---hd--price-card-visual: #eeeafb;      /* the price illustrations' own background */

  --radius--small: 8px;
  --radius--main: 12px;
  --radius--round: 999px;
  --site--margin: 2rem;
  --grid--gutter: 16px;
  --container--max: 96rem; /* 1536 px of content; with the 2rem sides the page tops out at 100rem (1600 px) */

  /* Leading trim to cap height (Mona Sans cap = .729em, typo ascent .7998, descent .167).
     Top trim = half-leading + (ascent - cap), bottom trim = half-leading + descent. */
  --trim-120-top: .1874; --trim-120-bottom: .2836;
  --trim-130-top: .2374; --trim-130-bottom: .3336;
  --trim-140-top: .2874; --trim-140-bottom: .3836;
  --trim-150-top: .3374; --trim-150-bottom: .4336;
}

/* Theme: light by default, dark on .u-theme-dark (same rule as the Figma Light/Dark modes) */
:root, .u-theme-light {
  --_theme---background: var(--_colors---hd--l-bg);
  --_theme---background-2: var(--_colors---hd--l-bg-2);
  --_theme---background-3: var(--_colors---hd--l-bg-3);
  --_theme---text: var(--_colors---hd--dk-text-100);
  --_theme---text-2: var(--_colors---hd--dk-text-70);
  --_theme---text-3: var(--_colors---hd--dk-text-50);
  --_theme---border: var(--_colors---hd--dk-faded);
  --_theme---brand-text: var(--_colors---hd--brand-700);
  --_theme---button-primary--background: var(--_colors---hd--dk-text-100);
  --_theme---button-primary--text: var(--_colors---hd--l-bg-2);
  --_theme---button-secondary--border: var(--_colors---hd--dk-faded);
  --_theme---button-secondary--text: var(--_colors---hd--dk-text-100);
}
.u-theme-light { color: var(--_theme---text); }
.u-theme-dark {
  --_theme---background: var(--_colors---hd--dk-bg);
  --_theme---background-2: var(--_colors---hd--dk-bg-2);
  --_theme---background-3: var(--_colors---hd--dk-bg-3);
  --_theme---text: var(--_colors---hd--l-text-100);
  --_theme---text-2: var(--_colors---hd--l-text-70);
  --_theme---text-3: var(--_colors---hd--l-text-50);
  --_theme---border: var(--_colors---hd--l-faded);
  --_theme---brand-text: var(--_colors---hd--brand-400);
  --_theme---button-primary--background: var(--_colors---hd--l-text-100);
  --_theme---button-primary--text: var(--_colors---hd--dk-text-100);
  --_theme---button-secondary--border: var(--_colors---hd--l-faded);
  --_theme---button-secondary--text: var(--_colors---hd--l-text-100);
  color: var(--_theme---text);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: "Mona Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 16px;
  line-height: 1.2;
  color: var(--_theme---text);
  background: var(--_colors---hd--l-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
h1, h2, h3, h4, p { margin: 0; font-weight: inherit; }
ul { margin: 0; padding: 0; list-style: none; }
summary { list-style: none; cursor: pointer; }
summary::-webkit-details-marker { display: none; }
:focus-visible { outline: 2px solid var(--_colors---hd--brand-500); outline-offset: 3px; border-radius: 4px; }
.u-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

[class*="u-text-"] { display: block; letter-spacing: -.01em; line-height: 1.2; --tt: var(--trim-120-top); --tb: var(--trim-120-bottom); }
[class*="u-text-"]::before, [class*="u-text-"]::after { content: ""; display: block; height: 0; }
[class*="u-text-"]::before { margin-bottom: calc(var(--tt) * -1em); }
[class*="u-text-"]::after { margin-top: calc(var(--tb) * -1em); }

.u-text-heading-xlarge { font-size: 48px; font-weight: 500; }
.u-text-heading-large { font-size: 40px; font-weight: 500; }
.u-text-heading-medium { font-size: 32px; font-weight: 500; }
.u-text-heading-small { font-size: 24px; font-weight: 500; }
.u-text-large { font-size: 18px; font-weight: 400; }
.u-text-medium { font-size: 16px; font-weight: 400; }
.u-text-small { font-size: 14px; font-weight: 400; letter-spacing: 0; line-height: 1.5; --tt: var(--trim-150-top); --tb: var(--trim-150-bottom); }
.u-text-xsmall { font-size: 12px; font-weight: 400; letter-spacing: 0; line-height: 1.5; --tt: var(--trim-150-top); --tb: var(--trim-150-bottom); }
.is-line-height-130 { line-height: 1.3; --tt: var(--trim-130-top); --tb: var(--trim-130-bottom); }
.is-line-height-140 { line-height: 1.4; --tt: var(--trim-140-top); --tb: var(--trim-140-bottom); }
.is-weight-medium { font-weight: 500; }
.is-weight-semibold { font-weight: 600; }
.is-weight-bold { font-weight: 700; }
.is-text-color-2 { color: var(--_theme---text-2); }
.is-text-color-3 { color: var(--_theme---text-3); }
.is-color-brand { color: var(--_theme---brand-text); }
.is-alignment-center { text-align: center; }
.u-text-heading-xlarge, .u-text-heading-large, .u-text-heading-medium, .u-text-heading-small { text-wrap: pretty; }
span.is-text-color-2, span.is-text-color-3 { display: inline; }
b, strong { font-weight: 700; }
.u-br-desktop { display: inline; }
.u-only-mobile { display: none; } /* copy that differs per breakpoint: .u-only-desktop / .u-only-mobile */

.section-wrapper { padding-left: var(--site--margin); padding-right: var(--site--margin); }
.u-container { width: 100%; max-width: var(--container--max); margin-left: auto; margin-right: auto; }
.u-vflex-stretch-top { display: flex; flex-direction: column; align-items: stretch; }
.u-grid-desktop { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--grid--gutter); row-gap: var(--grid--gutter); }
.u-column-2 { grid-column-end: span 2; } .u-column-3 { grid-column-end: span 3; } .u-column-4 { grid-column-end: span 4; }
.u-column-5 { grid-column-end: span 5; } .u-column-6 { grid-column-end: span 6; } .u-column-7 { grid-column-end: span 7; }
.u-column-8 { grid-column-end: span 8; } .u-column-12 { grid-column-end: span 12; }
.u-col-start-2 { grid-column-start: 2; } .u-col-start-3 { grid-column-start: 3; } .u-col-start-4 { grid-column-start: 4; }
.u-col-start-6 { grid-column-start: 6; } .u-col-start-7 { grid-column-start: 7; } .u-col-start-8 { grid-column-start: 8; }
.u-col-start-9 { grid-column-start: 9; } .u-col-start-11 { grid-column-start: 11; }
.txt-wrapper { display: flex; flex-direction: column; align-items: center; gap: 32px; }

.button-primary, .button-secondary {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 14px 32px; border-radius: var(--radius--main);
  background: var(--_theme---button-primary--background); color: var(--_theme---button-primary--text);
  transition: opacity .2s ease, background-color .2s ease;
  white-space: nowrap;
}
.button-primary:hover { opacity: .85; }
.button-primary.is-blue { background: var(--_colors---hd--brand-500); color: #fff; }
.button-secondary { background: transparent; color: var(--_theme---button-secondary--text); box-shadow: inset 0 0 0 1px var(--_theme---button-secondary--border); padding: 15px 32px; }
.button-secondary:hover { background: var(--_theme---button-secondary--border); }
.button-txt { white-space: nowrap; }

.icon { width: 24px; height: 24px; flex: none; display: block; }
.icon path { stroke: currentColor; }

.site-header { position: relative; z-index: 20; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; max-width: calc(var(--container--max) + 2 * var(--site--margin)); margin: 0 auto; padding: 0 var(--site--margin); height: 80px; } /* Figma: 80, the 41 px logo overhangs its 40 px row */
.nav_logo { display: block; width: 217px; height: 41px; color: var(--_theme---text); }
.nav_logo svg { width: 100%; height: 100%; display: block; }
.nav_links_wrapper { display: flex; align-items: center; justify-content: center; gap: 64px; }
.nav_link { color: var(--_theme---text-2); transition: color .2s ease; }
.nav_link:hover { color: var(--_theme---text); }
.nav_cta { display: flex; justify-content: flex-end; align-items: center; gap: 13px; }
/* Header CTA: full-strength text colour (black on the white header, white over the dark hero) with the mobile-menu row arrow (2026-10-01) */
.nav_cta-link { display: inline-flex; align-items: center; gap: 6px; color: var(--_theme---text); }
.nav_cta-arrow { display: block; flex: none; width: 20px; height: 20px; transition: transform .2s ease; }
.nav_cta-link:hover .nav_cta-arrow { transform: translateX(2px); }
.nav_menu-button { display: none; width: 24px; height: 24px; color: var(--_theme---text); }
.nav_menu-button .icon-close { display: none; }

/* Mega menu (desktop "Info"). Ready: Frame 406 to 410 and the header with the Info pill */
/* Info: the pill is drawn behind the text so opening never shifts the nav (Ready's pill is 8 / 16 around the text) */
.nav_info { position: relative; isolation: isolate; transition: color .2s ease; } /* text sits in a trimmed span; ::before here is free for the pill */
.nav_info::before {
  content: ""; position: absolute; inset: -8px -16px; z-index: -1; border-radius: var(--radius--round);
  background: var(--_colors---hd--l-bg-3); opacity: 0; transition: opacity .2s ease;
}
.u-theme-dark .nav_info::before { background: var(--_colors---hd--l-bg-2); } /* white on the dark hero, light grey on light headers */
.site-header.is-mega-open .nav_info { color: var(--_colors---hd--dk-text-100); }
.site-header.is-mega-open .nav_info::before { opacity: 1; }

/* Panel: 1055 x 341, centred, 12 below the Info pill (Oliver 2026-09-30; Ready had it 11 below the header); fades in and slides down 12 */
.mega-menu {
  --pill-bottom: calc(var(--header-h) / 2 + 14.3px); /* measured: Info text ends at 46.3 in the 80 high header, the pill 8 below it */
  position: absolute; top: calc(var(--pill-bottom) + 12px); left: 50%; width: 1055px; height: 341px; z-index: 1;
  display: grid; grid-template-columns: 272px 759px; padding: 12px;
  border-radius: 16px; background: var(--_colors---hd--l-bg-2); color: var(--_theme---text);
  box-shadow: 0 6px 28px rgba(0, 0, 0, .25), 0 2px 24px rgba(0, 0, 0, .05);
  opacity: 0; visibility: hidden; transform: translate(-50%, -12px); pointer-events: none;
  transition: opacity .2s ease, transform .2s ease, visibility 0s linear .2s;
}
.mega-menu::before { content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: 12px; } /* hover bridge over the gap */
@media (min-width: 992px) and (max-width: 1119px) { .mega-menu { zoom: .92; } } /* the 1055 panel still fits narrow desktop windows */
.site-header.is-mega-open .mega-menu {
  opacity: 1; visibility: visible; transform: translate(-50%, 0); pointer-events: auto;
  transition: opacity .3s ease, transform .3s cubic-bezier(.2, .7, .2, 1), visibility 0s;
}
.mega-tabs { display: flex; flex-direction: column; align-items: flex-start; gap: 29.5px; padding: 52px 0 0 20px; } /* rows 49 apart as in Ready */
.mega-tab { padding-bottom: 1px; border-bottom: 1px solid transparent; color: inherit; text-align: left; transition: border-color .2s ease; }
.mega-tab.is-active { border-bottom-color: currentColor; }
.mega-panels { position: relative; }
.mega-panel {
  position: absolute; inset: 0; display: flex; gap: 12px;
  opacity: 0; visibility: hidden; transition: opacity .2s ease, visibility 0s linear .2s;
}
.mega-panel.is-active { opacity: 1; visibility: inherit; transition: opacity .2s ease, visibility 0s; } /* inherit: stays hidden while the menu is closed */
.mega-col { display: flex; flex-direction: column; gap: 12px; }

/* Cards: image + Ready's gradient per card, white text */
.mega-card {
  position: relative; display: flex; flex-direction: column; justify-content: center; flex: none;
  width: 245px; height: 317px; padding: 0 20px; border-radius: var(--radius--main); overflow: hidden; color: #fff;
  background: var(--shade), #150f0f;
}
/* The photo goes on once site.js marks the panel (first pointer or focus in the header), so a closed menu downloads nothing. */
.mega-menu.has-images .mega-card { background: var(--shade), var(--img) center / cover no-repeat, #150f0f; }
.mega-card-txt { display: flex; flex-direction: column; gap: 12px; }
.mega-card-body { font-size: 14px; color: rgba(255, 255, 255, .7); }
.mega-card-body b { font-weight: 700; }
.mega-card-more {
  position: absolute; right: 16px; bottom: 16px; font-size: 14px;
  opacity: 0; transform: translateY(4px); transition: opacity .2s ease, transform .2s ease;
}
a.mega-card:hover .mega-card-more, a.mega-card:focus-visible .mega-card-more { opacity: 1; transform: none; }
.mega-card.is-type-1 { --img: url("../images/home/mega-type-1.webp"); --shade: linear-gradient(to bottom, rgba(0,0,0,.8) 0%, rgba(0,0,0,0) 32%, rgba(0,0,0,.8) 70%); }
.mega-card.is-type-2 { --img: url("../images/home/mega-type-2.webp"); --shade: linear-gradient(to bottom, rgba(0,0,0,.8) 0%, rgba(0,0,0,0) 29%, rgba(0,0,0,.8) 100%); }
.mega-card.is-type-3 { --img: url("../images/home/mega-type-3.webp"); --shade: linear-gradient(to bottom, rgba(0,0,0,.8) 0%, rgba(0,0,0,0) 29%, rgba(0,0,0,.8) 59%); }
.mega-panel.is-selskabstyper .mega-card-body { color: rgba(255, 255, 255, .75); }
.mega-card.is-wide { width: 759px; justify-content: flex-end; padding: 32px; --shade: linear-gradient(to bottom, rgba(0,0,0,0) 53%, rgba(0,0,0,.8) 100%); }
.mega-card.is-wide .mega-card-txt { max-width: 233px; gap: 16px; }
.mega-card.is-partnere { --img: url("../images/home/mega-partnere.webp"); }
/* Ready sets the card texts in Switzer; in Mona Sans these boxes need a little more room to keep his line breaks */
.mega-card.is-partnere .mega-card-txt { max-width: 244px; }
.mega-card.is-partnere .mega-card-body { max-width: 233px; }
.mega-card.is-kontakt { --img: url("../images/home/mega-kontakt.webp"); }
.mega-contact { position: absolute; right: 32px; bottom: 32px; display: flex; flex-direction: column; align-items: flex-end; gap: 16px; font-size: 14px; color: rgba(255, 255, 255, .7); }
.mega-contact b { font-weight: 700; }
.mega-contact a:hover { color: #fff; }
.mega-card.is-small { height: 152.5px; justify-content: flex-end; padding-bottom: 20px; }
/* Small cards: on hover the text moves up first and Læs mere comes in after it, so the two never overlap (Oliver, 2026-10-06) */
.mega-card.is-small .mega-card-txt { transition: transform .25s cubic-bezier(.2,.7,.2,1); }
a.mega-card.is-small:hover .mega-card-txt, a.mega-card.is-small:focus-visible .mega-card-txt { transform: translateY(-28px); }
a.mega-card.is-small:hover .mega-card-more, a.mega-card.is-small:focus-visible .mega-card-more { transition-delay: .08s; }
/* The photo is each guide's featured image, set on the card by .dev/guides.py */
.mega-card.is-guide { --shade: linear-gradient(to bottom, rgba(0,0,0,0) 53%, rgba(0,0,0,.8) 100%); }
.mega-card.is-vidensbank { --img: url("../images/home/mega-vidensbank.webp"); --shade: linear-gradient(to bottom, rgba(0,0,0,.522) 0%, rgba(0,0,0,0) 27%, rgba(0,0,0,.6) 85%); }
.mega-card.is-faq-foer, .mega-card.is-faq-efter { width: 373.5px; padding: 0 32px; --shade: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,.81) 100%); }
.mega-card.is-faq-foer .mega-card-txt, .mega-card.is-faq-efter .mega-card-txt { gap: 16px; }
.mega-card.is-faq-foer { --img: url("../images/home/mega-faq-foer.webp"); }
.mega-card.is-faq-foer .mega-card-txt { max-width: 259px; }
.mega-card.is-faq-efter { --img: url("../images/home/mega-faq-efter.webp"); }
.mega-card.is-faq-efter .mega-card-txt { max-width: 262px; } /* with the break after "vedrørende", as in Ready */

/* Sticky header (2026-09-30)
   Always fixed; shrinks once scrolling starts (.is-scrolled: desktop 80 -> 64, mobile 64.8 -> 52, both x 0.8);
   once the hero has scrolled past (.is-solid) a full-width white background with a 1 px line in the sand
   background colour fades in, and the text switches to the light theme's colours. site.js sets both classes. */
html { scroll-padding-top: 64px; } /* in-page anchors land below the fixed header */
.site-header {
  --header-h: 80px;
  position: fixed; top: 0; left: 0; right: 0; height: var(--header-h);
  transition: height .3s ease;
}
.site-header::before {
  content: ""; position: absolute; top: 0; bottom: 0; left: calc(50% - 50vw); right: calc(50% - 50vw); z-index: -1;
  background: var(--_colors---hd--l-bg-2); box-shadow: inset 0 -1px 0 var(--_colors---hd--l-bg); /* divider in the sand colour */
  opacity: 0; transition: opacity .3s ease;
}
.site-header.is-scrolled { --header-h: 64px; }
.site-header.is-solid::before { opacity: 1; }
.site-header.is-solid { --_theme---text: var(--_colors---hd--dk-text-100); --_theme---text-2: var(--_colors---hd--dk-text-70); }
.site-header.is-solid .nav_info::before { background: var(--_colors---hd--l-bg-3); }
.nav_logo, .nav_link, .nav_menu-button { transition: color .3s ease; }
.section-hero { padding-top: var(--header-top, 80px); } /* the header left the flow; the hero keeps its height and its content stays where it was */

.section-hero {
  /* auto height, at least 95vh and never past 55rem (Oliver, 2026-10-01). The min is capped at 55rem
     too, since a CSS min-height beats max-height and 95vh alone would pass 55rem on tall screens. */
  position: relative; height: auto; min-height: min(95vh, 55rem); max-height: 55rem;
  background: linear-gradient(to bottom, rgba(0,0,0,.58) 0%, rgba(0,0,0,0) 50%, rgba(0,0,0,.58) 100%), url("../images/home/hero-bg.webp") center / cover no-repeat, var(--_colors---hd--dk-bg);
}
.section-hero .section-wrapper { padding-top: 186px; padding-bottom: 0; }
@media (min-width: 992px) {
  /* homepage hero: content centred in the section's full height (Oliver, 2026-10-01). The section's top
     padding keeps the fixed header clear; the same at the bottom balances it */
  .section-hero.u-theme-dark { display: flex; flex-direction: column; justify-content: center; padding-bottom: var(--header-top, 80px); }
  .section-hero.u-theme-dark .section-wrapper { padding-top: 0; }
}
.hero-content { grid-column: 3 / span 8; display: flex; flex-direction: column; align-items: center; gap: 32px; }
.hero-content .u-text-heading-xlarge { max-width: 710px; }
.hero-content .u-text-medium { max-width: 544px; }
.hero-form { display: flex; justify-content: center; align-items: center; gap: 16px; padding-top: 8px; }
.hero-input {
  width: 295px; height: 42px; padding: 14px 32px 14px 14px; border-radius: var(--radius--main);
  background: var(--_theme---background-3); border: 1px solid var(--_colors---hd--l-faded);
  color: var(--_theme---text); font: 400 16px/1 "Mona Sans", system-ui, sans-serif; letter-spacing: -.01em;
}
.hero-input::placeholder { color: var(--_theme---text-2); }
.hero-input:focus { outline: none; border-color: var(--_colors---hd--l-text-70); }

.section-process { background: var(--_colors---hd--l-bg-2); }
.section-process .section-wrapper { padding-top: 100px; padding-bottom: 129px; }
.section-process .u-container { gap: 100px; }
.head-center { grid-column: 4 / span 6; }
.steps-list { position: relative; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-template-rows: repeat(5, 519px); column-gap: var(--grid--gutter); row-gap: 97px; }
.step-row { display: contents; }
/* rows are children 2–6 of .steps-list (after the line) */
.step-row:nth-child(2) > * { grid-row: 1; } .step-row:nth-child(3) > * { grid-row: 2; } .step-row:nth-child(4) > * { grid-row: 3; }
.step-row:nth-child(5) > * { grid-row: 4; } .step-row:nth-child(6) > * { grid-row: 5; }
.step-img { grid-column: 8 / span 5; height: 519px; border-radius: var(--radius--main); overflow: hidden; }
.step-img img { width: 100%; height: 100%; object-fit: cover; }
.step-text { grid-column: 2 / span 4; align-self: center; display: flex; flex-direction: column; align-items: flex-start; gap: 40px; }
.step-text .u-text-heading-medium { max-width: 408px; }
.step-text .u-text-medium { max-width: 408px; }
.step-row:nth-child(5) .step-text .u-text-heading-medium, .step-row:nth-child(5) .step-text .u-text-medium { max-width: 419px; }
.steps-line { position: absolute; left: 46px; top: 222px; width: 2px; height: 2476px; background: var(--_theme---border); pointer-events: none; }
.steps-line-progress { width: 100%; height: 100%; transform: scaleY(var(--progress, .5)); transform-origin: top; background: var(--_colors---hd--brand-500); transition: transform .6s cubic-bezier(.2,.7,.2,1); } /* trails the scroll a little so the fill reads as moving (Oliver, 2026-10-06) */
@media (prefers-reduced-motion: reduce) { .steps-line-progress { transition: none; } }
/* Desktop: all five images share one sticky slot in the image column. The image stops when its centre
   reaches the viewport centre, the texts scroll past, and site.js crossfades to the step whose text
   centre has crossed the viewport centre. */
@media (min-width: 992px) {
  .steps-list .step-row > .step-img { grid-row: 1 / 6; align-self: start; position: sticky; top: calc(50vh - 259.5px); opacity: 0; }
  .steps-list .step-row:nth-child(2) > .step-img { opacity: 1; }
  .steps-list .step-row > .step-img.is-prev { opacity: 1; z-index: 1; }
  .steps-list .step-row > .step-img.is-active { opacity: 1; z-index: 2; }
}

/* Prices under the hero (`price-card`): the wizard's Velkommen cards on 10 of the 12 columns, spacing measured
   from the app. Hover (Oliver, 2026-10-07, after Shopify's admin cards; the wizard keeps its own): the card lifts
   on a deep soft shadow, then the arrow fills. The accent stroke stays for keyboard focus only. */
.section-prices { background: var(--_colors---hd--l-bg-2); container-type: inline-size; }
.section-prices .section-wrapper { padding-top: 100px; padding-bottom: 0; }
.price-cards { grid-column: 2 / span 10; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.price-note { grid-column: 2 / span 10; justify-self: center; max-width: 32rem; text-align: center; }
.price-card {
  position: relative; display: flex; flex-direction: column; overflow: hidden;
  border: 1px solid var(--_theme---border); border-radius: var(--radius--main); background: var(--_colors---hd--l-bg-2);
  transition: box-shadow .2s cubic-bezier(.25, .46, .45, .94), transform .3s cubic-bezier(.25, .46, .45, .94);
}
.price-card::after {
  content: ""; position: absolute; inset: -1px; z-index: 1; pointer-events: none; border-radius: inherit;
  box-shadow: inset 0 0 0 1.5px var(--_colors---hd--brand-500); opacity: 0; transition: opacity .2s ease;
}
.price-card-visual { display: block; height: 226px; background: var(--_colors---hd--price-card-visual); overflow: hidden; }
.price-card-visual img { width: 100%; height: 100%; object-fit: cover; }
.price-card-body { flex: 1; display: flex; flex-direction: column; gap: 14px; padding: 17px 16px 14px; }
.price-card-description { text-wrap: balance; }
.price-card-price-row { display: flex; align-items: center; gap: 8px; margin-top: auto; padding-top: 11px; }
.price-card-price { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.price-card-arrow {
  display: flex; align-items: center; justify-content: center; flex: none; width: 28px; height: 28px;
  border-radius: var(--radius--round); background: var(--_colors---hd--l-bg); color: var(--_colors---hd--dk-text-70);
  transition: background-color .2s ease, color .2s ease;
}
.price-card-arrow .icon { width: 16px; height: 16px; }
.price-card:focus-visible { outline: none; box-shadow: 0 25px 20px -8px rgba(27, 27, 25, .24), 0 4px 10px -2px rgba(27, 27, 25, .06); transform: translateY(-5px); }
.price-card:focus-visible::after { opacity: 1; }
.price-card:focus-visible .price-card-arrow { background: var(--_colors---hd--brand-500); color: #fff; }
@media (hover: hover) {
  .price-card:hover { box-shadow: 0 25px 20px -8px rgba(27, 27, 25, .24), 0 4px 10px -2px rgba(27, 27, 25, .06); transform: translateY(-5px); }
  .price-card:hover .price-card-arrow { background: var(--_colors---hd--brand-500); color: #fff; transition-delay: .06s; }
}

.section-included { background: var(--_colors---hd--l-bg); }
.section-included .section-wrapper { padding-top: 100px; padding-bottom: 126px; }
.section-included .u-container { gap: 80px; container-type: inline-size; }
.included-grid { row-gap: 16px; }
/* Above 1440 the cards keep the 1440 proportions (567 at 1376 of content), so the cover images scale evenly. */
.included-card { position: relative; height: max(567px, calc(567 / 1376 * 100cqw)); border-radius: var(--radius--main); background: var(--_colors---hd--l-bg-2); overflow: hidden; padding: 40px; display: flex; flex-direction: column; }
.included-card.is-card-1 { grid-column: 1 / span 7; }
.included-card.is-card-2 { grid-column: 8 / span 5; }
.included-card.is-card-3 { grid-column: 1 / span 5; }
.included-card.is-card-4 { grid-column: 6 / span 7; justify-content: flex-end; }
.included-card-img { position: absolute; inset: 0; margin: 0; }
.included-card-img img { width: 100%; height: 100%; object-fit: cover; object-position: center bottom; }
.included-card.is-card-4 .included-card-img { inset: max(15px, calc(15 / 1376 * 100cqw)) auto auto max(86px, calc(86 / 1376 * 100cqw)); width: max(792px, calc(792 / 1376 * 100cqw)); height: max(418px, calc(418 / 1376 * 100cqw)); }
.included-card-txt { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 24px; }
.included-card.is-card-1 .included-card-title { max-width: 436px; } .included-card.is-card-1 .included-card-body { max-width: 343px; }
.included-card.is-card-2 .included-card-title { max-width: 419px; } .included-card.is-card-2 .included-card-body { max-width: 393px; }
.included-card.is-card-3 .included-card-title { max-width: 408px; } .included-card.is-card-3 .included-card-body { max-width: 268px; }
.included-card.is-card-4 .included-card-title { max-width: 408px; } .included-card.is-card-4 .included-card-body { max-width: 408px; }

.section-company-types { background: var(--_colors---hd--dk-bg); }
.section-company-types .section-wrapper { padding-top: 128px; padding-bottom: 128px; }
.section-company-types .u-container { gap: 80px; }
.section-company-types .txt-wrapper { gap: 40px; }
.company-types-body { display: flex; flex-direction: column; align-items: center; gap: 64px; }
.company-types-row { display: flex; gap: 16px; width: 100%; }
.company-type-card {
  position: relative; flex: 1 1 0; min-width: 0; height: 600px; border-radius: var(--radius--main); overflow: hidden;
  padding: 34px 24px 80px; display: flex; flex-direction: column; justify-content: space-between;
  isolation: isolate; background: var(--_colors---hd--dk-bg);
  --ease-card: cubic-bezier(.2,.7,.2,1);
  --grow-delay: .15s;  /* same delay in and out, so moving straight to the next card swaps widths without the third card jumping */
  --lift-at: .4s;      /* the text starts lifting as the card finishes widening (it is at 98 % by then) */
  transition: flex-grow .45s var(--ease-card) var(--grow-delay);
  cursor: pointer; text-align: left;
}
/* The photo is an <img> so it loads lazily and in a phone size (srcset); the shade sits between it and the text. */
.company-type-img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.company-type-card::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(to bottom, rgba(0,0,0,.6) 0%, rgba(0,0,0,0) 50%, rgba(6,10,18,.98) 100%); }
/* Leaving (base state): the graphic and link fold away first, then the text box and the card return. */
.company-type-txt { display: flex; flex-direction: column; width: 100%; max-width: var(--txt-w, 400px); transition: max-width 0s .2s; }
/* Ready's text box per card in the resting state (Oliver's copy, 2026-09-30): Drift 353, Holding 384, Struktur 400 */
.company-type-card:nth-child(1) { --txt-w: 353px; }
.company-type-card:nth-child(2) { --txt-w: 384px; }
.company-type-copy { display: flex; flex-direction: column; gap: 16px; transition: gap .2s ease; }
.company-type-title, .company-type-body { text-wrap: pretty; }
.company-type-link-wrap { display: grid; grid-template-rows: 0fr; opacity: 0; margin-top: 0; transition: grid-template-rows .25s ease, margin-top .25s ease, opacity .15s ease; }
.company-type-link-wrap > * { overflow: hidden; }
.company-type-link { display: inline-block; }
.company-type-link:hover { text-decoration: underline; }
.company-type-graphic { position: absolute; right: 24px; bottom: 83px; opacity: 0; transform: translateY(8px); transition: opacity .2s ease, transform .2s ease; pointer-events: none; }
.company-type-graphic img { width: auto; }
/* Entering: the card widens and the link lifts the text, then the graphic. The text box keeps its resting width, so the copy
   only wraps where it has to (Oliver, 2026-09-30); text-wrap: pretty keeps a last word from standing alone. */
.company-type-card.is-active { flex-grow: 1.5088; }
.company-type-card.is-active .company-type-txt { max-width: var(--txt-w, 400px); transition: max-width 0s var(--lift-at); }
.company-type-card.is-active .company-type-copy { gap: 20px; transition: gap .4s var(--ease-card) var(--lift-at); }
.company-type-card.is-active .company-type-link-wrap { grid-template-rows: 1fr; opacity: 1; margin-top: 32px; transition: grid-template-rows .4s var(--ease-card) var(--lift-at), margin-top .4s var(--ease-card) var(--lift-at), opacity .3s ease calc(var(--lift-at) + .1s); }
.company-type-card.is-active .company-type-graphic { opacity: 1; transform: none; transition: opacity .35s ease calc(var(--lift-at) + .15s), transform .35s var(--ease-card) calc(var(--lift-at) + .15s); }
@media (hover: hover) and (pointer: fine) and (min-width: 992px) {
  .company-type-card:hover { flex-grow: 1.5088; }
  .company-type-card:hover .company-type-txt { max-width: var(--txt-w, 400px); transition: max-width 0s var(--lift-at); }
  .company-type-card:hover .company-type-copy { gap: 20px; transition: gap .4s var(--ease-card) var(--lift-at); }
  .company-type-card:hover .company-type-link-wrap { grid-template-rows: 1fr; opacity: 1; margin-top: 32px; transition: grid-template-rows .4s var(--ease-card) var(--lift-at), margin-top .4s var(--ease-card) var(--lift-at), opacity .3s ease calc(var(--lift-at) + .1s); }
  .company-type-card:hover .company-type-graphic { opacity: 1; transform: none; transition: opacity .35s ease calc(var(--lift-at) + .15s), transform .35s var(--ease-card) calc(var(--lift-at) + .15s); }
}

.section-faq { background: var(--_colors---hd--dk-bg); }
.section-faq .section-wrapper { padding-top: 0; padding-bottom: 128px; }
.section-faq .u-container { gap: 64px; }
.faq-head { grid-column: 3 / span 8; }
.faq-list { grid-column: 3 / span 8; display: flex; flex-direction: column; gap: 16px; }
.faq-item { border-radius: var(--radius--main); background: var(--_theme---background-3); transition: background-color .25s ease; }
.faq-item[open]:not(.is-closing) { background: var(--_theme---background-2); }
@media (hover: hover) { .faq-item:hover { background: var(--_theme---background-2); } }
/* Articles sit on white, so their open and hover state takes the lightest warm tone (Oliver, 2026-10-07) */
.article-faq .faq-item[open]:not(.is-closing) { background: var(--_colors---hd--l-bg); }
@media (hover: hover) { .article-faq .faq-item:hover { background: var(--_colors---hd--l-bg); } }
.faq-q { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 24px; }
.faq-chev { transition: transform .4s cubic-bezier(.2,.7,.2,1); }
.faq-item[open]:not(.is-closing) .faq-chev { transform: rotate(180deg); }
.faq-a { padding: 0 24px 24px; }
.faq-a .u-text-medium { max-width: 674px; }
/* A long answer is split into paragraphs, one empty line apart like the articles (Oliver, 2026-10-12). */
.faq-a p + p { margin-top: calc(2.8em - .729em); }

.section-partners { background: var(--_colors---hd--l-bg); container-type: inline-size; }
.section-partners .section-wrapper { padding-top: 128px; padding-bottom: 128px; }
.section-partners .u-container { gap: 64px; }
.section-partners .txt-wrapper { gap: 40px; }
.partner-carousel-wrap { display: flex; flex-direction: column; gap: 24px; }
.partner-carousel-nav { display: flex; justify-content: flex-end; }
.carousel-arrows { display: flex; gap: 32px; }
.carousel-arrow { width: 48px; height: 48px; color: var(--_colors---hd--carousel-arrow); transition: opacity .2s ease; }
.carousel-arrow svg { display: block; width: 48px; height: 48px; }
.carousel-arrow[disabled] { opacity: .35; cursor: default; }
/* The track runs to both edges of the viewport (100cqw = the section's width, scrollbar excluded).
   --bleed is the space between the container edge and the viewport edge, so the first card starts on
   the content edge and cards scroll out to the screen edge on either side. */
.partner-carousel, .team-carousel {
  --bleed: max(var(--site--margin), (100cqw - var(--container--max)) / 2);
  display: flex; gap: 16px; overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; scrollbar-width: none;
  margin-left: calc(var(--bleed) * -1); margin-right: calc(var(--bleed) * -1);
  padding-left: var(--bleed); padding-right: var(--bleed); scroll-padding-left: var(--bleed); scroll-padding-right: var(--bleed);
  padding-bottom: 8px; margin-bottom: -8px; /* room for descenders below the last line, which overflow-y would otherwise clip */
}
.partner-carousel::-webkit-scrollbar, .team-carousel::-webkit-scrollbar { display: none; }
.partner-card { flex: 0 0 333px; scroll-snap-align: start; display: flex; flex-direction: column; gap: 24px; }
.partner-card-img { width: 100%; aspect-ratio: 333 / 438; border-radius: var(--radius--small); overflow: hidden; }
.partner-card-img img { width: 100%; height: 100%; object-fit: cover; }
.partner-card-link { display: inline-block; }
.partner-card-link:hover { text-decoration: underline; }

.section-cta { background: var(--_colors---hd--l-bg); }
.section-cta .section-wrapper { padding-top: 0; padding-bottom: 103px; }
.cta-card { height: 520px; border-radius: var(--radius--main); background: var(--_colors---hd--l-bg-2); padding: 40px; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 40px; }
.cta-card .cta-body { max-width: 313px; }

.site-footer {
  background: linear-gradient(rgba(0,0,0,.39), rgba(0,0,0,.39)), url("../images/home/hero-bg.webp") center / cover no-repeat, var(--_colors---hd--dk-bg);
  padding: 100px var(--site--margin) 32px;
  overflow: hidden; /* the wordmark's trimmed line box would otherwise add scroll height below the page */
}
.site-footer .u-container { gap: 253px; }
.site-footer-brand { grid-column: 1 / span 4; display: flex; flex-direction: column; align-items: flex-start; gap: 32px; }
.site-footer-brand .u-text-heading-large { max-width: 422px; }
.site-footer-col { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
.site-footer-col.is-info { grid-column: 7 / span 2; } .site-footer-col.is-os { grid-column: 9 / span 2; } .site-footer-col.is-legal { grid-column: 11 / span 2; }
.site-footer-links, .site-footer-col-stack { display: contents; }
.site-footer-link { transition: color .2s ease; }
.site-footer-link:hover { color: var(--_theme---text-2); }
.site-footer-bottom { display: flex; flex-direction: column; gap: 17px; container-type: inline-size; }
.site-footer-meta { display: grid; grid-template-columns: 1fr 1fr; /* social links out for now (Oliver, 2026-10-01): © left, CVR right */ padding-bottom: 16px; border-bottom: 1px solid var(--_theme---border); } /* divider above the wordmark (desktop only) */
.site-footer-meta-row { display: contents; }
.site-footer-meta .is-center { text-align: center; }
.site-footer-meta .is-right { text-align: right; }
.site-footer-meta a:hover { color: var(--_theme---text); }
.footer-wordmark { font-size: calc(100cqw / 9.125); /* spans the container edge to edge at every width (9.125 = text width / size in Mona Sans Bold) */ font-weight: 700; line-height: 1.5; letter-spacing: -.01em; white-space: nowrap; color: var(--_colors---hd--l-faded); --tt: var(--trim-150-top); --tb: var(--trim-150-bottom); text-align: left; }
.footer-wordmark::before, .footer-wordmark::after { content: ""; display: block; height: 0; }
.footer-wordmark::before { margin-bottom: calc(var(--tt) * -1em); }
.footer-wordmark::after { margin-top: calc(var(--tb) * -1em); }
.footer-wordmark .is-dot { color: var(--_colors---hd--brand-500); }

/* Om os (/om-os). Values from `/om-os · 1440`; image cards keep their 1440
   proportions above 1440 (height = max(Figma, Figma / 1376 × container)). */
/* Hero: light, content 106 under the header and 146 under the button */
.page-about .section-hero { height: auto; min-height: 0; max-height: none; background: var(--_theme---background-2); }
.page-about .section-hero .section-wrapper { padding-top: 106px; padding-bottom: 146px; }
.page-about .hero-content { gap: 40px; }
.page-about .hero-content .u-text-heading-xlarge { max-width: 872px; }
.page-about .hero-content .hero-sub { max-width: 379px; } /* Figma 378; the browser's Mona Sans is 0.2 px wider on the second line, so 379 keeps his two lines */

/* Video (image placeholder until the film is in) */
.section-video { background: var(--_theme---background-2); }
.section-video .u-container { container-type: inline-size; }
.video-block {
  grid-column: 1 / span 12; position: relative; display: flex; align-items: center; justify-content: center;
  height: max(646px, calc(646 / 1376 * 100cqw)); border-radius: var(--radius--main); overflow: hidden; background: var(--_colors---hd--dk-bg);
}
.video-block picture, .video-block img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.video-block::after { content: ""; position: absolute; inset: 0; background: rgba(8, 7, 30, .66); }
.video-block .button-secondary { position: relative; z-index: 1; }

/* Team: white to background gradient; heading block, arrows, then the carousel */
.section-team { background: linear-gradient(to bottom, var(--_colors---hd--l-bg-2) 0%, var(--_colors---hd--l-bg) 100%); container-type: inline-size; }
.section-team .section-wrapper { padding-top: 128px; padding-bottom: 128px; }
.section-team .u-container { gap: 0; }
.team-carousel-head .txt-wrapper { grid-column: 1 / span 5; align-items: flex-start; gap: 24px; }
.team-carousel-head .u-text-heading-large { max-width: 546px; }
.team-carousel-head .u-text-large { max-width: 394px; }
.team-carousel-nav { display: flex; justify-content: flex-end; }
.team-carousel { margin-top: 16px; }
.team-card {
  /* four columns of the 12-column grid, measured from the container */
  flex: 0 0 calc((min(var(--container--max), 100cqw - 2 * var(--site--margin)) - 2 * var(--grid--gutter)) / 3);
  scroll-snap-align: start; display: flex; flex-direction: column; gap: 19px;
}
.team-card-img { aspect-ratio: 448 / 509; border-radius: var(--radius--small); overflow: hidden; margin: 0; }
.team-card-img img { width: 100%; height: 100%; object-fit: cover; }
.team-card-name { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
.team-card-bio { max-width: 380px; }

/* Team card: the plus square (Ready's hover state) opens the person's modal; the whole card is clickable */
.team-card { cursor: pointer; }
.team-card-img { position: relative; }
.icon-button {
  display: flex; align-items: center; justify-content: center; flex: none; width: 48px; height: 48px;
  border-radius: 10px; background: var(--_colors---hd--l-bg-3); color: var(--_colors---hd--dk-text-100);
  transition: opacity .2s ease, transform .2s ease;
}
.icon-button svg { display: block; width: 30px; height: 30px; }
.icon-button:active { transform: scale(.94); }
.team-card-plus { position: absolute; right: 20px; bottom: 20px; }
@media (hover: hover) and (pointer: fine) and (min-width: 992px) {
  /* desktop: the plus shows on hover; touch screens and mobile always show it */
  .team-card-plus { opacity: 0; transform: scale(.9); }
  .team-card:hover .team-card-plus, .team-card-plus:focus-visible { opacity: 1; transform: none; }
  .team-card:hover .team-card-plus:active { transform: scale(.94); }
}

/* Legal pages (new design: /hvidvaskloven, /handelsbetingelser, /privatlivspolitik): light hero with
   the title, then one reading column, columns 4 to 9 */
.page-legal .section-hero { height: auto; min-height: 0; max-height: none; background: var(--_theme---background-2); }
.page-legal .section-hero .section-wrapper { padding-top: 106px; padding-bottom: 106px; }
.page-legal .hero-content { gap: 24px; }
.section-legal .section-wrapper { padding-top: 102px; padding-bottom: 128px; }
.legal-body { grid-column: 4 / span 6; display: flex; flex-direction: column; gap: 48px; }
.legal-part { display: flex; flex-direction: column; gap: 16px; }
.legal-body p { text-wrap: pretty; }
.legal-link { color: var(--_theme---brand-text); text-decoration: underline; text-underline-offset: 2px; transition: opacity .2s ease; }
.legal-link:hover { opacity: .75; }
.legal-list { padding-left: 20px; list-style: disc; } /* block, so the items keep their markers */
.legal-list li { display: list-item; text-wrap: pretty; }
.legal-list li + li { margin-top: 8px; }
.legal-list li::marker { color: var(--_theme---text-3); }
.legal-body strong { font-weight: 500; color: var(--_theme---text); }
.legal-updated { margin-top: -16px; } /* sits closer to the last section than the sections to each other */

/* Team modal (`team-modal`, Breakpoint=Desktop): photo left, name, three points and the bio right */
html.is-modal-open, html.is-modal-open body { overflow: hidden; }
.team-modal {
  position: fixed; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none;
  margin: 0; padding: 0; border: 0; background: none; overflow: hidden; color: var(--_theme---text);
}
.team-modal[open] { display: flex; align-items: center; justify-content: center; }
.team-modal::backdrop { background: transparent; }
.team-modal-backdrop {
  position: absolute; inset: 0; background: rgba(0, 0, 0, .4);
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); opacity: 0; transition: opacity .3s ease;
}
.team-modal-panel {
  position: relative; display: flex; width: min(1120px, 100% - 64px); max-height: calc(100% - 64px); padding: 12px;
  border-radius: 16px; background: var(--_colors---hd--l-bg-2);
  box-shadow: 0 6px 28px rgba(0, 0, 0, .25), 0 2px 24px rgba(0, 0, 0, .05);
  opacity: 0; transform: translateY(12px); transition: opacity .3s ease, transform .3s ease;
}
.team-modal.is-open .team-modal-backdrop { opacity: 1; }
.team-modal.is-open .team-modal-panel { opacity: 1; transform: none; }
.team-modal-panel:focus { outline: none; } /* the panel takes focus on open, so the close square shows no ring after a mouse click */
.team-modal-close { position: absolute; top: 20px; right: 20px; z-index: 1; }
.team-modal-img { flex: 0 1 448px; min-width: 0; margin: 0; border-radius: var(--radius--small); overflow: hidden; }
.team-modal-img img { width: 100%; height: 100%; object-fit: cover; }
.team-modal-content {
  flex: 1 1 648px; min-width: 0; display: flex; flex-direction: column; gap: 32px; padding: 40px;
  overflow-y: auto; overscroll-behavior: contain;
}
.team-modal-body { display: flex; flex-direction: column; gap: 32px; }
.team-modal-name { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; padding-right: 48px; }
.team-points { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.team-point {
  display: flex; flex-direction: column; align-items: flex-start; gap: 16px; padding: 16px;
  border-radius: var(--radius--small); background: var(--_colors---hd--l-bg);
}
.team-point-icon { display: block; flex: none; width: 24px; height: 24px; }
.team-point-text { font-size: 14px; text-wrap: pretty; }
.team-modal-bio { display: flex; flex-direction: column; gap: 24px; }
.team-modal-bio p { text-wrap: pretty; }
.team-modal-nav { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.team-modal-nav .carousel-arrows { margin-left: auto; }
/* the person's own firm: same square language as the icon buttons, label plus a drawn up-right arrow */
.team-modal-link {
  display: inline-flex; align-items: center; gap: 8px; min-width: 0; height: 48px; padding: 0 16px;
  border-radius: 10px; background: var(--_theme---button-primary--background); color: var(--_theme---button-primary--text);
  white-space: nowrap; transition: opacity .2s ease, transform .2s ease;
}
.team-modal-link[hidden] { display: none; }
.team-modal-link svg { display: block; flex: none; width: 20px; height: 20px; }
.team-modal-link-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; padding-block: .3em; margin-block: -.3em; }
.team-modal-link:hover { opacity: .85; }
.team-modal-link:active { transform: scale(.97); }
@media (prefers-reduced-motion: reduce) {
  .team-modal-backdrop, .team-modal-panel { transition: none; }
}

/* Price modal (`price-modal`, Breakpoint=Desktop): opens beside the card that was clicked (first card left-aligned,
   last right-aligned, middle centred), fixed to the screen, and grows out of the card. site.js sets the position. */
.price-modal {
  position: fixed; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none;
  margin: 0; padding: 0; border: 0; background: none; overflow: hidden; color: var(--_theme---text);
}
.price-modal::backdrop { background: transparent; }
.price-modal-backdrop {
  position: fixed; inset: 0; background: rgba(0, 0, 0, .4);
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); opacity: 0; transition: opacity .3s ease;
}
/* fixed to the screen itself, so the sheet never depends on the dialog's height (iOS Safari sizes the dialog late) */
.price-modal-panel {
  position: fixed; left: var(--panel-x, calc(50% - 280px)); top: var(--panel-y, 30%); width: min(560px, 100% - 64px);
  display: flex; flex-direction: column; gap: 32px; padding: 40px; border-radius: 16px; background: var(--_colors---hd--l-bg-2);
  box-shadow: 0 6px 28px rgba(0, 0, 0, .25), 0 2px 24px rgba(0, 0, 0, .05);
  opacity: 0; transform: scale(.9); transform-origin: var(--origin, 50% 50%);
  transition: opacity .3s ease, transform .35s cubic-bezier(.2, .7, .2, 1);
}
.price-modal.is-open .price-modal-backdrop { opacity: 1; }
.price-modal.is-open .price-modal-panel { opacity: 1; transform: none; }
.price-modal-panel:focus { outline: none; }
.price-modal-x { position: absolute; top: 24px; right: 24px; }
.price-modal-content { display: flex; flex-direction: column; gap: 16px; padding-right: 48px; }
.price-modal-buttons { display: flex; gap: 12px; }
@media (prefers-reduced-motion: reduce) {
  .price-modal-backdrop, .price-modal-panel, .price-card, .price-card::after, .price-card-arrow { transition: none; }
}

/* Values: two columns, the right one 120 lower */
.section-values { background: var(--_theme---background); }
.section-values .section-wrapper { padding-top: 0; padding-bottom: 128px; }
.section-values .u-container { gap: 64px; container-type: inline-size; }
.values-head { grid-column: 3 / span 8; }
.values-head .u-text-heading-large { max-width: 714px; }
.value-col { grid-column: 1 / span 6; display: flex; flex-direction: column; gap: 16px; }
.value-col.is-offset { grid-column: 7 / span 6; padding-top: 120px; }
.value-card {
  position: relative; height: max(640px, calc(640 / 1376 * 100cqw)); border-radius: var(--radius--small); overflow: hidden;
  padding: 80px 40px 40px; display: flex; flex-direction: column; align-items: center; background: var(--_colors---hd--value-card-bg);
}
.value-card-img { position: absolute; inset: 0; margin: 0; }
.value-card-img img { width: 100%; height: 100%; object-fit: cover; }
.value-card-img::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to bottom, #fff 0%, rgba(255, 255, 255, 0) 52%); }
.value-card-txt { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 24px; text-align: center; }
.value-card.is-card-1 .value-card-txt, .value-card.is-card-2 .value-card-txt { max-width: 354px; }
.value-card.is-card-3 .value-card-txt { max-width: 344px; }
.value-card.is-card-4 .value-card-txt { max-width: 448px; }

/* Security (dark) */
.section-security { background: var(--_theme---background); }
.section-security .section-wrapper { padding-top: 128px; padding-bottom: 128px; }
.section-security .u-container { container-type: inline-size; }
.security-hero-img { grid-column: 1 / span 6; grid-row: 1; height: max(812px, calc(812 / 1376 * 100cqw)); border-radius: var(--radius--main); overflow: hidden; margin: 0; }
.security-hero-img img { width: 100%; height: 100%; object-fit: cover; }
.security-hero-txt { grid-column: 8 / span 4; grid-row: 1; display: flex; flex-direction: column; justify-content: center; gap: 24px; }
.security-hero-txt .u-text-heading-medium { max-width: 354px; }
.security-hero-txt .u-text-large { max-width: 307px; opacity: .7; } /* Ready: 70 % layer on the 70 % text colour */
.security-card {
  position: relative; height: max(529px, calc(529 / 1376 * 100cqw)); border-radius: var(--radius--main); overflow: hidden;
  padding: 24px 71px 33px 24px; display: flex; flex-direction: column; justify-content: flex-end;
}
.security-card-img { position: absolute; inset: 0; margin: 0; }
.security-card-img img { width: 100%; height: 100%; object-fit: cover; }
.security-card-img::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(var(--_colors---hd--security-card-tint), var(--_colors---hd--security-card-tint)), linear-gradient(to bottom, rgba(0, 0, 0, 0) 49%, #000 100%);
}
.security-card-txt { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 16px; max-width: 353px; }
.security-card.is-card-1 { grid-column: 5 / span 4; grid-row: 2; }
.security-card.is-card-2 { grid-column: 9 / span 4; grid-row: 2; padding-right: 66px; }
.security-card.is-card-2 .security-card-txt { max-width: 358px; }
.security-card.is-card-3 { grid-column: 1 / span 4; grid-row: 3; }
.security-card.is-card-3 .security-card-body { max-width: 333px; }
.security-card.is-card-4 { grid-column: 5 / span 4; grid-row: 3; }
.security-cta { grid-column: 11 / span 2; grid-row: 3; display: flex; justify-content: flex-end; align-items: flex-end; }

/* FAQ: light on this page (closed items background-3, open background-2 from the light theme) */
.page-about .section-faq { background: var(--_theme---background); }

/* CTA, dark card with image */
.page-about .section-cta .section-wrapper { padding-bottom: 32px; }
.page-about .section-cta .u-container { container-type: inline-size; }
.cta-card.is-dark {
  height: max(675px, calc(675 / 1376 * 100cqw));
  background: linear-gradient(rgba(0, 0, 0, .39), rgba(0, 0, 0, .39)), url("../images/about/cta-dark.webp") center / cover no-repeat, var(--_colors---hd--l-bg);
}

/* Partner page, Vidensbank and articles: the dark card at the homepage card's size, never taller (Oliver, 2026-10-06);
   on /partnere the section takes the white of the partner list above it */
.page-partnere .cta-card.is-dark, .page-vidensbank .cta-card.is-dark, .page-article .cta-card.is-dark { height: 520px; }
.page-partnere .section-cta { background: var(--_colors---hd--l-bg-2); }

.mobile-menu { display: none; }

/* Mobile (390 frames): everything below 992 px */
@media (max-width: 991px) {
  :root { --site--margin: 1rem; --m-header: 65px; }
  .u-br-desktop { display: none; }
  .u-only-desktop { display: none; }
  .u-only-mobile { display: inline; }
  .u-text-heading-xlarge { font-size: 40px; }
  .u-text-heading-large { font-size: 32px; }
  .u-text-heading-medium { font-size: 24px; }
  .u-text-heading-small { font-size: 20px; }
  .u-grid-desktop { display: flex; flex-direction: column; align-items: stretch; gap: 13px; }
  .txt-wrapper { gap: 26px; }

  /* header */
  html { scroll-padding-top: 64.8px; }
  .section-hero { --header-top: 64.8px; }
  /* Mobile header: never shrinks. Before scrolling it has no background, only its dividers, and takes the hero's
     text colours; once scrolling starts the white background, the sand dividers and dark text fade in
     (Oliver 2026-09-30, transparent top 2026-10-01) */
  .site-header, .site-header.is-scrolled { --header-h: 64.8px; display: flex; justify-content: space-between; align-items: center; padding: 0 0 0 16px; } /* no right padding: the menu square sits flush */
  .site-header { --header-divider: var(--_colors---hd--l-bg); }
  .u-theme-dark .site-header { --header-divider: var(--_colors---hd--l-faded); } /* the sand line disappears on the dark hero */
  .site-header::before { box-shadow: none; } /* background only; the bottom divider is ::after so it shows before scrolling too */
  .site-header::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--header-divider); pointer-events: none; transition: background-color .3s ease; }
  .site-header.is-scrolled { --header-divider: var(--_colors---hd--l-bg); --_theme---text: var(--_colors---hd--dk-text-100); --_theme---text-2: var(--_colors---hd--dk-text-70); }
  .site-header.is-scrolled::before { opacity: 1; }
  .nav_logo { width: 174px; height: 33px; }
  .nav_links_wrapper, .mega-menu { display: none; }
  .nav_cta { gap: 16px; }
  .nav_cta-arrow { display: none; } /* no room next to the menu square */
  /* Menu button: a square as tall as the header with a divider on its left in the header's divider colour (sand) */
  .nav_menu-button {
    display: flex; align-items: center; justify-content: center; flex: none;
    width: var(--header-h); height: var(--header-h);
    border-left: 1px solid var(--header-divider);
    transition: width .3s ease, height .3s ease, border-color .3s ease, color .3s ease;
  }
  .nav_menu-button > span { display: flex; }

  /* hero */
  .section-hero { height: auto; min-height: 0; max-height: none; }
  .section-hero .section-wrapper { padding-top: 149px; padding-bottom: 178px; }
  .hero-content { gap: 26px; }
  .hero-content .u-text-heading-xlarge, .hero-content .u-text-medium { max-width: none; }
  .hero-form { flex-direction: column; align-items: stretch; align-self: stretch; width: 100%; gap: 13px; padding-top: 6px; }
  .hero-input { width: 100%; }

  /* process */
  .section-process .section-wrapper { padding-top: 80px; padding-bottom: 103px; }
  .section-process .u-container { gap: 80px; }
  .steps-list { display: flex; flex-direction: column; gap: 78px; }
  .steps-line { display: none; }
  .step-row { display: flex; flex-direction: column; gap: 32px; position: sticky; top: calc(64.8px + 16px + var(--i, 0) * 8px); } /* 16 below the sticky header */
  .step-img { height: auto; aspect-ratio: 358 / 329; }
  .step-text { gap: 32px; transition: opacity .15s linear; }
  .step-text .u-text-heading-medium, .step-text .u-text-medium,
  .step-row:nth-child(5) .step-text .u-text-heading-medium, .step-row:nth-child(5) .step-text .u-text-medium { max-width: none; }

  /* prices: one card per swipe, snapped to the middle of the screen; 326 wide, the next one shows at the side */
  .section-prices .section-wrapper { padding-top: 80px; }
  .price-cards {
    --card-w: min(326px, 100cqw - 64px);
    display: flex; gap: 12px; overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory; scrollbar-width: none;
    margin: 0 calc(var(--site--margin) * -1); padding: 0 calc((100cqw - var(--card-w)) / 2);
  }
  .price-cards::-webkit-scrollbar { display: none; }
  .price-card { flex: 0 0 var(--card-w); scroll-snap-align: center; scroll-snap-stop: always; }
  .price-note { align-self: center; width: min(326px, 100cqw - 64px); margin-top: 3px; } /* under the centred card, 16 below it */
  .price-modal-panel {
    left: 0; right: 0; top: auto; bottom: 0; width: 100%; max-width: 560px; margin: 0 auto;
    padding: 32px 16px calc(32px + env(safe-area-inset-bottom));
    border-radius: 16px 16px 0 0; box-shadow: none; opacity: 1; transform: translateY(100%);
    transition: transform .45s cubic-bezier(.2, .7, .2, 1);
  }
  .price-modal-x { top: 16px; right: 16px; }
  .price-modal-content { padding-right: 56px; }
  .price-modal-buttons { flex-direction: column; }

  /* included */
  .section-included .section-wrapper { padding-top: 80px; padding-bottom: 101px; }
  .section-included .u-container { gap: 64px; }
  .included-grid { gap: 13px; }
  .included-card, .included-card.is-card-4 { height: auto; padding: 0; gap: 32px; justify-content: flex-start; }
  .included-card-img, .included-card.is-card-4 .included-card-img { position: static; inset: auto; width: 100%; height: auto; }
  .included-card-img img { height: auto; object-fit: initial; }
  .included-card-txt { padding: 32px 32px 0; gap: 19px; }
  .included-card.is-card-4 { padding-top: 12px; }
  .included-card.is-card-4 .included-card-txt { padding: 0 32px 32px; }
  .included-card [class*="included-card-title"], .included-card [class*="included-card-body"] { max-width: none !important; }
  .section-included .txt-wrapper .u-text-heading-large { max-width: 332px; }

  /* company types */
  .section-company-types .section-wrapper { padding-top: 102px; padding-bottom: 102px; }
  .section-company-types .u-container { gap: 64px; }
  .section-company-types .txt-wrapper { gap: 32px; }
  .company-types-body { gap: 51px; align-items: stretch; }
  .company-types-row { flex-direction: column; gap: 13px; }
  .company-type-card, .company-type-card.is-active { flex: none; height: 480px; padding: 27px 19px 64px; --lift-at: 0s; } /* no widening on mobile, so the lift starts on tap */
  .company-type-txt, .company-type-card.is-active .company-type-txt { max-width: none; }
  .company-type-copy { gap: 13px; }
  .company-type-card.is-active .company-type-copy { gap: 16px; }
  .company-type-card.is-active .company-type-link-wrap { margin-top: 26px; }
  .company-type-graphic { display: none; }
  .company-types-body > .button-primary { width: 100%; }

  /* faq */
  .section-faq .section-wrapper { padding-bottom: 102px; }
  .section-faq .u-container { gap: 51px; }
  .faq-list { gap: 13px; }
  .faq-q { padding: 19px; gap: 13px; }
  .faq-a { padding: 0 19px 19px; }

  /* partners */
  .section-partners .section-wrapper { padding-top: 102px; padding-bottom: 102px; }
  .section-partners .u-container { gap: 51px; }
  .section-partners .txt-wrapper { gap: 32px; }
  .partner-carousel-wrap { gap: 32px; } /* arrows sit below the cards on mobile, 32 under the card text */
  .partner-carousel-nav { order: 1; }
  .partner-carousel { gap: 13px; }
  .partner-card { flex-basis: 280px; gap: 19px; }

  /* cta */
  .section-cta .section-wrapper { padding-bottom: 82px; }
  .cta-card { height: auto; padding: 135px 32px; gap: 32px; }
  .cta-card .cta-body { max-width: none; }

  /* footer (grid version, chosen 2026-09-29) */
  .site-footer { padding: 80px 16px 32px; }
  .site-footer .u-container { gap: 64px; }
  .site-footer-top { display: flex; flex-direction: column; gap: 64px; }
  .site-footer-brand { align-items: stretch; gap: 32px; }
  .site-footer-brand .u-text-heading-large { max-width: none; }
  .site-footer-links { display: grid; grid-template-columns: 1fr 1fr; column-gap: 16px; padding: 40px 0; border-top: 1px solid var(--_theme---border); border-bottom: 1px solid var(--_theme---border); }
  .site-footer-col { gap: 24px; }
  .site-footer-col.is-info, .site-footer-col.is-os, .site-footer-col.is-legal { grid-column: auto; }
  .site-footer-col-stack { display: flex; flex-direction: column; gap: 48px; }
  .site-footer-link.u-text-small { font-size: 16px; line-height: 1.2; letter-spacing: -.01em; --tt: var(--trim-120-top); --tb: var(--trim-120-bottom); }
  .site-footer-bottom { gap: 40px; }
  .site-footer-meta { display: flex; flex-direction: column; align-items: center; gap: 24px; padding-bottom: 0; border-bottom: 0; }
  .site-footer-meta-row { display: flex; gap: 16px; }
  .site-footer-meta .is-right, .site-footer-meta .is-center { text-align: center; }
  .footer-wordmark { color: var(--_theme---text); }
  .footer-wordmark .is-dot { color: inherit; }

  /* mobile menu */
  .mobile-menu {
    display: block; position: fixed; left: 0; right: 0; top: var(--m-header); bottom: 0; z-index: 19;
    background: var(--_colors---hd--l-bg-2); overflow-y: auto; overscroll-behavior: contain;
    clip-path: inset(0 0 100% 0); visibility: hidden;
    transition: clip-path .45s cubic-bezier(.2,.7,.2,1), visibility 0s linear .45s;
  }
  .mobile-menu-inner { padding: 8px 16px 40px; display: flex; flex-direction: column; gap: 40px; }
  body.is-menu-open { overflow: hidden; }
  body.is-menu-open .mobile-menu { clip-path: inset(0 0 0 0); visibility: visible; transition: clip-path .45s cubic-bezier(.2,.7,.2,1); }
  body.is-menu-open .site-header { position: fixed; top: 0; left: 0; right: 0; background: var(--_colors---hd--l-bg-2); --header-divider: var(--_colors---hd--l-bg); --_theme---text: #000; --_theme---text-2: var(--_colors---hd--dk-text-70); color: #000; }
  body.is-menu-open .nav_menu-button .icon-menu { display: none; }
  body.is-menu-open .nav_menu-button .icon-close { display: flex; }
  .mobile-menu-row, .mobile-menu-head { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 20px 0; }
  .mobile-menu-row { border-bottom: 1px solid var(--_colors---hd--dk-faded); }
  .mobile-menu-arrow { width: 24px; height: 24px; color: var(--_colors---hd--carousel-arrow); }
  .mobile-menu-group { padding-top: 32px; }
  .mobile-menu-group-label { padding-bottom: 12px; }
  .mobile-menu-item { border-bottom: 1px solid var(--_colors---hd--dk-faded); }
  .mobile-menu-item:first-of-type { border-top: 1px solid var(--_colors---hd--dk-faded); }
  .mobile-menu-chev { transition: transform .4s cubic-bezier(.2,.7,.2,1); }
  .mobile-menu-item[open]:not(.is-closing) .mobile-menu-chev { transform: rotate(180deg); }
  .mobile-menu-body { display: flex; flex-direction: column; gap: 16px; padding-bottom: 24px; }
  .mobile-menu-sub { display: flex; align-items: center; gap: 16px; -webkit-tap-highlight-color: transparent; transition: opacity .15s ease; }
  a.mobile-menu-sub:active { opacity: .55; } /* pressed feedback; site.js registers a touch listener so iOS applies :active */
  .mobile-menu-sub-img { width: 56px; height: 56px; border-radius: var(--radius--small); object-fit: cover; flex: none; }
  .mobile-menu-sub-txt { display: flex; flex-direction: column; gap: 8px; flex: 1; min-width: 0; text-wrap: pretty; }
  .mobile-menu-arrow.is-sub { flex: none; } /* same arrow as the Processen row: this row goes somewhere */
  .mobile-menu-sub.is-feature { flex-direction: column; align-items: stretch; gap: 16px; }
  .mobile-menu-feature-img { width: 100%; height: auto; aspect-ratio: 1074 / 449; border-radius: var(--radius--small); object-fit: cover; }
  .mobile-menu-feature-row { display: flex; align-items: center; gap: 16px; }
  .mobile-menu-contact-link:active { opacity: .55; }
  .mobile-menu .button-primary { width: 100%; }
}

/* Below 390 px "Stift dit ApS" sits too close to the logo (Oliver: about 39 px at 396 is almost the minimum; 390 gives 33 px) */
@media (max-width: 389px) {
  .nav_cta .nav_cta-link { display: none; }
}

/* Om os, mobile (`/om-os · 390`) */
@media (max-width: 991px) {
  .page-about .section-hero .section-wrapper { padding-top: 85px; padding-bottom: 117px; }
  .page-legal .section-hero .section-wrapper { padding-top: 85px; padding-bottom: 85px; }
  .section-legal .section-wrapper { padding-top: 64px; padding-bottom: 102px; }
  .legal-body { gap: 40px; }
  .page-about .hero-content { gap: 32px; }
  .page-about .hero-content .u-text-heading-xlarge, .page-about .hero-content .hero-sub { max-width: none; }
  .page-about .hero-content .button-primary { align-self: stretch; }

  .video-block { height: auto; aspect-ratio: 358 / 448; }

  .section-team .section-wrapper { padding-top: 102px; padding-bottom: 102px; }
  .team-carousel-head .txt-wrapper { gap: 19px; }
  .team-carousel-head .u-text-heading-large { max-width: 340px; }
  .team-carousel-head .u-text-large { max-width: none; }
  .team-carousel { margin-top: 32px; gap: 13px; }
  .team-carousel-nav { order: 1; margin-top: 32px; } /* arrows below the cards, as the partners */
  .team-card { flex-basis: 300px; gap: 15px; }
  .team-card-name { gap: 13px; }

  /* Team modal, mobile (`team-modal`, Breakpoint=Mobile): a sheet from the bottom that scrolls on its own */
  .team-modal[open] { align-items: flex-end; }
  .team-modal-panel {
    flex-direction: column; width: 100%; max-width: 560px; max-height: calc(100% - 48px); padding: 16px 16px 32px;
    border-radius: 16px 16px 0 0; box-shadow: none; overflow-y: auto; overscroll-behavior: contain;
    opacity: 1; transform: translateY(100%); transition: transform .45s cubic-bezier(.2, .7, .2, 1);
  }
  /* the close square rides along at the top right of the sheet while it scrolls: 20 in from the photo corner */
  .team-modal-close { position: sticky; top: 20px; right: auto; align-self: flex-end; margin: 20px 20px -68px 0; }
  .team-modal-img { flex: none; aspect-ratio: 448 / 509; }
  .team-modal-content { flex: none; padding: 24px 0 0; overflow: visible; }
  .team-modal-body { gap: 24px; }
  .team-modal-name { gap: 13px; padding-right: 0; }
  .team-points { display: flex; flex-direction: column; }
  .team-point { flex-direction: row; align-items: center; }
  .team-point-text { font-size: 16px; }
  /* the firm link keeps its place beside the arrows down to 360 wide; below that the label truncates */
  .team-modal-nav { gap: 12px; }
  .team-modal-link { gap: 6px; padding: 0 12px; }
  .team-modal-link-text.u-text-medium { font-size: 14px; }

  .section-values .section-wrapper { padding-bottom: 102px; }
  .section-values .u-container { gap: 51px; }
  .values-head .u-text-heading-large { max-width: 291px; }
  .value-col, .value-col.is-offset { padding-top: 0; gap: 13px; }
  .value-card { height: auto; padding: 64px 0 0; gap: 32px; }
  .value-card-img { position: static; order: 1; } /* text on top, illustration below */
  .value-card-img::after { display: none; }
  .value-card-img img { height: auto; object-fit: initial; }
  .value-card .value-card-txt { max-width: none; padding: 0 32px; gap: 19px; }

  .section-security .section-wrapper { padding-top: 102px; padding-bottom: 102px; }
  .security-hero-img { height: auto; aspect-ratio: 358 / 428; }
  .security-hero-txt { gap: 19px; margin-top: 19px; }     /* 32 under the image (13 + 19) */
  .security-hero-txt .u-text-heading-medium, .security-hero-txt .u-text-large { max-width: none; }
  .security-card, .security-card.is-card-2 { height: auto; aspect-ratio: 358 / 423; padding: 19px 57px 26px 19px; }
  .security-card.is-card-2 { padding-right: 53px; }
  .security-card.is-card-1 { margin-top: 38px; }          /* 51 under the text (13 + 38) */
  .security-card-txt, .security-card.is-card-2 .security-card-txt { gap: 13px; max-width: none; }
  .security-card.is-card-3 .security-card-body { max-width: 266px; }
  .security-cta { margin-top: 19px; }                      /* 32 under the last card */
  .security-cta .button-secondary { width: 100%; }

  .page-about .section-cta .section-wrapper { padding-bottom: 26px; }
  .cta-card.is-dark { height: auto; padding: 197px 32px; gap: 32px; }
  .page-partnere .cta-card.is-dark, .page-vidensbank .cta-card.is-dark, .page-article .cta-card.is-dark { height: auto; padding: 135px 32px; }
}

/* Partner page (/partnere). Values from `/partnere · 1440` and `/partnere · 390` in Figma Dev (spec section 27) */
.page-partnere .section-hero { height: auto; min-height: 0; max-height: none; background: var(--_theme---background-2); overflow: hidden; }
.page-partnere .section-hero .section-wrapper { padding-top: 148px; padding-bottom: 127px; }
.page-partnere .hero-content { gap: 40px; }
.page-partnere .hero-content .u-text-heading-xlarge { max-width: none; }
/* Endless row drifting left (Oliver, 2026-10-06). site.js adds copies of the cards until the row is covered twice and sets
   the distance (one set of cards) and the duration (distance / data-speed in px per second), so more cards never speed it up */
.partner-hero-row { width: 100vw; margin: 147px 0 0 calc(50% - 50vw); overflow: hidden; }
.marquee-track { display: flex; gap: 16px; width: max-content; animation: marquee var(--marquee-duration, 60s) linear infinite; }
@keyframes marquee { to { transform: translateX(calc(var(--marquee-distance, 0px) * -1)); } }
@media (hover: hover) { .partner-hero-row:hover .marquee-track { animation-play-state: paused; } }
@media (prefers-reduced-motion: reduce) {
  .marquee-track { animation: none; }
  .partner-hero-row { overflow-x: auto; scrollbar-width: none; }
}
.partner-hero-card { flex: 0 0 333px; aspect-ratio: 333 / 438; border-radius: var(--radius--small); overflow: hidden; display: block; }
.partner-hero-card img { width: 100%; height: 100%; object-fit: cover; }

.section-partner-list { background: var(--_theme---background-2); }
.section-partner-list .section-wrapper { padding-top: 0; padding-bottom: 128px; }
/* The panel follows the page until it reaches the top of the last partner, then leaves with it (Oliver, 2026-10-06):
   it spans every partner's row, and site.js pads its bottom by the last partner's height minus its own */
.partner-list { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--grid--gutter); row-gap: 128px; }
.partner-list > .scroll-nav { grid-column: 1 / span 2; grid-row: 1 / span 5; padding-bottom: var(--release, 0px); }
.partner-block { grid-column: 3 / span 10; display: grid; grid-template-columns: minmax(0, 448fr) minmax(0, 656fr); column-gap: 40px; }
.partner-img { border-radius: var(--radius--main); overflow: hidden; background: var(--_colors---hd--dk-bg); } /* the partner's own coloured card image, logo included (Oliver, 2026-10-07) */
.partner-img img { width: 100%; height: 100%; object-fit: cover; }
.partner-main { display: flex; flex-direction: column; }
.partner-head { display: flex; flex-direction: column; gap: 20px; padding: 8px 0 32px; }
.partner-name-row { display: flex; align-items: center; gap: 12px; }
.partner-tag, .article-tag { display: inline-flex; padding: 6px 10px; border-radius: var(--radius--round); background: var(--_theme---background-3); color: var(--_theme---text-2); }
.partner-offer { text-wrap: balance; }
.partner-row { display: grid; grid-template-columns: 140px minmax(0, 1fr); column-gap: 24px; padding: 16px 0 24px; border-top: 1px solid var(--_theme---border); }
.partner-row:last-of-type { padding-bottom: 16px; }
.partner-points { display: flex; flex-direction: column; gap: 10px; }
.partner-point { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-radius: var(--radius--small); background: var(--_theme---background); }
.partner-point.is-deal { background: var(--_colors---hd--dk-bg); color: var(--_colors---hd--l-text-100); }
.partner-point .icon { width: 20px; height: 20px; }
.partner-foot { display: flex; justify-content: flex-end; gap: 12px; padding-top: 32px; }
.partner-foot.has-secondary { justify-content: space-between; }

/* Sticky numbered list with a moving marker: the partner panel and the article's "I denne guide" (site.js moves the marker) */
.scroll-nav { align-self: stretch; }
.scroll-nav-inner { position: sticky; top: 96px; display: flex; flex-direction: column; gap: 20px; padding-top: 4px; }
.scroll-nav-list { position: relative; display: flex; flex-direction: column; }
.scroll-nav-list::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 2px; background: var(--_theme---border); }
.scroll-nav-marker { position: absolute; left: 0; top: 0; width: 2px; height: var(--h, 34px); transform: translateY(var(--y, 0)); background: var(--_colors---hd--brand-500); transition: transform .4s cubic-bezier(.2,.7,.2,1), height .4s cubic-bezier(.2,.7,.2,1); }
.scroll-nav-item { display: flex; align-items: center; gap: 10px; padding: 12px 6px 12px 18px; color: var(--_theme---text-2); }
.scroll-nav-index { color: var(--_theme---text-3); flex: none; }
.scroll-nav-name { flex: 1; transition: color .2s ease; }
.scroll-nav-arrow { width: 16px; height: 16px; flex: none; opacity: 0; transition: opacity .2s ease, transform .2s ease; }
.scroll-nav-item[data-dir="up"] .scroll-nav-arrow { transform: rotate(180deg); }
.scroll-nav-item.is-active .scroll-nav-index { color: var(--_colors---hd--brand-500); }
.scroll-nav-item.is-active .scroll-nav-name { color: var(--_theme---text); font-weight: 500; }
@media (hover: hover) {
  .scroll-nav-item:not(.is-active):hover .scroll-nav-name { color: var(--_theme---text); font-weight: 500; }
  .scroll-nav-item:not(.is-active):hover .scroll-nav-arrow { opacity: 1; }
}
[data-spy-target] { scroll-margin-top: 96px; }
@media (prefers-reduced-motion: reduce) { .scroll-nav-marker { transition: none; } }

/* Vidensbank overview (/vidensbank). Values from `/vidensbank · 1440` and `/vidensbank · 390` (spec section 28) */
.page-vidensbank .section-hero { display: block; height: auto; min-height: 0; max-height: none; padding-bottom: 0; background: var(--_colors---hd--dk-bg); container-type: inline-size; } /* not the homepage's centred hero */
.page-vidensbank .section-hero .section-wrapper { padding-top: 110px; padding-bottom: 97px; }
.vb-hero { display: flex; flex-direction: column; align-items: center; gap: 124px; }
.vb-featured { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; width: 100%; }
.article-card { display: flex; flex-direction: column; gap: 24px; }
.article-card-media { display: flex; flex-direction: column; gap: 12px; }
.article-card-img { position: relative; border-radius: var(--radius--main); overflow: hidden; aspect-ratio: 332 / 215; background: var(--_colors---hd--dk-bg); }
.article-card-img img { width: 100%; height: 100%; object-fit: cover; }
.article-card-arrow {
  position: absolute; top: 16px; right: 16px; width: 40px; height: 40px; border-radius: var(--radius--round);
  display: flex; align-items: center; justify-content: center; background: var(--_colors---hd--l-bg-2); color: var(--_colors---hd--dk-text-100);
  opacity: 0; transform: translateY(4px); transition: opacity .2s ease, transform .2s ease;
}
.article-card-arrow svg { width: 18px; height: 18px; }
/* Hover (Oliver, 2026-10-06): the image zooms in a little and the other cards in the same group dim, then the arrow comes in */
.article-card { transition: opacity .3s ease; }
.article-card-img img { transition: transform .5s cubic-bezier(.2,.7,.2,1); }
@media (hover: hover) {
  .article-card:hover .article-card-img img { transform: scale(1.04); }
  .article-card:hover .article-card-arrow { opacity: 1; transform: none; transition-delay: .06s; }
  .vb-featured:has(.article-card:hover) .article-card:not(:hover),
  .articles-grid:has(.article-card:hover) .article-card:not(:hover) { opacity: .6; }
}
.vb-featured:has(.article-card:focus-visible) .article-card:not(:focus-visible),
.articles-grid:has(.article-card:focus-visible) .article-card:not(:focus-visible) { opacity: .6; }
@media (prefers-reduced-motion: reduce) { .article-card-img img { transition: none; } }
.article-meta { display: flex; align-items: center; gap: 12px; }
.article-meta .is-text-color-3 { flex: none; }
.article-card-body { display: flex; flex-direction: column; gap: 16px; }
.article-card-more { display: none; }
.article-card.is-featured .article-card-img { aspect-ratio: 448 / 512; }
.article-card.is-featured .article-card-desc { max-width: 328px; }
.article-card.is-large .article-card-img { aspect-ratio: 680 / 573; }
.article-card.is-large .article-card-body { max-width: 448px; }
.article-card.is-large .article-card-media { gap: 12px; }

.section-articles { background: var(--_theme---background); }
.section-articles .section-wrapper { padding-top: 128px; padding-bottom: 128px; }
.section-articles .u-container { gap: 64px; }
.articles-head { display: flex; justify-content: space-between; align-items: center; gap: 24px; }
.articles-filter { display: flex; gap: 8px; }
.filter-pill { padding: 10px 16px; border-radius: var(--radius--round); background: var(--_theme---background-2); color: var(--_theme---text); transition: background-color .2s ease, color .2s ease; }
.filter-pill.is-active { background: var(--_theme---text); color: var(--_theme---background-2); }
@media (hover: hover) { .filter-pill:not(.is-active):hover { background: var(--_theme---background-3); } } /* the warm grey of the closed FAQ items (Oliver, 2026-10-06) */
.articles-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 16px; row-gap: 64px; align-items: start; }
.articles-grid > .is-large { grid-column-end: span 6; }
.articles-grid > .is-small { grid-column-end: span 3; }
/* A category filter turns the pattern into an even grid */
.articles-grid.is-filtered > .article-card { grid-column-end: span 4; }
.articles-grid.is-filtered .article-card-img { aspect-ratio: 332 / 215; }
.articles-grid.is-filtered .article-card-body { max-width: none; }
.article-card[hidden] { display: none; }

/* Article page (/vidensbank/<guide>). Values from `/vidensbank/{article} · 1440` and `· 390` */
.page-article .section-hero { height: auto; min-height: 0; max-height: none; background: var(--_theme---background-2); } /* holds only the header here */
.page-article .section-article { background: var(--_theme---background-2); }
.page-article .section-article .section-wrapper { padding-top: 64px; padding-bottom: 128px; }
.article-layout { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--grid--gutter); }
.article-layout > .scroll-nav { grid-column: 1 / span 3; }
.article-main { grid-column: 4 / span 9; display: flex; flex-direction: column; gap: 24px; min-width: 0; }
.article-breadcrumb { display: inline-flex; align-items: center; gap: 8px; color: var(--_theme---text-2); align-self: flex-start; transition: color .2s ease; }
.article-breadcrumb:hover { color: var(--_theme---text); }
.article-breadcrumb .icon { width: 16px; height: 16px; }
.article-hero { position: relative; }
.article-hero-img { position: relative; height: 376px; border-radius: var(--radius--main); overflow: hidden; }
.article-hero-img img { width: 100%; height: 100%; object-fit: cover; }
.article-hero-img::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(0,0,0,0) 52.9%, rgba(0,0,0,.8) 100%), linear-gradient(to bottom, rgba(0,0,0,0) 52.9%, rgba(0,0,0,.8) 100%); }
.article-title { position: absolute; left: 40px; bottom: 40px; z-index: 1; max-width: calc(100% - 80px); color: var(--_colors---hd--l-text-100); }
.article-title .is-text-color-3 { color: var(--_colors---hd--l-text-50); }
.article-hero .article-meta { position: absolute; right: 40px; bottom: 40px; z-index: 1; }
.article-content { display: grid; grid-template-columns: minmax(0, 626fr) minmax(0, 322fr); column-gap: 40px; row-gap: 64px; padding: 24px 0 0 40px; }
.article-body { grid-column: 1; grid-row: 1; display: flex; flex-direction: column; gap: 64px; min-width: 0; }
.article-faq { grid-column: 1; grid-row: 2; display: flex; flex-direction: column; gap: 16px; }
.article-cta-card { grid-column: 2; grid-row: 1 / span 2; align-self: start; position: sticky; top: 96px; display: flex; flex-direction: column; gap: 16px; padding: 24px; border-radius: var(--radius--main); background: var(--_colors---hd--dk-bg); }
.article-cta-card .button-primary { align-self: stretch; }
.article-summary { display: flex; flex-direction: column; gap: 16px; padding: 24px; border-radius: var(--radius--main); background: var(--_theme---background); }
.article-next { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding-top: 4px; line-height: 16px; }
.article-next::before, .article-next::after { content: none; } /* the trim pseudo-elements would be flex items and push the label 8 px in */
.text-link { display: inline-flex; align-items: center; gap: 4px; color: var(--_theme---brand-text); }
.text-link .icon { width: 16px; height: 16px; transition: transform .2s ease; }
.text-link:hover .icon { transform: translateX(3px); }
.article-sections { display: flex; flex-direction: column; gap: 48px; }
.article-section { display: flex; flex-direction: column; gap: 16px; }
.article-section p, .article-list li, .article-steps li { text-wrap: pretty; }
.article-section b { font-weight: 500; }
/* A new paragraph starts one empty line down, like a double line break: from the last baseline to the next cap top
   is two line heights less the cap height (Oliver, 2026-10-11). The section's 16 px gap is part of it. */
.article-section > :is(p.u-text-medium, ul, ol) + p.u-text-medium { margin-top: calc(2.8em - .729em - 16px); }
.article-img { width: 100%; aspect-ratio: 626 / 293; object-fit: cover; border-radius: var(--radius--main); }
.article-list { padding-left: 20px; list-style: disc; display: flex; flex-direction: column; gap: 8px; }
.article-list li { display: list-item; }
.article-list li::marker { color: var(--_theme---text); }
.article-steps { display: flex; flex-direction: column; gap: 12px; margin: 0; padding: 0; list-style: none; }
.article-steps li { display: flex; align-items: flex-start; gap: 16px; }
/* The number sits on the first line and every step keeps the same space above and below its text, so a step that
   wraps reads as one step (Oliver, 2026-10-10). The padding centres a cap-height line on the 28 px number. */
.article-steps li > .u-text-medium { padding-block: calc((28px - .729em) / 2); }
.article-step-number { flex: none; width: 28px; height: 28px; border-radius: var(--radius--round); background: var(--_theme---background); display: flex; align-items: center; justify-content: center; }
.page-article .article-main :is(p, li, h1, h2, h3) { text-wrap: pretty; } /* Oliver, 2026-10-07: every article text wraps pretty, no orphans */
.article-section-text { display: flex; flex-direction: column; gap: 32px; }

/* Lunars dokumentationskrav (Figma `/vidensbank/lunars-dokumentationskrav`): a hero of five of Lunar's photos, the
   document finder (age, then industry, then that pair's checklist) and the deal card. All ten checklists are in the
   HTML; the finder shows one once site.js has marked it ready. */
.article-hero-img.is-collage { background: var(--_theme---background-2); }
.article-hero-collage { display: flex; gap: 4px; height: 100%; }
.article-hero-collage img { flex: 1 1 0; min-width: 0; height: 100%; object-fit: cover; }
.page-article .article-main p.doc-finder-intro { text-wrap: balance; } /* the 382 px cap in Figma imitates balance */
.doc-finder { display: flex; flex-direction: column; gap: 32px; padding-top: 8px; }
.doc-finder-step { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.segmented { position: relative; display: inline-flex; gap: 4px; padding: 4px; border-radius: var(--radius--round); background: var(--_theme---background); }
.segmented-pill { position: absolute; top: 4px; bottom: 4px; left: 0; width: 0; border-radius: var(--radius--round); background: var(--_theme---background-2); opacity: 0; } /* slides behind the chosen option (Oliver) */
.doc-finder.is-moving .segmented-pill { transition: transform .4s cubic-bezier(.2,.7,.2,1), width .4s cubic-bezier(.2,.7,.2,1); }
.doc-finder.is-ready .segmented-pill { opacity: 1; }
.segment { position: relative; z-index: 1; padding: 10px 16px; border-radius: var(--radius--round); color: var(--_theme---text-2); transition: color .3s ease; }
.segment.is-active { color: var(--_theme---text); font-weight: 500; }
.doc-finder:not(.is-ready) .segment.is-active { background: var(--_theme---background-2); }
.industry-cards { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; align-self: stretch; }
.industry-card { display: flex; flex-direction: column; gap: 10px; text-align: left; color: var(--_theme---text-2); transition: color .2s ease; }
.industry-card-img { position: relative; display: block; aspect-ratio: 117 / 146; border-radius: var(--radius--main); overflow: hidden; }
.industry-card-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s cubic-bezier(.2,.7,.2,1); }
.industry-card-img::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 2px var(--_theme---brand-text); opacity: 0; transition: opacity .2s ease; }
.industry-card.is-active { color: var(--_theme---text); }
.industry-card.is-active .industry-card-name { font-weight: 500; }
.industry-card.is-active .industry-card-img::after { opacity: 1; }
@media (hover: hover) {
  .segment:not(.is-active):hover, .industry-card:hover { color: var(--_theme---text); }
  .industry-card:hover .industry-card-img img { transform: scale(1.04); }
}
.doc-finder-lists { display: flex; flex-direction: column; gap: 16px; }
.doc-finder-list { display: flex; flex-direction: column; gap: 24px; padding: 24px; border-radius: var(--radius--main); background: var(--_theme---background); }
.doc-finder.is-ready .doc-finder-list:not(.is-active) { display: none; }
.doc-finder-list-head { display: flex; flex-direction: column; gap: 10px; }
.doc-finder-items { display: flex; flex-direction: column; gap: 24px; }
.doc-finder-item { display: flex; align-items: center; gap: 12px; }
.doc-finder-item .icon { flex: none; width: 20px; height: 20px; color: var(--_theme---brand-text); }
.lunar-deal { display: flex; align-items: center; gap: 24px; padding: 16px 24px 16px 16px; border-radius: var(--radius--main); box-shadow: inset 0 0 0 1px var(--_theme---border); }
.lunar-deal-img { flex: none; width: 148px; height: 195px; object-fit: cover; border-radius: 8px; }
.lunar-deal-text { display: flex; flex-direction: column; align-items: flex-start; gap: 24px; }
.button-secondary.has-arrow { gap: 8px; }
.button-secondary.has-arrow .icon { width: 16px; height: 16px; transition: transform .2s ease; }
.button-secondary.has-arrow:hover .icon { transform: translateX(3px); }
@media (prefers-reduced-motion: reduce) { .doc-finder.is-moving .segmented-pill { transition: none; } }

.section-read-more { background: var(--_theme---background); }
.section-read-more .section-wrapper { padding-top: 128px; padding-bottom: 128px; }
.section-read-more .u-container { gap: 48px; }
.read-more-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 16px; }
.read-more-link { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 20px 0; border-bottom: 1px solid var(--_theme---border); }
.read-more-text { display: flex; flex-direction: column; gap: 8px; }
.read-more-link .icon { width: 20px; height: 20px; transition: transform .2s ease; }
.read-more-link:hover .icon { transform: translateX(3px); }
/* Same dim as the Vidensbank cards: hovering one row fades the rest of the list */
.read-more-link { transition: opacity .3s ease; }
@media (hover: hover) {
  .read-more-list:has(.read-more-link:hover) .read-more-link:not(:hover) { opacity: .6; }
}
.read-more-list:has(.read-more-link:focus-visible) .read-more-link:not(:focus-visible) { opacity: .6; }

/* 404 (Oliver, 2026-10-06): the message and "Måske ledte du efter" share the first screen. The message area takes
   what the header and the links leave, never less than 500 px (200 on mobile, so all six links fit on a phone). */
.page-404 .section-hero { height: auto; min-height: 0; max-height: none; background: var(--_theme---background-2); } /* holds only the header here */
.notfound-screen { display: flex; flex-direction: column; min-height: calc(100vh - 80px); min-height: calc(100svh - 80px); }
.notfound-top { flex: 1 0 auto; min-height: 500px; display: flex; align-items: center; justify-content: center; padding: 0 var(--site--margin); background: var(--_theme---background-2); }
.notfound-text { display: flex; flex-direction: column; align-items: center; gap: 24px; }
.notfound-links { background: var(--_theme---background-2); }
.notfound-links .section-wrapper { padding-top: 64px; padding-bottom: 32px; }
.notfound-links .read-more-link { min-height: 71px; } /* Figma: every row 71, the one without a description too */
.page-404 .section-cta { background: var(--_colors---hd--l-bg-2); }
.page-404 .section-cta .section-wrapper { padding-bottom: 32px; }
.page-404 .cta-card.is-dark { height: 595px; }

@media (max-width: 991px) {
  .page-partnere .section-hero .section-wrapper { padding-top: 85px; padding-bottom: 64px; }
  .page-partnere .hero-content { gap: 32px; }
  .page-partnere .hero-content .button-secondary { align-self: stretch; }
  .partner-hero-row { margin-top: 64px; }
  .marquee-track { gap: 13px; }
  .partner-hero-card { flex: 0 0 280px; }

  .section-partner-list .section-wrapper { padding-bottom: 102px; }
  .partner-list { display: flex; flex-direction: column; gap: 102px; } /* desktop 128 × 0.8 */
  .partner-block { display: flex; flex-direction: column; gap: 24px; }
  .partner-img { height: 220px; }
  .partner-row { display: flex; flex-direction: column; gap: 8px; }
  .partner-foot, .partner-foot.has-secondary { flex-direction: column-reverse; align-items: stretch; }

  /* The numbered list turns into a sideways row that stays under the header */
  .partner-list > .scroll-nav { margin-bottom: -70px; padding-bottom: 0; } /* 32 to the first partner, as in Dev */
  .scroll-nav { position: sticky; top: var(--m-header); z-index: 5; margin: 0 calc(var(--site--margin) * -1); padding: 12px var(--site--margin) 0; background: var(--_theme---background-2); }
  .scroll-nav-inner { position: static; gap: 16px; padding-top: 0; }
  .scroll-nav-list { flex-direction: row; gap: 20px; overflow-x: auto; scrollbar-width: none; padding-bottom: 12px; }
  .scroll-nav-list::-webkit-scrollbar { display: none; }
  .scroll-nav-list::before { top: auto; bottom: 0; left: 0; right: 0; width: auto; height: 2px; min-width: var(--row-w, 100%); }
  .scroll-nav-marker { top: auto; bottom: 0; width: var(--w, 40px); height: 2px; transform: translateX(var(--x, 0)); transition: transform .4s cubic-bezier(.2,.7,.2,1), width .4s cubic-bezier(.2,.7,.2,1); }
  .scroll-nav-item { flex: none; padding: 0; gap: 8px; white-space: nowrap; }
  .scroll-nav-arrow { display: none; }
  [data-spy-target] { scroll-margin-top: 150px; }

  .page-vidensbank .section-hero .section-wrapper { padding-top: 85px; padding-bottom: 64px; }
  .vb-hero { gap: 64px; align-items: stretch; }
  .vb-hero h1 { align-self: center; }
  .vb-featured {
    --card-w: min(326px, 100cqw - 64px);
    display: flex; gap: 16px; width: auto; align-self: stretch; overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory; scrollbar-width: none;
    margin: 0 calc(var(--site--margin) * -1); padding: 0 calc((100cqw - var(--card-w)) / 2);
  }
  .vb-featured::-webkit-scrollbar { display: none; }
  .vb-featured > .article-card { flex: 0 0 var(--card-w); scroll-snap-align: center; scroll-snap-stop: always; }
  .article-card.is-featured .article-card-img, .article-card.is-large .article-card-img, .article-card .article-card-img { aspect-ratio: 358 / 240; }
  .vb-featured .article-card-img { aspect-ratio: 326 / 240; }
  .article-card.is-featured .article-card-desc, .article-card.is-large .article-card-body { max-width: none; }
  .article-card-arrow { display: none; }
  .article-card-more { display: inline-flex; gap: 8px; }
  .article-card-more .icon { width: 16px; height: 16px; }

  .section-articles .section-wrapper { padding-top: 64px; padding-bottom: 100px; }
  .section-articles .u-container { gap: 32px; }
  .articles-head { flex-direction: column; align-items: flex-start; gap: 20px; }
  .articles-filter { align-self: stretch; overflow-x: auto; scrollbar-width: none; margin: 0 calc(var(--site--margin) * -1); padding: 0 var(--site--margin); }
  .articles-filter::-webkit-scrollbar { display: none; }
  .filter-pill { flex: none; }
  .articles-grid, .articles-grid.is-filtered { display: flex; flex-direction: column; gap: 48px; }

  .page-article .section-article .section-wrapper { padding-top: 24px; padding-bottom: 64px; }
  .article-layout { display: flex; flex-direction: column; gap: 24px; }
  .article-main { display: contents; }
  .article-breadcrumb { order: 1; }
  .article-hero { order: 2; display: flex; flex-direction: column; gap: 24px; }
  .article-layout > .scroll-nav { order: 3; }
  .article-content { order: 4; display: flex; flex-direction: column; gap: 48px; padding: 0; }
  .article-hero-img { height: 240px; }
  .article-title { left: 20px; bottom: 20px; max-width: calc(100% - 40px); }
  .article-hero .article-meta { position: static; }
  .article-hero .article-meta.u-theme-dark { --_theme---background-3: var(--_colors---hd--l-bg-3); --_theme---text-2: var(--_colors---hd--dk-text-70); --_theme---text-3: var(--_colors---hd--dk-text-50); color: var(--_colors---hd--dk-text-100); }
  .article-body { gap: 48px; }
  .article-cta-card { position: static; order: 2; } /* after the last section, before the FAQ */
  .article-faq { order: 3; }
  .article-img { aspect-ratio: 358 / 168; }

  .section-read-more .section-wrapper { padding-top: 64px; padding-bottom: 64px; }
  .section-read-more .u-container { gap: 24px; }
  .read-more-list { display: flex; flex-direction: column; }

  .article-sections { gap: 38px; } /* desktop 48 × 0.8 */
  .article-section-text { gap: 26px; }
  .article-hero-collage { gap: 3px; }
  .article-hero-collage img:nth-child(2), .article-hero-collage img:nth-child(4) { display: none; }
  .doc-finder { gap: 26px; padding-top: 6px; }
  .doc-finder-step { gap: 10px; }
  .industry-cards { display: flex; gap: 8px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin: 0 calc(var(--site--margin) * -1); padding: 0 var(--site--margin); scroll-padding: 0 var(--site--margin); }
  .industry-cards::-webkit-scrollbar { display: none; }
  .industry-card { flex: 0 0 94px; gap: 8px; scroll-snap-align: start; }
  .doc-finder-list { gap: 19px; padding: 19px; }
  .doc-finder-list-head { gap: 8px; }
  .doc-finder-items { gap: 19px; }
  .doc-finder-item { gap: 10px; }
  .lunar-deal { flex-direction: column; align-items: stretch; gap: 19px; padding: 13px; }
  .lunar-deal-img { width: 100%; height: 180px; }
  .lunar-deal-text { gap: 19px; padding: 0 6px 6px; }
  .lunar-deal-text .button-secondary { align-self: stretch; }

  .notfound-screen { min-height: calc(100vh - 64.8px); min-height: calc(100svh - 64.8px); }
  .notfound-top { min-height: 200px; }
  .notfound-links .section-wrapper { padding-top: 32px; padding-bottom: 16px; }
  .page-404 .section-cta .section-wrapper { padding-bottom: 16px; }
  .page-404 .cta-card.is-dark { height: auto; }
}

/* Company type pages (/selskabstyper/<type>): the article layout with the front page's price card in the CTA's place */
.article-cta-card.is-company { gap: 0; padding: 0; background: none; }
.article-cta-card.is-company .price-card { width: 100%; }
.article-cta-card.is-company .price-card-visual { height: auto; aspect-ratio: 371 / 226; }
.button-primary.has-arrow { gap: 8px; }
.button-primary.has-arrow .icon { width: 16px; height: 16px; transition: transform .2s ease; }
.button-primary.has-arrow:hover .icon { transform: translateX(3px); }

/* FAQ pages (/faq/<emne>): no hero; title, intro and the switch between the two pages take its place.
   Values from `/faq/foer-stiftelsen · 1440` and `· 390` */
.page-faq .article-content { padding-left: 0; }
.faq-title { display: flex; flex-direction: column; align-items: flex-start; gap: 24px; padding-top: 24px; }
.faq-intro { max-width: 626px; }
.page-faq .article-body { gap: 48px; }
.scroll-nav[hidden], .article-sections[hidden] { display: none; }
/* The pill slides behind the chosen topic, as on the Lunar guide */
[data-faq-tabs].is-moving .segmented-pill { transition: transform .4s cubic-bezier(.2,.7,.2,1), width .4s cubic-bezier(.2,.7,.2,1); }
[data-faq-tabs].is-ready .segmented-pill { opacity: 1; }
[data-faq-tabs]:not(.is-ready) .segment.is-active { background: var(--_theme---background-2); }
.faq-switch .segment { border: 0; background: none; font: inherit; cursor: pointer; }
.faq-help .article-next .text-link { font: inherit; }

/* Følg din stiftelse. Values from `/foelg-din-stiftelse · 1440 · opslag`, `· status` and the 390 frames */
.page-track .section-hero { height: auto; min-height: 0; max-height: none; background: var(--_theme---background-2); }
.section-track { background: var(--_theme---background-2); }
.section-track .section-wrapper { padding-top: 64px; padding-bottom: 128px; }
.track-lookup, .track-head { display: flex; justify-content: space-between; gap: 16px; padding: 64px; border-radius: var(--radius--main); background: var(--_theme---background); }
.track-head { align-items: center; }
.track-lookup-text { flex: 0 1 548px; display: flex; flex-direction: column; justify-content: space-between; gap: 24px; }
.track-lookup-heading, .track-head-text { display: flex; flex-direction: column; gap: 24px; }
.track-head-text { flex: 0 1 548px; }
.track-form { flex: 0 1 548px; display: flex; flex-direction: column; align-items: flex-start; gap: 24px; padding: 32px; border-radius: var(--radius--main); background: var(--_theme---background-2); }
.track-fields { align-self: stretch; display: flex; gap: 16px; }
.track-field { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 12px; }
.track-input { width: 100%; height: 44px; padding: 0 14px; border: 0; border-radius: var(--radius--main); background: var(--_theme---background); color: var(--_theme---text); font: 400 16px/1 "Mona Sans", system-ui, sans-serif; letter-spacing: -.01em; }
.track-input::placeholder { color: var(--_theme---text-3); }
.track-input:focus { outline: none; box-shadow: inset 0 0 0 1.5px var(--_colors---hd--brand-500); }
/* The wizard's quiet help link: a brand link with a chevron that opens one line beneath it */
.track-help { position: relative; display: flex; flex-direction: column; align-items: flex-start; }
.track-help-toggle { display: inline-flex; align-items: center; gap: 6px; padding: 0; border: 0; background: none; color: var(--_theme---brand-text); }
.track-help-chevron { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 1.5; transition: transform .25s ease; }
.track-help-toggle[aria-expanded="true"] .track-help-chevron { transform: rotate(180deg); }
.track-help-text { position: absolute; top: 100%; left: 0; width: min(548px, 100%); margin-top: 8px; opacity: 0; visibility: hidden; transform: translateY(-4px); transition: opacity .25s ease, transform .25s ease, visibility 0s linear .25s; }
.track-help.is-open .track-help-text { opacity: 1; visibility: visible; transform: none; transition: opacity .25s ease, transform .25s ease, visibility 0s; }
.track-help-text .text-link, .faq-help .text-link { padding: 0; border: 0; background: none; }
.track-error { align-self: stretch; color: #a8322b; } /* the wizard's --color-danger */
.track-other { align-self: flex-start; padding: 0; border: 0; background: none; color: var(--_theme---brand-text); }
.track-form button[disabled] { opacity: .6; cursor: progress; }
.track-help-text .text-link { display: inline; font: inherit; }
.track-status { display: flex; flex-direction: column; gap: 64px; }
.track-status[hidden], .track-lookup[hidden] { display: none; }
.track-case { flex: 0 1 548px; display: flex; gap: 32px; margin: 0; padding: 32px; border-radius: var(--radius--main); background: var(--_theme---background-2); }
.track-case div { display: flex; flex-direction: column; gap: 12px; }
.track-case dd { margin: 0; }
.track-status-content { display: flex; justify-content: space-between; align-items: flex-start; gap: 40px; padding: 0 64px; }
.track-steps { flex: 0 1 626px; display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; }
.track-step { position: relative; display: flex; gap: 16px; }
.track-step:not(:last-child)::before { content: ""; position: absolute; left: 11px; top: 28px; bottom: 4px; width: 2px; border-radius: 1px; background: var(--_theme---border); }
.track-step.is-done::before { background: var(--_colors---hd--brand-500); }
.track-dot { position: relative; z-index: 1; flex: none; display: flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; background: var(--_theme---background-2); box-shadow: inset 0 0 0 2px var(--_theme---border); }
.track-dot svg { width: 12px; height: 12px; fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.track-step.is-done .track-dot { background: var(--_colors---hd--brand-500); box-shadow: none; }
.track-step.is-current .track-dot { box-shadow: inset 0 0 0 2px var(--_colors---hd--brand-500); }
.track-step.is-current .track-dot::after { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--_colors---hd--brand-500); }
.track-step-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; padding: 4px 0 32px; }
.track-step:last-child .track-step-text { padding-bottom: 0; }
.track-step.is-next .track-step-title { color: var(--_theme---text-3); }
.track-step-card { display: flex; flex-direction: column; gap: 12px; padding: 20px; border-radius: var(--radius--main); background: var(--_theme---background); }
.track-step-sub { text-wrap: pretty; }
/* The case chat: a bordered panel after Resend's help chat; the customer's own messages in brand blue (Oliver) */
.track-chat { flex: 0 0 548px; position: sticky; top: 96px; height: 600px; display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--_theme---border); border-radius: var(--radius--main); background: var(--_theme---background-2); }
.track-chat-head { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 20px 24px; border-bottom: 1px solid var(--_theme---border); }
.track-chat-live { display: flex; align-items: center; gap: 8px; }
.track-chat-live::before, .track-chat-live::after { content: none; }
.track-chat-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--_colors---hd--brand-500); }
.track-chat-messages { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 24px; padding: 24px; }
.track-chat-msg { display: flex; gap: 12px; }
.track-chat-msg.is-user { justify-content: flex-end; }
.track-chat-avatar { flex: none; display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; }
.track-chat-avatar img { width: 24px; height: 24px; }
.track-chat-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.track-chat-body p, .track-chat-bubble { line-height: 1.4; text-wrap: pretty; }
.track-chat-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.track-chat-chip { padding: 8px 12px; border: 1px solid var(--_theme---border); border-radius: var(--radius--round); background: none; color: var(--_theme---text); transition: border-color .2s ease; }
.track-chat-chip:hover { border-color: var(--_theme---text-3); }
.track-chat-msg.is-typing .u-text-small { color: var(--_theme---text-3); }
.track-chat-bubble { max-width: 360px; padding: 16px; border-radius: var(--radius--main); background: var(--_colors---hd--brand-500); color: #fff; }
.track-chat-composer { display: flex; flex-direction: column; gap: 10px; padding: 0 24px 20px; }
.track-chat-composer > p { text-align: center; }
.track-chat-input { display: flex; align-items: center; gap: 8px; padding: 8px 8px 8px 16px; border: 1px solid var(--_theme---border); border-radius: var(--radius--main); transition: border-color .2s ease; }
.track-chat-input:focus-within { border-color: var(--_colors---hd--brand-500); }
.track-chat-input input { flex: 1; min-width: 0; border: 0; background: none; color: var(--_theme---text); font: 400 14px/1.2 "Mona Sans", system-ui, sans-serif; }
.track-chat-input input::placeholder { color: var(--_theme---text-3); }
.track-chat-input input:focus { outline: none; }
.track-chat-send { flex: none; display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; background: var(--_theme---text); }
.track-chat-send svg { width: 12px; height: 12px; fill: none; stroke: var(--_theme---background-2); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }

/* Chat drawer (Figma, Chat-skuffe, Oliver 2026-10-08): the tracking page's chat as a floating panel bottom right,
   and on phones a full-height sheet over a dimmed page. */
.chat-drawer { position: fixed; inset: auto 24px 24px auto; z-index: 40; width: 400px; height: 560px; max-width: calc(100vw - 48px); max-height: calc(100dvh - 48px); margin: 0; padding: 0; border: 0; background: none; overflow: visible; color: var(--_theme---text); opacity: 0; transform: translateY(12px); transition: opacity .2s ease, transform .2s ease; }
.chat-drawer.is-visible { opacity: 1; transform: none; }
.track-chat.is-drawer { position: static; flex: none; width: 100%; height: 100%; box-shadow: 0 16px 48px rgba(0, 0, 0, .12), 0 2px 8px rgba(0, 0, 0, .06); }
.track-chat.is-drawer .track-chat-head { padding: 16px 24px; }
.track-chat-title { display: flex; flex-direction: column; gap: 10px; }
/* Stacked under the title, the live line is trimmed like the other text, so the header keeps Figma's 66. */
.track-chat-title .track-chat-live { display: block; }
.track-chat-title .track-chat-live::before, .track-chat-title .track-chat-live::after { content: ""; }
.track-chat-title .track-chat-dot { display: inline-block; position: relative; top: -1px; margin-right: 8px; vertical-align: middle; }
.track-chat-close { flex: none; display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; background: var(--_colors---hd--l-bg); color: var(--_theme---text); transition: background .2s ease; }
.track-chat-close:hover { background: var(--_colors---hd--l-bg-3); }
.track-chat-close svg { width: 10px; height: 10px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; }
.track-chat.is-drawer .track-chat-composer > p { max-width: 250px; margin-inline: auto; }
@media (prefers-reduced-motion: reduce) { .track-help-text, .track-help-chevron, [data-faq-tabs].is-moving .segmented-pill { transition: none; } }

@media (max-width: 991px) {
  .faq-title { order: 2; gap: 19px; padding-top: 0; }
  .page-faq .faq-group { order: 0; } /* the groups share the article FAQ class; keep them in source order */
  .page-faq .article-body { gap: 38px; }

  .section-track .section-wrapper { padding-top: 0; padding-bottom: 0; }
  .track-lookup, .track-head { flex-direction: column; align-items: stretch; gap: 26px; margin: 0 calc(var(--site--margin) * -1); padding: 51px var(--site--margin); border-radius: 0; }
  .track-lookup-text { display: contents; }
  .track-lookup-heading { order: 1; gap: 19px; }
  .track-form { order: 2; flex: none; gap: 19px; padding: 26px; }
  .track-help { order: 3; }
  .track-help-text { position: static; display: none; width: auto; }
  .track-help.is-open .track-help-text { display: block; }
  .track-fields { flex-direction: column; gap: 19px; }
  .track-field { gap: 10px; }
  .track-head-text { flex: none; gap: 19px; }
  .track-case { flex: none; flex-direction: column; gap: 13px; padding: 26px; }
  .track-case div { flex-direction: row; justify-content: space-between; gap: 8px; }
  .track-status { gap: 0; }
  .track-status-content { flex-direction: column; align-items: stretch; gap: 38px; padding: 38px 0 51px; }
  .track-steps { flex: none; }
  .track-step { gap: 13px; }
  .track-step-text { padding-bottom: 26px; }
  .track-step-card { gap: 10px; padding: 16px; }
  .track-chat { position: static; flex: none; height: 560px; }
  .track-chat-head { padding: 16px 19px; }
  .track-chat-live { display: none; }
  .track-chat-messages { gap: 19px; padding: 19px; }
  .track-chat-composer { padding: 0 19px 16px; }
  .track-chat-bubble { max-width: 260px; }
  .track-chat.is-drawer .track-chat-head { padding: 16px 24px; }
  .track-chat.is-drawer .track-chat-live { display: block; }
  .track-chat.is-drawer .track-chat-messages { gap: 24px; padding: 24px; }
  .track-chat.is-drawer .track-chat-composer { padding: 0 24px 20px; }
}

@media (max-width: 767px) {
  .chat-drawer { inset: 52px 0 0 0; width: 100%; height: auto; max-width: none; max-height: none; opacity: 1; transform: translateY(100%); transition: transform .3s cubic-bezier(.32, .72, 0, 1); }
  .chat-drawer.is-visible { transform: none; }
  .chat-drawer::backdrop { background: rgba(0, 0, 0, 0); transition: background .3s ease; }
  .chat-drawer.is-visible::backdrop { background: rgba(0, 0, 0, .4); }
  .track-chat.is-drawer { border: 0; border-radius: 16px 16px 0 0; box-shadow: none; }
  .track-chat.is-drawer .track-chat-composer { padding-bottom: 28px; }
  html.is-chat-open { overflow: hidden; }
}
@media (prefers-reduced-motion: reduce) { .chat-drawer, .chat-drawer::backdrop { transition: none; } }

.section-gap { height: 128px; }
@media (max-width: 991px) { .section-gap { height: 102px; } }

[data-partners] { display: none !important; }