/* ==========================================================================
LR Partners — lr.css
Én fil. Alt design går gennem tokens i :root.
Palet: hvid. Typografi: Manrope. Begge besluttet af Adam 8. sep. 2026.
========================================================================== */
/* ---------- Font (self-hostet, variabel) ----------
Manrope, én familie til alt. Valgt af Adam 8. sep. 2026 (V3 i styleguiden). */
@font-face { font-family: "Manrope"; font-style: normal; font-weight: 200 800; font-display: swap;
src: url("../fonts/manrope-normal.woff2") format("woff2");
/* scroll-craft-motoren (assets/css/scrollcraft.css, indlæses før denne fil på sider med scrollcraft: true). Motoren rebrandes med disse seks roller. */
--sc-canvas: #ffffff; --sc-surface: #f5f6fa; --sc-ink: #0b0c2e; --sc-ink-soft: #676a88; --sc-accent: #02032b; --sc-accent-ink: #ffffff;
--sc-font-display: "Manrope", system-ui, sans-serif; --sc-font-text: "Manrope", system-ui, sans-serif;
}
/* ---------- Tokens ---------- */
:root {
/* Brand */
--navy: #02032b; /* brandfarve. Sekundær brug: linjer, knapper, overskrifter, accenter */
--navy-hover: #14164d; /* hover på navy-flader */
--blue-700: #1e2a78; /* sekundære knapper, links */
--blue-600: #2c3d9e; /* link-hover, fokusring */
--blue-100: #e6e9f6; /* lav-opacity blå flade (fast) */
/* Flader — hvid palet (Adam 13. sep. 2026: den varme off-white er rullet tilbage) */
--bg: #ffffff;
--bg-2: #f5f6fa; /* skiftende sektionsbaggrund */
--surface: #ffffff; /* kort på --bg-2 */
--bg-glass: rgba(255,255,255,.92); /* sticky header over grundfladen */
--line: #e2e4ee;
--line-strong:#c9ccdc;
/* Tekst — aldrig ren sort */
--ink: #0b0c2e; /* overskrifter */
--ink-2: #363957; /* brødtekst */
--ink-3: #676a88; /* sekundær tekst, captions. Mørknet 13. sep. 2026: #6d7090 lå på 4,45:1 mod --bg-2 og klarede ikke AA */
--on-navy: #ffffff;
--on-navy-2: rgba(255,255,255,.72);
/* Afledte tints — følger paletten automatisk */
--tint-1: color-mix(in srgb, var(--navy) 4%, var(--bg));
--tint-2: color-mix(in srgb, var(--navy) 8%, var(--bg));
--tint-3: color-mix(in srgb, var(--navy) 14%, var(--bg));
/* Placeholder */
--ph-bg: #ececef;
--ph-line: #b9bcc9;
--ph-ink: #4c4f66;
/* Typografi */
--font-display: "Manrope", "Helvetica Neue", Arial, sans-serif;
--font-body: "Manrope", "Helvetica Neue", Arial, sans-serif;
--display-weight: 500;
--display-tracking: -0.03em;
--display-stretch: 100%;
--fs-display: clamp(2.75rem, 2rem + 3.6vw, 4.5rem); /* 44 → 72 */
--fs-h1: clamp(2.25rem, 1.6rem + 2.8vw, 3.5rem); /* 36 → 56 */
--fs-h2: clamp(1.75rem, 1.3rem + 1.9vw, 2.625rem);/* 28 → 42 */
--fs-h3: clamp(1.25rem, 1.1rem + .6vw, 1.5rem); /* 20 → 24 */
--fs-lead: clamp(1.125rem, 1.05rem + .4vw, 1.3125rem); /* 18 → 21 */
--fs-body: 1.0625rem; /* 17 */
--fs-small: 0.9375rem; /* 15 */
--fs-eyebrow: 0.8125rem; /* 13 */
--lh-tight: 1.08;
--lh-snug: 1.2;
--lh-body: 1.6;
/* Spacing (4 px-base) */
--s-1: .25rem; --s-2: .5rem; --s-3: .75rem; --s-4: 1rem; --s-5: 1.5rem;
--s-6: 2rem; --s-7: 3rem; --s-8: 4rem; --s-9: 6rem; --s-10: 8rem;
--section-y: clamp(4rem, 3rem + 5vw, 8rem); /* 64 → 128 */
--section-y-sm: clamp(3rem, 2rem + 3vw, 5rem);
--gutter: clamp(1.25rem, .5rem + 3vw, 3rem); /* 20 → 48 */
--container: 80rem; /* 1280 */
--container-narrow: 46rem; /* læsebredde */
/* Radius — lav. Struktur, ikke SaaS-piller */
--r-sm: 4px; /* knapper, inputs */
--r-md: 8px; /* kort */
--r-lg: 12px; /* medier */
/* Skygger — næsten ingen. Linjer bærer hierarkiet */
--shadow-1: 0 1px 2px rgba(2,3,43,.06);
--shadow-2: 0 8px 24px -12px rgba(2,3,43,.18);
/* Bevægelse */
--ease: cubic-bezier(.2,.7,.2,1);
--dur: 180ms;
--dur-slow: 480ms;
color-scheme: light;
}
/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
/* Springer man til et id midt på siden, dækker den klæbende header toppen af målet.
Headeren er 4,25rem høj (.header__in). Adam 1. okt. 2026: "Søg job" landede lidt forskudt. */
:target, [id] { scroll-margin-top: 5.5rem; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation: none !important; transition: none !important; } }
body {
margin: 0; background: var(--bg); color: var(--ink-2);
font-family: var(--font-body); font-size: var(--fs-body); line-height: var(--lh-body);
-webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
img, video, svg { display: block; max-width: 100%; height: auto; }
a { color: var(--blue-700); text-decoration-thickness: 1px; text-underline-offset: .15em; }
a:hover { color: var(--blue-600); }
:focus-visible { outline: 2px solid var(--blue-600); outline-offset: 3px; border-radius: 2px; }
hr { border: 0; border-top: 1px solid var(--line); margin: var(--s-7) 0; }
::selection { background: var(--blue-100); color: var(--ink); }
/* ---------- Typografi ---------- */
h1, h2, h3, h4, .display {
font-family: var(--font-display); font-weight: var(--display-weight); font-stretch: var(--display-stretch);
letter-spacing: var(--display-tracking); color: var(--ink); margin: 0 0 .5em; text-wrap: balance;
}
.display { font-size: var(--fs-display); line-height: var(--lh-tight); }
h1, .h1 { font-size: var(--fs-h1); line-height: var(--lh-tight); }
h2, .h2 { font-size: var(--fs-h2); line-height: 1.12; }
h3, .h3 { font-size: var(--fs-h3); line-height: var(--lh-snug); letter-spacing: -0.01em; }
h4, .h4 { font-size: var(--fs-body); line-height: var(--lh-snug); letter-spacing: 0; font-weight: 600; }
p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }
.lead { font-size: var(--fs-lead); line-height: 1.5; color: var(--ink-2); max-width: 36em; }
.small { font-size: var(--fs-small); }
.muted { color: var(--ink-3); }
.eyebrow {
font-family: var(--font-body); font-size: var(--fs-eyebrow); font-weight: 600; letter-spacing: .09em;
text-transform: uppercase; color: var(--blue-700); margin: 0 0 var(--s-4); display: flex; align-items: center; gap: .6em;
}
.eyebrow::before { content: ""; width: 1.5rem; height: 1px; background: currentColor; }
.measure { max-width: var(--container-narrow); }
.num { font-family: var(--font-display); font-weight: var(--display-weight); letter-spacing: -0.03em; font-size: var(--fs-display); line-height: 1; color: var(--ink); font-variant-numeric: tabular-nums; }
/* ---------- Layout ---------- */
.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: var(--section-y); }
.section--sm { padding-block: var(--section-y-sm); }
.section--alt { background: var(--bg-2); }
.section--navy { background: var(--navy); color: var(--on-navy-2); }
.section--navy :is(h1,h2,h3,h4,.display,.num) { color: var(--on-navy); }
.section--navy .eyebrow { color: var(--on-navy-2); }
.section--navy a:not(.btn) { color: var(--on-navy); }
.grid { display: grid; gap: var(--s-5); }
@media (min-width: 40em) { .grid--2, .grid--3, .grid--4 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 48em) { .grid { gap: var(--s-6); } .grid--3 { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 64em) { .grid--4 { grid-template-columns: repeat(4, 1fr); } }
/* Fire case-kort (MediaCatch, Pentimenti, Droids, OrbisCure): 2×2 til 75em, ellers bliver kortene for smalle. */
@media (min-width: 64em) and (max-width: 74.99em) { .cases.grid--4 { grid-template-columns: repeat(2, 1fr); } }
.stack > * + * { margin-top: var(--s-4); }
.cluster { display: flex; flex-wrap: wrap; gap: var(--s-3); align-items: center; }
.split { display: grid; gap: var(--s-6); align-items: center; }
@media (min-width: 56em) { .split { grid-template-columns: 1fr 1fr; gap: var(--s-8); } .split--wide-media { grid-template-columns: 5fr 7fr; } }
/* ---------- Knapper ---------- */
.btn {
--btn-bg: var(--navy); --btn-ink: var(--on-navy); --btn-line: var(--navy);
display: inline-flex; align-items: center; justify-content: center; gap: .5em;
min-height: 3rem; padding: .75rem 1.375rem; border-radius: var(--r-sm);
background: var(--btn-bg); color: var(--btn-ink); border: 1px solid var(--btn-line);
font-family: var(--font-body); font-size: var(--fs-body); font-weight: 600; line-height: 1; letter-spacing: .005em;
text-decoration: none; cursor: pointer; white-space: nowrap;
transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease), color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.btn:hover { --btn-bg: var(--navy-hover); --btn-line: var(--navy-hover); color: var(--on-navy); }
.btn:active { transform: translateY(1px); }
.btn--secondary { --btn-bg: transparent; --btn-ink: var(--navy); --btn-line: var(--line-strong); }
.btn--secondary:hover { --btn-bg: var(--tint-1); --btn-line: var(--navy); color: var(--navy); }
.btn--tint { --btn-bg: var(--blue-100); --btn-ink: var(--blue-700); --btn-line: var(--blue-100); }
.btn--tint:hover { --btn-bg: color-mix(in srgb, var(--blue-100) 80%, var(--blue-700)); --btn-line: transparent; color: var(--blue-700); }
.btn--ghost { --btn-bg: transparent; --btn-ink: var(--blue-700); --btn-line: transparent; padding-inline: .5rem; }
.btn--ghost:hover { --btn-bg: transparent; --btn-line: transparent; color: var(--blue-600); text-decoration: underline; text-underline-offset: .2em; }
.btn--on-navy { --btn-bg: var(--on-navy); --btn-ink: var(--navy); --btn-line: var(--on-navy); }
.btn--on-navy:hover { --btn-bg: #eef0f8; --btn-line: #eef0f8; color: var(--navy); }
.btn--on-navy-outline { --btn-bg: transparent; --btn-ink: var(--on-navy); --btn-line: rgba(255,255,255,.4); }
.btn--on-navy-outline:hover { --btn-bg: rgba(255,255,255,.08); --btn-line: var(--on-navy); color: var(--on-navy); }
.btn--lg { min-height: 3.5rem; padding: 1rem 1.75rem; font-size: 1.125rem; }
/* Primær CTA. Større, tungere, pil der flytter sig, dyb blød skygge med offset (ingen glow). Én pr. skærmbillede. */
.btn--cta { min-height: 3.625rem; padding: 1rem 1.5rem 1rem 1.625rem; font-size: 1.0625rem; font-weight: 700; letter-spacing: -0.005em; border-radius: 6px; gap: .85em; box-shadow: inset 0 1px 0 rgba(255,255,255,.14), 0 12px 28px -12px rgba(2,3,43,.55); }
.btn--cta .arrow { font-size: 1.15em; line-height: 0; transition: transform var(--dur) var(--ease); }
.btn--cta:hover { transform: translateY(-1px); box-shadow: inset 0 1px 0 rgba(255,255,255,.14), 0 18px 32px -14px rgba(2,3,43,.6); }
.btn--cta:hover .arrow { transform: translateX(4px); }
.btn--cta:active { transform: translateY(1px); box-shadow: 0 4px 12px -8px rgba(2,3,43,.5); }
.btn--cta.btn--on-navy { box-shadow: 0 14px 32px -12px rgba(0,0,0,.6); }
.cta-stack { display: inline-grid; gap: .55rem; justify-items: start; }
.cta__note { font-size: var(--fs-small); color: var(--ink-3); letter-spacing: .01em; }
.section--navy .cta__note, .hero--video .cta__note, .argument .cta__note { color: rgba(255,255,255,.7); }
.cta-band { display: grid; gap: var(--s-5); align-items: center; padding: var(--s-7) var(--s-6); border: 1px solid var(--line); border-radius: var(--r-md); background: var(--bg); }
@media (min-width: 56em) { .cta-band { grid-template-columns: 1fr auto; gap: var(--s-8); } }
.cta-band h2 { margin: var(--s-2) 0 0; }
.cta-band .lead { margin-top: var(--s-3); }
.btn--sm { min-height: 2.5rem; padding: .5rem 1rem; font-size: var(--fs-small); }
.btn--block { width: 100%; }
.btn .arrow { transition: transform var(--dur) var(--ease); }
.btn:hover .arrow { transform: translateX(3px); }
/* ---------- Kort ---------- */
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); padding: var(--s-6); }
.card--flat { background: transparent; border: 0; border-top: 1px solid var(--line); border-radius: 0; padding: var(--s-5) 0 0; }
.card--tint { background: var(--tint-1); border-color: transparent; }
.card--navy { background: var(--navy); border-color: var(--navy); color: var(--on-navy-2); }
.card--navy :is(h2,h3,h4) { color: var(--on-navy); }
.card__index { font-family: var(--font-display); font-weight: 500; font-size: var(--fs-small); letter-spacing: .04em; color: var(--blue-700); margin-bottom: var(--s-4); font-variant-numeric: tabular-nums; }
.card--navy .card__index { color: var(--on-navy-2); }
/* Citat */
.quote { border-left: 2px solid var(--navy); padding-left: var(--s-5); margin: 0; }
.quote p { font-family: var(--font-display); font-weight: 450; font-size: var(--fs-h3); line-height: 1.35; letter-spacing: -0.01em; color: var(--ink); }
.quote footer { margin-top: var(--s-4); font-size: var(--fs-small); color: var(--ink-3); }
.quote footer strong { color: var(--ink); font-weight: 600; }
/* Ét stort citat, brugt alene i en sektion (cases-siden). Portræt i footeren som på .testimonial. */
.quote--lead { border-left: 0; padding-left: 0; max-width: 52rem; margin-inline: auto; text-align: center; }
.quote--lead p { font-size: var(--fs-h2); line-height: 1.3; }
.quote--lead footer { display: flex; gap: var(--s-3); align-items: center; justify-content: center; margin-top: var(--s-6); }
.quote--lead footer .media { width: 3.25rem; aspect-ratio: 1/1; border-radius: 50%; flex: none; }
.quote--lead footer span { text-align: left; }
.quote--lead footer strong { display: block; }
/* Logovæg */
.logos { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); }
@media (min-width: 40em) { .logos { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 64em) { .logos { grid-template-columns: repeat(6, 1fr); } }
.logos > * { background: var(--bg); aspect-ratio: 5/3; display: grid; place-items: center; padding: var(--s-4); }
/* Logo-marquee: kundelogoer som navy maske i ét rullende bånd. Pauser ved hover, statisk ved reduced motion. */
.marquee { display: flex; --marquee-h: 2rem; --marquee-gap: clamp(2.5rem, 6vw, 5rem); overflow: hidden; border-block: 1px solid var(--line); padding-block: var(--s-6); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.marquee__track { display: flex; width: max-content; gap: var(--marquee-gap); padding-inline-end: var(--marquee-gap); margin: 0; padding-inline-start: 0; list-style: none; animation: marquee var(--marquee-dur, 70s) linear infinite; }
.marquee:hover .marquee__track { animation-play-state: paused; }
.marquee li { flex: none; }
.marquee__logo { display: block; height: var(--marquee-h); width: calc(var(--marquee-h) * var(--w, 4)); background: var(--navy); opacity: .8; mask: var(--logo) center / contain no-repeat; -webkit-mask: var(--logo) center / contain no-repeat; transition: opacity var(--dur) var(--ease); }
.marquee__logo:hover { opacity: 1; }
@media (min-width: 56em) { .marquee { --marquee-h: 2.5rem; } }
@keyframes marquee { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .marquee { mask-image: none; -webkit-mask-image: none; } .marquee__track { animation: none; width: auto; flex-wrap: wrap; justify-content: center; row-gap: var(--s-5); } .marquee__track[aria-hidden] { display: none; } }
.section--navy .marquee { border-color: rgba(255,255,255,.2); } .section--navy .marquee__logo { background: #fff; }
/* ---------- Formular ---------- */
.field { display: grid; gap: .375rem; }
.field label, .label { font-size: var(--fs-small); font-weight: 600; color: var(--ink); }
.input, select.input, textarea.input {
width: 100%; min-height: 3rem; padding: .7rem .9rem; border: 1px solid var(--line-strong); border-radius: var(--r-sm);
background: var(--surface); color: var(--ink); font: inherit; line-height: 1.3;
transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.input::placeholder { color: var(--ink-3); }
.input:hover { border-color: var(--ink-3); }
.input:focus { outline: 0; border-color: var(--blue-600); box-shadow: 0 0 0 3px var(--blue-100); }
textarea.input { min-height: 7rem; resize: vertical; }
select.input { appearance: none; padding-right: 2.5rem; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%23363957' stroke-width='1.5'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right .8rem center; }
.check { display: flex; gap: .6rem; align-items: flex-start; font-size: var(--fs-small); color: var(--ink-2); }
.check input { appearance: none; flex: none; width: 1.125rem; height: 1.125rem; margin-top: .15rem; border: 1px solid var(--line-strong); border-radius: 3px; background: var(--surface); display: grid; place-items: center; cursor: pointer; }
.check input:checked { background: var(--navy); border-color: var(--navy); }
.check input:checked::after { content: ""; width: .35rem; height: .6rem; border: solid #fff; border-width: 0 2px 2px 0; transform: translateY(-1px) rotate(45deg); }
.form { display: grid; gap: var(--s-4); }
.form__row { display: grid; gap: var(--s-4); }
@media (min-width: 40em) { .form__row { grid-template-columns: 1fr 1fr; } }
.hint { font-size: var(--fs-small); color: var(--ink-3); }
/* ---------- Medier og placeholders ----------
Når filen indlæses, sætter media.js .is-loaded → placeholder skjules. Ingen kode røres. */
.media { position: relative; margin: 0; aspect-ratio: var(--ar, 16/9); overflow: hidden; border-radius: var(--r-lg); background: var(--ph-bg); }
.media--square { border-radius: 0; }
.media > img, .media > video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--fokus, 50% 50%); opacity: 0; transition: opacity var(--dur-slow) var(--ease); }
.media.is-loaded > img, .media.is-loaded > video { opacity: 1; }
/* Billednumre til gennemgangen (Adam 1. okt. 2026). Mærkaten sidder i figurens øverste venstre
hjørne og er bevidst lille og rolig, så den ikke overdøver billedet. Hele laget forsvinder,
når BILLEDNUMRE sættes til False i build.py. Oversigt over alle numre: /billednumre/ */
.media__nr { position: absolute; top: .4rem; left: .4rem; z-index: 3; pointer-events: none;
font-family: var(--font-body); font-size: .625rem; font-weight: 600; letter-spacing: .02em; line-height: 1;
padding: .32em .5em; border-radius: 5px; color: #fff; background: rgba(2,3,43,.82);
box-shadow: 0 2px 8px -2px rgba(2,3,43,.5); white-space: nowrap; }
/* Fuldbredde-heroer: mærkaten ville ligge bag den faste header, så den skubbes ned under den. */
:is(.hero--video, .hero--photo) .media__nr { top: 5rem; }
@media print { .media__nr { display: none; } }
.media__ph {
position: absolute; inset: 0; padding: var(--s-4); display: flex; flex-direction: column; justify-content: flex-end; gap: var(--s-2);
color: var(--ph-ink); font-size: var(--fs-small); line-height: 1.4;
background: var(--ph-bg) repeating-linear-gradient(135deg, transparent 0 14px, rgba(2,3,43,.035) 14px 15px);
border: 1px dashed var(--ph-line); border-radius: inherit;
}
.media__ph p { margin: 0; max-width: 40em; text-wrap: pretty; }
.media__tag { align-self: flex-start; font-size: .6875rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; padding: .2em .55em; border: 1px solid var(--ph-line); border-radius: 2px; color: var(--ph-ink); background: rgba(255,255,255,.6); }
.media.is-loaded .media__ph { display: none; }
.media--logo { aspect-ratio: 5/3; border-radius: 0; background: var(--bg); }
.media--logo .media__ph { justify-content: center; align-items: center; font-weight: 600; letter-spacing: .06em; font-size: .8125rem; background: transparent; border: 0; }
.media--logo .media__ph .media__tag { display: none; }
/* ---------- Swatches (styleguide) ---------- */
.sw { border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; background: var(--surface); }
.sw__chip { height: 4.5rem; border-bottom: 1px solid var(--line); }
.sw__meta { padding: var(--s-3) var(--s-4); font-size: var(--fs-small); line-height: 1.35; }
.sw__meta code { display: block; color: var(--ink-3); font-size: .8125rem; }
/* ---------- Hjælpeklasser ---------- */
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.mt-0 { margin-top: 0 } .mb-0 { margin-bottom: 0 }
.text-navy { color: var(--navy); }
/* ==========================================================================
Site-komponenter
========================================================================== */
/* ---------- Header ---------- */
.header { position: sticky; top: 0; z-index: 50; background: var(--bg-glass); backdrop-filter: saturate(1.2) blur(8px); border-bottom: 1px solid var(--line); }
.header__in { display: flex; align-items: center; justify-content: space-between; gap: var(--s-5); min-height: 4.25rem; }
/* Desktop: logo | menu | værktøjer i tre lige brede kolonner, så menuen sidder præcis midt på skærmen (Adam 9. sep.). */
@media (min-width: 56em) { .header__in { display: grid; grid-template-columns: 1fr auto 1fr; } .header__in .logo { justify-self: start; } .header__in .nav { justify-self: center; } .header__in .header__tools { justify-self: end; } .page-book .header__in { display: flex; } }
.logo { font-family: var(--font-display); font-weight: 700; letter-spacing: .12em; font-size: 1rem; color: var(--navy); text-decoration: none; white-space: nowrap; display: inline-flex; align-items: center; gap: .6rem; }
.logo img { height: 1.75rem; width: auto; }
/* Logomærke: assets/logo/logo.svg (vektoriseret fra det nuværende sites 142×45-fil; udskift med Adams original-SVG, samme navn). Bruges som maske, så farven følger fladen: navy på hvid, hvid på navy. */
.logo__mark { display: block; height: 2.1rem; aspect-ratio: 1704 / 540; background: var(--navy); mask: url(/assets/logo/logo.svg) center / contain no-repeat; -webkit-mask: url(/assets/logo/logo.svg) center / contain no-repeat; }
.footer .logo__mark, .section--navy .logo__mark { background: #fff; }
@media (min-width: 56em) { .logo__mark { height: 2.6rem; } .footer .logo__mark { height: 3rem; } }
.nav { display: none; align-items: center; gap: var(--s-6); }
.nav a { color: var(--ink); text-decoration: none; font-weight: 500; font-size: var(--fs-small); padding: .25rem 0; border-bottom: 1px solid transparent; transition: border-color var(--dur) var(--ease), color var(--dur) var(--ease); }
.nav a:hover, .nav a[aria-current="page"] { border-bottom-color: var(--navy); color: var(--navy); }
.header .btn { display: none; }
.burger { display: inline-grid; place-items: center; width: 2.75rem; height: 2.75rem; border: 1px solid var(--line-strong); border-radius: var(--r-sm); background: var(--bg); cursor: pointer; }
.burger span { display: block; width: 1.125rem; height: 2px; background: var(--navy); position: relative; }
.burger span::before, .burger span::after { content: ""; position: absolute; left: 0; width: 100%; height: 2px; background: var(--navy); transition: transform var(--dur) var(--ease); }
.burger span::before { top: -6px; } .burger span::after { top: 6px; }
@media (min-width: 56em) { .nav, .header .btn { display: inline-flex; } .burger { display: none; } }
.menu { position: fixed; inset: 4.25rem 0 0; background: var(--bg); z-index: 49; padding: var(--s-6) var(--gutter); display: none; flex-direction: column; gap: var(--s-2); }
.menu.is-open { display: flex; }
.menu a:not(.btn) { font-family: var(--font-display); font-size: var(--fs-h2); font-weight: 500; letter-spacing: -0.02em; color: var(--ink); text-decoration: none; padding: var(--s-3) 0; border-bottom: 1px solid var(--line); }
.menu .btn { margin-top: var(--s-5); align-self: flex-start; }
body.menu-open { overflow: hidden; }
/* ---------- Hero ---------- */
.hero { position: relative; }
.hero__copy { max-width: 40rem; }
.hero__copy .lead { margin-top: var(--s-4); }
.hero__ctas { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-6); }
.hero__trust { padding: 0; display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-5); margin-top: var(--s-6); font-size: var(--fs-small); color: var(--ink-3); }
.hero__trust li { list-style: none; display: flex; align-items: center; gap: .5em; }
.hero__trust li::before { content: ""; width: .375rem; height: .375rem; border-radius: 50%; background: var(--blue-700); }
.hero__trust ul { margin: 0; padding: 0; display: contents; }
/* A: fuld video, tekst over */
.hero--video { color: var(--on-navy); background: var(--navy); min-height: min(88vh, 52rem); display: grid; align-items: end; isolation: isolate; }
.hero--video .media { position: absolute; inset: 0; aspect-ratio: auto; border-radius: 0; z-index: 0; background: var(--navy); }
.hero--video .media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(2,3,43,.15) 0%, rgba(2,3,43,.55) 60%, rgba(2,3,43,.85) 100%); }
.hero--video .media__ph { color: rgba(255,255,255,.75); background: linear-gradient(135deg, #0d0f45, #02032b); border-color: rgba(255,255,255,.25); }
.hero--video .media__ph .media__tag { color: #fff; border-color: rgba(255,255,255,.4); background: rgba(255,255,255,.1); }
.hero--video .container { padding-block: var(--s-8) var(--s-9); position: relative; z-index: 1; }
.hero--video :is(h1, .display) { color: #fff; }
.hero--video .lead { color: rgba(255,255,255,.85); }
.hero--video .hero__trust { color: rgba(255,255,255,.7); }
.hero--video .hero__trust li::before { background: #fff; }
/* Roterende nøglesætning i forsidens hero (Adam 13. sep. 2026, reference bechbruun.com).
Ordene ruller nedad ind på plads; det sidste ord lander først, de foregående følger med 140 ms mellemrum.
site.js pakker hvert ord i en og skifter .is-active hvert 1,95 sek. */
.hero__headline .keyphrases { position: relative; display: block; height: 1.5em; margin-block: -0.175em; overflow: hidden; }
.keyphrases:not(.is-ready) .keyphrase:not(:first-child) { display: none; }
.keyphrase { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: .25em; white-space: nowrap; }
.keyphrase__word { display: inline-block; transform: translateY(-145%); transition: transform .8s cubic-bezier(.65, 0, .35, 1); }
.keyphrase__word:nth-last-child(1) { transition-delay: 0ms; }
.keyphrase__word:nth-last-child(2) { transition-delay: 140ms; }
.keyphrase__word:nth-last-child(3) { transition-delay: 280ms; }
.keyphrase__word:nth-last-child(4) { transition-delay: 420ms; }
.keyphrase__word:nth-last-child(5) { transition-delay: 560ms; }
.keyphrase.is-active .keyphrase__word { transform: translateY(0); }
.keyphrase.is-leaving .keyphrase__word { transform: translateY(145%); }
.keyphrase.no-anim .keyphrase__word { transition: none; }
@media (max-width: 47.99em) { .hero__headline { font-size: min(var(--fs-display), 10vw); } }
@media (prefers-reduced-motion: reduce) {
.keyphrase:not(.is-active) { display: none; }
.keyphrase__word { transition: none; transform: none; }
}
/* Forsidens hero alene: overskrift, lead og knapper står midt på fladen, vandret og lodret (Adam 13. sep.).
Sektionshovederne længere nede blev også centreret i første omgang; det er rullet tilbage, kun heroen er centreret. */
.page-forside .hero__copy { max-width: 54rem; margin-inline: auto; text-align: center; }
.page-forside .hero--video { align-items: center; }
.page-forside .hero--video .container { padding-block: var(--s-9); }
.page-forside .hero__ctas { justify-content: center; }
/* B: stort foto over, statement under */
.hero--photo .media { aspect-ratio: 16/9; border-radius: 0; max-height: 70vh; }
@media (min-width: 56em) { .hero--photo .media { aspect-ratio: 21/9; } }
.hero--photo .container { padding-block: var(--s-8); }
/* D: bred hero — statement-overskrift over et foto i fuld skærmbredde (cases, Adam 12. sep.: siden må ikke ligne de andre sider). */
.hero--wide { padding-top: var(--section-y-sm); }
.hero--wide .hero__copy { max-width: 44rem; }
.hero--wide h1 { font-size: var(--fs-display); max-width: 16ch; }
.hero--wide .lead { max-width: 34rem; }
.hero--wide .hero__ctas { margin-bottom: var(--s-7); }
.hero__wide { margin: 0; }
/* Videoen lægger sig hen over fotoets nederste højre hjørne (Adam 12. sep.: "så det ligger ovenpå hinanden på en
lækker, sofistikeret måde"). Mobil: video og tekst stables som normalt under fotoet. */
.hero__stack { position: relative; }
.hero__film { margin-top: var(--s-5); }
.hero__filmtext { margin-top: var(--s-6); max-width: 34rem; }
.hero__filmtext h2, .casefilm h2 { font-size: var(--fs-h3); margin: var(--s-2) 0 var(--s-4); }
.hero__filmtext p { color: var(--ink-2); margin: 0; }
.hero__filmtext p + p { margin-top: var(--s-4); }
.hero__filmtext .btn { margin-top: var(--s-6); }
.hero__wide .media { border-radius: 0; aspect-ratio: 16/9; }
@media (min-width: 56em) {
/* fast højde i stedet for max-height: med aspect-ratio + max-height krymper figuren i bredden i stedet for at beskære */
.hero__wide .media { aspect-ratio: auto; width: 100%; height: clamp(20rem, 38vw, 36rem); }
.hero__overlay { position: absolute; inset: 0; display: flex; align-items: flex-end; justify-content: flex-end; pointer-events: none; }
/* translate (ikke transform): .reveal.is-in sætter transform: none og ville ellers nulstille forskydningen */
/* Videoen er kvadratisk fra 2. okt. 2026 (LinkedIn-klippet). 36rem bred gav 576x576,
som haengte alt for langt ned under fotoet; 26rem rammer samme hoejde som den
gamle 16:9 i 36rem. Maal igen, hvis formatet skifter. */
.hero__film { margin-top: 0; width: min(26rem, 30vw); translate: 0 24%; pointer-events: auto; box-shadow: 0 40px 70px -25px rgba(2,3,43,.6); }
.hero__filmtext { margin-top: var(--s-8); }
}
/* C: tekst ved siden af video */
.hero--split { padding-block: var(--section-y-sm) var(--section-y); }
/* Fullview-casen (Adam 2. okt. 2026: "den kan godt faa lov til at fylde noget mere",
ca. 50 % stoerre). Videoen er kvadratisk fra 2. okt., og i en split skal enten
teksten eller videoen klemmes. Teksten staar derfor over og filmen under:
52,5rem = 840 px paa 1440 mod splittens 560, altsaa praecis 50 % bredere.
Loftet er fast, saa den ikke vokser videre paa 1920. */
.hero--film { padding-block: var(--section-y-sm) var(--section-y); }
.hero--film .hero__copy { max-width: 46rem; }
.hero__filmrow { display: grid; gap: var(--s-7); margin-top: var(--s-7); }
@media (min-width: 56em) { .hero__filmrow { grid-template-columns: min(52.5rem, 62vw) 1fr;
gap: var(--s-8); align-items: center; } }
/* Tallene staar lodret ved siden af filmen, saa den tomme tredjedel bliver brugt. */
.hero__filmstats .stats { grid-template-columns: 1fr; gap: var(--s-5); border-top: 0; padding-top: 0; }
.hero__filmbig { position: relative; }
.hero__filmbig .media { box-shadow: 0 40px 80px -30px rgba(2,3,43,.45); }
@media (max-width: 55.99em) { .hero__filmbig { width: 100%; margin-top: var(--s-6); } }
.hero--split .split { align-items: center; }
@media (min-width: 56em) { .hero--split .split { grid-template-columns: 6fr 6fr; } }
/* Sektions-header (eyebrow + h2 + lead) */
.section__head { max-width: 40rem; margin-bottom: var(--s-7); }
.section__head--row { max-width: none; display: grid; gap: var(--s-4); align-items: end; margin-bottom: var(--s-7); }
@media (min-width: 56em) { .section__head--row { grid-template-columns: 1fr auto; column-gap: var(--s-7); } .section__head--row .section__head { margin-bottom: 0; } }
/* Sektionshoved med foto i højre kolonne (services · Det får I, Adam 10. sep.): teksten + CTA til venstre, fotoet fylder den plads, kortene ikke bruger. Kortene under er fuld bredde. */
.section__head--media { max-width: none; display: grid; gap: var(--s-5); align-items: center; margin-bottom: var(--s-7); }
.section__head--media .section__head { margin-bottom: 0; }
.section__head--media .section__head .btn { margin-top: var(--s-5); }
.section__head-media .media { border-radius: 10px; box-shadow: 0 30px 60px -30px rgba(2,3,43,.45); }
@media (max-width: 55.99em) { .section__head-media { display: none; } }
@media (min-width: 56em) { .section__head--media { grid-template-columns: minmax(0, 1fr) minmax(18rem, 30rem); column-gap: var(--s-8); } }
/* ---------- Tal ---------- */
.stats { display: grid; gap: var(--s-6); grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr)); border-top: 1px solid var(--line); padding-top: var(--s-6); }
.stats .num { display: block; margin-bottom: var(--s-2); }
/* Tallet er display-grad (op til 72 px), og .num er display:block, så blokken passer
i kolonnen, mens selve tallet kan være bredere og løbe ud over kanten. "250.000+"
gjorde netop det og klistrede sig til nabotallet: "250.000+1" (Carl, 2. okt. 2026).
Løsningen er at måle på kolonnen i stedet for at tælle tal: cellen er en container,
og tallet må højst fylde 21 % af dens bredde pr. grad. Et kort tal i en bred kolonne
rammer stadig loftet og står i fuld display-grad; kun de lange skaleres ned. */
.stats > * { container-type: inline-size; }
.stats .num { font-size: min(var(--fs-display), 21cqw); }
@supports not (width: 1cqw) { .stats .num { font-size: var(--fs-h1); } }
@media (min-width: 80em) { .stats--narrow { max-width: 58rem; } }
/* Lille link under hvert tal (Adam 1. okt. 2026): tallene pegede ingen steder hen.
Dæmpet, så det ikke konkurrerer med sidens ene rigtige CTA. */
.stats a.stat__link { display: inline-flex; align-items: center; gap: .4rem; margin-top: .6rem;
font-size: var(--fs-small); font-weight: 500; color: var(--ink-3); text-decoration: none;
transition: color var(--dur) var(--ease); }
.stats a.stat__link .arrow { transition: transform var(--dur) var(--ease); }
.stats a.stat__link:hover { color: var(--navy); }
.stats a.stat__link:hover .arrow { transform: translateX(.2rem); }
.section--navy .stats a.stat__link { color: rgba(255,255,255,.66); }
.section--navy .stats a.stat__link:hover { color: #fff; }
.has-drift .stats { position: relative; z-index: 1; }
/* Ved siden af et drift-foto er der plads til to kolonner, ikke tre + en enlig række. */
@media (min-width: 64em) { .has-drift .stats { grid-template-columns: repeat(2, 1fr); row-gap: var(--s-7); } }
.stats p { margin: 0; font-size: var(--fs-small); color: var(--ink-3); max-width: 18em; }
.section--navy .stats { border-color: rgba(255,255,255,.2); }
.section--navy .stats p { color: var(--on-navy-2); }
.section--navy .muted { color: rgba(255,255,255,.45); }
/* ---------- Trin (proces) ---------- */
.steps { counter-reset: step; display: grid; gap: 0; }
.step { counter-increment: step; display: grid; gap: var(--s-3); padding: var(--s-6) 0; border-top: 1px solid var(--line); }
@media (min-width: 56em) { .step { grid-template-columns: 6rem 1fr 1.4fr; gap: var(--s-6); align-items: start; } }
.step::before { content: counter(step, decimal-leading-zero); font-family: var(--font-display); font-size: var(--fs-h3); font-weight: 500; color: var(--blue-700); letter-spacing: -0.02em; }
.step h3 { margin: 0; }
.step p { margin: 0; color: var(--ink-2); }
.step > .small { color: var(--ink-3); }
@media (min-width: 56em) { .step > .small { grid-column: 2 / -1; margin-top: calc(-1 * var(--s-2)); } }
/* ---------- Team ---------- */
.team { display: grid; gap: var(--s-5) var(--s-4); grid-template-columns: repeat(2, 1fr); }
@media (min-width: 40em) { .team { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 64em) { .team { grid-template-columns: repeat(4, 1fr); } }
.team--dense { gap: var(--s-6) var(--s-5); }
@media (min-width: 40em) { .team--dense { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 64em) { .team--dense { grid-template-columns: repeat(4, 1fr); } }
.person .media { aspect-ratio: 1/1; border-radius: var(--r-md); }
.person__name { margin: var(--s-3) 0 0; font-weight: 600; color: var(--ink); font-size: var(--fs-body); line-height: 1.3; }
.person__role { margin: .15rem 0 0; font-size: var(--fs-small); color: var(--ink-3); }
.team--dense .person__name { font-size: var(--fs-body); }
.team--dense .person__role { font-size: var(--fs-small); }
/* ---------- Citater ---------- */
.testimonials { display: grid; gap: var(--s-5); grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)); }
.testimonial { display: grid; gap: var(--s-4); padding: var(--s-6); border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); }
.testimonial p { margin: 0; font-size: 1.0625rem; line-height: 1.55; color: var(--ink); }
.testimonial footer { display: flex; gap: var(--s-3); align-items: center; font-size: var(--fs-small); color: var(--ink-3); }
.testimonial footer .media { width: 3rem; aspect-ratio: 1/1; border-radius: 50%; flex: none; }
.testimonial footer strong { display: block; color: var(--ink); font-weight: 600; }
/* ---------- Mosaik ---------- */
.mosaic { display: grid; gap: var(--s-3); grid-template-columns: repeat(2, 1fr); }
.mosaic > * { min-width: 0; }
.mosaic .media { aspect-ratio: 1/1; width: 100%; }
@media (min-width: 56em) { .mosaic { grid-template-columns: repeat(4, 1fr); } .mosaic > :first-child { grid-column: span 2; grid-row: span 2; } .mosaic > :first-child .media { height: 100%; } }
/* ---------- FAQ ---------- */
.faq { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { list-style: none; cursor: pointer; padding: var(--s-5) 0; display: flex; justify-content: space-between; gap: var(--s-4); align-items: center; font-family: var(--font-display); font-weight: 500; font-size: var(--fs-h3); letter-spacing: -0.01em; color: var(--ink); }
.faq summary::-webkit-details-marker { display: none; }
/* Plus-ikonet tegnes med to streger i stedet for et tekst-tegn, så det sidder præcis i midten af cirklen (Adam 9. sep.). Åben = drejet 45°, altså et kryds. */
.faq summary::after { content: ""; flex: none; width: 2rem; height: 2rem; box-sizing: border-box; border: 1px solid var(--line-strong); border-radius: 50%; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M16 10v12M10 16h12' stroke='%2302032b' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E") center / 100% 100% no-repeat; transition: transform var(--dur) var(--ease), border-color var(--dur) var(--ease); }
.faq details[open] summary::after { transform: rotate(45deg); border-color: var(--navy); }
.faq details > div { padding: 0 0 var(--s-5); max-width: 46rem; color: var(--ink-2); }
/* ---------- Case-kort ---------- */
.case { display: grid; gap: var(--s-4); padding: var(--s-6); border: 1px solid var(--line); border-radius: var(--r-md); text-decoration: none; color: inherit; background: var(--surface); transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }
.case:hover { border-color: var(--navy); box-shadow: var(--shadow-2); color: inherit; }
.case__client { font-size: var(--fs-small); color: var(--ink-3); font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }
.case .num { font-size: var(--fs-h1); }
.case h3 { margin: 0; }
.case__more { margin-top: auto; color: var(--blue-700); font-weight: 600; font-size: var(--fs-small); }
/* Case-kort med ansigt, tal og kundens logo/brandfarve (Adam 9. sep.). --brand og --brand-ink sættes pr. kort i HTML. */
.case--foto { padding: 0; gap: 0; overflow: clip; --brand: var(--navy); --brand-ink: #fff; grid-template-rows: auto 1fr; }
.case--foto:hover { border-color: var(--brand); }
.case__media { position: relative; display: block; }
.case__media .media { border-radius: 0; }
.case__media .media img { transition: transform .7s var(--ease); }
.case--foto:hover .case__media .media img { transform: scale(1.04); }
.case__num { position: absolute; left: var(--s-5); bottom: 0; transform: translateY(50%); z-index: 1; background: var(--brand); color: var(--brand-ink); font-family: var(--font-display); font-size: clamp(1.7rem, 1.2rem + 1.2vw, 2.3rem); font-weight: 500; letter-spacing: -0.03em; line-height: 1; padding: .38em .55em; border-radius: 8px; box-shadow: 0 14px 28px -14px rgba(2,3,43,.55); }
.case__num--video { display: inline-flex; align-items: center; gap: .45em; font-size: 1rem; font-weight: 600; letter-spacing: 0; padding: .7em .95em; }
.case__num--video svg { width: .85em; height: .85em; }
.case__body { display: grid; gap: var(--s-3); padding: calc(var(--s-6) + .9rem) var(--s-5) var(--s-5); grid-template-rows: auto auto 1fr auto; }
.case__brand { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); min-height: 1.5rem; }
.case__logo { display: block; height: 1.3rem; width: auto; max-width: 8.5rem; object-fit: contain; object-position: left center; }
.case__logo--mask { width: 8rem; height: 1rem; background: var(--ink); mask: var(--logo) left center / contain no-repeat; -webkit-mask: var(--logo) left center / contain no-repeat; }
.case--foto h3 { font-size: var(--fs-h3); }
.case--foto .case__more { color: var(--navy); margin-top: var(--s-2); align-self: end; }
.case--foto .case__more .arrow { display: inline-block; transition: transform var(--dur) var(--ease); }
.case--foto:hover .case__more { color: var(--brand); }
.case--foto:hover .case__more .arrow { transform: translateX(4px); }
/* ---------- Book-sektion ---------- */
.book { background: var(--navy); color: var(--on-navy-2); }
.book .container { display: grid; gap: var(--s-7); padding-block: var(--section-y); }
@media (min-width: 56em) { .book .container { grid-template-columns: 5fr 6fr; gap: var(--s-9); align-items: start; } }
.book :is(h2, h3) { color: #fff; }
.book .form { background: var(--surface); color: var(--ink-2); padding: var(--s-6); border-radius: var(--r-md); }
.book .form h3 { color: var(--ink); margin-bottom: var(--s-2); }
.book__alt { display: grid; gap: var(--s-4); margin-top: var(--s-6); font-size: var(--fs-small); }
.book__alt a { color: #fff; }
.form__ok { display: none; padding: var(--s-6); background: var(--blue-100); color: var(--navy); border-radius: var(--r-md); }
.form.is-sent > *:not(.form__ok) { display: none; } .form.is-sent .form__ok { display: block; }
/* Fejlbesked: vises kun, hvis serveren ikke tog imod. Formularen bliver stående,
så det, man har skrevet, ikke er tabt, og man kan prøve igen. */
.form__err { display: none; padding: var(--s-5); border: 1px solid var(--line-strong); border-left: 3px solid var(--navy); background: var(--bg-2); color: var(--ink-2); border-radius: var(--r-sm); font-size: var(--fs-small); }
.form.is-failed .form__err { display: block; }
.form__err strong { color: var(--ink); }
.book .form .form__err { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.35); border-left-color: #fff; color: rgba(255,255,255,.85); }
.book .form .form__err strong, .book .form .form__err a { color: #fff; }
/* ---------- CTA-række mellem sektioner ---------- */
.cta-row { display: flex; flex-wrap: wrap; gap: var(--s-3); align-items: flex-start; margin-top: var(--s-7); }
.cta-row .btn--secondary, .hero__ctas .btn--on-navy-outline { min-height: 3.625rem; }
.cta-row .muted { font-size: var(--fs-small); }
/* ---------- Footer ---------- */
.footer { background: var(--navy); color: var(--on-navy-2); font-size: var(--fs-small); border-top: 1px solid rgba(255,255,255,.1); }
.footer .container { padding-block: var(--s-8) var(--s-6); display: grid; gap: var(--s-7); }
@media (min-width: 56em) { .footer .container { grid-template-columns: 2fr 1fr 1fr 1.4fr; gap: var(--s-8); } }
.footer a { color: #fff; text-decoration: none; }
.footer a:hover { text-decoration: underline; }
.footer h4 { color: #fff; font-family: var(--font-body); font-size: .8125rem; letter-spacing: .08em; text-transform: uppercase; font-weight: 600; margin: 0 0 var(--s-4); }
.footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.footer .logo { color: #fff; margin-bottom: var(--s-4); }
.footer__bottom { grid-column: 1 / -1; border-top: 1px solid rgba(255,255,255,.12); padding-top: var(--s-5); display: flex; flex-wrap: wrap; gap: var(--s-4); justify-content: space-between; color: rgba(255,255,255,.5); }
/* ---------- Rolige indgangs-animationer ---------- */
.reveal { opacity: 0; transform: translateY(12px); transition: opacity .6s var(--ease), transform .6s var(--ease); }
.reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; } }
/* Video-hero: skjul poster-flimmer */
.media video { background: var(--ph-bg); }
/* ---------- Video med lyd-knap ---------- */
.video-sound { position: relative; }
/* Oeverst til hoejre, ikke nederst: nederst laa den oven paa videoens egen
fuldskaerms- og tidslinjekontrol, naar lyden var slaaet til (Carl 2. okt. 2026).
Oeverst til venstre sidder billednummeret, saa de to stoeder ikke sammen. */
.sound-toggle { position: absolute; right: var(--s-4); top: var(--s-4); z-index: 2; min-height: 2.5rem; padding: .5rem 1rem; border-radius: var(--r-sm); border: 1px solid rgba(255,255,255,.5); background: rgba(2,3,43,.6); color: #fff; font: inherit; font-size: var(--fs-small); font-weight: 600; cursor: pointer; backdrop-filter: blur(6px); display: inline-flex; align-items: center; gap: .5em; }
.sound-toggle::before { content: ""; width: .5rem; height: .5rem; border-radius: 50%; background: #fff; opacity: .6; }
.sound-toggle[aria-pressed="true"] { background: #fff; color: var(--navy); border-color: #fff; }
.sound-toggle[aria-pressed="true"]::before { background: var(--navy); opacity: 1; }
/* ---- scroll-craft-akter (kun sider med scrollcraft: true i front-matter). Motoren driver [data-sc-*]; det her er vores egen opsætning. ---- */
.hero__plane { position: absolute; inset: -4rem 0; z-index: 0; will-change: transform; }
.hero__plane .media { inset: 0; }
/* Argumentet: navy stage, tre linjer der krydsfader på samme sted */
.argument { background: var(--navy); color: var(--on-navy); }
.argument__stage { display: grid; align-items: center; padding-top: 4.25rem; background: var(--navy); }
/* Billedrammen: position og format (vw/vh) skrives af site.js ud fra scroll-fremdrift, så den morfer fra portræt til bredformat til høj. */
.argument__frame { position: absolute; left: var(--fx, 58vw); top: var(--fy, 14vh); width: var(--fw, 34vw); height: var(--fh, 70vh); border-radius: 12px; overflow: hidden; box-shadow: 0 40px 80px -30px rgba(0,0,0,.7); z-index: 0; will-change: left, top, width, height; }
.argument__img { position: absolute; inset: 0; opacity: var(--o, 0); will-change: opacity; }
.argument__img .media { position: absolute; inset: 0; aspect-ratio: auto; border-radius: 0; width: 100%; height: 100%; }
.argument__copy { position: relative; z-index: 1; }
/* Kapitel-navigation i argument-scenen (Adam 1. okt. 2026: "gør det mere intuitivt ovre i
højre side ... vis at den loader nedad ... gør det muligt at klikke, så den skipper ned").
Lodret skinne på desktop, så linjen selv viser retningen; vandret række på mobil,
hvor der ikke er plads i siden. Fyldet styres af --sc-p fra scrollcraft. */
.argument__chapters { position: absolute; z-index: 3; right: var(--gutter); top: 50%; translate: 0 -50%;
display: grid; grid-template-columns: 2px auto; gap: var(--s-4); align-items: stretch; }
.argument__bar { position: relative; background: rgba(255,255,255,.2); border-radius: 2px; }
.argument__bar::after { content: ""; position: absolute; left: 0; right: 0; top: 0;
height: calc(var(--sc-p, 0) * 100%); background: #fff; border-radius: 2px; }
.argument__nav { display: grid; gap: var(--s-5); margin: 0; padding: 0; list-style: none; align-content: space-between; }
.argument__nav button { display: grid; gap: .2rem; justify-items: start; text-align: left;
background: none; border: 0; padding: .1rem 0; cursor: pointer; color: rgba(255,255,255,.45);
font: inherit; transition: color var(--dur) var(--ease), translate var(--dur) var(--ease); }
.argument__num { font-size: .6875rem; font-weight: 600; letter-spacing: .12em; opacity: .7; }
.argument__name { font-size: var(--fs-small); font-weight: 500; letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; }
.argument__nav button:hover, .argument__nav button:focus-visible { color: #fff; translate: -.2rem 0; }
.argument__nav li.is-active button { color: #fff; }
@media (max-width: 55.99em) {
.argument__chapters { right: auto; left: var(--gutter); top: calc(4.25rem + var(--s-4)); translate: none;
grid-template-columns: 1fr; gap: var(--s-3); }
.argument__bar { height: 2px; order: 2; }
.argument__bar::after { height: 100%; width: calc(var(--sc-p, 0) * 100%); }
.argument__nav { grid-auto-flow: column; grid-auto-columns: max-content; gap: var(--s-4); align-content: start; }
.argument__num { display: none; }
.argument__name { font-size: .6875rem; }
}
.argument__lines { display: grid; grid-template-columns: 1fr 1fr; column-gap: var(--s-6); min-height: min(40vh, 22rem); align-items: center; margin-top: 8vh; }
.argument__line { grid-area: 1 / 1; }
.argument__line--right { grid-area: 1 / 2; }
/* CTA som konklusion i tredje scene (Adam 9. sep.): under teksten, ikke i toppen. */
.argument__line .argument__cta { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: min(var(--s-6), 4vh); max-width: none; }
.argument__cta .btn { padding: .9rem 1.35rem; font-size: 1.02rem; }
.argument__line > * { margin: 0; color: #fff; max-width: 18ch; text-wrap: balance; }
/* Displaystørrelsen i argumentet er bundet til både bredde og højde, så tre-fire linjer + CTA altid kan være i én skærm (ned til 1280×720). */
.argument__line .display { font-size: min(clamp(1.9rem, 0.9rem + 2.6vw, 3.9rem), 6.6vh); line-height: 1.06; }
.argument__line--wide > .display { max-width: 19ch; }
.argument__line--big > .display { font-size: min(clamp(2rem, 1rem + 3vw, 4.2rem), 7vh); max-width: 14ch; line-height: 1.05; }
.argument__line--big em { font-style: normal; color: rgba(255,255,255,.55); }
/* max-width: 18ch paa .argument__line > * er til display-teksten. Den ramte ogsaa
labelen, saa "01 · Under one roof" og "03 · No minimum term" brak i to linjer paa
engelsk (Eigil 2. okt. 2026). Dansk var kort nok til at skjule fejlen. */
.argument__label { font-size: var(--fs-small); letter-spacing: .06em; text-transform: uppercase; color: rgba(255,255,255,.6); margin-bottom: var(--s-3); max-width: none; white-space: nowrap; }
@media (max-width: 55.99em) { .argument__lines { grid-template-columns: 1fr; } .argument__line--right { grid-area: 1 / 1; } .argument__stage { align-items: end; padding-bottom: var(--s-6); } .argument__frame { box-shadow: 0 24px 48px -24px rgba(0,0,0,.7); } .argument__lines { min-height: 0; } .argument__line--big > .display { font-size: var(--fs-h1); } }
/* Showcase (cases): sticky stage, kort i 4:3 med tekst under, stor luft imellem. --k sættes af site.js ud fra afstand til midten. */
.showcase__stage { display: grid; grid-template-rows: auto 1fr; grid-template-columns: 100%; padding-top: 4.25rem; background: var(--bg-2); }
.showcase__head { padding-block: var(--s-6) 0; display: flex; align-items: end; justify-content: space-between; gap: var(--s-5); flex-wrap: wrap; }
.showcase__track { display: flex; align-items: center; gap: clamp(1.5rem, 6vw, 6rem); padding-inline-start: var(--enter); will-change: transform; }
.showcase__rail { --enter: 28vw; padding-inline-end: calc(max(var(--gutter, 1.25rem), (100vw - var(--container)) / 2) + var(--enter)) !important; }
@media (max-width: 55.99em) { .showcase__rail { --enter: 28vw; } }
.showcase__head h2 { margin-top: var(--s-2); }
.showcase__rail { display: flex; width: max-content; align-items: center; padding-inline: max(var(--gutter, 1.25rem), calc((100vw - var(--container)) / 2)); }
/* Kortbredden er også bundet til skærmhøjden: 4:3-billede + titel + underlinje + overskrift skal kunne stå i én skærm (ned til 1280×720). */
.show { flex: none; width: min(clamp(18rem, 42vw, 46rem), calc((100svh - 24rem) * 4 / 3)); display: grid; gap: var(--s-2); text-decoration: none; color: inherit; transform: scale(var(--k, 1)); transform-origin: 50% 50%; will-change: transform; opacity: var(--o, 1); }
.show:hover { color: inherit; }
.show .media { width: 100%; border-radius: 10px; background: var(--bg); box-shadow: 0 30px 60px -30px rgba(2,3,43,.4); }
.show__title { margin-top: var(--s-3); font-weight: 500; font-size: min(var(--fs-h2), 4.4vh); letter-spacing: -0.02em; line-height: 1.2; min-height: 2.4em; }
.show__sub { color: var(--ink-3); font-size: var(--fs-small); }
/* Sidste kort i skinnen: ét foto i samme format som de to videokort, med de tre skrevne cases som
tal-chips i kundens egen brandfarve. Afløser 2x2-mosaikken af kundeportrætter (Adam 1. okt. 2026):
de tre leverede portrætter var sort/hvid, grøn plantebaggrund og udklip på cyan cirkel og kunne
ikke bringes til at passe sammen. Nu står farverne kun i chipsene. */
.show__more { position: relative; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 10px; background: var(--navy);
box-shadow: 0 30px 60px -30px rgba(2,3,43,.4); display: block; }
.show__more .media { height: 100%; aspect-ratio: auto; border-radius: 0; box-shadow: none; }
.show__more .media img { transition: transform .7s var(--ease); }
.show--more:hover .show__more .media img { transform: scale(1.04); }
.show__more::after { content: ""; position: absolute; inset: 0; pointer-events: none;
background: linear-gradient(180deg, rgba(2,3,43,0) 42%, rgba(2,3,43,.42) 100%); }
.show__tags { position: absolute; left: clamp(.7rem, 1.6vw, 1.4rem); bottom: clamp(.7rem, 1.6vw, 1.4rem);
z-index: 1; display: flex; flex-direction: column; align-items: flex-start; gap: clamp(.3rem, .8vh, .6rem); }
.show__tag { display: block; background: var(--brand); color: var(--brand-ink);
font-family: var(--font-display); font-weight: 500; letter-spacing: -0.03em; line-height: 1; font-size: min(clamp(1.15rem, .7rem + 1vw, 1.9rem), 3.6vh);
padding: .38em .55em; border-radius: 8px; box-shadow: 0 14px 28px -14px rgba(2,3,43,.55); }
.show__tag small { display: block; font-family: var(--font-body); font-size: min(.68rem, 1.5vh); font-weight: 600; letter-spacing: 0; margin-top: .35em; opacity: .92; }
.show__sub--cta { color: var(--navy); font-weight: 500; display: inline-flex; align-items: center; gap: .5rem; }
.show--more:hover .show__sub--cta .arrow { transform: translateX(.25rem); }
@media (max-width: 55.99em) {
.show__tag { font-size: 1rem; padding: .32em .45em; }
.show__tag small { font-size: .6rem; margin-top: .3em; }
}
@media (max-width: 55.99em) { .show { width: 82vw; } .showcase__track { gap: var(--s-6); } .show__title { font-size: var(--fs-h3); } }
@media (prefers-reduced-motion: reduce) { .showcase__rail { width: auto; padding-inline-end: 0 !important; } .showcase__track { padding-inline-start: 0; flex-wrap: wrap; align-items: start; row-gap: var(--s-7); transform: none !important; } .show { transform: none; opacity: 1; } }
@media (max-width: 55.99em) { .argument__line .display { font-size: var(--fs-h1); } }
/* Lenis smooth scroll (assets/js/lenis.min.js, initieres i site.js). */
html.lenis, html.lenis-smooth { scroll-behavior: auto; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }
/* Drift-fotos: store fotos i en reserveret kolonne ved siden af indholdet (aldrig oven på det). Sektionen får .has-drift + --r/--l; indholdet får plads fri i den side. Kun desktop. */
.has-drift { position: relative; overflow: clip; --dw: 20rem; --band: calc(var(--dw) + 4rem); }
.has-drift > .container { position: relative; z-index: 1; }
.drift { position: absolute; z-index: 0; margin: 0; width: calc(var(--dw) * var(--ds, 1)); top: var(--dt, 8%); pointer-events: none; will-change: transform; display: none; }
/* --ds skalerer fotoet, --dx skubber det udad mod skærmkanten (negativ) eller lidt indad, så fotoene ikke står på linje (Adam 9. sep.: mindre struktureret, stadig sofistikeret). Forskydningen dæmpes på smallere skærme via --dxm. */
.drift .media { border-radius: 10px; box-shadow: 0 30px 60px -30px rgba(2,3,43,.45); }
@media (min-width: 64em) {
.drift { display: block; }
.has-drift--r > .container { padding-inline-end: calc(var(--gutter) + var(--band)); }
.has-drift--l > .container { padding-inline-start: calc(var(--gutter) + var(--band)); }
.has-drift--r .drift { right: calc(max(0px, (100vw - var(--container)) / 2) + var(--gutter) + var(--dx, 0rem) * var(--dxm, 1)); }
.has-drift--l .drift { left: calc(max(0px, (100vw - var(--container)) / 2) + var(--gutter) + var(--dx, 0rem) * var(--dxm, 1)); }
}
/* Andet foto i samme bånd: mindre, sidder nederst og trukket ind mod indholdskanten, så de to fotos ligger forskudt (Adam 9. sep.: flere flade billeder). */
.drift--2 { width: calc(var(--dw) * .62); top: auto; bottom: var(--db, 8%); }
@media (min-width: 64em) {
.has-drift--r .drift--2 { right: calc(max(0px, (100vw - var(--container)) / 2) + var(--gutter) + var(--dw) * .38 + var(--dx, 0rem) * var(--dxm, 1)); }
.has-drift--l .drift--2 { left: calc(max(0px, (100vw - var(--container)) / 2) + var(--gutter) + var(--dw) * .38 + var(--dx, 0rem) * var(--dxm, 1)); }
}
@media (min-width: 64em) and (max-width: 79.99em) { .has-drift { --dw: 15rem; --dxm: .3; } }
@media (min-width: 80em) and (max-width: 99.99em) { .has-drift { --dxm: .55; } }
@media (min-width: 100em) { .has-drift { --dw: 24rem; } }
/* Karriere-hero med formular (Eigil 9. sep.): tilmeldingen står i heroen ved siden af Albert, så ingen skal scrolle for at skrive sig op. */
.hero--form { min-height: 0; align-items: center; }
.hero--form .container { padding-block: var(--s-6); }
/* Heroen skal fylde skærmen, ikke mere: formularen er komprimeret, så den passer i 100svh minus headeren (Adam 9. sep., billede 31). */
@media (min-width: 56em) { .hero--form { min-height: calc(100svh - 4.25rem); } .hero__form { padding: var(--s-5); gap: var(--s-3); max-width: 30rem; width: 100%; justify-self: end; } .hero__form textarea.input { min-height: 4.5rem; } .hero__form .input { min-height: 2.6rem; padding-block: .45rem; } .hero__form .hint { margin: 0; } }
@media (min-width: 80em) { .hero__form { margin-right: -1.5rem; } }
@media (min-width: 90em) { .hero__form { margin-right: -3.5rem; } }
/* Lave skærme (fx 1280×720): stram formularen yderligere, så heroen stadig kan holdes på én skærm. */
@media (min-width: 56em) and (max-height: 50em) { .hero--form .container { padding-block: var(--s-5); } .hero__form { padding: var(--s-4); gap: .4rem; } .hero__form .input { min-height: 2.3rem; padding-block: .3rem; } .hero__form .field { gap: .2rem; } .hero__form .check { font-size: .8rem; } .hero__form textarea.input { min-height: 3.25rem; } .hero__form .hint { display: none; } .hero__form .small { display: none; } .hero--form .display { font-size: clamp(2.2rem, 1rem + 3vw, 3.8rem); } }
.hero--form .hero__grid { display: grid; gap: var(--s-7); }
.hero--form .display { font-size: clamp(2.4rem, 1.2rem + 3.6vw, 4.6rem); }
.hero--form .hero__trust { color: rgba(255,255,255,.8); }
.hero__form { background: var(--surface); color: var(--ink); box-shadow: 0 40px 80px -30px rgba(0,0,0,.6); border: 0; }
.hero__form .eyebrow { color: var(--navy); }
@media (min-width: 56em) {
.hero--form .hero__grid { grid-template-columns: 1fr minmax(0, 30rem); align-items: center; gap: var(--s-8); }
.hero--form .hero__copy { max-width: 34rem; }
}
@media (min-width: 80em) { .hero--form .hero__grid { grid-template-columns: 1fr minmax(0, 30rem); gap: var(--s-9); } }
.btn--on-navy-ghost { background: transparent; color: #fff; border: 0; padding-inline: .5rem; }
.btn--on-navy-ghost:hover { color: rgba(255,255,255,.8); }
/* Rytmen (proces): to spor, hver med to punkter. */
.rhythm .card { display: grid; gap: var(--s-4); align-content: start; }
.rhythm .card h3 { margin: 0; }
.rhythm__items { display: grid; gap: var(--s-4); margin-top: var(--s-2); }
.rhythm__items h4 { margin: 0 0 .25rem; }
@media (min-width: 56em) { .rhythm__items { grid-template-columns: 1fr 1fr; gap: var(--s-5); } }
/* Historierne (karriere): fire lodrette videoer med navn under. */
@media (min-width: 64em) { .grid--4 { grid-template-columns: repeat(4, 1fr); } }
.story { display: grid; gap: var(--s-2); position: relative; }
.story .media { border-radius: 10px; }
.story .person__name { margin-top: var(--s-3); }
.story .sound-toggle { top: var(--s-3); right: var(--s-3); }
[hidden] { display: none !important; }
/* Adams 2. runde: ét CTA-par over kapitelnavigationen i argumentet, ingen knapper i linjerne. */
/* Nav + CTA-par ligger i et fast bånd øverst i scenen (under headeren); billedrammerne starter først under båndet, se D i site.js. */
/* Rytmen: det daglige spor i navy, så de to spor ikke ligner hinanden. */
.rhythm .card--navy { background: var(--navy); border-color: var(--navy); color: #fff; }
.rhythm .card--navy h3, .rhythm .card--navy h4 { color: #fff; }
.rhythm .card--navy .card__index { color: rgba(255,255,255,.7); }
.rhythm .card--navy p { color: rgba(255,255,255,.78); }
/* Karriere-hero: formularen let gennemsigtig, så billedet af Albert skinner igennem. */
.hero__form { background: rgba(255,255,255,.9); }
/* Historie-videoer: ingen lydknap, mens der kun er et portræt. */
.video-sound:not(:has(video)) .sound-toggle { display: none; }
/* Hovedmenu: Om os har en dropdown med Karriere (Adam 9. sep.). */
.nav__group { position: relative; display: inline-flex; align-items: center; gap: .15rem; }
.nav__more { background: none; border: 0; padding: .3rem; margin: 0; cursor: pointer; color: var(--ink); display: inline-grid; place-items: center; border-radius: var(--r-sm); }
.nav__more svg { width: .75rem; height: .75rem; transition: transform var(--dur) var(--ease); }
.nav__more:hover, .nav__more:focus-visible { color: var(--navy); background: var(--bg-2); }
.nav__sub { position: absolute; top: 100%; left: -.75rem; padding-top: .6rem; display: none; z-index: 60; }
.nav__sub-in { min-width: 11rem; padding: .4rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); box-shadow: 0 16px 40px -16px rgba(2,3,43,.3); display: grid; }
.nav__group:hover .nav__sub, .nav__group.is-open .nav__sub { display: block; }
.nav__group:hover .nav__more svg, .nav__group.is-open .nav__more svg { transform: rotate(180deg); }
.nav__sub a { display: block; padding: .55rem .75rem; border-bottom: 0; border-radius: var(--r-sm); font-size: var(--fs-small); }
.nav__sub a:hover, .nav__sub a[aria-current="page"] { background: var(--bg-2); border-bottom: 0; }
.menu a.menu__sub { padding-left: var(--s-5); font-size: var(--fs-h3); color: var(--ink-2); }
.showcase__ctas { display: flex; flex-wrap: wrap; gap: var(--s-3); align-items: center; }
/* Bookingsiden (/book/): én handling, ingen menu, formular øverst til højre (Adam 9. sep. + research: ≤3 felter, kalender lige efter, tillid ved siden af formularen). */
.header__tel { display: none; font-weight: 600; font-size: var(--fs-small); color: var(--navy); text-decoration: none; }
.page-book .nav, .page-book .header .btn, .page-book .burger, .page-book .menu { display: none !important; }
.page-book .header__tel { display: inline-flex; }
.bookpage { padding-block: var(--s-7) var(--s-8); background: var(--bg); }
.bookpage__steps--wide { margin-top: 0; }
@media (min-width: 48em) { .bookpage__steps--wide { grid-template-columns: repeat(3, 1fr); gap: var(--s-6); } }
/* Mobil-rækkefølge (Adam 1. okt. 2026): overskrift, formular, derefter detaljerne. 60 % af
bookinger sker på telefon, og formularen lå før under 450 px tekst. På desktop samler
grid-areas teksten i venstre kolonne igen. */
.bookpage__grid { display: grid; gap: var(--s-6); }
.bookpage__intro h1 { max-width: 16ch; }
@media (max-width: 55.99em) { .bookpage__detail { margin-top: var(--s-2); } }
/* Logistikken skal kunne ses uden at scrolle: varighed, format og forberedelse.
Research 1. okt. 2026: bookere leder efter netop de tre ting, før de udfylder noget. */
.bookpage__facts { list-style: none; padding: 0; margin: var(--s-6) 0 0; display: grid; gap: var(--s-4);
border-block: 1px solid var(--line); padding-block: var(--s-5); }
.bookpage__facts li { display: grid; gap: .15rem; }
.bookpage__facts strong { font-weight: 500; letter-spacing: -0.01em; }
.bookpage__facts span { font-size: var(--fs-small); color: var(--ink-3); }
@media (min-width: 34em) { .bookpage__facts { grid-template-columns: repeat(3, 1fr); gap: var(--s-5); } }
.bookpage__steps { list-style: none; padding: 0; margin: var(--s-6) 0 0; display: grid; gap: var(--s-3); counter-reset: bs; }
.bookpage__steps li { position: relative; padding-left: 2.5rem; color: var(--ink-2); }
.bookpage__steps li::before { counter-increment: bs; content: counter(bs); position: absolute; left: 0; top: .05em; width: 1.75rem; height: 1.75rem; border-radius: 50%; background: var(--navy); color: #fff; font-weight: 600; font-size: var(--fs-small); display: grid; place-items: center; }
.bookpage__steps strong { color: var(--ink); }
.bookpage .quote { margin-top: var(--s-6); }
.bookpage .hero__trust { margin-top: var(--s-6); }
/* Billedet skal ligge i selve heroen, så man ser det med det samme (Adam 1. okt. 2026,
2. runde). Det lå før som et fuldbredde-bånd under sektionen, altså under folden. */
.bookpage__media { margin: 0; }
.bookpage__media .media { height: clamp(9rem, 38vw, 15rem); }
.bookpage__media .media img { height: 100%; }
/* Ingen ramme om kalenderen (Adam 1. okt. 2026). HubSpots widget har sin egen navy flade i
en fast bredde og reserverer højde til næste trin, så den fylder aldrig en boks helt ud.
En ramme omkring den så derfor ud som en fejl. Widgetten står nu frit på den hvide flade. */
.bookpage__cal { display: grid; gap: var(--s-3); justify-items: center; }
.bookpage__calhead { margin: 0; font-size: var(--fs-small); color: var(--ink-3); text-align: center; }
/* Fallback for andre udbydere end HubSpot (Calendly m.fl.), hvor vi selv må sætte højden. */
.bookpage__cal > iframe { display: block; width: 100%; height: clamp(34rem, 62vh, 44rem); border: 0; border-radius: var(--r-md); }
/* HubSpots eget script måler widgettens højde og sætter den inline på iframen.
Rør den ikke: en `height: 100% !important` herfra vandt over deres 756px og klippede
kalenderen af ved 615px (Adam 1. okt. 2026: "it doesn't fit inside the box").
Vi sætter kun bredden; højden er HubSpots. */
.bookpage__cal .meetings-iframe-container { width: 100%; justify-self: stretch; }
.bookpage__cal .meetings-iframe-container iframe { display: block; width: 100%; }
/* Widgettens egen højde (inline fra deres script) er mål på mål — med smalle marginer får
den indvendige kalender sin egen scrollbar. min-height giver slæk uden at overskrive
deres måling: er deres tal større, vinder det stadig. (Adam 1. okt. 2026: "lidt større".) */
.bookpage__cal .meetings-iframe-container iframe { min-height: 45.5rem !important; }
/* !important er nødvendigt: HubSpots script sætter selv min-height inline, og inline slår
et almindeligt stylesheet. Det er kun et gulv — er deres height større, vinder den. */
.bookpage__form { box-shadow: 0 30px 60px -30px rgba(2,3,43,.35); background: var(--surface); }
@media (min-width: 56em) {
/* Første skærm skal rumme overskrift, foto og formular og ikke andet (Adam 1. okt. 2026).
Trinene er flyttet ned i deres egen sektion, så resten af argumenterne først møder en,
når man scroller. 4,25rem er headerens højde. */
.bookpage { padding-block: var(--s-6); min-height: calc(100svh - 4.25rem); display: grid; align-items: center; }
.bookpage__grid { grid-template-columns: 1.1fr 1fr; column-gap: var(--s-8); row-gap: var(--s-6); align-items: start;
grid-template-areas: "intro form" "media form" "detail form"; }
.bookpage__intro { grid-area: intro; }
.bookpage__media { grid-area: media; }
.bookpage__media .media { height: clamp(12rem, 17vw, 17rem); }
.bookpage__detail { grid-area: detail; }
.bookpage__form, .bookpage__cal { grid-area: form; }
/* HubSpots widget skifter til sit brede layout over ca. 640 px og fylder da kolonnen helt ud;
under det centrerer den en smal navy flade med luft i siderne (målt 1. okt. 2026).
.has-cal sættes af site.js, når kalenderen har afløst formularen, så en formular-only side
ikke får en unødigt bred kolonne. */
.bookpage__grid.has-cal { grid-template-columns: 1fr 40rem; column-gap: var(--s-7); }
/* Venstre spalte er smallere, når kalenderen står ved siden af: fakta-rækken får to kolonner,
så "Online eller hos os / Titangade 13 i København" ikke brækker over tre linjer. */
.bookpage__grid.has-cal .bookpage__facts { grid-template-columns: repeat(2, 1fr); gap: var(--s-4) var(--s-5); }
.bookpage__form { position: sticky; top: calc(4.25rem + var(--s-5)); }
}
/* Lave skærme (1280x720 og lignende): heroen skal stadig kunne være på én skærm,
så fotoet og mellemrummene trækkes ned. Målt 1. okt. 2026. */
@media (min-width: 56em) and (max-height: 50em) {
.bookpage { padding-block: var(--s-5); }
.bookpage__grid { row-gap: var(--s-4); }
.bookpage__media { display: none; } /* en 90 px strimmel ligner en fejl; kalenderen er pointen */
.bookpage__facts { margin-top: var(--s-4); padding-block: var(--s-4); }
.bookpage__intro .lead { font-size: 1rem; }
.bookpage__form { gap: var(--s-3); padding: var(--s-5); }
.bookpage__form .input { padding-block: .55rem; }
}
/* Blog: liste og indlæg. */
.posts { display: grid; gap: var(--s-5); }
@media (min-width: 48em) { .posts { grid-template-columns: repeat(2, 1fr); gap: var(--s-6); } }
.post { display: grid; gap: var(--s-2); align-content: start; padding: var(--s-6); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); text-decoration: none; color: inherit; transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease); }
.post:hover { border-color: var(--navy); color: inherit; transform: translateY(-2px); }
.post__meta, .post__author { margin: 0; font-size: var(--fs-small); color: var(--ink-3); }
.post h2 { margin: 0; }
.post p { margin: 0; color: var(--ink-2); }
.article { padding-block: var(--s-8) var(--s-9); }
.article__in { max-width: 44rem; }
.article h1 { margin-top: var(--s-3); }
.article__meta { color: var(--ink-3); font-size: var(--fs-small); margin-top: var(--s-3); }
.prose { margin-top: var(--s-7); }
.prose > * + * { margin-top: var(--s-4); }
.prose h2 { font-size: var(--fs-h3); margin-top: var(--s-7); }
.prose h3 { font-size: var(--fs-body); font-weight: 600; margin-top: var(--s-6); }
.prose p, .prose li { color: var(--ink-2); line-height: 1.65; }
.prose ul { padding-left: 1.2em; }
.prose blockquote { border-left: 2px solid var(--navy); padding-left: var(--s-5); margin: var(--s-6) 0; }
.article .cta-row { margin-top: var(--s-8); }
/* Book-sektionen nederst på hver side: lys flade med navy formularkort, så den ikke smelter sammen med den navy footer (Adam 9. sep.). */
.book { background: var(--bg-2); color: var(--ink-2); border-top: 1px solid var(--line); }
.book :is(h2, h3) { color: var(--ink); }
.book .lead { color: var(--ink-2) !important; }
.book__alt a { color: var(--navy); }
.book .form { background: var(--navy); color: rgba(255,255,255,.8); box-shadow: 0 30px 60px -30px rgba(2,3,43,.45); }
.book .form h3, .book .form label { color: #fff; }
.book .form .hint { color: rgba(255,255,255,.7); }
/* Kvitteringen beholder sin lyse flade på det navy kort og skal derfor have mørk
tekst. Den arvede hvid herfra og stod hvid på #e6e9f6 — ulæselig (Carl 2. okt. 2026). */
.book .form .form__ok { color: var(--navy); }
.book .form .form__ok strong { color: var(--navy); }
.book .form .form__ok a { color: var(--navy); }
.book .form .btn--cta { background: #fff; color: var(--navy); box-shadow: 0 12px 28px -12px rgba(0,0,0,.6); }
.book .form .btn--cta:hover { background: #f2f3fa; color: var(--navy); }
.book .form .btn--secondary { --btn-bg: transparent; --btn-ink: #fff; --btn-line: rgba(255,255,255,.45); color: #fff; border-color: rgba(255,255,255,.45); }
/* Header: sprog, login (LR Hub) og Book et møde samlet til højre. */
.header__tools { display: none; align-items: center; gap: var(--s-4); }
@media (min-width: 56em) { .header__tools { display: inline-flex; } .header__tools .btn { display: inline-flex; } }
.header__lang { font-size: var(--fs-small); font-weight: 600; letter-spacing: .04em; color: var(--ink-3); text-decoration: none; padding: .25rem .35rem; border-radius: var(--r-sm); }
.header__lang:hover { color: var(--navy); background: var(--bg-2); }
.header__login { display: inline-flex; align-items: baseline; gap: .4em; font-size: var(--fs-small); font-weight: 600; color: var(--navy); text-decoration: none; padding: .25rem 0; border-bottom: 1px solid transparent; }
.header__login:hover { color: var(--navy); border-bottom-color: var(--navy); }
.header__login-sub { font-weight: 500; color: var(--ink-3); font-size: .85em; }
.page-book .header__tools .btn, .page-book .header__login { display: none !important; }
.page-book .header__tools { display: inline-flex !important; gap: var(--s-3); margin-left: auto; }
.menu__tools { display: flex; gap: var(--s-5); margin-top: var(--s-6); }
.menu__tools a { font-size: var(--fs-small) !important; font-family: var(--font) !important; font-weight: 600 !important; color: var(--ink-2) !important; border: 0 !important; padding: 0 !important; }
/* Services-hero: delt layout med stort foto og navy badge, så den ikke ligner forsidens fuldbreddehero (Adam 9. sep.). */
/* Services-heroen er trukket ind (Adam 1. okt. 2026): mindre luft over og under, fotokolonnen er
bredere end tekstkolonnen, og billedet står kvadratisk i stedet for 4:3. Heroen bliver dermed
markant nok til at bære et rigtigt billede i stedet for at hænge i halvdelen af fladen. */
.hero--services { background: var(--bg); padding-block: var(--s-6) var(--section-y-sm); }
.hero--services .split { align-items: center; }
.hero--services .hero__copy { max-width: 33rem; }
.hero--services h1 { font-size: clamp(2.3rem, 1.1rem + 3.4vw, 4rem); }
.hero--services .hero__ctas { margin-top: var(--s-5); }
.hero--services .hero__trust { margin-top: var(--s-5); }
@media (min-width: 56em) { .hero--services .split { grid-template-columns: 1fr 1.2fr; gap: var(--s-8); } }
.hero--services h1 { max-width: 19ch; }
.hero__media { position: relative; margin: 0; }
.hero__media .media { border-radius: 12px; box-shadow: 0 40px 80px -40px rgba(2,3,43,.45); }
.hero__badge { position: absolute; left: -1.25rem; bottom: -1.5rem; background: var(--navy); color: #fff; padding: var(--s-5) var(--s-6); border-radius: 10px; max-width: 15rem; box-shadow: 0 20px 40px -20px rgba(2,3,43,.6); }
.hero__badge .num { display: block; font-family: var(--font-display); font-size: var(--fs-h1); font-weight: 500; letter-spacing: -0.03em; line-height: 1; color: #fff; }
.hero__badge p { margin: .35rem 0 0; font-size: var(--fs-small); color: rgba(255,255,255,.75); }
@media (max-width: 55.99em) { .hero__media { margin-bottom: 2rem; } .hero__badge { left: 1rem; bottom: -1.25rem; padding: var(--s-4) var(--s-5); } }
/* Cases-hero: foto, der løber ud til højre skærmkant, og en række tal, der lapper ind over fotoet (Adam 9. sep.). */
.hero--cases { background: var(--bg); overflow: clip; }
@media (min-width: 56em) {
}
/* Tidslinje (Om os · Historien): to rækker med skiftevis foto og tekst om en vandret linje med prikker (Adams reference, 9. sep.). */
.timeline { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-5) var(--s-5); align-items: center; margin-top: var(--s-7); }
.timeline__tile { margin: 0; }
.timeline__tile .media { border-radius: 50%; }
.timeline__tile--navy { aspect-ratio: 1; background: var(--navy); border-radius: 50%; display: grid; place-items: center; }
.timeline__tile--navy .logo__mark { height: 2.6rem; background: #fff; }
.timeline__text h3 { margin: 0 0 var(--s-2); font-family: var(--font-display); font-weight: 500; letter-spacing: -0.02em; font-size: var(--fs-h3); font-variant-numeric: tabular-nums; }
.timeline__text p { margin: 0; color: var(--ink-2); font-size: var(--fs-small); }
.timeline__text p + p { margin-top: .35rem; color: var(--ink-3); }
.timeline__rule { display: none; }
@media (min-width: 56em) {
.timeline { grid-template-columns: repeat(4, 1fr); grid-template-rows: auto auto auto; gap: var(--s-6) var(--s-6); align-items: end; }
.timeline > * { grid-row: 3; align-self: start; }
.timeline > .timeline__top { grid-row: 1; align-self: end; }
.timeline > [data-col="1"] { grid-column: 1; } .timeline > [data-col="2"] { grid-column: 2; } .timeline > [data-col="3"] { grid-column: 3; } .timeline > [data-col="4"] { grid-column: 4; }
.timeline__rule { display: grid; grid-column: 1 / -1; grid-row: 2; grid-template-columns: repeat(4, 1fr); gap: var(--s-6); }
.timeline__rule span { position: relative; border-top: 1px solid var(--ink); }
.timeline__rule span::before { content: ""; position: absolute; left: 0; top: -4px; width: 7px; height: 7px; border-radius: 50%; background: var(--ink); }
.timeline__rule span:last-child::after { content: ""; position: absolute; right: 0; top: -1px; width: 3rem; border-top: 1px solid var(--bg); background: linear-gradient(90deg, transparent, var(--bg)); height: 1px; }
}
/* Fremhævet case med video (cases-siden, Adams reference wilmo.ai 9. sep.): video til venstre med afspil-knap, tekst og to tal til højre. */
.feature { display: grid; border: 1px solid var(--line); border-radius: var(--r-md); overflow: clip; background: var(--surface); }
.feature__media { position: relative; }
.feature__media .media { border-radius: 0; height: 100%; }
.feature__media video, .feature__media img { width: 100%; height: 100%; object-fit: cover; }
.feature__media::after { content: ""; position: absolute; inset: auto 0 0 0; height: 45%; background: linear-gradient(180deg, rgba(2,3,43,0), rgba(2,3,43,.7)); pointer-events: none; }
.feature__play { white-space: nowrap; left: 50%; top: 50%; right: auto; bottom: auto; transform: translate(-50%, -50%); background: rgba(255,255,255,.96); color: var(--navy); border-color: transparent; font-weight: 600; padding: .75rem 1.25rem .75rem .9rem; gap: .6rem; box-shadow: 0 20px 40px -20px rgba(2,3,43,.7); z-index: 3; }
.feature__play::before { width: 2rem; height: 2rem; border-radius: 50%; opacity: 1; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Ccircle cx='6' cy='6' r='6' fill='%2302032b'/%3E%3Cpath d='M4.7 3.5v5l4.1-2.5z' fill='white'/%3E%3C/svg%3E") center / contain no-repeat; }
.feature__play[aria-pressed="true"] { left: auto; top: auto; right: var(--s-4); bottom: var(--s-4); transform: none; padding: .5rem 1rem; }
.feature__play[aria-pressed="true"]::before { width: .5rem; height: .5rem; background: #fff; }
.feature__caption { position: absolute; left: var(--s-5); bottom: var(--s-5); z-index: 2; color: #fff; display: grid; gap: .15rem; }
.feature__caption strong { font-weight: 600; }
.feature__caption span { font-size: var(--fs-small); opacity: .8; }
.feature__body { padding: var(--s-6); display: grid; gap: var(--s-4); align-content: center; justify-items: start; }
.feature__body h2 { margin: 0; font-size: var(--fs-h3); }
.feature__body p { margin: 0; color: var(--ink-2); }
.feature__stats { display: flex; flex-wrap: wrap; gap: var(--s-4) var(--s-6); margin: var(--s-2) 0; }
.feature__stats div { display: grid; gap: .15rem; }
.feature__stats b { font-family: var(--font-display); font-size: var(--fs-h2); font-weight: 500; letter-spacing: -0.03em; line-height: 1; color: var(--brand, var(--navy)); }
.feature__stats span { font-size: var(--fs-small); color: var(--ink-3); }
@media (min-width: 56em) { .feature { grid-template-columns: 1.15fr 1fr; } .feature__media .media { aspect-ratio: auto; min-height: 26rem; } .feature__body { padding: var(--s-7); } }
/* Video-case som flydende split i stedet for en kasse (cases-siden, Adam 12. sep.: "det ser meget bokset ud").
Genbruger .feature__media/-caption/-play, men uden .feature-rammen: rundede hjørner og skygge som .hero__media. */
.feature__media--free { border-radius: 12px; overflow: clip; box-shadow: 0 40px 80px -40px rgba(2,3,43,.45); }
.feature__media--free .media { border-radius: 12px; height: auto; }
.casefilm { gap: var(--s-6); align-items: center; margin-top: var(--s-7); }
.casefilm h3 { margin: 0 0 var(--s-4); font-size: var(--fs-h3); }
.casefilm p { color: var(--ink-2); margin: 0; }
.casefilm p + p { margin-top: var(--s-4); }
.casefilm .btn { margin-top: var(--s-6); }
.casefilm .feature__stats { margin: var(--s-5) 0; }
@media (min-width: 56em) {
/* den frie video beholder sit 16:9-format; .feature-rammens min-height: 26rem gælder kun de boksede */
/* Nulstiller den boksede variants min-height. Formatet kommer fra --ar, saa en
kvadratisk video (Fullview fra 2. okt. 2026) ikke tvinges ned i 16:9. */
.feature__media--free .media { aspect-ratio: var(--ar, 16/9); min-height: 0; }
.casefilm { grid-template-columns: 1.3fr 1fr; gap: var(--s-8); }
.casefilm--flip { grid-template-columns: 1fr 1.3fr; }
.casefilm--flip .feature__media--free { order: 2; }
}
.eyebrow--rule { display: flex; align-items: center; gap: var(--s-4); margin-bottom: var(--s-5); }
.eyebrow--rule::after { content: ""; flex: 1; border-top: 1px solid var(--line); }
/* Case-kort: tal-chip med forklaring + to tal med betydning i bunden */
.case__num small { display: block; font-family: var(--font-body); font-size: .72rem; font-weight: 600; letter-spacing: 0; margin-top: .3em; opacity: .9; }
.case__stats { display: grid; gap: .35rem; font-size: var(--fs-small); color: var(--ink-3); padding-top: var(--s-3); border-top: 1px solid var(--line); }
.case__stats b { color: var(--brand); font-weight: 700; }
.case__body { grid-template-rows: auto auto 1fr auto auto; }
/* Cases-hero med MediaCatch-videoen i stedet for et foto (Adam 9. sep.): logo + navn øverst til venstre, afspil i midten, "Læs casen" nederst til højre. Tal og brødtekst venter, til man går ind på casen. */
/* Filfelt (CV i ansøgningen): egen knap og filnavn, så teksten er dansk uanset browser. Selve input'et ligger usynligt oven på. */
.file { position: relative; display: flex; align-items: center; gap: .75rem; min-height: 3rem; padding: .35rem .35rem .35rem .9rem; border: 1px solid var(--line-strong); border-radius: var(--r-sm); background: var(--surface); cursor: pointer; font-size: var(--fs-small); color: var(--ink-3); }
.file:hover { border-color: var(--ink-3); }
.file:focus-within { border-color: var(--navy); box-shadow: 0 0 0 3px rgba(2,3,43,.12); }
.file input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.file__btn { order: 2; margin-left: auto; font-weight: 600; color: var(--navy); background: var(--bg-2); border: 1px solid var(--line-strong); border-radius: 4px; padding: .35rem .75rem; white-space: nowrap; }
.file__name { order: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.file.has-file .file__name { color: var(--ink); }
@media (min-width: 56em) { .hero__form .small { display: none; } .hero__form textarea.input { min-height: 3.75rem; } .hero__form .file { min-height: 2.6rem; padding-block: .2rem; } }
@media (min-width: 56em) and (max-height: 50em) { .hero__form .file { min-height: 2.3rem; } }
/* Honningkrukke i formularerne: usynlig for mennesker, udfyldt af bots.
send.php kasserer indsendelsen, hvis feltet har indhold. */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
/* Tabel på privatlivssiden (databehandlere). Eneste tabel på sitet — holdt enkel,
og scroller vandret i sin egen boks på smalle skærme. */
.ptable { overflow-x: auto; margin-block: var(--s-5); }
.ptable table { width: 100%; border-collapse: collapse; font-size: var(--fs-small); }
.ptable th, .ptable td { text-align: left; padding: .7rem .9rem; border-bottom: 1px solid var(--line); vertical-align: top; }
.ptable th { font-weight: 600; color: var(--ink); border-bottom-color: var(--line-strong); white-space: nowrap; }
.ptable td { color: var(--ink-2); }
.ptable tr:last-child td { border-bottom: 0; }