/* MHE Web Design – kommer snart. Tokens: MOTION.md §2 (Kobber soft, dark), §3.2–3.3, §4, §5, §7, §8.1, §8.10. */

@font-face {
  font-family: "Geist Variable";
  src: url("/fonts/geist-latin-wght-normal.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: dark;
  --c-base: 22 20 18;            /* #161412 */
  --c-surface: 30 27 24;         /* #1E1B18 */
  --c-line: 56 50 44;            /* #38322C */
  --c-ink: 237 232 223;          /* #EDE8DF */
  --c-ink-muted: 163 154 142;    /* #A39A8E */
  --c-copper: 195 141 110;       /* #C38D6E */
  --c-copper-hover: 209 162 134; /* #D1A286 */
  --c-copper-on: 22 20 18;       /* #161412 */
  --c-danger: 217 120 107;       /* #D9786B  errors only (advisor's call) */
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --ease-settle: cubic-bezier(.2, .8, .2, 1);
  --gutter: max(16px, 5vw);
}

@media (min-width: 768px) {
  :root { --gutter: 4vw; }
}

@supports (width: round(1px, 1px)) {
  :root { --gutter: max(16px, round(5vw, 1px)); }
  @media (min-width: 768px) {
    :root { --gutter: round(4vw, 1px); }
  }
}

*, *::before, *::after { box-sizing: border-box; }

html {
  background: rgb(var(--c-base));
  color: rgb(var(--c-ink));
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  overflow-x: clip;
  font-family: "Geist Variable", Geist, system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 16px;
  line-height: 1.55;
  /* glow.ambient over hero.bg (MOTION §2.5) */
  background:
    radial-gradient(circle 45vw at 50% 42%, rgb(var(--c-copper) / .05), rgb(var(--c-copper) / 0) 70%),
    radial-gradient(90% 70% at 72% 18%, rgb(var(--c-surface)) 0%, rgb(var(--c-base) / 0) 70%),
    rgb(var(--c-base));
}

/* hero.grain: opacity .02, layer 0, below everything (MOTION §3.2) */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: url("/img/grain-128.png") repeat;
  background-size: 128px 128px;
  opacity: .02;
}

.top, .intro, .foot {
  position: relative;
  z-index: 1;
  padding-inline: var(--gutter);
}

/* Lockup at u = 2: whole-pixel position, never animated (MOTION §3.7) */
.top { padding-top: 32px; }
.lockup { display: block; color: rgb(var(--c-ink)); }
.lockup-chevron { fill: rgb(var(--c-copper)); }
.lockup-sub { fill: rgb(var(--c-ink-muted)); }

.intro {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  max-width: calc(660px + 2 * var(--gutter));
  padding-block: 56px;
}

h1 {
  margin: 0 0 16px;
  font-size: clamp(30px, 9.4vw, 40px);
  line-height: 1.06;
  letter-spacing: -0.03em;
  font-weight: 600;
  text-wrap: balance;
  overflow-wrap: break-word;
}

.lead {
  margin: 0;
  max-width: 48ch;
  font-size: 18px;
  line-height: 1.55;
  color: rgb(var(--c-ink-muted));
  text-wrap: pretty;
}

.lead + .lead { margin-top: 16px; }

.tagline {
  margin: 24px 0 0;
  font-size: 16px;
  line-height: 1.35;
  letter-spacing: -0.01em;
  font-weight: 500;
  text-wrap: balance;
}

.contact { margin: 32px 0 0; }

.link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: 18px;
  font-weight: 500;
  color: rgb(var(--c-copper));
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  border-radius: 2px;
  transition: color 200ms var(--ease-settle), text-decoration-thickness 200ms var(--ease-settle);
}
.link:hover { color: rgb(var(--c-copper-hover)); text-decoration-thickness: 2px; }
.link:active { color: rgb(var(--c-ink)); }
.link:focus-visible { outline: 2px solid rgb(var(--c-copper)); outline-offset: 2px; }

.foot {
  padding-bottom: max(2.5rem, env(safe-area-inset-bottom));
}
.foot p {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: 24px;
  padding-top: 24px;
  border-top: 1px solid rgb(var(--c-line));
  font-size: 14px;
  line-height: 1.5;
  color: rgb(var(--c-ink-muted));
}

/* Inline text link (MOTION §8.1 text link); footer links get a 44px target (§8b.2) */
.inline-link {
  color: rgb(var(--c-copper));
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  border-radius: 2px;
  transition: color 200ms var(--ease-settle), text-decoration-thickness 200ms var(--ease-settle);
}
.inline-link:hover { color: rgb(var(--c-copper-hover)); text-decoration-thickness: 2px; }
.inline-link:active { color: rgb(var(--c-ink)); }
.inline-link:focus-visible { outline: 2px solid rgb(var(--c-copper)); outline-offset: 2px; }
.foot .inline-link { display: inline-flex; align-items: center; min-height: 44px; }

/* Kontakt (MOTION §8.6 card, §8.10 controls). No JS: native validation, :user-invalid for the invalid border. */
.kontakt { margin-top: 56px; }
h2 {
  margin: 0 0 16px;
  font-size: 26px;
  line-height: 1.2;
  letter-spacing: -0.015em;
  font-weight: 600;
  text-wrap: balance;
}
.note, .hint, .meta {
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
  color: rgb(var(--c-ink-muted));
}
.kontakt .note { margin-bottom: 16px; }
.form {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 20px;
  background: rgb(var(--c-surface));
  border: 1px solid rgb(var(--c-line));
  border-radius: 12px;
}
.field { display: flex; flex-direction: column; gap: 8px; }
.field label { font-size: 14px; line-height: 1.5; font-weight: 500; color: rgb(var(--c-ink)); }
.req { color: rgb(var(--c-ink-muted)); }
.input {
  width: 100%;
  min-height: 44px;
  margin: 0;
  padding: 10px 12px;
  font: inherit;
  font-size: 16px;
  line-height: 1.55;
  color: rgb(var(--c-ink));
  background: rgb(var(--c-base));
  border: 1px solid rgb(var(--c-ink-muted));
  border-radius: 8px;
  transition: border-color 200ms var(--ease-settle);
}
textarea.input { min-height: 128px; resize: vertical; }
.input:hover { border-color: rgb(var(--c-ink)); }
.input:focus-visible { outline: 2px solid rgb(var(--c-copper)); outline-offset: 2px; }
.input:user-invalid { border-color: rgb(var(--c-danger)); }
.check {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 44px;
  padding: 10px 12px;
  font-size: 16px;
  line-height: 1.55;
  border: 1px solid rgb(var(--c-line));
  border-radius: 8px;
  cursor: pointer;
  transition: border-color 200ms var(--ease-settle);
}
.check:hover { border-color: rgb(var(--c-ink-muted)); }
.check:has(:checked) { border-color: rgb(var(--c-copper)); }
.check:has(:user-invalid) { border-color: rgb(var(--c-danger)); }
.check input { flex: none; width: 20px; height: 20px; margin: 0; accent-color: rgb(var(--c-copper)); }
.check input:focus-visible { outline: 2px solid rgb(var(--c-copper)); outline-offset: 2px; }
@supports selector(:has(*)) {
  .check:has(:focus-visible) { outline: 2px solid rgb(var(--c-copper)); outline-offset: 2px; }
  .check input:focus-visible { outline: none; }
}
/* Honeypot position is the main site's (SETUP §6.6), not a design value */
.hp { position: absolute; left: -9999px; }
/* Primary CTA pill (MOTION §8.1), block on phones */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  width: 100%;
  padding: 14px 18px;
  font: inherit;
  font-size: 15px;
  line-height: 1;
  font-weight: 600;
  color: rgb(var(--c-copper-on));
  background: rgb(var(--c-copper));
  border: 0;
  border-radius: 9999px;
  cursor: pointer;
  transition: background-color 200ms var(--ease-out);
}
.btn:hover { background: rgb(var(--c-copper-hover)); }
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline: 2px solid rgb(var(--c-ink)); outline-offset: 3px; }

/* Personvern */
.prose p, .prose li { max-width: 62ch; }
.prose h2 { margin-top: 40px; }
.prose .meta { margin-bottom: 16px; }
.prose p:not(.meta):not(.contact) { margin: 0 0 16px; }
.prose ul { margin: 0 0 16px; padding-left: 20px; }
.prose li + li { margin-top: 8px; }

@media (min-width: 640px) {
  .btn { width: auto; align-self: flex-start; padding: .8em 1.35em; font-size: 14px; }
}

@media (min-width: 768px) {
  .form { padding: 24px; }
  .top { padding-top: 48px; }
  h1 {
    font-size: clamp(28px, 4.7vw, 56px);
    line-height: 1.04;
  }
  .tagline { font-size: 20px; }
}

/* Two-column split from 960px: intro left, Kontakt right (MOTION §6.7 Kontakt row, container.site 1100px). Below 960px the stacked order stays. */
@media (min-width: 960px) {
  .top.wide, .intro.wide, .foot.wide {
    width: 100%;
    max-width: calc(1100px + 2 * var(--gutter));
    margin-inline: auto;
  }
  .intro.wide {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    column-gap: clamp(64px, 6vw, 96px);
    align-items: center;
    align-content: center;
    padding-block: 40px;
  }
  .intro.wide .kontakt { margin-top: 0; max-width: 520px; justify-self: end; width: 100%; }
}

/* scroll.reveal entrance (MOTION §7.9): opacity 0 → 1, y 16px → 0, 550ms ease.out, stagger 80ms */
@media (prefers-reduced-motion: no-preference) {
  .reveal { animation: reveal 550ms var(--ease-out) both; }
  .reveal:nth-child(2) { animation-delay: 80ms; }
  .reveal:nth-child(3) { animation-delay: 160ms; }
  .reveal:nth-child(4) { animation-delay: 240ms; }
}

@keyframes reveal {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: none; }
}