/* Morten Skov · Blæk-designsystemet
   Kalkhvid grund, næsten sort blæk og koboltblå som detalje. Kun Manrope (ingen serif). Ingen orange.
   Overskrifter brydes pænt og harmonisk (text-wrap: balance), aldrig et ensomt ord på sidste linje.
   Alle komponenter bygger på disse variabler. */

:root {
  /* ---------- Kalk (neutrale flader, næsten hvide med en svag varme) ---------- */
  --kalk-50:  #ffffff;  /* kort og løftede flader */
  --kalk-100: #f3f6fb;  /* sidebaggrund, let blåt skær */
  --kalk-200: #e9eef7;  /* flade 1 */
  --kalk-300: #dde4f0;  /* flade 2, hover */
  --kalk-400: #c8ced9;  /* stærk kant */
  --kalk-600: #7d879a;  /* dekorative ikoner */

  /* ---------- Blæk (næsten sort, uden blåt skær) ---------- */
  --blaek-900: #141b1c; /* tekst, mørke sektioner, knapper */
  --blaek-800: #1c2526;
  --blaek-700: #2a3537;
  --blaek-600: #3a4647;
  --blaek-500: #566365;
  --blaek-300: #a7b3b3;
  --blaek-100: #e2e6ec;

  /* ---------- Koboltblå (detaljefarve og primær) ---------- */
  --kobolt-800: #2a457d; /* hover */
  --kobolt-700: #3f66b6; /* ord i overskrifter, kickers, links, mærker */
  --kobolt-500: #568af0; /* lys ende af gradienter */
  --kobolt-400: #78a8ff; /* detalje på mørke flader */
  --kobolt-100: #dbe7ff; /* lys tone: markeringer og flader */

  /* ---------- Accent (detaljefarven) ---------- */
  --accent: var(--kobolt-700);
  --accent-soft: #4d7fde;
  --accent-text: #385ea7;  /* kobolt til lille tekst på tonede flader (AA) */
  --accent-on-dark: var(--kobolt-700);
  --accent-rgb: 63 102 182;
  --on-accent: #ffffff;

  /* ---------- Semantisk ---------- */
  --bg: var(--kalk-100);
  --surface: #eef1f6;   /* kølig, let kobolt-tonet flade, så den ikke clasher med --tint */
  --surface-2: var(--kalk-300);
  --raised: var(--kalk-50);
  --line: rgba(20, 27, 28, .13);
  --line-strong: rgba(20, 27, 28, .24);
  --text: var(--blaek-900);
  --text-muted: #454d4e;
  --text-subtle: var(--blaek-500);
  --primary: var(--kobolt-700);
  --primary-hover: var(--kobolt-800);
  --on-primary: #ffffff;
  --positive: var(--kobolt-800);   /* kun til +% i tal og grafer */
  --signal: var(--accent);  /* kontrastfarve: sparsomt, mest på mørke flader */
  --on-signal: #ffffff;
  --focus: var(--kobolt-700);

  /* Tonet sektion (afslutning, footer, fremhævede kort): lys kobolt, ikke mørk */
  --tint: #e7eef9;
  --tint-2: #dae5f8;
  --dark-bg: var(--tint);
  --dark-text: var(--text);
  --dark-muted: var(--text-muted);
  --dark-line: rgba(63, 102, 182, .16);

  /* ---------- Typografi ---------- */
  --font: 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --fs-display: clamp(2.4rem, 4.6vw, 3.5rem);  /* 56 */
  --fs-h1: clamp(2.1rem, 3.6vw, 2.625rem);     /* 42 */
  --fs-h2: clamp(1.7rem, 2.6vw, 2rem);          /* 32 */
  --fs-h3: 1.375rem;                            /* 22 */
  --fs-lead: 1.0625rem;                         /* 17 */
  --fs-body: 1rem;                              /* 16 */
  --fs-small: .875rem;                          /* 14 */
  --fs-label: .8125rem;                          /* 12, versaler */
  --fw-regular: 450;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-label: 700;
  --fw-heading: 750;   /* overskrifter og store tal: kraftige, så de popper */
  --lh-tight: 1.08;
  --lh-snug: 1.25;
  --lh-body: 1.6;
  --ls-display: -.03em;
  --ls-heading: -.02em;
  --ls-label: .1em;

  /* ---------- Afstand (4-trin) ---------- */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px; --sp-5: 24px;
  --sp-6: 32px; --sp-7: 48px; --sp-8: 64px; --sp-9: 96px; --sp-10: 128px;
  --gutter: clamp(20px, 4vw, 56px);
  --wrap: 1200px;
  --section: clamp(64px, 8vw, 104px);

  /* ---------- Form ---------- */
  --r-xs: 6px;    /* mærker i billeder, små flader */
  --r-s: 10px;    /* browser-rammer, kort i slider */
  --r-m: 14px;    /* kort, billeder */
  --r-l: 20px;    /* store sektionsflader */
  --r-pill: 999px;/* knapper, faner, mærker */

  --shadow-s: 0 1px 2px rgba(20, 27, 28, .06), 0 2px 8px rgba(20, 27, 28, .06);
  --shadow-m: 0 2px 4px rgba(20, 27, 28, .05), 0 18px 40px -18px rgba(20, 27, 28, .28);
  --shadow-l: 0 30px 70px -32px rgba(20, 27, 28, .45);

  /* ---------- Bevægelse ---------- */
  --ease: cubic-bezier(.2, .7, .1, 1);
  --ease-soft: cubic-bezier(.16, 1, .3, 1);   /* bløde, lange reveals */
  --t-fast: .2s;
  --t-base: .45s;
  --t-slow: .8s;
  --slide-interval: 2.2s;
}

/* MS Digital · Blæk på kalk. Bygger på tokens.css (lægges foran ved build). */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0; background: var(--bg); color: var(--text);
  font: var(--fw-regular) var(--fs-body)/var(--lh-body) var(--font);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden;
}
img, video { display: block; max-width: 100%; }
a { color: inherit; }
h1, h2, h3, p, figure, ol, ul, blockquote { margin: 0; }
ol, ul { padding: 0; list-style: none; }
::selection { background: var(--blaek-100); color: var(--text); }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; border-radius: 4px; }

.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }
.narrow-left > * { max-width: 760px; }
.sr, .skip:not(:focus) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip:focus { position: fixed; top: 12px; left: 12px; z-index: 100; background: var(--text); color: #fff; padding: 10px 16px; border-radius: var(--r-pill); }

/* ---------- Typografi ---------- */
/* Regel: overskrifter brydes pænt og harmonisk. Lige lange linjer, aldrig 1–2 ord alene på sidste linje.
   Accentfraser (span i overskrifter) holdes samlet. */
h1, h2, h3, .display, .hero-title, .manifesto-lines, .persona p, .end-band h2 { text-wrap: balance; }
p, li, blockquote { text-wrap: pretty; }
.display, h1.display, h2.display { font-weight: var(--fw-heading); letter-spacing: var(--ls-display); line-height: var(--lh-tight); }
h1.display { font-size: var(--fs-h1); }
h2.display { font-size: var(--fs-h2); letter-spacing: var(--ls-heading); line-height: 1.15; }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.kicker { font-size: var(--fs-label); font-weight: var(--fw-label); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--primary); margin-bottom: var(--sp-4); }
.lead { font-size: var(--fs-lead); line-height: var(--lh-body); color: var(--text-muted); margin-top: var(--sp-5); max-width: 52ch; }
.body-l { font-size: var(--fs-lead); line-height: var(--lh-body); color: var(--text-muted); }
.body-l p + p { margin-top: 1em; }
.note { color: var(--text-subtle); font-size: var(--fs-small); margin-top: var(--sp-4); }
.accent { color: var(--primary); }

/* A/B-mærker (kæden og cases) */
.pin { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; font: var(--fw-semibold) 11px/1 var(--font); border: 1.5px solid var(--text); color: var(--text); background: var(--raised); flex: none; }
.pin-b { background: var(--signal); border-color: var(--signal); color: var(--on-signal); }

/* ---------- Knapper og links ---------- */
.actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-top: var(--sp-6); }
.btn { display: inline-flex; align-items: center; gap: 8px; height: 46px; padding: 0 24px; border-radius: var(--r-pill); background: var(--primary); color: #fff; font: var(--fw-semibold) 14.5px/1 var(--font); text-decoration: none; border: 1px solid var(--primary); transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast), transform var(--t-fast) var(--ease); white-space: nowrap; }
.btn:hover { background: var(--primary-hover); border-color: var(--primary-hover); transform: translateY(-1px); }
.btn-ghost { background: transparent; color: var(--text); border-color: var(--line-strong); }
.btn-ghost:hover { background: transparent; border-color: var(--text); color: var(--text); }
.btn-small { height: 38px; padding: 0 18px; font-size: 13.5px; }
.link-arrow { font-weight: var(--fw-semibold); font-size: 14.5px; text-decoration: none; white-space: nowrap; color: var(--text); }
.link-arrow::after { content: ' →'; color: var(--primary); display: inline-block; transition: transform var(--t-fast) var(--ease); }
.link-arrow:hover::after { transform: translateX(3px); }

/* ---------- Header ---------- */
/* Svævende header: et hvidt kort med luft til kanterne (som People's Clinic) */
.site-header { position: sticky; top: 12px; z-index: 50; margin-top: 12px; }
.header-inner { position: relative; isolation: isolate; display: flex; align-items: center; gap: var(--sp-6); height: 74px; width: min(calc(100% - 2 * var(--gutter) + 100px), calc(100% - 24px)); max-width: calc(var(--wrap) - 2 * var(--gutter) + 100px); padding: 0 14px 0 26px; }
/* Kortets flade ligger i ::before, så blur ikke fanger den faste mobilmenu */
.header-inner::before { content: ''; position: absolute; inset: 0; z-index: -1; border-radius: 18px; background: rgba(255, 255, 255, .9); backdrop-filter: saturate(1.3) blur(14px); -webkit-backdrop-filter: saturate(1.3) blur(14px); border: 1px solid var(--line); box-shadow: 0 12px 32px -20px rgba(20, 27, 28, .35); transition: box-shadow var(--t-base); }
.site-header.scrolled .header-inner::before { box-shadow: 0 16px 40px -18px rgba(20, 27, 28, .45); }
.logo { display: flex; align-items: center; gap: 10px; text-decoration: none; margin-right: auto; }
.logo-text { font-weight: var(--fw-semibold); font-size: 17px; letter-spacing: -.02em; }
.logo-mark { display: flex; align-items: center; }
.logo-mark i { width: 10px; height: 10px; border-radius: 50%; border: 1.5px solid var(--text); font-size: 0; }
.logo-mark i:last-child { background: var(--primary); border-color: var(--primary); }
.logo-mark b { width: 11px; height: 1.5px; background: var(--text); }
/* Reveal ved indlæsning og ved hover (main.js genstarter den): ringen til venstre, så stregen ud fra den, til sidst prikken til højre */
.logo-mark i:first-child { animation: mark-ring .45s var(--ease) both; }
.logo-mark b { transform-origin: left center; animation: mark-line .55s .3s cubic-bezier(.65, 0, .35, 1) both; }
.logo-mark i:last-child { animation: mark-dot .5s .8s cubic-bezier(.34, 1.56, .64, 1) both; }
@keyframes mark-ring { from { opacity: 0; transform: scale(.4); } }
@keyframes mark-line { from { transform: scaleX(0); } }
@keyframes mark-dot { from { opacity: 0; transform: scale(0); } }
.nav { display: flex; align-items: center; gap: var(--sp-6); }
.nav a { text-decoration: none; font-size: 14px; font-weight: var(--fw-medium); color: var(--text-muted); transition: color var(--t-fast); }
.nav a:hover, .nav a[aria-current="page"] { color: var(--text); }
.nav .lang { display: inline-flex; align-items: center; gap: 8px; color: var(--text-subtle); font-size: 13px; }
.flag { display: inline-block; flex: none; width: 20px; height: 20px; border-radius: 50%; overflow: hidden; box-shadow: 0 0 0 1px rgba(20, 27, 28, .12), 0 2px 6px -2px rgba(20, 27, 28, .3); transition: transform var(--t-fast) var(--ease); }
.flag svg { display: block; width: 100%; height: 100%; }
.lang:hover .flag, .lang-foot:hover .flag { transform: scale(1.08); }
.nav .lang-label { display: none; }
.lang-foot { display: inline-flex; align-items: center; gap: 8px; }
.lang-foot .flag { width: 16px; height: 16px; }
.menu-toggle { display: none; }

/* ---------- Megamenu ---------- */
.nav-item { display: flex; align-items: center; height: 74px; }
.nav-link { position: relative; display: inline-flex; align-items: center; gap: 6px; }
.has-mega > .nav-link::after { content: ''; position: absolute; left: -14px; right: -14px; top: 100%; height: 40px; }
.chev { width: 7px; height: 7px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-2px) rotate(45deg); opacity: .6; transition: transform var(--t-fast) var(--ease); }
.has-mega:hover .chev, .has-mega:focus-within .chev { transform: translateY(1px) rotate(225deg); }
.mega { position: absolute; left: 0; right: 0; top: calc(100% + 8px); z-index: 60; padding-top: 0; opacity: 0; visibility: hidden; transform: translateY(-8px); transition: opacity .25s var(--ease), transform .35s var(--ease), visibility 0s linear .25s; transition-delay: .12s; }
.has-mega:hover .mega, .has-mega:focus-within .mega { opacity: 1; visibility: visible; transform: none; transition: opacity .3s var(--ease), transform .4s var(--ease), visibility 0s; transition-delay: .06s; }
.mega::before { content: ''; position: absolute; inset: 0; background: var(--raised); border: 1px solid var(--line); border-radius: 18px; box-shadow: 0 40px 80px -40px rgba(20, 27, 28, .35); z-index: -1; }
.mega .wrap { width: 100%; max-width: none; padding-left: 28px; padding-right: 28px; }
.mega-inner { display: grid; grid-template-columns: 1fr 1.6fr 1fr; gap: clamp(28px, 4vw, 56px); padding-top: 36px; padding-bottom: 40px; color: var(--text); }
.mega .kicker { margin-bottom: 10px; }
.mega-title { font-size: 22px; font-weight: var(--fw-heading); letter-spacing: -.02em; line-height: 1.2; text-wrap: balance; }
.mega a { color: var(--text); }
.mega-phases { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 20px; align-content: start; }
.mega-phases a { display: flex; gap: 14px; padding: 12px; border-radius: var(--r-s); text-decoration: none; transition: background var(--t-fast); }
.mega-phases a:hover { background: var(--surface); }
.mega-phases .n { font-size: 11px; font-weight: var(--fw-semibold); color: var(--primary); padding-top: 3px; }
.mega-phases b { display: block; font-size: 15px; font-weight: 700; }
.mega-phases small { display: block; font-size: 12.5px; color: var(--text-muted); margin-top: 2px; }
.mega-price { background: var(--tint); color: var(--text); border-radius: var(--r-m); padding: 22px 24px; display: flex; flex-direction: column; gap: 4px; align-self: start; }
.mega-price span { font-size: var(--fs-label); font-weight: var(--fw-semibold); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--accent-on-dark); }
.mega-price strong { font-size: 32px; font-weight: var(--fw-heading); letter-spacing: -.035em; margin-top: 6px; }
.mega-price small { font-size: 13px; color: var(--dark-muted); }
.mega .mega-price .btn { margin-top: 14px; align-self: flex-start; }
.mega-inner:has(.mega-cases) { grid-template-columns: minmax(220px, .8fr) 3.6fr; align-items: start; }
.mega-cases { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 18px 14px; }
.mega-cases .mega-img { margin-bottom: 4px; }
.mega-cases .mega-img img { object-position: 50% 30%; }
.mega-case, .mega-card { text-decoration: none; display: flex; flex-direction: column; gap: 4px; }
.mega-img { display: block; aspect-ratio: 4 / 3; border-radius: var(--r-s); overflow: hidden; background: var(--surface); margin-bottom: 8px; }
.mega-img img { width: 100%; height: 100%; object-fit: cover; object-position: top; transition: transform 1s var(--ease); }
.mega-case:hover img, .mega-card:hover img { transform: scale(1.04); }
.mega-case b { font-size: 13.5px; font-weight: 700; line-height: 1.3; letter-spacing: -.01em; }
.mega-case:hover b, .mega-card:hover b { color: var(--primary); }
.mega-inner:has(.mega-work) { grid-template-columns: 1fr 2.6fr; }
.mega-work { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.mega-card b { font-size: 16px; font-weight: 700; }
.mega-card small { font-size: 13px; color: var(--text-muted); }

/* ---------- Hero ---------- */
.hero { padding: clamp(40px, 7vw, 96px) 0 0; }
.hero-grid { display: grid; grid-template-columns: 1fr 1.15fr; gap: clamp(40px, 6vw, 80px); align-items: center; }
.hero-title { font-size: clamp(2.3rem, 3.9vw, 3.1rem); font-weight: var(--fw-heading); letter-spacing: var(--ls-display); line-height: 1.08; margin-bottom: var(--sp-5); }
.hero-title .pre { display: block; }
.hero-title .rot { display: grid; }
.hero-title .rot > span { grid-area: 1 / 1; white-space: nowrap; padding: 0 .06em .16em 0; margin-bottom: -.16em; opacity: 0; transform: translateY(.3em); transition: opacity .8s var(--ease), transform 1s var(--ease); }
.hero-title .rot > span.on { opacity: 1; transform: none; }
.hero-title .rot > span.out { transform: translateY(-.3em); }
.hero-title .tail { display: block; }
.checks { padding-left: 12px; display: grid; gap: 12px; }
.checks li { position: relative; padding-left: 28px; font-size: var(--fs-body); line-height: 1.5; }
.checks li::before { content: ''; position: absolute; left: 0; top: 3px; width: 16px; height: 16px; border-radius: 50%; border: 1px solid var(--primary); }
.checks li::after { content: ''; position: absolute; left: 6px; top: 7px; width: 3.5px; height: 6.5px; border: solid var(--primary); border-width: 0 1.5px 1.5px 0; transform: rotate(45deg); }
.hero .actions { margin-top: 36px; }

/* Slider */
.slider { position: relative; min-width: 0; }
.stage { position: relative; height: 437px; container-type: size; }
/* Fanerne under slideren er fjernet (23/10); stilarterne beholdes, hvis de skal tilbage. */
.slide { position: absolute; inset: 0; opacity: 0; transform: translateY(18px) scale(.97); transition: opacity .45s ease, transform .6s ease; pointer-events: none; }
.slide.on { opacity: 1; transform: none; pointer-events: auto; transition: opacity 1s cubic-bezier(.22, .61, .36, 1) .4s, transform 1.3s cubic-bezier(.22, .61, .36, 1) .4s; }

.chip { position: absolute; left: 8px; bottom: 8px; background: #fff; color: var(--text); font-size: 11px; font-weight: var(--fw-semibold); padding: 5px 9px; border-radius: var(--r-pill); white-space: nowrap; box-shadow: var(--shadow-s); }

/* Hero, slide 1: kanaler → website → tracking */
.s-hub { display: grid; place-items: center; }
.hub { position: relative; color: var(--text); container: hub / inline-size; width: min(100cqw, 118.5cqh); aspect-ratio: 640 / 540; }
.hub::before { content: ''; position: absolute; left: 22%; right: 22%; top: 4%; bottom: 30%; border-radius: 50%; background: radial-gradient(closest-side, rgb(var(--accent-rgb) / .16), transparent); filter: blur(10px); }
.hub-lines { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.hub-lines path { fill: none; stroke: rgb(var(--accent-rgb) / .32); stroke-width: 1.6; stroke-dasharray: 1.5 5; stroke-linecap: round; }
.hub-dots circle { fill: var(--accent); }
.hub-site { position: absolute; left: 29.69%; top: 12.96%; width: 40.63%; height: 38.89%; display: flex; flex-direction: column; background: #fff; border-radius: 2cqi; overflow: visible; box-shadow: 0 30px 60px -28px rgba(20, 27, 28, .45), 0 0 0 1px rgba(20, 27, 28, .06); }
.hs-bar { flex: none; display: flex; align-items: center; gap: .8cqi; height: 5.4cqi; padding: 0 1.6cqi; background: var(--surface); border-radius: 2cqi 2cqi 0 0; }
.hs-bar i { width: 1cqi; height: 1cqi; border-radius: 50%; background: var(--blaek-300); }
.hs-bar span { margin-left: 1.4cqi; flex: 1; height: 3cqi; display: flex; align-items: center; padding: 0 1.4cqi; border-radius: var(--r-pill); background: #fff; font-size: 1.55cqi; color: var(--text-muted); white-space: nowrap; overflow: hidden; }
.hs-body { flex: 1; display: grid; grid-template-columns: 1.05fr .95fr; gap: 2cqi; align-items: center; padding: 2.6cqi 2.6cqi 3.2cqi; }
.hs-text { display: grid; gap: 1.1cqi; justify-items: start; }
.hs-text i { display: block; height: 1.1cqi; width: 92%; border-radius: 1cqi; background: var(--blaek-100); }
.hs-text .k { width: 34%; height: .9cqi; background: rgb(var(--accent-rgb) / .55); }
.hs-text .h1, .hs-text .h2 { height: 2.3cqi; background: var(--blaek-800); }
.hs-text .h2 { width: 70%; margin-bottom: .6cqi; }
.hs-text .s { width: 64%; }
.hs-btn { margin-top: 1cqi; padding: 1.1cqi 2cqi; border-radius: var(--r-pill); background: var(--accent); color: #fff; font-size: 1.5cqi; font-weight: 700; white-space: nowrap; }
.s-hub.on .hs-btn { animation: hs-pulse 2.6s 1.2s ease-out infinite; }
@keyframes hs-pulse { 0% { box-shadow: 0 0 0 0 rgb(var(--accent-rgb) / .45); } 70%, 100% { box-shadow: 0 0 0 2.4cqi rgb(var(--accent-rgb) / 0); } }
.hs-img { align-self: stretch; border-radius: 1.4cqi; background: radial-gradient(60% 60% at 70% 30%, rgba(255, 255, 255, .55), transparent 70%), linear-gradient(150deg, var(--kobolt-400), var(--kobolt-700)); position: relative; overflow: hidden; }
.hs-img::after { content: ''; position: absolute; width: 70%; aspect-ratio: 1; right: -18%; bottom: -26%; border-radius: 50%; background: rgba(255, 255, 255, .18); }
.hub-node { position: absolute; z-index: 1; translate: -50% -50%; display: grid; place-items: center; width: 8.4cqi; height: 8.4cqi; background: #fff; border-radius: 50%; box-shadow: 0 12px 24px -14px rgba(20, 33, 61, .6), 0 0 0 .7cqi rgba(255, 255, 255, .12); }
.hub-node img { width: 4.2cqi; height: 4.2cqi; object-fit: contain; }
.hub-node b { position: absolute; top: 100%; left: 50%; translate: -50% 0; margin-top: 1cqi; font-size: max(10px, 1.75cqi); font-weight: var(--fw-semibold); color: rgba(255, 255, 255, .88); white-space: nowrap; }
.s-hub.on .hub-node { animation: hub-pop .6s var(--ease) both; animation-delay: calc(.55s + var(--i) * .07s); }
@keyframes hub-pop { from { opacity: 0; scale: .8; } }
.hub-toasts { position: absolute; z-index: 3; left: 61%; top: 77%; width: 34%; height: 8.4cqi; }
.hub-toast { position: absolute; inset: 0; display: flex; align-items: center; gap: 1.3cqi; padding: 0 2cqi 0 1.3cqi; background: #fff; border-radius: 1.8cqi; box-shadow: 0 16px 34px -18px rgba(20, 27, 28, .5), 0 0 0 1px rgba(20, 27, 28, .06); opacity: 0; }
.hub-toast .tick { flex: none; width: 4.4cqi; height: 4.4cqi; border-radius: 50%; background: var(--kobolt-100); position: relative; }
.hub-toast .tick::after { content: ''; position: absolute; left: 36%; top: 24%; width: 22%; height: 38%; border: solid var(--accent); border-width: 0 .45cqi .45cqi 0; rotate: 45deg; }
.hub-toast b { display: block; font-size: 1.85cqi; font-weight: 700; line-height: 1.2; }
.hub-toast small { display: block; font-size: 1.55cqi; color: var(--text-muted); }
.s-hub.on .hub-toast { animation: hub-toast 7.5s var(--ease) infinite; }
.s-hub.on .hub-toast:nth-child(2) { animation-delay: 2.5s; }
.s-hub.on .hub-toast:nth-child(3) { animation-delay: 5s; }
.s-hub.on .hub-toast:first-child { animation-delay: .9s; }
@keyframes hub-toast { 0% { opacity: 0; translate: 0 1.6cqi; } 5%, 30% { opacity: 1; translate: 0 0; } 35%, 100% { opacity: 0; translate: 0 -1cqi; } }
.hub-card { position: absolute; z-index: 2; left: 38%; top: 48.5%; width: 40%; padding: 2.2cqi 2.4cqi 1.6cqi; background: #fff; border-radius: 2cqi; box-shadow: 0 30px 60px -28px rgba(20, 27, 28, .5), 0 0 0 1px rgba(20, 27, 28, .06); }
.hc-head { display: flex; justify-content: space-between; align-items: center; font-size: 1.6cqi; }
.hc-head b { font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--accent); }
.hc-head span { display: inline-flex; align-items: center; gap: .8cqi; color: var(--text-muted); }
.hc-head span::before { content: ''; width: 1.1cqi; height: 1.1cqi; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 .5cqi rgb(var(--accent-rgb) / .18); animation: flow-live 2s ease-in-out infinite; }
.hc-kpis { display: grid; grid-template-columns: 1fr 1fr; gap: 1.4cqi; margin: 1.6cqi 0 .6cqi; }
.hc-kpis div { display: grid; justify-items: start; }
.hc-kpis span { display: block; font-size: 1.55cqi; color: var(--text-muted); }
.hc-kpis strong { display: inline-block; font-size: 3.3cqi; font-weight: 750; letter-spacing: -.03em; line-height: 1.15; }
.hc-kpis em { font-style: normal; font-size: 1.55cqi; font-weight: 700; color: var(--accent); }
.hc-chart { display: block; width: 100%; height: 7.4cqi; overflow: visible; }
.hc-chart .a { fill: rgb(var(--accent-rgb) / .1); }
.hc-chart .l { fill: none; stroke: var(--accent); stroke-width: 2; vector-effect: non-scaling-stroke; stroke-dasharray: 400; stroke-dashoffset: 400; }
.s-hub.on .hc-chart .l { animation: draw 1.6s .9s var(--ease) forwards; }
/* Smal scene (mobil): kun ikoner på kanalerne og lidt større tekst i kortene */
@container hub (max-width: 520px) {
  .hub-node { width: 9cqi; height: 9cqi; }
  .hub-node img { width: 4.8cqi; height: 4.8cqi; }
  .hub-card { padding: 2.6cqi 3cqi 2cqi; }
  .hc-head, .hc-kpis span, .hc-kpis em { font-size: 2.3cqi; }
  .hc-kpis strong { font-size: 4.2cqi; }
  .hs-bar span, .hs-btn { font-size: 2cqi; }
  .hub-toast b { font-size: 2.5cqi; }
  .hub-toast small { font-size: 2.1cqi; }
  .hub-toasts { height: 10cqi; width: 40%; left: 57%; }
}

.s-film { display: flex; gap: 12px; align-items: center; justify-content: center; perspective: 1600px; }
/* Film og annoncer skaleres efter både bredde og højde, så de altid passer i scenen */
.s-film figure { flex: none; width: min(37cqw, 46cqh); aspect-ratio: 9 / 16; border-radius: var(--r-s); overflow: hidden; box-shadow: var(--shadow-m); transform: rotateY(-8deg); position: relative; background: var(--surface); }
.s-film figure:nth-child(2) { transform: rotateY(-8deg) translateY(26px); }
.s-film video { width: 100%; height: 100%; object-fit: cover; }

.s-web { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 12px; }
.br { position: relative; display: flex; flex-direction: column; min-height: 0; border-radius: var(--r-s); overflow: hidden; background: #fff; box-shadow: var(--shadow-m); border: 1px solid var(--line); }
.br .bar { flex: none; height: 20px; display: flex; gap: 5px; align-items: center; padding: 0 9px; background: var(--surface); }
.br .bar i { width: 6px; height: 6px; border-radius: 50%; background: var(--kalk-400); }
.br img { flex: 1; min-height: 0; width: 100%; object-fit: cover; object-position: top; }
.s-data.on .chart .line1 { animation: draw 1.4s .15s var(--ease) forwards; }
.s-data.on .chart .bars rect { animation: grow .7s var(--ease) forwards; }
.s-data.on .chart .bars rect:nth-child(2) { animation-delay: .06s; } .s-data.on .chart .bars rect:nth-child(3) { animation-delay: .12s; }
.s-data.on .chart .bars rect:nth-child(4) { animation-delay: .18s; } .s-data.on .chart .bars rect:nth-child(5) { animation-delay: .24s; } .s-data.on .chart .bars rect:nth-child(6) { animation-delay: .3s; }
@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes grow { to { transform: scaleY(1); } }

.s-grafik { display: flex; align-items: center; justify-content: center; }
.s-grafik .ad { width: min(40cqw, 50cqh); flex: none; box-shadow: 0 30px 60px -26px rgba(20, 27, 28, .5), 0 0 0 1px rgba(20, 27, 28, .06); }
.s-grafik .ad:nth-child(1) { transform: translate(5%, 12px) rotate(-4deg); }
.s-grafik .ad:nth-child(2) { position: relative; z-index: 2; transform: translateY(-6px); }
.s-grafik .ad:nth-child(3) { transform: translate(-5%, 12px) rotate(4deg); }
/* Annoncer (eksempler i kundernes stil): typografien skalerer med annoncens bredde */
.ad { position: relative; container-type: inline-size; aspect-ratio: 9 / 16; border-radius: 14px; overflow: hidden; display: flex; flex-direction: column; text-align: left; }
.ad > img { flex: 1; min-height: 0; width: 100%; object-fit: cover; }
.ad figcaption { display: grid; justify-items: start; gap: 5cqi; padding: 7cqi 7cqi 8cqi; }
.ad figcaption b { font-size: 10cqi; font-weight: 800; line-height: 1.05; letter-spacing: -.03em; text-wrap: balance; }
.ad em { font-style: normal; color: #ff4f8b; }
.ad-cta { font-size: 5.2cqi; font-weight: 700; padding: 3.2cqi 6cqi; border-radius: 99px; }
.ad-capio { background: #d6ebf7; color: #0b2f55; }
.ad-capio > img { object-position: 22% 50%; }
.ad-capio .ad-cta { background: #0b2f55; color: #fff; }
.ad-calm { background: #f4f1ea; color: #2f4a3a; }
.ad-calm > img { object-position: 50% 25%; }
.ad-calm .ad-cta { background: #5d7a63; color: #fff; }
.ad-sfx { background: radial-gradient(120% 70% at 100% 0%, #2b3c8f 0%, #141c48 60%); color: #fff; }
.ad-sfx figcaption { flex: 1; align-content: center; gap: 6cqi; }
.ad-sfx figcaption b { font-size: 13.5cqi; }
.ad-sfx .ad-cta { background: #ff4f8b; color: #fff; }

/* ---------- Mørk hero (forsiden) ---------- */
.page-home .site-header { margin-bottom: -86px; }

.hero-home { position: relative; isolation: isolate; overflow: hidden; color: #fff; background: #335293; padding-top: calc(86px + clamp(24px, 4vw, 56px)); padding-bottom: 0; min-height: 100svh; display: flex; flex-direction: column; }
.hero-home > .hero-grid { flex: 1; width: 100%; }
.marquee-neg { margin-top: clamp(40px, 5vw, 64px); border-bottom: 0; border-top: 1px solid rgba(255, 255, 255, .14); padding: clamp(24px, 3vw, 36px) 0; }
.hero-bg { position: absolute; inset: 0; z-index: -1; background: radial-gradient(85% 110% at 100% 0%, rgb(135 178 255 / .42) 0%, rgb(135 178 255 / .12) 45%, transparent 75%), radial-gradient(70% 90% at 0% 100%, rgb(135 178 255 / .16) 0%, transparent 70%), linear-gradient(160deg, #4067b5 0%, #35569a 52%, #29447c 100%); }
.hero-bg::before { content: ''; position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px); background-size: 72px 72px; mask-image: radial-gradient(70% 60% at 60% 40%, #000 20%, transparent 80%); }
.hero-bg::after { content: ''; position: absolute; inset: 0; opacity: .04; mix-blend-mode: overlay; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.6'/%3E%3C/svg%3E"); }
.glow { position: absolute; border-radius: 50%; will-change: transform; }
.glow.g1 { width: 46vw; height: 46vw; right: -8vw; top: -14vw; background: radial-gradient(circle, rgb(170 202 255 / .22), transparent 65%); animation: drift1 22s ease-in-out infinite alternate; }
.glow.g2 { width: 38vw; height: 38vw; left: -10vw; bottom: -16vw; background: radial-gradient(circle, rgb(135 178 255 / .2), transparent 65%); animation: drift2 26s ease-in-out infinite alternate; }
.glow.g3 { width: 24vw; height: 24vw; left: 38%; top: 30%; background: radial-gradient(circle, rgba(255, 255, 255, .07), transparent 70%); animation: drift3 30s ease-in-out infinite alternate; }
@keyframes drift1 { to { transform: translate(-6vw, 8vw) scale(1.12); } }
@keyframes drift2 { to { transform: translate(8vw, -6vw) scale(1.08); } }
@keyframes drift3 { to { transform: translate(-10vw, 6vw) scale(1.25); } }

.hero-home .hero-title .rot > span { color: #d3e3ff; background: linear-gradient(90deg, #dfebff, #aacaff); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero-home .checks li { color: rgba(255, 255, 255, .86); }
.hero-home .checks li::before { border-color: rgba(255, 255, 255, .45); }
.hero-home .checks li::after { border-color: #d3e3ff; }
.hero-home .actions .btn { background: #fff; border-color: #fff; color: var(--kobolt-800); }
.hero-home .actions .btn:hover { background: #eaf2ff; border-color: #eaf2ff; }
.hero-home .actions .btn-ghost { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .42); }
.hero-home .actions .btn-ghost:hover { background: rgba(255, 255, 255, .08); border-color: #fff; color: #fff; }
.hero-home .logo-item img { filter: brightness(0) invert(1); opacity: .62; }
.hero-home .logo-item:hover img { opacity: 1; }
.hero-home .hub-lines path { stroke: rgba(255, 255, 255, .34); }
.hero-home .hub-dots circle { fill: #dfebff; }
.hero-home .hub::before { background: radial-gradient(closest-side, rgba(255, 255, 255, .14), transparent); }
.hero-home .stage { animation: float 9s ease-in-out infinite; }
@keyframes float { 50% { transform: translateY(-8px); } }
.hero-home .s-film figure, .hero-home .br { box-shadow: 0 30px 60px -28px rgba(20, 27, 28, .45), 0 0 0 1px rgba(20, 27, 28, .06); }

/* Signatur: logoets A→B-mærke (ring, streg, prik) foran små overskrifter */
.kicker::before { content: ''; display: inline-block; width: 28px; height: 12px; margin-right: 10px; vertical-align: -2px; background: currentColor; -webkit-mask: var(--curl) center / contain no-repeat; mask: var(--curl) center / contain no-repeat; }
:root { --curl: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 12'%3E%3Ccircle cx='4.5' cy='6' r='3' fill='none' stroke='%23000' stroke-width='1.5'/%3E%3Cpath d='M7.5 6 H19.5' stroke='%23000' stroke-width='1.5'/%3E%3Ccircle cx='23' cy='6' r='3.6' fill='%23000'/%3E%3C/svg%3E"); }

/* ---------- Logobælte ---------- */
.marquee { overflow: hidden; padding: clamp(32px, 4vw, 48px) 0; border-bottom: 1px solid var(--line); mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.marquee-track { display: flex; align-items: center; width: max-content; animation: marquee 55s linear infinite; }
.marquee:hover .marquee-track { animation-play-state: paused; }
.logo-item { flex: none; display: grid; place-items: center; height: 40px; padding: 0 clamp(28px, 3.4vw, 48px); }
.logo-item img { height: 30px; width: auto; max-width: 180px; object-fit: contain; filter: brightness(0); opacity: .45; transition: opacity var(--t-fast); }
.logo-item:hover img { opacity: .8; }
@keyframes marquee { to { transform: translateX(-50%); } }

/* ---------- Talrække under bæltet ---------- */
.facts { padding: clamp(48px, 6vw, 80px) 0; }
.facts-grid { display: grid; grid-template-columns: repeat(4, 1fr); }
.fact { padding: 4px clamp(20px, 3vw, 40px); border-left: 1px solid var(--line); }
.fact:first-child { border-left: 0; padding-left: 0; }
.fact p { display: flex; align-items: baseline; gap: 8px; }
.fact-n { font-size: clamp(2.6rem, 5vw, 4rem); font-weight: var(--fw-heading); letter-spacing: -.045em; line-height: 1; color: var(--text); font-variant-numeric: tabular-nums; }
.fact-u { font-size: clamp(1rem, 1.4vw, 1.2rem); font-weight: var(--fw-medium); color: var(--primary); letter-spacing: -.01em; }
.fact-l { display: block; margin-top: 12px; font-size: var(--fs-small); color: var(--text-muted); }

/* ---------- Sektioner ---------- */
.svc-home, .cases-home, .sites-home, .photo-home, .family-home, .price-teaser { padding: var(--section) 0; }
.section-head { margin-bottom: clamp(32px, 4vw, 56px); max-width: 760px; }
.section-head.row { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; max-width: none; }
.manifesto-lines { font-size: clamp(2.8rem, 6.4vw, 5.4rem); font-weight: 800; letter-spacing: -.045em; line-height: 1.02; margin-bottom: var(--sp-6); }
.manifesto-lines .accent { color: var(--accent); }
/* "Vi får dem gjort." står i kobolt med en mintgrøn markering, der tegnes ind, når linjen kommer frem */
.manifesto-lines .accent > i { font-style: normal; background: linear-gradient(transparent 54%, rgb(135 178 255 / .38) 54%, rgb(135 178 255 / .38) 94%, transparent 94%) no-repeat 0 0 / 100% 100%; padding: 0 .08em; margin: 0 -.08em; -webkit-box-decoration-break: clone; box-decoration-break: clone; transition: background-size 1.6s var(--ease-soft) .7s; }
.js .manifesto .rv:not(.in) .accent > i { background-size: 0% 100%; }
.manifesto .body-l { font-size: clamp(1.1rem, 1.6vw, 1.3rem); color: var(--text); max-width: 44ch; }
.manifesto-lines span { display: block; }

/* Ydelser på forsiden */
.svc-home { background: var(--raised); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.svc-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(32px, 5vw, 72px); align-items: start; }
.svc-links { border-top: 1px solid var(--line); }
.svc-links a { display: grid; grid-template-columns: 40px 1fr auto; gap: 12px; align-items: center; padding: 18px 4px; border-bottom: 1px solid var(--line); color: var(--text); text-decoration: none; }
.svc-links .n { font-size: var(--fs-label); font-weight: var(--fw-label); letter-spacing: var(--ls-label); color: var(--text-subtle); transition: color var(--t-fast); }
.svc-links b { display: block; font-size: clamp(1.25rem, 2vw, 1.6rem); font-weight: 700; letter-spacing: -.025em; line-height: 1.15; color: var(--text-subtle); transition: color var(--t-fast); }
.svc-links small { display: block; font-size: 15px; color: var(--text-muted); margin-top: 4px; max-height: 0; opacity: 0; overflow: hidden; transition: max-height .4s var(--ease), opacity .3s; }
.svc-links .arr { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--line-strong); font-size: 15px; opacity: .4; transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast), opacity var(--t-fast), transform var(--t-fast) var(--ease); }
.svc-links a.on .n { color: var(--primary); }
.svc-links a.on b { color: var(--text); }
.svc-links a.on small { max-height: 3em; opacity: 1; }
.svc-links a.on .arr { opacity: 1; background: var(--primary); border-color: var(--primary); color: #fff; }
.svc-links a:hover .arr { transform: translateX(3px); }
.svc-stage { position: sticky; top: 110px; aspect-ratio: 4 / 3; border-radius: var(--r-l); overflow: hidden; background: radial-gradient(120% 100% at 70% 0%, var(--raised) 0%, var(--tint-2) 75%); box-shadow: var(--shadow-m); }
.svc-stage .svc-media { position: absolute; inset: 0; aspect-ratio: auto; opacity: 0; transform: scale(1.02); transition: opacity .6s var(--ease), transform .8s var(--ease); background: none; }
.svc-stage .svc-media.on { opacity: 1; transform: none; }
.svc-stage .svc-ads { padding: 32px; align-items: center; }
.svc-stage .svc-ads .ad { height: auto; width: 30%; border-radius: 12px; }

/* Værktøjsbælte: to rækker ikoner, der glider hver sin vej */
.tools { padding: var(--section) 0; overflow: hidden; }
.tools .section-head { margin-bottom: clamp(24px, 3vw, 40px); }
.tools .section-head .lead { margin-top: var(--sp-4); max-width: 60ch; color: var(--text-muted); }
.tools-row { overflow: hidden; mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.tools-row + .tools-row { margin-top: 12px; }
.tools-track { display: flex; gap: 12px; width: max-content; padding: 6px 0 14px; animation: marquee 95s linear infinite; }
.tools-row.rev .tools-track { animation-direction: reverse; animation-duration: 110s; }
.tools-belt:hover .tools-track { animation-play-state: paused; }
.tool { display: inline-flex; align-items: center; gap: 10px; padding: 10px 18px 10px 12px; background: var(--raised); border: 1px solid var(--line); border-radius: var(--r-pill); font-size: 15px; font-weight: var(--fw-semibold); white-space: nowrap; box-shadow: 0 8px 18px -14px rgba(20, 27, 28, .35); }
.tool img { width: 22px; height: 22px; object-fit: contain; }

/* Cases */
.case-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: clamp(32px, 3vw, 44px) clamp(20px, 2.4vw, 28px); }
.case-card { grid-column: span 4; text-decoration: none; display: flex; flex-direction: column; }
.case-card.big { grid-column: span 8; }
.case-grid.all .case-card.big + .case-card { grid-column: span 4; }
.case-img { position: relative; overflow: hidden; border-radius: var(--r-l); aspect-ratio: 4 / 3; background: var(--surface); }
.case-card.big .case-img { aspect-ratio: 16 / 10; }
.case-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease); }
.case-card:hover .case-img img { transform: scale(1.04); }
.case-client { margin-top: var(--sp-4); font-size: var(--fs-label); font-weight: var(--fw-label); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--primary); }
.case-card h3 { font-size: clamp(1.1rem, 1.5vw, 1.3rem); font-weight: 700; letter-spacing: -.015em; line-height: 1.3; margin-top: 6px; transition: color var(--t-fast); }
.case-card.big h3 { font-size: clamp(1.25rem, 2vw, 1.6rem); }
.case-card:hover h3 { color: var(--primary); }
.tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: var(--sp-3); }
.tags li { font-size: 12px; font-weight: var(--fw-medium); padding: 5px 11px; border-radius: var(--r-pill); background: var(--surface); color: var(--text-muted); }

/* Website-fremviser */
.sites-home { background: var(--tint); overflow: hidden; }
.sites-home .browser { border-color: rgb(var(--accent-rgb) / .16); box-shadow: 0 30px 60px -30px rgba(30, 50, 91, .35); }
.sites-home .browser-bar { background: var(--surface); }

.site { position: relative; }
.site-frame { position: relative; }
.browser { position: relative; border-radius: var(--r-s); background: #fff; box-shadow: var(--shadow-m); border: 1px solid var(--line); overflow: hidden; cursor: zoom-in; padding: 0; width: 100%; text-align: left; display: block; font: inherit; }
.browser-bar { display: flex; align-items: center; gap: 6px; padding: 10px 12px; background: var(--surface); border-bottom: 1px solid var(--line); }
.browser-bar i { width: 8px; height: 8px; border-radius: 50%; background: var(--kalk-400); }
.browser-bar span { margin-left: 8px; font-size: 11.5px; color: var(--text-subtle); background: #fff; padding: 5px 12px; border-radius: var(--r-pill); max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.browser-view { height: clamp(280px, 30vw, 400px); overflow: hidden; }
.browser { transition: transform .5s var(--ease), box-shadow .5s var(--ease); }
.browser-view { position: relative; }
.browser-view img { width: 100%; }
.browser-view::after { content: attr(data-label); position: absolute; right: 14px; bottom: 14px; font-size: 12.5px; font-weight: var(--fw-semibold); color: var(--text); background: rgba(255,255,255,.94); padding: 8px 14px; border-radius: var(--r-pill); box-shadow: var(--shadow-s); opacity: 0; transform: translateY(6px); transition: opacity .35s var(--ease), transform .45s var(--ease); }
.site:hover .browser, .browser:focus-visible { transform: translateY(-4px); box-shadow: 0 30px 60px -28px rgba(20, 27, 28, .45); }
.site:hover .browser-view::after, .browser:focus-visible .browser-view::after { opacity: 1; transform: none; }
.phone { position: absolute; right: -10px; bottom: -18px; width: 23%; min-width: 86px; aspect-ratio: 9 / 19.5; border-radius: 20px; background: var(--blaek-900); padding: 5px; box-shadow: var(--shadow-m); pointer-events: none; }
.phone div { width: 100%; height: 100%; border-radius: 16px; overflow: hidden; background: #fff; }
.phone { transition: transform .5s var(--ease); }
.phone img { width: 100%; }
.site:hover .phone { transform: translateY(-8px); }
.site-cap { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; margin-top: 40px; }
.site-cap h3 { font-size: 18px; font-weight: 700; letter-spacing: -.01em; }
.site-cap p { color: var(--text-muted); font-size: var(--fs-small); margin-top: 2px; }
.sites-duo { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(48px, 6vw, 72px) clamp(28px, 4vw, 48px); }
.sites-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(48px, 6vw, 80px) clamp(28px, 4vw, 48px); padding-bottom: var(--section); }
.sites-grid .site:nth-child(3n+1) { grid-column: span 2; }
.sites-grid .site:nth-child(3n+1) .browser-view { height: clamp(320px, 44vw, 580px); }

/* Foto */
.photo-strip { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: clamp(140px, 16vw, 230px); gap: 12px; }
.photo-strip a { overflow: hidden; border-radius: var(--r-m); display: block; }
.photo-strip a:nth-child(1) { grid-column: span 2; grid-row: span 2; }
.photo-strip img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease); }
.photo-strip a:hover img { transform: scale(1.04); }
.gallery { columns: 3 280px; column-gap: 14px; padding-bottom: var(--section); }
.gallery button { display: block; width: 100%; margin: 0 0 14px; padding: 0; border: 0; background: var(--surface); border-radius: var(--r-m); overflow: hidden; cursor: zoom-in; break-inside: avoid; position: relative; }
.gallery img { width: 100%; height: auto; transition: transform 1s var(--ease); }
.gallery button:hover img { transform: scale(1.03); }
.gallery button span { position: absolute; left: 10px; bottom: 10px; font-size: 11.5px; font-weight: var(--fw-semibold); background: #fff; padding: 6px 10px; border-radius: var(--r-pill); opacity: 0; transform: translateY(6px); transition: opacity var(--t-fast), transform var(--t-fast) var(--ease); }
.gallery button:hover span, .gallery button:focus-visible span { opacity: 1; transform: none; }

/* Lightbox og site-viewer */
.lightbox, .siteviewer { position: fixed; inset: 0; z-index: 100; background: rgba(20, 27, 28, .96); backdrop-filter: blur(8px); display: none; color: #fff; }
.lightbox.open { display: block; animation: fade .25s ease; }
.siteviewer.open { display: flex; flex-direction: column; animation: fade .25s ease; }
@keyframes fade { from { opacity: 0; } }
.lb-stage { position: absolute; inset: 64px 72px 56px; display: grid; place-items: center; }
.lb-stage img { display: block; width: auto; height: auto; max-width: 100%; max-height: calc(100svh - 120px); object-fit: contain; border-radius: var(--r-xs); }
.lb-close, .lb-prev, .lb-next, .sv-close { position: absolute; border: 0; background: rgba(255,255,255,.1); color: #fff; width: 46px; height: 46px; border-radius: 50%; font-size: 18px; cursor: pointer; transition: background var(--t-fast); }
.lb-close:hover, .lb-prev:hover, .lb-next:hover, .sv-close:hover { background: rgba(255,255,255,.22); }
.lb-close { top: 12px; right: 14px; }
.lb-prev { left: 14px; top: 50%; translate: 0 -50%; }
.lb-next { right: 14px; top: 50%; translate: 0 -50%; }
.lb-cap { position: absolute; left: 0; right: 0; bottom: 18px; text-align: center; font-size: var(--fs-small); color: rgba(255,255,255,.7); }
.sv-top { display: flex; align-items: center; gap: 14px; padding: 14px var(--gutter); }
.sv-top h2 { font-size: 18px; font-weight: var(--fw-semibold); margin-right: auto; }
.sv-toggle { display: flex; background: rgba(255,255,255,.1); border-radius: var(--r-pill); padding: 4px; }
.sv-toggle button { border: 0; background: transparent; color: #fff; font: var(--fw-medium) 13px/1 var(--font); padding: 9px 14px; border-radius: var(--r-pill); cursor: pointer; }
.sv-toggle button[aria-pressed="true"] { background: #fff; color: var(--blaek-900); }
.sv-top a { color: #fff; font-size: var(--fs-small); }
.sv-close { position: static; }
.sv-scroll { flex: 1; overflow-y: auto; padding: 0 var(--gutter) 40px; overscroll-behavior: contain; }
.sv-scroll img { margin: 0 auto; border-radius: var(--r-s); width: 100%; max-width: 1100px; }

/* Tal */

/* Familie */
.family-home { background: var(--raised); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.family-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 6vw, 96px); align-items: center; }
.family-grid .body-l { margin: var(--sp-5) 0 var(--sp-5); max-width: 48ch; }
/* Forsiden: Morten og Stine i to forskudte portrætter */
.duo-photos { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; align-items: start; max-width: 560px; }
.duo-photos figure { position: relative; aspect-ratio: 4 / 5; border-radius: var(--r-l); overflow: hidden; background: var(--surface); box-shadow: var(--shadow-m); }
.duo-photos figure:nth-child(2) { margin-top: 48px; }
.duo-photos img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 22%; transition: transform 1.2s var(--ease); }
.duo-photos figure:hover img { transform: scale(1.04); }
.duo-photos figcaption { position: absolute; left: 12px; right: 12px; bottom: 12px; display: grid; gap: 1px; background: rgba(255, 255, 255, .94); padding: 10px 13px; border-radius: 12px; box-shadow: var(--shadow-s); }
.duo-photos b { font-size: 14.5px; font-weight: 700; letter-spacing: -.01em; line-height: 1.2; }
.duo-photos span { font-size: 12px; font-weight: var(--fw-semibold); color: var(--accent); }

/* Udtalelser */
.quote-img { width: 42px; height: 42px; border-radius: 50%; object-fit: cover; }

/* Pris-teaser */
.price-teaser { border-top: 1px solid var(--line); }

/* Afslutning og footer (den eneste mørke flade) */
.end-band { background: var(--dark-bg); color: var(--dark-text); padding: var(--section) 0; text-align: center; }
.end-band .kicker { color: var(--accent); }
.end-band h2 { font-size: var(--fs-display); font-weight: var(--fw-heading); letter-spacing: var(--ls-display); line-height: 1.08; max-width: 18ch; margin: 0 auto; }
.end-band h2 > span { display: block; }
.end-band h2 > span + span { color: var(--accent-on-dark); }
.end-body { max-width: 52ch; margin: var(--sp-5) auto 0; color: var(--dark-muted); font-size: var(--fs-lead); }
.end-band .actions { justify-content: center; }
.site-footer { position: relative; overflow: hidden; background: var(--bg); color: var(--dark-muted); font-size: 14.5px; }
.footer-grid { display: grid; grid-template-columns: 1.5fr repeat(3, 1fr); gap: clamp(32px, 5vw, 72px); padding-top: clamp(56px, 7vw, 88px); padding-bottom: clamp(40px, 5vw, 64px); position: relative; }
.footer-logo { display: inline-flex; align-items: center; gap: 10px; font-size: 20px; font-weight: 700; letter-spacing: -.02em; color: var(--text); text-decoration: none; }
.footer-logo .logo-mark i:last-child { background: var(--accent-on-dark); border-color: var(--accent-on-dark); }
.footer-brand p { margin-top: 16px; max-width: 26ch; text-wrap: balance; font-size: 16px; line-height: 1.5; color: var(--dark-text); }
.footer-col { display: flex; flex-direction: column; align-items: flex-start; gap: 11px; }
.footer-col p { margin-bottom: 6px; font-size: var(--fs-label); font-weight: var(--fw-semibold); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--accent-on-dark); }
.footer-col a { color: var(--dark-muted); text-decoration: none; transition: color var(--t-fast); }
.footer-col a:hover { color: var(--text); }
.footer-base { display: flex; justify-content: space-between; gap: 16px; padding-top: 22px; padding-bottom: 24px; position: relative; font-size: 13px; color: var(--text-subtle); }
/* Skillelinjer følger indholdets kant, ikke wrap'ens yderkant */
.footer-grid::before, .footer-base::before { content: ''; position: absolute; top: 0; left: var(--gutter); right: var(--gutter); height: 1px; background: var(--line); }
.footer-base-links { display: flex; gap: 24px; }
.footer-base a { color: inherit; text-decoration: none; }
.footer-base a:hover { color: var(--text); }
/* Stort ordmærke, der forsvinder ud i bunden */
.footer-word { margin-bottom: -.2em; padding: 0 var(--gutter); text-align: center; white-space: nowrap; font-size: clamp(64px, 15.5vw, 236px); font-weight: 800; letter-spacing: -.055em; line-height: .9; color: rgba(20, 27, 28, .05); user-select: none; }

/* ---------- Undersider ---------- */
.page-hero { position: relative; isolation: isolate; overflow: hidden; color: #fff; padding: calc(86px + clamp(40px, 6vw, 88px)) 0 clamp(52px, 6vw, 88px); background: radial-gradient(85% 110% at 100% 0%, rgb(135 178 255 / .4) 0%, rgb(135 178 255 / .1) 45%, transparent 75%), radial-gradient(70% 90% at 0% 100%, rgb(135 178 255 / .14) 0%, transparent 70%), linear-gradient(160deg, #4067b5 0%, #35569a 52%, #29447c 100%); }
/* Undersidernes hero: samme kobolt-gradient som forsiden, med headeren svævende ovenpå */
body:has(main > .page-hero:first-child) .site-header { margin-bottom: -86px; }
.page-hero::before { content: ''; position: absolute; inset: 0; z-index: -1; background-image: linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px); background-size: 72px 72px; mask-image: radial-gradient(70% 70% at 70% 30%, #000 10%, transparent 80%); }
.page-hero .kicker { color: #d3e3ff; }
.page-hero .display { color: #fff; }
.page-hero .lead { color: rgba(255, 255, 255, .84); }
.page-hero .duo-photos figcaption { color: var(--text); }
.cases-all { padding-bottom: var(--section); }

/* Hvem vi er: personlig top, store portrætter, ét tonet bånd, kompakt tidslinje */
.about-facts { display: flex; flex-wrap: wrap; gap: 14px 36px; margin-top: var(--sp-6); }
.about-facts b { display: block; font-size: clamp(1.8rem, 3vw, 2.4rem); font-weight: 800; letter-spacing: -.04em; line-height: 1; color: var(--accent); }
.about-facts span { display: block; margin-top: 6px; font-size: 13.5px; color: var(--text-muted); }
.about-family { position: relative; }
.about-family { justify-self: center; width: min(100%, 420px); }
.about-family img { width: 100%; height: auto; border-radius: var(--r-l); box-shadow: var(--shadow-m); }
.about-family figcaption { position: absolute; left: 18px; bottom: 18px; background: #fff; padding: 8px 14px; border-radius: var(--r-pill); font-size: 13px; font-weight: var(--fw-semibold); box-shadow: var(--shadow-s); }
.people { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(20px, 3vw, 32px); padding-bottom: clamp(48px, 6vw, 80px); }
.person-card figure { position: relative; aspect-ratio: 5 / 4; border-radius: var(--r-l); overflow: hidden; background: var(--surface); box-shadow: var(--shadow-m); }
.person-card img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 22%; transition: transform 1.2s var(--ease); }
.person-card:hover img { transform: scale(1.03); }
.person-card figcaption { position: absolute; left: 16px; bottom: 16px; display: grid; gap: 2px; background: rgba(255, 255, 255, .94); padding: 12px 16px; border-radius: 14px; box-shadow: var(--shadow-s); }
.person-card figcaption b { font-size: 18px; font-weight: 700; letter-spacing: -.015em; }
.person-card figcaption span { font-size: 13px; font-weight: var(--fw-semibold); color: var(--accent); }
.person-card > p { margin: 18px 0 12px; color: var(--text-muted); max-width: 44ch; }
.about-values { display: grid; gap: 12px; }
.about-values li { display: grid; gap: 2px; padding: 14px 18px 14px 46px; position: relative; background: #fff; border-radius: 14px; box-shadow: 0 8px 22px -16px rgba(30, 50, 91, .35); }
.about-values li::before { content: ''; position: absolute; left: 20px; top: 20px; width: 5px; height: 10px; border: solid var(--accent); border-width: 0 2px 2px 0; transform: rotate(45deg); }
.about-values b { font-size: 16px; font-weight: 700; }
.about-values span { font-size: 14.5px; color: var(--text-muted); }

/* Case-side: kompakt top med tekst og medie, så ét tonet bånd med tal og leverancer */
.back { display: inline-block; text-decoration: none; color: var(--text-muted); font-size: var(--fs-small); margin-bottom: var(--sp-5); }
.back:hover { color: var(--text); }
.films.reels video { width: 100%; aspect-ratio: 9 / 16; object-fit: cover; border-radius: var(--r-m); box-shadow: var(--shadow-m); background: var(--surface); }
/* Tallene: hvert nøgletal i sit eget tonede kort */
/* Det gjorde vi: korte, nummererede kort, der kan skimmes */
/* Persona: billede og citat i ét tonet kort */
.persona { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(24px, 4vw, 56px); align-items: center; background: var(--tint); border-radius: var(--r-l); padding: clamp(14px, 1.6vw, 18px); padding-right: clamp(24px, 4vw, 56px); margin-bottom: clamp(48px, 6vw, 80px); }
.persona img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--r-m); }
.persona blockquote p { font-size: clamp(1.2rem, 2vw, 1.55rem); line-height: 1.35; font-weight: var(--fw-medium); letter-spacing: -.02em; }
.persona blockquote p::before { content: '“'; display: block; font-size: 2.6em; line-height: .6; color: var(--accent); margin-bottom: 6px; }
.persona cite { display: block; margin-top: 14px; font-style: normal; font-size: 14px; font-weight: var(--fw-semibold); color: var(--accent); }
.case-photos { padding-bottom: clamp(48px, 6vw, 80px); }
.films.reels { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; max-width: 760px; }
.films { display: grid; grid-template-columns: 1fr; gap: 20px; }
.films.many { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px 20px; }
.films.many figcaption { margin-top: 10px; font-size: 14px; font-weight: var(--fw-semibold); }
.films video { width: 100%; border-radius: var(--r-m); background: var(--blaek-900); box-shadow: var(--shadow-m); }
.films video.tall { max-width: 420px; aspect-ratio: 9 / 16; object-fit: cover; }
.films:not(.two) video.tall { margin: 0 auto; }
.case-photos .gallery { padding-bottom: 0; columns: auto; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.case-photos .gallery.n2 { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 760px; }
/* Ensartede felter i casens fotogitter, så rækkerne står lige */
.case-photos .gallery button { margin: 0; aspect-ratio: 4 / 5 !important; }
.case-photos .gallery img { width: 100%; height: 100%; object-fit: cover; }
/* Næste case: et kort med billede, kunde og titel */
.next-txt { display: grid; gap: 4px; }
.next-txt .kicker { margin: 0; }
.next-txt b { font-size: clamp(1.3rem, 2.2vw, 1.8rem); font-weight: var(--fw-heading); letter-spacing: -.03em; line-height: 1.1; }
.next-txt small { font-size: 15px; color: var(--text-muted); }

/* Ydelser */
.svc { padding: clamp(32px, 4vw, 56px) 0 var(--section); }
.svc-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.svc-card { scroll-margin-top: 180px; display: flex; flex-direction: column; background: var(--raised); border: 1px solid var(--line); border-radius: var(--r-l); overflow: hidden; transition: transform .5s var(--ease), box-shadow .5s var(--ease); }
.svc-media { aspect-ratio: 16 / 10; overflow: hidden; display: grid; place-items: center; background: radial-gradient(120% 100% at 70% 0%, var(--raised) 0%, var(--tint-2) 75%); color: #fff; }
.svc-ads { display: flex; gap: 10px; height: 100%; padding: 16px; justify-content: center; }
.svc-ads .ad { height: 100%; border-radius: 10px; }
/* Absolut placeret, så browserens høje skærmbillede ikke kan strække feltet */
/* AI-flowet: fire noder i en løkke (formular → AI → CRM → sælger) med løbende streger imellem */
.ui-flow { width: calc(100% - 40px); color: var(--text); }
.flow-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; font-size: 11px; }
.flow-head b { font-weight: var(--fw-semibold); letter-spacing: .08em; text-transform: uppercase; color: var(--accent); }
.flow-head span { display: inline-flex; align-items: center; gap: 6px; color: var(--text-muted); }
.flow-head span::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--positive); box-shadow: 0 0 0 3px rgb(var(--accent-rgb) / .18); animation: flow-live 2s ease-in-out infinite; }
.ui-flow ol { display: grid; grid-template-columns: 1fr 1fr; grid-template-areas: "a b" "d c"; gap: 22px 30px; }
.ui-flow li { position: relative; display: grid; grid-template-columns: 30px 1fr; gap: 10px; align-items: center; padding: 10px 12px; background: #fff; border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 12px 26px -18px rgba(30, 50, 91, .45); }
.ui-flow li b { display: block; font-size: 12.5px; font-weight: 700; line-height: 1.2; }
.ui-flow li small { display: block; margin-top: 2px; font-size: 11px; color: var(--text-muted); line-height: 1.25; }
.flow-ico { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; background: var(--kobolt-100); color: var(--accent); }
.flow-ico svg { width: 17px; height: 17px; }
.flow-form { grid-area: a; } .flow-ai { grid-area: b; } .flow-crm { grid-area: c; } .flow-msg { grid-area: d; }
.flow-ai { border-color: rgb(var(--accent-rgb) / .55); box-shadow: 0 0 0 4px rgb(var(--accent-rgb) / .1), 0 14px 30px -18px rgba(30, 50, 91, .55); }
.flow-ai .flow-ico { background: var(--accent); color: #fff; }
.flow-ai small { color: var(--accent); font-weight: var(--fw-semibold); }
/* Forbindelser: højre (a→b), ned (b→c), venstre (c→d) */
.ui-flow li::after { content: ''; position: absolute; background: repeating-linear-gradient(90deg, rgb(var(--accent-rgb) / .7) 0 5px, transparent 5px 9px); background-size: 18px 2px; animation: flow-dash 1s linear infinite; }
.flow-form::after { left: 100%; top: 50%; width: 30px; height: 2px; }
.flow-ai::after { top: 100%; left: 50%; width: 2px; height: 22px; background: repeating-linear-gradient(180deg, rgb(var(--accent-rgb) / .7) 0 5px, transparent 5px 9px); background-size: 2px 18px; animation-name: flow-dash-v; }
.flow-crm::after { right: 100%; top: 50%; width: 30px; height: 2px; animation-direction: reverse; }
.flow-msg::after { display: none; }
@keyframes flow-dash { to { background-position: 18px 0; } }
@keyframes flow-dash-v { to { background-position: 0 18px; } }
@keyframes flow-live { 50% { box-shadow: 0 0 0 6px rgb(var(--accent-rgb) / 0); } }
.svc-card .ui-flow { width: calc(100% - 32px); }
/* I kortet: fire trin under hinanden med korte lodrette forbindelser */
.svc-card .ui-flow ol { grid-template-columns: 1fr; grid-template-areas: "a" "b" "c" "d"; gap: 8px; }
.svc-card .ui-flow li { grid-template-columns: 24px 1fr; gap: 10px; padding: 6px 10px; }
.svc-card .flow-ico { width: 24px; height: 24px; border-radius: 7px; }
.svc-card .flow-ico svg { width: 14px; height: 14px; }
.svc-card .ui-flow li > span:last-child { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.svc-card .ui-flow li b { font-size: 12.5px; }
.svc-card .ui-flow li small { display: none; }
.svc-card .flow-ai small { display: block; margin: 0; padding: 3px 8px; border-radius: 99px; background: var(--kobolt-100); font-size: 10.5px; white-space: nowrap; }
.svc-card .ui-flow li::after { top: 100%; left: 21px; right: auto; width: 2px; height: 8px; background: repeating-linear-gradient(180deg, rgb(var(--accent-rgb) / .7) 0 3px, transparent 3px 5px); background-size: 2px 10px; animation: flow-dash-v 1s linear infinite; }
.svc-card .flow-msg::after { display: none; }
.svc-card .flow-head { margin-bottom: 8px; }
.svc-stage .ui-flow { width: 86%; }
.svc-stage .ui-flow li { padding: 14px 16px; grid-template-columns: 38px 1fr; }
.svc-stage .flow-ico { width: 38px; height: 38px; }
.svc-stage .ui-flow li b { font-size: 15px; }
.svc-stage .ui-flow li small { font-size: 12.5px; }
.svc-stage .ui-flow ol { gap: 34px 44px; }
.svc-stage .flow-form::after, .svc-stage .flow-crm::after { width: 44px; }
.svc-stage .flow-ai::after { height: 34px; }
.svc-stage .flow-head { font-size: 12px; margin-bottom: 18px; }
.svc-body { display: flex; flex-direction: column; gap: 6px; padding: 24px 26px 26px; flex: 1; }
.svc-body .n { font-size: var(--fs-label); font-weight: var(--fw-label); letter-spacing: var(--ls-label); color: var(--primary); }
.svc-body h2 { font-size: 24px; font-weight: 700; letter-spacing: -.02em; line-height: 1.15; }
.svc-body p { color: var(--text-muted); }
.svc-list { display: grid; gap: 8px; margin: 12px 0 22px; }
.svc-list li { position: relative; padding-left: 24px; font-size: 15px; font-weight: var(--fw-medium); }
.svc-list li::before { content: ''; position: absolute; left: 3px; top: 5px; width: 4.5px; height: 9px; border: solid var(--primary); border-width: 0 2px 2px 0; transform: rotate(45deg); }
.svc-list { margin-bottom: 16px; }
/* Værktøjerne til ydelsen: små runde ikoner i en række */
.svc-tools { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 22px; padding-top: 16px; border-top: 1px solid var(--line); }
.svc-tools li { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: var(--raised); border: 1px solid var(--line); box-shadow: 0 6px 14px -10px rgba(20, 27, 28, .35); transition: transform var(--t-fast) var(--ease); }
.svc-tools li:hover { transform: translateY(-2px); }
.svc-tools img { width: 20px; height: 20px; object-fit: contain; }
.svc-body .btn { margin-top: auto; align-self: flex-start; }
.story { padding: var(--section) 0; background: var(--tint); color: var(--text); }
.story .kicker { color: var(--accent-on-dark); }
.story .pin-a { background: var(--tint); }
.pricing { padding: var(--section) 0; }
.badge { position: absolute; top: 22px; right: 22px; background: #fff; color: var(--primary); font-size: 11.5px; font-weight: var(--fw-semibold); padding: 6px 12px; border-radius: var(--r-pill); }
/* Kontakt */
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 6vw, 96px); align-items: start; padding-bottom: clamp(32px, 5vw, 64px); }

/* ---------- Scroll-reveal ---------- */
.js .page-hero .rv { opacity: 1; transform: none; }
.js .rv:not(.page-hero .rv):not(.case-hero .rv) { opacity: 0; transform: translateY(24px); filter: blur(6px); transition: opacity .9s var(--ease-soft), transform 1.1s var(--ease-soft), filter .8s var(--ease-soft); transition-delay: calc(var(--d, 0) * 70ms); }
.js .rv.in:not(.page-hero .rv):not(.case-hero .rv) { opacity: 1; transform: none; filter: none; }
/* Billeder falder blødt på plads, når de kommer ind */
.js .rv img { transition: scale 2.6s var(--ease-soft), transform 1.2s var(--ease); }
.js .rv:not(.in) img { scale: 1.07; }

/* ---------- Responsivt ---------- */
@media (max-width: 1080px) {
  .svc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .svc-split { grid-template-columns: 1fr; }
  .svc-stage { display: none; }
  .svc-links small { max-height: none; opacity: 1; }
  .svc-links b { color: var(--text); }
  .svc-links .arr { opacity: 1; }
  .person-card { grid-template-columns: 1fr; padding: 16px; }
  .person-card figure { aspect-ratio: 4 / 3; }
}
@media (max-width: 900px) {
  .mega, .chev { display: none; }
  .nav-item { height: auto; }
  .has-mega > .nav-link::after { display: none; }
    .nav { position: fixed; inset: 0; height: 100dvh; background: var(--bg); flex-direction: column; align-items: flex-start; justify-content: center; gap: 18px; padding: 0 var(--gutter); transform: translateY(-12px); opacity: 0; visibility: hidden; transition: transform var(--t-base) var(--ease), opacity .3s, visibility 0s .4s; z-index: -1; }
  .nav a { font-size: 30px; font-weight: var(--fw-medium); letter-spacing: -.02em; color: var(--text); }
  .nav .lang { font-size: 15px; margin-top: 12px; color: var(--text-muted); }
  .nav .lang-label { display: inline; }
  .menu-toggle { display: grid; gap: 6px; place-content: center; width: 44px; height: 44px; border: 0; background: transparent; cursor: pointer; }
  .menu-toggle span:not(.sr) { width: 22px; height: 1.5px; background: var(--text); transition: transform .3s var(--ease); }
  .header-inner { gap: 10px; }
  .logo-text { white-space: nowrap; }
  .header-cta { height: 36px; padding: 0 14px; font-size: 13px; }
  .cta-long { display: none; }
  .cta-short { display: inline; }
  .hero-grid { grid-template-columns: 1fr; gap: 28px; }
  .hero-title { margin-bottom: 18px; }
  .checks { gap: 8px; }
  .checks li { font-size: 15px; }
  .hero .actions { margin-top: 24px; }
  .marquee-neg { margin-top: 32px; }
  .hero-title { max-width: none; }
  .stage { height: 380px; }
  .s-film figure { width: min(31cqw, 46cqh); }
  .s-grafik .ad { width: min(34cqw, 50cqh); }
    .case-card, .case-card.big, .case-grid.all .case-card.big + .case-card { grid-column: span 12; }
  .persona { grid-template-columns: 1fr; }
  .persona { padding-right: clamp(14px, 1.6vw, 18px); padding-bottom: 24px; }
  .films.reels { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .facts-grid { grid-template-columns: 1fr 1fr; row-gap: 40px; }
  .fact:nth-child(3) { border-left: 0; padding-left: 0; }
  .logo-item img { height: 22px; }
  .family-grid, .contact-grid, .persona, .sites-grid, .sites-duo { grid-template-columns: 1fr; }
  .hero-home { min-height: 0; }
  .films.many { grid-template-columns: 1fr 1fr; }
  .sites-grid .site:nth-child(3n+1) { grid-column: auto; }
  .photo-strip { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 160px; }
  .photo-strip a:nth-child(n+8) { display: none; }
  .site-cap { padding-right: 0; flex-direction: column; gap: 8px; }
  .phone { width: 22%; min-width: 76px; right: -6px; }
  .section-head.row { flex-direction: column; align-items: flex-start; }
  .footer-grid { grid-template-columns: repeat(3, 1fr); }
  .footer-brand { grid-column: 1 / -1; }
  .lb-stage { inset: 64px 12px 72px; }
  .lb-prev, .lb-next { top: auto; bottom: 14px; translate: none; }
}
@media (max-width: 560px) {
  .hero-title { font-size: clamp(1.9rem, 8.4vw, 2.3rem); }
  .s-film figure { width: 32%; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-brand { grid-column: 1 / -1; }
  .footer-base { flex-direction: column; }
  .svc-grid, .people { grid-template-columns: 1fr; }
  .gallery { columns: 2 140px; column-gap: 8px; }
  .gallery button { margin-bottom: 8px; }
  .sv-top { flex-wrap: wrap; }
  .actions .btn { flex: 1 1 auto; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  .js .rv { opacity: 1 !important; transform: none !important; }
  .glow, .hero-home .stage { animation: none !important; }
  .hub-dots { display: none; }
  }

/* ---------- Teamets justeringer (23/10) ---------- */
.cta-short { display: none; }
/* Kobolt til lille tekst skal have AA-kontrast på tonede flader */
.kicker, .case-client, .svc-body .n, .footer-col p, .mega-price span, .persona cite, .person-card figcaption span, .duo-photos span, .flow-head b, .story .kicker, .end-band .kicker { color: var(--accent-text); }
.about-facts b { font-weight: var(--fw-heading); color: var(--text); }

/* Ens venstrekant på forsiden */
.manifesto-lines { max-width: 860px; }
.wrap.section-head { max-width: var(--wrap); }
.wrap.section-head > .display { max-width: 760px; }

/* Case: tallene som ét tonet bånd */
/* Case: "Det gjorde vi" med nummeret på linje med teksten */
/* Case: kundecitatet i et tonet kort på linje med resten */
/* Case: ingen forældreløse film og fotos */
.films:not(.two):not(.reels):not(.many) video.tall { max-width: 360px; margin: 0; }
.case-photos .gallery.n4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.case-photos .gallery.n5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.case-photos .gallery img { object-position: 50% 25%; }
@media (min-width: 901px) {
  .films.many { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .films.many > * { grid-column: span 2; }
  .films.many > :first-child:nth-last-child(4), .films.many > :first-child:nth-last-child(4) ~ *,
  .films.many > :first-child:nth-last-child(5), .films.many > :first-child:nth-last-child(5) + * { grid-column: span 3; }
  /* /cases: kortet ved det store kort flugter, og sidste række står som en duo */
  .case-grid.all .case-card.big + .case-card .case-img { aspect-ratio: auto; flex: 1 1 auto; min-height: 240px; }
  .case-grid.all .case-card:nth-child(5n+3):nth-last-child(2), .case-grid.all .case-card:nth-child(5n+3):nth-last-child(2) + .case-card { grid-column: span 6; }
  /* /websites: sidste site alene fylder hele rækken */
  .sites-grid .site:nth-child(3n+2):last-child { grid-column: span 2; }
  .sites-grid .site:nth-child(3n+2):last-child .browser-view { height: clamp(320px, 44vw, 580px); }
}
/* Kontakt: portrætterne fylder venstre kolonne */
.contact-grid { align-items: center; }
.contact-grid .duo-photos { margin-top: var(--sp-7); max-width: 480px; }

@media (max-width: 900px) {
  .cta-long { display: none; }
  .cta-short { display: inline; }
  .films.many > :first-child:nth-last-child(odd) { grid-column: 1 / -1; }
  .link-arrow { padding-block: 12px; margin-block: -12px; }
  .footer-col { gap: 4px; }
  .footer-col a { padding-block: 8px; }
}
@media (max-width: 560px) {
  /* Fotos, cases og websites som swipe-rækker på mobil */
  .case-photos .gallery, .case-photos .gallery.n2, .case-photos .gallery.n4, .case-photos .gallery.n5 { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 64%; overflow-x: auto; scroll-snap-type: x mandatory; gap: 10px; margin-right: calc(-1 * var(--gutter)); padding-right: var(--gutter); scrollbar-width: none; max-width: none; }
  .case-photos .gallery button { scroll-snap-align: start; }
  .cases-home .case-grid, .sites-duo { display: grid; grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 84%; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; margin-right: calc(-1 * var(--gutter)); padding-right: var(--gutter); padding-bottom: 24px; scrollbar-width: none; }
  .cases-home .case-grid::-webkit-scrollbar, .sites-duo::-webkit-scrollbar, .case-photos .gallery::-webkit-scrollbar { display: none; }
  .cases-home .case-grid > .case-card, .sites-duo > .site { grid-column: auto; scroll-snap-align: start; }
  .sites-duo .phone { right: 8px; }
  .contact-grid .duo-photos { max-width: 320px; margin-top: var(--sp-5); }
}
@media (max-width: 380px) {
  .header-inner { padding-left: 18px; }
  .logo-text { font-size: 15px; }
  .header-cta { padding: 0 12px; }
}

/* AI-flowet kører i rækkefølge: hvert trin lyser op, og en prik løber videre til det næste */
.ui-flow li { --dx: 0px; --dy: 0px; animation: flow-step 4s infinite; animation-delay: calc(var(--s) * 1s); }
.flow-form { --s: 0; } .flow-ai { --s: 1; } .flow-crm { --s: 2; } .flow-msg { --s: 3; }
.flow-ai { border-color: var(--line); box-shadow: 0 12px 26px -18px rgba(30, 50, 91, .45); }
@keyframes flow-step { 0%, 20% { border-color: rgb(var(--accent-rgb) / .6); box-shadow: 0 0 0 4px rgb(var(--accent-rgb) / .12), 0 14px 30px -18px rgba(30, 50, 91, .55); } 28%, 100% { border-color: var(--line); box-shadow: 0 12px 26px -18px rgba(30, 50, 91, .45); } }
.ui-flow li::after { animation: none; background: repeating-linear-gradient(90deg, rgb(var(--accent-rgb) / .3) 0 4px, transparent 4px 8px); }
.flow-ai::after, .svc-card .ui-flow li::after { background: repeating-linear-gradient(180deg, rgb(var(--accent-rgb) / .3) 0 4px, transparent 4px 8px); }
.ui-flow li::before { content: ''; position: absolute; z-index: 2; width: 8px; height: 8px; margin: -4px 0 0 -4px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 3px rgb(var(--accent-rgb) / .2); opacity: 0; animation: flow-dot 4s linear infinite; animation-delay: calc(var(--s) * 1s + .5s); }
.flow-form::before { left: 100%; top: 50%; --dx: 30px; }
.flow-ai::before { left: 50%; top: 100%; --dy: 22px; }
.flow-crm::before { left: 0; top: 50%; --dx: -30px; }
.flow-msg::before { display: none; }
@keyframes flow-dot { 0% { opacity: 0; translate: 0 0; } 3% { opacity: 1; } 22% { opacity: 1; translate: var(--dx) var(--dy); } 25%, 100% { opacity: 0; translate: var(--dx) var(--dy); } }
.svc-stage .flow-form::before { --dx: 44px; } .svc-stage .flow-crm::before { --dx: -44px; } .svc-stage .flow-ai::before { --dy: 34px; }
/* Lodret udgave på Ydelser-kortet */
.svc-card .ui-flow ol { gap: 10px; }
.svc-card .ui-flow li { padding: 5px 10px; }
.svc-card .ui-flow li::after { height: 10px; left: 22px; }
.svc-card .ui-flow li::before { left: 23px; top: 100%; --dx: 0px; --dy: 10px; }
.svc-card .flow-msg::before { display: none; }
@media (prefers-reduced-motion: reduce) { .ui-flow li, .ui-flow li::before { animation: none; } }

/* ---------- Eksklusiv bevægelse: heroens indhold glider blødt ind ved indlæsning ---------- */
@keyframes rise { from { opacity: 0; transform: translateY(28px); filter: blur(8px); } }
.hero-text > *, .page-hero .rv > * { animation: rise 1.6s var(--ease-soft) both; }
.hero-text > :nth-child(2), .page-hero .rv > :nth-child(2), .case-intro > :nth-child(2) { animation-delay: .14s; }
.hero-text > :nth-child(3), .page-hero .rv > :nth-child(3), .case-intro > :nth-child(3) { animation-delay: .28s; }
.hero-text > :nth-child(4), .page-hero .rv > :nth-child(4), .case-intro > :nth-child(4) { animation-delay: .42s; }
.hero-text > :nth-child(n+5), .page-hero .rv > :nth-child(n+5), .case-intro > :nth-child(n+5) { animation-delay: .56s; }
.hero-home .slider { animation: rise 1.8s .3s var(--ease-soft) both; }
.case-card, .site, .svc-card { transition-duration: .6s; }

/* ---------- Udvikling med Claude Code ---------- */
.code-show { position: relative; isolation: isolate; overflow: hidden; color: #fff; padding: var(--section) 0; background: radial-gradient(70% 90% at 100% 0%, rgb(135 178 255 / .36) 0%, transparent 70%), radial-gradient(60% 80% at 0% 100%, rgb(135 178 255 / .16) 0%, transparent 70%), linear-gradient(160deg, #4067b5 0%, #35569a 52%, #29447c 100%); }
.code-show::before { content: ''; position: absolute; inset: 0; z-index: -1; background-image: linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px); background-size: 72px 72px; mask-image: radial-gradient(60% 70% at 60% 60%, #000 10%, transparent 80%); }
.code-head { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 5vw, 80px); align-items: start; margin-bottom: clamp(28px, 3vw, 44px); }
.code-head .lead { font-size: clamp(1rem, 1.3vw, 1.1rem); }
.code-show .kicker { color: #d3e3ff; }
.code-show .display { color: #fff; font-size: var(--fs-h2); max-width: 15ch; }
.code-show .lead { color: rgba(255, 255, 255, .86); max-width: 50ch; }
.code-points { display: grid; gap: 6px; margin: 14px 0 22px; }
.code-points li { font-size: 15px; }
.code-points li { position: relative; padding-left: 28px; color: #fff; font-weight: var(--fw-semibold); }
.code-points li::before { content: ''; position: absolute; left: 0; top: 4px; width: 16px; height: 16px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .45); }
.code-points li::after { content: ''; position: absolute; left: 6px; top: 8px; width: 3.5px; height: 6.5px; border: solid #d3e3ff; border-width: 0 1.5px 1.5px 0; transform: rotate(45deg); }
.code-show .btn { background: #fff; border-color: #fff; color: var(--kobolt-800); }
.code-show .btn:hover { background: #eaf2ff; border-color: #eaf2ff; }
.code-stage { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr); gap: clamp(14px, 1.6vw, 22px); height: clamp(400px, calc(100svh - 170px), 500px); }
/* Terminalen: som den rigtige Claude Code, i Claudes lyse tema (elfenben og terrakotta) */
.term { --tx: #3d3929; --mu: #83827d; --hd: #1f1e1d; display: flex; flex-direction: column; min-height: 0; background: #faf9f5; color: var(--tx); border-radius: 16px; overflow: hidden; box-shadow: 0 34px 70px -40px rgba(7, 14, 31, .75), 0 0 0 1px rgba(255, 255, 255, .4); font: 12px/1.6 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.term-bar { flex: none; position: relative; display: flex; align-items: center; gap: 7px; height: 32px; padding: 0 13px; background: #f0eee6; border-bottom: 1px solid #e3e0d4; }
.term-bar i { width: 11px; height: 11px; border-radius: 50%; background: #ff5f57; }
.term-bar i:nth-child(2) { background: #febc2e; } .term-bar i:nth-child(3) { background: #28c840; }
.term-bar span { position: absolute; left: 0; right: 0; text-align: center; font: 600 12px/1 var(--font); color: var(--mu); pointer-events: none; }
.term-body { flex: 1; display: flex; flex-direction: column; min-height: 0; padding: 14px 16px 12px; }
.term-welcome { flex: none; display: grid; gap: 1px; padding: 8px 12px; margin-bottom: 4px; border: 1px solid #d97757; border-radius: 8px; }
.term-welcome p { color: var(--hd); }
.term-welcome p b { color: #d97757; margin-right: 6px; }
.term-welcome small { font-size: 11.5px; color: var(--mu); }
.term-log { flex: 1; min-height: 0; overflow: hidden; transition: opacity .5s; }
.term-log.scrolled { mask-image: linear-gradient(transparent, #000 16%); }
.term-log.fade { opacity: 0; }
@keyframes tl-in { from { opacity: 0; transform: translateY(6px); } }
.tl-p { margin-top: 10px; padding: 3px 8px; border-radius: 4px; background: #efece2; color: #5e5d59; }
.tb { margin-top: 7px; }
.tl-tool .b, .tl-say .b { font-style: normal; color: #2e8b57; margin-right: 8px; font-size: 10px; vertical-align: 1px; }
.tl-say .b.w { color: var(--hd); }
.tl-tool b { color: var(--hd); font-weight: 700; }
.tl-tool span { color: #5e5d59; }
.tl-res { color: var(--mu); padding-left: 4px; }
.tl-res .hook { display: inline-block; width: 22px; color: #b9b6aa; }
.tl-diff { margin: 4px 0 0 26px; border-radius: 4px; overflow: hidden; }
.tl-diff p { padding: 0 8px; white-space: pre; overflow: hidden; text-overflow: ellipsis; }
.tl-diff .add { background: #e3f3e6; color: #1d5b2c; }
.tl-say { color: var(--hd); margin-top: 2px; }
.term-input { flex: none; display: flex; align-items: center; gap: 9px; margin-top: 12px; padding: 8px 12px; border: 1px solid #d6d2c4; border-radius: 8px; min-height: 38px; color: var(--hd); background: #fff; }
.term-input b { color: var(--mu); font-weight: 400; }
.term-typed { white-space: nowrap; overflow: hidden; }
.term-hint { flex: none; margin-top: 6px; padding-left: 2px; font-size: 11px; color: #7c5cd6; }
.term-hint span { color: var(--mu); }
.cursor { flex: none; width: 8px; height: 16px; background: var(--hd); animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
/* Platformene: spøgelser, der kommer til live som færdige produkter */
.code-out { display: grid; grid-template-columns: 1.15fr 1fr; grid-template-rows: 1fr 1fr; gap: clamp(12px, 1.4vw, 18px); min-height: 0; }
.pf { position: relative; min-height: 0; overflow: hidden; display: flex; flex-direction: column; gap: 10px; border-radius: 18px; border: 1.5px dashed rgba(255, 255, 255, .28); background: rgba(255, 255, 255, .05); padding: 40px 14px 14px; color: var(--text); font: 500 10.5px/1.35 var(--font); transition: background .9s var(--ease-soft), border-color .9s, box-shadow .9s var(--ease-soft), transform .9s var(--ease-soft); }
.pf b { font-weight: 700; }
.pf em { font-style: normal; }
.pf-tag { position: absolute; left: 12px; top: 11px; z-index: 2; padding: 4px 10px; border-radius: 99px; font: 700 10.5px/1.3 var(--font); letter-spacing: .04em; color: rgba(255, 255, 255, .78); background: rgba(255, 255, 255, .1); transition: color .6s, background .6s; }
.pf > :not(.pf-tag) { opacity: 0; transform: translateY(12px); transition: opacity .7s var(--ease-soft), transform .9s var(--ease-soft); }
.pf.live { background: #fff; border: 1.5px solid #fff; box-shadow: 0 24px 50px -32px rgba(13, 24, 47, .55); transform: translateY(-2px); }
.pf.live .pf-tag { color: var(--accent-text); background: var(--kobolt-100); }
.pf.live > :not(.pf-tag) { opacity: 1; transform: none; }
.pf.live > :nth-child(3) { transition-delay: .12s; } .pf.live > :nth-child(4) { transition-delay: .24s; } .pf.live > :nth-child(5) { transition-delay: .36s; }
/* Webshop (opdigtet kaffebar, stockfotos fra Unsplash) */
.pf-site { grid-row: span 2; gap: 11px; padding: 40px 0 0; container-type: inline-size; }
.pf-site > :not(.pf-tag):not(.pf-toast) { margin: 0 14px; }
.pf-chrome { display: flex; align-items: center; gap: 5px; padding: 6px 8px; border-radius: 9px; background: var(--surface); }
.pf-chrome i { width: 7px; height: 7px; border-radius: 50%; background: var(--blaek-100); }
.pf-chrome span { flex: 1; margin-left: 6px; padding: 3px 10px; border-radius: 99px; background: #fff; color: var(--text-muted); font-size: 9.5px; }
.pf-nav { display: flex; align-items: center; gap: 10px; color: var(--text-muted); }
.pf-nav b { margin-right: auto; color: var(--text); font-size: 13px; font-weight: 800; letter-spacing: -.03em; }
.pf-banner { position: relative; overflow: hidden; border-radius: 12px; aspect-ratio: 16 / 10; }
.pf-banner img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 60%; }
.pf-banner div { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end; padding: 14px; color: #fff; background: linear-gradient(transparent 35%, rgba(18, 14, 10, .62)); }
.pf-banner h4 { font-size: 16px; font-weight: 800; letter-spacing: -.02em; line-height: 1.1; }
.pf-banner p { margin: 3px 0 9px; font-size: 10px; opacity: .88; }
.pf-banner em { align-self: flex-start; padding: 6px 12px; border-radius: 99px; background: #fff; color: var(--text); font-weight: 700; }
.pf-row { display: flex; justify-content: space-between; align-items: baseline; }
.pf-row b { font-size: 11.5px; }
.pf-row span { color: var(--text-muted); font-size: 10px; }
.pf-trust { display: flex; justify-content: space-between; gap: 8px; white-space: nowrap; margin-top: auto !important; padding: 10px 14px !important; margin-left: 0 !important; margin-right: 0 !important; border-top: 1px solid var(--line); background: var(--surface); font-size: 9.5px; font-weight: 600; color: var(--text-muted); }
.pf-toast { position: absolute; right: 14px; top: 17%; z-index: 3; display: flex; align-items: center; gap: 8px; padding: 8px 12px 8px 8px; border-radius: 12px; background: #fff; box-shadow: 0 16px 32px -14px rgba(13, 24, 47, .45), 0 0 0 1px rgba(20, 27, 28, .06); opacity: 0; transform: translateY(10px) scale(.96); transition: opacity .6s var(--ease-soft), transform .8s var(--ease-soft); }
.pf-toast i { width: 22px; height: 22px; border-radius: 50%; background: var(--accent); position: relative; }
.pf-toast i::after { content: ''; position: absolute; left: 8px; top: 5px; width: 5px; height: 9px; border: solid #fff; border-width: 0 2px 2px 0; rotate: 45deg; }
.pf-toast b { display: block; font-size: 10.5px; }
.pf-toast span { font-size: 9.5px; color: var(--text-muted); }
.pf.live .pf-toast { opacity: 1; transform: none; transition-delay: 1.4s; }
@container (max-width: 300px) { .pf-nav span { display: none; } .pf-banner h4 { font-size: 14px; } .pf-trust span:last-child { display: none; } }
/* Dashboard */
.pf.live .pf-chart span { transform: none; }
/* Kundeportal */
/* Lille terminal i forsidens ydelsesliste */
.mini-term { width: calc(100% - 56px); height: calc(100% - 56px); display: flex; }
.mini-term .term { flex: 1; font-size: 11.5px; }
.mini-term .term-log { mask-image: none; }
.mini-term .tl-p { margin-top: 4px; }
@media (max-width: 900px) {
  .code-head { grid-template-columns: 1fr; align-items: start; }
  .code-stage { grid-template-columns: 1fr; height: auto; }
  .term { height: 400px; }
  .code-out { grid-template-columns: 1fr 1fr; grid-template-rows: auto; }
  .pf-site { grid-row: auto; grid-column: 1 / -1; }
}
@media (max-width: 560px) {
  .term { font-size: 11.5px; height: 400px; }
  .term-welcome small:first-of-type { display: none; }
  .code-out { grid-template-columns: 1fr; }
}

/* E-mailmarketing: mailen i indbakken og velkomstflowet, der sender den */
@keyframes em-send { 0% { background: #fff; border-color: rgb(var(--accent-rgb) / .5); box-shadow: none; } 6%, 30% { background: var(--accent); border-color: var(--accent); box-shadow: 0 0 0 .8cqi rgb(var(--accent-rgb) / .15); } 36%, 100% { background: var(--accent); border-color: var(--accent); box-shadow: none; } }

/* Heroens eyebrow: AI-first, med en lysende stjerne og et blødt lysglimt */
@keyframes spark { 0%, 100% { transform: rotate(0) scale(1); } 50% { transform: rotate(90deg) scale(1.12); } }
@keyframes shimmer { 0% { transform: translateX(-110%); } 30%, 100% { transform: translateX(110%); } }
/* Smalle platformkort: færre detaljer, så intet bliver klemt */

/* Mobil: en renere hero – overskrift, to knapper side om side og grafikken */
@media (max-width: 560px) {
  .hero-home .checks { display: none; }
  .hero-home .actions { flex-wrap: nowrap; gap: 10px; margin-top: 22px; }
  .hero-home .actions .btn { flex: 0 1 auto; height: 44px; padding: 0 16px; font-size: 14px; }
  .hero-home .hero-title { margin-top: 20px; margin-bottom: 0; }
}
/* Mobil: alle fire slides fylder lige meget i en lavere scene */
@media (max-width: 560px) {
  .hero-home .hero-grid { gap: 32px; }
  .stage { height: 300px; }
  .s-web { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr; align-content: center; height: 76%; margin-top: 12%; gap: 10px; }
  .s-web .br:nth-child(n+3) { display: none; }
  .s-film { gap: 10px; }
  .s-film figure { width: min(30cqw, 80cqh * 9 / 16); }
  .s-film figure:nth-child(2) { transform: rotateY(-8deg) translateY(14px); }
  .s-grafik .ad { width: min(31cqw, 80cqh * 9 / 16); }
}
.page-hero + section > .wrap > .gallery { padding-top: clamp(28px, 4vw, 48px); }
/* Blød sløring rundt om den svævende header, så indhold glider diskret ind under den */
.site-header::before { content: ''; position: absolute; left: 0; right: 0; top: -120px; bottom: -14px; z-index: -1; background: linear-gradient(rgb(246 247 245 / .35), transparent); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); -webkit-mask-image: linear-gradient(#000 78%, transparent); mask-image: linear-gradient(#000 78%, transparent); pointer-events: none; }
.header-inner::before { background: rgba(255, 255, 255, .82); -webkit-backdrop-filter: saturate(1.4) blur(24px); backdrop-filter: saturate(1.4) blur(24px); }
.page-hero + section > .sites-grid { padding-top: clamp(32px, 5vw, 64px); }

/* Overskrifter i to farver */
.hl { color: var(--accent); }
.page-hero .hl, .code-show .hl { color: #d3e3ff; }
/* Claude Code-sektionen: kompakt top */
.code-head { margin-bottom: clamp(22px, 2.4vw, 34px); }
.code-head .lead { margin-bottom: 18px; }
.code-show { padding: clamp(56px, 6vw, 88px) 0; }
.code-stage { height: clamp(380px, calc(100svh - 210px), 470px); }
/* E-mailen: en rigtig mail fra en person */
.em-body { flex: 1; min-height: 0; overflow: hidden; padding: 2.4cqi 3.2cqi; font-size: max(9px, 2.3cqi); line-height: 1.45; color: var(--text-muted); }
.em-body img { width: 100%; aspect-ratio: 16 / 7; object-fit: cover; border-radius: 1.8cqi; margin-bottom: 2cqi; }
/* Næste case: et tydeligt bånd, der afslutter casen */
.next-band { margin-top: clamp(24px, 4vw, 48px); padding: clamp(48px, 6vw, 80px) 0; color: #fff; background: radial-gradient(70% 90% at 100% 0%, rgb(135 178 255 / .34), transparent 70%), linear-gradient(160deg, #4067b5, #29447c); }
.next-band a { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 4vw, 64px); align-items: center; color: inherit; text-decoration: none; }
.next-band .next-txt { display: grid; gap: 10px; justify-items: start; }
.next-band .kicker { color: #d3e3ff; margin: 0; }
.next-band b { font-size: clamp(2rem, 4vw, 3.2rem); font-weight: var(--fw-heading); letter-spacing: -.035em; line-height: 1.05; }
.next-band small { font-size: clamp(1rem, 1.4vw, 1.2rem); color: rgba(255, 255, 255, .84); max-width: 34ch; }
.next-band .btn { margin-top: 12px; background: #fff; border-color: #fff; color: var(--kobolt-800); }
.next-band figure { aspect-ratio: 16 / 10; border-radius: var(--r-l); overflow: hidden; box-shadow: 0 30px 60px -30px rgba(7, 14, 31, .7); }
.next-band img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.next-band a:hover img { transform: scale(1.04); }
@media (max-width: 760px) { .next-band a { grid-template-columns: 1fr; } .next-band figure { order: -1; } }

/* Video på fotosiden */
.video-port { padding-bottom: var(--section); }
.video-port video { display: block; width: 100%; border-radius: var(--r-m); background: var(--blaek-900); box-shadow: var(--shadow-m); }
.video-port figcaption { margin-top: 10px; font-size: 14px; font-weight: var(--fw-semibold); }

/* YouTube med klik-for-at-afspille */
.yt { position: relative; aspect-ratio: 16 / 9; border-radius: var(--r-m); overflow: hidden; background: var(--blaek-900); box-shadow: var(--shadow-m); }
.yt img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border: 0; }
.yt button { position: absolute; inset: 0; display: grid; place-items: center; border: 0; background: linear-gradient(transparent 50%, rgba(0, 0, 0, .35)); cursor: pointer; }
.yt button span { width: 72px; height: 72px; border-radius: 50%; background: rgba(255, 255, 255, .92); box-shadow: 0 10px 30px -8px rgba(0, 0, 0, .5); position: relative; transition: transform .3s var(--ease); }
.yt button span::after { content: ''; position: absolute; left: 29px; top: 22px; border-style: solid; border-width: 14px 0 14px 22px; border-color: transparent transparent transparent var(--kobolt-800); }
.yt button:hover span { transform: scale(1.08); }
.yt-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.yt-pair figcaption { margin-top: 10px; font-size: 14px; font-weight: var(--fw-semibold); }
@media (max-width: 760px) { .yt-pair { grid-template-columns: 1fr; } }
.case-photos .gallery.n2 button { aspect-ratio: 4 / 3 !important; }

/* Bag kameraet: billeder fra optagelsen som kontekst */
.case-bts { padding-bottom: clamp(48px, 6vw, 80px); }
.case-bts .display { font-size: var(--fs-h3, 1.6rem); margin-bottom: 18px; max-width: 34ch; }
.case-bts .gallery { padding-bottom: 0; columns: auto; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.case-bts .gallery.n1 { grid-template-columns: minmax(0, 1fr); max-width: 760px; }
.case-bts .gallery button { margin: 0; aspect-ratio: 4 / 3 !important; }
.case-bts .gallery img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 560px) { .case-bts .gallery { grid-template-columns: 1fr 1fr; gap: 8px; } }
.header-inner::before { background: #fff; }

/* Tal-båndet: tre kort, hvor tallene popper */
.facts-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(12px, 1.6vw, 20px); }
.fact, .fact:first-child { padding: clamp(24px, 3vw, 36px); border: 0; border-radius: var(--r-l); background: var(--tint); }
.fact p { gap: 10px; }
.fact-n { font-size: clamp(3.4rem, 6.4vw, 5.6rem); font-weight: 800; letter-spacing: -.05em; background: linear-gradient(135deg, var(--kobolt-800), var(--kobolt-500)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.fact-u { font-size: clamp(1.1rem, 1.6vw, 1.4rem); font-weight: 700; color: var(--text); }
.fact-l { margin-top: 10px; font-size: 15px; }
@media (max-width: 900px) { .facts-grid { grid-template-columns: 1fr; } .fact:nth-child(3) { padding: clamp(24px, 3vw, 36px); } .fact p { justify-content: flex-start; } }
@media (max-width: 560px) { .fact, .fact:first-child, .fact:nth-child(3) { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 20px 22px; } .fact-n { font-size: 3rem; } .fact-l { margin: 0; text-align: right; } }
/* Headeren 100 px bredere på desktop */
@media (min-width: 901px) { .header-inner { width: min(calc(100% - 2 * var(--gutter) + 200px), calc(100% - 24px)); max-width: calc(var(--wrap) - 2 * var(--gutter) + 200px); } }

/* Manifestet: lidt mindre overskrift og tre korte punkter */
.manifesto-lines { font-size: calc(clamp(2.8rem, 6.4vw, 5.4rem) - 10px); }

/* Ydelser: kanal-animationen og en stak af websites */
.svc-media.svc-hub { container-type: size; }
.svc-media .hub-node b { color: var(--text-muted); }
.svc-media .hub::before { background: radial-gradient(closest-side, rgb(var(--accent-rgb) / .12), transparent); }
.svc-media .hub-dots circle { fill: var(--accent); }
.svc-media .hub-node, .svc-media .hub-toast, .svc-media .hc-chart .l { animation: none; }
.svc-media .hub-node { opacity: 1; }
.svc-media .hub-toast:first-child { opacity: 1; }
.svc-media .hc-chart .l { stroke-dashoffset: 0; }
.svc-media .svc-sites { width: 86%; height: auto; aspect-ratio: 16 / 10.6; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: repeat(2, minmax(0, 1fr)); gap: 12px; }
.svc-media .svc-sites .br { min-height: 0; }
.svc-media .svc-sites .br:nth-child(n+3) { display: flex; }

/* Foto og video: portræt med to film ovenpå */

/* E-mailmarketing: en enkel indbakke med tre automatiske mails */
.inbox { width: 82%; padding: 18px 18px 10px; background: #fff; border-radius: 18px; color: var(--text); box-shadow: 0 24px 50px -28px rgba(30, 50, 91, .45), 0 0 0 1px rgba(20, 27, 28, .05); }
.ib-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; font-size: 12px; }
.ib-head b { font-size: 14px; font-weight: 700; }
.ib-head span { display: inline-flex; align-items: center; gap: 6px; color: var(--text-muted); }
.ib-head span::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); animation: flow-live 2s ease-in-out infinite; }
.inbox ol { display: grid; }
.inbox li { display: grid; grid-template-columns: 34px 1fr auto; gap: 12px; align-items: center; padding: 11px 4px; border-top: 1px solid var(--line); animation: ib-in 7.5s var(--ease-soft) infinite; animation-delay: calc(var(--n) * 1.5s); }
.ib-av { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: #2b2118; color: #fff; font-weight: 700; font-size: 13px; }
.ib-txt b { display: block; font-size: 13px; font-weight: 700; }
.ib-txt small { display: block; font-size: 12.5px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.inbox li em { font-style: normal; font-size: 11px; font-weight: 700; padding: 3px 9px; border-radius: 99px; background: var(--kobolt-100); color: var(--accent-text); }
@keyframes ib-in { 0% { opacity: 0; transform: translateY(8px); } 6%, 88% { opacity: 1; transform: none; } 96%, 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .inbox li { animation: none; } }

/* Fra A til B: fire store, klare trin */
.steps-ab { display: flex; align-items: center; gap: 14px; margin: 6px 0 22px; font-size: 14px; font-weight: var(--fw-semibold); color: var(--text-muted); }
.steps-ab span { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.steps-ab i { font-style: normal; }
.steps-ab b { flex: 1; height: 2px; border-radius: 2px; background: linear-gradient(90deg, var(--line-strong), var(--accent)); }
.steps4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; counter-reset: s; }
.steps4 li { position: relative; padding: 26px 24px 24px; border-radius: var(--r-l); background: #fff; box-shadow: 0 18px 40px -30px rgba(30, 50, 91, .45), 0 0 0 1px rgba(20, 27, 28, .05); }
.steps4 li + li::before { content: '→'; position: absolute; left: -15px; top: 50px; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--accent); color: #fff; font-size: 12px; font-weight: 700; z-index: 1; }
.st-n { position: absolute; right: 22px; top: 18px; font-size: 44px; font-weight: 800; letter-spacing: -.05em; line-height: 1; color: rgb(var(--accent-rgb) / .12); }
.steps4 h3 { margin: 18px 0 6px; font-size: 1.3rem; font-weight: var(--fw-heading); letter-spacing: -.02em; }
.steps4 p { font-size: 15px; color: var(--text-muted); }
@media (max-width: 900px) { .steps4 { grid-template-columns: 1fr 1fr; } .steps4 li:nth-child(3)::before { display: none; } }
@media (max-width: 560px) { .steps4 { grid-template-columns: 1fr; gap: 10px; } .steps4 li { display: grid; grid-template-columns: 48px 1fr; column-gap: 16px; padding: 18px; } .steps4 li::before { display: none !important; } .steps4 h3 { margin: 0; } .st-n { top: 50%; translate: 0 -50%; font-size: 34px; } .steps-ab span { font-size: 12.5px; } }

/* Priser: én flad timepris i et stort grønt kort, fast samarbejde ved siden af */
.flat-price { display: flex; align-items: baseline; gap: 14px; margin: 18px 0 10px; }
.flat-price b { font-size: clamp(5rem, 11vw, 9rem); font-weight: 800; letter-spacing: -.06em; line-height: .9; }
.flat-price span { font-size: clamp(1.1rem, 1.8vw, 1.5rem); font-weight: 700; color: #d3e3ff; }
.flat-body { max-width: 46ch; color: rgba(255, 255, 255, .86); font-size: 1.05rem; }
.flat-free { display: flex; flex-wrap: wrap; gap: 8px 20px; margin-bottom: 26px; }
.flat-free li { position: relative; padding-left: 22px; font-weight: 600; font-size: 15px; }
.flat-free li::before { content: ''; position: absolute; left: 2px; top: 5px; width: 6px; height: 11px; border: solid #d3e3ff; border-width: 0 2px 2px 0; rotate: 45deg; }
.ret-body { margin-top: 18px; color: var(--text-muted); }
.svc-links a { padding: 13px 4px; }
.svc-links b { font-size: clamp(1.2rem, 1.8vw, 1.45rem); }

/* Kender I det her? Problem til venstre, værdi til højre */
.pain { padding: var(--section) 0; }
.pain-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 4vw, 64px); align-items: start; }
.pain .display { font-size: var(--fs-h2); max-width: 18ch; }
.good { padding: clamp(28px, 3.4vw, 44px); border-radius: var(--r-l); color: #fff; background: radial-gradient(70% 90% at 100% 0%, rgb(135 178 255 / .36), transparent 70%), linear-gradient(160deg, #4067b5, #29447c); }
.good-text { font-size: clamp(1.25rem, 1.9vw, 1.6rem); font-weight: var(--fw-heading); line-height: 1.25; letter-spacing: -.02em; }
.good .btn { background: #fff; border-color: #fff; color: var(--kobolt-800); }
/* FAQ */
.faq { padding: var(--section) 0; }
.faq-grid { display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(24px, 4vw, 64px); align-items: start; }
.faq .display { font-size: var(--fs-h2); max-width: 14ch; }
.faq-list details { border-bottom: 1px solid var(--line); }
.faq-list details:first-child { border-top: 1px solid var(--line); }
.faq-list summary { position: relative; list-style: none; cursor: pointer; padding: 20px 44px 20px 0; font-size: 1.1rem; font-weight: 700; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after { content: '+'; position: absolute; right: 4px; top: 50%; translate: 0 -50%; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--kobolt-100); color: var(--accent-text); font-size: 18px; transition: rotate .3s var(--ease); }
.faq-list details[open] summary::after { rotate: 45deg; }
.faq-list details p { padding: 0 44px 20px 0; color: var(--text-muted); max-width: 60ch; }
@media (max-width: 900px) { .pain-grid, .faq-grid { grid-template-columns: 1fr; } }

/* Kundeudtalelser højt oppe på forsiden */
.reviews { padding: clamp(8px, 2vw, 24px) 0 var(--section); }
.reviews .section-head { margin-bottom: 20px; }
.review-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.review { display: flex; flex-direction: column; gap: 14px; padding: 24px; border-radius: var(--r-l); background: #fff; box-shadow: 0 18px 40px -30px rgba(30, 50, 91, .45), 0 0 0 1px rgba(20, 27, 28, .05); }
.stars { font-size: 18px; letter-spacing: 3px; color: var(--accent); }
.review blockquote p { font-size: 15px; line-height: 1.55; color: var(--text); }
.review figcaption { display: flex; align-items: center; gap: 12px; margin-top: auto; font-size: 13px; color: var(--text-muted); }
.review figcaption strong { display: block; font-size: 14.5px; color: var(--text); }
.review .quote-img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; }
@media (max-width: 1100px) { .review-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .review-grid { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 86%; overflow-x: auto; scroll-snap-type: x mandatory; margin-right: calc(-1 * var(--gutter)); padding-right: var(--gutter); padding-bottom: 8px; scrollbar-width: none; } .review { scroll-snap-align: start; } }

.mega .mega-price .btn, .mega .mega-price .btn:hover { color: #fff; }
.pricing-page { padding-top: calc(86px + clamp(32px, 5vw, 64px)); }

/* Tre prisniveauer */
.price-head { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 4vw, 64px); align-items: end; margin-bottom: clamp(24px, 3vw, 40px); }
.price-head .display { font-size: var(--fs-h2); }
.price-head .flat-body { color: var(--text-muted); }
.tier-body { margin-top: 16px; color: var(--text-muted); }
.tier.featured .tier-body { color: rgba(255, 255, 255, .84); }
@media (max-width: 900px) { .price-head { grid-template-columns: 1fr; } }

/* Logobåndet: ens visuel størrelse; SIDEfxHUB bruger sit eget hvide logo uden filter */
.logo-item img { height: calc(30px * var(--s, 1)); max-width: 200px; }
@media (max-width: 560px) { .logo-item img { height: calc(22px * var(--s, 1)); } }

/* Kender I det her: større og mere punchy */
.pain .display { font-size: clamp(2rem, 3.6vw, 3rem); }
.good-text { font-size: clamp(1.5rem, 2.4vw, 2rem); }
/* Organisk baggrund: ingen gitterlinjer, i stedet bløde lysfelter, der bevæger sig langsomt */
.hero-bg::before, .page-hero::before, .code-show::before { background-image: none; mask-image: none; }
.page-hero::before, .code-show::before { inset: -20%; background: radial-gradient(40% 50% at 25% 30%, rgb(170 202 255 / .18), transparent 70%), radial-gradient(35% 45% at 75% 70%, rgb(135 178 255 / .16), transparent 70%); animation: aurora 24s ease-in-out infinite alternate; }
.hero-bg::before { inset: -20%; background: radial-gradient(38% 46% at 30% 65%, rgb(170 202 255 / .14), transparent 70%), radial-gradient(30% 40% at 70% 25%, rgba(255, 255, 255, .06), transparent 70%); animation: aurora 28s ease-in-out infinite alternate; }
@keyframes aurora { 0% { transform: translate(0, 0) scale(1); } 50% { transform: translate(4%, -3%) scale(1.08); } 100% { transform: translate(-3%, 4%) scale(1.02); } }
@media (prefers-reduced-motion: reduce) { .hero-bg::before, .page-hero::before, .code-show::before { animation: none; } }

/* Manifest og "Kender I det her?" i én sektion */
.pain .manifesto-lines { font-size: clamp(2.2rem, 4.4vw, 3.8rem); max-width: none; margin-bottom: 18px; }
.pain .accent > i { background-size: 100% 100%; }
.js .pain .rv:not(.in) .accent > i { background-size: 0% 100%; }
.pain .manifesto-lines .accent > i { transition: background-size 1.6s var(--ease-soft) .7s; }

/* Foto og video som collage: to billeder og to film, der kører */
.fv-grid { display: grid; width: 100%; height: 100%; padding: 14px; gap: 8px; grid-template-columns: 1.25fr .75fr 1fr; grid-template-rows: 1fr 1fr; }
.fv-grid > * { width: 100%; height: 100%; min-height: 0; object-fit: cover; border-radius: 12px; }
.fv-grid .a { grid-row: span 2; object-position: 30% 30%; }
.fv-grid .b { grid-row: span 2; }
.fv-grid .c { object-position: 50% 30%; }
.fv-grid { grid-template-rows: repeat(2, minmax(0, 1fr)); }
.fv-grid video { object-position: 50% 25%; }
.svc-media { position: relative; }
.svc-media .fv-grid { position: absolute; inset: 0; height: auto; }
.good .hl { color: #d3e3ff; }

/* Bag kameraet: små billeder, der kun giver kontekst */
.case-bts .display { font-size: 1.15rem; margin-bottom: 12px; }
.case-bts .gallery, .case-bts .gallery.n1, .case-bts .gallery.n2 { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 720px; gap: 10px; }
.case-bts .gallery button { border-radius: 12px; }
.case-bts .gallery button span { display: none; }
@media (max-width: 560px) { .case-bts .gallery, .case-bts .gallery.n1, .case-bts .gallery.n2 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; } }

/* Kompakte case-sider */
.case-photos, .case-bts { padding-bottom: clamp(32px, 4vw, 52px); }
/* Filmfliser: forhåndsvisning, der kører stumt; klik for lyd */
.films.many, .films:not(.reels) { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.films.many > * { grid-column: auto !important; }
.vtile { position: relative; overflow: hidden; border-radius: var(--r-m); aspect-ratio: 16 / 10; background: var(--blaek-900); cursor: pointer; box-shadow: var(--shadow-m); }
.vtile video { width: 100%; height: 100%; object-fit: cover; border-radius: 0; box-shadow: none; transition: transform 1.2s var(--ease); }
.vtile:hover video { transform: scale(1.04); }
.vtile.on video { transform: none; }
.vtile figcaption { position: absolute; left: 12px; bottom: 12px; margin: 0; padding: 6px 12px; border-radius: 99px; background: rgba(255, 255, 255, .94); color: var(--text); font-size: 13px; font-weight: 700; pointer-events: none; }
.vplay { position: absolute; right: 12px; bottom: 12px; width: 34px; height: 34px; border-radius: 50%; background: rgba(255, 255, 255, .94); pointer-events: none; }
.vplay::after { content: ''; position: absolute; left: 13px; top: 10px; border-style: solid; border-width: 7px 0 7px 11px; border-color: transparent transparent transparent var(--kobolt-800); }
.vtile.on figcaption, .vtile.on .vplay { display: none; }
@media (max-width: 760px) { .films.many, .films:not(.reels) { grid-template-columns: 1fr 1fr; } }

/* Case-toppen i et grønt bånd med punch */
/* Tallene: store tal i gradient */
/* Citat: strammere */
/* Case: strammere top og blokke */
/* Hvem vi er: mindre portrætter, sat pænere op */
.people { grid-template-columns: 1fr 1fr; max-width: 980px; gap: 28px; }
.person-card figure { aspect-ratio: 1 / 1; }
.person-card img { object-position: 50% 20%; }
.person-card > p { font-size: 15.5px; }
/* A→B i det grønne bånd: luftigt og transparent i stedet for et hvidt kort */
.vtile.tall { aspect-ratio: 9 / 16; max-width: 300px; }
.films:has(> .vtile.tall:only-child) { grid-template-columns: 1fr; }
/* Gradient-tal: plads til bogstaver med underlængde (g, j, p) */
.fact-n { line-height: 1.12; padding-bottom: .08em; margin-bottom: -.08em; }

/* ---------- Case-sider v2: stor top, overblik i tre kolonner, medier ---------- */
body:has(main > .cs:first-child) .site-header { margin-bottom: -86px; }
.cs-hero { position: relative; isolation: isolate; color: #fff; }
.cs-hero .kicker { color: #d3e3ff; }
.cs-hero .back { display: inline-block; margin-bottom: 18px; font-size: 14px; color: rgba(255, 255, 255, .8); text-decoration: none; }
.cs-hero .back:hover { color: #fff; }
.cs-hero h1 { color: #fff; font-size: clamp(2.1rem, 4.4vw, 3.8rem); line-height: 1.04; letter-spacing: -.035em; max-width: 18ch; text-wrap: balance; }
.cs-hero .tags { margin-top: 20px; }
.cs-hero .tags li { background: rgba(255, 255, 255, .14); color: #fff; border-color: rgba(255, 255, 255, .24); }
.cs-hero .link-arrow { display: inline-block; margin-top: 16px; color: #fff; }
/* Variant 1: billedet i fuld bredde */
.cs-hero.full { min-height: min(82svh, 760px); display: flex; align-items: flex-end; padding: 140px 0 clamp(120px, 12vw, 160px); }
.cs-bg { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; }
.cs-hero.full::before { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(13, 24, 47, .35) 0%, rgba(13, 24, 47, .15) 35%, rgba(25, 43, 80, .9) 100%); }
/* Variant 2: delt top med medie */
.cs-hero.split { padding: 130px 0 clamp(120px, 12vw, 160px); background: radial-gradient(70% 90% at 100% 0%, rgb(135 178 255 / .36), transparent 70%), linear-gradient(160deg, #4067b5, #29447c); }
.cs-split { display: grid; grid-template-columns: 1fr 1.1fr; gap: clamp(28px, 5vw, 72px); align-items: center; }
.cs-media img, .cs-media video.wide { display: block; width: 100%; height: auto; max-height: 460px; object-fit: cover; border-radius: var(--r-l); box-shadow: 0 40px 80px -40px rgba(7, 14, 31, .8); }
/* Overblikket: tre kolonner, der overlapper toppen */
.cs-sum { position: relative; z-index: 2; display: grid; grid-template-columns: 1fr 1.1fr 1fr; margin-top: clamp(-110px, -8vw, -80px); background: #fff; border-radius: var(--r-l); box-shadow: 0 30px 70px -40px rgba(13, 24, 47, .55), 0 0 0 1px rgba(20, 27, 28, .05); }
.cs-col { padding: clamp(22px, 2.6vw, 34px); }
.cs-col + .cs-col { border-left: 1px solid var(--line); }
.cs-col.res { background: var(--tint); border-radius: 0 var(--r-l) var(--r-l) 0; }
.cs-label { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; font-size: 12.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--accent-text); }
.cs-text { color: var(--text-muted); font-size: 15.5px; line-height: 1.55; }
.cs-col.res .cs-text { color: var(--text); font-weight: 600; }
.cs-did { display: grid; gap: 9px; }
.cs-did li { position: relative; padding-left: 24px; font-size: 15px; font-weight: 600; line-height: 1.4; }
.cs-did li::before { content: ''; position: absolute; left: 3px; top: 5px; width: 6px; height: 11px; border: solid var(--accent); border-width: 0 2px 2px 0; rotate: 45deg; }
.cs-kpis { display: grid; gap: 12px; margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--dark-line); }
.cs-kpis li { display: grid; gap: 2px; }
.cs-kpis b { font-size: clamp(2rem, 3vw, 2.6rem); font-weight: 800; letter-spacing: -.045em; line-height: 1.1; padding-bottom: .06em; background: linear-gradient(135deg, var(--kobolt-800), var(--kobolt-500)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.cs-kpis span { font-size: 14px; font-weight: 600; color: var(--text-muted); }
/* Citat: stort og centreret */
.cs-quote { max-width: 860px; margin: clamp(48px, 6vw, 80px) auto; text-align: center; }
.cs-quote .stars { font-size: 20px; letter-spacing: 4px; color: var(--accent); margin-bottom: 14px; }
.cs-quote blockquote p { font-size: clamp(1.25rem, 2.2vw, 1.75rem); font-weight: 600; line-height: 1.4; letter-spacing: -.015em; text-wrap: balance; }
.cs-quote figcaption { display: inline-flex; align-items: center; gap: 12px; margin-top: 22px; text-align: left; font-size: 14px; color: var(--text-muted); }
.cs-quote figcaption strong { display: block; color: var(--text); }
.cs-quote .quote-img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; }
.cs-block { padding-top: clamp(28px, 3vw, 40px); padding-bottom: clamp(16px, 2vw, 24px); }
.cs > .wrap:last-of-type { padding-bottom: clamp(40px, 5vw, 64px); }
.cs .persona { margin-top: clamp(32px, 4vw, 56px); }
@media (max-width: 900px) {
  .cs-split, .cs-sum { grid-template-columns: 1fr; }
  .cs-col + .cs-col { border-left: 0; border-top: 1px solid var(--line); }
  .cs-col.res { border-radius: 0 0 var(--r-l) var(--r-l); }
  .cs-hero.full { min-height: 70svh; padding-bottom: 110px; }
  .cs-hero.split { padding-top: 110px; }
}

/* Case-overblikket flugter med siden */
.cs-sum { width: calc(100% - 2 * var(--gutter)); max-width: calc(var(--wrap) - 2 * var(--gutter)); padding: 0; }
/* Forsidens pris-teaser: ét grønt kort med punch */
.price-teaser { border-top: 0; }
.pt-card { display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(24px, 4vw, 64px); align-items: center; padding: clamp(32px, 4vw, 56px); border-radius: var(--r-l); color: #fff; background: radial-gradient(70% 90% at 100% 0%, rgb(135 178 255 / .4), transparent 70%), linear-gradient(160deg, #4067b5, #29447c); }
.pt-card .kicker { color: #d3e3ff; }
.pt-card .display { color: #fff; font-size: var(--fs-h2); }
.pt-card .hl { color: #d3e3ff; }
.pt-card .flat-free { margin: 20px 0 0; }
.pt-card .flat-price { margin: 0; }
.pt-card .flat-price b { font-size: clamp(4.5rem, 9vw, 7.5rem); }
.pt-sub { margin-top: 8px; color: rgba(255, 255, 255, .86); font-weight: 600; }
.pt-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 18px; margin-top: 22px; }
.pt-card .btn { background: #fff; border-color: #fff; color: var(--kobolt-800); }
.pt-card .link-arrow { color: #fff; }
@media (max-width: 900px) { .pt-card { grid-template-columns: 1fr; } }
/* FAQ: blød åbning og lukning */
:root { interpolate-size: allow-keywords; }
.faq-list details::details-content { block-size: 0; overflow: hidden; opacity: 0; transition: block-size .55s var(--ease-soft), opacity .4s ease, content-visibility .55s allow-discrete; }
.faq-list details[open]::details-content { block-size: auto; opacity: 1; }
.faq-list summary::after { transition: rotate .45s var(--ease-soft), background .3s; }
.films:has(.vtile.tall) { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.films .vtile.tall { max-width: none; }
.vtile.tall figcaption { left: 8px; bottom: 8px; font-size: 12px; padding: 5px 10px; }
.vtile.tall .vplay { width: 28px; height: 28px; right: 8px; bottom: 8px; }
.vtile.tall .vplay::after { left: 10px; top: 8px; border-width: 6px 0 6px 9px; }
.cs-hero.full::before { background: linear-gradient(90deg, rgba(13, 24, 47, .78) 0%, rgba(13, 24, 47, .5) 45%, rgba(13, 24, 47, .2) 75%), linear-gradient(180deg, rgba(13, 24, 47, .3) 0%, rgba(13, 24, 47, .1) 40%, rgba(25, 43, 80, .92) 100%); }
.cs-hero.full h1, .cs-hero.full .kicker, .cs-hero.full .back { text-shadow: 0 2px 24px rgba(0, 0, 0, .35); }

.cs-hero.full::before { background: linear-gradient(90deg, rgba(13, 24, 47, .85) 0%, rgba(13, 24, 47, .6) 45%, rgba(13, 24, 47, .3) 75%), linear-gradient(180deg, rgba(13, 24, 47, .35) 0%, rgba(13, 24, 47, .15) 40%, rgba(25, 43, 80, .92) 100%); }
.case-bts .gallery.n1 { grid-template-columns: minmax(0, 1fr); max-width: 560px; }
.films.reels { grid-template-columns: repeat(5, minmax(0, 1fr)); max-width: none; gap: 12px; }
@media (max-width: 760px) { .films.reels { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.cs-hero.full::before { background: linear-gradient(90deg, rgba(13, 24, 47, .92) 0%, rgba(13, 24, 47, .7) 45%, rgba(13, 24, 47, .4) 75%), linear-gradient(180deg, rgba(13, 24, 47, .45) 0%, rgba(13, 24, 47, .25) 40%, rgba(25, 43, 80, .95) 100%); }
.cs-hero .hl { color: #d3e3ff; }
.cs-hero h1 { font-size: clamp(1.9rem, 3.4vw, 3rem); max-width: 22ch; }
.films:has(.vtile.tall) { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 760px) { .films:has(.vtile.tall) { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Prissiden: mørkegrøn gradient som heroen */
.pricing-page { color: #fff; background: radial-gradient(85% 110% at 100% 0%, rgb(135 178 255 / .4) 0%, rgb(135 178 255 / .1) 45%, transparent 75%), linear-gradient(160deg, #4067b5 0%, #35569a 52%, #29447c 100%); padding-bottom: var(--section); }
body:has(main > .pricing-page:first-child) .site-header { margin-bottom: -86px; }
.pricing-page .kicker { color: #d3e3ff; }
.pricing-page .display { color: #fff; }
.pricing-page .hl { color: #d3e3ff; }
.pricing-page .price-head .flat-body { color: rgba(255, 255, 255, .86); }
.pricing-page .note { color: rgba(255, 255, 255, .7); }
.pricing-page .tier.featured .tier-body { color: var(--text-muted); }
/* Blødere hover overalt */
.case-card, .site, .review, .vtile, .mega-case { transition: transform .7s cubic-bezier(.22, .61, .36, 1), box-shadow .7s cubic-bezier(.22, .61, .36, 1), border-color .5s ease; }
.case-card img, .vtile video, .mega-case img, .next-band img, .gallery img, .photo-strip img { transition: transform 1.4s cubic-bezier(.22, .61, .36, 1) !important; }

/* ---------- Mobil og tablet: luft, afkodning og scanbarhed ---------- */
@media (max-width: 900px) {
  .code-stage { height: auto !important; grid-template-columns: 1fr; gap: 14px; }
  .code-stage .term { height: 380px; }
  .code-out { grid-template-columns: 1fr; grid-template-rows: none; gap: 14px; height: auto; }
  .pf, .pf-site { min-height: 0; overflow: hidden; }
  .pf-site { grid-row: auto; grid-column: auto; }
  .pf-toast { top: 52px; right: 12px; }
  .wrap { padding-left: 20px; padding-right: 20px; }
  .section-head { margin-bottom: 24px; }
  .display { text-wrap: balance; }
  .faq-grid, .pain-grid, .price-head { gap: 22px; }
  .cs-hero.full { min-height: 0; padding-top: 120px; }
}
@media (max-width: 560px) {
  :root { --section: 56px; }
  .code-stage .term { height: 340px; font-size: 11px; }
  .code-show .display { font-size: 2rem; }
  .pain .manifesto-lines { font-size: 2.1rem; }
  .good { padding: 24px; }
  .good-text { font-size: 1.35rem; }
  .flat-price b, .pt-card .flat-price b { font-size: 4.4rem; }
  .pt-card { padding: 26px; }
  .faq-list summary { font-size: 1rem; padding: 16px 40px 16px 0; }
  .cs-sum { margin-top: -60px; }
  .cs-col { padding: 20px; }
  .cs-hero h1 { font-size: 1.85rem; }
  .cs-quote blockquote p { font-size: 1.15rem; }
  .next-band b { font-size: 2rem; }
  .review { padding: 20px; }
}
@media (min-width: 561px) and (max-width: 900px) {
  .facts-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .fact, .fact:first-child, .fact:nth-child(3) { padding: 20px; }
  .fact-n { font-size: 2.8rem; }
  .hero-home .hero-grid { gap: 20px; }
}
/* Collagen: faste rækkehøjder, så film ikke vokser ud af kortet (iOS Safari) */
.svc-media .fv-grid { box-sizing: border-box; overflow: hidden; grid-template-rows: calc(50% - 4px) calc(50% - 4px); }
.fv-grid > * { max-height: 100%; align-self: stretch; overflow: hidden; }
.tiers:has(.tier:nth-child(2):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 880px; }
@media (max-width: 900px) { .tiers:has(.tier:nth-child(2):last-child) { grid-template-columns: 1fr; } }
.tiers:has(.tier:nth-child(2):last-child) { margin-inline: auto; }
.pricing-page .price-head { max-width: 880px; margin-inline: auto; grid-template-columns: 1fr; text-align: left; }
.pricing-page .note { max-width: 880px; margin-inline: auto; }
/* Værktøjsbæltet på mobil: mindre piller, flere ad gangen og tættere sektion */
@media (max-width: 560px) {
  .tools { padding: 44px 0 36px; }
  .tools .section-head .lead { font-size: 15px; margin-top: 10px; }
  .tools-track { gap: 8px; padding: 4px 0 8px; }
  .tools-row + .tools-row { margin-top: 4px; }
  .tool { gap: 7px; padding: 6px 12px 6px 8px; font-size: 12.5px; box-shadow: 0 6px 14px -12px rgba(20, 27, 28, .35); }
  .tool img { width: 16px; height: 16px; }
}
/* Case-overblikket: kolonnerne går helt ud til kortets kant; én film fylder hele bredden */
.cs-sum.wrap { padding: 0 !important; overflow: hidden; }
.films:has(> :only-child) { grid-template-columns: minmax(0, 1fr) !important; }

/* Lysboks til film */
.vbox { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; padding: 24px; background: rgba(11, 18, 34, .9); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); opacity: 0; visibility: hidden; transition: opacity .35s ease, visibility .35s; }
.vbox.open { opacity: 1; visibility: visible; }
.vbox-stage { width: min(1100px, 100%); aspect-ratio: 16 / 9; transform: scale(.96); transition: transform .45s var(--ease-soft); }
.vbox.open .vbox-stage { transform: none; }
.vbox-close { position: absolute; top: max(16px, env(safe-area-inset-top)); right: 16px; width: 46px; height: 46px; border-radius: 50%; border: 0; background: rgba(255, 255, 255, .14); color: #fff; font-size: 18px; cursor: pointer; }
.vbox-close:hover { background: rgba(255, 255, 255, .26); }
body.vbox-on { overflow: hidden; }
.vtile { cursor: pointer; }
.vtile video { pointer-events: none; }
.films:has(> :only-child) > * { max-width: none !important; width: 100%; }
/* Prissiden: 700 kr.-kortet fremhævet i grøn med hvid tekst; mærket står over titlen, så intet overlapper */
.pricing-page .tier.featured .tier-body { color: rgba(255, 255, 255, .88); }
/* Hvem vi er på mobil: én person pr. række */
@media (max-width: 700px) {
  .people { grid-template-columns: 1fr; gap: 36px; }
  .person-card figure { aspect-ratio: 4 / 3.4; }
  .person-card > p { max-width: none; }
}
/* Mindre navneskilte på portrætterne */
.person-card figcaption { left: 12px; bottom: 12px; padding: 8px 12px; border-radius: 10px; gap: 0; }
.person-card figcaption b { font-size: 15px; }
.person-card figcaption span { font-size: 12px; }
/* Luft mellem grøn top og indhold på oversigtssider (cases, websites, foto m.fl.) */
.page-hero + section { padding-top: clamp(32px, 5vw, 64px); }
.page-hero + section > .case-grid, .page-hero + section > .sites-grid { padding-top: 0; }
@media (max-width: 560px) { .case-grid.all { row-gap: 40px; } }
.case-img img { object-position: 50% 25%; }
/* Overskrifter: plads til bogstaver med underlængde (g, j, p, y), også når reveal-animationen bruger filter (iOS Safari klipper ellers) */
.display, .hero-title, .cs-hero h1, .manifesto-lines { padding-bottom: .12em; margin-bottom: -.12em; }
@keyframes rise { from { opacity: 0; transform: translateY(28px); } }
.js .rv:not(.page-hero .rv):not(.case-hero .rv) { filter: none !important; }
/* Indbakken skalerer med kortet, så den altid passer */
.svc-media.svc-mail { container-type: inline-size; }
.svc-mail .inbox { width: 84%; padding: 3.2cqi 3.4cqi 1.6cqi; border-radius: 3cqi; }
.svc-mail .ib-head { margin-bottom: 1.4cqi; font-size: max(10px, 2.2cqi); white-space: nowrap; }
.svc-mail .ib-head b { font-size: max(11px, 2.6cqi); }
.svc-mail .inbox li { grid-template-columns: 6cqi 1fr auto; gap: 2.2cqi; padding: 1.9cqi .6cqi; }
.svc-mail .ib-av { width: 6cqi; height: 6cqi; min-width: 22px; min-height: 22px; font-size: max(10px, 2.4cqi); }
.svc-mail .ib-txt { min-width: 0; }
.svc-mail .ib-txt b { font-size: max(11px, 2.5cqi); }
.svc-mail .ib-txt small { font-size: max(10px, 2.3cqi); }
.svc-mail .inbox li em { font-size: max(9.5px, 2cqi); padding: .6cqi 1.8cqi; white-space: nowrap; }
/* Claude Code-sektionen på mobil: tættere top */
@media (max-width: 900px) {
  .code-show { padding: 48px 0 40px; }
  .code-head { gap: 10px; margin-bottom: 22px; }
  .code-head .lead { margin: 0 0 16px; }
  .code-show .display { margin-bottom: 0; }
}
/* Trinene: stort tal til venstre, ingen ikoner */
.steps4 li { display: grid; grid-template-columns: auto 1fr; column-gap: 18px; align-items: start; }
.steps4 .st-n { position: static; translate: none; font-size: 2.6rem; line-height: 1; color: var(--accent); opacity: .9; }
.steps4 li:last-child .st-n { color: var(--accent-text); }
.steps4 h3 { margin: 2px 0 4px; }
@media (max-width: 560px) { .steps4 li { grid-template-columns: 56px 1fr; padding: 18px 20px; align-items: center; } .steps4 .st-n { font-size: 2.2rem; } }
/* Enheden står ved siden af prisen */
.ib-av { background: var(--accent) !important; }
.svc-mail .ib-txt small { white-space: normal; }

/* SIDEfxHUB-annoncen: det rigtige logo øverst til venstre */

/* Collagen: hver celle beskærer sit eget billede/film, så afstande holder på iPhone */
.fv-grid .fv-cell { position: relative; overflow: hidden; border-radius: 12px; min-height: 0; height: auto; }
.fv-grid .fv-cell > img, .fv-grid .fv-cell > video { position: absolute; inset: 0; width: 100%; height: 100%; max-height: none; object-fit: cover; border-radius: 0; }
.fv-grid .fv-cell.a { grid-row: span 2; }
.fv-grid .fv-cell.b { grid-row: span 2; }
.fv-grid .fv-cell.a > img { object-position: 30% 30%; }
.fv-grid .fv-cell.c > img { object-position: 50% 30%; }
.fv-grid .fv-cell > video { object-position: 50% 25%; }
/* Websiteudvikling: færre og større sites, så man kan se dem */
.svc-media .svc-sites { width: 94%; height: 90%; aspect-ratio: auto; grid-template-columns: 1.25fr 1fr; grid-template-rows: repeat(2, minmax(0, 1fr)); gap: 10px; }
.svc-media .svc-sites .br:nth-child(1) { grid-row: span 2; }
.svc-media .svc-sites .br:nth-child(n+4) { display: none; }
.svc-media .svc-sites .br img { object-position: top; }
/* Websiteudvikling: fire sites, der fylder kortet */
.svc-media .svc-sites { display: grid !important; width: 100%; height: 100%; margin: 0; padding: 12px; box-sizing: border-box; aspect-ratio: auto; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(0, 1fr)); gap: 10px; }
.svc-media .svc-sites .br, .svc-media .svc-sites .br:nth-child(n) { display: flex !important; grid-row: auto; }
.svc-media .svc-sites .br .bar { height: 14px; }
.svc-media .svc-sites .br .bar i { width: 4px; height: 4px; }
.svc-media .svc-sites .br img { object-position: top; }
.svc-media .svc-sites { position: absolute; inset: 0; height: auto; }
.svc-media .svc-sites .br { min-height: 0; overflow: hidden; }
.svc-media .svc-sites .br img { flex: 1; min-height: 0; height: 0; }
.fv-grid .fv-cell.a > img { object-position: 50% 20%; }
.fv-grid .fv-cell.c > img { object-position: 50% 25%; }
/* Mobilmenuen: sprogvalg som en elegant pille */
@media (max-width: 900px) {
  .nav .lang { align-self: flex-start; gap: 12px; margin-top: 28px; padding: 10px 20px 10px 10px; border-radius: 99px; background: #fff; border: 1px solid var(--line); box-shadow: 0 10px 24px -18px rgba(20, 27, 28, .4); font-size: 17px; font-weight: 600; color: var(--text); }
  .nav .lang .flag { width: 30px; height: 30px; }
}
/* "Bedste pris" sidder centreret på kortets overkant */

/* Social proof: udtalelse til venstre, kundelogoer til højre */
.proof { padding: clamp(40px, 5vw, 72px) 0; }
.proof-inner { display: grid; grid-template-columns: 1.15fr 1fr; gap: clamp(24px, 4vw, 64px); align-items: center; padding: clamp(24px, 3vw, 40px); border-radius: var(--r-l); background: #fff; box-shadow: 0 18px 40px -30px rgba(30, 50, 91, .4), 0 0 0 1px rgba(20, 27, 28, .05); }
.proof-quote .stars { font-size: 17px; letter-spacing: 3px; color: var(--accent); margin-bottom: 10px; }
.proof-quote blockquote p { font-size: clamp(1rem, 1.4vw, 1.12rem); line-height: 1.55; font-weight: 500; }
.proof-quote figcaption { display: flex; align-items: center; gap: 12px; margin-top: 16px; font-size: 13.5px; color: var(--text-muted); }
.proof-quote figcaption strong { display: block; color: var(--text); font-size: 14.5px; }
.proof-quote .quote-img { width: 42px; height: 42px; border-radius: 50%; object-fit: cover; }
.proof-logos { padding-left: clamp(0px, 3vw, 40px); border-left: 1px solid var(--line); }
.proof-logos .kicker { margin-bottom: 16px; }
.proof-logos ul { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px 22px; align-items: center; }
.proof-logos li { display: grid; place-items: center start; height: 34px; }
.proof-logos img { height: calc(22px * var(--s, 1)); max-height: 34px; max-width: 100%; width: auto; object-fit: contain; filter: grayscale(1) brightness(.35); opacity: .7; }
@media (max-width: 900px) {
  .proof-inner { grid-template-columns: 1fr; }
  .proof-logos { padding-left: 0; border-left: 0; padding-top: 20px; border-top: 1px solid var(--line); }
  .proof-logos ul { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px 16px; }
  .proof-logos img { height: calc(17px * var(--s, 1)); max-height: 28px; }
}
/* Mindre navneskilte på forsidens og kontaktsidens portrætter */
.duo-photos figcaption { left: 8px; right: auto; bottom: 8px; max-width: calc(100% - 16px); padding: 6px 10px; border-radius: 9px; gap: 0; }
.duo-photos figcaption b { font-size: 13px; line-height: 1.25; }
.duo-photos figcaption span { font-size: 11px; line-height: 1.3; }
.marquee-track { animation-duration: 32s; }
/* Telefonerne: 1 px tyndere ramme hele vejen rundt og mindre hjørner */
.phone { padding: 4px; border-radius: 16px; }
.phone div { border-radius: 12px; }
.phone { padding: 3px; }
/* Telefoner: samme proportioner som en iPhone (skærm 390 × 844) og ens størrelse i forhold til browseren */
.phone { aspect-ratio: 396 / 850; width: 21%; min-width: 0; max-width: 190px; }
.sites-grid .site:nth-child(3n+1) .phone { width: 17%; }
.phone { aspect-ratio: 9 / 17.5; }
/* Telefoner: mindre hjørnerunding */
.phone { border-radius: 11px; }
.phone div { border-radius: 8px; }

/* Kontaktformular */
.cform { position: relative; display: grid; gap: 14px; padding: clamp(24px, 3vw, 36px); border-radius: var(--r-l); background: #fff; color: var(--text); box-shadow: 0 30px 70px -36px rgba(7, 14, 31, .7); }
.cform .kicker { color: var(--accent-text); margin: 0; }
.cform-title { font-size: clamp(1.3rem, 2vw, 1.6rem); font-weight: var(--fw-heading); letter-spacing: -.02em; line-height: 1.2; margin-bottom: 4px; color: var(--text); }
.cform-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.cform label { display: grid; gap: 6px; }
.cform label span { font-size: 13px; font-weight: 600; color: var(--text-muted); }
.cform input, .cform textarea { width: 100%; box-sizing: border-box; padding: 13px 14px; border: 1px solid var(--line-strong); border-radius: 12px; background: var(--bg); font: 500 16px/1.4 var(--font); color: var(--text); transition: border-color .25s, box-shadow .25s, background .25s; }
.cform textarea { resize: vertical; min-height: 110px; }
.cform input:focus, .cform textarea:focus { outline: none; border-color: var(--accent); background: #fff; box-shadow: 0 0 0 4px rgb(var(--accent-rgb) / .14); }
.cform .btn { justify-self: start; margin-top: 4px; }
.cform .btn:disabled { opacity: .6; cursor: wait; }
.cform-note { font-size: 13px; color: var(--text-muted); }
.cform-status { font-size: 14px; font-weight: 600; color: var(--accent-text); }
.cform-status:empty { display: none; }
.cform-hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.cform-done { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 10px; padding: 32px; text-align: center; border-radius: var(--r-l); background: #fff; }
.cform-done[hidden] { display: none; }
.cform-done .tick { width: 56px; height: 56px; border-radius: 50%; background: var(--accent); position: relative; }
.cform-done .tick::after { content: ''; position: absolute; left: 21px; top: 14px; width: 11px; height: 20px; border: solid #fff; border-width: 0 3px 3px 0; rotate: 45deg; }
.cform-done b { font-size: 1.4rem; }
.cform-done p { color: var(--text-muted); }
.contact-alt { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; padding-top: clamp(28px, 4vw, 48px); }
.contact-alt > * { display: grid; gap: 6px; padding: 20px 22px; border-radius: var(--r-m); background: #fff; border: 1px solid var(--line); text-decoration: none; color: var(--text); }
.contact-alt .kicker { margin: 0; }
.contact-alt b { font-size: 1.05rem; }
.contact-alt a:hover { border-color: var(--line-strong); }
.contact-hero .contact-grid { align-items: start; }
@media (max-width: 900px) { .contact-alt { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .cform-row { grid-template-columns: 1fr; } }

/* Problem → løsning: kort og balanceret */
.pain-grid { align-items: stretch; }
.pain .manifesto-lines { font-size: clamp(2rem, 3.6vw, 3rem); margin-bottom: 22px; }
.good { display: flex; flex-direction: column; }
.good-text { font-size: clamp(1.6rem, 2.6vw, 2.2rem); margin-bottom: 22px; }
.good .btn { margin-top: auto; align-self: flex-start; }

/* Problem → løsning v3 */
.pain-grid { align-items: center; }
.pain .manifesto-lines { font-size: clamp(2.3rem, 4.4vw, 3.8rem); margin-bottom: 0; }
.good-text { font-size: clamp(1.5rem, 2.4vw, 2rem); line-height: 1.2; margin-bottom: 24px; }
.good-team { display: grid; gap: 12px; margin-bottom: 26px; }
.good-team li { display: flex; align-items: center; gap: 14px; }
.good-team img { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 2px rgba(255, 255, 255, .5); }
.good-team b { display: block; font-size: 1rem; }
.good-team small { display: block; font-size: 13.5px; color: #d3e3ff; }
/* Tal-båndet: lidt mere kompakt */
.facts { padding: clamp(32px, 4vw, 56px) 0; }
.fact, .fact:first-child { padding: clamp(18px, 2.2vw, 28px) clamp(22px, 2.6vw, 32px); }
.fact-n { font-size: clamp(2.8rem, 5.2vw, 4.4rem); }
.fact-u { font-size: clamp(1rem, 1.4vw, 1.2rem); }
.fact-l { margin-top: 6px; font-size: 14.5px; }
@media (max-width: 560px) { .good-text br { display: none; } }

/* Capio og Calm: billedet i fuld størrelse med tekst ovenpå, en blød form og et lille mærke */
.ad-photo { color: #fff; isolation: isolate; }
.ad-photo > img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; }
.ad-photo::after { content: ''; position: absolute; inset: 0; z-index: -1; }
.ad-photo figcaption { margin-top: auto; position: relative; z-index: 1; padding: 8cqi 7cqi 8cqi; }
.ad-photo figcaption b { font-size: 11cqi; text-shadow: 0 2px 14px rgba(0, 0, 0, .25); }
/* Capio: lyseblå bund, der bølger op over billedet */
.ad-capio::after { background: radial-gradient(140% 60% at 30% 100%, #0b2f55 0%, rgba(11, 47, 85, .85) 40%, rgba(11, 47, 85, 0) 72%); }
.ad-capio .ad-cta { background: #d6ebf7; color: #0b2f55; }
/* Calm: varm, grøn bund og blødt organisk lys */
.ad-calm::after { background: radial-gradient(140% 60% at 70% 100%, #2f4a3a 0%, rgba(47, 74, 58, .82) 40%, rgba(47, 74, 58, 0) 72%); }
.ad-calm .ad-cta { background: #f4f1ea; color: #2f4a3a; }
.ad-photo .ad-cta { box-shadow: 0 8px 20px -10px rgba(0, 0, 0, .5); }
/* Heroens første slide i tre trin: website → resultater → ny henvendelse (står til slidet skifter) */
.s-hub .hub-site, .s-hub .hub-card, .s-hub .hub-toast { opacity: 0; }
.s-hub .hub-toast:not(:first-child) { display: none; }
.s-hub.on .hub-site { animation: hub-step .8s var(--ease-soft) .5s both; }
.s-hub.on .hub-card { animation: hub-step .8s var(--ease-soft) 1.6s both; }
.s-hub.on .hub-toast:first-child { animation: hub-step .7s var(--ease-soft) 2.8s both; }
@keyframes hub-step { from { opacity: 0; transform: translateY(14px) scale(.97); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .s-hub .hub-site, .s-hub .hub-card, .s-hub .hub-toast:first-child { opacity: 1; animation: none; } }

/* Kreativerne har hver sin skrift, som rigtige brands */
.ad-capio figcaption b { font-family: 'Plus Jakarta Sans', var(--font); font-weight: 800; letter-spacing: -.035em; }
.ad-calm figcaption b { font-family: 'Outfit', var(--font); font-weight: 300; font-size: 12cqi; letter-spacing: -.02em; line-height: 1.02; }
.ad-calm figcaption b::first-line { font-weight: 500; }
.ad-sfx figcaption b { font-family: 'Archivo', var(--font); font-weight: 900; letter-spacing: -.03em; text-transform: none; line-height: .98; }
.ad-capio .ad-cta { font-family: 'Plus Jakarta Sans', var(--font); }
.ad-calm .ad-cta { font-family: 'Outfit', var(--font); font-weight: 500; }
.ad-sfx .ad-cta { font-family: 'Archivo', var(--font); font-weight: 800; }
.ad-sfx figcaption b { word-spacing: .08em; }
/* Henvendelserne skifter: Google Ads → Instagram → SEO, hver står ca. 1,5 sek. (den sidste bliver stående) */
.s-hub .hub-toast:not(:first-child) { display: flex; }
.s-hub.on .hub-toast:nth-child(1) { animation: hub-step .6s var(--ease-soft) 2.8s both, hub-out .4s ease 4.3s forwards; }
.s-hub.on .hub-toast:nth-child(2) { animation: hub-step .6s var(--ease-soft) 4.5s both, hub-out .4s ease 6s forwards; }
.s-hub.on .hub-toast:nth-child(3) { animation: hub-step .6s var(--ease-soft) 6.2s both; }
@keyframes hub-out { to { opacity: 0; transform: translateY(-8px); } }

/* Indbakken: konvolutter og en naturlig rækkefølge (1 → 2 → 3) */
.inbox li { animation: none; opacity: 0; transform: translateY(10px); }
@keyframes ib-land { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.ib-av { position: relative; background: var(--kobolt-100) !important; color: var(--accent); }
.ib-av svg { width: 62%; height: 62%; }
.ib-av i { position: absolute; right: -2px; top: -3px; display: grid; place-items: center; width: 42%; height: 42%; min-width: 14px; min-height: 14px; border-radius: 50%; background: var(--accent); color: #fff; font-style: normal; font-size: max(8px, 1.8cqi); font-weight: 700; box-shadow: 0 0 0 2px #fff; }
@keyframes ib-flap { from { transform: scale(.6) rotate(-12deg); } to { transform: none; } }
@media (prefers-reduced-motion: reduce) { .inbox li { opacity: 1; transform: none; } }
/* Heroens første slide: kun én henvendelse og hurtigere trin, så slideren går videre */
.s-hub .hub-toast:not(:first-child) { display: none; }
.s-hub.on .hub-site { animation: hub-step .7s var(--ease-soft) .4s both; }
.s-hub.on .hub-card { animation: hub-step .7s var(--ease-soft) 1.2s both; }
.s-hub.on .hub-toast:nth-child(1) { animation: hub-step .6s var(--ease-soft) 2s both; }
.hero-home .hero-title + .checks { margin-top: 15px; }
/* Mobil: grafikken først (lidt mindre), så overskriften */
@media (max-width: 900px) {
  .hero-home .slider { order: -1; width: 90%; margin: 0 auto; }
  .hero-home .hero-grid { gap: 20px; }
}
@media (max-width: 560px) {
  .hero-home .stage { height: 270px; }
  .hero-home { padding-top: calc(86px + 12px); }
}
/* Det skiftende ord: hvid tekst på en mint markering, der tegnes ind ved hvert skift */
.hero-home .hero-title .rot { justify-items: start; }
.hero-home .hero-title .rot > span { position: relative; color: var(--kobolt-800); background: none; -webkit-background-clip: border-box; background-clip: border-box; padding: 0 .14em .1em; margin: 0 -.14em -.1em; transform: translateY(.45em); filter: blur(4px); transition: opacity .6s var(--ease-soft), transform .8s var(--ease-soft), filter .6s var(--ease-soft); }
.hero-home .hero-title .rot > span::before { content: ''; position: absolute; z-index: -1; left: 0; right: 0; top: .12em; bottom: .02em; border-radius: .14em; background: linear-gradient(90deg, #dfebff, #b6d2ff); transform: scaleX(0); transform-origin: left; transition: transform .7s var(--ease-soft) .15s; }
.hero-home .hero-title .rot > span.on { transform: none; filter: none; }
.hero-home .hero-title .rot > span.on::before { transform: scaleX(1); }
.hero-home .hero-title .rot > span.out { transform: translateY(-.35em); filter: blur(4px); }
.hero-home .hero-title .rot > span.out::before { transform-origin: right; transform: scaleX(0); transition-delay: 0s; }
.hero-home .hero-title { isolation: isolate; }
/* Mobil-hero: kompakt og tre trin ved indlæsning – grafik, så overskrift, så knapper */
@media (max-width: 900px) {
  .hero-home { min-height: 0; padding-bottom: 0; }
  .hero-home > .hero-grid { flex: none; gap: 14px; }
  .hero-home .hero-text { padding-bottom: 6px; }
  .hero-home .slider { animation: rise 1.1s var(--ease-soft) .1s both; }
  .hero-home .hero-text > .hero-title { animation: rise 1.1s var(--ease-soft) .7s both; }
  .hero-home .hero-text > .actions { animation: rise 1s var(--ease-soft) 1.3s both; margin-top: 20px; }
  .hero-home .marquee-neg { margin-top: 28px; }
}
@media (max-width: 560px) {
  .hero-home .stage { height: 250px; }
}
@media (max-width: 560px) {
  .hero-home .stage { height: 225px; }
  .hero-home > .hero-grid { gap: 6px; }
  .hero-home .slide.s-film, .hero-home .slide.s-grafik { align-items: end; }
}
/* Ingen indlæsnings-animation øverst og ingen logo-animation: alt står der med det samme */
.hero-text > *, .page-hero .rv > *, .hero-home .slider, .hero-home .hero-text > .hero-title, .hero-home .hero-text > .actions { animation: none !important; }
.logo-mark, .logo-mark * , .logo-mark::before, .logo-mark::after { animation: none !important; }
/* Mobil-hero: knapper i fuld bredde, marketing-grafikken lidt længere nede, intet logobælte */
@media (max-width: 560px) {
  .hero-home .actions { flex-direction: column; flex-wrap: nowrap; }
  .hero-home .actions .btn { width: 100%; justify-content: center; flex: none; }
  .hero-home .slide.s-hub { align-items: end; }
  .hero-home .marquee-neg { display: none; }
  .hero-home { padding-bottom: 36px; }
}
/* Mobil: fast hvid topbjælke i fuld bredde i stedet for svævende kort */
@media (max-width: 900px) {
  .site-header { top: 0; margin-top: 0; }
  .site-header::before { display: none; }
  .header-inner { width: 100%; max-width: none; height: 64px; padding: 0 12px 0 20px; }
  .header-inner::before { border-radius: 0; border: 0; border-bottom: 1px solid var(--line); box-shadow: none; background: #fff; -webkit-backdrop-filter: none; backdrop-filter: none; }
  .site-header.scrolled .header-inner::before { box-shadow: 0 6px 18px -14px rgba(20, 27, 28, .35); }
  .page-home .site-header, body:has(main > .page-hero:first-child) .site-header, body:has(main > .cs:first-child) .site-header, body:has(main > .pricing-page:first-child) .site-header { margin-bottom: -64px; }
}
/* Mobil-hero fylder hele skærmen: grafikken tager den ledige højde, tekst og knapper står samlet nederst */
@media (max-width: 900px) {
  .hero-home { min-height: 100svh; padding-top: calc(64px + 20px); padding-bottom: 28px; }
  .hero-home > .hero-grid { flex: 1; display: flex; flex-direction: column; gap: 24px; }
  .hero-home .slider { flex: 1; display: flex; flex-direction: column; justify-content: center; }
  .hero-home .stage { height: clamp(220px, calc(100svh - 430px), 380px); }
  .hero-home .slide.s-hub, .hero-home .slide.s-film, .hero-home .slide.s-grafik { align-items: center; }
  .hero-home .hero-text { padding-bottom: 0; }
  .hero-home .hero-text > .actions { margin-top: 22px; }
}
/* Logobæltet: kun i heroen på desktop; på mobil lige under heroen på lys baggrund */
.marquee-m { display: none; }
@media (max-width: 900px) {
  .hero-home .marquee-neg { display: none; }
  .marquee-m { display: block; padding: 22px 0; background: var(--bg); }
}
/* Mobil-hero: grafik, tekst og knapper som én samlet blok, centreret i skærmhøjden */
@media (max-width: 900px) {
  .hero-home > .hero-grid { justify-content: center; gap: 30px; }
  .hero-home .slider { flex: none; }
  .hero-home .stage { height: 220px; }
}
@media (max-width: 900px) and (min-height: 760px) {
  .hero-home .stage { height: 250px; }
  .hero-home > .hero-grid { gap: 36px; }
}
/* Mobil-intro på forsiden (html.intro sættes i <head>, html.go af main.js):
   1) H1 alene midt på skærmen, linje for linje, mint-feltet tørres ind bag ordet
   2) H1 glider ned på plads, grafikken vokser frem fra pladsen over den
   3) knapperne åbner sig fra midten, en lysstribe går én gang over den hvide knap */
@media (max-width: 900px) {
  html.intro:not(.go) .hero-home .hero-title { transform: translateY(var(--dy, 0)); }
  html.intro:not(.go) .hero-home .hero-title > *, html.intro:not(.go) .hero-home .slider, html.intro:not(.go) .hero-home .actions .btn { opacity: 0; }
  html.go .hero-home .hero-text > .hero-title { animation: intro-flip .64s cubic-bezier(.7, 0, .2, 1) .82s both !important; }
  html.go .hero-home .hero-title > .pre, html.go .hero-home .hero-title > .rot, html.go .hero-home .hero-title > .tail { animation: intro-rise .52s cubic-bezier(.2, .8, .2, 1) both !important; }
  html.go .hero-home .hero-title > .rot { animation-delay: .11s !important; }
  html.go .hero-home .hero-title > .tail { animation-delay: .22s !important; }
  html.go .hero-home .hero-title .rot > span.on::before { animation: intro-wipe .5s cubic-bezier(.65, 0, .35, 1) .14s both; }
  html.go .hero-home .slider { transform-origin: 50% 100%; animation: intro-emerge .7s cubic-bezier(.16, 1, .3, 1) 1s both !important; }
  html.go .hero-home .actions .btn { animation: intro-open .48s cubic-bezier(.16, 1, .3, 1) 1.35s both; }
  html.go .hero-home .actions .btn + .btn { animation-delay: 1.45s; }
  html.go .hero-home .actions .btn:first-child { position: relative; overflow: hidden; }
  html.go .hero-home .actions .btn:first-child::after { content: ''; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 30%, rgb(63 102 182 / .16) 50%, transparent 70%); transform: translateX(-120%); animation: intro-sweep .7s ease-in-out 2s both; pointer-events: none; }
}
@keyframes intro-flip { from { transform: translateY(var(--dy, 0)); } to { transform: none; } }
@keyframes intro-rise { from { opacity: 0; transform: translateY(.5em); filter: blur(4px); } to { opacity: 1; transform: none; filter: none; } }
@keyframes intro-wipe { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes intro-emerge { from { opacity: 0; transform: translateY(28px) scale(.94); filter: blur(8px); } to { opacity: 1; transform: none; filter: none; } }
@keyframes intro-open { from { opacity: 0; clip-path: inset(0 50% 0 50% round 999px); } to { opacity: 1; clip-path: inset(0 0 0 0 round 999px); } }
@keyframes intro-sweep { to { transform: translateX(120%); } }
/* Mobil: marketing-grafikken (hub) står 30px lavere, de andre trin er uændrede */
@media (max-width: 900px) { .hero-home .s-hub .hub { translate: -5px 40px; scale: 1.15; } }
/* Mobil: filmene i heroen står 15px lavere */
@media (max-width: 900px) { .hero-home .s-film { scale: 1.1; } .hero-home .s-film > * { translate: 0 25px; } }
/* Mobil: kreativerne i heroen står 10px lavere */
@media (max-width: 900px) { .hero-home .s-grafik { scale: 1.1; } .hero-home .s-grafik > * { translate: 0 9px; } }
/* Mobil: websites som fire browservinduer stablet i 3D, så man ser, at vi laver mange.
   Når slidet kommer frem, folder stakken sig ud bagfra og frem. */
@media (max-width: 900px) {
  .hero-home .s-web { display: block; height: 100%; margin: 0; perspective: 1100px; perspective-origin: 50% 40%; }
  .hero-home .s-web .br, .hero-home .s-web .br:nth-child(n+3) { display: flex; position: absolute; left: 50%; top: 50%; width: 58%; aspect-ratio: 16 / 11; border-radius: 10px; border: 1px solid rgba(255, 255, 255, .5); box-shadow: 0 24px 40px -18px rgba(12, 24, 48, .65), 0 2px 6px rgba(12, 24, 48, .2);
    transform: translate(-50%, -50%) translate3d(var(--x), var(--y), var(--z)) rotateY(-24deg) rotateX(10deg) rotateZ(2deg); transition: transform .9s cubic-bezier(.16, 1, .3, 1), opacity .6s ease; transition-delay: var(--d); }
  .hero-home .s-web .br .bar { height: 14px; padding: 0 7px; gap: 4px; }
  .hero-home .s-web .br .bar i { width: 4px; height: 4px; }
  .hero-home .s-web .br:nth-child(1) { --x: -48%; --y: -34%; --z: -150px; --d: .05s; z-index: 1; }
  .hero-home .s-web .br:nth-child(2) { --x: -16%; --y: -12%; --z: -50px; --d: .12s; z-index: 2; }
  .hero-home .s-web .br:nth-child(3) { --x: 16%; --y: 10%; --z: 50px; --d: .19s; z-index: 3; }
  .hero-home .s-web .br:nth-child(4) { --x: 46%; --y: 32%; --z: 150px; --d: .26s; z-index: 4; }
  .hero-home .s-web:not(.on) .br { --x: 0%; --y: 0%; --z: 0px; opacity: .6; transition-delay: 0s; }
}
/* SIDEfxHUB-kreativen: lettere overskrift */
.ad-sfx figcaption b { font-weight: 700; letter-spacing: -.02em; }
/* 3D-stakken: mindre kort og kortere spredning, så hele stakken er i billedet */
@media (max-width: 900px) {
  .hero-home .s-web .br, .hero-home .s-web .br:nth-child(n+3) { width: 50%; }
  .hero-home .s-web .br:nth-child(1) { --x: -40%; --y: -30%; --z: -100px; }
  .hero-home .s-web .br:nth-child(2) { --x: -13%; --y: -10%; --z: -33px; }
  .hero-home .s-web .br:nth-child(3) { --x: 13%; --y: 10%; --z: 33px; }
  .hero-home .s-web .br:nth-child(4) { --x: 38%; --y: 30%; --z: 100px; }
}
/* Heroens film: ingen navneskilte */
.hero-home .s-film .chip { display: none; }
/* 3D-stakken: 15 % større og lidt mod venstre, så den står optisk i midten */
@media (max-width: 900px) { .hero-home .s-web { scale: 1.15; translate: -21px 20px; } }
/* Heroens første trin i hurtigere tempo: website, resultater og henvendelse inden for 3 sekunder */
.s-hub.on .hub-site { animation: hub-step .6s var(--ease-soft) .15s both; }
.s-hub.on .hub-card { animation: hub-step .6s var(--ease-soft) .6s both; }
.s-hub.on .hub-toast:nth-child(1) { animation: hub-step .5s var(--ease-soft) 1.1s both; }
/* Heroens websites: Mac-prikker i dæmpet rød, gul og grøn */
.hero-home .s-web .br .bar i:nth-child(1) { background: #e8a29c; }
.hero-home .s-web .br .bar i:nth-child(2) { background: #e9cf96; }
.hero-home .s-web .br .bar i:nth-child(3) { background: #a9d3a4; }
/* Mobil: lavere browsertop i 3D-stakken */
@media (max-width: 900px) {
  .hero-home .s-web .br .bar { height: 10px; padding: 0 5px; gap: 3px; }
  .hero-home .s-web .br .bar i { width: 3.5px; height: 3.5px; }
}
/* Kundens website og resultatkortet i hub-grafikken i en mørkeblå kundefarve, så de ikke ligner vores eget site */
.hub { --c-cli: #23408e; --c-cli-rgb: 35 64 142; }
.hub .hs-text .k { background: rgb(var(--c-cli-rgb) / .6); }
.hub .hs-btn { background: var(--c-cli); }
.hub .hs-img { background: radial-gradient(60% 60% at 70% 30%, rgba(255, 255, 255, .5), transparent 70%), linear-gradient(150deg, #7c9be0, #1d3578); }
.hub .hc-head b, .hub .hc-kpis em { color: var(--c-cli); }
.hub .hc-head span::before { background: var(--c-cli); box-shadow: 0 0 0 .5cqi rgb(var(--c-cli-rgb) / .18); }
.hub .hc-chart .a { fill: rgb(var(--c-cli-rgb) / .1); }
.hub .hc-chart .l { stroke: var(--c-cli); }
.s-hub.on .hub .hs-btn { animation-name: hs-pulse-cli; }
@keyframes hs-pulse-cli { 0% { box-shadow: 0 0 0 0 rgb(35 64 142 / .45); } 70%, 100% { box-shadow: 0 0 0 2.4cqi rgb(35 64 142 / 0); } }
/* Logobæltet under mobil-heroen: logoerne tættere på hinanden */
.marquee-m .logo-item { padding: 0 16px; }
/* Kortere bælte, samme fart som før (32 s × 2506/3082 px) */
.marquee-m .marquee-track { animation-duration: 26s; }
/* Ydelseslisten på desktop: ingen udfoldet undertekst ved hover, så rækkerne ikke hopper */
@media (min-width: 901px) { .svc-links small { display: none; } }
/* Claude Code-sektionen: værdien i tre korte punkter med flueben */
.code-points { display: grid; gap: 10px; margin: 0 0 24px; }
.code-points li { display: flex; align-items: center; gap: 12px; font-size: clamp(1rem, 1.2vw, 1.08rem); font-weight: var(--fw-semibold); color: #fff; }
.code-points li::before { content: ''; flex: none; width: 22px; height: 22px; border-radius: 50%; background: #d3e3ff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230b6762' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center / 13px no-repeat; }
.code-head .lead { margin-bottom: 18px; }
/* Claude Code-overskriften: "Bygget af os." altid på egen linje */
.code-show .code-head h2 .hl { display: block; }
/* Claude Code: kun webshoppen ved siden af en lavere terminal */
.code-stage { height: clamp(340px, calc(100svh - 300px), 420px); }
.code-out { grid-template-columns: 1fr; grid-template-rows: 1fr; }
.pf-site { grid-row: auto; }
@media (max-width: 900px) {
  .code-stage .term { height: 300px; }
  .code-out .pf-site { min-height: 460px; }
}
@media (max-width: 560px) { .code-stage .term { height: 260px; } }
/* Eksempel-websitet i Claude Code-sektionen: en klinik med online booking */
.pf-nav .pf-book { padding: 4px 10px; border-radius: 99px; background: #325480; color: #fff; font-style: normal; font-weight: 700; font-size: 9.5px; }
.pf-hero { aspect-ratio: 16 / 8.5; background: radial-gradient(70% 90% at 85% 15%, #d9ece4 0%, transparent 60%), linear-gradient(135deg, #e9f2ec, #c7ddd2); }
.pf-hero::after { content: ''; position: absolute; right: -8%; bottom: -30%; width: 46%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #9cc4b3, #5f8f7d); opacity: .55; }
.pf-hero div { z-index: 1; color: #1d3a31; background: none; justify-content: center; }
.pf-hero small { font-size: 9px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #325480; }
.pf-hero h4 { max-width: 62%; margin-top: 4px; }
.pf-hero p { max-width: 62%; opacity: .8; }
.pf-hero em { background: #325480; color: #fff; }
.pf-slots { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.pf-slots li { padding: 7px 0; border-radius: 8px; border: 1px solid var(--line); text-align: center; font-size: 10px; font-weight: 700; }
.pf-slots li.on { background: #325480; border-color: #325480; color: #fff; }
.pf-svcs { display: grid; gap: 0; border-top: 1px solid var(--line); }
.pf-svcs li { display: flex; justify-content: space-between; padding: 7px 0; border-bottom: 1px solid var(--line); }
.pf-svcs b { font-size: 10.5px; }
.pf-svcs span { font-size: 9.5px; color: var(--text-muted); }
.pf-site .pf-toast i { background: #325480; }
.pf-hero { aspect-ratio: auto; }
.pf-hero div { position: relative; inset: auto; padding: 16px 16px 14px; }
.pf-site > .pf-hero { flex: none; }
.pf-hero div { padding: 14px 16px 12px; }
.pf-hero p { margin: 3px 0 8px; }
/* Priser: to store tal med en pil imellem, fælles fordele én gang, én knap */
.tiers2 { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: stretch; gap: clamp(12px, 2vw, 24px); }
.t2 { position: relative; display: flex; flex-direction: column; gap: 10px; padding: clamp(26px, 3vw, 40px); border-radius: 24px; background: #fff; color: var(--text); box-shadow: 0 30px 60px -36px rgba(9, 20, 41, .6); }
.t2.featured { background: #d3e3ff; color: #1f3561; }
.t2-name { font-size: var(--fs-label); font-weight: var(--fw-label); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--accent-text); }
.t2.featured .t2-name { color: #2d4d8a; }
.t2-price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 12px; font-size: clamp(3.6rem, 7.5vw, 6rem); font-weight: 800; letter-spacing: -.05em; line-height: .95; }
.t2-price span { font-size: clamp(1rem, 1.4vw, 1.2rem); font-weight: 600; letter-spacing: -.01em; opacity: .7; }
.t2-sub { font-size: clamp(1rem, 1.3vw, 1.12rem); opacity: .75; }
.t2 .badge { top: -14px; right: 24px; left: auto; background: #1f3561; color: #fff; }
.t2-arr { align-self: center; font-size: clamp(1.8rem, 3vw, 2.6rem); font-weight: 300; color: #d3e3ff; }
.t2-cta { margin-top: clamp(22px, 3vw, 34px); }
@media (max-width: 760px) {
  .tiers2 { grid-template-columns: 1fr; gap: 10px; }
  .t2-arr { justify-self: center; rotate: 90deg; font-size: 1.6rem; line-height: 1; }
  .t2-cta .btn { width: 100%; justify-content: center; }
}
.pricing-page .price-head { max-width: none; }
.price-head:has(> .flat-free) { grid-template-columns: 1fr; gap: 14px; }
.pricing-page .note { max-width: none; margin-inline: 0; text-align: left; }
.pricing-page .t2-cta .btn { background: #fff; border-color: #fff; color: var(--accent-text); }
.t2-arr { color: var(--accent); }
.pricing-page .t2-arr { color: #d3e3ff; }
.t2:not(.featured) { border: 1px solid var(--line); }
.pricing-page .t2:not(.featured) { border: 0; }
/* Priser: tydelig book-knap, stor og med pil */
.t2-cta { display: flex; justify-content: center; }
.t2-cta .btn { height: 60px; padding: 0 36px; font-size: 17px; gap: 10px; box-shadow: 0 18px 36px -18px rgba(9, 20, 41, .55); }
.t2-cta .btn::after { content: '→'; transition: transform var(--t-fast) var(--ease); }
.t2-cta .btn:hover::after { transform: translateX(4px); }
.t2-cta ~ .note { text-align: center; }
/* Videosiden: seks film i et roligt gitter */
.vp-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(20px, 3vw, 36px) clamp(16px, 2vw, 28px); }
.vp-grid figure { display: grid; gap: 10px; }
.vp-grid .yt, .vp-grid video { width: 100%; aspect-ratio: 16 / 9; border-radius: var(--r-m); object-fit: cover; }
.vp-grid figcaption { font-size: 15px; font-weight: var(--fw-semibold); color: var(--text-muted); }
@media (max-width: 700px) { .vp-grid { grid-template-columns: 1fr; } }
.vp-grid .vtile { aspect-ratio: 16 / 9; border-radius: var(--r-m); overflow: hidden; }
.vp-grid .vtile video { height: 100%; }
/* Hvem vi er: grøn top som de andre sider, så portrætterne, og familien længere nede */
body:has(main > .about-hero:first-child) .site-header { margin-bottom: -86px; }
.about-hero .about-facts { margin-top: 28px; }
.about-hero .about-facts b { color: #fff; }
.about-hero .about-facts span { color: rgba(255, 255, 255, .78); }
.about-hero + .people { padding-top: clamp(48px, 6vw, 80px); }
.about-life { display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(32px, 6vw, 88px); align-items: center; padding-block: clamp(56px, 7vw, 104px); }
.about-life .display { font-size: var(--fs-h2); margin-bottom: 14px; }
.about-life .lead { color: var(--text-muted); max-width: 52ch; margin-bottom: 24px; }
.about-life .about-family { width: 100%; justify-self: stretch; }
@media (max-width: 860px) { .about-life { grid-template-columns: 1fr; } .about-life .about-family { max-width: 420px; } }
/* Desktop: marketing-grafikken i heroen 10 % større */
@media (min-width: 901px) { .hero-home .s-hub .hub { scale: 1.1; } }
/* Desktop: kreativerne i heroen 10 % mindre */
@media (min-width: 901px) { .hero-home .s-grafik { scale: .9; } }
/* 3D-stakken med websites på alle skærmstørrelser (desktop og tablet som på mobil) */
@media (min-width: 901px) {
  .hero-home .s-web { display: block; height: 100%; margin: 0; perspective: 1400px; perspective-origin: 50% 40%; translate: -12px 0; }
  .hero-home .s-web .br, .hero-home .s-web .br:nth-child(n+3) { display: flex; position: absolute; left: 50%; top: 50%; width: 54%; aspect-ratio: 16 / 11; border-radius: 12px; border: 1px solid rgba(255, 255, 255, .5); box-shadow: 0 30px 50px -22px rgba(12, 24, 48, .65), 0 2px 6px rgba(12, 24, 48, .2);
    transform: translate(-50%, -50%) translate3d(var(--x), var(--y), var(--z)) rotateY(-24deg) rotateX(10deg) rotateZ(2deg); transition: transform .9s cubic-bezier(.16, 1, .3, 1), opacity .6s ease; transition-delay: var(--d); }
  .hero-home .s-web .br .bar { height: 14px; padding: 0 7px; gap: 4px; }
  .hero-home .s-web .br .bar i { width: 5px; height: 5px; }
  .hero-home .s-web .br:nth-child(1) { --x: -40%; --y: -30%; --z: -120px; --d: .05s; z-index: 1; }
  .hero-home .s-web .br:nth-child(2) { --x: -13%; --y: -10%; --z: -40px; --d: .12s; z-index: 2; }
  .hero-home .s-web .br:nth-child(3) { --x: 13%; --y: 10%; --z: 40px; --d: .19s; z-index: 3; }
  .hero-home .s-web .br:nth-child(4) { --x: 38%; --y: 30%; --z: 120px; --d: .26s; z-index: 4; }
  .hero-home .s-web:not(.on) .br { --x: 0%; --y: 0%; --z: 0px; opacity: .6; transition-delay: 0s; }
}
@media (min-width: 561px) and (max-width: 900px) {
  .hero-home .s-web { scale: 1; translate: -10px 0; }
  .hero-home .s-web .br, .hero-home .s-web .br:nth-child(n+3) { width: 40%; }
}
@media (min-width: 901px) { .hero-home .s-web .br, .hero-home .s-web .br:nth-child(n+3) { width: 60%; } }
/* Tablet: større grafikfelt og tekst i fuld bredde, så stakken ikke rammer overskriften */
@media (min-width: 561px) and (max-width: 900px) {
  .hero-home .stage { height: 400px; }
  .hero-home .hero-text { width: 100%; max-width: 640px; margin-inline: auto; }
  .hero-home .s-web .br, .hero-home .s-web .br:nth-child(n+3) { width: 50%; }
}
@media (min-width: 561px) and (max-width: 900px) { .hero-home .s-web { translate: -34px 0; } }
.vp-grid figure.sq .vtile { aspect-ratio: 1; }
/* Sprogskift i headeren: diskret "globus + EN" i stedet for flag */
.lang-code { display: none; }
@media (min-width: 901px) {
  .nav .lang .flag { display: none; }
  .nav .lang .lang-code { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border-radius: 99px; border: 1px solid var(--line-strong); color: var(--text); font-size: 12.5px; font-weight: 600; letter-spacing: .06em; transition: border-color var(--t-fast), background var(--t-fast); }
  .nav .lang .lang-code svg { width: 14px; height: 14px; opacity: .7; }
  .nav .lang:hover .lang-code { border-color: var(--text); background: var(--surface); }
}
/* Prisen på 700 kr.: kobolt-gradient med hvid tekst i stedet for mint */
.t2.featured { background: radial-gradient(90% 120% at 100% 0%, rgb(135 178 255 / .35), transparent 65%), linear-gradient(160deg, #4573c9 0%, #35569a 60%, #29447c 100%); color: #fff; border: 1px solid rgb(211 227 255 / .35); }
.t2.featured .t2-name { color: #d3e3ff; }
.t2.featured .t2-price span, .t2.featured .t2-sub { opacity: .8; }
.t2.featured .badge { background: #fff; color: #2d4d8a; }
/* Eksempel-websitet: rigtig hero med foto, budskab og to knapper */
.pf-hero { aspect-ratio: auto; min-height: 210px; background: #1f2d28; display: flex; }
.pf-hero::after { display: none; }
.pf-hero img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 78% 30%; }
.pf-hero div { position: relative; z-index: 1; flex: 1; display: flex; flex-direction: column; justify-content: flex-end; padding: 18px 18px 16px; color: #fff; background: linear-gradient(90deg, rgba(14, 24, 20, .78) 0%, rgba(14, 24, 20, .45) 48%, transparent 75%); }
.pf-hero small { color: rgba(255, 255, 255, .85); }
.pf-hero h4 { max-width: 58%; color: #fff; font-size: 17px; }
.pf-hero p { max-width: 55%; color: rgba(255, 255, 255, .85); opacity: 1; }
.pf-ctas { display: flex; gap: 6px; flex-wrap: wrap; }
.pf-hero .pf-ctas em { background: #fff; color: #1d3a31; }
.pf-hero .pf-ctas em.ghost { background: transparent; color: #fff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .6); }
.pf-hero img { left: auto; right: -18%; width: 125%; object-position: 50% 28%; }
.pf-hero { min-height: 190px; }
.pf-hero h4 { max-width: 52%; }
.pf-hero p { max-width: 48%; }

/* ===== Knapper i glas-stil på hele sitet =====
   HÅRD REGEL: én ren, symmetrisk kant – aldrig dobbeltkant, halvmåne eller forskudt fyld.
   - Fyldte knapper har INGEN kant: dybden kommer fra en lys-til-mørk-gradient i knappens egen baggrund og én blød skygge under.
   - Kun gennemsigtige knapper (btn-ghost) har en kant, tegnet som ydre ring (box-shadow 0 0 0 1px), aldrig border.
   - Ingen ::before/::after-glanslag, ingen inset-skygger, ingen backdrop-filter, ingen hård midterlinje, ingen transform ved hover. */
.btn { border: 0; background: linear-gradient(180deg, #5d90ee 0%, #456fc1 52%, #325293 100%); color: #fff; box-shadow: 0 10px 22px -12px rgba(17, 33, 63, .5); transition: box-shadow var(--t-fast), filter var(--t-fast); }
.btn:hover { background: linear-gradient(180deg, #5d90ee 0%, #456fc1 52%, #325293 100%); filter: brightness(1.06); }
.hero-home .actions .btn, .code-show .btn, .next-band .btn, .good .btn, .pt-card .btn, .pricing-page .t2-cta .btn {
  background: linear-gradient(180deg, #ffffff 0%, #f2f5fa 50%, #dce4f0 100%); color: var(--kobolt-800); box-shadow: 0 12px 24px -12px rgba(12, 24, 49, .6); }
.btn-ghost, .hero-home .actions .btn-ghost { background: transparent; color: var(--text); box-shadow: 0 0 0 1px var(--line-strong); filter: none; }
.btn-ghost:hover { background: rgba(20, 27, 28, .03); box-shadow: 0 0 0 1px var(--text); filter: none; }
.hero-home .actions .btn-ghost { background: linear-gradient(180deg, rgba(255, 255, 255, .12), rgba(255, 255, 255, .03)); color: #fff; box-shadow: 0 0 0 1px rgba(255, 255, 255, .42); }
.hero-home .actions .btn-ghost:hover { background: rgba(255, 255, 255, .1); box-shadow: 0 0 0 1px #fff; }
/* Pile-knapperne i ydelseslisten */
.svc-links .arr { border: 0; background: linear-gradient(180deg, #ffffff 0%, #f1f4f9 50%, #e2e7f0 100%); box-shadow: 0 0 0 1px rgba(20, 27, 28, .12), 0 6px 14px -10px rgba(20, 27, 28, .3); }
.svc-links a.on .arr { border: 0; background: linear-gradient(180deg, #5d90ee 0%, #456fc1 52%, #325293 100%); color: #fff; box-shadow: 0 8px 18px -12px rgba(17, 33, 63, .45); }
.svc-links a:hover .arr { transform: none; }
.btn:active { filter: brightness(.97); }
/* De hvide knapper: hvid ring rundt om gradienten (den udgave Morten valgte på /glas) – samme overalt */
.hero-home .actions .btn:not(.btn-ghost), .code-show .btn, .next-band .btn, .good .btn, .pt-card .btn, .pricing-page .t2-cta .btn {
  box-shadow: 0 0 0 1px #ffffff, 0 12px 24px -12px rgba(12, 24, 49, .6); }
/* Grønne knapper og den grønne pil: lys mint-ring rundt om, som den hvide ring på de hvide knapper */
.btn:not(.btn-ghost) { box-shadow: 0 0 0 1px #a1c3ff, 0 10px 22px -12px rgba(17, 33, 63, .5); }
.svc-links a.on .arr { box-shadow: 0 0 0 1px #a1c3ff, 0 8px 18px -12px rgba(17, 33, 63, .45); }
.hero-home .actions .btn:not(.btn-ghost), .code-show .btn, .next-band .btn, .good .btn, .pt-card .btn, .pricing-page .t2-cta .btn {
  box-shadow: 0 0 0 1px #ffffff, 0 12px 24px -12px rgba(12, 24, 49, .6); }
/* ===== Endelig kant på alle knapper (Safari/WebKit-sikker) =====
   Rigtig 1px-kant i en FAST farve, og baggrunden går helt ud under kanten (border-box). Ingen ring via box-shadow. */
.btn, .svc-links .arr { border: 1px solid #a1c3ff; background-origin: border-box; background-clip: border-box; }
.btn:not(.btn-ghost) { box-shadow: 0 10px 22px -12px rgba(17, 33, 63, .5); }
.hero-home .actions .btn:not(.btn-ghost), .code-show .btn, .next-band .btn, .good .btn, .pt-card .btn, .pricing-page .t2-cta .btn { border-color: #ffffff; box-shadow: 0 12px 24px -12px rgba(12, 24, 49, .6); }
.btn-ghost, .btn-ghost:hover { border-color: var(--line-strong); box-shadow: none; }
.btn-ghost:hover { border-color: var(--text); }
.hero-home .actions .btn-ghost { border-color: rgba(255, 255, 255, .45); box-shadow: none; }
.hero-home .actions .btn-ghost:hover { border-color: #fff; box-shadow: none; }
.svc-links .arr { border-color: #e0e4ea; box-shadow: 0 6px 14px -10px rgba(20, 27, 28, .3); }
.svc-links a.on .arr { border: 1px solid #a1c3ff; box-shadow: 0 8px 18px -12px rgba(17, 33, 63, .45); }
/* Intro-animationen må ikke klippe knappernes kant: kun opacity og bevægelse */
@keyframes intro-open { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
/* Browservinduerne med websites: lys adresselinje med www-adressen */
.br .bar { position: relative; }
.br .bar .url { position: absolute; left: 50%; top: 50%; translate: -50% -50%; width: 58%; padding: 0 8px; border-radius: 99px; background: #fff; color: var(--text-muted); font: 500 7px/1.6 var(--font); text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; box-shadow: 0 0 0 1px rgba(20, 27, 28, .06); }
.hero-home .s-web .br .bar { height: 14px; }
.hero-home .s-web .br .bar .url { font-size: 6.5px; line-height: 10px; }
@media (min-width: 901px) { .hero-home .s-web .br .bar { height: 18px; } .hero-home .s-web .br .bar .url { font-size: 8px; line-height: 12px; } }
/* Annoncerne: kun et lille "Annonce"-mærke øverst til venstre (ingen logoer) */
/* "Annonce"-mærket: samme størrelse og afstand fra hjørnet på alle tre, tekst centreret */
/* Heroens film: lille "Reel"-mærke øverst til venstre, samme stil som "Annonce" */
.hero-home .s-film figure { position: relative; }
.hero-home .s-film .vtag { position: absolute; left: 8px; top: 8px; z-index: 2; display: inline-flex; align-items: center; height: 18px; padding: 0 8px; border-radius: 99px; background: rgba(255, 255, 255, .94); color: #1f2836; font: 600 9.5px/1 var(--font); letter-spacing: .01em; box-shadow: 0 4px 10px -6px rgba(0, 0, 0, .35); }
.hero-home .s-film .vtag { left: 7px; top: 7px; height: 15px; padding: 0 7px; font-size: 8px; }
/* "Annonce": faste px-mål som "Reel" (Safari runder meget små cqi-skrifter op, så teksten skred ud af pillen) */
/* "Annonce": et enkelt, selvstændigt mærke (ikke et header-element med arvede regler) */
.ad { position: relative; }
.ad .ad-label { position: absolute; left: 9px; top: 9px; z-index: 3; display: block; height: 15px; padding: 0 7px; border-radius: 99px; background: rgba(255, 255, 255, .94); color: #1f2836; font: 600 8px/15px var(--font); letter-spacing: .01em; white-space: nowrap; box-shadow: 0 4px 10px -6px rgba(0, 0, 0, .35); -webkit-text-size-adjust: none; }
.ad .ad-label { left: 5cqi; top: 5cqi; height: 8.4cqi; padding: 0 3.4cqi; font-size: 4.4cqi; line-height: 8.4cqi; }
.ad .ad-label { height: 10cqi; padding: 0 4cqi; font-size: 5.2cqi; line-height: 10cqi; }
/* Kontakt på mobil og tablet: kompakt, så overskrift, os to og formularen står samlet */
@media (max-width: 900px) {
  .contact-hero { padding-top: calc(64px + 18px) !important; }
  .contact-hero .contact-grid { gap: 14px; padding-bottom: 28px; }
  .contact-hero .display { font-size: 1.85rem; }
  .contact-hero .lead { font-size: .95rem; margin-top: 6px; }
  .contact-hero .duo-photos { display: flex; gap: 10px; margin-top: 14px; }
  .contact-hero .duo-photos figure { position: relative; display: flex; align-items: center; gap: 8px; width: auto; margin: 0 !important; transform: none !important; }
  .contact-hero .duo-photos img { width: 40px !important; height: 40px !important; aspect-ratio: 1; border-radius: 50%; object-fit: cover; object-position: 50% 25%; box-shadow: 0 0 0 2px rgba(255, 255, 255, .7); }
  .contact-hero .duo-photos figcaption { position: static !important; padding: 0 !important; background: none !important; box-shadow: none !important; color: #fff; }
  .contact-hero .duo-photos figcaption b { font-size: 12px; color: #fff; }
  .contact-hero .duo-photos figcaption span { font-size: 11px; color: #d3e3ff; }
  .cform { padding: 18px 16px; }
  .cform > .kicker { display: none; }
  .cform-title { font-size: 1.1rem; margin-bottom: 10px; }
  .cform-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .cform label { margin-bottom: 8px; }
  .cform label span { font-size: 12px; margin-bottom: 3px; }
  .cform input { height: 40px; }
  .cform textarea { min-height: 72px; height: 72px; }
  .cform .btn { width: 100%; justify-content: center; }
  .cform-note { margin-top: 8px; font-size: 12px; }
}
@media (max-width: 900px) {
  .contact-hero .duo-photos { display: flex !important; grid-template-columns: none !important; height: auto !important; }
  .contact-hero .duo-photos figure { flex: 1 1 0; min-width: 0; height: auto !important; aspect-ratio: auto !important; background: none !important; border-radius: 0 !important; box-shadow: none !important; overflow: visible !important; padding: 0 !important; }
  .contact-hero .duo-photos figure > img { flex: none; }
  .contact-hero .duo-photos figcaption b, .contact-hero .duo-photos figcaption span { display: block; line-height: 1.25; }
}
@media (max-width: 760px) { .contact-hero .contact-grid > .rv:first-child .kicker { display: none; } }
/* Priser på mobil: kompakt, så begge priser og knappen står i ét skærmbillede */
@media (max-width: 760px) {
  .pricing-page { padding-top: calc(64px + 20px) !important; }
  .price-head:has(> .flat-free) { gap: 8px; margin-bottom: 14px; }
  .price-head .display { font-size: 1.85rem; }
  .flat-free { gap: 4px 14px; }
  .flat-free li { font-size: 13.5px; }
  .tiers2 { gap: 6px; }
  .t2 { padding: 16px 18px; gap: 4px; border-radius: 18px; }
  .t2-price { font-size: 3rem; }
  .t2-price span { font-size: .9rem; }
  .t2-sub { font-size: .9rem; }
  .t2-arr { font-size: 1.1rem; }
  .t2 .badge { top: -11px; right: 16px; padding: 4px 10px; font-size: 11px; }
  .t2-cta { margin-top: 14px; }
  .t2-cta .btn { height: 50px; font-size: 15.5px; }
  .pricing-page .note { margin-top: 10px; font-size: 12px; }
}
/* Touch: ingen hover-effekter på ydelseslisten, og ingen tryk-forsinkelse */
.svc-links a { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
@media (hover: none) { .svc-links a:hover .arr, .svc-links a:hover b, .svc-links a:hover .n { transform: none !important; transition: none !important; } }
/* Prissiden (grøn baggrund): 700 kr. er det hvide kort, 800 kr. det gennemsigtige */
.pricing-page .t2:not(.featured) { background: linear-gradient(180deg, rgba(255, 255, 255, .12), rgba(255, 255, 255, .04)); color: #fff; border: 1px solid rgba(211, 227, 255, .35); box-shadow: none; }
.pricing-page .t2:not(.featured) .t2-name { color: #d3e3ff; }
.pricing-page .t2:not(.featured) .t2-price span, .pricing-page .t2:not(.featured) .t2-sub { opacity: .8; }
.pricing-page .t2.featured { background: #fff; color: var(--text); border: 1px solid #fff; box-shadow: 0 30px 60px -36px rgba(9, 20, 41, .6); }
.pricing-page .t2.featured .t2-name { color: var(--accent-text); }
.pricing-page .t2.featured .t2-price span, .pricing-page .t2.featured .t2-sub { opacity: .75; }
.pricing-page .t2.featured .badge { background: linear-gradient(180deg, #5d90ee, #325293); color: #fff; }
/* Case-citat: portræt og navn centreret under teksten */
.cs-quote figcaption { display: flex; flex-direction: column; align-items: center; gap: 10px; margin: 24px auto 0; text-align: center; }
.cs-quote figcaption > span { display: block; max-width: 30ch; line-height: 1.4; }
.cs-quote .quote-img { width: 52px; height: 52px; }
.cs-quote figcaption > span { max-width: none; text-wrap: balance; }
/* Alle citater venstrestillet: stjerner, tekst og portræt med navn ved siden af */
.cs-quote, .proof blockquote, .review { text-align: left; }
.cs-quote { margin-left: auto; margin-right: auto; }
.cs-quote blockquote p { text-wrap: pretty; }
.cs-quote figcaption { flex-direction: row; align-items: center; justify-content: flex-start; gap: 12px; margin: 22px 0 0; text-align: left; }
.cs-quote figcaption > span { max-width: none; }
.cs-quote .quote-img { width: 48px; height: 48px; flex: none; }
/* Kontaktformularen: lettere og mere elegant – hvide felter, tynd kant, blød fokus */
.cform label span { font-size: 12.5px; font-weight: 600; letter-spacing: .01em; color: var(--text-muted); }
.cform input, .cform textarea { background: #fff; border: 1px solid #e0e4ea; border-radius: 12px; box-shadow: 0 1px 2px rgba(20, 27, 28, .04); font: 400 15px/1.4 var(--font); color: var(--text); transition: border-color .2s, box-shadow .2s; }
.cform input { height: 46px; padding: 0 14px; }
.cform textarea { padding: 12px 14px; }
.cform input:focus, .cform textarea:focus { outline: none; border-color: #769feb; box-shadow: 0 0 0 4px rgb(118 159 235 / .16); }
.cform textarea::placeholder { color: #9ca3b0; }
.cform-title { font-weight: 650; letter-spacing: -.02em; }
.cform-note { color: var(--text-muted); }
@media (max-width: 760px) { .cform input { height: 42px; } .cform label { margin-bottom: 10px; } }
.cform label { display: grid; gap: 6px; } .cform label span { margin: 0 !important; }
/* ===== Landingsside: AI-rådgivning ===== */
.ai-hero .actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }
.ai-hero .btn:not(.btn-ghost) { background: linear-gradient(180deg, #ffffff 0%, #f2f5fa 50%, #dce4f0 100%); color: var(--kobolt-800); border-color: #fff; }
.ai-trust { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: 26px; }
.ai-trust li { position: relative; padding-left: 22px; color: rgba(255, 255, 255, .9); font-weight: 600; font-size: 15px; }
.ai-trust li::before { content: ''; position: absolute; left: 2px; top: 4px; width: 6px; height: 11px; border: solid #d3e3ff; border-width: 0 2px 2px 0; rotate: 45deg; }
.ai-tools { display: flex; gap: 10px; margin-top: 28px; }
.ai-tools span { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: rgba(255, 255, 255, .94); box-shadow: 0 10px 24px -14px rgba(9, 20, 41, .6); }
.ai-pain, .ai-offers, .ai-show, .ai-steps, .ai-why { padding: var(--section) 0; }
.ai-pain-grid, .ai-step-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 28px; }
.ai-pain-grid > div { padding: 24px; border-radius: var(--r-l); background: var(--tint); }
.ai-pain-grid b, .ai-step-grid b { display: block; font-size: 1.15rem; letter-spacing: -.02em; margin-bottom: 6px; }
.ai-pain-grid p, .ai-step-grid p { color: var(--text-muted); }
.ai-offers { background: var(--raised); border-block: 1px solid var(--line); }
.ai-offer-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin-top: 28px; align-items: stretch; }
.ai-offer { position: relative; display: flex; flex-direction: column; gap: 12px; padding: 28px 26px; border-radius: 22px; background: #fff; border: 1px solid var(--line); }
.ai-offer h3 { font-size: 1.5rem; letter-spacing: -.03em; }
.ai-offer > p:not(.kicker) { color: var(--text-muted); }
.ai-offer .ret-list { margin: 4px 0 8px; }
.ai-offer .btn { margin-top: auto; align-self: flex-start; }
.ai-offer.featured { background: radial-gradient(90% 120% at 100% 0%, rgb(135 178 255 / .35), transparent 65%), linear-gradient(160deg, #4573c9 0%, #35569a 60%, #29447c 100%); color: #fff; border-color: transparent; }
.ai-offer.featured .kicker { color: #d3e3ff; }
.ai-offer.featured > p:not(.kicker), .ai-offer.featured li { color: rgba(255, 255, 255, .88); }
.ai-offer.featured .btn { background: linear-gradient(180deg, #ffffff 0%, #f2f5fa 50%, #dce4f0 100%); color: var(--kobolt-800); border-color: #fff; }
.ai-offer .badge { top: -12px; right: 20px; background: #fff; color: #2d4d8a; box-shadow: 0 6px 14px -8px rgba(0, 0, 0, .3); }
.ai-show-grid, .ai-why-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 5vw, 72px); align-items: center; }
.ai-show-media .svc-media { position: relative; aspect-ratio: 4 / 3; display: grid; place-items: center; border-radius: var(--r-l); background: var(--tint); }
.ai-step-grid li { padding: 24px; border-radius: var(--r-l); border: 1px solid var(--line); background: #fff; }
.ai-step-grid .n { display: block; color: var(--accent); font-weight: 700; font-size: 13px; letter-spacing: .08em; margin-bottom: 10px; }
.ai-why { background: var(--tint); }
.ai-why-grid figure img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--r-l); }
.ai-why-grid .lead { margin: 14px 0 22px; color: var(--text-muted); }
@media (max-width: 860px) {
  .ai-pain-grid, .ai-step-grid, .ai-offer-grid, .ai-show-grid, .ai-why-grid { grid-template-columns: 1fr; }
  .ai-why-grid figure { max-width: 360px; }
  .ai-hero .actions .btn { flex: 1 1 100%; justify-content: center; }
  .ai-offer .btn { align-self: stretch; justify-content: center; }
}
.ai-why-grid figure { max-width: 440px; } .ai-why-grid figure img { aspect-ratio: 4 / 5; object-position: 50% 25%; }
.ai-hero .btn-ghost { color: #fff !important; border-color: rgba(255, 255, 255, .45) !important; background: rgba(255, 255, 255, .06); }
/* Udtalelser på mobil: plads til skyggen under kortene i den vandrette scroll */
@media (max-width: 560px) { .review-grid { padding-bottom: 36px; margin-bottom: -36px; padding-top: 4px; margin-top: -4px; } }
/* Ring-knap i headeren (mobil) */
.header-call { display: none; }
@media (max-width: 900px) {
  .header-call { display: grid; place-items: center; width: 40px; height: 40px; margin-left: auto; border-radius: 50%; color: var(--accent-text); border: 1px solid #e0e4ea; background: linear-gradient(180deg, #fff, #eff2f7); }
  .header-call svg { width: 18px; height: 18px; }
  .header-call + .header-cta { margin-left: 8px; }
}
/* Løfte under knapperne */
.cta-promise { margin-top: 12px; font-size: 13px; color: var(--text-muted); }
.hero-home .cta-promise, .page-hero .cta-promise { color: rgba(255, 255, 255, .75); }
.hero-home .cta-promise { text-align: center; }
@media (min-width: 901px) { .hero-home .cta-promise { text-align: left; } }
.end-band .cta-promise { text-align: center; }
/* Fast kontaktbjælke på mobil */
.sticky-cta { display: none; }
@media (max-width: 900px) {
  .sticky-cta { position: fixed; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); z-index: 60; display: flex; gap: 8px; padding: 8px; border-radius: 99px; background: rgba(255, 255, 255, .92); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: 0 14px 34px -14px rgba(17, 33, 63, .45), 0 0 0 1px rgba(20, 27, 28, .06); transform: translateY(140%); transition: transform .45s var(--ease-soft); }
  .sticky-cta.show { transform: none; }
  .sticky-cta .btn { flex: 1; justify-content: center; height: 46px; }
  .sticky-call { flex: none; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; color: var(--accent-text); border: 1px solid #e0e4ea; background: linear-gradient(180deg, #fff, #eff2f7); }
  .sticky-call svg { width: 19px; height: 19px; }
}

/* Gendannet efter oprydning: tilstande og elementer, som JavaScript sætter (åben menu, lightbox, formularfejl m.m.) */
.tabs button[aria-selected="true"] { color: var(--text); }
.filters button[aria-pressed="true"] { background: var(--primary); color: var(--on-primary); border-color: var(--primary); }
.gallery button[hidden] { display: none; }
.sv-scroll.mobile img { max-width: 390px; border-radius: 26px; border: 8px solid #000; }
@media (max-width: 900px) { .nav-open .nav { transform: none; opacity: 1; visibility: visible; transition: transform var(--t-base) var(--ease), opacity .3s; } }
@media (max-width: 900px) { .nav-open { overflow: hidden; } }
@media (max-width: 900px) { .nav-open .menu-toggle span:first-child { transform: translateY(3.75px) rotate(45deg); } }
@media (max-width: 900px) { .nav-open .menu-toggle span:nth-child(2) { transform: translateY(-3.75px) rotate(-45deg); } }
.vbox-stage.tall { width: auto; height: min(86svh, 900px); aspect-ratio: 9 / 16; max-width: 100%; }
.cform.tried input:invalid, .cform.tried textarea:invalid { border-color: #c2533f; }
.inbox.play li { animation: ib-land .6s var(--ease-soft) both; animation-delay: calc(.25s + var(--n) * .7s); }
.inbox.play li .ib-av svg { animation: ib-flap .6s var(--ease-soft) both; animation-delay: calc(.35s + var(--n) * .7s); }
.tl-w { margin-top: 8px; color: #d97757; }
.tl-w i { font-style: normal; display: inline-block; width: 14px; }
.tl-w small { color: var(--mu); font-size: 11.5px; }
.vbox-stage.tall { width: auto; height: min(86svh, 900px); aspect-ratio: 9 / 16; max-width: 100%; }
.vbox-stage video, .vbox-stage iframe { display: block; width: 100%; height: 100%; border: 0; border-radius: 16px; background: #000; box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .8); }/* CTA i mobilmenuen */
.nav-cta { display: none; }
@media (max-width: 900px) {
  .nav-cta { display: grid; gap: 10px; width: 100%; margin-top: 28px; }
  .nav-cta .btn { width: 100%; justify-content: center; height: 52px; font-size: 16px; }
  .nav-cta .cta-promise { margin-top: 2px; text-align: center; }
}
@media (max-width: 900px) { .nav .nav-cta .btn:not(.btn-ghost) { color: #fff !important; } .nav .nav-cta .btn-ghost { color: var(--text) !important; font-size: 16px !important; } }
/* Bookingkalender i kontaktformularen */
.bk { margin: 0 0 14px; padding: 14px; border-radius: 16px; background: #f3f6fb; border: 1px solid #e3e9f0; }
.bk-title { font-weight: 650; font-size: 15px; letter-spacing: -.01em; margin-bottom: 10px; }
.bk-label { font-size: 12px; font-weight: 600; color: var(--text-muted); margin-bottom: 8px; }
.bk-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.bk-grid button { display: grid; gap: 1px; justify-items: center; padding: 7px 0; border-radius: 10px; border: 1px solid #e0e4ea; background: #fff; font: inherit; color: var(--text); cursor: pointer; transition: border-color .2s, box-shadow .2s; }
.bk-grid button small { font-size: 10.5px; color: var(--text-muted); text-transform: capitalize; }
.bk-grid button b { font-size: 16px; line-height: 1.1; }
.bk-grid button:hover, .bk-slots button:hover { border-color: #769feb; }
.bk-back { padding: 0; margin-bottom: 6px; border: 0; background: none; font: 600 12.5px var(--font); color: var(--accent-text); cursor: pointer; }
.bk-date { text-transform: capitalize; color: var(--text); }
.bk-slots { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.bk-slots button { height: 36px; border-radius: 10px; border: 1px solid #e0e4ea; background: #fff; font: 600 13.5px var(--font); color: var(--text); cursor: pointer; }
.bk-slots button.on { background: linear-gradient(180deg, #5d90ee, #325293); border-color: #a1c3ff; color: #fff; }
.bk-none { display: flex !important; align-items: center; gap: 8px; margin: 10px 0 0 !important; font-size: 13px; color: var(--text-muted); cursor: pointer; }
.bk-none input { width: 16px; height: 16px; accent-color: #35569a; }
.bk-note { margin-top: 6px; font-size: 12px; color: var(--text-muted); }
/* Felter med label inde i feltet (flydende label) */
.cform .fl { position: relative; display: block !important; margin-bottom: 10px; }
.cform .fl input, .cform .fl textarea { width: 100%; padding: 20px 14px 6px; }
.cform .fl input { height: 50px; }
.cform .fl textarea { min-height: 84px; padding-top: 24px; resize: vertical; }
.cform .fl > span { position: absolute; left: 15px; top: 15px; margin: 0 !important; font-size: 15px !important; font-weight: 400 !important; color: #8c93a0 !important; pointer-events: none; transition: top .18s, font-size .18s, color .18s; }
.cform .fl input:focus + span, .cform .fl input:not(:placeholder-shown) + span, .cform .fl textarea:focus + span, .cform .fl textarea:not(:placeholder-shown) + span { top: 7px; font-size: 11px !important; font-weight: 600 !important; color: var(--accent-text) !important; }
.cform-row { gap: 10px; }
.cform-title { margin-bottom: 12px; }
@media (max-width: 760px) { .cform .fl input { height: 48px; } .cform .fl { margin-bottom: 8px; } .bk { padding: 12px; } }
.cform-row { margin: 0 !important; }
.cform .fl { margin-bottom: 8px !important; }
.cform .btn { margin-top: 6px; }
.bk-date { text-transform: none; }
.bk-date::first-letter { text-transform: uppercase; }
.bk-grid button { padding: 5px 0; }
.bk-grid button b { font-size: 15px; }
.cform .fl > span { top: 14px; }
.cform .fl input:focus + span, .cform .fl input:not(:placeholder-shown) + span, .cform .fl textarea:focus + span, .cform .fl textarea:not(:placeholder-shown) + span { top: 6px; }
.cform .fl input { padding-top: 18px; }
.cform { row-gap: 8px !important; } .cform .fl, .cform-row .fl { margin-bottom: 0 !important; } .cform .bk { margin-bottom: 6px; }
/* Felterne: label er en nedtonet pladsholder, der forsvinder, når man skriver */
.cform .fl input, .cform .fl textarea { padding: 0 14px; }
.cform .fl textarea { padding: 13px 14px; }
.cform .fl input::placeholder, .cform .fl textarea::placeholder { color: #9ca3b0; opacity: 1; }
/* Strammere formular: kalender uden ramme, ens felter med teksten centreret lodret */
.bk { padding: 0; background: none; border: 0; margin: 0 0 4px; }
.bk-label { margin-bottom: 8px; font-size: 13px; color: var(--text); }
.bk-none { gap: 8px !important; margin-top: 8px !important; font-size: 12.5px; }
.cform .fl input { height: 46px !important; padding: 0 14px !important; line-height: 46px; }
.cform .fl textarea { height: 88px; min-height: 88px !important; padding: 12px 14px !important; line-height: 1.4; }
.cform .fl input, .cform .fl textarea { font-size: 15px !important; -webkit-appearance: none; appearance: none; }
.cform-title { font-size: 1.15rem; margin-bottom: 10px; }
.cform { padding: 18px 16px 16px; }
/* Kontakt: introteksten 3px tættere linjeafstand */
.contact-hero .lead { line-height: calc(1.6em - 3px); }
/* "Ingen bestemt tid": større afkrydsning, tekst flugter tæt ved siden af */
.cform .bk-none { display: inline-flex !important; align-items: center; gap: 10px !important; width: auto; margin: 10px 0 0 !important; padding: 0; font-size: 14px; line-height: 1.3; color: var(--text); grid-template-columns: none; }
.cform .bk-none input { flex: none; width: 20px !important; height: 20px !important; margin: 0; padding: 0 !important; border-radius: 6px; accent-color: #35569a; -webkit-appearance: checkbox; appearance: auto; box-shadow: none; }
/* "Ingen bestemt tid" som en knap i samme stil som tidspunkterne (ingen systemafkrydsning) */
.cform .bk-none { position: relative; display: flex !important; align-items: center; justify-content: center; gap: 0 !important; width: 100%; height: 36px; margin: 6px 0 0 !important; padding: 0 12px; border-radius: 10px; border: 1px dashed #ced6e2; background: #fff; font: 600 13px var(--font) !important; color: var(--text-muted); cursor: pointer; transition: border-color .2s, background .2s, color .2s; }
.cform .bk-none input { position: absolute; opacity: 0; width: 1px !important; height: 1px !important; pointer-events: none; }
.cform .bk-none:has(input:checked) { border-style: solid; border-color: #a1c3ff; background: linear-gradient(180deg, #5d90ee, #325293); color: #fff; }
.cform .bk-none:hover { border-color: #769feb; }
.cform .bk-none { margin-top: 11px !important; }
@media (max-width: 900px) { .header-call { position: relative; left: 8px; } }
/* Formularen må ikke hoppe: 16px i felterne (iPhone zoomer ellers ind ved tryk), fast højde på kalenderen, status uden at skubbe */
.cform input, .cform textarea, .cform .fl input, .cform .fl textarea { font-size: 16px !important; }
.bk-days, .bk-times { min-height: 132px; }
.cform-status { min-height: 0; }
.cform-status:empty { display: none; }
.cform.sent > :not(.cform-done) { visibility: hidden; }
.cform.sent { min-height: 0; }
.cform.sent .cform-done { position: static; padding: 28px 10px; }
.cform.sent > :not(.cform-done) { display: none; }
.cform.sent > :not(.cform-done) { display: none !important; }
.cform.sent .cform-done { padding: 22px 10px 18px; gap: 8px; }
/* Desktop: 10px mere luft til højre for "Kontakt os" i headeren */
@media (min-width: 901px) { .header-inner { padding-right: 24px; } }
/* Udtalelser på desktop: én linje som karrusel med fire synlige kort */
@media (min-width: 1101px) {
  .reviews .wrap, .review-grid { overflow: visible; }
  .review-grid { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: calc((100% - 48px) / 4); will-change: transform; }
  .reviews > .wrap { overflow: hidden; padding-bottom: 40px; margin-bottom: -40px; padding-top: 6px; }
}
@media (min-width: 1101px) { .reviews > .wrap { overflow: visible; margin-bottom: 0; padding-bottom: 0; clip-path: inset(-20px var(--gutter) -60px var(--gutter)); } }
/* Tal-båndet under "I har travlt…": kompakt, én linje med tre tal */
.pain + .facts { padding: 0 0 clamp(36px, 4vw, 56px); }
.pain + .facts .fact { padding: 16px 22px; border-radius: 16px; }
.pain + .facts .fact-n { font-size: clamp(2rem, 3.4vw, 2.8rem); }
.pain + .facts .fact-l { margin-top: 4px; }
@media (max-width: 760px) { .pain + .facts .facts-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; } .pain + .facts .fact { padding: 12px; } .pain + .facts .fact p { flex-direction: column; gap: 2px; } .pain + .facts .fact-n { font-size: 1.8rem; } .pain + .facts .fact-l { font-size: 11.5px; } }
@media (max-width: 760px) {
  .pain + .facts .fact { display: block !important; text-align: left; }
  .pain + .facts .fact p { display: flex; flex-direction: row; align-items: baseline; gap: 4px; }
  .pain + .facts .fact-n { font-size: 1.6rem; }
  .pain + .facts .fact-u { font-size: 12px; }
  .pain + .facts .fact-l { display: block; margin-top: 2px; font-size: 11px; line-height: 1.3; text-align: left; }
}
@media (max-width: 760px) { .pain + .facts .fact p { flex-direction: column; align-items: flex-start; gap: 0; } .pain + .facts .fact-u { font-size: 12.5px; margin-top: 2px; } }
/* 20px mindre luft mellem "I har travlt…" og tal-båndet */
.pain:has(+ .facts) { padding-bottom: calc(var(--section) - 20px); }
/* Forsidens rytme efter flytningen: udtalelser → team → tal står som én samlet blok med ens afstande */
.reviews { padding-bottom: calc(var(--section) * .5); }
.reviews + .pain { padding-top: calc(var(--section) * .5); }
.pain:has(+ .facts) { padding-bottom: clamp(28px, 3vw, 40px); }
.pain + .facts { padding-bottom: var(--section); }
/* Udtalelse + kundelogoer lige efter en sektion: 30px mindre luft over */
section + .proof { padding-top: max(0px, calc(clamp(40px, 5vw, 72px) - 30px)); }
/* Forsidens rytme (målt): logobælte → udtalelser → team → tal → ydelser */
.marquee + .reviews, .hero-home + .marquee-m + .reviews, .reviews { padding-top: clamp(40px, 4.5vw, 64px); }
.reviews { padding-bottom: 0; }
.reviews + .pain { padding-top: clamp(48px, 5.5vw, 80px); }
.pain + .facts { padding-bottom: 0; }
.facts + .svc-home { margin-top: var(--section); }
@media (min-width: 1101px) { .reviews > .wrap { padding-bottom: 0; } }
.reviews { padding-top: 34px; }
.facts + .svc-home { margin-top: 80px; }
@media (max-width: 760px) {
  .reviews { padding-top: 16px; }
  .reviews + .pain { padding-top: 72px; }
  .facts + .svc-home { margin-top: 48px; }
}
/* Claude Code-sektionen: overskrift og tekst flugter i bunden, ingen punktliste */
.code-head { align-items: end; }
.code-head .lead { margin-bottom: 18px; max-width: 46ch; }
.code-head > div:last-child { padding-bottom: 4px; }
/* Forsidens rytme: finjustering efter måling */
@media (min-width: 761px) { .reviews { padding-top: 0; } .facts + .svc-home { margin-top: 104px; } }
@media (max-width: 760px) { .facts + .svc-home { margin-top: 72px; } }
@media (min-width: 761px) { .reviews { padding-top: 0 !important; } }
@media (min-width: 761px) { .reviews { padding-top: 50px !important; } }
/* Foto & video: hero med film bag et mørkt overlay og valg mellem film og foto */
.fv-hero { position: relative; isolation: isolate; overflow: hidden; min-height: min(78svh, 720px); display: flex; align-items: flex-end; padding-bottom: clamp(40px, 6vw, 88px); }
.fv-hero .fv-bg { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; }
.fv-hero::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(13, 24, 47, .35) 0%, rgba(13, 24, 47, .55) 45%, rgba(15, 30, 57, .9) 100%); }
.fv-hero .wrap { width: 100%; }
.fv-tabs { display: inline-flex; gap: 4px; margin-top: 26px; padding: 4px; border-radius: 99px; background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .28); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.fv-tabs button { height: 40px; padding: 0 20px; border: 0; border-radius: 99px; background: none; color: #fff; font: 600 15px var(--font); cursor: pointer; transition: background .25s, color .25s; }
.fv-tabs button.on { background: #fff; color: var(--kobolt-800); }
.fv-section { padding: var(--section) 0 0; scroll-margin-top: 80px; }
.fv-section:last-of-type { padding-bottom: var(--section); }
.fv-section .section-head { margin-bottom: 26px; }
@media (max-width: 760px) { .fv-hero { min-height: 70svh; } .fv-tabs { display: flex; } .fv-tabs button { flex: 1; padding: 0; } }
.fv-hero::after { background: linear-gradient(180deg, rgba(9, 19, 39, .55) 0%, rgba(9, 19, 39, .7) 45%, rgba(12, 24, 48, .94) 100%); }
.fv-points { margin-top: 18px; }
.fv-hero { min-height: min(56svh, 520px); padding-bottom: clamp(36px, 4.5vw, 64px); }
@media (max-width: 760px) { .fv-hero { min-height: 58svh; } }
/* Foto & video blandet i ét galleri */
.fv-mix { padding-top: clamp(40px, 5vw, 72px); }
.gallery.mix .mix-film { break-inside: avoid; margin: 0 0 14px; display: grid; gap: 8px; }
.gallery.mix .mix-film .yt, .gallery.mix .mix-film .vtile { border-radius: var(--r-m); overflow: hidden; aspect-ratio: 16 / 9; }
.gallery.mix .mix-film.sq .vtile { aspect-ratio: 1; }
.gallery.mix .mix-film figcaption { font-size: 13px; color: var(--text-muted); padding: 0 2px; }
/* Elegant hover på knapper: kanten bliver, knappen løftes blødt med lidt mere lys og en dybere skygge */
.btn { transition: filter .35s var(--ease-soft), box-shadow .35s var(--ease-soft), transform .35s var(--ease-soft) !important; }
.btn:not(.btn-ghost):hover { filter: brightness(1.07) saturate(1.05); border-color: #a1c3ff !important; box-shadow: 0 16px 30px -14px rgba(17, 33, 63, .55) !important; transform: translateY(-1px); }
.hero-home .actions .btn:not(.btn-ghost):hover, .code-show .btn:hover, .next-band .btn:hover, .flat-main .btn:hover, .good .btn:hover, .tier.featured .btn:hover, .pt-card .btn:hover, .pricing-page .tier.featured .btn:hover, .pricing-page .t2-cta .btn:hover, .ai-offer.featured .btn:hover { border-color: #fff !important; filter: brightness(1.03); box-shadow: 0 18px 32px -14px rgba(12, 24, 49, .65) !important; }
.btn-ghost:hover { transform: translateY(-1px); }
@media (hover: none) { .btn:hover { transform: none; } }
/* Galleriets knap-regler må ikke ramme YouTube-afspilleren i det blandede galleri */
.gallery .yt button { position: absolute; inset: 0; display: grid; place-items: center; width: auto; height: auto; margin: 0; padding: 0; border-radius: 0; aspect-ratio: auto; background: linear-gradient(transparent 50%, rgba(0, 0, 0, .3)); box-shadow: none; }
.gallery .yt button span { position: relative; left: auto; bottom: auto; width: 56px; height: 56px; padding: 0; border-radius: 50%; background: rgba(255, 255, 255, .92); opacity: 1; transform: none; font-size: 0; }
.gallery .yt button span::after { left: 22px; top: 17px; border-width: 11px 0 11px 17px; }
.gallery .yt button:hover span { transform: scale(1.08); }
.gallery .yt { box-shadow: none; }
.link-arrow::after { content: "→"; margin-left: 6px; }
.link-arrow::after { margin-left: 8px; }
/* Menu-pilene: mindre, tyndere og optisk centreret ud for teksten */
.nav-link:has(.chev) { display: inline-flex; align-items: center; gap: 7px; }
.chev { width: 6px; height: 6px; margin: 0; border-width: 0 1.25px 1.25px 0; opacity: .55; transform: translateY(-1.5px) rotate(45deg); }
.has-mega:hover .chev, .has-mega:focus-within .chev { transform: translateY(1.5px) rotate(225deg); opacity: .8; }
.mega-work { grid-template-columns: repeat(2, 1fr); }
/* Værktøjsbæltet tonet ned: gråtone-ikoner, dæmpet tekst og lettere piller; farve og fuld styrke ved hover */
.tool { background: rgba(255, 255, 255, .55); border-color: rgba(20, 27, 28, .06); box-shadow: none; color: var(--text-muted); font-weight: 500; transition: color .3s, background .3s, border-color .3s; }
.tool img { filter: grayscale(1) contrast(.9); opacity: .55; transition: filter .3s, opacity .3s; }
.tool:hover { color: var(--text); background: #fff; border-color: var(--line); }
.tool:hover img { filter: none; opacity: 1; }
/* Behold farverne, men dæmpet */
.tool img { filter: saturate(.75); opacity: .75; }
.tool { color: #5f6672; }
@media (min-width: 901px) { .nav .lang .lang-code .flag { display: inline-block; width: 16px; height: 16px; box-shadow: 0 0 0 1px rgba(20, 27, 28, .1); } .nav .lang .lang-code { gap: 7px; padding: 0 12px 0 8px; } }
/* Punkter: enkelt mint-flueben uden cirkel (som på resten af sitet) */
.checks li { position: relative; padding-left: 26px; }
.checks li::before { display: none; }
.checks li::after { left: 4px; top: 4px; width: 6px; height: 11px; border: solid var(--accent); border-width: 0 2px 2px 0; }
.hero-home .checks li::after, .page-hero .checks li::after, .code-show .checks li::after, .pricing-page .checks li::after { border-color: #d3e3ff; }
/* Prisen holdes på én linje og lidt mindre (EN "DKK 800" er længere) */
.flat-price { flex-wrap: wrap; row-gap: 4px; }
.flat-price b { white-space: nowrap; font-size: clamp(3.6rem, 7.5vw, 6.5rem); }
.pt-card .flat-price b { font-size: clamp(3.4rem, 6.5vw, 5.6rem); }
.flat-price span { white-space: nowrap; }
/* Flag i sprogknappen: rent rundt flag, fyldt helt ud, ingen skæv ring */
@media (min-width: 901px) {
  .nav .lang .lang-code .flag { display: block; flex: none; width: 18px; height: 18px; border-radius: 50%; overflow: hidden; box-shadow: none; transform: none !important; }
  .nav .lang .lang-code .flag svg { display: block; width: 100%; height: 100%; }
  .nav .lang .lang-code { padding: 0 13px 0 8px; gap: 8px; }
}
@media (min-width: 901px) { .nav .lang .lang-code .flag, .nav .lang .lang-code .flag svg { opacity: 1 !important; width: 18px; height: 18px; } }
/* Annoncerne i ydelseskortet: luft over og under, så de ikke fylder hele højden */
.svc-card .svc-ads { padding: 26px 16px; align-items: center; }
.svc-card .svc-ads .ad { height: 100%; max-height: 100%; }
/* Sekundære knapper på lys baggrund: samme højde og form som de primære, kobolt-tekst, let hvid flade og blød kant */
.btn-ghost { background: linear-gradient(180deg, #ffffff 0%, #f4f6fa 100%) !important; color: var(--kobolt-800) !important; border: 1px solid #d0d9e8 !important; box-shadow: 0 6px 16px -12px rgba(17, 33, 63, .35) !important; font-weight: 600; }
.btn-ghost:hover { border-color: #a1c3ff !important; color: var(--kobolt-800) !important; box-shadow: 0 12px 24px -14px rgba(17, 33, 63, .45) !important; }
.hero-home .actions .btn-ghost, .page-hero .btn-ghost, .code-show .btn-ghost, .cs-hero .btn-ghost, .ai-hero .btn-ghost, .pt-card .btn-ghost, .pricing-page .btn-ghost { background: rgba(255, 255, 255, .08) !important; color: #fff !important; border-color: rgba(255, 255, 255, .45) !important; box-shadow: none !important; }
.end-band .actions .btn { height: 48px; }
@media (min-width: 561px) and (max-width: 900px) { .contact-hero .duo-photos figure { flex: none; } .contact-hero .duo-photos { gap: 28px; } }
/* Kanaler og programmer på kundesiderne: små piller under "Det gjorde vi" */
.cs-tools { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 18px; }
.cs-tools li { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 11px 0 8px; border-radius: 99px; background: #fff; border: 1px solid #e1e7ee; font-size: 12.5px; font-weight: 600; color: var(--text-muted); }
.cs-tools img { width: 14px; height: 14px; }
/* Mindre og mere diskrete: ingen kant, lys flade, små grå ikoner */
.cs-tools { gap: 4px; margin-top: 14px; }
.cs-tools li { height: 22px; padding: 0 8px 0 6px; gap: 4px; border: 0; background: rgba(20, 27, 28, .045); font-size: 11px; font-weight: 500; color: #7d8491; }
.cs-tools img { width: 11px; height: 11px; filter: grayscale(1); opacity: .6; }
/* Kanal- og programpillerne i casens hero, under disciplinerne */
.cs-hero .cs-tools { margin-top: 10px; }
.cs-hero .cs-tools li { background: rgba(255, 255, 255, .1); color: rgba(255, 255, 255, .75); }
.cs-hero .cs-tools img { filter: grayscale(1) brightness(2.2); opacity: .7; }
/* Hero-pillerne: ensartede hvide ikoner, mindre og roligere end disciplinerne */
.cs-hero .cs-tools { gap: 6px; margin-top: 12px; }
.cs-hero .cs-tools li { height: 24px; padding: 0 10px 0 8px; gap: 6px; font-size: 11.5px; font-weight: 500; background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .12); color: rgba(255, 255, 255, .72); }
.cs-hero .cs-tools img { width: 11px; height: 11px; filter: brightness(0) invert(1); opacity: .7; }
/* Ikonerne i originalfarver på en lille hvid rund plade, så alle står ens og ingen bliver til hvide klatter */
.cs-hero .cs-tools li { padding-left: 4px; }
.cs-hero .cs-tools img { box-sizing: content-box; width: 10px; height: 10px; padding: 3px; border-radius: 50%; background: #fff; filter: none; opacity: 1; }
/* Bomærket: gradient fra lysegrøn (venstre) til mørkegrøn (højre); inverteret (hvid → mint) på mørk baggrund */
.logo-mark { --m0: #96bdff; --m1: #35569a; --ma: color-mix(in srgb, var(--m1) 32%, var(--m0)); --mb: color-mix(in srgb, var(--m1) 68%, var(--m0)); }
.footer-logo .logo-mark { --m0: #fff; --m1: #b6d2ff; }
.logo-mark i:first-child { border: 0; background: linear-gradient(90deg, var(--m0), var(--ma)); -webkit-mask: radial-gradient(circle, transparent 3.4px, #000 3.6px); mask: radial-gradient(circle, transparent 3.4px, #000 3.6px); }
.logo-mark b { background: linear-gradient(90deg, var(--ma), var(--mb)); }
.logo-mark i:last-child, .footer-logo .logo-mark i:last-child { border: 0; background: linear-gradient(90deg, var(--mb), var(--m1)); }
.pin { letter-spacing: 0; line-height: 0; padding: 0 0 1px; box-sizing: border-box; }
/* Bomærket 5px kortere, og eyebrows får samme bomærke med gradient (lys → mørk; inverteret på mørk baggrund) */
.logo-mark b { width: 6px; }
:root { --curl: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 23 12'%3E%3Ccircle cx='4.5' cy='6' r='3' fill='none' stroke='%23000' stroke-width='1.5'/%3E%3Cpath d='M7.5 6 H14.5' stroke='%23000' stroke-width='1.5'/%3E%3Ccircle cx='18' cy='6' r='3.6' fill='%23000'/%3E%3C/svg%3E"); }
.kicker::before { width: 23px; background: linear-gradient(90deg, #96bdff, #35569a); }
.page-hero .kicker::before, .code-show .kicker::before, .next-band .kicker::before, .cs-hero .kicker::before, .pt-card .kicker::before, .pricing-page .kicker::before, .ai-offer.featured .kicker::before, .story .kicker::before, .hero .kicker::before { background: linear-gradient(90deg, #fff, #b6d2ff); }
/* Logobæltet: flex centrerer også logoer, der er højere end rækken (grid skubbede dem nedad) */
.logo-item { display: flex; align-items: center; justify-content: center; }

/* SIDEfxHUB: kontrolrummet – værdi først, så funktionerne, så beviset */
.cs-system { background: var(--tint); padding: clamp(56px, 7vw, 96px) 0; margin: clamp(24px, 3vw, 40px) 0 clamp(48px, 6vw, 80px); }
.cs-system h2 { max-width: 22ch; text-wrap: balance; }
.sys-lead { max-width: 60ch; margin-top: 16px; font-size: clamp(1.05rem, 1.4vw, 1.2rem); color: var(--text-muted); }
.sys-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: clamp(28px, 4vw, 44px); }
.sys-grid li { display: grid; align-content: start; gap: 6px; background: var(--raised); border: 1px solid var(--line); border-radius: var(--r-m); padding: 20px 22px; }
.sys-grid b { font-size: 17px; letter-spacing: -.01em; }
.sys-grid p { font-size: 15px; line-height: 1.45; }
.sys-grid small { margin-top: 6px; font-size: 13px; color: var(--accent-text); }
.sys-shot { margin-top: clamp(28px, 4vw, 44px); }
.sys-shot img { width: 100%; border-radius: var(--r-l); border: 1px solid var(--line); box-shadow: var(--shadow-m); }
.sys-shot figcaption { margin-top: 10px; font-size: 13.5px; color: var(--text-muted); }
.sys-bridge { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px; margin-top: clamp(28px, 4vw, 44px); padding: 24px 28px; background: var(--raised); border-radius: var(--r-l); }
.sys-bridge p { font-size: clamp(1.05rem, 1.6vw, 1.25rem); font-weight: var(--fw-semibold); max-width: 46ch; text-wrap: balance; }
@media (max-width: 900px) { .sys-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .sys-grid { grid-template-columns: 1fr; } .sys-bridge { padding: 20px; } }
.sys-grid small { color: var(--text-muted); }
.sys-shot img { max-width: 900px; display: block; }
@media (max-width: 560px) { .sys-grid { grid-template-columns: 1fr 1fr; gap: 10px; } .sys-grid li { padding: 14px; gap: 4px; } .sys-grid b { font-size: 15px; } .sys-grid p { font-size: 13.5px; } .sys-grid small { font-size: 12px; } }

.cs-note { margin-top: 14px; font-size: 14px; color: rgba(255,255,255,.72); }
.cs-media .cs-note { margin-top: 12px; font-size: 13px; }
.cs-head > .cs-note { margin-top: 18px; font-size: 13px; }
/* Store baggrundsbilleder: overlay ca. 8 % tættere, så tekst og tabs står tydeligere */
.cs-bg, .fv-hero .fv-bg { filter: brightness(.9); }
.fv-hero::after { background: linear-gradient(180deg, rgba(13, 24, 47, .43) 0%, rgba(13, 24, 47, .63) 45%, rgba(15, 30, 57, .93) 100%); }

/* E-mailmarketing: luftig side – hero med flow-animation, korte kort */
.em-hero-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(32px, 5vw, 72px); align-items: center; }
.em-tools { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 26px; }
.em-tools li { display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 14px 0 6px; border-radius: 99px; background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .2); color: #fff; font-size: 13.5px; font-weight: 600; }
.em-tools img { width: 22px; height: 22px; padding: 2px; border-radius: 50%; background: #fff; object-fit: contain; }
.em-card { position: relative; max-width: 420px; margin-left: auto; padding: 22px; border-radius: 24px; background: #fff; color: var(--text); box-shadow: 0 40px 80px -30px rgba(12, 24, 49, .6); }
.em-trig { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 14px; padding: 6px 12px; border-radius: 99px; background: var(--tint); font-size: 13px; font-weight: 700; color: var(--accent-text); }
.em-trig i { width: 8px; height: 8px; border-radius: 50%; background: #5d99ff; animation: em-pulse 1.6s ease-in-out infinite; }
.em-mails { display: grid; gap: 10px; position: relative; }
.em-mails::before { content: ''; position: absolute; left: 21px; top: 8px; bottom: 8px; width: 2px; background: var(--line); }
.em-mails li { position: relative; display: grid; grid-template-columns: 44px 1fr auto; gap: 12px; align-items: center; padding: 10px 12px 10px 0; opacity: 0; transform: translateY(10px); animation: em-in 9s calc(var(--d) * 1.2s + .4s) infinite; }
.em-ic { position: relative; z-index: 1; width: 44px; height: 44px; border-radius: 14px; background: linear-gradient(180deg, #5d90ee, #325293); }
.em-ic { display: grid; place-items: center; } .em-ic svg { width: 22px; height: 22px; }
.em-txt b { display: block; font-size: 15.5px; }
.em-txt small { font-size: 13px; color: var(--text-muted); }
.em-open { font-size: 12px; font-weight: 700; color: #3f66b6; background: #e8f1ff; padding: 4px 10px; border-radius: 99px; opacity: 0; animation: em-pop 9s calc(var(--d) * 1.2s + 1.1s) infinite; }
.em-sale { display: flex; justify-content: space-between; align-items: center; margin-top: 14px; padding: 14px 16px; border-radius: 16px; background: linear-gradient(160deg, #4067b5, #29447c); color: #fff; font-size: 14px; font-weight: 600; opacity: 0; transform: scale(.94); animation: em-sale 9s 4.4s infinite; }
.em-sale b { font-size: 20px; letter-spacing: -.02em; color: #d3e3ff; }
@keyframes em-in { 0% { opacity: 0; transform: translateY(10px); } 6%, 88% { opacity: 1; transform: none; } 96%, 100% { opacity: 0; transform: none; } }
@keyframes em-pop { 0% { opacity: 0; transform: scale(.7); } 5%, 82% { opacity: 1; transform: none; } 90%, 100% { opacity: 0; } }
@keyframes em-sale { 0% { opacity: 0; transform: scale(.94); } 6%, 46% { opacity: 1; transform: none; } 54%, 100% { opacity: 0; transform: scale(.98); } }
@keyframes em-pulse { 50% { box-shadow: 0 0 0 6px rgba(93, 153, 255, .2); } }
@media (prefers-reduced-motion: reduce) { .em-mails li, .em-open, .em-sale { animation: none; opacity: 1; transform: none; } }
.em-sec { padding: var(--section) 0 0; }
.em-do { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.em-do li { display: grid; gap: 6px; align-content: start; padding: 22px; border-radius: var(--r-m); background: var(--raised); border: 1px solid var(--line); }
.em-do .n { font-size: 12px; font-weight: 700; color: var(--accent-text); }
.em-do b, .em-value b { font-size: 18px; letter-spacing: -.01em; }
.em-do p, .em-value p { font-size: 15px; color: var(--text-muted); }
.em-value { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.em-value li { display: grid; gap: 6px; padding: 26px; border-radius: var(--r-l); background: var(--tint); }
.em-value b { font-size: clamp(1.3rem, 2vw, 1.6rem); color: var(--accent); }
.em-code { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(20px, 4vw, 56px); align-items: center; padding: clamp(28px, 4vw, 52px); border-radius: var(--r-l); background: linear-gradient(160deg, #4067b5, #29447c); color: #fff; }
.em-code .kicker { color: #d3e3ff; }
.em-code .kicker::before { background: linear-gradient(90deg, #fff, #a1c3ff); }
.em-code .display { color: #fff; }
.em-code .hl { color: #d3e3ff; }
.em-code p:not(.kicker) { color: rgba(255, 255, 255, .85); font-size: 17px; margin-bottom: 14px; }
.em-code .link-arrow { color: #fff; }
@media (max-width: 900px) { .em-hero-grid, .em-code { grid-template-columns: 1fr; } .em-card { margin: 0; } .em-do { grid-template-columns: 1fr 1fr; } .em-value { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .em-do li { padding: 16px; } }
.mega-intro .link-arrow { display: block; width: fit-content; margin-top: 10px; }
/* Pris-badge: ét rent, fladt mærke med én kant */
.pricing-page .t2.featured .badge, .t2.featured .badge { background: #35569a; color: #fff; border: 1px solid #35569a; box-shadow: 0 6px 14px -8px rgba(0, 0, 0, .3); }
/* Mobilmenu: start under headeren og scroll, hvis skærmen er lav (ellers glider "Ydelser" ind under logoet) */
@media (max-width: 900px) { .nav { justify-content: flex-start !important; padding-top: 110px !important; padding-bottom: 32px !important; overflow-y: auto; } }
/* Sticky CTA følger skærmens runding i bunden (iPhone): helt ned i safe area */
@media (max-width: 900px) { .sticky-cta { left: 12px; right: 12px; bottom: max(14px, env(safe-area-inset-bottom)); } }

.em-checks { display: grid; gap: 10px; margin: 22px 0 28px; }
.em-checks li { color: rgba(255, 255, 255, .9); font-size: 17px; font-weight: 500; }
.em-checks li::before { border-color: rgba(255, 255, 255, .45); }
.em-checks li::after { border-color: #d3e3ff; }

/* E-mail: proces med ikoner og en forbindende linje + værdi i kobolt-bånd */
.em-do { position: relative; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.em-do::before { content: ''; position: absolute; top: 36px; left: 12%; right: 12%; height: 2px; background: linear-gradient(90deg, #a1c3ff, #35569a); }
.em-do li { position: relative; justify-items: center; text-align: center; background: none; border: 0; padding: 0 8px; }
.em-step { position: relative; display: grid; place-items: center; width: 72px; height: 72px; margin-bottom: 14px; border-radius: 50%; background: #fff; border: 1px solid #a1c3ff; color: #35569a; box-shadow: 0 14px 30px -16px rgba(53, 86, 154, .55); }
.em-step svg { width: 28px; height: 28px; }
.em-step i { position: absolute; top: -4px; right: -4px; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: #35569a; color: #fff; font: 700 11px var(--font); font-style: normal; }
.em-do b { font-size: 19px; }
.em-band { padding: clamp(32px, 5vw, 64px); border-radius: var(--r-l); background: radial-gradient(80% 120% at 100% 0%, rgb(135 178 255 / .35), transparent 60%), linear-gradient(160deg, #4067b5, #29447c); color: #fff; }
.em-band .kicker { color: #d3e3ff; }
.em-band .kicker::before { background: linear-gradient(90deg, #fff, #a1c3ff); }
.em-band .display { color: #fff; }
.em-band .hl { color: #d3e3ff; }
.em-band .em-value li { background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .18); }
.em-band .em-value b { color: #fff; font-size: clamp(1.4rem, 2.2vw, 1.8rem); }
.em-band .em-value p { color: rgba(255, 255, 255, .8); }
.em-vi { display: grid; place-items: center; width: 52px; height: 52px; margin-bottom: 10px; border-radius: 16px; background: #fff; color: #35569a; }
.em-vi svg { width: 26px; height: 26px; }
@media (max-width: 900px) { .em-do { grid-template-columns: 1fr 1fr; row-gap: 32px; } .em-do::before { display: none; } }

/* E-mail: sparring med Stine */
.em-stine { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(24px, 4vw, 56px); align-items: center; padding: clamp(14px, 1.6vw, 18px); padding-right: clamp(24px, 4vw, 56px); border-radius: var(--r-l); background: var(--tint); }
.em-stine figure { aspect-ratio: 4 / 5; border-radius: var(--r-m); overflow: hidden; }
.em-stine img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 25%; }
.em-stine-body { margin: 12px 0 22px; font-size: 17px; color: var(--text-muted); max-width: 46ch; }
.em-stine .actions { display: flex; flex-wrap: wrap; gap: 10px; }
.em-stine-name { margin-top: 16px; font-size: 14px; color: var(--text-muted); }
.em-stine-name b { color: var(--text); }
@media (max-width: 760px) { .em-stine { grid-template-columns: 1fr; padding-right: clamp(14px, 1.6vw, 18px); padding-bottom: 24px; } .em-stine figure { aspect-ratio: 4 / 3; } .em-stine .btn { width: 100%; justify-content: center; } }
/* E-mail-animation: én fælles cyklus på 9 s, så alt starter og slutter samtidig (intet skævt loop) */
.em-mails li { animation: none; }
.em-mails li:nth-child(1) { animation: em-m0 9s infinite; }
.em-mails li:nth-child(2) { animation: em-m1 9s infinite; }
.em-mails li:nth-child(3) { animation: em-m2 9s infinite; }
.em-mails li:nth-child(1) .em-open { animation: em-o0 9s infinite; }
.em-mails li:nth-child(2) .em-open { animation: em-o1 9s infinite; }
.em-mails li:nth-child(3) .em-open { animation: em-o2 9s infinite; }
.em-sale { animation: em-s 9s infinite; }
@keyframes em-m0 { 0%, 4% { opacity: 0; transform: translateY(10px); } 9%, 88% { opacity: 1; transform: none; } 95%, 100% { opacity: 0; transform: none; } }
@keyframes em-m1 { 0%, 17% { opacity: 0; transform: translateY(10px); } 22%, 88% { opacity: 1; transform: none; } 95%, 100% { opacity: 0; transform: none; } }
@keyframes em-m2 { 0%, 30% { opacity: 0; transform: translateY(10px); } 35%, 88% { opacity: 1; transform: none; } 95%, 100% { opacity: 0; transform: none; } }
@keyframes em-o0 { 0%, 12% { opacity: 0; transform: scale(.7); } 15%, 88% { opacity: 1; transform: none; } 95%, 100% { opacity: 0; } }
@keyframes em-o1 { 0%, 25% { opacity: 0; transform: scale(.7); } 28%, 88% { opacity: 1; transform: none; } 95%, 100% { opacity: 0; } }
@keyframes em-o2 { 0%, 38% { opacity: 0; transform: scale(.7); } 41%, 88% { opacity: 1; transform: none; } 95%, 100% { opacity: 0; } }
@keyframes em-s { 0%, 48% { opacity: 0; transform: scale(.94); } 53%, 88% { opacity: 1; transform: none; } 95%, 100% { opacity: 0; transform: scale(.98); } }
@media (prefers-reduced-motion: reduce) { .em-mails li, .em-mails li .em-open, .em-sale { animation: none !important; opacity: 1; transform: none; } }

/* AI-rådgivning: opgaver, der én efter én klares af AI, og en tæller for sparet tid (én fælles cyklus på 10 s) */
.ai-tasks { display: grid; gap: 8px; }
.ai-tasks li { display: grid; grid-template-columns: 22px 1fr auto; gap: 12px; align-items: center; padding: 11px 14px; border-radius: 14px; background: #f4f6f5; border: 1px solid var(--line); }
.ai-box { position: relative; width: 22px; height: 22px; border-radius: 7px; border: 1.5px solid #bbc4d3; background: #fff; }
.ai-box::after { content: ''; position: absolute; left: 7px; top: 3px; width: 5px; height: 10px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.ai-name { font-size: 15px; font-weight: 600; }
.ai-tag { font-size: 11.5px; font-weight: 700; color: #3f66b6; background: #e8f1ff; padding: 4px 9px; border-radius: 99px; opacity: 0; }
.ai-saved { display: flex; justify-content: space-between; align-items: baseline; margin-top: 14px; padding: 14px 16px; border-radius: 16px; background: linear-gradient(160deg, #4067b5, #29447c); color: #fff; font-size: 14px; font-weight: 600; }
.ai-saved b { font-size: 15px; color: #d3e3ff; }
.ai-num { font-style: normal; font-size: 26px; font-weight: 800; letter-spacing: -.02em; color: #fff; }
@property --h { syntax: '<integer>'; inherits: false; initial-value: 0; }
.ai-num { --h: 0; counter-reset: h var(--h); animation: ai-count 10s infinite; }
.ai-num::after { content: '+' counter(h); }
@keyframes ai-count { 0%, 8% { --h: 0; } 18% { --h: 2; } 32% { --h: 4; } 46% { --h: 5; } 60% { --h: 7; } 72%, 90% { --h: 8; } 96%, 100% { --h: 0; } }
.ai-tasks li:nth-child(1) { animation: ai-r0 10s infinite; }
.ai-tasks li:nth-child(1) .ai-box { animation: ai-b0 10s infinite; }
.ai-tasks li:nth-child(1) .ai-tag { animation: ai-t0 10s infinite; }
.ai-tasks li:nth-child(1) .ai-name { animation: ai-n0 10s infinite; }
@keyframes ai-r0 { 0%, 8% { background: #f4f6f5; border-color: var(--line); } 11%, 90% { background: #f1f7ff; border-color: #a1c3ff; } 96%, 100% { background: #f4f6f5; border-color: var(--line); } }
@keyframes ai-b0 { 0%, 8% { background: #fff; border-color: #bbc4d3; } 11%, 90% { background: #35569a; border-color: #35569a; } 96%, 100% { background: #fff; border-color: #bbc4d3; } }
@keyframes ai-t0 { 0%, 9% { opacity: 0; transform: translateX(6px); } 12%, 90% { opacity: 1; transform: none; } 96%, 100% { opacity: 0; } }
@keyframes ai-n0 { 0%, 8% { color: var(--text); } 11%, 90% { color: #6e798c; } 96%, 100% { color: var(--text); } }
.ai-tasks li:nth-child(2) { animation: ai-r1 10s infinite; }
.ai-tasks li:nth-child(2) .ai-box { animation: ai-b1 10s infinite; }
.ai-tasks li:nth-child(2) .ai-tag { animation: ai-t1 10s infinite; }
.ai-tasks li:nth-child(2) .ai-name { animation: ai-n1 10s infinite; }
@keyframes ai-r1 { 0%, 21% { background: #f4f6f5; border-color: var(--line); } 24%, 90% { background: #f1f7ff; border-color: #a1c3ff; } 96%, 100% { background: #f4f6f5; border-color: var(--line); } }
@keyframes ai-b1 { 0%, 21% { background: #fff; border-color: #bbc4d3; } 24%, 90% { background: #35569a; border-color: #35569a; } 96%, 100% { background: #fff; border-color: #bbc4d3; } }
@keyframes ai-t1 { 0%, 22% { opacity: 0; transform: translateX(6px); } 25%, 90% { opacity: 1; transform: none; } 96%, 100% { opacity: 0; } }
@keyframes ai-n1 { 0%, 21% { color: var(--text); } 24%, 90% { color: #6e798c; } 96%, 100% { color: var(--text); } }
.ai-tasks li:nth-child(3) { animation: ai-r2 10s infinite; }
.ai-tasks li:nth-child(3) .ai-box { animation: ai-b2 10s infinite; }
.ai-tasks li:nth-child(3) .ai-tag { animation: ai-t2 10s infinite; }
.ai-tasks li:nth-child(3) .ai-name { animation: ai-n2 10s infinite; }
@keyframes ai-r2 { 0%, 34% { background: #f4f6f5; border-color: var(--line); } 37%, 90% { background: #f1f7ff; border-color: #a1c3ff; } 96%, 100% { background: #f4f6f5; border-color: var(--line); } }
@keyframes ai-b2 { 0%, 34% { background: #fff; border-color: #bbc4d3; } 37%, 90% { background: #35569a; border-color: #35569a; } 96%, 100% { background: #fff; border-color: #bbc4d3; } }
@keyframes ai-t2 { 0%, 35% { opacity: 0; transform: translateX(6px); } 38%, 90% { opacity: 1; transform: none; } 96%, 100% { opacity: 0; } }
@keyframes ai-n2 { 0%, 34% { color: var(--text); } 37%, 90% { color: #6e798c; } 96%, 100% { color: var(--text); } }
.ai-tasks li:nth-child(4) { animation: ai-r3 10s infinite; }
.ai-tasks li:nth-child(4) .ai-box { animation: ai-b3 10s infinite; }
.ai-tasks li:nth-child(4) .ai-tag { animation: ai-t3 10s infinite; }
.ai-tasks li:nth-child(4) .ai-name { animation: ai-n3 10s infinite; }
@keyframes ai-r3 { 0%, 47% { background: #f4f6f5; border-color: var(--line); } 50%, 90% { background: #f1f7ff; border-color: #a1c3ff; } 96%, 100% { background: #f4f6f5; border-color: var(--line); } }
@keyframes ai-b3 { 0%, 47% { background: #fff; border-color: #bbc4d3; } 50%, 90% { background: #35569a; border-color: #35569a; } 96%, 100% { background: #fff; border-color: #bbc4d3; } }
@keyframes ai-t3 { 0%, 48% { opacity: 0; transform: translateX(6px); } 51%, 90% { opacity: 1; transform: none; } 96%, 100% { opacity: 0; } }
@keyframes ai-n3 { 0%, 47% { color: var(--text); } 50%, 90% { color: #6e798c; } 96%, 100% { color: var(--text); } }
.ai-tasks li:nth-child(5) { animation: ai-r4 10s infinite; }
.ai-tasks li:nth-child(5) .ai-box { animation: ai-b4 10s infinite; }
.ai-tasks li:nth-child(5) .ai-tag { animation: ai-t4 10s infinite; }
.ai-tasks li:nth-child(5) .ai-name { animation: ai-n4 10s infinite; }
@keyframes ai-r4 { 0%, 60% { background: #f4f6f5; border-color: var(--line); } 63%, 90% { background: #f1f7ff; border-color: #a1c3ff; } 96%, 100% { background: #f4f6f5; border-color: var(--line); } }
@keyframes ai-b4 { 0%, 60% { background: #fff; border-color: #bbc4d3; } 63%, 90% { background: #35569a; border-color: #35569a; } 96%, 100% { background: #fff; border-color: #bbc4d3; } }
@keyframes ai-t4 { 0%, 61% { opacity: 0; transform: translateX(6px); } 64%, 90% { opacity: 1; transform: none; } 96%, 100% { opacity: 0; } }
@keyframes ai-n4 { 0%, 60% { color: var(--text); } 63%, 90% { color: #6e798c; } 96%, 100% { color: var(--text); } }
@media (prefers-reduced-motion: reduce) { .ai-tasks li, .ai-tasks li *, .ai-num { animation: none !important; } .ai-tag { opacity: 1; } .ai-num { --h: 8; } }
.ai3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; align-items: stretch; }
.ai3 li { position: relative; display: flex; flex-direction: column; gap: 6px; padding: 26px; border-radius: var(--r-l); background: var(--raised); border: 1px solid var(--line); }
.ai3 small { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--accent-text); }
.ai3 b { font-size: clamp(1.3rem, 2vw, 1.55rem); letter-spacing: -.02em; }
.ai3 p { font-size: 15.5px; color: var(--text-muted); margin-bottom: 18px; }
.ai3 .btn { margin-top: auto; align-self: flex-start; }
.ai3 li.featured { background: linear-gradient(160deg, #4067b5, #29447c); border-color: #35569a; color: #fff; }
.ai3 li.featured small { color: #d3e3ff; }
.ai3 li.featured p { color: rgba(255, 255, 255, .85); }
.ai3 li.featured .btn { background: #fff; color: #2d4d8a; border: 1px solid #fff; }
.ai3-badge { position: absolute; top: -12px; right: 20px; padding: 5px 12px; border-radius: 99px; background: #fff; color: #2d4d8a; border: 1px solid #a1c3ff; font-size: 12px; font-weight: 700; }
@media (max-width: 900px) { .ai3 { grid-template-columns: 1fr; } }

/* E-mail: to spor – kampagner + automation */
.em-tracks { display: grid; grid-template-columns: 1fr auto 1fr; gap: 18px; align-items: stretch; }
.em-tracks article { display: flex; flex-direction: column; gap: 8px; padding: clamp(24px, 3vw, 36px); border-radius: var(--r-l); background: var(--raised); border: 1px solid var(--line); box-shadow: 0 20px 40px -30px rgba(53, 86, 154, .4); }
.em-tracks article.auto { background: linear-gradient(160deg, #4067b5, #29447c); color: #fff; border-color: #35569a; }
.em-tracks .em-vi { background: var(--tint); color: #35569a; }
.em-tracks small { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--accent-text); }
.em-tracks .auto small { color: #d3e3ff; }
.em-tracks h3 { font-size: clamp(1.35rem, 2.2vw, 1.7rem); letter-spacing: -.02em; }
.em-tracks p { font-size: 16px; color: var(--text-muted); margin-bottom: 6px; }
.em-tracks .auto p, .em-tracks .auto .checks li { color: rgba(255, 255, 255, .88); }
.em-tracks .checks { display: grid; gap: 8px; }
.em-tracks .auto .checks li::before { border-color: rgba(255, 255, 255, .45); }
.em-tracks .auto .checks li::after { border-color: #d3e3ff; }
.em-plus { align-self: center; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: #fff; border: 1px solid #a1c3ff; color: #35569a; font-size: 22px; font-weight: 700; }
@media (max-width: 900px) { .em-tracks { grid-template-columns: 1fr; } .em-plus { justify-self: center; } }

/* Værdikort: kompakte på mobil – ikon til venstre, tekst til højre */
@media (max-width: 900px) {
  .em-band .em-value li { grid-template-columns: 48px 1fr; column-gap: 14px; row-gap: 2px; padding: 18px; align-items: start; }
  .em-band .em-vi { grid-row: span 2; width: 48px; height: 48px; margin: 0; border-radius: 14px; }
  .em-band .em-value b { font-size: 19px; line-height: 1.25; }
  .em-band .em-value p { font-size: 15px; }
}

/* AI & automatisering: tre tydelige ydelser, hverdagseksempler */
.ai-spar { display: inline-block; margin-top: 16px; color: #d3e3ff; font-size: 15px; font-weight: 600; text-decoration: none; }
.ai-spar:hover { color: #fff; }
.ai-svc { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; align-items: stretch; }
.ai-svc li { position: relative; display: flex; flex-direction: column; padding: clamp(22px, 2.6vw, 30px); border-radius: var(--r-l); background: var(--raised); border: 1px solid var(--line); }
.ai-svc li.featured { background: linear-gradient(160deg, #4067b5, #29447c); border-color: #35569a; color: #fff; }
.ai-step { display: flex; align-items: center; gap: 10px; font-size: 12.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--accent-text); }
.ai-step span { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--tint); color: #35569a; font-size: 12px; letter-spacing: 0; }
.featured .ai-step { color: #d3e3ff; }
.featured .ai-step span { background: #fff; }
.ai-svc h3 { margin: 12px 0 16px; font-size: clamp(1.4rem, 2.2vw, 1.75rem); letter-spacing: -.02em; }
.ai-svc dl { display: grid; gap: 14px; margin-bottom: 22px; }
.ai-svc dt { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted); }
.ai-svc dd { margin: 3px 0 0; font-size: 15.5px; line-height: 1.45; }
.ai-svc .v dd { font-weight: 700; color: var(--accent); }
.featured dt { color: rgba(255, 255, 255, .65); }
.featured dd { color: rgba(255, 255, 255, .92); }
.featured .v dd { color: #d3e3ff; }
.ai-svc .btn { margin-top: auto; align-self: flex-start; }
.ai-svc li.featured .btn { background: #fff; color: #2d4d8a; border: 1px solid #fff; }
.ai-ex { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.ai-ex li { display: grid; gap: 10px; align-content: start; padding: 20px; border-radius: var(--r-m); background: var(--raised); border: 1px solid var(--line); }
.ai-ex b { font-size: 17px; }
.ai-ex p { position: relative; padding: 10px 12px; border-radius: 12px; font-size: 14.5px; line-height: 1.4; }
.ai-ex small { display: block; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; margin-bottom: 2px; }
.ai-ex .b4 { background: #f2f3f2; color: var(--text-muted); }
.ai-ex .now { background: #e8f1ff; color: #274277; font-weight: 600; }
.ai-ex .now small { color: #3f66b6; }
.ai-code { margin-top: 22px; font-size: 15.5px; color: var(--text-muted); }
@media (max-width: 1000px) { .ai-ex { grid-template-columns: 1fr 1fr; } }
@media (max-width: 900px) { .ai-svc { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .ai-ex { grid-template-columns: 1fr; } }

/* AI & automatisering: inspirationsloop – fem ting, man kan bygge, 1 s hver (5 s cyklus) */
.sh-card { position: relative; max-width: 440px; margin-left: auto; padding: 20px; border-radius: 24px; background: #fff; box-shadow: 0 40px 80px -30px rgba(12, 24, 49, .6); }
.sh-stage { position: relative; height: 290px; margin-top: 12px; }
.sh-slide { position: absolute; inset: 0; display: flex; flex-direction: column; gap: 12px; opacity: 0; transform: translateY(8px) scale(.98); animation: sh-cycle 5s calc(var(--i) * 1s) infinite; }
@keyframes sh-cycle { 0% { opacity: 0; transform: translateY(8px) scale(.98); } 4%, 18% { opacity: 1; transform: none; } 22%, 100% { opacity: 0; transform: translateY(-6px) scale(.99); } }
.sh-name { font-size: 26px; font-weight: 800; letter-spacing: -.03em; color: var(--text); }
.sh-slide > div { flex: 1; border-radius: 16px; background: #f3f5f9; border: 1px solid var(--line); padding: 14px; display: flex; flex-direction: column; gap: 10px; overflow: hidden; }
.sh-dots { display: flex; gap: 6px; justify-content: center; margin-top: 14px; }
.sh-dots i { width: 22px; height: 4px; border-radius: 4px; background: #e0e5ee; animation: sh-dot 5s calc(var(--i) * 1s) infinite; }
@keyframes sh-dot { 0%, 20% { background: #35569a; } 22%, 100% { background: #e0e5ee; } }
/* mini-mockups */
.sh-web .bar { display: flex; align-items: center; gap: 5px; } .sh-web .bar i { width: 8px; height: 8px; border-radius: 50%; background: #cad2de; } .sh-web .bar em { flex: 1; height: 12px; margin-left: 8px; border-radius: 6px; background: #fff; }
.sh-web .hero { display: grid; gap: 8px; align-content: center; flex: 1; padding: 16px; border-radius: 12px; background: linear-gradient(160deg, #4067b5, #29447c); }
.sh-web .hero b { height: 14px; width: 75%; border-radius: 6px; background: #fff; } .sh-web .hero b.s { width: 50%; background: #d3e3ff; } .sh-web .hero u { width: 70px; height: 20px; border-radius: 99px; background: #fff; margin-top: 4px; }
.sh-web .row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; } .sh-web .row i { height: 40px; border-radius: 10px; background: #fff; border: 1px solid var(--line); }
.sh-tool { flex-direction: row !important; } .sh-tool .side { display: grid; gap: 8px; align-content: start; width: 54px; padding: 8px; border-radius: 10px; background: #29447c; } .sh-tool .side i { height: 8px; border-radius: 4px; background: rgba(255,255,255,.4); }
.sh-tool .main { flex: 1; display: flex; flex-direction: column; gap: 10px; } .sh-tool .kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; } .sh-tool .kpis i { height: 44px; border-radius: 10px; background: #fff; border: 1px solid var(--line); }
.sh-tool .chart { flex: 1; display: flex; align-items: flex-end; gap: 8px; padding: 10px; border-radius: 10px; background: #fff; border: 1px solid var(--line); } .sh-tool .chart i { flex: 1; height: var(--bh); border-radius: 4px 4px 0 0; background: linear-gradient(180deg, #5d90ee, #325293); }
.sh-mail { background: #fff !important; } .sh-mail .top { height: 70px; border-radius: 10px; background: linear-gradient(160deg, #4067b5, #29447c); } .sh-mail b { height: 14px; width: 70%; border-radius: 6px; background: #1f2838; } .sh-mail i { height: 8px; border-radius: 4px; background: #d7dde7; } .sh-mail i.s { width: 60%; } .sh-mail u { width: 110px; height: 26px; border-radius: 99px; background: #35569a; margin-top: 4px; }
.sh-flow { justify-content: center; align-items: center; gap: 0 !important; } .sh-flow .n { display: grid; place-items: center; width: 58px; height: 40px; border-radius: 12px; background: #fff; border: 1px solid #a1c3ff; } .sh-flow .n i { width: 18px; height: 18px; border-radius: 6px; background: #35569a; } .sh-flow .n.ok { background: #35569a; } .sh-flow .n.ok i { background: #d3e3ff; border-radius: 50%; }
.sh-flow em { width: 2px; height: 16px; background: linear-gradient(180deg, #a1c3ff, #35569a); }
.sh-shop { display: grid !important; grid-template-columns: 1fr 1fr; position: relative; } .sh-shop .p { display: grid; gap: 6px; padding: 8px; border-radius: 12px; background: #fff; border: 1px solid var(--line); } .sh-shop .p i { height: 70px; border-radius: 8px; background: linear-gradient(160deg, #e3edff, #c3d9ff); } .sh-shop .p b { width: 50%; height: 9px; border-radius: 4px; background: #1f2838; }
.sh-shop em { position: absolute; top: 6px; right: 6px; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: #35569a; color: #fff; font: 700 12px var(--font); font-style: normal; }
@media (prefers-reduced-motion: reduce) { .sh-slide, .sh-dots i { animation: none; } .sh-slide:first-child { opacity: 1; transform: none; } }
@media (max-width: 900px) { .sh-card { margin: 0 auto; } .sh-stage { height: 250px; } }
.em-stine figure img { display: block; }
.sh-tool .chart { height: 150px; flex: none; margin-top: auto; } .sh-tool .chart i { height: var(--bh); min-height: 8px; }
/* Inspirationsloop v2: 1,5 s pr. visning (7,5 s cyklus), blødt skift med blur og små animationer inde i hver mockup */
.sh-slide { animation: sh-cycle2 7.5s calc(var(--i) * 1.5s) infinite; }
.sh-dots i { animation: sh-dot2 7.5s calc(var(--i) * 1.5s) infinite; }
@keyframes sh-cycle2 { 0% { opacity: 0; transform: translateY(14px) scale(.96); filter: blur(6px); } 4%, 17% { opacity: 1; transform: none; filter: none; } 20.5%, 100% { opacity: 0; transform: translateY(-10px) scale(.98); filter: blur(4px); } }
@keyframes sh-dot2 { 0%, 19% { background: #35569a; width: 34px; } 21%, 100% { background: #e0e5ee; width: 22px; } }
.sh-dots i { transition: width .3s; }
.sh-slide * { animation-delay: calc(var(--i) * 1.5s); animation-duration: 7.5s; animation-iteration-count: infinite; animation-timing-function: cubic-bezier(.2, .8, .2, 1); }
/* website: hero glider ind, linjer tegnes */
.sh-web .hero { animation-name: sh-rise; }
.sh-web .hero b, .sh-web .hero u { transform-origin: left; animation-name: sh-grow; }
.sh-web .row i { animation-name: sh-pop; }
.sh-web .row i:nth-child(2) { animation-delay: calc(var(--i) * 1.5s + .08s); } .sh-web .row i:nth-child(3) { animation-delay: calc(var(--i) * 1.5s + .16s); }
/* værktøj: KPI'er popper, søjler vokser */
.sh-tool .kpis i { animation-name: sh-pop; }
.sh-tool .chart { height: auto; flex: 1; min-height: 0; overflow: hidden; }
.sh-tool .chart i { transform-origin: bottom; animation-name: sh-bar; max-height: 100%; }
.sh-tool .chart i:nth-child(2) { animation-delay: calc(var(--i) * 1.5s + .05s); } .sh-tool .chart i:nth-child(3) { animation-delay: calc(var(--i) * 1.5s + .1s); } .sh-tool .chart i:nth-child(4) { animation-delay: calc(var(--i) * 1.5s + .15s); } .sh-tool .chart i:nth-child(5) { animation-delay: calc(var(--i) * 1.5s + .2s); } .sh-tool .chart i:nth-child(6) { animation-delay: calc(var(--i) * 1.5s + .25s); }
/* e-mail: banner, tekst skrives, knap pulserer */
.sh-mail .top { animation-name: sh-rise; } .sh-mail b, .sh-mail i { transform-origin: left; animation-name: sh-grow; } .sh-mail u { animation-name: sh-pulse; }
/* automation: noderne tænder én efter én */
.sh-flow .n { animation-name: sh-node; } .sh-flow em { transform-origin: top; animation-name: sh-line; }
.sh-flow > :nth-child(2) { animation-delay: calc(var(--i) * 1.5s + .1s); } .sh-flow > :nth-child(3) { animation-delay: calc(var(--i) * 1.5s + .2s); } .sh-flow > :nth-child(4) { animation-delay: calc(var(--i) * 1.5s + .3s); } .sh-flow > :nth-child(5) { animation-delay: calc(var(--i) * 1.5s + .4s); } .sh-flow > :nth-child(6) { animation-delay: calc(var(--i) * 1.5s + .5s); } .sh-flow > :nth-child(7) { animation-delay: calc(var(--i) * 1.5s + .6s); }
/* webshop: produkter popper, kurven hopper */
.sh-shop .p { animation-name: sh-pop; } .sh-shop .p:nth-child(2) { animation-delay: calc(var(--i) * 1.5s + .07s); } .sh-shop .p:nth-child(3) { animation-delay: calc(var(--i) * 1.5s + .14s); } .sh-shop .p:nth-child(4) { animation-delay: calc(var(--i) * 1.5s + .21s); }
.sh-shop em { animation-name: sh-bounce; }
.sh-name { animation-name: sh-type; }
@keyframes sh-rise { 0%, 2% { opacity: 0; transform: translateY(12px); } 8%, 100% { opacity: 1; transform: none; } }
@keyframes sh-grow { 0%, 4% { transform: scaleX(0); } 11%, 100% { transform: scaleX(1); } }
@keyframes sh-pop { 0%, 3% { opacity: 0; transform: scale(.8); } 9%, 100% { opacity: 1; transform: none; } }
@keyframes sh-bar { 0%, 3% { transform: scaleY(0); } 12%, 100% { transform: scaleY(1); } }
@keyframes sh-pulse { 0%, 9% { box-shadow: 0 0 0 0 rgba(53, 86, 154, .45); } 16% { box-shadow: 0 0 0 10px rgba(53, 86, 154, 0); } 100% { box-shadow: none; } }
@keyframes sh-node { 0%, 3% { opacity: .25; transform: scale(.85); } 7%, 100% { opacity: 1; transform: none; } }
@keyframes sh-line { 0%, 3% { transform: scaleY(0); } 7%, 100% { transform: scaleY(1); } }
@keyframes sh-bounce { 0%, 10% { transform: scale(0); } 13% { transform: scale(1.3); } 15%, 100% { transform: scale(1); } }
@keyframes sh-type { 0%, 1% { opacity: 0; transform: translateX(-8px); } 6%, 100% { opacity: 1; transform: none; } }
@media (max-width: 900px) { .sh-stage { height: 290px; } }
@media (prefers-reduced-motion: reduce) { .sh-slide, .sh-slide *, .sh-dots i { animation: none !important; } .sh-slide:first-child { opacity: 1; transform: none; filter: none; } }

/* Ydelseskort: færre etiketter, én tydelig værdi-linje */
.ai-svc h3 { margin: 12px 0 4px; }
.ai-for { font-size: 15px; color: var(--text-muted); margin-bottom: 14px; }
.ai-get { font-size: 16px; line-height: 1.45; margin-bottom: 16px; }
.ai-val { position: relative; padding: 12px 14px 12px 40px; border-radius: 12px; background: #e8f1ff; color: #274277; font-size: 15px; font-weight: 700; line-height: 1.4; margin-bottom: 20px; }
.ai-val::before { content: '✓'; position: absolute; left: 14px; top: 11px; color: #3f66b6; }
.featured .ai-for { color: rgba(255, 255, 255, .7); }
.featured .ai-get { color: #fff; }
.featured .ai-val { background: rgba(255, 255, 255, .12); color: #fff; }
.featured .ai-val::before { color: #d3e3ff; }
/* Én enkelt stående film på en case: smal og centreret i stedet for fuld bredde */
.films.many:has(> :only-child) { display: block; max-width: 360px; }
.films.many:has(> :only-child) .vtile, .films.many:has(> :only-child) video { aspect-ratio: 9 / 16; width: 100%; height: auto; object-fit: cover; }

/* Capio: Mortens rolle og ansvar i persona-kortet */
.persona-role { padding: clamp(8px, 2vw, 24px) 0; }
.persona-role .display { font-size: clamp(1.5rem, 2.6vw, 2.1rem); margin: 6px 0 18px; text-wrap: balance; }
.persona-role .checks { display: grid; gap: 10px; }
.persona-role .checks li { font-size: 16px; }
.persona-close { margin-top: 20px; font-size: 16px; font-weight: 600; color: var(--text); }
.persona-close .link-arrow { margin-left: 6px; color: var(--accent); }
.persona:has(.persona-role) img { aspect-ratio: 4 / 5; }
@media (max-width: 900px) { .persona:has(.persona-role) img { aspect-ratio: 4 / 3; object-position: 50% 20%; } }
@media (min-width: 761px) { .yt-pair:has(> :nth-child(3):last-child) { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 761px) { .yt-pair:has(> :nth-child(5)) { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .yt-pair:has(> :nth-child(7)) { grid-template-columns: repeat(4, minmax(0, 1fr)); } .yt-pair:has(> :nth-child(7)) figcaption { font-size: 13.5px; } }
@media (min-width: 1000px) { .yt-pair:has(> :nth-child(9):last-child) { grid-template-columns: repeat(3, minmax(0, 1fr)); } .yt-pair:has(> :nth-child(9):last-child) figcaption { font-size: inherit; } }
/* Play-ikoner: små og diskrete i hjørnet, så man kan se, hvad filmen viser */
.yt button, .gallery .yt button { place-items: end start; padding: 14px; background: linear-gradient(transparent 62%, rgba(0, 0, 0, .28)); }
.yt button span, .gallery .yt button span { width: 40px; height: 40px; background: rgba(255, 255, 255, .94); box-shadow: 0 6px 16px -6px rgba(0, 0, 0, .45); }
.yt button span::after, .gallery .yt button span::after { left: 16px; top: 13px; border-width: 7px 0 7px 11px; }
.yt button:hover span, .gallery .yt button:hover span { transform: scale(1.1); }

/* Privatlivspolitik */
.pv { display: grid; gap: 0; }
.pv-row { max-width: 920px; }
.pv-row { display: grid; grid-template-columns: 220px 1fr; gap: 24px; padding: 22px 0; border-top: 1px solid var(--line); }
.pv-row h2 { font-size: 17px; letter-spacing: -.01em; }
.pv-row p { font-size: 16px; line-height: 1.6; color: var(--text-muted); }
@media (max-width: 700px) { .pv-row { grid-template-columns: 1fr; gap: 6px; } }
.em-sec:last-child .pv { padding-bottom: var(--section); }
/* Klinikker: erfaring fra sundhed og regler */
.cl-proof { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.cl-proof a { display: grid; gap: 6px; height: 100%; padding: 12px 12px 18px; border-radius: var(--r-l); background: var(--raised); border: 1px solid var(--line); color: var(--text); text-decoration: none; transition: box-shadow .4s var(--ease); }
.cl-proof a:hover { box-shadow: var(--shadow-m); }
.cl-proof figure { aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--r-m); margin-bottom: 8px; }
.cl-proof img { width: 100%; height: 100%; object-fit: cover; }
.cl-proof b, .cl-proof p, .cl-proof .link-arrow { padding: 0 6px; }
.cl-proof b { font-size: 18px; }
.cl-proof p { font-size: 15px; color: var(--text-muted); }
.cl-proof .link-arrow { margin-top: 6px; color: var(--accent); }
.cl-rules { margin-top: clamp(28px, 4vw, 44px); padding: 22px 26px; border-radius: var(--r-l); background: var(--tint); border-left: 4px solid #35569a; }
.cl-rules b { font-size: 18px; }
.cl-rules p { margin-top: 4px; font-size: 16px; color: var(--text-muted); }
@media (max-width: 900px) { .cl-proof { grid-template-columns: 1fr; } }

/* Cases fra fastansættelser: tydelig markering i toppen */
.cs-badge { display: flex; width: fit-content; max-width: 100%; margin: 16px 0 14px; padding: 7px 14px; border: 1px solid rgba(255,255,255,.55); border-radius: 999px; background: rgba(255,255,255,.1); color: #fff; font-size: 13px; font-weight: 600; letter-spacing: .01em; }


/* ===================== mortenskov.dk: online CV ===================== */

/* Forsidens top: portræt i stedet for slider */
.hero-cv .hero-kicker { color: #dbe7ff; margin-bottom: var(--sp-3); }
.hero-cv .hero-grid { grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); }
.hero-portrait { position: relative; justify-self: end; width: min(100%, 420px); aspect-ratio: 4 / 5; border-radius: var(--r-l); overflow: hidden; box-shadow: 0 40px 80px -40px rgba(4, 16, 40, .7); }
.hero-portrait img, .contact-portrait img, .about-portrait img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 28%; }
.hero-portrait figcaption, .contact-portrait figcaption { position: absolute; left: 16px; right: 16px; bottom: 16px; display: grid; gap: 2px; padding: 12px 16px; border-radius: 14px; background: rgba(255, 255, 255, .95); color: var(--text); box-shadow: var(--shadow-s); }
.hero-portrait figcaption b, .contact-portrait figcaption b { font-size: 17px; font-weight: 700; letter-spacing: -.01em; }
.hero-portrait figcaption span, .contact-portrait figcaption span { font-size: 13px; font-weight: var(--fw-semibold); color: var(--accent-text); }
@media (max-width: 900px) {
  .hero-cv .hero-grid { grid-template-columns: 1fr; }
  .hero-portrait { justify-self: start; width: min(100%, 340px); }
}

/* Profil på forsiden: tekst og billede i balance, arbejdsprincipper i en række nedenunder */
.profile-home { padding: var(--section) 0 0; }
.profile-grid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(32px, 6vw, 88px); align-items: center; }
.profile-img { width: 100%; max-width: 420px; aspect-ratio: 1; justify-self: center; border-radius: 50%; overflow: hidden; }
.profile-img img { width: 100%; height: 100%; object-fit: cover; }
.profile-grid .body-l { margin-top: var(--sp-4); max-width: 60ch; }
.profile-grid .link-arrow { display: inline-block; margin-top: var(--sp-5); }
.values-row { grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: clamp(36px, 5vw, 64px); }
@media (max-width: 1000px) { .values-row { grid-template-columns: 1fr 1fr; } }
@media (max-width: 900px) {
  .profile-grid { grid-template-columns: 1fr; }
  .profile-img { max-width: 260px; justify-self: start; }
}
@media (max-width: 560px) { .values-row { grid-template-columns: 1fr; } }

/* Styrker: seks kort */
.about-strengths { padding: var(--section) 0; }
.strength-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.strength-grid li { display: grid; gap: 6px; align-content: start; padding: 22px 22px 24px; background: var(--raised); border-radius: var(--r-m); box-shadow: var(--shadow-s); }
.strength-grid .n { font-size: 12px; font-weight: 800; letter-spacing: .08em; color: var(--accent-text); }
.strength-grid b { font-size: 18px; font-weight: 700; letter-spacing: -.01em; }
.strength-grid span:last-child { font-size: 15px; color: var(--text-muted); }
@media (max-width: 900px) { .strength-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .strength-grid { grid-template-columns: 1fr; } }

/* Erfaring i korte træk (forsiden) */
.cv-home { padding: 0 0 var(--section); }
.cv-when { font-size: 12.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--accent-text); }
.cv-mini { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 28px; border-top: 1px solid var(--line); }
.cv-mini li { display: grid; gap: 4px; align-content: start; padding: 20px 0 22px; border-bottom: 1px solid var(--line); }
.cv-mini b { font-size: 17px; font-weight: 700; letter-spacing: -.01em; }
.cv-mini span:last-child { font-size: 15px; color: var(--text-muted); }
@media (max-width: 900px) { .cv-mini { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .cv-mini { grid-template-columns: 1fr; } }

/* Erfaring-siden: hele CV'et */
.cv-hero .actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: var(--sp-6); }
.cv-hero .btn-ghost { color: #fff; border-color: rgba(255, 255, 255, .5); background: transparent; }
.cv { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 72px); align-items: start; padding-top: clamp(40px, 5vw, 72px); padding-bottom: clamp(48px, 6vw, 96px); }
.cv-h { margin-bottom: var(--sp-5); font-size: var(--fs-label); font-weight: var(--fw-label); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--accent-text); }
.cv-roles { display: grid; border-left: 2px solid var(--kobolt-100); margin-left: 5px; }
.cv-role { position: relative; display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 20px; padding: 0 0 40px 28px; }
.cv-role:last-child { padding-bottom: 0; }
.cv-role::before { content: ''; position: absolute; left: -7px; top: 3px; width: 12px; height: 12px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 4px var(--bg); }
.cv-role .cv-when { padding-top: 1px; }
.cv-body h3 { font-size: 20px; font-weight: 750; letter-spacing: -.015em; line-height: 1.25; }
.cv-org { margin-top: 4px; display: flex; flex-wrap: wrap; gap: 2px 10px; align-items: baseline; }
.cv-org b { font-size: 16px; font-weight: 650; }
.cv-org span { font-size: 14px; color: var(--text-muted); }
.cv-meta { margin-top: 8px; font-size: 14.5px; color: var(--text-muted); }
.cv-kind { display: inline-block; margin-right: 8px; padding: 2px 9px; border-radius: var(--r-pill); background: var(--surface); font-size: 12px; font-weight: 600; color: var(--text); }
.cv-points { margin-top: 12px; display: grid; gap: 6px; }
.cv-points li { position: relative; padding-left: 18px; font-size: 15.5px; }
.cv-points li::before { content: ''; position: absolute; left: 2px; top: .62em; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.cv-result { margin-top: 14px; display: inline-flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; padding: 10px 14px; border-radius: 12px; background: var(--kobolt-100); font-weight: 650; }
.cv-result span { font-size: 11.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--accent-text); }
.cv-side { display: grid; gap: 16px; }
.cv-box { padding: 22px 22px 24px; background: var(--raised); border-radius: var(--r-m); box-shadow: var(--shadow-s); }
.cv-box .cv-h { margin-bottom: var(--sp-4); }
.cv-box .tags { margin-top: 0; }
.cv-facts { display: grid; gap: 14px; }
.cv-facts li { display: grid; gap: 2px; }
.cv-facts b { font-weight: 700; }
.cv-facts span:last-child { font-size: 14.5px; color: var(--text-muted); }
.cv-langs { display: grid; gap: 8px; }
.cv-langs li { display: flex; justify-content: space-between; gap: 12px; font-size: 15px; }
.cv-langs span { color: var(--text-muted); }
.cv-skill + .cv-skill { margin-top: 14px; }
.cv-skill b { display: block; margin-bottom: 4px; font-size: 14.5px; font-weight: 700; }
.cv-skill li { font-size: 14.5px; color: var(--text-muted); }
.cv-contact { display: grid; gap: 6px; font-size: 15px; }
.cv-contact a { color: var(--text); }
@media (max-width: 900px) {
  .cv { grid-template-columns: 1fr; }
  .cv-role { grid-template-columns: 1fr; gap: 6px; }
}

/* Om mig */
.about-hero-grid { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, .7fr); gap: clamp(32px, 6vw, 88px); align-items: center; }
.about-portrait { aspect-ratio: 1; border-radius: var(--r-l); overflow: hidden; box-shadow: 0 40px 80px -40px rgba(4, 16, 40, .7); }
.about-work, .about-edu { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 72px); align-items: start; padding-top: var(--section); padding-bottom: var(--section); }
.about-story { padding: var(--section) 0; background: var(--surface); }
.story-steps { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; }
.story-steps li { display: grid; gap: 6px; align-content: start; padding: 20px 18px 22px; border-top: 3px solid var(--accent); border-radius: var(--r-m); background: var(--raised); box-shadow: var(--shadow-s); }
.story-steps b { font-size: 17px; font-weight: 700; }
.story-steps span:last-child { font-size: 14.5px; color: var(--text-muted); }
.story-end { max-width: 60ch; margin-top: clamp(28px, 4vw, 48px); }
.about-edu .btn { margin-top: var(--sp-6); }
@media (max-width: 1100px) { .story-steps { grid-template-columns: 1fr 1fr; } }
@media (max-width: 900px) {
  .about-hero-grid, .about-work, .about-edu { grid-template-columns: 1fr; }
  .about-portrait { max-width: 300px; }
}
@media (max-width: 560px) { .story-steps { grid-template-columns: 1fr; } }

/* Kontakt: portræt i stedet for formular */
.contact-portrait { position: relative; justify-self: end; width: min(100%, 380px); aspect-ratio: 1; border-radius: var(--r-l); overflow: hidden; box-shadow: 0 40px 80px -40px rgba(4, 16, 40, .7); }
@media (max-width: 900px) { .contact-portrait { justify-self: start; width: min(100%, 300px); } }

/* Print og "Gem som PDF" på Erfaring-siden */
@media print {
  .site-header, .site-footer, .end-band, .sticky-cta, .skip, .cv-hero .actions, .lightbox, .siteviewer { display: none !important; }
  html, body { background: #fff !important; }
  .page-hero { padding: 0 0 12px !important; background: none !important; color: #000 !important; }
  .page-hero .kicker, .page-hero .lead, .page-hero h1 { color: #000 !important; }
  .rv, .page-hero .rv > * { opacity: 1 !important; transform: none !important; filter: none !important; animation: none !important; }
  .cv { grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); padding: 12px 0 0; }
  .cv-box { box-shadow: none; border: 1px solid #ddd; }
  .cv-role { break-inside: avoid; padding-bottom: 20px; }
}

/* Overskrifter i to sætninger: den fremhævede sætning brydes som én blok */
h1 .hl, h2 .hl { display: inline-block; text-wrap: balance; }
/* Primær knap på blå sidetop: hvid, så den ikke forsvinder i baggrunden */
.cv-hero .btn:not(.btn-ghost) { background: #fff; border-color: #fff; color: var(--kobolt-800); }
.cv-langline { margin-top: var(--sp-5); font-size: 15px; color: var(--text-muted); }
.cv-langline b { color: var(--text); }

/* Link fra en CV-post til projekterne */
.cv-link { display: inline-block; margin-top: 12px; }

/* Undermenu på Projekter, Websites og Foto og film */
.sub-nav { display: flex; flex-wrap: wrap; gap: 8px; padding-top: clamp(24px, 3vw, 40px); }
.sub-nav a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; border: 1px solid var(--blaek-300); border-radius: var(--r-pill); background: var(--raised); color: var(--text); font-size: 14.5px; font-weight: var(--fw-semibold); text-decoration: none; }
.sub-nav a:hover { border-color: var(--blaek-500); }
.sub-nav a[aria-current="page"] { background: var(--text); border-color: var(--text); color: #fff; }
/* Udtalelserne er sidste sektion på forsiden: luft ned til kontaktbåndet */
.page-home .reviews { padding-bottom: calc(var(--section) * .8); }
.sub-nav { margin-bottom: clamp(20px, 2.5vw, 32px); }

/* Afstande efter ny rækkefølge på forsiden */
.profile-home { padding-bottom: var(--section); }
.sub-nav { margin-bottom: clamp(24px, 3vw, 40px); }

/* Arbejdsprincipper: tre kort, tekst altid øverst i kortet */
.about-values li { align-content: start; }
.values-row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 900px) { .values-row { grid-template-columns: 1fr; } }
.about-values span, .strength-grid span, .cv-points li { text-wrap: pretty; }

/* Forsidens top: punkterne 4 px større (16 til 20 px) */
.hero-cv .checks li { font-size: 20px; }
.hero-cv .checks li { padding-left: 32px; }
.hero-cv .checks li::after { top: 7px; left: 5px; }

/* Primære knapper: flad koboltblå med én ren kant i samme farve, ingen lys kant og ingen glans */
.btn { background: var(--primary); border-color: var(--primary); }
.btn:not(.btn-ghost):hover { background: var(--primary-hover); border-color: var(--primary-hover) !important; }
/* Hvide knapper på blå flader: flad hvid med én ren kant */
.hero-home .actions .btn:not(.btn-ghost), .code-show .btn:not(.btn-ghost), .cv-hero .btn:not(.btn-ghost) { background: #fff !important; border: 1px solid #fff !important; color: var(--kobolt-800) !important; }
.hero-home .actions .btn:not(.btn-ghost):hover, .code-show .btn:not(.btn-ghost):hover, .cv-hero .btn:not(.btn-ghost):hover { background: #eaf2ff !important; border-color: #eaf2ff !important; }

/* Forsidens top: tekstblokken skaleret 10 % op (overskrift, linjen over, punkter, knapper og afstande) */
.hero-cv .hero-title { font-size: clamp(2.53rem, 4.29vw, 3.41rem); margin-bottom: calc(var(--sp-5) * 1.1); }
.hero-cv .hero-kicker { font-size: calc(var(--fs-label) * 1.1); }
.hero-cv .checks { gap: 13px; }
.hero-cv .checks li { font-size: 22px; padding-left: 35px; }
.hero-cv .checks li::after { top: 8px; left: 5px; width: 6.6px; height: 12px; }
.hero-cv .actions .btn { height: 51px; padding: 0 26px; font-size: 16px; }
@media (max-width: 560px) {
  .hero-cv .hero-title { font-size: clamp(2.09rem, 9.24vw, 2.53rem); }
  .hero-cv .actions .btn { height: 48px; }
}

/* AI i praksis: hvad jeg har bygget, som punkter på blå flade */
.code-built { margin-bottom: var(--sp-6); }
.code-built li { color: rgba(255, 255, 255, .92); font-size: 18px; }

/* AI i praksis: rigtige skærmbilleder i de tre paneler */
.pf .pf-shot { display: block; flex: 1 1 auto; min-height: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 10px; }
.pf-site .pf-shot { border-radius: 0; }
/* Tre paneler: website (højt, venstre), admin og Studio (højre) */
.code-show .code-out { grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); grid-template-rows: 1fr 1fr; }
.code-show .pf-site { grid-column: 1; grid-row: 1 / span 2; min-height: 0; }
.code-show .pf-dash { grid-column: 2; grid-row: 1; }
.code-show .pf-portal { grid-column: 2; grid-row: 2; }
@media (max-width: 900px) {
  .code-show .code-out { grid-template-columns: 1fr; grid-template-rows: none; }
  .code-show .pf-site, .code-show .pf-dash, .code-show .pf-portal { grid-column: auto; grid-row: auto; min-height: 0; }
  .code-show .pf-site { aspect-ratio: 4 / 5; }
  .code-show .pf-dash { aspect-ratio: 16 / 11; }
  .code-show .pf-portal { aspect-ratio: 16 / 9; }
}

/* Tal-kortene på forsiden: ens luft over og under, ingen ekstra margen før Kompetencer */
.page-home .facts { padding: clamp(40px, 5vw, 64px) 0; }
.page-home .facts + .svc-home { margin-top: 0; }
.code-built-label { margin-bottom: var(--sp-4); color: rgba(255, 255, 255, .8); font-size: 16px; }
.code-show .code-head { align-items: start; }

/* "Alle projekter": klikflade på 44 px uden at flytte layoutet. Filmtekst må ikke løbe ind under afspilknappen */
.cs-hero .back { padding-block: 11px; margin-block: -11px 7px; }
.vtile figcaption { max-width: calc(100% - 66px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vtile.tall figcaption { left: 8px; bottom: 8px; max-width: calc(100% - 16px); padding: 5px 10px; font-size: 12px; }
.vtile.tall .vplay { top: 8px; bottom: auto; }

/* ---------- Om mig v2: tal, mørke principper, tidslinje, bento og fotostribe ---------- */
.about-hero h1.display { font-size: clamp(2.4rem, 5.2vw, 4.2rem); }
.about-portrait { aspect-ratio: 4 / 5; }
.about-portrait img { object-position: 50% 30%; }
.about-count { gap: 18px clamp(28px, 4vw, 48px); margin-top: 36px; }
.about-count li { padding-left: 16px; border-left: 2px solid rgba(255, 255, 255, .35); }
.about-count b { font-size: clamp(1.5rem, 2.4vw, 1.9rem); font-weight: 700; letter-spacing: -.03em; color: #fff; white-space: nowrap; }
.about-count .fact-n { font: inherit; font-size: clamp(2.6rem, 4.6vw, 3.6rem); font-weight: 800; letter-spacing: -.05em; line-height: 1; background: none; -webkit-background-clip: border-box; background-clip: border-box; color: #fff; padding: 0; margin: 0; }
.about-count span:last-child { max-width: 20ch; }

.about-work { display: block; padding: var(--section) 0; background: #0f1d3a; color: #fff; }
.about-work .kicker { color: #8fb1ff; }
.about-work h2 .hl { color: #8fb1ff; }
.work-lines { margin-top: clamp(32px, 4vw, 56px); border-top: 1px solid rgba(255, 255, 255, .14); }
.work-lines li { display: grid; grid-template-columns: 64px minmax(0, 1fr) minmax(0, 1.1fr); gap: 8px 32px; align-items: baseline; padding: clamp(22px, 3vw, 36px) 0; border-bottom: 1px solid rgba(255, 255, 255, .14); }
.work-lines .n { font-size: 13px; font-weight: 800; letter-spacing: .08em; color: #8fb1ff; }
.work-lines b { font-size: clamp(1.6rem, 3.2vw, 2.6rem); font-weight: 700; letter-spacing: -.03em; line-height: 1.1; }
.work-lines span:last-child { font-size: clamp(1rem, 1.4vw, 1.2rem); color: rgba(255, 255, 255, .75); }
@media (max-width: 760px) { .work-lines li { grid-template-columns: 40px minmax(0, 1fr); } .work-lines span:last-child { grid-column: 2; } }

.story-line { position: relative; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 24px; margin-top: 8px; padding-top: 34px; }
.story-line::before { content: ''; position: absolute; left: 0; right: 0; top: 7px; height: 2px; background: var(--line); }
.story-line::after { content: ''; position: absolute; left: 0; right: 0; top: 7px; height: 2px; background: var(--accent); transform-origin: left; transition: transform 1.8s var(--ease-soft) .2s; }
.js .story-line:not(.in)::after { transform: scaleX(0); }
.story-line li { position: relative; display: grid; gap: 6px; align-content: start; }
.story-line li::before { content: ''; position: absolute; top: -34px; left: 0; width: 16px; height: 16px; border-radius: 50%; background: var(--bg); border: 2px solid var(--accent); box-sizing: border-box; }
.story-line li:last-child::before { background: var(--accent); box-shadow: 0 0 0 6px rgb(64 103 181 / .18); }
.story-line .cv-when { font-size: 13px; font-weight: 800; letter-spacing: .06em; color: var(--accent-text); }
.story-line b { font-size: 19px; font-weight: 700; letter-spacing: -.01em; }
.story-line span:last-child { font-size: 14.5px; color: var(--text-muted); }
@media (max-width: 860px) {
  .story-line { grid-template-columns: 1fr; gap: 28px; padding: 0 0 0 34px; }
  .story-line::before, .story-line::after { left: 7px; right: auto; top: 0; bottom: 0; width: 2px; height: auto; }
  .story-line::after { transform-origin: top; }
  .js .story-line:not(.in)::after { transform: scaleY(0); }
  .story-line li::before { top: 3px; left: -34px; }
}

.bento { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: minmax(170px, auto); gap: 16px; }
.bento li { display: grid; gap: 6px; align-content: start; padding: 24px; background: var(--raised); border-radius: var(--r-m); box-shadow: var(--shadow-s); }
.bento .n { font-size: 12px; font-weight: 800; letter-spacing: .08em; color: var(--accent-text); }
.bento b { font-size: 19px; font-weight: 700; letter-spacing: -.01em; margin-top: auto; }
.bento li:not(.b-img) { align-content: space-between; }
.bento span:last-child { font-size: 15px; color: var(--text-muted); }
.bento .st-accent { background: var(--accent); color: #fff; }
.bento .st-accent .n { color: rgba(255, 255, 255, .8); }
.bento .st-accent span:last-child { color: rgba(255, 255, 255, .86); }
.bento .b-img { padding: 0; overflow: hidden; }
.bento .b-img img { width: 100%; height: 100%; object-fit: cover; }
.bento .b-tall { grid-column: span 2; grid-row: span 2; }
.bento .b-tall img { object-position: 50% 0; }
.bento .b-wide { grid-column: span 2; }
.bento .b-wide img { object-position: 0 0; }
@media (max-width: 900px) { .bento { grid-template-columns: 1fr 1fr; } .bento .b-tall { aspect-ratio: 7 / 6; grid-row: auto; } .bento .b-wide { aspect-ratio: 2 / 1; } }
@media (max-width: 560px) { .bento { grid-template-columns: 1fr; grid-auto-rows: auto; } .bento .b-tall, .bento .b-wide { grid-column: auto; } .bento .b-tall { aspect-ratio: 4 / 5; } }

.about-photos { padding: var(--section) 0; background: var(--surface); overflow: hidden; }
.photo-marquee { margin: 8px 0 28px; overflow: hidden; }
.photo-marquee ul { display: flex; gap: 14px; width: max-content; animation: marquee 60s linear infinite; }
.photo-marquee li { flex: none; width: clamp(200px, 22vw, 300px); aspect-ratio: 4 / 5; border-radius: var(--r-m); overflow: hidden; }
.photo-marquee img { width: 100%; height: 100%; object-fit: cover; }
.photo-marquee:hover ul { animation-play-state: paused; }
@keyframes marquee { to { transform: translateX(calc(-50% - 7px)); } }
@media (prefers-reduced-motion: reduce) { .photo-marquee { overflow-x: auto; } .photo-marquee ul { animation: none; } }
.about-photos .link-arrow { display: inline-block; padding-block: 10px; }

.free-title { font-size: var(--fs-h2); margin-bottom: 4px; }
.about-edu .lead { margin-top: 12px; }
.about-hero h1.display { font-size: clamp(2.2rem, 5.2vw, 4.2rem); }
.about-hero h1 .hl { display: block; }
.about-count b span { display: inline; margin: 0; color: #fff; font-size: inherit; }
.about-count b .fact-n { font-size: clamp(2.6rem, 4.6vw, 3.6rem); }
.about-count b { display: flex; align-items: baseline; gap: 8px; }
.bento li:not(.b-img) { display: flex; flex-direction: column; gap: 6px; }
.bento li:not(.b-img) .n { margin-bottom: auto; padding-bottom: 28px; }
.bento b { margin-top: 0; }
.about-count { display: grid; grid-template-columns: repeat(3, auto); justify-content: start; }
.about-count b { font-size: 1.05rem; font-weight: 600; letter-spacing: 0; gap: 6px; }
@media (max-width: 1100px) and (min-width: 861px) { .about-count { grid-template-columns: repeat(2, auto); } }
@media (max-width: 560px) { .about-count { grid-template-columns: 1fr; } }
.bento .b-wide { position: relative; }
.bento .b-wide img { object-position: 50% 22%; }
.bento .b-cap { position: absolute; left: 12px; bottom: 12px; padding: 6px 12px; border-radius: var(--r-pill); background: #fff; color: var(--text); font-size: 12.5px; font-weight: var(--fw-semibold); }

/* Om mig: personlighed (DiSC og Big Five) */
.about-persona { padding: 0 0 var(--section); }
.persona-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.persona-card { padding: clamp(24px, 3vw, 36px); background: var(--raised); border-radius: var(--r-l); box-shadow: var(--shadow-s); }
.persona-card .kicker { margin-bottom: 10px; }
.persona-card h3 { font-size: clamp(1.4rem, 2.2vw, 1.8rem); font-weight: 700; letter-spacing: -.02em; }
.persona-card > p:not(.kicker) { margin-top: 8px; color: var(--text-muted); font-size: 15.5px; max-width: 46ch; }
.trait-bars { display: grid; gap: 14px; margin-top: 26px; }
.trait-bars li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 12px; align-items: center; font-size: 14.5px; }
.trait-bars span { font-weight: 600; }
.trait-bars b { font-size: 13px; font-weight: 600; color: var(--text-muted); text-align: right; }
.trait-bars i { grid-column: 1 / -1; grid-row: 2; height: 8px; border-radius: 99px; background: linear-gradient(90deg, var(--accent) calc(var(--v) * 20%), var(--surface) 0); transform-origin: left; transition: transform 1.4s var(--ease-soft) .3s; }
.js .persona-card:not(.in) .trait-bars i { transform: scaleX(0); }
.about-persona .note { margin-top: 16px; }
@media (max-width: 760px) { .persona-grid { grid-template-columns: 1fr; } }

/* Om mig: mere kompakte kasser */
.bento { grid-auto-rows: minmax(0, auto); gap: 12px; }
.bento li:not(.b-img) { padding: 18px 20px 20px; gap: 4px; }
.bento li:not(.b-img) .n { margin-bottom: 10px; padding-bottom: 0; }
.bento b { font-size: 17px; }
.bento span:last-child { font-size: 14.5px; }
@media (min-width: 901px) { .bento .b-wide { min-height: 0; } }
.persona-grid { gap: 12px; }
.persona-card { padding: 22px 24px 24px; border-radius: var(--r-m); }
.persona-card h3 { font-size: 1.35rem; }
.persona-card > p:not(.kicker) { font-size: 14.5px; }
.trait-bars { gap: 9px; margin-top: 18px; }
.trait-bars li { gap: 4px 12px; font-size: 13.5px; }
.trait-bars i { height: 6px; }
.bento .b-img { position: relative; }
.bento .b-img img { position: absolute; inset: 0; }
@media (min-width: 901px) { .bento { grid-auto-rows: minmax(150px, auto); } .bento .b-tall img { object-position: 50% 12%; } .bento .b-wide img { object-position: 50% 18%; } }
@media (max-width: 560px) {
  .bento { grid-template-columns: 1fr 1fr; gap: 8px; }
  .bento .b-tall, .bento .b-wide { grid-column: 1 / -1; }
  .bento .b-tall { aspect-ratio: 4 / 3; }
  .bento .b-wide { aspect-ratio: 16 / 9; }
  .bento li:not(.b-img) { padding: 14px 14px 16px; }
  .bento li:not(.b-img) .n { margin-bottom: 6px; }
  .bento b { font-size: 15px; line-height: 1.25; }
  .bento span:last-child { font-size: 13px; }
  .persona-card { padding: 18px 18px 20px; }
}

/* Om mig, styrker: fire felter mellem to stående billeder */
@media (min-width: 901px) {
  .bento { grid-auto-rows: minmax(210px, auto); }
  .bento .b-tall { grid-column: 1; grid-row: 1 / span 2; }
  .bento .b-wide { grid-column: 4; grid-row: 1 / span 2; }
  .bento .b-tall img { object-position: 50% 0; }
  .bento .b-wide img { object-position: 52% 30%; }
}
@media (max-width: 900px) { .bento .b-tall img { object-position: 50% 15%; } }
@media (min-width: 561px) and (max-width: 900px) {
  .bento { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: minmax(150px, auto); }
  .bento .b-tall { grid-column: 1; grid-row: 1 / span 2; aspect-ratio: auto; }
  .bento .b-wide { grid-column: 1 / -1; aspect-ratio: 21 / 9; }
  .bento .b-wide img { object-position: 50% 25%; }
}
@media (max-width: 560px) { .bento .b-tall { aspect-ratio: 1 / 1; } .bento .b-tall img { object-position: 50% 5%; } .bento .b-wide { aspect-ratio: 4 / 3; } .bento .b-wide img { object-position: 52% 20%; } }
/* Om mig, styrker uden kamerabillede: fire felter til venstre, Capio til højre */
@media (min-width: 901px) {
  .bento .b-wide { grid-column: 3 / span 2; grid-row: 1 / span 2; }
  .bento .b-wide img { object-position: 50% 25%; }
}
@media (min-width: 561px) and (max-width: 900px) {
  .bento { grid-template-columns: 1fr 1fr; }
  .bento .b-wide { grid-column: 1 / -1; aspect-ratio: 16 / 9; }
}

/* Om mig, personlighed: spindelvævsdiagrammer i stedet for bjælker */
.radar { position: relative; aspect-ratio: 4 / 3; margin-top: 18px; }
.radar svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.radar .grid polygon, .radar .grid line { fill: none; stroke: var(--line, rgba(0, 0, 0, .1)); stroke-width: 1; }
.radar .grid polygon:last-of-type { stroke-width: 1.5; }
.radar .shape polygon { fill: var(--accent); fill-opacity: .18; stroke: var(--accent); stroke-width: 2.5; stroke-linejoin: round; }
.radar .shape circle { fill: var(--accent); }
.radar .shape { transform-origin: 200px 150px; transition: transform 1.2s var(--ease-soft) .3s, opacity .6s ease .3s; }
.js .persona-card:not(.in) .radar .shape { transform: scale(.2); opacity: 0; }
.radar ul { position: absolute; inset: 0; }
.radar .rl { position: absolute; display: grid; gap: 1px; max-width: 34%; font-size: 13.5px; line-height: 1.2; transform: translate(-50%, -50%); }
.radar .rl span { font-weight: 600; }
.radar .rl b { font-size: 12.5px; font-weight: 600; color: var(--text-muted); }
.radar .rl[data-x="start"] { text-align: left; }
.radar .rl[data-x="end"] { text-align: right; }
.radar .rl[data-x="mid"] { text-align: center; max-width: none; white-space: nowrap; }
.radar .rl[data-x="start"][data-y="mid"] { transform: translate(0, -50%); }
.radar .rl[data-x="end"][data-y="mid"] { transform: translate(-100%, -50%); }
.radar .rl[data-x="mid"][data-y="top"] { transform: translate(-50%, -100%); }
.radar .rl[data-x="mid"][data-y="bottom"] { transform: translate(-50%, 0); }
.radar .rl[data-x="start"][data-y="top"] { transform: translate(0, -100%); }
.radar .rl[data-x="end"][data-y="top"] { transform: translate(-100%, -100%); }
.radar .rl[data-x="start"][data-y="bottom"] { transform: translate(0, 0); }
.radar .rl[data-x="end"][data-y="bottom"] { transform: translate(-100%, 0); }
@media (max-width: 560px) { .radar .rl { font-size: 12px; } .radar .rl b { font-size: 11.5px; } }
.radar { --k: 1; }
.radar .rl { left: calc(50% + var(--dx) * var(--k) * 1%); top: calc(50% + var(--dy) * var(--k) * 1%); }
.radar .zoom { transform-origin: 200px 150px; transform: scale(var(--k)); }
@media (max-width: 900px) { .radar { --k: .84; } .radar .rl:not([data-x="mid"]) { max-width: 28%; } }