/* ═══════════════════════════════════════════════════════════════════════════
   MV Cerda Technologies — provisional design system.

   Hand-authored CSS, no preprocessor and no build step: what is in this file is
   what the browser receives. It is loaded as a normal stylesheet so the site can
   run under `style-src 'self'` with no inline styles and no hashes anywhere —
   which is why there is not a single style="" attribute in the markup and why
   nothing in assets/*.js writes to element.style.

   Everything brand-related is a custom property in :root. Replacing the
   provisional palette is a matter of editing that one block; see "Replacing the
   provisional brand colours" in README.md.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 1. tokens ──────────────────────────────────────────────────────────────*/

:root {
  /* Provisional palette — a considered starting point, not a final brand. */
  --color-bg: #f5f7fa;
  --color-surface: #ffffff;
  --color-ink: #0b1726;
  --color-muted: #556274;
  --color-line: #dce3eb;
  --color-accent: #317cc7;
  --color-accent-strong: #255d95;
  --color-accent-soft: #e9f3fc;
  --color-secondary: #0d8b7e;
  --color-dark-surface: #101c2b;

  /* Not a token, because it lives outside the CSS: assets/images/mvct-mark.svg
     and the monogram in og-mvct.svg draw their blue as #5A9EE2, not this
     --color-accent. The mark's own background is always this dark navy
     (never the page background), and at favicon/icon size the shape is mostly
     anti-aliased edge — the flat accent measurably reads duller there than it
     does as a flat fill on white. #5A9EE2 is the same hue lightened to match.
     If --color-accent ever changes, re-derive that "on dark" value too rather
     than reusing this one verbatim. */

  /* Derived roles. --color-danger and --color-success are darkened siblings of
     the palette, chosen so the small, dense text in form errors and receipts
     clears 4.5:1 against white — the brand colours themselves do not. */
  --color-danger: #a3241b;
  --color-danger-soft: #fdf1f0;
  --color-success: #0a6b60;
  --color-success-soft: #eaf6f4;
  --color-ink-inverse: #ffffff;
  --color-muted-inverse: #a9bdd6;

  --font-sans: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    Helvetica, Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;

  --radius: 16px;
  --radius-sm: 10px;
  --radius-lg: 22px;

  --shadow-sm: 0 1px 2px rgba(11, 23, 38, 0.06), 0 4px 12px rgba(11, 23, 38, 0.04);
  --shadow: 0 2px 4px rgba(11, 23, 38, 0.05), 0 14px 38px rgba(11, 23, 38, 0.08);

  --maxw: 1140px;
  --gutter: clamp(1.15rem, 4vw, 2.5rem);
  --section-y: clamp(3.5rem, 8vw, 6.5rem);

  /* Sticky header height, also used as scroll-margin for every anchor target. */
  --header-h: 62px;
}

@media (min-width: 900px) {
  :root {
    --header-h: 72px;
  }
}

/* ── 2. reset ───────────────────────────────────────────────────────────────*/

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

* {
  margin: 0;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 12px);
}

body {
  background: var(--color-bg);
  color: var(--color-ink);
  font-family: var(--font-sans);
  font-size: 1rem;
  line-height: 1.65;
  /* A 100% zoom on a 320px phone must not produce a horizontal scrollbar; this
     is the backstop, but every component is sized to fit without it. */
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img,
svg {
  display: block;
  max-width: 100%;
}

img {
  height: auto;
}

a {
  color: var(--color-accent-strong);
  text-underline-offset: 0.18em;
}

a:hover {
  color: var(--color-accent);
}

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

h1,
h2,
h3,
h4 {
  line-height: 1.18;
  letter-spacing: -0.018em;
  text-wrap: balance;
  font-weight: 700;
}

p {
  text-wrap: pretty;
}

:focus-visible {
  outline: 3px solid var(--color-accent);
  outline-offset: 3px;
  border-radius: 4px;
}

::selection {
  background: var(--color-accent-soft);
  color: var(--color-ink);
}

/* ── 3. layout primitives ───────────────────────────────────────────────────*/

.wrap {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section {
  padding-block: var(--section-y);
}

.section--tint {
  background: var(--color-surface);
  border-block: 1px solid var(--color-line);
}

.section--dark {
  background: var(--color-dark-surface);
  color: var(--color-ink-inverse);
}

.section--dark p,
.section--dark li {
  color: var(--color-muted-inverse);
}

/* Anchor targets sit under a sticky header; without this the heading lands
   behind it. scroll-padding on <html> covers most browsers, this covers the
   rest and costs nothing. */
[id] {
  scroll-margin-top: calc(var(--header-h) + 12px);
}

.section-head {
  max-width: 44rem;
  margin-bottom: clamp(2rem, 4vw, 3rem);
}

.section-head h2 {
  font-size: clamp(1.65rem, 1.15rem + 2.1vw, 2.5rem);
  margin-bottom: 0.85rem;
}

.section-head > p {
  font-size: clamp(1rem, 0.96rem + 0.2vw, 1.12rem);
  color: var(--color-muted);
}

.section--dark .section-head > p {
  color: var(--color-muted-inverse);
}

.eyebrow {
  font-family: var(--font-mono);
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-accent-strong);
  margin-bottom: 0.7rem;
}

.section--dark .eyebrow {
  color: #7fb0f5;
}

.skip {
  position: absolute;
  left: 0.75rem;
  top: -100vh;
  z-index: 100;
  background: var(--color-ink);
  color: var(--color-ink-inverse);
  padding: 0.7rem 1.1rem;
  border-radius: var(--radius-sm);
  font-weight: 600;
  text-decoration: none;
}

.skip:focus {
  top: 0.75rem;
  color: var(--color-ink-inverse);
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ── 4. buttons ─────────────────────────────────────────────────────────────*/

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  /* 48px tall at the default font size — a comfortable touch target. */
  min-height: 48px;
  padding: 0.7rem 1.35rem;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.25;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.btn--primary {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: #fff;
}

.btn--primary:hover {
  background: var(--color-accent-strong);
  border-color: var(--color-accent-strong);
  color: #fff;
}

.btn--secondary {
  background: var(--color-surface);
  border-color: var(--color-line);
  color: var(--color-ink);
}

.btn--secondary:hover {
  border-color: var(--color-accent);
  color: var(--color-accent-strong);
}

.btn[disabled],
.btn[aria-disabled='true'] {
  opacity: 0.6;
  cursor: progress;
}

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-weight: 600;
  text-decoration: none;
}

.link-arrow::after {
  content: '\2192';
  transition: transform 0.15s ease;
}

.link-arrow:hover::after {
  transform: translateX(3px);
}

/* ── 5. header ──────────────────────────────────────────────────────────────*/

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: saturate(150%) blur(8px);
  border-bottom: 1px solid var(--color-line);
}

.site-header__inner {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-height: var(--header-h);
  padding-block: 0.5rem;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  margin-right: auto;
  color: var(--color-ink);
  text-decoration: none;
  font-weight: 700;
  letter-spacing: -0.015em;
}

.brand img {
  width: 32px;
  height: 32px;
  border-radius: 8px;
}

.brand__name {
  font-size: 0.98rem;
  white-space: nowrap;
}

/* "MVC Technologies" fits beside the Meny button all the way down to 320px, so
   the full wordmark is what shows at every width the site is designed for; it
   just steps down a little on the narrowest phones to keep the margin honest
   across platform fonts. The MVCT abbreviation is a last resort below 300px,
   where nothing else keeps the header one row tall. */
.brand__short {
  display: none;
  font-size: 1rem;
  letter-spacing: 0.02em;
}

@media (max-width: 359px) {
  .brand__name {
    font-size: 0.88rem;
  }
}

@media (max-width: 299px) {
  .brand__name {
    display: none;
  }

  .brand__short {
    display: inline;
  }
}

.nav-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  min-height: 44px;
  padding: 0.4rem 0.8rem;
  background: var(--color-surface);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-sm);
  font-size: 0.92rem;
  font-weight: 600;
  cursor: pointer;
}

.nav-toggle__bars {
  display: grid;
  gap: 3px;
}

.nav-toggle__bars span {
  display: block;
  width: 16px;
  height: 2px;
  background: currentColor;
  border-radius: 2px;
}

.nav-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.15rem 1.1rem;
}

.nav-links a {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 0.25rem 0.15rem;
  color: var(--color-muted);
  font-size: 0.95rem;
  font-weight: 500;
  text-decoration: none;
}

.nav-links a:hover {
  color: var(--color-accent-strong);
}

.site-header__cta {
  min-height: 44px;
  padding: 0.5rem 1rem;
  font-size: 0.95rem;
}

/* Mobile: the panel collapses behind the toggle only once JavaScript has said
   it can operate it (data-js="on"). Without JavaScript the toggle stays hidden
   and the panel stays in the flow, so every anchor and the primary action
   remain reachable. */
@media (max-width: 899px) {
  .site-header__inner {
    flex-wrap: wrap;
  }

  .site-header__panel {
    order: 3;
    width: 100%;
    padding-bottom: 0.4rem;
  }

  .site-header[data-js='on'] .site-header__panel {
    display: none;
    margin-top: 0.35rem;
    padding-bottom: 0.75rem;
    border-top: 1px solid var(--color-line);
  }

  .site-header[data-js='on'] .site-header__panel[data-open='true'] {
    display: block;
  }

  .nav-links {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }

  .nav-links a {
    min-height: 48px;
    padding-inline: 0.15rem;
    border-bottom: 1px solid var(--color-line);
    font-size: 1rem;
  }

  .site-header__cta {
    width: 100%;
    margin-top: 0.75rem;
  }
}

@media (min-width: 900px) {
  /* A pass-through wrapper: the links and the CTA become direct flex children
     of the header row, exactly as if the panel were not there. */
  .site-header__panel {
    display: contents;
  }

  .nav-toggle {
    display: none;
  }
}

/* ── 6. hero ────────────────────────────────────────────────────────────────*/

.hero {
  position: relative;
  padding-block: clamp(2.5rem, 6vw, 5rem) clamp(3rem, 7vw, 5.5rem);
  background: linear-gradient(180deg, var(--color-accent-soft) 0%, var(--color-bg) 62%);
  overflow: hidden;
}

.hero__grid {
  display: grid;
  /* minmax(0, 1fr) rather than a bare 1fr: a grid item's default min-width is
     auto, so the min-width on the diagram below would otherwise widen the whole
     column past the viewport instead of scrolling inside its own box. */
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(2.25rem, 5vw, 3.5rem);
  align-items: center;
}

@media (min-width: 960px) {
  .hero__grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  }
}

.hero h1 {
  font-size: clamp(2.05rem, 1.25rem + 3.5vw, 3.4rem);
  margin-bottom: 1.1rem;
}

.hero__lead {
  max-width: 36rem;
  font-size: clamp(1.03rem, 0.98rem + 0.28vw, 1.2rem);
  color: var(--color-muted);
}

.hero__ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1.75rem;
}

.hero__ctas .btn {
  flex: 1 1 auto;
  min-width: 13.5rem;
}

@media (min-width: 560px) {
  .hero__ctas .btn {
    flex: 0 0 auto;
  }
}

.hero__trust {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 1.5rem;
  padding: 0;
  list-style: none;
}

.hero__trust li {
  padding: 0.3rem 0.75rem;
  background: var(--color-surface);
  border: 1px solid var(--color-line);
  border-radius: 999px;
  font-size: 0.87rem;
  font-weight: 500;
  color: var(--color-ink);
}

/* ── 6b. hero system map ────────────────────────────────────────────────────
   A restrained diagram of the thing the company actually does: a customer
   reaching a website, a website talking to an API, an API feeding automation
   and internal systems. Authored as inline SVG so it inherits the palette, has
   no network cost, and can be hidden from assistive technology — the sentence
   above it already says what it says. */

.hero__figure {
  position: relative;
  min-width: 0;
  padding: clamp(1rem, 2.5vw, 1.6rem);
  background: var(--color-surface);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
}

/* Below roughly 500px the diagram would scale down far enough that its labels
   land near 8px — unreadable. Give it a floor and let it scroll inside its own
   card instead; the page itself never scrolls sideways, and the figcaption
   below states the same thing in body text, so nothing is lost by not scrolling
   at all. No tab stop is added: the SVG is aria-hidden decoration. */
.hero__canvas {
  min-width: 0;
  overflow-x: auto;
  overscroll-behavior-x: contain;
}

.hero__figure svg {
  width: 100%;
  min-width: 448px;
  height: auto;
}

.sysmap__box {
  fill: var(--color-surface);
  stroke: var(--color-line);
  stroke-width: 1.5;
}

.sysmap__box--accent {
  fill: var(--color-accent-soft);
  stroke: var(--color-accent);
}

/* Sized against the viewBox, which is scaled down to the card's width — 15px
   here lands at roughly 12px on screen, which is the floor for a label someone
   is meant to read rather than merely notice. */
.sysmap__label {
  fill: var(--color-ink);
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 600;
}

.sysmap__link {
  fill: none;
  stroke: var(--color-line);
  stroke-width: 1.5;
}

.sysmap__node {
  fill: var(--color-accent);
}

.sysmap__node--soft {
  fill: var(--color-secondary);
}

/* The only animation on the page: a dot travelling along each connector, which
   is the one thing a static diagram cannot show. Slow, low-contrast, and gone
   entirely under prefers-reduced-motion. */
.sysmap__pulse {
  fill: var(--color-accent);
  opacity: 0.85;
  offset-path: var(--path);
  animation: sysmap-travel 5.5s linear infinite;
  animation-delay: var(--delay, 0s);
}

@keyframes sysmap-travel {
  from {
    offset-distance: 0%;
    opacity: 0;
  }
  12% {
    opacity: 0.85;
  }
  88% {
    opacity: 0.85;
  }
  to {
    offset-distance: 100%;
    opacity: 0;
  }
}

.sysmap__pulse--1 {
  --path: path('M 96 60 H 168');
}

.sysmap__pulse--2 {
  --path: path('M 264 60 H 336');
  --delay: 0.3s;
}

.sysmap__pulse--3 {
  --path: path('M 372 82 V 140');
  --delay: 0.6s;
}

.sysmap__pulse--4 {
  --path: path('M 372 82 C 372 114, 200 114, 200 140');
  --delay: 1.2s;
}

.sysmap__pulse--5 {
  --path: path('M 372 82 C 372 114, 544 114, 544 140');
  --delay: 1.8s;
}

.hero__figcaption {
  margin-top: 1rem;
  padding-top: 0.9rem;
  border-top: 1px solid var(--color-line);
  font-size: 0.86rem;
  color: var(--color-muted);
}

/* ── 7. card grids ──────────────────────────────────────────────────────────*/

.grid {
  display: grid;
  gap: 1rem;
}

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

@media (min-width: 700px) {
  .grid--3 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

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

.card {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: clamp(1.25rem, 2.5vw, 1.75rem);
  background: var(--color-surface);
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}

.card h3 {
  font-size: 1.15rem;
  margin-bottom: 0.55rem;
}

.card p {
  color: var(--color-muted);
  font-size: 0.97rem;
}

.card__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  margin-bottom: 0.9rem;
  background: var(--color-accent-soft);
  border-radius: 9px;
  color: var(--color-accent-strong);
  font-family: var(--font-mono);
  font-size: 0.86rem;
  font-weight: 700;
}

/* Small, flat capability list inside a service card. Deliberately not icons:
   seven icons per card would be decoration, not information. */
.card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-top: auto;
  padding: 1.1rem 0 0;
  list-style: none;
}

.card__tags li {
  padding: 0.2rem 0.55rem;
  background: var(--color-bg);
  border: 1px solid var(--color-line);
  border-radius: 999px;
  color: var(--color-muted);
  font-size: 0.79rem;
  line-height: 1.5;
}

.card__cta {
  margin-top: 1.1rem;
  font-size: 0.94rem;
}

.card--outcome .card__icon {
  width: 40px;
  height: 40px;
  margin-bottom: 0.9rem;
}

/* ── 8. fit list ────────────────────────────────────────────────────────────*/

.fit {
  display: grid;
  gap: clamp(1.75rem, 4vw, 3rem);
}

@media (min-width: 900px) {
  .fit {
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
    align-items: start;
  }
}

.fit h2 {
  font-size: clamp(1.4rem, 1.1rem + 1.4vw, 1.9rem);
  margin-bottom: 0.9rem;
}

.fit p + p {
  margin-top: 1rem;
}

.fit__list {
  display: grid;
  gap: 0.6rem;
  list-style: none;
  padding: 0;
}

.fit__list li {
  position: relative;
  padding: 0.85rem 1rem 0.85rem 2.9rem;
  background: var(--color-surface);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-sm);
  font-size: 0.99rem;
}

.fit__list li::before {
  content: '';
  position: absolute;
  left: 1.1rem;
  top: 1.35rem;
  width: 9px;
  height: 9px;
  background: var(--color-secondary);
  border-radius: 50%;
}

.fit__note {
  margin-top: 1.25rem;
  padding: 1rem 1.15rem;
  background: var(--color-accent-soft);
  border-radius: var(--radius-sm);
  font-size: 0.95rem;
}

/* ── 9. process ────────────────────────────────────────────────────────────*/

/* An ordered list, because the four steps happen in order — but the visible
   numbering is the "STEG 01" label, so the browser's own markers would read the
   sequence out twice. */
.steps {
  display: grid;
  gap: 1rem;
  padding: 0;
  list-style: none;
}

@media (min-width: 700px) {
  .steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

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

.step {
  position: relative;
  padding: clamp(1.2rem, 2.4vw, 1.6rem);
  background: var(--color-surface);
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
}

.step__k {
  display: block;
  margin-bottom: 0.6rem;
  color: var(--color-accent-strong);
  font-family: var(--font-mono);
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.12em;
}

.step h3 {
  font-size: 1.08rem;
  margin-bottom: 0.5rem;
}

.step p {
  color: var(--color-muted);
  font-size: 0.95rem;
}

.process__note {
  max-width: 46rem;
  margin-top: 1.75rem;
  padding: 1.1rem 1.25rem;
  background: var(--color-surface);
  border: 1px solid var(--color-line);
  border-left: 3px solid var(--color-accent);
  border-radius: var(--radius-sm);
  font-size: 0.97rem;
  color: var(--color-muted);
}

/* ── 10. about ──────────────────────────────────────────────────────────────*/

.about {
  display: grid;
  gap: clamp(1.75rem, 4vw, 3rem);
  align-items: start;
}

@media (min-width: 860px) {
  .about {
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr);
  }
}

.about p + p {
  margin-top: 1rem;
}

.about__points {
  display: grid;
  gap: 0.5rem;
  margin-top: 1.5rem;
  padding: 0;
  list-style: none;
}

.about__points li {
  position: relative;
  padding-left: 1.75rem;
  font-size: 0.99rem;
}

.about__points li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.62rem;
  width: 11px;
  height: 3px;
  background: var(--color-accent);
  border-radius: 2px;
}

.founder {
  padding: clamp(1.35rem, 3vw, 1.85rem);
  background: var(--color-surface);
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}

.founder__portrait {
  width: 112px;
  height: 112px;
  border-radius: 50%;
  border: 3px solid var(--color-accent-soft);
  object-fit: cover;
}

.founder__name {
  margin-top: 1rem;
  font-size: 1.18rem;
}

.founder__title {
  color: var(--color-muted);
  font-size: 0.95rem;
}

.founder__meta {
  display: grid;
  gap: 0.5rem;
  margin-top: 1.25rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--color-line);
  list-style: none;
  padding-inline: 0;
  font-size: 0.94rem;
}

.founder__meta .k {
  display: block;
  color: var(--color-muted);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* ── 11. FAQ ────────────────────────────────────────────────────────────────*/

.faq {
  max-width: 52rem;
}

.faq details {
  background: var(--color-surface);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-sm);
  margin-bottom: 0.6rem;
}

.faq summary {
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
  padding: 1rem 1.15rem;
  font-size: 1.02rem;
  font-weight: 600;
  cursor: pointer;
  list-style: none;
}

.faq summary::-webkit-details-marker {
  display: none;
}

.faq summary::after {
  content: '';
  flex: 0 0 auto;
  width: 11px;
  height: 11px;
  margin-left: auto;
  margin-top: 0.45rem;
  border-right: 2px solid var(--color-accent);
  border-bottom: 2px solid var(--color-accent);
  transform: rotate(45deg);
  transition: transform 0.18s ease;
}

.faq details[open] summary::after {
  transform: rotate(-135deg);
}

.faq summary:hover {
  color: var(--color-accent-strong);
}

.faq__answer {
  padding: 0 1.15rem 1.15rem;
  color: var(--color-muted);
  font-size: 0.98rem;
}

.faq__answer p + p {
  margin-top: 0.7rem;
}

/* ── 12. contact ────────────────────────────────────────────────────────────*/

.contact-grid {
  display: grid;
  gap: clamp(1.5rem, 3.5vw, 2.25rem);
  align-items: start;
}

@media (min-width: 940px) {
  .contact-grid {
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.65fr);
  }
}

.form-card {
  padding: clamp(1.25rem, 3vw, 2rem);
  background: var(--color-surface);
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}

.form-intro {
  margin-bottom: 1.25rem;
  color: var(--color-muted);
  font-size: 0.93rem;
}

.field {
  margin-bottom: 1.05rem;
}

.field-row {
  display: grid;
  gap: 0 1rem;
}

@media (min-width: 560px) {
  .field-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.field label {
  display: block;
  margin-bottom: 0.35rem;
  font-size: 0.92rem;
  font-weight: 600;
}

.req-star {
  color: var(--color-danger);
}

.field input,
.field select,
.field textarea {
  width: 100%;
  min-height: 48px;
  padding: 0.65rem 0.8rem;
  background: var(--color-surface);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-sm);
  font-size: 1rem;
}

.field textarea {
  min-height: 150px;
  resize: vertical;
  line-height: 1.55;
}

.field select {
  /* Keeps the native control (and its native keyboard behaviour) while making
     the arrow match the rest of the form. */
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--color-muted) 50%),
    linear-gradient(135deg, var(--color-muted) 50%, transparent 50%);
  background-position: right 1.1rem center, right 0.75rem center;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-right: 2.25rem;
}

.field input:focus,
.field select:focus,
.field textarea:focus {
  border-color: var(--color-accent);
}

.field [aria-invalid='true'] {
  border-color: var(--color-danger);
  background: var(--color-danger-soft);
}

.field-hint {
  margin-top: 0.3rem;
  color: var(--color-muted);
  font-size: 0.85rem;
}

.field-error {
  margin-top: 0.35rem;
  color: var(--color-danger);
  font-size: 0.87rem;
  font-weight: 500;
}

/* Honeypot. Off-screen rather than display:none — some bots skip anything the
   CSS hides outright — and out of the tab order and the accessibility tree. */
.hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.form-submit-row {
  margin-top: 1.5rem;
}

.form-submit-row .btn {
  width: 100%;
}

@media (min-width: 560px) {
  .form-submit-row .btn {
    width: auto;
    min-width: 15rem;
  }
}

.form-status {
  margin-top: 0.75rem;
  font-size: 0.92rem;
  color: var(--color-muted);
  min-height: 1.4em;
}

.form-status[data-state='error'] {
  color: var(--color-danger);
  font-weight: 600;
}

.form-status[data-state='ok'] {
  color: var(--color-success);
  font-weight: 600;
}

.form-fine {
  margin-top: 1rem;
  color: var(--color-muted);
  font-size: 0.86rem;
}

.form-note {
  padding: 0.85rem 1rem;
  margin-bottom: 1.15rem;
  background: var(--color-accent-soft);
  border-radius: var(--radius-sm);
  font-size: 0.92rem;
}

.form-summary,
.form-alert,
.form-success {
  padding: 1rem 1.15rem;
  margin-bottom: 1.25rem;
  border: 1px solid;
  border-radius: var(--radius-sm);
  font-size: 0.95rem;
}

.form-summary,
.form-alert {
  background: var(--color-danger-soft);
  border-color: rgba(163, 36, 27, 0.35);
  color: var(--color-danger);
}

.form-summary-title,
.form-alert-title,
.form-success-title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
  font-weight: 700;
}

.form-summary ul {
  margin: 0;
  padding-left: 1.15rem;
}

.form-summary a,
.form-alert a {
  color: inherit;
}

.form-alert p + p {
  margin-top: 0.55rem;
}

.form-success {
  background: var(--color-success-soft);
  border-color: rgba(10, 107, 96, 0.35);
  color: var(--color-success);
  margin-bottom: 0;
}

.form-success p {
  color: inherit;
}

.form-success-contact {
  display: grid;
  gap: 0.4rem;
  margin-top: 0.9rem;
  padding: 0;
  list-style: none;
}

.form-success-contact .k {
  display: inline-block;
  min-width: 5.5rem;
  font-family: var(--font-mono);
  font-size: 0.76rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.form-ref {
  margin-top: 0.7rem;
  font-family: var(--font-mono);
  font-size: 0.79rem;
  opacity: 0.85;
}

.contact-aside {
  padding: clamp(1.25rem, 3vw, 1.75rem);
  background: var(--color-surface);
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
}

.contact-aside h3 {
  font-size: 1.08rem;
  margin-bottom: 1rem;
}

.contact-aside__person {
  padding-bottom: 1rem;
  margin-bottom: 1rem;
  border-bottom: 1px solid var(--color-line);
}

.contact-aside__person .n {
  font-weight: 700;
}

.contact-aside__person .t {
  color: var(--color-muted);
  font-size: 0.92rem;
}

.contact-aside__item {
  margin-bottom: 0.9rem;
}

.contact-aside__item .k {
  color: var(--color-muted);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.contact-aside__item .v {
  font-size: 1.02rem;
  font-weight: 600;
  overflow-wrap: anywhere;
}

.contact-aside__item .v a {
  text-decoration: none;
}

.contact-aside__item .v a:hover {
  text-decoration: underline;
}

.contact-aside__note {
  padding-top: 1rem;
  border-top: 1px solid var(--color-line);
  color: var(--color-muted);
  font-size: 0.9rem;
}

/* ── 13. footer ─────────────────────────────────────────────────────────────*/

.site-footer {
  padding-block: clamp(2.5rem, 5vw, 3.5rem);
  background: var(--color-dark-surface);
  color: var(--color-muted-inverse);
  font-size: 0.93rem;
}

.site-footer__grid {
  display: grid;
  gap: 1.75rem;
}

@media (min-width: 720px) {
  .site-footer__grid {
    grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.85fr) minmax(0, 0.85fr);
  }
}

.site-footer h2 {
  color: var(--color-ink-inverse);
  font-size: 1.05rem;
  margin-bottom: 0.6rem;
}

.site-footer h3 {
  color: var(--color-ink-inverse);
  font-size: 0.78rem;
  font-family: var(--font-mono);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 0.7rem;
}

.site-footer a {
  color: var(--color-muted-inverse);
  text-decoration: none;
}

.site-footer a:hover {
  color: var(--color-ink-inverse);
  text-decoration: underline;
}

.site-footer ul {
  display: grid;
  gap: 0.15rem;
  list-style: none;
  padding: 0;
}

.site-footer li a {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
}

.site-footer__brand {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 0.75rem;
}

.site-footer__brand img {
  width: 30px;
  height: 30px;
  border-radius: 8px;
}

/* Supplier identity: the registered foretaksnavn and the organisation number.
   Present and legible, but not competing with the trade name above it. */
.site-footer__legalname {
  margin-bottom: 0.35rem;
  font-size: 0.86rem;
  line-height: 1.55;
  opacity: 0.85;
}

.site-footer__legal {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 1.25rem;
  margin-top: 2rem;
  padding-top: 1.35rem;
  border-top: 1px solid rgba(169, 189, 214, 0.22);
  font-size: 0.85rem;
}

/* ── 14. legal + 404 pages ──────────────────────────────────────────────────*/

.page-head {
  padding-block: clamp(2.5rem, 6vw, 4rem) clamp(1.5rem, 3vw, 2.25rem);
  background: linear-gradient(180deg, var(--color-accent-soft), var(--color-bg));
}

.page-head h1 {
  font-size: clamp(1.85rem, 1.3rem + 2.4vw, 2.7rem);
  margin-bottom: 0.65rem;
}

.page-head p {
  max-width: 42rem;
  color: var(--color-muted);
}

/* Sits inside a .wrap, so it inherits the page gutter and shares its left edge
   with the <h1> above rather than centring itself in a wider container. */
.prose {
  max-width: 44rem;
  padding-block: clamp(2rem, 5vw, 3.25rem);
}

.prose h2 {
  font-size: 1.32rem;
  margin-top: 2.25rem;
  margin-bottom: 0.7rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--color-line);
}

.prose h2:first-of-type {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

.prose h3 {
  font-size: 1.05rem;
  margin-top: 1.5rem;
  margin-bottom: 0.4rem;
}

.prose p,
.prose ul,
.prose ol,
.prose dl {
  margin-bottom: 0.9rem;
  color: var(--color-muted);
}

.prose ul,
.prose ol {
  padding-left: 1.35rem;
}

.prose li {
  margin-bottom: 0.35rem;
}

.prose strong {
  color: var(--color-ink);
}

.prose .updated {
  display: inline-block;
  padding: 0.3rem 0.75rem;
  margin-bottom: 1.75rem;
  background: var(--color-surface);
  border: 1px solid var(--color-line);
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--color-muted);
}

.prose .callout {
  padding: 1rem 1.15rem;
  background: var(--color-surface);
  border: 1px solid var(--color-line);
  border-left: 3px solid var(--color-accent);
  border-radius: var(--radius-sm);
}

.notfound {
  display: grid;
  place-items: center;
  min-height: 70vh;
  padding-block: 3rem;
  text-align: center;
}

.notfound__code {
  font-family: var(--font-mono);
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  color: var(--color-accent-strong);
}

.notfound h1 {
  font-size: clamp(1.7rem, 1.2rem + 2.2vw, 2.4rem);
  margin: 0.6rem 0 0.8rem;
}

.notfound p {
  max-width: 34rem;
  margin-inline: auto;
  color: var(--color-muted);
}

.notfound__links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
  justify-content: center;
  margin-top: 1.75rem;
}

/* ── 15. motion and print ───────────────────────────────────────────────────*/

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  /* The travelling dots are decoration; with motion suppressed they would
     otherwise freeze at the start of each connector as stray specks. */
  .sysmap__pulse {
    display: none;
  }
}

@media print {
  .site-header,
  .skip,
  .hero__ctas,
  .form-card,
  .nav-toggle {
    display: none;
  }

  body {
    background: #fff;
  }
}