/* MHE Webdesign – kommer snart, v4 look (palette v4.0, light and dark equal). Tokens: MOTION §2.2, §2.6, §4, §5, §7, §8.1, §8.2, §8.10.
   Every colour on the site lives in the three blocks below (RGB channels, so alpha variants stay on-token): the light block,
   the dark block and its copy for visitors who have not used the switch. The two dark copies must stay identical
   (src/site.test.ts guards it). No data-theme attribute = follow prefers-color-scheme; the switch (theme.js) sets data-theme. */
:root,
[data-theme="light"] {
  color-scheme: light;
  --c-base: 253 253 249;        /* #FDFDF9  page */
  --c-surface: 255 255 255;     /* #FFFFFF  cards, form */
  --c-surface-2: 241 242 238;   /* #F1F2EE  inset, disabled button */
  --c-line: 220 221 218;        /* #DCDDDA  decorative hairlines only */
  --c-ink: 17 24 30;            /* #11181E  text, focus ring, logo */
  --c-ink-muted: 97 102 104;    /* #616668  secondary text, control borders */
  --c-ink-dim: 135 139 140;     /* #878B8C  decorative only */
  --c-accent: 255 114 3;        /* #FF7203  fill, logo, graphic; never text in light */
  --c-accent-hover: 226 103 6;  /* #E26706 */
  --c-accent-soft: 253 231 210; /* #FDE7D2 */
  --c-accent-on: 17 24 30;      /* #11181E  text on accent */
  --c-accent-text: 178 79 0;    /* #B24F00  text-safe orange */
  --c-sage: 71 107 74;          /* #476B4A */
  --c-danger: 163 60 46;        /* #A33C2E  errors only */
  --c-danger-soft: 244 234 229; /* #F4EAE5 */
  --c-ink-on: 255 255 255;      /* #FFFFFF */
  /* MHE vibrant set (§2.8): icon tiles, kicker dots; never text roles. Tints precomputed over surface. */
  --c-pine: 34 105 90;          /* #22695A */
  --c-berry: 154 59 102;        /* #9A3B66 */
  --c-accent-tint: 255 238 225; /* #FFEEE1 */
  --c-pine-tint: 220 231 229;   /* #DCE7E5 */
  --c-berry-tint: 239 224 231;  /* #EFE0E7 */
  /* Primary-button switch (D20): accent. */
  --c-primary: var(--c-accent);
  --c-primary-hover: var(--c-accent-hover);
  --c-primary-on: var(--c-accent-on);
  --shadow-plate: 0 1px 2px rgba(17, 24, 30, .06), 0 28px 60px -24px rgba(17, 24, 30, .28); /* shadow.frame (F38) */
}

[data-theme="dark"] {
  color-scheme: dark;
  --c-base: 22 24 31;          /* #16181F */
  --c-surface: 31 33 40;       /* #1F2128 */
  --c-surface-2: 41 42 49;     /* #292A31 */
  --c-line: 55 56 62;          /* #37383E */
  --c-ink: 255 255 255;        /* #FFFFFF */
  --c-ink-muted: 166 167 170;  /* #A6A7AA */
  --c-ink-dim: 111 112 116;    /* #6F7074  decorative only */
  --c-accent: 255 114 3;       /* #FF7203 */
  --c-accent-hover: 255 131 33; /* #FF8321 */
  --c-accent-soft: 55 37 27;   /* #37251B */
  --c-accent-on: 17 24 30;     /* #11181E */
  --c-accent-text: 255 114 3;  /* #FF7203  passes as text on dark (6.47:1) */
  --c-sage: 147 174 140;       /* #93AE8C */
  --c-danger: 217 120 107;     /* #D9786B  errors only */
  --c-danger-soft: 49 37 42;   /* #31252A */
  --c-ink-on: 22 24 31;        /* #16181F */
  --c-pine: 53 163 140;        /* #35A38C */
  --c-berry: 204 121 159;      /* #CC799F */
  --c-accent-tint: 67 46 34;   /* #432E22 */
  --c-pine-tint: 35 54 56;     /* #233638 */
  --c-berry-tint: 59 47 59;    /* #3B2F3B */
  --c-primary: var(--c-accent);
  --c-primary-hover: var(--c-accent-hover);
  --c-primary-on: var(--c-accent-on);
  --shadow-plate: 0 1.4em 3em rgba(0, 0, 0, .4); /* shadow.sheet */
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    color-scheme: dark;
    --c-base: 22 24 31;          /* #16181F */
    --c-surface: 31 33 40;       /* #1F2128 */
    --c-surface-2: 41 42 49;     /* #292A31 */
    --c-line: 55 56 62;          /* #37383E */
    --c-ink: 255 255 255;        /* #FFFFFF */
    --c-ink-muted: 166 167 170;  /* #A6A7AA */
    --c-ink-dim: 111 112 116;    /* #6F7074  decorative only */
    --c-accent: 255 114 3;       /* #FF7203 */
    --c-accent-hover: 255 131 33; /* #FF8321 */
    --c-accent-soft: 55 37 27;   /* #37251B */
    --c-accent-on: 17 24 30;     /* #11181E */
    --c-accent-text: 255 114 3;  /* #FF7203  passes as text on dark (6.47:1) */
    --c-sage: 147 174 140;       /* #93AE8C */
    --c-danger: 217 120 107;     /* #D9786B  errors only */
    --c-danger-soft: 49 37 42;   /* #31252A */
    --c-ink-on: 22 24 31;        /* #16181F */
    --c-pine: 53 163 140;        /* #35A38C */
    --c-berry: 204 121 159;      /* #CC799F */
    --c-accent-tint: 67 46 34;   /* #432E22 */
    --c-pine-tint: 35 54 56;     /* #233638 */
    --c-berry-tint: 59 47 59;    /* #3B2F3B */
    --c-primary: var(--c-accent);
    --c-primary-hover: var(--c-accent-hover);
    --c-primary-on: var(--c-accent-on);
    --shadow-plate: 0 1.4em 3em rgba(0, 0, 0, .4); /* shadow.sheet */
    }
}

/* Logo (§3.7.2): the inline adaptive lockup takes ink and orange from these, so the switch recolours it */
:root { --logo-ink: rgb(var(--c-ink)); --logo-accent: rgb(var(--c-accent)); }

:root {
  --ease-out: cubic-bezier(.22, 1, .36, 1);     /* motion.ease.out */
  --ease-settle: cubic-bezier(.2, .8, .2, 1);   /* motion.ease.settle */
  /* spring.settle sampled at 21 points (MOTION §7.9) */
  --ease-spring: linear(0, 0.329, 0.622, 0.842, 0.986, 1.064, 1.093, 1.091, 1.074, 1.052, 1.031, 1.014, 1.003, 0.997, 0.994, 0.994, 0.995, 0.996, 0.998, 0.999, 1);
}

@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;
}
@font-face {
  font-family: "Geist Mono Variable";
  src: url("/fonts/geist-mono-latin-wght-normal.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* Site gutter (MOTION §6.4), whole pixels where round() exists */
body { --gutter: max(16px, 5vw); }
@media (min-width: 768px) { body { --gutter: 4vw; } }
@supports (width: round(1px, 1px)) {
  body { --gutter: max(16px, round(5vw, 1px)); }
  @media (min-width: 768px) { body { --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%;
  scroll-padding-top: 6rem;
}

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;
  background: rgb(var(--c-base));
}

/* Vibrant hairline across the top of every page */
body::before {
  content: "";
  display: block;
  height: 3px;
  background: linear-gradient(90deg, rgb(var(--c-accent)), rgb(var(--c-berry)) 50%, rgb(var(--c-pine)));
}

main { flex: 1; }
main:focus { outline: none; }

.wide {
  width: 100%;
  max-width: calc(1100px + 2 * var(--gutter)); /* container.site */
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* Skip link (MOTION §8b.2) */
.skip {
  position: absolute;
  left: 16px;
  top: -100px;
  z-index: 60;
  padding: 12px 18px;
  border-radius: 9999px;
  background: rgb(var(--c-accent));
  color: rgb(var(--c-accent-on));
  font-weight: 600;
  text-decoration: none;
}
.skip:focus { top: 16px; outline: 2px solid rgb(var(--c-ink)); outline-offset: 3px; }

/* ---------- Header + logo (MOTION §3.7, §8.2). The lockup is inlined (sprite + use), coloured by --logo-ink / --logo-accent.
   Sized by height only; 56px gives 212px wide (1147 : 303). Static: no hover motion until F52. ---------- */
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.lk-ink { fill: var(--logo-ink); }
.lk-accent { fill: var(--logo-accent); }
.top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 20px;
  padding-bottom: 16px;
}
.top-end { display: flex; align-items: center; gap: 12px; min-height: 44px; }
.logo-link { display: block; border-radius: 4px; }
.logo-link:focus-visible { outline: 2px solid rgb(var(--c-ink)); outline-offset: 6px; }
.lockup { display: block; height: 56px; width: auto; aspect-ratio: 1147 / 303; }

/* Theme switch (MOTION §8.2): 44 x 44, ink-muted to ink, pressed (= dark) on surface-2. The swap is instant. */
.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  width: 44px;
  height: 44px;
  padding: 0;
  color: rgb(var(--c-ink-muted));
  background: transparent;
  border: 0;
  border-radius: 8px;
  cursor: pointer;
  transition: color 200ms var(--ease-settle);
}
/* Hidden without JS but keeps its 44px box, so nothing shifts when theme.js reveals it */
.theme-toggle[hidden] { display: inline-flex; visibility: hidden; }
.theme-toggle:hover { color: rgb(var(--c-ink)); }
.theme-toggle[aria-pressed="true"] { color: rgb(var(--c-ink)); background: rgb(var(--c-surface-2)); }
.theme-toggle:focus-visible { outline: 2px solid rgb(var(--c-ink)); outline-offset: 2px; }
.theme-toggle svg { width: 20px; height: 20px; }

.nav { display: none; align-items: center; gap: 28px; }
.nav a:not(.btn) {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  border-radius: 4px;
  font-size: 14px;
  font-weight: 500;
  color: rgb(var(--c-ink-muted));
  text-decoration: none;
  transition: color 200ms var(--ease-settle);
}
.nav a:not(.btn):hover { color: rgb(var(--c-ink)); }
.nav a:not(.btn):focus-visible { outline: 2px solid rgb(var(--c-ink)); outline-offset: 2px; }

/* ---------- Type ---------- */
h1 {
  margin: 0 0 20px;
  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;
}
h2 {
  margin: 0 0 16px;
  font-size: 26px;
  line-height: 1.2;
  letter-spacing: -0.015em;
  font-weight: 600;
  text-wrap: balance;
}
h3 { margin: 0 0 8px; font-size: 17px; line-height: 1.3; letter-spacing: -0.005em; font-weight: 600; }

.eyebrow, .kicker, .step-num {
  font-family: "Geist Mono Variable", "Geist Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-weight: 500;
}
.eyebrow { margin: 0 0 16px; font-size: 12px; line-height: 1; letter-spacing: .04em; color: rgb(var(--c-accent-text)); }
.kicker {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 12px;
  font-size: 11px;
  line-height: 1;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgb(var(--c-ink-muted));
}
.kicker-dots { display: inline-flex; gap: 4px; }
.kicker-dots i { width: 6px; height: 6px; border-radius: 9999px; background: rgb(var(--ring)); }

.lead, .section-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; }

/* Accent per element: --acc (text/icon colour) and --tint (fill) */
.a-accent { --acc: var(--c-accent-text); --tint: var(--c-accent-tint); --ring: var(--c-accent); }
.a-pine { --acc: var(--c-pine); --tint: var(--c-pine-tint); --ring: var(--c-pine); }
.a-berry { --acc: var(--c-berry); --tint: var(--c-berry-tint); --ring: var(--c-berry); }
.a-ink { --acc: var(--c-ink); --tint: var(--c-surface-2); --ring: var(--c-ink); }

/* ---------- Buttons (MOTION §8.1) ---------- */
.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;
  text-decoration: none;
  color: rgb(var(--c-primary-on));
  background: rgb(var(--c-primary));
  border: 0;
  border-radius: 9999px;
  cursor: pointer;
  transition: background-color 200ms var(--ease-out);
}
.btn:hover:not(:disabled) { background: rgb(var(--c-primary-hover)); }
.btn:active:not(:disabled) { transform: translateY(1px); }
.btn:focus-visible { outline: 2px solid rgb(var(--c-ink)); outline-offset: 3px; }
/* Disabled CTA (MOTION §8b.1); used while sending («Sender…») */
.btn:disabled { background: rgb(var(--c-surface-2)); color: rgb(var(--c-ink-muted)); cursor: not-allowed; }
.form[aria-busy="true"] .btn { cursor: progress; }
.btn-sm { width: auto; padding: 12px 18px; font-size: 14px; }

.btn-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  width: 100%;
  padding: 13px 18px;
  font-size: 15px;
  line-height: 1;
  font-weight: 500;
  text-decoration: none;
  color: rgb(var(--c-ink));
  border: 1px solid rgb(var(--c-ink-muted));
  border-radius: 9999px;
  transition: color 200ms var(--ease-settle), border-color 200ms var(--ease-settle);
}
.btn-ghost:hover { color: rgb(var(--c-accent-text)); border-color: rgb(var(--c-accent-text)); }
.btn-ghost:active { transform: translateY(1px); }
.btn-ghost:focus-visible { outline: 2px solid rgb(var(--c-ink)); outline-offset: 2px; }

.link, .inline-link {
  color: rgb(var(--c-accent-text));
  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 { display: inline-flex; align-items: center; min-height: 44px; font-size: 18px; font-weight: 500; }
.link:hover, .inline-link:hover { color: rgb(var(--c-ink)); text-decoration-thickness: 2px; }
.link:active, .inline-link:active { color: rgb(var(--c-ink)); }
.link:focus-visible, .inline-link:focus-visible { outline: 2px solid rgb(var(--c-ink)); outline-offset: 2px; }

/* ---------- Hero ---------- */
.hero { padding-block: 40px 24px; }
.hero-copy { max-width: 620px; }
.ctas { display: flex; flex-direction: column; gap: 10px; margin-top: 28px; }

/* Plate stack: MOTION stack angles rotateX(55deg) rotateZ(-35deg); plates rounded-card, 1.6 : 1. Orange only as the top plate's ring (colour budget). */
.stack {
  --gap: 24px;
  position: relative;
  height: 280px;
  margin-top: 16px;
  perspective: 1400px;
}
.stack-in {
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(240px, 62%);
  aspect-ratio: 1.6;
  transform: translate(-50%, -30%) rotateX(55deg) rotateZ(-35deg);
  transform-style: preserve-3d;
}
.plate {
  position: absolute;
  inset: 0;
  border-radius: 12px;
  background:
    linear-gradient(180deg, rgb(var(--c-ink) / .05), rgb(var(--c-ink) / 0) 38%),
    rgb(var(--tint));
  box-shadow: inset 0 0 0 1px rgb(var(--ring) / .5), var(--shadow-plate);
  transform: translateZ(calc(var(--i) * var(--gap)));
}
.p1 { --i: 0; --ring: var(--c-pine); --tint: var(--c-pine-tint); }
.p2 { --i: 1; --ring: var(--c-berry); --tint: var(--c-berry-tint); }
.p3 { --i: 2; --ring: var(--c-ink-muted); --tint: var(--c-surface-2); }
.p4 { --i: 3; --ring: var(--c-accent); --tint: var(--c-accent-tint); box-shadow: inset 0 0 0 2px rgb(var(--c-accent)), var(--shadow-plate); }
/* Entrance: each plate drops into place (MOTION §7.5 drop: 4.2 × gap, spring.settle 1.0 s, opacity over the first 18 %),
   bottom first, 0.25 s apart; the orange plate lands last. Without linear() support the declaration is dropped: plates just show. */
@media (prefers-reduced-motion: no-preference) {
  .plate {
    animation: plate-drop 1s var(--ease-spring) backwards, plate-fade 180ms linear backwards;
    animation-delay: calc(200ms + var(--i) * 250ms);
  }
}
@keyframes plate-drop { from { transform: translateZ(calc((var(--i) + 4.2) * var(--gap))); } }
@keyframes plate-fade { from { opacity: 0; } }

/* ---------- Sections ---------- */
.section { padding-block: 56px; }
.section.first { padding-top: 28px; }
.section-head { margin-bottom: 32px; }

.cards { display: grid; gap: 16px; margin: 0; padding: 0; list-style: none; }
.card {
  padding: 20px;
  background: rgb(var(--c-surface));
  border: 1px solid rgb(var(--c-line));
  border-radius: 12px;
  transition: border-color 200ms var(--ease-settle);
}
.card:hover { border-color: rgb(var(--c-ink-muted)); }
.card p { margin: 0; color: rgb(var(--c-ink-muted)); text-wrap: pretty; }
.card-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin-bottom: 18px;
  color: rgb(var(--acc));
  background: rgb(var(--tint));
  box-shadow: inset 0 0 0 1px rgb(var(--ring) / .3);
  border-radius: 10px;
}
.card-icon svg { width: 20px; height: 20px; }

.steps { display: grid; gap: 24px; margin: 0; padding: 0; list-style: none; }
.step { padding-top: 20px; border-top: 1px solid rgb(var(--c-line)); }
.step p { margin: 0; color: rgb(var(--c-ink-muted)); text-wrap: pretty; }
.step-top { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
/* Step marker: the number in a small tile (accent-text on surface-2, row 9) */
.step-num { display: inline-flex; align-items: center; justify-content: center; min-width: 32px; height: 32px; padding-inline: 6px; font-size: 12px; line-height: 1; letter-spacing: .06em; color: rgb(var(--c-accent-text)); background: rgb(var(--c-surface-2)); border-radius: 6px; }

/* ---------- Kontakt (MOTION §8.6, §8.10). No JS: native validation, :user-invalid for the invalid border. ---------- */
.kontakt-intro { margin-bottom: 32px; }
.contact { margin: 16px 0 0; }
.note, .hint, .meta {
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
  color: rgb(var(--c-ink-muted));
}
.kontakt-form .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-ink)); outline-offset: 2px; }
.input:user-invalid { border-color: rgb(var(--c-danger)); }
/* Select (MOTION §8.10): native control without the OS arrow, chevron drawn by the wrapper (mask, CSP-safe) */
.select { position: relative; }
select.input { appearance: none; -webkit-appearance: none; padding-right: 40px; cursor: pointer; }
.select::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 12px;
  width: 20px;
  height: 20px;
  margin-top: -10px;
  pointer-events: none;
  background: rgb(var(--c-ink-muted));
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m6 9 6 6 6-6' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 20px no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m6 9 6 6 6-6' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 20px no-repeat;
}
/* Autofill: keep the input surface and ink instead of the browser's tint. The 1000px inset shadow is a fill in the
   `base` colour (not a shadow token); the very long background transition stops Chrome's flash of its own colour. */
.input:-webkit-autofill,
.input:-webkit-autofill:hover,
.input:-webkit-autofill:focus {
  -webkit-text-fill-color: rgb(var(--c-ink));
  caret-color: rgb(var(--c-ink));
  box-shadow: inset 0 0 0 1000px rgb(var(--c-base));
  transition: background-color 600000s 0s, border-color 200ms var(--ease-settle);
}
.input:autofill {
  -webkit-text-fill-color: rgb(var(--c-ink));
  box-shadow: inset 0 0 0 1000px rgb(var(--c-base));
}

/* Live character counter under Melding (shown by kontakt.js) */
.counter {
  display: flex;
  gap: 12px;
  font-size: 14px;
  line-height: 1.5;
  color: rgb(var(--c-ink-muted));
  font-variant-numeric: tabular-nums;
}
.counter[hidden] { display: none; }
.counter-count { margin-left: auto; transition: color 200ms var(--ease-settle); }
.counter:not([data-state="short"]) .counter-min { display: none; }
.counter[data-state="near"] .counter-count { color: rgb(var(--c-accent-text)); }
.counter[data-state="max"] .counter-count { color: rgb(var(--c-accent-text)); font-weight: 600; }

/* Consent row with a custom checkbox: the real input stays in place (focusable, keeps the native validation
   bubble), transparent over the drawn box. */
.check {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  min-height: 44px;
  padding: 12px 16px;
  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(.check-input:checked) { border-color: rgb(var(--c-accent-text)); }
.check:has(.check-input:user-invalid) { border-color: rgb(var(--c-danger)); }
.check-input {
  position: absolute;
  top: 14px; /* = row padding + the box's 2px offset, so it sits exactly on the box */
  left: 16px;
  width: 20px;
  height: 20px;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}
/* 20px box, centred on the first 24.8px text line (16px × 1.55) */
.check-box {
  position: relative;
  flex: none;
  width: 20px;
  height: 20px;
  margin-top: 2px;
  background: rgb(var(--c-base));
  border: 1px solid rgb(var(--c-ink-muted)); /* a control's only boundary is ink-muted, never line (MOTION §5.2) */
  border-radius: 6px;
  transition: background-color 200ms var(--ease-settle), border-color 200ms var(--ease-settle);
}
.check-box::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgb(var(--c-ink-on));
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 10.5l3.2 3.2L15 6.8' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 18px no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 10.5l3.2 3.2L15 6.8' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 18px no-repeat;
  opacity: 0;
  transform: scale(.6);
  transition: opacity 200ms var(--ease-out), transform 200ms var(--ease-out);
}
.check:hover .check-box { border-color: rgb(var(--c-ink)); }
.check-input:checked + .check-box { background: rgb(var(--c-accent-text)); border-color: rgb(var(--c-accent-text)); }
.check-input:checked + .check-box::after { opacity: 1; transform: none; }
.check-input:user-invalid + .check-box { border-color: rgb(var(--c-danger)); }
.check-input:focus-visible + .check-box { outline: 2px solid rgb(var(--c-ink)); outline-offset: 2px; }
.check-text { text-wrap: pretty; }
.nowrap { white-space: nowrap; }
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
/* Honeypot position is the main site's (SETUP §6.6), not a design value */
.hp { position: absolute; left: -9999px; }

/* ---------- Footer ---------- */
.foot { padding-top: 24px; padding-bottom: max(2.5rem, env(safe-area-inset-bottom)); }
.foot .lockup { margin-bottom: 24px; }
.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));
}
.foot .inline-link { display: inline-flex; align-items: center; min-height: 44px; }

/* ---------- Sub-pages (personvern, takk, feil, 404) ---------- */
.intro { padding-block: 56px; }
.intro > * { max-width: 660px; }
@media (min-width: 768px) { .intro { padding-block: 96px; } }
.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; }

/* ---------- Breakpoints ---------- */
@media (min-width: 640px) {
  .btn { width: auto; align-self: flex-start; padding: .8em 1.35em; font-size: 14px; }
  .btn-ghost { width: auto; padding: .8em 1.35em; font-size: 14px; }
  .ctas { flex-direction: row; }
}

@media (min-width: 768px) {
  .nav { display: flex; }
  h1 { font-size: clamp(28px, 4.7vw, 56px); line-height: 1.04; }
  .section { padding-block: 96px; }
  .section.first { padding-top: 48px; }
  .section-head { margin-bottom: 48px; }
  .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .card, .form { padding: 24px; }
  .steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }
  .stack { --gap: 32px; height: 360px; }
  .stack-in { width: 300px; }
}

@media (min-width: 960px) {
  .hero {
    display: grid;
    grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
    column-gap: clamp(48px, 6vw, 96px);
    align-items: center;
    padding-block: 56px 48px;
  }
  .stack { --gap: 40px; height: 460px; margin-top: 0; }
  .stack-in { width: 340px; }
  .kontakt {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    column-gap: clamp(64px, 6vw, 96px);
    align-items: start;
  }
  /* Sticky is not pinning (MOTION §7.9): the grid item itself, lg+ */
  .kontakt-intro { margin-bottom: 0; position: sticky; top: 96px; align-self: start; }
  .kontakt-form { max-width: 520px; justify-self: end; width: 100%; }
}

@media (min-width: 1100px) {
  .cards { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* 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; }
}

/* Reduced motion: state changes are instant */
@media (prefers-reduced-motion: reduce) {
  .btn, .btn-ghost, .card, .input, .counter-count, .check, .check-box, .check-box::after { transition: none; }
}