/* =========================================================
   FP Studio V4 "Enklere og livligere – for alle" – styles.css
   Lyse tokens på :root. Mørke tokens i @media (system) og
   :root[data-theme="dark"] (manuelt valg) – samme værdier.
   ========================================================= */
:root {
  color-scheme: light;
  --bg: #F2F0ED; --surface: #E9E6E2; --surface-2: #DEDAD5;
  --text: #2B2926; --text-muted: #5F5A54;
  --border: #D6D1CB; --border-strong: #847E77;
  --accent: #45413C; --accent-hover: #2E2B28; --on-accent: #FFFFFF; --accent-soft: #E4DED6;
  --signal: #E8B86A; --on-signal: #2B2926; --focus: #45413C;
  --block: #45413C; --on-block: #FFFFFF; --on-block-muted: #DCD5CC;
  --footer: #2B2926; --footer-text: #EEEAE4; --footer-muted: #B5AEA5; --footer-link: #E8B86A;
  --success: #147A4B; --error: #C0262D;
  --badge-live-fg: #0F6B40; --badge-live-bg: #E3F5EC;
  --badge-dev-fg: #8A4B00;  --badge-dev-bg: #FFF1DC;
  --badge-soon-fg: #4E4943; --badge-soon-bg: #E6E2DD;
  --logo-ink: #2B2926; --logo-arc: #B67A33; --logo-studio: #5F5A54;
  --header-bg: rgb(242 240 237 / .94);
  --card: #F9F7F4;
  --grid-line: rgb(69 65 60 / .08);
  --shadow-lift: 0 1px 2px rgb(43 41 38 / .06), 0 24px 48px -16px rgb(69 65 60 / .28);
  --mock-filter: none;

  --font-head: "Familjen Grotesk", "Helvetica Neue", Arial, sans-serif;
  --font-body: "Instrument Sans", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --fs-mega: clamp(2.375rem, .9rem + 6.2vw, 5.75rem);
  --fs-h2: clamp(2rem, 1.2rem + 3.6vw, 4rem);
  --fs-h3: clamp(1.25rem, 1.1rem + .7vw, 1.625rem);
  --fs-lead: clamp(1.125rem, 1rem + .5vw, 1.375rem);
  --fs-body: 1.0625rem;
  --fs-small: .9375rem;
  --fs-label: 1rem;
  --fs-price: clamp(2.5rem, 1.6rem + 3vw, 3.75rem);
  --fs-step: clamp(4rem, 2rem + 8vw, 8rem);

  --section-y: clamp(88px, 12vw, 176px);
  --gutter: clamp(16px, 4vw, 56px);
  --max-w: 1240px; --measure: 60ch;
  --r-1: 2px; --r-2: 4px; --r-3: 14px; --r-pill: 999px;
  --header-h: 64px;
  --ease-out: cubic-bezier(.2,.7,.2,1);
  --dur-1: 120ms; --dur-2: 240ms; --dur-3: 700ms;
  --lime-soft: #F6E7CC; --sticker-border: #2B2926; --ease-bounce: cubic-bezier(.34,1.56,.64,1);
  --pc-lime: #E8B86A; --pc-lime-fg: #2B2926; --pc-lime-muted: #4E4943; --pc-soft: #E4DED6; --pc-soft-fg: #2B2926; --pc-soft-muted: #4E4943; --pc-ink-edge: transparent;
}
@media (min-width: 1024px) { :root { --fs-mega: clamp(3rem, 4.5vw, 4.75rem); } }
@media (min-width: 1080px) { :root { --header-h: 76px; } }
/* Mørk tilstand – følger systemet, medmindre brugeren har valgt lys */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #1C1B19; --surface: #252321; --surface-2: #2F2C29;
    --text: #EEEAE4; --text-muted: #B5AEA5;
    --border: #3A3733; --border-strong: #7A746C;
    --accent: #E8B86A; --accent-hover: #F1CB8A; --on-accent: #1C1B19; --accent-soft: #3A3127;
    --signal: #E8B86A; --on-signal: #2B2926; --focus: #E8B86A;
    --block: #2F2C29; --on-block: #EEEAE4; --on-block-muted: #CFC8BF;
    --footer: #151413;
    --success: #6FD6A0; --error: #FF9A9A;
    --badge-live-fg: #8FE0B5; --badge-live-bg: #12301F;
    --badge-dev-fg: #FFC98A;  --badge-dev-bg: #3A2810;
    --badge-soon-fg: #CFC8BF; --badge-soon-bg: #2E2B28;
    --logo-ink: #EEEAE4; --logo-arc: #E8B86A; --logo-studio: #B5AEA5;
    --header-bg: rgb(28 27 25 / .94);
    --card: #1C1B19;
    --grid-line: rgb(232 184 106 / .09);
    --shadow-lift: 0 24px 48px -16px rgb(0 0 0 / .55);
    --mock-filter: brightness(.9);
    --lime-soft: #3A3020; --sticker-border: #EEEAE4;
    --pc-lime: #3A3020; --pc-lime-fg: #EEEAE4; --pc-lime-muted: #D9CBB0; --pc-soft: #3A3127; --pc-soft-fg: #EEEAE4; --pc-soft-muted: #CFC8BF; --pc-ink-edge: #3A3733;
  }
}
/* Mørk tilstand – manuelt valg via knappen */
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #1C1B19; --surface: #252321; --surface-2: #2F2C29;
  --text: #EEEAE4; --text-muted: #B5AEA5;
  --border: #3A3733; --border-strong: #7A746C;
  --accent: #E8B86A; --accent-hover: #F1CB8A; --on-accent: #1C1B19; --accent-soft: #3A3127;
  --signal: #E8B86A; --on-signal: #2B2926; --focus: #E8B86A;
  --block: #2F2C29; --on-block: #EEEAE4; --on-block-muted: #CFC8BF;
  --footer: #151413;
  --success: #6FD6A0; --error: #FF9A9A;
  --badge-live-fg: #8FE0B5; --badge-live-bg: #12301F;
  --badge-dev-fg: #FFC98A;  --badge-dev-bg: #3A2810;
  --badge-soon-fg: #CFC8BF; --badge-soon-bg: #2E2B28;
  --logo-ink: #EEEAE4; --logo-arc: #E8B86A; --logo-studio: #B5AEA5;
  --header-bg: rgb(28 27 25 / .94);
  --card: #1C1B19;
  --grid-line: rgb(232 184 106 / .09);
  --shadow-lift: 0 24px 48px -16px rgb(0 0 0 / .55);
  --mock-filter: brightness(.9);
  --lime-soft: #3A3020; --sticker-border: #EEEAE4;
  --pc-lime: #3A3020; --pc-lime-fg: #EEEAE4; --pc-lime-muted: #D9CBB0; --pc-soft: #3A3127; --pc-soft-fg: #EEEAE4; --pc-soft-muted: #CFC8BF; --pc-ink-edge: #3A3733;
}
.sec-ice { background: var(--surface); --card: var(--bg); }

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h) + 16px + env(safe-area-inset-top, 0px)); }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body { margin: 0; background: var(--bg); color: var(--text); font: 400 var(--fs-body)/1.65 var(--font-body); overflow-x: clip; }
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 30; background: var(--header-bg); }
img, svg { max-width: 100%; }
h1, h2, h3 { font-family: var(--font-head); margin: 0; color: var(--text); text-wrap: balance; hyphens: manual; }
h2 { font-size: var(--fs-h2); font-weight: 700; line-height: 1.02; letter-spacing: -.03em; max-width: 16ch; }
h3 { font-size: var(--fs-h3); font-weight: 600; line-height: 1.2; letter-spacing: -.015em; }
p { margin: 0; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--accent); }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
:focus:not(:focus-visible) { outline: none; }
.sr-only, .visually-hidden { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.nowrap { white-space: nowrap; }
.num { font-variant-numeric: tabular-nums; }
[hidden] { display: none !important; }
.wrap { width: 100%; max-width: calc(var(--max-w) + 2 * var(--gutter)); margin-inline: auto; padding-left: max(16px, var(--gutter), env(safe-area-inset-left, 0px)); padding-right: max(16px, var(--gutter), env(safe-area-inset-right, 0px)); }
.section { padding-block: var(--section-y); }
section[id], main[id] { scroll-margin-top: calc(var(--header-h) + 16px + env(safe-area-inset-top, 0px)); }
.skip { position: absolute; left: 12px; top: -100px; z-index: 100; background: #45413C; color: #FFFFFF; font: 600 var(--fs-label)/1 var(--font-head); padding: 14px 18px; border-radius: var(--r-2); text-decoration: none; }
.skip:focus { top: calc(12px + env(safe-area-inset-top, 0px)); color: #FFFFFF; outline-color: #E8B86A; }
.kicker { display: block; font: 600 var(--fs-label)/1.35 var(--font-head); color: var(--accent); margin-bottom: .9em; max-width: 46ch; letter-spacing: 0; }
h2 .kicker { margin-bottom: 1rem; }

/* ---------- Knapper ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 0 24px; font: 600 var(--fs-label)/1.2 var(--font-head); border-radius: var(--r-2); border: 1.5px solid transparent; text-decoration: none; cursor: pointer; text-align: center; transition: background-color var(--dur-1), color var(--dur-1), border-color var(--dur-1), transform 160ms var(--ease-out); }
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--accent); color: var(--on-accent); }
.btn-primary:hover, .btn-primary:focus-visible { background: var(--accent-hover); color: var(--on-accent); }
.btn-secondary { background: transparent; color: var(--text); border-color: var(--text); }
.btn-secondary:hover { background: var(--surface); color: var(--text); }
.btn-ghost { min-height: 48px; padding: 0 4px; background: none; border: 0; color: var(--text); text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 2px; text-underline-offset: 7px; }
.btn-ghost:hover { color: var(--accent); }
.btn-compact { min-height: 44px; padding: 0 16px; }
.btn-cta svg { width: 18px; height: 18px; flex: none; transition: transform 160ms var(--ease-out); }
.btn-cta:hover svg, .btn-cta:focus-visible svg { transform: translateX(4px); }
.text-link { display: inline-block; padding-block: 12px; margin-block: -12px; font-family: var(--font-head); font-weight: 600; color: var(--text); text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 2px; text-underline-offset: 6px; }

/* ---------- Header ---------- */
.site-header { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 20; background: var(--header-bg); border-bottom: 1px solid transparent; transition: border-color var(--dur-2); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.site-header.is-scrolled, .site-header.menu-open { border-bottom-color: var(--border); }
.header-inner { display: flex; align-items: center; gap: 16px; min-height: var(--header-h); }
.brand { display: inline-flex; align-items: center; text-decoration: none; margin-right: auto; min-height: 44px; min-width: 44px; }
.brand svg { display: block; height: 26px; width: auto; }
.brand .logo-mark-only { display: none; height: 34px; }
@media (max-width: 359px) { .brand .logo-full { display: none; } .brand .logo-mark-only { display: block; } }
.logo .ink { fill: var(--logo-ink); }
.logo .ink-s { stroke: var(--logo-ink); }
.logo .studio { stroke: var(--logo-studio); }
.logo .arc, .logo .dot { fill: var(--logo-arc); }
.nav-desktop { display: none; }
.nav-desktop ul { display: flex; list-style: none; margin: 0; padding: 0; }
.nav-desktop a { display: inline-flex; align-items: center; min-height: 44px; padding-inline: 10px; font: 500 var(--fs-label)/1 var(--font-head); color: var(--text-muted); text-decoration: none; position: relative; }
.nav-desktop a:hover, .nav-desktop a[aria-current="true"] { color: var(--text); }
.nav-desktop a[aria-current="true"]::after { content: ""; position: absolute; left: 10px; right: 10px; bottom: 8px; height: 2px; background: linear-gradient(90deg, var(--accent) 0 40%, transparent 40% calc(40% + 3px), var(--accent) calc(40% + 3px)); }
.header-actions { display: flex; align-items: center; gap: 8px; }
.header-cta { display: none; }
.icon-btn { display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: var(--r-pill); border: 1px solid var(--border-strong); background: transparent; color: var(--text); cursor: pointer; }
.icon-btn:hover { border-color: var(--text); }
.icon-btn svg { width: 20px; height: 20px; }
.theme-toggle .i-sun { display: none; }
:root[data-theme="dark"] .theme-toggle .i-sun { display: block; }
:root[data-theme="dark"] .theme-toggle .i-moon { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme-toggle .i-sun { display: block; }
  :root:not([data-theme="light"]) .theme-toggle .i-moon { display: none; }
}
.menu-btn { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 14px; border: 1px solid var(--border-strong); border-radius: var(--r-2); background: transparent; color: var(--text); font: 600 var(--fs-label)/1 var(--font-head); cursor: pointer; }
.menu-btn .bars { position: relative; width: 16px; height: 10px; }
.menu-btn .bars::before, .menu-btn .bars::after { content: ""; position: absolute; left: 0; right: 0; height: 2px; background: currentColor; transition: transform var(--dur-2) var(--ease-out), top var(--dur-2) var(--ease-out); }
.menu-btn .bars::before { top: 0; }
.menu-btn .bars::after { top: 8px; right: 5px; }
.menu-btn[aria-expanded="true"] .bars::before { top: 4px; transform: rotate(45deg); }
.menu-btn[aria-expanded="true"] .bars::after { top: 4px; right: 0; transform: rotate(-45deg); }
.mobile-menu { position: absolute; left: 0; right: 0; top: 100%; background: var(--bg); border-bottom: 1px solid var(--border); max-height: calc(100dvh - var(--header-h) - env(safe-area-inset-top, 0px)); overflow-y: auto; }
.mobile-menu .wrap { padding-block: 8px 24px; }
.mobile-menu ul { list-style: none; margin: 0; padding: 0; }
.mobile-menu li + li { border-top: 1px solid var(--border); }
.mobile-menu a:not(.btn) { display: flex; align-items: center; min-height: 56px; font: 700 1.5rem/1.2 var(--font-head); color: var(--text); text-decoration: none; letter-spacing: -.02em; }
.mobile-menu .btn { width: 100%; margin-top: 16px; }
@media (min-width: 1080px) { .nav-desktop { display: block; } .header-cta { display: inline-flex; } .menu-btn, .mobile-menu { display: none !important; } .brand svg { height: 28px; } }

/* =========================================================
   HERO – "En vifte af hjemmesider"
   ========================================================= */
.hero { position: relative; z-index: 1; overflow-x: clip; }
.hero > .wrap { position: relative; z-index: 1; display: grid; gap: 32px; padding-block: clamp(20px, 4vw, 56px) clamp(40px, 6vw, 88px); }
.hero > .wrap > * { min-width: 0; }
.hero-text { position: relative; }
.hero-kicker { font: 500 var(--fs-small)/1.4 var(--font-head); color: var(--text-muted); margin-bottom: 14px; max-width: 44ch; }
.hero-h1 { font-size: var(--fs-mega); font-weight: 700; line-height: .98; letter-spacing: -.04em; }
.hero-h1 .ln { display: block; }
.swap { display: inline-grid; vertical-align: baseline; }
.swap > span { grid-area: 1 / 1; justify-self: start; position: relative; padding: 0 .04em .26em 0; color: var(--accent); clip-path: inset(0 0 100% 0); white-space: nowrap; }
.swap > span::after { content: ""; position: absolute; left: .02em; right: .06em; bottom: .02em; height: .26em; border-bottom: .1em solid var(--signal); border-radius: 0 0 55% 45% / 0 0 100% 100%; transform: rotate(-1.2deg) scaleX(0); transform-origin: 0 50%; }
.swap > span.is-on::after { transform: rotate(-1.2deg) scaleX(1); }
.swap > span.is-on { clip-path: inset(0); }
@media (max-width: 1023px) { .swap { display: grid; width: max-content; max-width: 100%; margin-top: .06em; } }
/* Mobil: "Hjemmesider til" på første linje, så "til" ikke står alene */
@media (max-width: 1023px) { .hero-h1 .ln { display: inline; } }
.hero-lead { margin-top: 20px; font-size: var(--fs-lead); line-height: 1.5; color: var(--text-muted); max-width: 38ch; }
.price-chip { display: inline-flex; flex-wrap: wrap; align-items: center; gap: .2em .45em; max-width: 100%; margin-top: 20px; padding: .55em .9em; background: var(--accent-soft); border-radius: var(--r-3); font: 500 var(--fs-label)/1.3 var(--font-head); color: var(--text-muted); font-variant-numeric: tabular-nums; }
.price-chip strong { font-weight: 700; color: var(--text); white-space: nowrap; }
.price-chip span { white-space: nowrap; }
.hero-ctas { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 24px; margin-top: 20px; }
.hero-ctas .btn-primary { flex: 1 1 100%; }
@media (min-width: 560px) { .hero-ctas .btn-primary { flex: 0 0 auto; } }
.trust-chips { list-style: none; margin: 22px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.trust-chips li { display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px; border: 1.5px solid var(--border-strong); border-radius: var(--r-pill); font: 600 .9375rem/1.2 var(--font-head); color: var(--text); }
.trust-chips li::before { content: ""; width: 8px; height: 8px; background: var(--accent); flex: none; }

.hero-visual { position: relative; padding-top: 8px; }
.fan { position: relative; z-index: 1; height: clamp(230px, 62vw, 420px); }
.fan-card { --x: 0%; --rot: 0deg; --k: 1;
  position: absolute; left: 50%; top: 50%; width: clamp(170px, 48vw, 300px); aspect-ratio: 3 / 2; container-type: inline-size;
  border-radius: 10px; overflow: hidden; box-shadow: var(--shadow-lift); background: var(--fc-bg); color: var(--fc-ink);
  transform: translate(-50%, -50%) translateX(calc(var(--x) * var(--k))) rotate(calc(var(--rot) * var(--k))); }
.fan-card[data-pos="0"] { --x: -40%; --rot: -12deg; z-index: 1; }
.fan-card[data-pos="1"] { --x: -14%; --rot: -4deg; z-index: 2; }
.fan-card[data-pos="2"] { --x: 12%; --rot: 5deg; z-index: 3; }
.fan-card[data-pos="3"] { --x: 36%; --rot: 13deg; z-index: 4; }
.fan.is-spread .fan-card { --k: 1.28; }
.fan-card--cafe   { --fc-bg: #F6EEE2; --fc-ink: #3E2A20; --fc-img: #D9C2A0; }
.fan-card--tomrer { --fc-bg: #1F2A36; --fc-ink: #F4F6F8; --fc-img: #8A6446; }
.fan-card--frisor { --fc-bg: #F8ECEF; --fc-ink: #4A1D33; --fc-img: #C98D8F; }
.fan-card--butik  { --fc-bg: #FFF1C9; --fc-ink: #5A3A00; --fc-img: #F2B33D; }
.fc-bar { display: flex; align-items: center; gap: 1.6cqi; height: 9cqi; padding: 0 3.5cqi; background: color-mix(in srgb, var(--fc-ink) 12%, var(--fc-bg)); }
.fc-bar i { width: 2.4cqi; height: 2.4cqi; border-radius: 50%; background: color-mix(in srgb, var(--fc-ink) 40%, var(--fc-bg)); }
.fc-bar span { margin-left: 2cqi; font: 600 3.6cqi/1 var(--font-head); opacity: .85; white-space: nowrap; overflow: hidden; }
.fc-page { display: grid; grid-template-columns: 1.15fr 1fr; grid-template-rows: auto 1fr auto; gap: 3cqi 5cqi; height: calc(100% - 9cqi); padding: 5cqi 6cqi 6cqi; }
.fc-logo { grid-column: 1 / -1; font: 700 4.6cqi/1 var(--font-head); letter-spacing: -.02em; }
.fc-h { grid-column: 1; align-self: start; font: 700 8.2cqi/1.02 var(--font-head); letter-spacing: -.03em; }
.fc-btn { grid-column: 1; align-self: end; justify-self: start; padding: 2.6cqi 3.6cqi; border-radius: 1.6cqi; background: var(--fc-ink); color: var(--fc-bg); font: 600 3.8cqi/1 var(--font-head); white-space: nowrap; }
.fc-img { grid-column: 2; grid-row: 2 / 4; border-radius: 2cqi; background-color: var(--fc-img); background-size: cover; background-position: center; }
.hero-foot { position: relative; z-index: 2; display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 12px 16px; margin-top: 12px; }
@media (min-width: 1024px) {
  .hero > .wrap { grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); align-items: center; gap: 24px; min-height: min(calc(100svh - var(--header-h) - 120px), 760px); }
  .fan { height: 440px; }
  .fan-card { width: 300px; }
}

/* ---------- Stickers ---------- */
.sticker { --r: -4deg; display: inline-flex; align-items: center; gap: .35em; width: max-content; max-width: 100%; padding: 7px 14px; border: 2px solid var(--sticker-border); border-radius: var(--r-pill); background: #FFFFFF; color: #2B2926; font: 700 .9375rem/1.2 var(--font-head); transform: rotate(var(--r)); }
.sticker--lime { background: #E8B86A; color: #2B2926; border-color: #2B2926; }

/* ---------- Drivende former (maks 3) ---------- */
.drift { position: absolute; pointer-events: none; z-index: 0; }
.drift--square { width: 16px; height: 16px; background: var(--accent); right: 10%; bottom: 14px; }
.drift--arc { width: 20px; height: 40px; border-radius: 0 40px 40px 0; background: var(--signal); right: 2%; top: -56px; }
.drift--line { width: 72px; height: 3px; background: var(--signal); right: 8%; top: 56px; }

/* ---------- Branche-bånd ---------- */
.band { background: var(--block); color: #FFFFFF; padding-block: clamp(18px, 3vw, 32px); overflow: hidden; }
.band-track { overflow: hidden; }
.band-list { list-style: none; margin: 0; padding: 0 max(16px, var(--gutter)); display: flex; flex-wrap: wrap; justify-content: flex-start; align-items: center; row-gap: 4px; }
.band-list li { display: inline-flex; align-items: center; font: 700 clamp(2rem, 1rem + 4vw, 4.5rem)/1.15 var(--font-head); letter-spacing: -.03em; white-space: nowrap; }
.band-list li:nth-child(4n) { color: #E8B86A; }
.band-list li::after { content: ""; display: inline-block; width: .22em; height: .44em; margin: 0 .42em; border-radius: 0 1em 1em 0; background: #E8B86A; }
.band.is-live .band-track { display: flex; width: max-content; }
.band.is-live .band-list { flex-wrap: nowrap; padding: 0; }
.band :focus-visible { outline-color: #E8B86A; }

/* ---------- Sektionshoveder ---------- */
.sec-head { position: relative; display: grid; gap: 20px 64px; margin-bottom: clamp(36px, 5vw, 72px); }
.sec-head > * { min-width: 0; }
.sec-head > p { color: var(--text-muted); max-width: 46ch; font-size: var(--fs-lead); line-height: 1.55; }
@media (min-width: 960px) { .sec-head { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: end; } }

/* ---------- Fotos (naturlige farver + fallback) ---------- */
.photo { position: relative; overflow: hidden; border-radius: var(--r-2);
  background:
    radial-gradient(circle at 100% 0, transparent 0 18%, var(--accent) 18% 30%, transparent 30%),
    repeating-linear-gradient(0deg, transparent 0 31px, var(--grid-line) 31px 32px),
    repeating-linear-gradient(90deg, transparent 0 31px, var(--grid-line) 31px 32px),
    var(--surface); }
.photo img { width: 100%; height: 100%; object-fit: cover; display: block; filter: saturate(.92) contrast(1.03); color: transparent; font-size: 0; transition: transform 400ms var(--ease-out); }
.photo.is-missing img { display: none; }

/* ---------- Projekter: farverige kort ---------- */
.p-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: 24px; }
@media (min-width: 768px) { .p-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; } }
.p-card { --pc-bg: var(--pc-soft); --text: #2B2926; --text-muted: #4E4943;
  position: relative; min-width: 0; padding: 24px; border-radius: var(--r-3); background: var(--pc-bg); color: var(--text); }
.p-card--lime   { --pc-bg: var(--pc-lime); --text: var(--pc-lime-fg); --text-muted: var(--pc-lime-muted); }
.p-card--cobalt { --pc-bg: #45413C; --text: #FFFFFF; --text-muted: #DCD5CC; --focus: #E8B86A; }
.p-card--soft   { --pc-bg: var(--pc-soft); --text: var(--pc-soft-fg); --text-muted: var(--pc-soft-muted); }
.p-card--ink    { --pc-bg: #2B2926; --text: #FFFFFF; --text-muted: #B5AEA5; --focus: #E8B86A; box-shadow: inset 0 0 0 1px var(--pc-ink-edge); }
.project-media { position: relative; margin: 0; aspect-ratio: 4 / 3; display: grid; place-items: center; }
.project-media > .photo { position: absolute; inset: 0; }
.mk-browser { position: relative; z-index: 2; width: 80%; border-radius: 8px; overflow: hidden; box-shadow: var(--shadow-lift); background: #FFFFFF; transform: translateX(-6%); transition: transform 320ms var(--ease-out); }
.mk-browser svg, .mk-phone svg { display: block; width: 100%; height: auto; filter: var(--mock-filter); }
.mk-phone { position: absolute; z-index: 3; right: 5%; bottom: -5%; width: 24%; min-width: 64px; filter: drop-shadow(0 14px 18px rgb(43 41 38 / .3)); transition: transform 320ms var(--ease-out); }
.p-card .sticker { position: absolute; z-index: 5; top: -12px; right: 14px; background: #E8B86A; color: #2B2926; }
.p-card--ink .sticker { background: #E8B86A; }
.p-card h3 { margin-top: 26px; font-size: calc(var(--fs-h3) * 1.2); font-weight: 700; letter-spacing: -.025em; line-height: 1.1; }
.p-cat { margin-top: 4px; font: 500 var(--fs-small)/1.3 var(--font-head); color: var(--text-muted); }
.stock-note { margin-top: 32px; font-size: var(--fs-small); color: var(--text-muted); }
.after-grid { margin-top: 20px; font-size: var(--fs-lead); }

/* ---------- Pris: ét tilbud ---------- */
.offer { position: relative; display: grid; gap: 32px 64px; padding: clamp(28px, 5vw, 64px); border-radius: var(--r-3); background: var(--block); color: #FFFFFF;
  --text: #FFFFFF; --text-muted: var(--on-block-muted); --focus: #E8B86A; --border: rgb(255 255 255 / .3); }
.offer > * { min-width: 0; }
@media (min-width: 900px) { .offer { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); align-items: center; } }
.offer-sticker { position: absolute; top: -16px; right: clamp(16px, 4vw, 48px); font-size: 1rem; padding: 9px 16px; }
.offer-name { font-size: var(--fs-h3); font-weight: 600; color: var(--on-block-muted); }
.offer-price { margin-top: 10px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 .3em; }
.offer-price .from { font: 600 clamp(1.5rem, 1rem + 2vw, 2.5rem)/1 var(--font-head); color: #E8B86A; }
.offer-price .amount { font: 700 clamp(3.25rem, 1.6rem + 7vw, 7rem)/.95 var(--font-head); letter-spacing: -.045em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.offer-vat { margin-top: 8px; color: var(--on-block-muted); }
.offer-time { display: flex; align-items: center; gap: 8px; margin-top: 14px; font: 600 var(--fs-label)/1.3 var(--font-head); }
.offer-time svg { width: 18px; height: 18px; flex: none; }
.offer-main .btn { margin-top: 28px; }
.offer-h { font: 600 var(--fs-label)/1.3 var(--font-head); color: var(--on-block-muted); }
.checks { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 12px; }
.checks li { display: grid; grid-template-columns: 12px 1fr; gap: 14px; align-items: baseline; font: 600 clamp(1.0625rem, 1rem + .4vw, 1.3125rem)/1.35 var(--font-head); }
.checks li::before { content: ""; width: 12px; height: 12px; background: #E8B86A; transform: translateY(1px); }
.offer-more { margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--border); color: var(--on-block-muted); }
.btn-lime { background: #E8B86A; color: #2B2926; }
.btn-lime:hover, .btn-lime:focus-visible { background: #FFFFFF; color: #2B2926; }
.offer-mini { position: relative; display: grid; gap: 20px 32px; margin-top: 24px; padding: clamp(20px, 3vw, 32px); border: 2px solid var(--text); border-radius: var(--r-3); background: var(--bg); }
.offer-mini > * { min-width: 0; }
@media (min-width: 640px) { .offer-mini { grid-template-columns: auto minmax(0, 1fr); align-items: center; } }
@media (min-width: 900px) { .offer-mini { max-width: 760px; margin-left: auto; transform: rotate(-.6deg); } }
.lm { display: grid; justify-items: center; gap: 10px; width: 200px; }
.lm-stage { display: grid; justify-items: center; gap: 6px; width: 100%; padding: 20px 12px 16px; border-radius: var(--r-3); background: #2B2926; box-shadow: inset 0 0 0 1px #3A3733; overflow: hidden; }
.lm svg { width: 132px; height: 132px; display: block; overflow: visible; }
.lm-bg { fill: #45413C; }
.lm-f { fill: #FFFFFF; } .lm-arc { fill: #E8B86A; }
.lm-spark { fill: #E8B86A; opacity: 0; }
.lm-ring { fill: none; stroke: #E8B86A; stroke-width: 1.5; opacity: 0; transform-box: fill-box; transform-origin: center; }
.lm-f, .lm-arc, .lm-bg, .lm-spark, .lm-squash { transform-box: fill-box; }
.lm-bg { transform-origin: center; }
.lm-stem { transform-origin: 50% 100%; }
.lm-arm1, .lm-arm2 { transform-origin: 0% 50%; }
.lm-arc { transform-origin: 0% 50%; }
.lm-squash { transform-origin: 50% 100%; }
.lm-spark { transform-origin: center; }
.lm-word { font: 700 1.125rem/1 var(--font-head); letter-spacing: -.02em; color: #EEEAE4; }
.lm-replay { min-height: 44px; padding: 0 16px; border: 1.5px solid var(--text); border-radius: var(--r-pill); background: var(--bg); color: var(--text); font: 600 .875rem/1 var(--font-head); cursor: pointer; }
.lm-replay:hover { background: var(--text); color: var(--bg); }
.lm-replay:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.offer-mini h3 { font-size: calc(var(--fs-h3) * 1.15); font-weight: 700; }
.mini-price { margin-top: 6px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 .5em; }
.mini-price .amount { font: 700 clamp(2rem, 1.4rem + 2vw, 2.75rem)/1 var(--font-head); letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.mini-price .from { font: 700 var(--fs-lead)/1 var(--font-head); color: var(--accent); }
.mini-price .vat { color: var(--text-muted); font-size: var(--fs-small); }
.checks--mini { margin-top: 12px; gap: 6px; }
.checks--mini li { font-size: var(--fs-body); }
.checks--mini li::before { background: var(--accent); }
.offer-mini .btn { margin-top: 18px; }
.addons-line { margin-top: 24px; color: var(--text-muted); max-width: 70ch; }
.addons-line strong { color: var(--text); font-family: var(--font-head); }

/* ---------- Proces ---------- */
.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 32px 20px; }
@media (min-width: 560px) { .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 960px) { .steps { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.steps > li { min-width: 0; position: relative; padding-top: 24px; }
.step-line { position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--accent); transform-origin: left; }
.step-no { display: block; font: 700 clamp(4.5rem, 2rem + 8vw, 8.5rem)/.86 var(--font-head); letter-spacing: -.06em; color: var(--accent); font-variant-numeric: tabular-nums; margin-bottom: 14px; }
.steps h3 { margin-bottom: 6px; }
.steps p { color: var(--text-muted); max-width: 32ch; }
.after-steps { margin-top: 40px; }
@supports (animation-timeline: view()) { @media (prefers-reduced-motion: no-preference) {
  .step-line { animation: fuge-x linear both; animation-timeline: view(); animation-range: entry 10% cover 40%; }
} }
@keyframes fuge-x { from { transform: scaleX(0); } }

/* ---------- Om mig ---------- */
.about { display: grid; gap: 48px; }
.about > * { min-width: 0; }
.about { max-width: 760px; }
.about-panel { position: relative; max-width: 480px; }
.about-panel .photo { aspect-ratio: 4 / 5; }
.polat { position: absolute; left: 16px; bottom: 44px; z-index: 3; padding: 10px 20px; font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.25rem); letter-spacing: -.02em; }
.polat b { font-weight: 700; }
.about-cap { margin-top: 10px; font-size: .9375rem; color: var(--text-muted); }
.about-text h2 { margin-bottom: 24px; }
.about-text p { max-width: 52ch; }
.about-text p + p { margin-top: 1em; }
.about-punch { font: 600 var(--fs-lead)/1.4 var(--font-head); color: var(--text); }

/* ---------- FAQ ---------- */
.faq-wrap { display: grid; gap: 32px 64px; }
.faq-wrap > * { min-width: 0; }
@media (min-width: 960px) { .faq-wrap { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); } .faq-head { position: sticky; top: calc(var(--header-h) + 32px); align-self: start; } }
.faq-list { display: grid; gap: 8px; }
.faq-list details { border: 1.5px solid var(--border); border-radius: var(--r-2); padding-inline: 18px; transition: background-color var(--dur-2); }
.faq-list details[open] { background: var(--lime-soft); border-color: transparent; }
.faq-list summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 64px; padding-block: 14px; font: 600 var(--fs-h3)/1.25 var(--font-head); letter-spacing: -.015em; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary:hover { color: var(--accent); }
.plus { position: relative; width: 32px; height: 32px; flex: none; background: var(--accent); border-radius: 50%; }
.plus::before, .plus::after { content: ""; position: absolute; background: var(--on-accent); }
.plus::before { left: 9px; right: 9px; top: 15px; height: 2px; }
.plus::after { top: 9px; bottom: 9px; left: 15px; width: 2px; transition: transform var(--dur-2) var(--ease-out); }
details[open] .plus::after { transform: rotate(90deg); }
.faq-answer { padding-bottom: 22px; max-width: var(--measure); }
.faq-more { margin-top: 28px; color: var(--text-muted); }

/* ---------- Kontakt (blæk) ---------- */
.sec-ink { position: relative; background: var(--footer); overflow: hidden; }
.on-ink { --text: #EEEAE4; --text-muted: #B5AEA5; --accent: #E8B86A; --focus: #E8B86A; --border-strong: #7A746C; color: var(--text); }
.contact { display: grid; gap: 40px; grid-template-areas: "head" "form" "direct"; }
.contact > * { min-width: 0; }
.contact-head { grid-area: head; } .form-card { grid-area: form; } .direct { grid-area: direct; }
@media (min-width: 1000px) { .contact { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); grid-template-areas: "head form" "direct form"; column-gap: 64px; row-gap: 40px; align-items: start; } }
.contact-head p:not(.kicker) { margin-top: 20px; color: var(--text-muted); font-size: var(--fs-lead); line-height: 1.55; max-width: 40ch; }
.form-card { position: relative; background: var(--bg); border-radius: var(--r-3); padding: clamp(22px, 3vw, 36px); box-shadow: inset 0 0 0 1px var(--border); }

.form-grid { display: grid; gap: 22px; }
@media (min-width: 640px) { .form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .form-grid .full { grid-column: 1 / -1; } }
.field { display: grid; gap: 6px; min-width: 0; }
.field label { font: 600 var(--fs-small)/1.3 var(--font-head); }
.field .opt { font-weight: 500; color: var(--text-muted); }
.hint { font-size: .9375rem; color: var(--text-muted); line-height: 1.45; }
.field input, .field select, .field textarea { width: 100%; min-height: 48px; padding: 10px 12px; font: 400 1.0625rem/1.4 var(--font-body); color: var(--text); background: var(--surface); border: 1.5px solid var(--border-strong); border-radius: var(--r-1); }
.field textarea { min-height: 128px; resize: vertical; }
.field select { appearance: none; -webkit-appearance: none; padding-right: 40px; background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%); background-position: calc(100% - 20px) 50%, calc(100% - 15px) 50%; background-size: 5px 5px; background-repeat: no-repeat; }
.field input::placeholder, .field textarea::placeholder { color: var(--text-muted); opacity: 1; }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible { border-color: var(--accent); }
.field [aria-invalid="true"] { border-color: var(--error); }
.field-error { display: flex; gap: 8px; align-items: baseline; color: var(--error); font: 500 .9375rem/1.4 var(--font-head); }
.field-error::before { content: "!"; display: inline-grid; place-items: center; width: 16px; height: 16px; flex: none; background: var(--error); color: var(--bg); font: 700 .75rem/1 var(--font-head); border-radius: var(--r-1); transform: translateY(2px); }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-top { display: grid; gap: 12px; margin-bottom: 24px; }
.req-note { font-size: .9375rem; color: var(--text-muted); }
.error-summary { padding: 16px 18px; border: 2px solid var(--error); border-radius: var(--r-2); background: var(--card); }
.error-summary p { font: 600 var(--fs-small)/1.4 var(--font-head); color: var(--error); }
.error-summary ul { margin: 8px 0 0; padding-left: 20px; font-size: var(--fs-small); }
.error-summary a { color: var(--text); }
.form-actions { margin-top: 28px; display: grid; gap: 14px; }
.form-note { font-size: var(--fs-small); color: var(--text-muted); line-height: 1.55; max-width: 60ch; }
.form-actions .btn { justify-self: start; }
@media (max-width: 559px) { .form-actions .btn { justify-self: stretch; } }
.privacy { font-size: .9375rem; color: var(--text-muted); }
.form-status { font-size: .9375rem; color: var(--text-muted); }
.form-status:empty { display: none; }
#submit-btn[disabled] { opacity: .7; cursor: progress; }
.ready { margin-top: 28px; padding: 22px clamp(18px, 3vw, 28px); border: 2px solid var(--success); background: var(--surface); border-radius: var(--r-2); }
.ready h3 { font-size: 1.375rem; }
.ready > p { font-size: var(--fs-small); color: var(--text-muted); margin-top: 8px; max-width: 60ch; }
.msg-meta { margin: 16px 0 10px; display: grid; gap: 6px; font-size: var(--fs-small); }
.msg-meta div { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 8px; align-items: baseline; }
.msg-meta dt { font: 600 var(--fs-small)/1.5 var(--font-head); color: var(--text-muted); }
.msg-meta dd { margin: 0; overflow-wrap: anywhere; min-width: 0; }
.msg-meta .to-row dd { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; }
.msg-meta .to-row dd span { font: 600 var(--fs-label)/1.4 var(--font-head); user-select: all; -webkit-user-select: all; }
.ready textarea { width: 100%; min-height: 200px; padding: 12px; font: 400 .9375rem/1.55 var(--font-body); color: var(--text); background: var(--card); border: 1.5px solid var(--border-strong); border-radius: var(--r-1); resize: vertical; }
.msg-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 14px; }
.copy-status { min-height: 1.4em; margin-top: 8px; font: 500 var(--fs-small)/1.4 var(--font-head); color: var(--success); }
.direct h3 { margin-bottom: 4px; }
.direct-list { list-style: none; margin: 16px 0; padding: 0; border-top: 1px solid var(--border-strong); }
.direct-list li { display: grid; gap: 4px; padding-block: 14px; border-bottom: 1px solid var(--border-strong); }
.direct-label { font: 500 .9375rem/1.2 var(--font-head); color: var(--text-muted); }
.direct-row { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; min-width: 0; }
.direct-value { font: 700 var(--fs-h3)/1.25 var(--font-head); letter-spacing: -.01em; color: #E8B86A; overflow-wrap: anywhere; user-select: all; -webkit-user-select: all; min-width: 0; }
a.direct-value { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 5px; display: inline-flex; align-items: center; min-height: 44px; }
a.direct-value:hover { color: #FFFFFF; }
.copy-btn { min-height: 44px; padding: 6px 12px; background: var(--card); border: 1px solid var(--border-strong); border-radius: var(--r-pill); color: var(--text); font: 600 .9375rem/1 var(--font-head); cursor: pointer; }
.copy-btn:hover { border-color: var(--text); }
.copy-btn.done { border-color: var(--success); color: var(--success); }
.on-ink .copy-btn { background: transparent; }
.on-ink .copy-btn.done { border-color: #E8B86A; color: #E8B86A; }
.direct-note { font-size: var(--fs-small); color: var(--text-muted); }
.drift--line { z-index: 0; }

/* ---------- Footer (blæk, én række) ---------- */
.site-footer { background: var(--footer); color: var(--footer-text); --text: var(--footer-text); --text-muted: var(--footer-muted); --border: #3A3733; --focus: #E8B86A; --logo-ink: #EEEAE4; --logo-arc: #E8B86A; --logo-studio: #B5AEA5; border-top: 1px solid #3A3733; }
.footer-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 28px; padding-block: 28px calc(28px + env(safe-area-inset-bottom, 0px)); }
.footer-row > * { min-width: 0; }
.footer-logo { display: inline-flex; min-height: 44px; align-items: center; }
.footer-logo svg { height: 26px; width: auto; display: block; }
.site-footer p { font-size: var(--fs-small); color: var(--footer-muted); }
.site-footer a { color: var(--footer-link); text-decoration-color: currentColor; }
.site-footer a:hover { color: var(--footer-text); }
.footer-contact a { display: inline-flex; align-items: center; min-height: 44px; overflow-wrap: anywhere; }
.credits { font-size: .875rem !important; line-height: 1.6; max-width: 60ch; }
.credits a { display: inline-block; padding-block: 10px; margin-block: -10px; }
.footer-legal { flex-basis: 100%; }
@media (min-width: 1080px) { .footer-legal { flex-basis: auto; margin-left: auto; } }

/* =========================================================
   Bevægelse – kun uden reduced motion
   ========================================================= */
@media (prefers-reduced-motion: no-preference) {
  .hero-h1 .ln { animation: ln-up 700ms var(--ease-out) both; }
  .hero-h1 .ln:nth-child(2) { animation-delay: 80ms; }
  .swap > span { transition: clip-path 300ms var(--ease-out); }
  .swap > span::after { transition: transform 520ms cubic-bezier(.65,0,.35,1) 180ms; }
  .fan-card { transition: transform 450ms cubic-bezier(.34, 1.3, .64, 1); }
  .drift { animation: drift 7s ease-in-out infinite alternate; }
  .drift--arc { animation-duration: 9s; }
  .drift--line { animation-duration: 6s; }
  .band.is-live .band-track { animation: marquee 45s linear infinite; }
  .band.is-live:hover .band-track { animation-play-state: paused; }

  html.js .lm.is-playing .lm-bg { animation: lmx-bg 2.8s cubic-bezier(.34,1.56,.64,1) both; }
  html.js .lm.is-playing .lm-stem { animation: lmx-stem 2.8s cubic-bezier(.2,.7,.2,1) both; }
  html.js .lm.is-playing .lm-arm1 { animation: lmx-arm1 2.8s cubic-bezier(.2,.7,.2,1) both; }
  html.js .lm.is-playing .lm-arm2 { animation: lmx-arm2 2.8s cubic-bezier(.2,.7,.2,1) both; }
  html.js .lm.is-playing .lm-arc { animation: lmx-arc 2.8s cubic-bezier(.3,1.4,.6,1) both; }
  html.js .lm.is-playing .lm-squash { animation: lmx-squash 2.8s ease-out both; }
  html.js .lm.is-playing .lm-spark { animation: lmx-spark 2.8s ease-out both; }
  html.js .lm.is-playing .lm-ring { animation: lmx-ring 2.8s ease-out both; }
  html.js .lm.is-playing .lm-word { animation: lmx-word 2.8s cubic-bezier(.2,.7,.2,1) both; }
  html.js .rv { transition: transform 600ms var(--ease-out); transition-delay: calc(var(--i, 0) * 70ms); }
  html.js .rv:not(.in) { transform: translateY(16px); }
  .photo[data-parallax] img { transform: translateY(var(--py, 0)) scale(1.08); }
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .btn { transition: transform 180ms var(--ease-bounce), background-color 120ms, color 120ms, border-color 120ms; }
  .btn:hover { transform: translateY(-3px); }
  .btn:active { transform: translateY(1px) scale(.98); }
  .p-card { transition: transform 260ms var(--ease-bounce); }
  .p-card:hover, .p-card:focus-within { transform: rotate(var(--tilt, -1.5deg)) translateY(-6px); }
  .p-card:nth-child(even) { --tilt: 1.5deg; }
  .p-card:hover .mk-browser { transform: translateX(-6%) translateY(-6px); }
  .p-card:hover .mk-phone { transform: translateY(-10px); }
  .sticker { transition: transform 200ms var(--ease-bounce); }
  .sticker:hover { transform: rotate(calc(var(--r) + 4deg)) scale(1.06); }
  html.js .p-card.rv.in { transition: transform 260ms var(--ease-bounce); }
  html.js .rv.p-card.in:hover { transform: rotate(var(--tilt, -1.5deg)) translateY(-6px); }
}
@keyframes lmx-bg { 0% { transform: scale(0); } 16% { transform: scale(1.14); } 24%, 100% { transform: none; } }
@keyframes lmx-stem { 0%, 10% { transform: scaleY(0); } 26% { transform: scaleY(1.1); } 32%, 100% { transform: none; } }
@keyframes lmx-arm1 { 0%, 24% { transform: scaleX(0); } 38% { transform: scaleX(1.12); } 43%, 100% { transform: none; } }
@keyframes lmx-arm2 { 0%, 30% { transform: scaleX(0); } 44% { transform: scaleX(1.12); } 49%, 100% { transform: none; } }
@keyframes lmx-arc { 0%, 44% { transform: rotate(-210deg) scale(.15); opacity: 0; } 46% { opacity: 1; } 64% { transform: rotate(10deg) scale(1.06); } 72%, 100% { transform: none; opacity: 1; } }
@keyframes lmx-squash { 0%, 62% { transform: none; } 68% { transform: scale(1.1, .88); } 76% { transform: scale(.96, 1.05); } 84%, 100% { transform: none; } }
@keyframes lmx-spark { 0%, 64% { opacity: 0; transform: translate(0, 0) scale(.3); } 68% { opacity: 1; } 88%, 100% { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(1.2); } }
@keyframes lmx-ring { 0%, 64% { opacity: 0; transform: scale(.9); } 67% { opacity: 1; } 92%, 100% { opacity: 0; transform: scale(1.32); } }
@keyframes lmx-word { 0%, 72% { clip-path: inset(0 100% 0 0); transform: translateY(6px); } 90%, 100% { clip-path: inset(0 0 0 0); transform: none; } }
@keyframes ln-up { from { transform: translateY(.3em); } }
@keyframes drift { from { transform: translate(-8px, 6px); } to { transform: translate(8px, -6px); } }
@keyframes marquee { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

/* Logo-intro i headeren (én gang ved indlæsning, igen ved hover) */
.bi-f, .bi-arc, .bi-dot { transform-box: fill-box; }
.bi-f { transform-origin: 50% 100%; }
.bi-arc { transform-origin: 0% 50%; }
.bi-dot { transform-origin: 50% 100%; }
@media (prefers-reduced-motion: no-preference) {
  html.js .brand.is-intro .logo { animation: bi-pop 1.8s ease-out both; transform-origin: 0% 50%; }
  html.js .brand.is-intro .bi-f { animation: bi-f 1.8s cubic-bezier(.2,.7,.2,1) both; }
  html.js .brand.is-intro .bi-arc { animation: bi-arc 1.8s cubic-bezier(.3,1.4,.6,1) both; }
  html.js .brand.is-intro .bi-word { animation: bi-word 1.8s cubic-bezier(.2,.7,.2,1) both; }
  html.js .brand.is-intro .bi-dot { animation: bi-dot 1.8s cubic-bezier(.34,1.56,.64,1) both; }
}
@keyframes bi-f { 0% { transform: scaleY(0); } 22% { transform: scaleY(1.12); } 30%, 100% { transform: none; } }
@keyframes bi-arc { 0%, 22% { transform: rotate(-210deg) scale(.15); opacity: 0; } 25% { opacity: 1; } 48% { transform: rotate(10deg) scale(1.08); } 58%, 100% { transform: none; opacity: 1; } }
@keyframes bi-pop { 0%, 46% { transform: none; } 52% { transform: scale(1.06, .94); } 60% { transform: scale(.98, 1.02); } 68%, 100% { transform: none; } }
@keyframes bi-word { 0%, 50% { clip-path: inset(0 100% 0 0); } 88%, 100% { clip-path: inset(0 0 0 0); } }
@keyframes bi-dot { 0%, 82% { transform: translateY(-14px); opacity: 0; } 86% { opacity: 1; } 100% { transform: none; opacity: 1; } }

/* Animeret baggrund i hero (canvas). Statisk ved reduceret bevægelse. */
.hero-bg { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; display: block;
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 72%, transparent 100%); mask-image: linear-gradient(to bottom, #000 0%, #000 72%, transparent 100%); }

/* Hero-baggrund: stort animeret FP-logo bag konceptsiderne */
.hero-deco { position: relative; pointer-events: none; display: grid; place-items: center; }
.hl { position: relative; width: min(100%, 560px); padding: 12% 0; }
.hl .hero-logo { width: 100%; height: auto; display: block; overflow: visible; }
@media (prefers-reduced-motion: no-preference) {
  .hl { animation: hl-float 7s ease-in-out infinite alternate; }
  html.js .hl.is-intro .hero-logo { animation: bi-pop 1.8s ease-out both; transform-origin: 0% 50%; }
  html.js .hl.is-intro .bi-f { animation: bi-f 1.8s cubic-bezier(.2,.7,.2,1) both; }
  html.js .hl.is-intro .bi-arc { animation: bi-arc 1.8s cubic-bezier(.3,1.4,.6,1) both; }
  html.js .hl.is-intro .bi-word { animation: bi-word 1.8s cubic-bezier(.2,.7,.2,1) both; }
  html.js .hl.is-intro .bi-dot { animation: bi-dot 1.8s cubic-bezier(.34,1.56,.64,1) both; }
  .hero.is-still .hl { animation-play-state: paused; }
}
@keyframes hl-float { from { transform: translateY(6px) rotate(-2deg); } to { transform: translateY(-6px) rotate(1.5deg); } }

/* ============ Mørk "video"-start: sløret skærm med en hjemmeside, der langsomt glider og zoomer ============ */
.hero--dark { background: #1E1C1A; color: #FFFFFF; overflow: hidden; }
.hero--dark > .wrap { z-index: 2; grid-template-columns: minmax(0, 1fr) !important; align-content: center; min-height: min(84svh, 780px); padding-block: clamp(56px, 9vw, 120px); }
.hero--dark .hero-text { max-width: 1040px; }
.hero--dark .hero-h1 { color: #FFFFFF; font-size: clamp(2.5rem, 1rem + 5.4vw, 5.5rem); }
.hero--dark .swap > span { color: transparent; background: linear-gradient(90deg, #F6E3C3 0%, #E8B86A 50%, #D9956A 100%); -webkit-background-clip: text; background-clip: text; padding-bottom: .08em; }
.hero--dark .swap > span::after { display: none; }
.hero--dark .hero-lead { color: #D6CFC6; max-width: 44ch; }
.hero--dark .price-chip { background: rgb(255 255 255 / .08); border: 1px solid rgb(255 255 255 / .18); color: #D6CFC6; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.hero--dark .price-chip strong { color: #FFFFFF; }
.hero--dark .hero-ctas { gap: 12px 14px; margin-top: 28px; }
.hero--dark .btn-primary { background: #FFFFFF; color: #2B2926; border-radius: var(--r-pill); padding-inline: 28px; }
.hero--dark .btn-primary:hover { background: #E8B86A; color: #2B2926; }
.hero--dark .btn-ghost { min-height: 52px; padding: 0 26px; color: #FFFFFF; text-decoration: none; border: 1.5px solid rgb(255 255 255 / .45); border-radius: var(--r-pill); display: inline-flex; align-items: center; }
.hero--dark .btn-ghost:hover { border-color: #FFFFFF; background: rgb(255 255 255 / .08); color: #FFFFFF; }
.hero--dark :focus-visible { outline-color: #E8B86A; }

.hero-scene { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.hs-glow { position: absolute; width: 70vw; aspect-ratio: 1; right: -12vw; top: -10vw; border-radius: 50%; background: radial-gradient(closest-side, rgb(232 184 106 / .32), rgb(232 184 106 / 0)); filter: blur(10px); }
.hs-screen { position: absolute; right: -6%; top: 9%; width: min(78vw, 1100px); transform: perspective(1600px) rotateY(-18deg) rotateX(3deg) scale(1.05); transform-origin: 70% 50%; filter: blur(2.5px) saturate(.95); opacity: .8; }
.hs-bezel { padding: 14px; background: #2A2826; border-radius: 22px; box-shadow: 0 40px 120px -20px rgb(0 0 0 / .8), inset 0 0 0 1px rgb(255 255 255 / .08); }
.hs-site { aspect-ratio: 16 / 9.4; border-radius: 10px; overflow: hidden; padding: 3% 4%; display: grid; grid-template-rows: auto 1fr auto; gap: 5%; background: #F6EEE2; color: #3E2A20; }
.hs-stand { width: 22%; height: 60px; margin: 0 auto; background: linear-gradient(#2E2C29, #181716); clip-path: polygon(30% 0, 70% 0, 100% 100%, 0 100%); }
.hs-nav { display: flex; align-items: center; gap: 3%; }
.hs-nav span { height: 10px; width: 9%; border-radius: 4px; background: currentColor; opacity: .25; }
.hs-nav .hs-logo { width: 14%; height: 18px; opacity: .8; margin-right: auto; }
.hs-btn { display: block; height: 22px; width: 12%; border-radius: 999px; background: #B4552B; opacity: 1 !important; }
.hs-main { display: grid; grid-template-columns: 1.1fr 1fr; gap: 6%; align-items: center; }
.hs-copy { display: grid; gap: 14px; }
.hs-h { margin: 0; font: 700 clamp(1.4rem, 3.2vw, 3.4rem)/1 var(--font-head); letter-spacing: -.03em; }
.hs-copy b { display: block; height: 10px; border-radius: 4px; background: currentColor; opacity: .22; }
.hs-copy b.short { width: 60%; }
.hs-btn.big { width: 40%; height: 34px; margin-top: 6px; }
.hs-img { aspect-ratio: 4 / 3; border-radius: 12px; background: #D9C2A0; }
.hs-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3%; }
.hs-card { display: grid; gap: 8px; padding: 6%; border-radius: 10px; background: rgb(0 0 0 / .06); }
.hs-card i { display: block; aspect-ratio: 16 / 7; border-radius: 6px; background: currentColor; opacity: .15; }
.hs-card b { display: block; height: 8px; border-radius: 4px; background: currentColor; opacity: .2; }
.hs-card b + b { width: 70%; }
.hero-shade { position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(90deg, rgb(30 28 26 / .96) 0%, rgb(30 28 26 / .82) 38%, rgb(30 28 26 / .45) 70%, rgb(30 28 26 / .3) 100%), linear-gradient(0deg, rgb(30 28 26 / .9) 0%, rgb(30 28 26 / 0) 30%); }
@media (max-width: 899px) {
  .hs-screen { right: -40%; top: 40%; width: 150vw; opacity: .6; }
  .hero-shade { background: linear-gradient(180deg, rgb(30 28 26 / .88) 0%, rgb(30 28 26 / .78) 55%, rgb(30 28 26 / .55) 100%); }
}
@media (prefers-reduced-motion: no-preference) {
  .hs-screen { animation: hs-drift 24s ease-in-out infinite alternate; }
  .hs-glow { animation: hs-glow 12s ease-in-out infinite alternate; }
  .hs-site { animation: hs-theme 30s steps(1, end) infinite; }
  .hs-img { animation: hs-img 30s steps(1, end) infinite; }
  .hs-btn { animation: hs-btn 30s steps(1, end) infinite; }
}
@keyframes hs-drift {
  from { transform: perspective(1600px) rotateY(-18deg) rotateX(3deg) scale(1.05) translate3d(0, 0, 0); }
  to { transform: perspective(1600px) rotateY(-12deg) rotateX(1deg) scale(1.16) translate3d(-5%, 2%, 0); } }
@keyframes hs-glow { from { opacity: .7; transform: scale(.95); } to { opacity: 1; transform: scale(1.08) translateX(-4%); } }
@keyframes hs-theme { 0% { background: #F6EEE2; color: #3E2A20; } 25% { background: #1F2A36; color: #F4F6F8; } 50% { background: #F8ECEF; color: #4A1D33; } 75% { background: #EAF6F4; color: #0F4D4A; } }
@keyframes hs-img { 0% { background: #D9C2A0; } 25% { background: #8A6446; } 50% { background: #C98D8F; } 75% { background: #A9D3CC; } }
@keyframes hs-btn { 0% { background: #B4552B; } 25% { background: #F0A13A; } 50% { background: #4A1D33; } 75% { background: #0F4D4A; } }

/* Det kreative punktum efter "Punktum" */
.pdot { position: relative; display: inline-block; width: .46em; height: 1em; margin-left: .06em; vertical-align: baseline; }
.pdot-c { position: absolute; left: .02em; bottom: .07em; width: .4em; height: .4em; border-radius: 50%; background: var(--logo-arc); color: transparent; overflow: hidden; line-height: 1; box-shadow: inset -.04em -.05em 0 rgb(0 0 0 / .12); }
.pdot::after { content: ""; position: absolute; left: .22em; bottom: .27em; width: .4em; height: .4em; margin: -.2em 0 0 -.2em; border-radius: 50%; border: .04em solid var(--logo-arc); opacity: 0; pointer-events: none; transform: translate(0, 50%); }
@media (prefers-reduced-motion: no-preference) {
  html.js .pdot:not(.is-dropped) .pdot-c { transform: translateY(-2.2em); opacity: 0; }
  .pdot.is-dropped .pdot-c { animation: pdot-drop 1.1s cubic-bezier(.3, 0, .4, 1) both; transform-origin: 50% 100%; }
  .pdot.is-dropped::after { animation: pdot-ring .9s ease-out .55s both; }
  .pdot.is-bounce .pdot-c { animation: pdot-bounce .7s cubic-bezier(.3, 0, .4, 1) both; }
}
@keyframes pdot-drop {
  0% { transform: translateY(-2.2em); opacity: 0; } 12% { opacity: 1; }
  48% { transform: translateY(0) scale(1, 1); } 56% { transform: translateY(0) scale(1.35, .62); }
  70% { transform: translateY(-.55em) scale(.92, 1.08); } 84% { transform: translateY(0) scale(1.12, .86); }
  92% { transform: translateY(-.1em) scale(.98, 1.02); } 100% { transform: none; opacity: 1; } }
@keyframes pdot-bounce { 0%, 100% { transform: none; } 20% { transform: scale(1.2, .8); } 50% { transform: translateY(-.5em) scale(.92, 1.08); } 78% { transform: scale(1.1, .88); } }
@keyframes pdot-ring { 0% { opacity: .9; transform: translate(0, 50%) scale(.6); } 100% { opacity: 0; transform: translate(0, 50%) scale(3); } }

/* Projekt med rigtigt skærmbillede (fx AutoGroup Farum) */
.project-media--shot { background: radial-gradient(120% 90% at 30% 20%, rgb(232 184 106 / .22), transparent 60%); }
.project-media--shot .mk-browser { width: 88%; transform: none; border-radius: 10px; box-shadow: 0 0 0 6px #1E1C1A, var(--shadow-lift); }
.mk-shot { display: block; width: 100%; height: auto; }
.p-card:hover .project-media--shot .mk-browser { transform: translateY(-6px); }
.p-live { margin-top: 10px; }
.p-card--cobalt .text-link, .p-card--ink .text-link { color: #FFFFFF; text-decoration-color: #E8B86A; }
@media (min-width: 768px) {
  .p-grid > .p-card--wide { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 0 40px; align-items: center; }
  .p-grid > .p-card--wide .project-media { grid-row: 1 / span 4; aspect-ratio: 16 / 10; }
  .p-grid > .p-card--wide h3 { margin-top: 0; align-self: end; }
}
.p-idea { margin-top: 12px; color: var(--text-muted); max-width: 42ch; }
@media (min-width: 768px) {
  .p-grid > .p-card--wide { grid-template-rows: 1fr auto auto auto auto 1fr; }
  .p-grid > .p-card--wide .project-media { grid-column: 1; grid-row: 1 / -1; }
  .p-grid > .p-card--wide h3 { grid-column: 2; grid-row: 2; }
  .p-grid > .p-card--wide .p-cat { grid-column: 2; grid-row: 3; }
  .p-grid > .p-card--wide .p-idea { grid-column: 2; grid-row: 4; }
  .p-grid > .p-card--wide .p-live { grid-column: 2; grid-row: 5; margin-top: 18px; }
}

/* Tre konceptkort på én række på store skærme */
@media (min-width: 1100px) { .p-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* Klikbart projektbillede – åbner demoen */
a.mk-link { display: block; cursor: pointer; }