/* ---------- tokens/fonts.css ---------- */
/* Parring: Schibsted Grotesk (skandinavisk redaktionel display-grotesk, variabel 400–700)
   + Switzer (neutral tekst). Self-hostet fra assets/fonts/ — ingen Google CDN (GDPR + performance). */
@font-face{font-family:'Schibsted Grotesk';src:url('../fonts/schibsted.woff2') format('woff2');font-weight:400 700;font-style:normal;font-display:swap}
@font-face{font-family:'Switzer';src:url('../fonts/switzer-400.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Switzer';src:url('../fonts/switzer-500.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Switzer';src:url('../fonts/switzer-600.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'Switzer';src:url('../fonts/switzer-700.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}

/* ---------- tokens/typography.css ---------- */
/* WeBelieve — typografi. Schibsted Grotesk (display) + Switzer (tekst), fluid clamp()-skala. */

:root {
  --font-sans: 'Switzer', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-body: var(--font-sans);
  --font-display: 'Schibsted Grotesk', 'Switzer', ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-mono: ui-monospace, 'SFMono-Regular', 'Menlo', monospace;

  /* Weights */
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-extrabold: 800;

  /* Fluid size scale (min → max) */
  --fs-2xs: clamp(0.75rem, 0.729rem + 0.09vw, 0.8125rem);   /* 12 → 13 */
  --fs-xs:  clamp(0.8125rem, 0.792rem + 0.09vw, 0.875rem);  /* 13 → 14 */
  --fs-sm:  clamp(0.875rem, 0.854rem + 0.09vw, 0.9375rem);  /* 14 → 15 */
  --fs-base:clamp(1rem, 0.958rem + 0.19vw, 1.125rem);       /* 16 → 18 */
  --fs-md:  clamp(1.0625rem, 1rem + 0.28vw, 1.25rem);       /* 17 → 20 */
  --fs-lg:  clamp(1.1875rem, 1.083rem + 0.46vw, 1.5rem);    /* 19 → 24 */
  --fs-xl:  clamp(1.375rem, 1.208rem + 0.74vw, 1.875rem);   /* 22 → 30 */
  --fs-2xl: clamp(1.625rem, 1.375rem + 1.11vw, 2.375rem);   /* 26 → 38 */
  --fs-3xl: clamp(1.875rem, 1.5rem + 1.67vw, 3rem);         /* 30 → 48 */
  --fs-4xl: clamp(2.125rem, 1.583rem + 2.41vw, 3.75rem);    /* 34 → 60 */
  --fs-5xl: clamp(2.5rem, 1.75rem + 3.33vw, 4.75rem);       /* 40 → 76 */
  --fs-6xl: clamp(2.875rem, 1.833rem + 4.63vw, 6rem);       /* 46 → 96 */

  /* Line heights */
  --lh-tight: 1.04;
  --lh-display: 1.1;
  --lh-heading: 1.2;
  --lh-snug: 1.35;
  --lh-body: 1.6;
  --lh-loose: 1.75;

  /* Tracking */
  --ls-tight: -0.03em;
  --ls-display: -0.02em;
  --ls-normal: -0.01em;
  --ls-wide: 0.04em;
  --ls-eyebrow: 0.16em;

  /* Roles */
  --type-hero-size: var(--fs-5xl);
  --type-h1-size: var(--fs-4xl);
  --type-h2-size: var(--fs-3xl);
  --type-h3-size: var(--fs-xl);
  --type-h4-size: var(--fs-lg);
  --type-lead-size: var(--fs-md);
  --type-body-size: var(--fs-base);
  --type-small-size: var(--fs-sm);
  --type-caption-size: var(--fs-xs);
  --type-eyebrow-size: var(--fs-2xs);
  --type-button-size: var(--fs-sm);

  /* Reading measures */
  --measure-tight: 34ch;
  --measure-body: 66ch;
  --measure-wide: 78ch;
}

/* ---------- tokens/colors.css ---------- */
/* 60–30–10: 60% lys base · 30% brand-slate (#4D535D) · 10% accent-pink */
:root {
  --wb-white: #FFFFFF;
  --wb-paper: #F7F8F9;
  --wb-mist:  #EDEFF2;

  --wb-slate-900: #22262C;
  --wb-slate-800: #2C3138;
  --wb-slate-700: #3A3F47;
  --wb-slate-600: #4D535D; /* brand slate — site theme-color */
  --wb-slate-500: #646B76;
  --wb-slate-400: #7B828C;
  --wb-slate-300: #A7ADB6;
  --wb-slate-200: #D5D9DE;
  --wb-slate-100: #E6E9ED;

  --wb-pink-700: #96114F;
  --wb-pink-600: #B41560;
  --wb-pink-500: #E31C79; /* primary accent */
  --wb-pink-400: #EE5C9C;
  --wb-pink-300: #F58AB8;
  --wb-pink-100: #FDE8F1;

  --wb-green-500: #1F8A6D;
  --wb-green-100: #E4F3EE;
  --wb-amber-500: #B8781A;
  --wb-amber-100: #FBF0DE;
  --wb-red-500:   #C4321F;
  --wb-red-100:   #FBE8E4;

  --surface-page:        var(--wb-white);
  --surface-subtle:      var(--wb-paper);
  --surface-card:        var(--wb-white);
  --surface-card-subtle: var(--wb-paper);
  --surface-sunken:      var(--wb-mist);
  --surface-inverse:     var(--wb-slate-600);
  --surface-inverse-deep:var(--wb-slate-900);
  --surface-accent:      var(--wb-pink-500);
  --surface-accent-soft: var(--wb-pink-100);
  --surface-overlay:     rgba(34, 38, 44, 0.55);

  --text-primary:   var(--wb-slate-900);
  --text-secondary: var(--wb-slate-600);
  --text-muted:     var(--wb-slate-500); /* AA-kontrast: #646B76 ~5:1 paa lys */
  --text-accent:    var(--wb-pink-600);  /* AA-kontrast: #B41560 paa lys tekst */
  --text-on-dark:   var(--wb-white);
  --text-on-dark-muted: rgba(255, 255, 255, 0.72);
  --text-on-accent: var(--wb-white);

  --border-subtle: var(--wb-slate-100);
  --border-default: var(--wb-slate-200);
  --border-strong: var(--wb-slate-400);
  --border-accent: var(--wb-pink-500);
  --border-on-dark: rgba(255, 255, 255, 0.16);
  --hairline: 1px;

  --accent:            var(--wb-pink-500);
  --accent-hover:      var(--wb-pink-600);
  --accent-active:     var(--wb-pink-700);
  --accent-ring:       rgba(227, 28, 121, 0.28);
  --link:              var(--wb-pink-600);
  --link-hover:        var(--wb-pink-700);
  --neutral-hover:     var(--wb-mist);
  --neutral-active:    var(--wb-slate-100);
  --focus-ring: 0 0 0 3px var(--accent-ring);
  --disabled-opacity: 0.45;

  --status-success: var(--wb-green-500);
  --status-success-soft: var(--wb-green-100);
  --status-warning: var(--wb-amber-500);
  --status-warning-soft: var(--wb-amber-100);
  --status-danger: var(--wb-red-500);
  --status-danger-soft: var(--wb-red-100);
}

.wb-on-dark {
  --text-primary: var(--wb-white);
  --text-secondary: rgba(255, 255, 255, 0.72);
  --text-muted: rgba(255, 255, 255, 0.56);
  --border-subtle: rgba(255, 255, 255, 0.12);
  --border-default: rgba(255, 255, 255, 0.2);
  --surface-card: rgba(255, 255, 255, 0.06);
  --surface-card-subtle: rgba(255, 255, 255, 0.04);
  --link: var(--wb-pink-300);
  --link-hover: var(--wb-white);
  color: var(--text-primary);
}

/* ---------- tokens/spacing.css ---------- */
:root {
  --space-3xs: clamp(0.25rem, 0.229rem + 0.09vw, 0.3125rem);
  --space-2xs: clamp(0.5rem, 0.458rem + 0.19vw, 0.625rem);
  --space-xs:  clamp(0.75rem, 0.667rem + 0.37vw, 1rem);
  --space-sm:  clamp(1rem, 0.917rem + 0.37vw, 1.25rem);
  --space-md:  clamp(1.5rem, 1.333rem + 0.74vw, 2rem);
  --space-lg:  clamp(2rem, 1.667rem + 1.48vw, 3rem);
  --space-xl:  clamp(3rem, 2.5rem + 2.22vw, 4.5rem);
  --space-2xl: clamp(4rem, 3.167rem + 3.7vw, 6.5rem);
  --space-3xl: clamp(5rem, 3.333rem + 7.41vw, 10rem);

  --gutter: clamp(1.25rem, 0.9rem + 1.6vw, 3rem);
  --container-max: 1240px;
  --container-narrow: 820px;
  --container: min(var(--container-max), 100% - (2 * var(--gutter)));
  --section-y: clamp(3.5rem, 2rem + 6.7vw, 8rem);
  --section-y-tight: clamp(2.5rem, 1.667rem + 3.7vw, 4.5rem);
  --grid-gap: clamp(1rem, 0.583rem + 1.85vw, 2rem);
  --stack-gap: var(--space-sm);
  --card-pad: clamp(1.25rem, 0.9rem + 1.6vw, 2rem);
  --control-h: clamp(2.75rem, 2.625rem + 0.56vw, 3.125rem);
  --control-h-sm: 2.5rem;
  --control-pad-x: clamp(1rem, 0.833rem + 0.74vw, 1.5rem);

  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: clamp(0.625rem, 0.583rem + 0.19vw, 0.75rem);
  --radius-lg: clamp(0.875rem, 0.75rem + 0.56vw, 1.25rem);
  --radius-xl: clamp(1.25rem, 1rem + 1.11vw, 2rem);
  --radius-pill: 999px;

  --shadow-xs: 0 1px 2px rgba(34, 38, 44, 0.06);
  --shadow-sm: 0 2px 6px rgba(34, 38, 44, 0.07);
  --shadow-md: 0 8px 20px -6px rgba(34, 38, 44, 0.14), 0 2px 6px rgba(34, 38, 44, 0.05);
  --shadow-lg: 0 22px 48px -16px rgba(34, 38, 44, 0.22), 0 4px 12px rgba(34, 38, 44, 0.06);
  --shadow-accent: 0 12px 28px -10px rgba(227, 28, 121, 0.5);
  --shadow-inset: inset 0 1px 0 rgba(255, 255, 255, 0.6);

  --ease-out: cubic-bezier(0.2, 0.7, 0.25, 1);
  --ease-in-out: cubic-bezier(0.5, 0, 0.2, 1);
  --dur-fast: 140ms;
  --dur: 240ms;
  --dur-slow: 420ms;
  --transition-control: background-color var(--dur-fast) var(--ease-out),
    color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out),
    box-shadow var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);

  --z-header: 100;
  --z-dropdown: 200;
  --z-overlay: 300;
  --z-dialog: 310;
  --z-toast: 400;
}

/* ---------- tokens/base.css ---------- */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 88px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--surface-page);
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: var(--type-body-size);
  font-weight: var(--fw-regular);
  line-height: var(--lh-body);
  letter-spacing: var(--ls-normal);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: 'ss01' 1, 'ss02' 1, 'cv11' 1, 'kern' 1;
  overflow-x: hidden;
}

[id] { scroll-margin-top: calc(88px + var(--space-md)); }

h1, h2, h3, h4, h5, h6 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-display);
  text-wrap: balance;
  color: var(--text-primary);
}
h1 { font-size: var(--type-h1-size); line-height: var(--lh-display); }
h2 { font-size: var(--type-h2-size); }
h3 { font-size: var(--type-h3-size); font-weight: var(--fw-bold); }
h4 { font-size: var(--type-h4-size); font-weight: var(--fw-bold); }

p { margin: 0; text-wrap: pretty; }

a {
  color: var(--link);
  text-decoration: none;
  text-underline-offset: 0.18em;
  transition: color var(--dur-fast) var(--ease-out);
}
a:hover { color: var(--link-hover); text-decoration: underline; }
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

img, svg, video { display: block; max-width: 100%; }
hr { border: 0; border-top: var(--hairline) solid var(--border-subtle); margin: var(--space-lg) 0; }

::selection { background: rgba(227, 28, 121, 0.14); color: var(--wb-pink-700); }
.wb-on-dark ::selection { background: rgba(245, 138, 184, 0.24); color: var(--wb-white); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* ---------- tokens/animation.css ---------- */
:root{
  --ease-lux: cubic-bezier(.16,1,.3,1);
  --dur-reveal: 1150ms;
  --dur-image: 1600ms;
  --dur-hover: 700ms;
  --step: 90ms;
}

/* vægt-system: Schibsted Grotesk bærer overskrifter (400–500), Switzer bærer tekst (400–600) */
h1,h2,h3,h4{letter-spacing:-0.02em}
h1{font-weight:400;letter-spacing:-0.022em}
h2{font-weight:400;line-height:1.14;letter-spacing:-0.02em}
h3{font-weight:500;letter-spacing:-0.015em}
h4{font-weight:500}

.c{width:min(1320px,100% - (2 * var(--gutter)));margin-inline:auto}
.c--narrow{width:min(760px,100% - (2 * var(--gutter)))}
.s{padding-block:var(--space-3xl)}
.s--subtle{background:var(--surface-subtle)}
.s--inverse{background:var(--surface-inverse)}
.s--tight{padding-block:var(--space-2xl)}
.rule{height:var(--hairline);background:var(--border-subtle);transform:scaleX(0);transform-origin:left;
  transition:transform 1.4s var(--ease-lux)}
.is-in .rule,.rule.is-in{transform:none}

/* ---- linjemaske: tekst stiger op bag en kant ---- */
.rl{display:block;overflow:hidden;padding-block:.06em}
.rl > span{display:block;transform:translateY(110%);
  transition:transform var(--dur-reveal) var(--ease-lux);transition-delay:calc(var(--i,0) * var(--step))}
.is-in .rl > span{transform:none}

/* ---- blødt løft for alt andet ---- */
.up{opacity:0;transform:translateY(20px);
  transition:opacity 900ms var(--ease-lux),transform 900ms var(--ease-lux);
  transition-delay:calc(var(--i,0) * var(--step))}
.is-in .up,.up.is-in{opacity:1;transform:none}

/* ---- billede: afsløres nedefra mens det zoomer ud ---- */
.rimg{position:relative;overflow:hidden;border-radius:var(--radius-md);background:var(--wb-mist);
  clip-path:inset(0 0 100% 0);transition:clip-path var(--dur-image) var(--ease-lux);
  transition-delay:calc(var(--i,0) * var(--step))}
.rimg > *{display:block;width:100%;height:100%;transform:scale(1.16);
  transition:transform var(--dur-image) var(--ease-lux);
  transition-delay:calc(var(--i,0) * var(--step))}
.is-in .rimg{clip-path:inset(0 0 0 0)}
.is-in .rimg > *{transform:none}
a:hover .is-in .rimg > *, .is-in a:hover .rimg > *{transform:scale(1.05);transition-duration:var(--dur-hover)}
.rimg > img{object-fit:cover;object-position:center}
.tile__img img,.case__img img{width:100%;height:100%;object-fit:cover}

.kicker{font-size:var(--type-eyebrow-size);font-weight:var(--fw-medium);letter-spacing:var(--ls-eyebrow);
  text-transform:uppercase;color:var(--text-muted);margin:0 0 var(--space-md)}
.kicker--accent{color:var(--text-accent)}
/* ledende hairline på sektionshoveder */
.head .kicker{display:inline-flex;align-items:center;gap:.75em}
.head .kicker::before{content:'';width:1.75em;height:1px;background:currentColor;opacity:.5;
  transform:scaleX(0);transform-origin:left;transition:transform 900ms var(--ease-lux) 120ms}
.is-in .head .kicker::before,.head.is-in .kicker::before{transform:none}

/* ---- understreget versal-link, streg vokser fra venstre ---- */
.ul{position:relative;display:inline-block;font-size:var(--type-caption-size);font-weight:var(--fw-medium);
  letter-spacing:var(--ls-eyebrow);text-transform:uppercase;color:var(--text-primary);padding-bottom:.45em;
  transition:color var(--dur) var(--ease-out)}
.ul::before,.ul::after{content:'';position:absolute;left:0;right:0;bottom:0;height:var(--hairline)}
.ul::before{background:var(--border-strong)}
.ul::after{background:var(--accent);transform:scaleX(0);transform-origin:left;
  transition:transform 560ms var(--ease-lux)}
a:hover .ul::after,.ul:hover::after{transform:none}
a:hover .ul,.ul:hover{color:var(--accent);text-decoration:none}
.wb-on-dark .ul{color:var(--wb-white)}
.wb-on-dark .ul::before{background:var(--border-default)}
.wb-on-dark .ul::after{background:var(--wb-pink-300)}

.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:.6em;
  min-height:var(--control-h);padding-inline:var(--space-xl);border:0;border-radius:var(--radius-pill);
  background:var(--surface-accent);color:var(--text-on-accent);overflow:hidden;cursor:pointer;
  appearance:none;-webkit-appearance:none;font-family:var(--font-body);
  font-size:var(--type-button-size);font-weight:var(--fw-semibold);letter-spacing:.006em;
  transition:box-shadow var(--dur) var(--ease-out),transform var(--dur) var(--ease-lux)}
.btn span{position:relative;z-index:1}
.btn__arrow{position:relative;z-index:1;font-style:normal;transition:transform 520ms var(--ease-lux)}
.btn:hover .btn__arrow{transform:translateX(4px)}
.btn::after{content:'';position:absolute;inset:0;background:var(--wb-slate-900);
  transform:translateY(101%);transition:transform 620ms var(--ease-lux)}
.btn:hover{color:var(--text-on-accent);text-decoration:none;box-shadow:var(--shadow-lg);transform:translateY(-2px)}
.btn:active{transform:translateY(0)}
.btn:hover::after{transform:none}
.btn--ghost{background:none;color:var(--text-primary);border:var(--hairline) solid var(--border-strong)}
.btn--ghost::after{background:var(--wb-slate-900)}
.btn--ghost:hover{color:var(--wb-white);border-color:var(--wb-slate-900)}
.wb-on-dark .btn--ghost{color:var(--wb-white);border-color:var(--border-on-dark)}
.wb-on-dark .btn--ghost::after{background:var(--wb-white)}
.wb-on-dark .btn--ghost:hover{color:var(--wb-slate-900)}
@media(prefers-reduced-motion:reduce){.btn:hover{transform:none}}

/* ---------------- header ---------------- */
.hdr{position:fixed;inset-block-start:0;inset-inline:0;z-index:var(--z-header);
  transition:background 700ms var(--ease-lux),box-shadow 700ms var(--ease-lux),transform 700ms var(--ease-lux)}
.hdr__in{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:var(--space-md);min-height:88px;
  transition:min-height 700ms var(--ease-lux)}
.hdr.is-solid .hdr__in{min-height:72px}
.hdr.is-solid{background:rgba(255,255,255,.82);backdrop-filter:blur(20px) saturate(1.4);
  -webkit-backdrop-filter:blur(20px) saturate(1.4);box-shadow:0 var(--hairline) 0 var(--border-subtle)}
.hdr__mark svg{transition:transform 700ms var(--ease-lux)}
.hdr.is-solid .hdr__mark svg{transform:scale(.92)}
.hdr.is-hidden{transform:translateY(-100%)}
.hdr__mark{justify-self:center}
.hdr__mark svg,.hdr__mark img{height:30px;width:auto}
.ftr__mark img{height:30px;width:auto}
.mark--dark{display:none}
.hdr.is-solid .mark--light{display:none}
.hdr.is-solid .mark--dark{display:block}
.hdr nav{display:flex;gap:var(--space-lg);align-items:center}
.hdr nav.r{justify-self:end}
.hdr nav a{position:relative;font-size:var(--type-eyebrow-size);font-weight:var(--fw-medium);
  letter-spacing:var(--ls-eyebrow);text-transform:uppercase;color:rgba(255,255,255,.72);white-space:nowrap;
  transition:color var(--dur) var(--ease-out)}
.hdr nav a::after{content:'';position:absolute;left:0;right:0;bottom:-6px;height:1px;background:currentColor;
  transform:scaleX(0);transform-origin:left;transition:transform 480ms var(--ease-lux)}
.hdr nav a:hover{color:var(--wb-white);text-decoration:none}
.hdr nav a:hover::after{transform:none}
.hdr.is-solid nav a{color:var(--text-secondary)}
.hdr.is-solid nav a:hover{color:var(--accent)}
/* undersider uden mørk hero: header solid fra start */
.hdr--solid{background:rgba(255,255,255,.82);backdrop-filter:blur(20px) saturate(1.4);
  -webkit-backdrop-filter:blur(20px) saturate(1.4);box-shadow:0 var(--hairline) 0 var(--border-subtle)}
.hdr--solid .hdr__in{min-height:72px}
.hdr--solid .mark--light{display:none}
.hdr--solid .mark--dark{display:block}
.hdr--solid nav a{color:var(--text-secondary)}
.hdr--solid nav a:hover{color:var(--accent)}
@media(max-width:900px){.hdr nav{display:none}.hdr__in{grid-template-columns:1fr}}

/* ---------------- mobil-menu ---------------- */
.hdr__burger{display:none}
@media(max-width:900px){
  .hdr__burger{display:inline-flex;flex-direction:column;justify-content:center;gap:5px;
    position:fixed;top:22px;right:var(--gutter);z-index:calc(var(--z-overlay) + 1);
    width:44px;height:44px;padding:11px;background:none;border:0;cursor:pointer}
  .hdr__burger span{display:block;height:1.5px;width:22px;background:rgba(255,255,255,.92);border-radius:2px;
    transition:transform .45s var(--ease-lux),background .5s var(--ease-lux)}
  .hdr__burger.is-solid span,.hdr--solid ~ .hdr__burger span{background:var(--text-primary)}
  .hdr__burger[aria-expanded="true"] span{background:var(--wb-white)}
  .hdr__burger[aria-expanded="true"] span:first-child{transform:translateY(3.25px) rotate(45deg)}
  .hdr__burger[aria-expanded="true"] span:last-child{transform:translateY(-3.25px) rotate(-45deg)}
}
.mnav{position:fixed;inset:0;z-index:var(--z-overlay);background:var(--surface-inverse-deep);
  display:flex;align-items:center;justify-content:center;opacity:0;visibility:hidden;
  transition:opacity .5s var(--ease-lux),visibility .5s}
.mnav.is-open{opacity:1;visibility:visible}
.mnav nav{display:flex;flex-direction:column;gap:var(--space-xs);text-align:center}
.mnav a{font-family:var(--font-display);font-size:var(--fs-2xl);font-weight:400;color:var(--wb-white);
  min-height:52px;padding:0 var(--space-md);display:inline-flex;align-items:center;justify-content:center;
  letter-spacing:-0.01em;opacity:0;transform:translateY(12px);
  transition:color var(--dur) var(--ease-out),opacity .5s var(--ease-lux),transform .5s var(--ease-lux)}
.mnav.is-open a{opacity:1;transform:none}
.mnav.is-open a:nth-child(1){transition-delay:.08s}
.mnav.is-open a:nth-child(2){transition-delay:.14s}
.mnav.is-open a:nth-child(3){transition-delay:.20s}
.mnav.is-open a:nth-child(4){transition-delay:.26s}
.mnav.is-open a:nth-child(5){transition-delay:.32s}
.mnav a:hover,.mnav a:active{color:var(--wb-pink-300);text-decoration:none}
@media(max-width:900px){
  .ftr ul a,.ftr__bot a,.contact__meta a,.head .ul,.intro .ul{display:inline-block;padding-block:8px}
}
@media(prefers-reduced-motion:reduce){
  .mnav,.mnav a,.hdr__burger span{transition-duration:.01ms!important}
  .mnav a{transform:none}
}

/* ---------------- hero ---------------- */
.hero{position:relative;height:100svh;min-height:620px;display:flex;align-items:flex-end;justify-content:center;
  overflow:hidden;background:var(--wb-slate-900)}
.hero__bg{position:absolute;inset:-8% 0;will-change:transform}
.hero__bg svg,.hero__bg img{width:100%;height:100%;object-fit:cover;object-position:50% 42%;transform:scale(1.14);
  transition:transform 2400ms var(--ease-lux)}
.hero.is-ready .hero__bg svg,.hero.is-ready .hero__bg img{transform:none}
.hero__veil{position:absolute;inset:0;
  background:
    radial-gradient(128% 82% at 62% 84%, rgba(34,38,44,0) 0%, rgba(34,38,44,.18) 60%, rgba(27,31,36,.52) 100%),
    linear-gradient(180deg, rgba(34,38,44,.5) 0%, rgba(34,38,44,0) 26%, rgba(34,38,44,0) 46%, rgba(27,31,36,.8) 100%)}
.hero__veil::after{content:'';position:absolute;inset:0;pointer-events:none;opacity:.055;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:140px 140px}
.hero__txt{position:relative;text-align:center;padding-bottom:var(--space-2xl);width:100%}
.hero h1{font-size:clamp(2rem,1.2rem + 3.4vw,3.6rem);font-weight:400;line-height:1.12;
  letter-spacing:-0.022em;color:var(--wb-white);max-width:20ch;margin-inline:auto}
.hero .kicker{color:rgba(255,255,255,.64);margin-bottom:var(--space-lg);justify-content:center}
.hero .kicker::after{content:'';width:1.75em;height:1px;background:currentColor;opacity:.5}
.hero .kicker{display:inline-flex;align-items:center;gap:.85em}
.hero .kicker::before{content:'';width:1.75em;height:1px;background:currentColor;opacity:.5}
.hero__lead{color:rgba(255,255,255,.8);max-width:46ch;margin:var(--space-md) auto 0;
  font-size:var(--type-lead-size);line-height:var(--lh-snug)}
.cue{display:inline-flex;flex-direction:column;align-items:center;gap:var(--space-2xs);margin-top:var(--space-lg);
  font-size:var(--type-eyebrow-size);font-weight:var(--fw-medium);letter-spacing:var(--ls-eyebrow);
  text-transform:uppercase;color:rgba(255,255,255,.75)}
.cue:hover{color:var(--wb-white);text-decoration:none}
.cue i{font-style:normal;font-size:1rem;animation:bob 2.8s var(--ease-in-out) infinite}
@keyframes bob{0%,100%{transform:none}50%{transform:translateY(7px)}}
/* kompakt hero til undersider */
.hero--page{height:min(76svh,760px);min-height:460px}
.hero--page .hero__bg img{object-position:50% 46%}

/* ---------------- marquee ---------------- */
.mq{overflow:hidden;border-block:var(--hairline) solid var(--border-subtle);padding-block:var(--space-lg);
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 9%,#000 91%,transparent 100%);
  mask-image:linear-gradient(90deg,transparent 0,#000 9%,#000 91%,transparent 100%)}
.mq__t{display:flex;width:max-content;animation:slide 58s linear infinite}
.mq:hover .mq__t{animation-play-state:paused}
.mq__t > span{display:flex;align-items:center;gap:var(--space-xl);padding-right:var(--space-xl);
  font-family:var(--font-display);font-size:var(--fs-xl);font-weight:400;letter-spacing:-0.01em;
  color:var(--text-muted);white-space:nowrap}
.mq__t em{font-style:normal;color:var(--accent);font-size:.42em;transform:translateY(-0.1em)}
@keyframes slide{from{transform:none}to{transform:translateX(-50%)}}

/* ---------------- intro ---------------- */
.intro{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--space-lg) var(--space-3xl);align-items:start}
.intro h2{font-size:var(--fs-4xl);max-width:14ch}
.intro__lead{font-size:var(--type-lead-size);line-height:var(--lh-snug);color:var(--text-primary);margin-bottom:var(--space-md)}
.intro p.body{color:var(--text-muted);font-size:var(--type-small-size);line-height:var(--lh-loose);
  margin-bottom:var(--space-sm);max-width:var(--measure-body)}
.intro .ul{margin-top:var(--space-md)}
@media(max-width:900px){.intro{grid-template-columns:1fr;gap:var(--space-md)}}

.head{display:flex;justify-content:space-between;align-items:flex-end;gap:var(--space-md);flex-wrap:wrap;
  margin-bottom:var(--space-2xl)}
.head h2{font-size:var(--fs-3xl);max-width:16ch}

/* ---------------- grid3 (tiles) ---------------- */
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-2xl) var(--space-lg)}
.tile__img{aspect-ratio:4/3}
.tile__img svg{width:100%;height:100%;object-fit:cover}
.tile h3{font-size:var(--type-h3-size);font-weight:var(--fw-regular);margin:var(--space-sm) 0 var(--space-2xs)}
.tile p{color:var(--text-muted);font-size:var(--type-small-size);line-height:var(--lh-snug);
  margin-bottom:var(--space-sm);max-width:38ch}
.tile:hover{text-decoration:none}
.tile:hover h3{color:var(--accent)}
@media(max-width:900px){.grid3{grid-template-columns:1fr 1fr}}
@media(max-width:620px){.grid3{grid-template-columns:1fr}}

/* ---------------- cases ---------------- */
.cases{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--space-3xl) var(--space-lg)}
.case--full{grid-column:1 / -1}
.case__img svg{width:100%;height:100%;object-fit:cover}
.case__meta{display:flex;justify-content:space-between;gap:var(--space-sm);margin:var(--space-sm) 0 var(--space-2xs);
  font-size:var(--type-eyebrow-size);font-weight:var(--fw-medium);letter-spacing:var(--ls-eyebrow);
  text-transform:uppercase;color:var(--text-muted)}
.case h3{font-size:var(--type-h3-size);font-weight:var(--fw-regular);max-width:24ch}
.case:hover{text-decoration:none}
.case:hover h3{color:var(--accent)}
@media(max-width:760px){.cases{grid-template-columns:1fr}}

/* ---------------- bevis ---------------- */
.proof{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--space-lg)}
.proof__i{position:relative;padding-top:var(--space-md)}
.proof__i::before{content:'';position:absolute;inset-block-start:0;inset-inline:0;height:var(--hairline);
  background:var(--border-default);transform:scaleX(0);transform-origin:left;
  transition:transform 1100ms var(--ease-lux);transition-delay:calc(var(--i,0) * var(--step))}
.is-in .proof__i::before{transform:none}
.proof__k{display:block;font-family:var(--font-display);font-size:var(--fs-3xl);font-weight:400;
  letter-spacing:-0.02em;margin-bottom:var(--space-xs);color:var(--text-primary)}
.proof__i p{color:var(--text-secondary);font-size:var(--type-small-size);line-height:var(--lh-snug);max-width:26ch}
@media(prefers-reduced-motion:reduce){.proof__i::before{transform:none}}
@media(max-width:880px){.proof{grid-template-columns:1fr 1fr}}
@media(max-width:500px){.proof{grid-template-columns:1fr}}

/* ---------------- kontakt ---------------- */
.contact{text-align:center}
.contact h2{font-size:var(--fs-4xl);max-width:18ch;margin:0 auto var(--space-md)}
.contact p{color:var(--text-muted);max-width:52ch;margin:0 auto var(--space-lg);line-height:var(--lh-loose)}
.contact__meta{margin-top:var(--space-lg);font-size:var(--type-small-size);color:var(--text-muted);line-height:var(--lh-loose)}
.contact__meta a{color:var(--text-secondary)}
.contact__meta a:hover{color:var(--accent);text-decoration:none}

/* ---------------- footer ---------------- */
.ftr{background:var(--surface-inverse-deep);padding-block:var(--space-2xl) var(--space-lg)}
.ftr__top{display:flex;justify-content:space-between;gap:var(--space-2xl);flex-wrap:wrap;
  padding-bottom:var(--space-lg);border-bottom:var(--hairline) solid var(--border-subtle)}
.ftr__mark svg{height:30px;width:auto}
.ftr__cols{display:flex;gap:var(--space-2xl);flex-wrap:wrap}
.ftr h4,.ftr__h{font-size:var(--type-eyebrow-size);font-weight:var(--fw-medium);letter-spacing:var(--ls-eyebrow);
  text-transform:uppercase;color:var(--text-muted);margin:0 0 var(--space-sm)}
.ftr ul{list-style:none;margin:0;padding:0;font-size:var(--type-small-size);line-height:2}
.ftr ul a{color:var(--text-secondary)}
.ftr ul a:hover{color:var(--wb-white);text-decoration:none}
.ftr__bot{display:flex;justify-content:space-between;gap:var(--space-sm);flex-wrap:wrap;
  padding-top:var(--space-md);font-size:var(--type-caption-size);color:var(--text-muted)}

/* ---------------- eksklusive micro-interaktioner ---------------- */
.tile,.case{transition:transform var(--dur-slow) var(--ease-lux)}
.tile:hover,.case:hover{transform:translateY(-6px)}
.hero .rl > span{filter:blur(9px);
  transition:transform var(--dur-reveal) var(--ease-lux),filter var(--dur-reveal) var(--ease-lux);
  transition-delay:calc(var(--i,0) * var(--step))}
.hero__txt.is-in .rl > span{filter:none}
.hdr nav a.is-active{color:var(--wb-white)}
.hdr nav a.is-active::after{transform:none}
.hdr.is-solid nav a.is-active,.hdr--solid nav a.is-active{color:var(--accent)}

/* ============================================================= */
/* ============ undersider: fælles komponenter ================= */
/* ============================================================= */

/* --- lys sidehoved (venstrestillet) til artikel/term/arkiv --- */
.phead{padding-block:calc(88px + var(--space-2xl)) var(--space-xl);border-bottom:var(--hairline) solid var(--border-subtle)}
.phead .crumb{margin-bottom:var(--space-md)}
.phead h1{font-size:var(--fs-4xl);max-width:22ch}
.phead__lead{color:var(--text-muted);font-size:var(--type-lead-size);line-height:var(--lh-snug);max-width:var(--measure-body);margin-top:var(--space-md)}
.phead__meta{display:flex;gap:var(--space-md);flex-wrap:wrap;margin-top:var(--space-lg);
  font-size:var(--type-eyebrow-size);font-weight:var(--fw-medium);letter-spacing:var(--ls-eyebrow);
  text-transform:uppercase;color:var(--text-muted)}

.crumb{font-size:var(--type-eyebrow-size);font-weight:var(--fw-medium);letter-spacing:var(--ls-eyebrow);
  text-transform:uppercase;color:var(--text-muted)}
.crumb a{color:var(--text-muted)}
.crumb a:hover{color:var(--accent);text-decoration:none}

/* --- prosa (artikel/term/case-brødtekst) --- */
.prose{max-width:var(--measure-body)}
.prose > * + *{margin-top:var(--space-md)}
.prose h2{font-size:var(--fs-2xl);margin-top:var(--space-xl);max-width:24ch}
.prose h3{font-size:var(--fs-xl);margin-top:var(--space-lg)}
.prose p{color:var(--text-secondary);line-height:var(--lh-loose)}
.prose ul,.prose ol{color:var(--text-secondary);padding-left:1.25em;line-height:var(--lh-loose);margin:0}
.prose li + li{margin-top:var(--space-2xs)}
.prose img{border-radius:var(--radius-md);margin-block:var(--space-lg)}
.prose strong{color:var(--text-primary);font-weight:var(--fw-semibold)}
.prose blockquote{margin:var(--space-lg) 0;padding:0;border:0;
  font-family:var(--font-display);font-size:var(--fs-xl);font-weight:400;line-height:1.3;color:var(--text-primary)}
.prose__lead{font-size:var(--type-lead-size);color:var(--text-primary);line-height:var(--lh-snug)}

/* --- to-kolonne split --- */
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--space-3xl);align-items:center}
.split--top{align-items:start}
.split__media img{width:100%;border-radius:var(--radius-md);aspect-ratio:4/3;object-fit:cover}
@media(max-width:860px){.split{grid-template-columns:1fr;gap:var(--space-lg)}}

/* --- leverancer / features --- */
.deliver{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--space-lg) var(--space-2xl)}
.deliver__i{padding-top:var(--space-md);border-top:var(--hairline) solid var(--border-default)}
.deliver__n{display:block;font-family:var(--font-display);font-size:var(--type-caption-size);
  color:var(--text-muted);margin-bottom:var(--space-xs);letter-spacing:.04em}
.deliver__i h3{font-size:var(--type-h4-size);font-weight:500;margin-bottom:var(--space-2xs)}
.deliver__i p{color:var(--text-muted);font-size:var(--type-small-size);line-height:var(--lh-snug)}
@media(max-width:640px){.deliver{grid-template-columns:1fr}}

/* --- case: opgave/løsning/resultat --- */
.pillars{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-xl) var(--space-lg)}
.pillar{padding-top:var(--space-md);border-top:var(--hairline) solid var(--border-default)}
.pillar h3{font-size:var(--type-h4-size);font-weight:500;margin-bottom:var(--space-sm)}
.pillar p{color:var(--text-secondary);font-size:var(--type-small-size);line-height:var(--lh-loose)}
@media(max-width:760px){.pillars{grid-template-columns:1fr;gap:var(--space-lg)}}

/* --- galleri --- */
.gallery{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--space-md)}
.gallery img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--radius-md)}
.gallery figure{margin:0}
.gallery figure:first-child{grid-column:1 / -1}
.gallery figure:first-child img{aspect-ratio:21/9}
@media(max-width:640px){.gallery{grid-template-columns:1fr}}

/* --- citat-blok --- */
.quote{text-align:center;max-width:42ch;margin-inline:auto}
.quote p{font-family:var(--font-display);font-size:var(--fs-2xl);font-weight:400;line-height:1.32;color:var(--text-primary)}
.wb-on-dark .quote p{color:var(--wb-white)}
.quote cite{display:block;margin-top:var(--space-md);font-style:normal;font-size:var(--type-caption-size);
  color:var(--text-muted);letter-spacing:var(--ls-eyebrow);text-transform:uppercase}

/* --- CTA-band --- */
.cta{text-align:center}
.cta h2{font-size:var(--fs-4xl);max-width:20ch;margin:0 auto var(--space-md)}
.cta p{color:var(--text-muted);max-width:52ch;margin:0 auto var(--space-lg);line-height:var(--lh-loose)}
.wb-on-dark .cta p{color:rgba(255,255,255,.72)}

/* --- arkiv: filter-chips --- */
.filters{display:flex;flex-wrap:wrap;gap:var(--space-2xs);margin-bottom:var(--space-2xl)}
.chip{border:var(--hairline) solid var(--border-default);border-radius:var(--radius-pill);
  padding:.55em 1.15em;font:inherit;font-size:var(--type-caption-size);letter-spacing:.02em;
  color:var(--text-secondary);background:none;cursor:pointer;min-height:38px;
  transition:var(--transition-control)}
.chip:hover{border-color:var(--border-strong);color:var(--text-primary)}
.chip[aria-pressed="true"]{background:var(--wb-slate-900);border-color:var(--wb-slate-900);color:var(--wb-white)}

/* --- ordbog A–Å --- */
.alpha{display:flex;flex-wrap:wrap;gap:.35em;margin-bottom:var(--space-2xl)}
.alpha a{width:2.1em;height:2.1em;display:inline-flex;align-items:center;justify-content:center;
  border-radius:var(--radius-sm);font-size:var(--type-small-size);color:var(--text-secondary);
  border:var(--hairline) solid var(--border-subtle);transition:var(--transition-control)}
.alpha a:hover{background:var(--wb-slate-900);color:var(--wb-white);border-color:var(--wb-slate-900);text-decoration:none}
.glossary{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:var(--space-md)}
/* ordbog: grupper pr. bogstav */
.gloss-group{display:grid;grid-template-columns:4.5rem 1fr;gap:var(--space-lg) var(--space-xl);align-items:start;
  padding-block:var(--space-2xl);border-top:var(--hairline) solid var(--border-subtle)}
.gloss-group:first-of-type{border-top:0;padding-top:var(--space-sm)}
.gloss-letter{font-family:var(--font-display);font-size:var(--fs-5xl);font-weight:700;color:var(--wb-slate-100);
  line-height:.85;letter-spacing:-0.04em;position:sticky;top:96px}
.gloss-group .glossary{margin:0;grid-template-columns:repeat(auto-fill,minmax(260px,1fr))}
@media(max-width:720px){
  .gloss-group{grid-template-columns:1fr;gap:var(--space-2xs);padding-block:var(--space-lg)}
  .gloss-letter{position:static;font-size:var(--fs-3xl)}
}
.term-card{display:block;padding:var(--space-md);border:var(--hairline) solid var(--border-subtle);
  border-radius:var(--radius-md);background:var(--surface-card);transition:transform var(--dur-slow) var(--ease-lux),border-color var(--dur) var(--ease-out)}
.term-card:hover{border-color:var(--border-strong);transform:translateY(-4px);text-decoration:none}
.term-card__tag{display:inline-block;font-size:var(--type-eyebrow-size);font-weight:var(--fw-medium);
  letter-spacing:var(--ls-eyebrow);text-transform:uppercase;color:var(--text-accent);margin-bottom:var(--space-xs)}
.term-card h3{font-size:var(--type-h4-size);font-weight:500;margin-bottom:var(--space-2xs)}
.term-card:hover h3{color:var(--accent)}
.term-card p{color:var(--text-muted);font-size:var(--type-small-size);line-height:var(--lh-snug)}

/* --- formular --- */
.form{display:grid;gap:var(--space-md);max-width:520px}
.form__row{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-md)}
@media(max-width:560px){.form__row{grid-template-columns:1fr}}
.field{display:grid;gap:var(--space-2xs)}
.field label{font-size:var(--type-small-size);font-weight:var(--fw-medium);color:var(--text-secondary)}
.field input,.field textarea,.field select{font:inherit;font-size:var(--type-body-size);color:var(--text-primary);
  background:var(--surface-card);border:var(--hairline) solid var(--border-default);border-radius:var(--radius-sm);
  padding:.7em .9em;min-height:44px;transition:var(--transition-control)}
.field textarea{min-height:140px;resize:vertical}
.field input:focus,.field textarea:focus,.field select:focus{border-color:var(--accent);box-shadow:var(--focus-ring);outline:none}
.form .btn{justify-self:start;margin-top:var(--space-2xs)}
.form__note{font-size:var(--type-caption-size);color:var(--text-muted)}
.field--error input,.field--error textarea,.field--error select{border-color:var(--status-danger)}
.field--error input:focus,.field--error textarea:focus,.field--error select:focus{border-color:var(--status-danger);box-shadow:0 0 0 3px rgba(196,50,31,.18)}
.field__error{font-size:var(--type-caption-size);color:var(--status-danger);margin-top:2px}

/* --- team-grid (om os) --- */
.team{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-2xl) var(--space-lg)}
.member__img{aspect-ratio:4/5;border-radius:var(--radius-md);overflow:hidden;background:var(--wb-mist)}
.member__img img{width:100%;height:100%;object-fit:cover}
.member h3{font-size:var(--type-h4-size);font-weight:500;margin:var(--space-sm) 0 2px}
.member p{color:var(--text-muted);font-size:var(--type-small-size)}
@media(max-width:760px){.team{grid-template-columns:1fr 1fr}}
@media(max-width:480px){.team{grid-template-columns:1fr}}

/* --- artikel-liste (viden-arkiv) --- */
.postlist{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-2xl) var(--space-lg)}
@media(max-width:900px){.postlist{grid-template-columns:1fr 1fr}}
@media(max-width:620px){.postlist{grid-template-columns:1fr}}

/* prev/next artikel */
.pager{display:flex;justify-content:space-between;gap:var(--space-md);flex-wrap:wrap;
  border-top:var(--hairline) solid var(--border-subtle);padding-top:var(--space-lg);margin-top:var(--space-2xl)}
.pager a{font-size:var(--type-small-size);color:var(--text-secondary)}
.pager a:hover{color:var(--accent);text-decoration:none}

/* reduceret bevægelse (undersider arver forsidens regler) */
@media(prefers-reduced-motion:reduce){
  .hero .rl > span{filter:none!important}
  .tile:hover,.case:hover,.term-card:hover{transform:none!important}
  .rl > span,.up,.rimg,.rimg > *,.rule,.hero__bg svg,.hero__bg img{transition:none!important;transform:none!important;
    opacity:1!important;clip-path:none!important}
  .mq__t{animation:none}
  .cue i{animation:none}
  .hero__bg{inset:0}
}