/* =====================================================================
   Rene Rammer — stylesheet
   ---------------------------------------------------------------------
   Læsbar kilde. Redigeres i src/, bygges til dist/ med `npm run build`.

   Indhold:
     1.  Design-tokens
     2.  Fonts (self-hostede, ingen tredjepart)
     3.  Reset og grundtypografi
     4.  Tilgængelighed
     5.  Knapper og labels
     6.  Header og navigation
     7.  Hero
     8.  Tryghedsbånd
     9.  Sektionsrammer
    10.  Kort (hvad vi løser)
    11.  Løfter
    12.  Tilgang med faneblade
    13.  Forløb i trin
    14.  Kvalitet og garanti
    15.  Personer
    16.  FAQ
    17.  Kontakt og formular
    18.  Footer
    19.  Responsivt
   ===================================================================== */

/* ---------------------------------------------------------------- *
   1. Design-tokens
   ---------------------------------------------------------------- */

:root {
  /* Farver. Alle tekstfarver er valgt, så de klarer WCAG AA (4,5:1)
     på den baggrund, de bruges på. */
  --ink: #122c3e;
  --ink-soft: #55646f;      /* brødtekst på lys baggrund */
  --navy: #102e43;
  --navy-line: #345163;
  --navy-soft: #bed0db;     /* brødtekst på navy */
  --blue: #245d69;
  --blue-dark: #194650;
  --blue-bright: #c7e3db;
  --line: #e1e3df;
  --line-strong: #ccd3cf;
  --pale: #f5f5f0;
  --white: #ffffff;

  /* Typografi */
  --font-display: 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-body: 'DM Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --text-display: clamp(42px, 5.5vw, 84px);
  --text-h2: clamp(32px, 3.6vw, 56px);
  --text-h3: clamp(20px, 1.5vw, 26px);
  --text-lead: clamp(16px, 1.15vw, 19px);
  --text-body: 16px;
  --text-small: 15px;
  --text-label: 12px;

  --leading-tight: 1.1;
  --leading-heading: 1.2;
  --leading-body: 1.75;

  /* Bredde på brødtekst. Holder linjelængden læsbar (~62 tegn). */
  --measure: 62ch;
  --measure-narrow: 46ch;

  /* Afstandsskala */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 48px;
  --s-8: 64px;
  --s-9: 80px;
  --s-10: 105px;

  /* Layout */
  --gutter: max(6%, calc((100vw - 1320px) / 2));
  --header-h: 88px;
}

/* ---------------------------------------------------------------- *
   2. Fonts — self-hostede variable fonte. Ingen forespørgsler til
   tredjepart, ingen IP-overførsel til Google, ingen syntetisk fedhed.
   ---------------------------------------------------------------- */

@font-face {
  font-family: 'DM Sans';
  src: url('/assets/fonts/dm-sans-latin.woff2') format('woff2');
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'DM Sans';
  src: url('/assets/fonts/dm-sans-latin-ext.woff2') format('woff2');
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Manrope';
  src: url('/assets/fonts/manrope-latin.woff2') format('woff2');
  font-weight: 400 800;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Manrope';
  src: url('/assets/fonts/manrope-latin-ext.woff2') format('woff2');
  font-weight: 400 800;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ---------------------------------------------------------------- *
   3. Reset og grundtypografi
   ---------------------------------------------------------------- */

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 20px);
}

body {
  margin: 0;
  background: var(--white);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--text-body);
  line-height: var(--leading-body);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, p, dl, dd, figure, ul, ol { margin: 0; }

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 550;
  line-height: var(--leading-heading);
  letter-spacing: -0.02em;
  text-wrap: balance;
  overflow-wrap: break-word;
}

h1 {
  font-size: var(--text-display);
  line-height: var(--leading-tight);
  letter-spacing: -0.035em;
}

h2 { font-size: var(--text-h2); }
h3 { font-size: var(--text-h3); letter-spacing: -0.01em; }

p { text-wrap: pretty; }

em { font-style: normal; color: var(--blue); }

ul, ol { padding: 0; list-style: none; }

a { color: inherit; text-decoration: none; }

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

button { font: inherit; color: inherit; }

/* ---------------------------------------------------------------- *
   4. Tilgængelighed
   ---------------------------------------------------------------- */

.skip-link {
  position: absolute;
  left: var(--s-4);
  top: -100px;
  z-index: 100;
  background: var(--navy);
  color: var(--white);
  padding: var(--s-3) var(--s-4);
  transition: top 0.15s ease;
}

.skip-link:focus { top: var(--s-4); }

:focus-visible {
  outline: 3px solid var(--blue);
  outline-offset: 3px;
}

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

/* Honeypot: usynlig for mennesker, synlig for bots. */
.hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.optional { font-weight: 400; color: var(--ink-soft); }

/* ---------------------------------------------------------------- *
   5. Knapper og labels
   ---------------------------------------------------------------- */

.eyebrow,
.section-label {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  font-size: var(--text-label);
  font-weight: 650;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.section-label { color: var(--ink-soft); }

.short-line {
  display: inline-block;
  width: 26px;
  height: 2px;
  background: var(--blue);
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-6);
  padding: 17px 23px;
  background: var(--blue);
  color: var(--white);
  font-size: 15px;
  font-weight: 500;
  border: 1px solid var(--blue);
  cursor: pointer;
  border-radius: 4px;
  min-height: 52px;
  transition: background 0.2s ease, border-color 0.2s ease;
}

.button:hover { background: var(--blue-dark); border-color: var(--blue-dark); }

.button-ghost {
  background: transparent;
  color: var(--ink);
  border-color: var(--line-strong);
}

.button-ghost:hover { background: var(--pale); border-color: var(--ink); }

/* ---------------------------------------------------------------- *
   6. Header og navigation
   ---------------------------------------------------------------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-6);
  min-height: var(--header-h);
  padding: 0 var(--gutter);
  border-bottom: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(16px);
}

.brand {
  display: flex;
  align-items: center;
  gap: 13px;
  font-family: var(--font-display);
  font-weight: 750;
  font-size: 25px;
  letter-spacing: -0.04em;
  color: var(--ink);
}

.brandmark {
  position: relative;
  flex: none;
  width: 31px;
  height: 36px;
  border: 3px solid currentColor;
  border-right: 0;
}

.brandmark::after {
  content: '';
  position: absolute;
  right: -8px;
  bottom: -3px;
  width: 19px;
  height: 21px;
  border: 3px solid var(--blue);
  border-left: 0;
}

.brand-sub {
  display: block;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.16em;
  line-height: 1.8;
}

nav { display: flex; align-items: center; gap: clamp(16px, 2vw, 32px); font-size: 14px; font-weight: 500; }
nav > a { transition: color 0.2s ease; }
nav > a[aria-current='location'] { color: var(--blue); text-decoration: underline; text-underline-offset: 6px; }

nav > a:hover { color: var(--blue); }

.nav-cta {
  display: flex;
  gap: var(--s-5);
  padding: var(--s-3) var(--s-4);
  border: 1px solid var(--navy);
  border-radius: 4px;
  background: var(--navy);
  color: var(--white);
  cursor: pointer;
}

.nav-cta:hover { background: var(--blue); color: var(--white); }

.menu-toggle { display: none; }

/* ---------------------------------------------------------------- *
   7. Hero — full-bredde med plakat og video
   ---------------------------------------------------------------- */

.hero {
  position: relative;
  display: grid;
  align-content: center;
  min-height: clamp(640px, 82svh, 860px);
  overflow: hidden;
  background: var(--navy);
  color: var(--white);
  isolation: isolate;
}

.hero-media {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.hero-media picture,
.hero-media img,
.hero-media video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Videoen ligger oven paa plakaten og toneres ind, naar den spiller. */
.hero-media video {
  opacity: 0;
  transition: opacity 0.8s ease;
}

.hero-media.is-playing video { opacity: 1; }

/* Slør, saa hvid tekst holder kontrast, ogsaa naar videoen er lys.
   To lag: et lodret for laesbarhed i bunden, og et vandret saa
   tekstkolonnen i venstre side staar stærkest. */
.hero-media::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(0deg, rgba(9, 26, 38, 0.65), transparent 45%),
    linear-gradient(90deg, rgba(9, 26, 38, 0.9) 0%, rgba(9, 26, 38, 0.72) 43%, rgba(9, 26, 38, 0.12) 100%);
}

.hero-copy {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: var(--s-5);
  width: 100%;
  padding: var(--s-9) var(--gutter);
}

.hero-copy > * { max-width: 760px; }
.hero h1 { font-weight: 500; }
.hero .short-line { background: var(--blue-bright); }
.hero-foot-note span { margin: 0 10px; opacity: 0.55; }
.hero .button:not(.button-ghost) {
  background: var(--blue-bright);
  border-color: var(--blue-bright);
  color: var(--navy);
}
.hero .button:not(.button-ghost):hover { background: var(--white); border-color: var(--white);
}

.hero h1 { margin-top: var(--s-2); }

.hero .eyebrow { color: #dce7ef; }

.hero em { color: var(--blue-bright); }

.hero-lead {
  max-width: 47ch;
  font-size: clamp(17px, 1.35vw, 20px);
  line-height: 1.7;
  color: #eef3f5;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-4);
  margin-top: var(--s-2);
}

.hero .button-ghost {
  color: var(--white);
  background: rgba(9, 26, 38, 0.3);
  border-color: rgba(255, 255, 255, 0.55);
}

.hero .button-ghost:hover {
  background: rgba(255, 255, 255, 0.16);
  border-color: var(--white);
}

.hero-foot-note {
  max-width: 690px;
  margin-top: var(--s-3);
  padding-top: var(--s-5);
  font-size: 12px;
  color: #d8e1e5;
  border-top: 1px solid rgba(255, 255, 255, 0.24);
}

/* Pause/afspil. Paakraevet for automatisk afspillende indhold
   (WCAG 2.2.2) og eneste vej til at starte videoen paa mobil. */
.hero-toggle {
  position: absolute;
  right: var(--gutter);
  bottom: var(--s-6);
  z-index: 2;
  padding: 10px 16px;
  font-size: 13px;
  font-weight: 500;
  color: var(--white);
  background: rgba(9, 26, 38, 0.62);
  border: 1px solid rgba(255, 255, 255, 0.45);
  backdrop-filter: blur(4px);
  border-radius: 40px;
  min-height: 44px;
  cursor: pointer;
}

.hero-toggle:hover {
  background: rgba(9, 26, 38, 0.88);
  border-color: var(--white);
}

.hero-toggle[hidden] { display: none; }

/* ---------------------------------------------------------------- *
   8. Tryghedsbånd
   ---------------------------------------------------------------- */

.trust-bar {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--s-5);
  padding: var(--s-6) var(--gutter);
  border-bottom: 1px solid var(--line);
  font-size: var(--text-small);
  font-weight: 500;
}

.trust-bar li { display: flex; align-items: center; gap: var(--s-3); min-width: 0; }
.trust-bar li > span { min-width: 0; overflow-wrap: anywhere; }

.trust-bar li::before {
  content: '✓';
  display: grid;
  place-items: center;
  flex: 0 0 28px;
  height: 28px;
  border-radius: 50%;
  background: #edf3ef;
  color: var(--blue);
  font-size: 14px;
  line-height: 1;
}

.trust-bar small { display: block; color: var(--ink-soft); font-size: 12px; font-weight: 400; margin-top: 3px; }

/* ---------------------------------------------------------------- *
   9. Sektionsrammer
   ---------------------------------------------------------------- */

.section {
  padding: var(--s-10) var(--gutter);
  scroll-margin-top: 12px;
}

.section-pale { background: var(--pale); }

.section-navy {
  background: var(--navy);
  color: var(--white);
}

.section-navy .section-label { color: var(--navy-soft); }
.section-navy h2 { margin-top: var(--s-5); margin-bottom: var(--s-7); }
.section-navy em { color: var(--blue-bright); }

.section-intro {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: var(--s-7);
  align-items: start;
  margin-top: var(--s-6);
}

.section-intro > p {
  max-width: var(--measure);
  color: var(--ink-soft);
  font-size: var(--text-lead);
}

.areas-layout {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.2fr);
  gap: var(--s-7);
  align-items: center;
  margin-top: var(--s-6);
}

.areas-copy > p {
  margin-top: var(--s-5);
  max-width: var(--measure-narrow);
  color: var(--ink-soft);
  font-size: var(--text-lead);
}

.service-film { margin: 0; min-width: 0; }

.service-film video {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--navy);
}

.service-film figcaption {
  margin-top: var(--s-3);
  color: var(--ink-soft);
  font-size: 13px;
  line-height: 1.6;
}

.section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--s-7);
  margin-bottom: var(--s-7);
}

.section-head h2 { margin-top: var(--s-5); }

.section-head > p {
  max-width: var(--measure-narrow);
  color: var(--ink-soft);
  font-size: var(--text-small);
}

/* ---------------------------------------------------------------- *
   10. Kort
   ---------------------------------------------------------------- */

.card-grid {
  display: grid;
  gap: var(--s-6);
  margin-top: var(--s-7);
}

.card-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.card-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.card-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.card {
  padding: var(--s-6);
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--white);
}

.card-kicker { display: block; margin-bottom: var(--s-6); color: var(--blue); font-size: 11px; font-weight: 600; letter-spacing: 0.1em; }
.card h3 { font-size: 23px; }
.card .tick-list { padding-top: var(--s-5); border-top: 1px solid var(--line); }

.card h3 { margin-bottom: var(--s-4); }

.card-question {
  margin-bottom: var(--s-5);
  font-family: var(--font-display);
  font-size: 17px;
  color: var(--blue);
}

.tick-list li {
  position: relative;
  padding-left: var(--s-5);
  margin-bottom: var(--s-3);
  color: var(--ink-soft);
  font-size: var(--text-small);
  max-width: var(--measure-narrow);
}

.tick-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 10px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--blue);
}

/* ---------------------------------------------------------------- *
   11. Løfter
   ---------------------------------------------------------------- */

.promise {
  padding: var(--s-6);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 6px;
}

.promise-num {
  display: block;
  margin-bottom: var(--s-5);
  font-family: var(--font-display);
  font-size: 36px;
  font-weight: 400;
  letter-spacing: -0.05em;
  color: var(--blue);
}

.promise h3 { margin-bottom: var(--s-3); font-size: 21px; }

.promise p {
  color: var(--ink-soft);
  font-size: var(--text-small);
  line-height: 1.7;
}

/* ---------------------------------------------------------------- *
   12. Tilgang med faneblade
   ---------------------------------------------------------------- */

.approach-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--s-8);
  align-items: start;
}

.tabs { border-top: 1px solid var(--line-strong); }

.tabs button {
  display: flex;
  align-items: flex-start;
  gap: var(--s-5);
  width: 100%;
  padding: var(--s-6) 0;
  background: none;
  border: 0;
  border-bottom: 1px solid var(--line-strong);
  text-align: left;
  color: var(--ink-soft);
  cursor: pointer;
}

.tabs button > span:first-child {
  padding-top: 6px;
  font-size: var(--text-label);
}

.tab-text {
  font-family: var(--font-display);
  font-size: 25px;
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--ink);
}

.tab-text small {
  display: block;
  margin-top: var(--s-2);
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 0;
  color: var(--ink-soft);
}

.tab-arrow { margin-left: auto; font-size: 20px; }

.tabs button[aria-selected='true'] { color: var(--blue); }
.tabs button[aria-selected='true'] .tab-text { color: var(--blue); }
.tabs button[aria-selected='true'] { border-bottom-color: var(--blue); }
.tabs button[aria-selected='true'] .tab-text small { color: var(--ink); }

.panels .panel {
  padding: var(--s-6);
  background: var(--pale);
  border: 1px solid var(--line);
  border-radius: 6px;
  min-height: 340px;
}

/* Uden JavaScript vises alle paneler under hinanden, så intet indhold
   er skjult. Med JavaScript skjules de inaktive via [hidden]. */
.panels .panel + .panel { margin-top: 0; }
.panels .panel:not([hidden]) ~ .panel:not([hidden]) { margin-top: var(--s-5); }

.panel-step {
  margin-bottom: var(--s-5);
  font-size: var(--text-label);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--blue);
}

.panel h3 { margin-bottom: var(--s-4); }

.panel > p {
  max-width: var(--measure);
  color: var(--ink-soft);
  font-size: var(--text-small);
}

.panel-foot {
  margin-top: var(--s-5);
  padding-top: var(--s-4);
  border-top: 1px solid var(--line);
  font-size: var(--text-label);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

/* ---------------------------------------------------------------- *
   13. Forløb i trin
   ---------------------------------------------------------------- */

.steps {
  display: grid;
  gap: var(--s-6);
  counter-reset: step;
}

.steps li {
  position: relative;
  padding: var(--s-5) 0 0 var(--s-7);
  border-top: 1px solid var(--navy-line);
  counter-increment: step;
}

.steps li::before {
  content: '0' counter(step);
  position: absolute;
  left: 0;
  top: var(--s-5);
  font-size: var(--text-label);
  color: var(--blue-bright);
}

.steps h3 { margin-bottom: var(--s-3); font-size: 22px; }

.steps p {
  max-width: var(--measure);
  color: var(--navy-soft);
  font-size: var(--text-small);
}

@media (min-width: 800px) {
  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .steps li:last-child { grid-column: 1 / -1; }
}

/* ---------------------------------------------------------------- *
   14. Kvalitet og garanti
   ---------------------------------------------------------------- */

.quality-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr);
  gap: var(--s-7);
  align-items: start;
  margin-top: var(--s-7);
}

.quality-card {
  padding: var(--s-7);
  border-radius: 6px;
  background: var(--navy);
  color: var(--white);
}

.quality-card h3 { margin-bottom: var(--s-4); font-size: 24px; }

.quality-card p { color: var(--navy-soft); font-size: var(--text-small); }

.quality-card::before {
  content: 'GARANTI';
  display: block;
  margin-bottom: var(--s-5);
  font-size: var(--text-label);
  letter-spacing: 0.14em;
  color: var(--blue-bright);
}

.quality-notes { display: grid; gap: var(--s-5); }

.quality-notes > div {
  padding-bottom: var(--s-5);
  border-bottom: 1px solid var(--line);
}

.quality-notes > div:last-child { border-bottom: 0; padding-bottom: 0; }

.quality-notes h3 { margin-bottom: var(--s-3); font-size: 19px; }

.quality-notes p {
  max-width: var(--measure);
  color: var(--ink-soft);
  font-size: var(--text-small);
}

/* ---------------------------------------------------------------- *
   15. Personer
   ---------------------------------------------------------------- */

.person img {
  width: 120px;
  height: 120px;
  object-fit: cover;
  margin-bottom: var(--s-4);
}

.person h3 { font-size: 22px; }

.person-role {
  margin-bottom: var(--s-4);
  font-size: var(--text-label);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--blue);
}

.person p { color: var(--ink-soft); font-size: var(--text-small); }

/* ---------------------------------------------------------------- *
   16. FAQ
   ---------------------------------------------------------------- */

.faq-intro { margin-top: var(--s-5); color: var(--ink-soft); }
#faq > h2 { margin-top: var(--s-5); }

.faq {
  max-width: 980px;
  margin-top: var(--s-7);
  border-top: 1px solid var(--line-strong);
}

.faq details { border-bottom: 1px solid var(--line-strong); padding: 0 var(--s-5); }
.faq details[open] { background: var(--white); }
.faq details[open] summary { color: var(--blue); }

.faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-5);
  padding: var(--s-5) 0;
  cursor: pointer;
  font-family: var(--font-display);
  font-size: clamp(18px, 1.3vw, 22px);
  font-weight: 500;
  letter-spacing: -0.01em;
  list-style: none;
}

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

.faq summary::after {
  content: '+';
  flex: none;
  font-size: 24px;
  font-weight: 400;
  color: var(--blue);
}

.faq details[open] summary::after { content: '–'; }

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

.faq p {
  max-width: var(--measure);
  padding-bottom: var(--s-6);
  color: var(--ink-soft);
  font-size: var(--text-small);
}

/* ---------------------------------------------------------------- *
   17. Kontakt og formular
   ---------------------------------------------------------------- */

.section-contact { background: #eaf0eb; }

.contact-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--s-8);
  align-items: start;
  margin-top: var(--s-6);
}

.contact-copy > p {
  max-width: var(--measure);
  margin-top: var(--s-5);
  color: var(--ink-soft);
  font-size: var(--text-lead);
}

.contact-details {
  margin-top: var(--s-7);
  border-top: 1px solid var(--line-strong);
}

.contact-details > div {
  display: grid;
  grid-template-columns: 140px minmax(0, 1fr);
  gap: var(--s-4);
  padding: var(--s-4) 0;
  border-bottom: 1px solid var(--line);
}

.contact-details dt {
  font-size: var(--text-label);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-soft);
  padding-top: 3px;
}

.contact-details dd { font-size: var(--text-small); }

.contact-details a { border-bottom: 1px solid var(--line-strong); }
.contact-details a:hover { color: var(--blue); border-bottom-color: var(--blue); }

.contact-form {
  padding: var(--s-6);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 6px;
}

.contact-form h3 { font-size: 22px; margin-bottom: var(--s-2); }

.form-note {
  margin-bottom: var(--s-5);
  font-size: 13px;
  color: var(--ink-soft);
}

.contact-form label {
  display: block;
  margin: var(--s-5) 0 var(--s-2);
  font-size: 14px;
  font-weight: 500;
}

.contact-form input,
.contact-form textarea {
  width: 100%;
  padding: 13px 14px;
  font: inherit;
  font-size: var(--text-body);
  color: var(--ink);
  background: var(--white);
  border: 1px solid var(--line-strong);
}

.contact-form input:focus,
.contact-form textarea:focus {
  outline: 3px solid var(--blue);
  outline-offset: 1px;
  border-color: var(--blue);
}

.contact-form textarea { resize: vertical; }

.contact-form .button { margin-top: var(--s-6); }

.form-consent {
  margin-top: var(--s-5);
  font-size: 13px;
  color: var(--ink-soft);
}

.form-consent a { text-decoration: underline; }
.form-consent a:hover { color: var(--blue); }

/* ---------------------------------------------------------------- *
   18. Footer
   ---------------------------------------------------------------- */

.site-footer {
  padding: var(--s-7) 5% var(--s-5);
  border-top: 1px solid var(--line);
}

.footer-top {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-5);
}

.footer-top .brand { font-size: 20px; }
.footer-top .brandmark { transform: scale(0.8); transform-origin: left center; }

.footer-tagline { font-size: 13px; color: var(--ink-soft); }

.footer-legal {
  margin-top: var(--s-6);
  padding-top: var(--s-5);
  border-top: 1px solid var(--line);
}

.footer-legal dl {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-4) var(--s-7);
}

.footer-legal dt {
  font-size: var(--text-label);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.footer-legal dd { font-size: var(--text-small); }
.footer-legal a:hover { color: var(--blue); }

.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-3);
  margin-top: var(--s-6);
  padding-top: var(--s-5);
  border-top: 1px solid var(--line);
  font-size: 13px;
  color: var(--ink-soft);
}

.back-top { display: inline-flex; align-items: center; gap: 20px; min-height: 44px; }
.back-top:hover { color: var(--blue); }

@media (min-width: 1200px) {
  .steps { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--s-5); }
  .steps li { padding: var(--s-8) 0 0; }
  .steps li:last-child { grid-column: auto; }
  .steps h3 { font-size: 19px; }
  .steps li::before { font-size: 16px; }
}

/* ---------------------------------------------------------------- *
   19. Chat-hjælper
   ---------------------------------------------------------------- */

/* Hjørnet nederst til højre. Knappen er boksens anker; panelet lægger
   sig over den, så knappen bliver siddende hvor brugeren fandt den. */
.chat-widget {
  position: fixed;
  right: var(--s-5);
  bottom: var(--s-5);
  z-index: 60;
}

/* Knappens hitfelt er stationært. SVG-figuren er en rig med separate
   led, øjne og mund; bevægelsen ligger inde i figuren, ikke på knappen. */
.chat-buddy {
  position: relative;
  display: block;
  width: 104px;
  height: 120px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}

.chat-buddy:focus-visible {
  outline: 3px solid var(--blue);
  outline-offset: 2px;
  border-radius: 24px;
}

.chat-buddy-mascot {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
  filter: drop-shadow(0 5px 5px rgba(16, 46, 67, 0.14));
}

.buddy-character {
  transform-box: view-box;
  transform-origin: 64px 124px;
  animation: buddy-breathe 5.6s ease-in-out infinite;
}

.buddy-head {
  transform-box: view-box;
  transform-origin: 64px 78px;
  animation: buddy-look 7.4s ease-in-out infinite;
}

.buddy-gaze {
  transform: translate(var(--buddy-look-x, 0px), var(--buddy-look-y, 0px));
  transition: transform 250ms ease-out;
}

.buddy-eyes {
  transform-box: fill-box;
  transform-origin: center;
  animation: buddy-blink 5.3s ease-in-out infinite;
}

.buddy-mouth { opacity: 0; transform-box: fill-box; transform-origin: center; }
.buddy-smile { transition: opacity 150ms; }
.buddy-arm { transform-box: view-box; transition: transform 350ms ease; }
.buddy-arm--left { transform-origin: 44px 89px; animation: buddy-arm-rest 5.6s ease-in-out infinite; }
.buddy-arm--right { transform-origin: 86px 89px; animation: buddy-greet 8.4s ease-in-out infinite; }
.buddy-shadow { transform-box: fill-box; transform-origin: center; animation: buddy-shadow 5.6s ease-in-out infinite; }
.buddy-spark { opacity: 0; }
.buddy-spark--one { animation: buddy-spark 8.4s ease-in-out infinite; }
.buddy-spark--two { animation: buddy-spark 8.4s 0.5s ease-in-out infinite; }

.chat-buddy:is(:hover, :focus-visible) .buddy-arm--right { animation: buddy-wave 2s ease-in-out infinite; }
.chat-buddy:is(:hover, :focus-visible) .buddy-head { animation: none; transform: rotate(-3deg); }
.chat-widget.is-open .buddy-arm--right { animation: buddy-arm-rest 5.6s ease-in-out infinite reverse; }
.chat-widget.is-open .buddy-gaze { transform: translate(-2px, -1px); }
.chat-widget.is-open .buddy-spark { animation: none; }

.chat-widget[data-buddy-state='thinking'] .buddy-head { animation: buddy-think 2.4s ease-in-out infinite; }
.chat-widget[data-buddy-state='thinking'] .buddy-gaze { animation: buddy-search 2.4s ease-in-out infinite; }
.chat-widget[data-buddy-state='thinking'] .buddy-arm--right { animation: none; transform: rotate(-62deg); }
.chat-widget[data-buddy-state='speaking'] .buddy-head { animation: buddy-nod 1.5s ease-in-out infinite; }
.chat-widget[data-buddy-state='speaking'] .buddy-smile { opacity: 0; }
.chat-widget[data-buddy-state='speaking'] .buddy-mouth { opacity: 1; animation: buddy-talk 320ms ease-in-out infinite; }
.chat-widget[data-buddy-state='speaking'] .buddy-arm--right { animation: buddy-explain 1.8s ease-in-out infinite; }
.chat-widget[data-buddy-state='error'] .buddy-head { animation: none; transform: rotate(5deg); }

@keyframes buddy-breathe {
  0%, 100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-3px) scale(1.015, 1.025); }
}
@keyframes buddy-look {
  0%, 15%, 75%, 100% { transform: rotate(0deg); }
  30%, 40% { transform: rotate(-3deg) translateY(-1px); }
  55% { transform: rotate(2deg); }
}
@keyframes buddy-blink {
  0%, 40%, 44%, 76%, 80%, 100% { transform: scaleY(1); }
  42%, 78% { transform: scaleY(0.08); }
}
@keyframes buddy-arm-rest {
  0%, 100% { transform: rotate(0deg); }
  50% { transform: rotate(7deg); }
}
@keyframes buddy-greet {
  0%, 42%, 82%, 100% { transform: rotate(0deg); }
  52%, 63%, 74% { transform: rotate(-115deg); }
  57%, 68% { transform: rotate(-88deg); }
}
@keyframes buddy-wave {
  0%, 100% { transform: rotate(0deg); }
  20%, 45%, 70% { transform: rotate(-110deg); }
  32%, 58% { transform: rotate(-82deg); }
}
@keyframes buddy-shadow {
  0%, 100% { transform: scaleX(1); opacity: 0.9; }
  50% { transform: scaleX(0.85); opacity: 0.65; }
}
@keyframes buddy-spark {
  0%, 46%, 80%, 100% { opacity: 0; }
  56%, 68% { opacity: 0.8; }
}
@keyframes buddy-think {
  0%, 100% { transform: rotate(-5deg); }
  50% { transform: rotate(-1deg) translateY(-2px); }
}
@keyframes buddy-search {
  0%, 100% { transform: translate(-3px, -1px); }
  50% { transform: translate(2px, -1px); }
}
@keyframes buddy-nod {
  0%, 100% { transform: translateY(0) rotate(-1deg); }
  50% { transform: translateY(2px) rotate(1deg); }
}
@keyframes buddy-talk {
  0%, 100% { transform: scale(0.9, 0.2); }
  50% { transform: scale(1.05, 1); }
}
@keyframes buddy-explain {
  0%, 100% { transform: rotate(-30deg); }
  50% { transform: rotate(-58deg); }
}

.chat-buddy-label {
  position: absolute;
  right: calc(100% + 10px);
  top: 50%;
  transform: translateY(-50%);
  padding: 8px 12px;
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
  color: var(--navy);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 14px 14px 2px 14px;
  box-shadow: 0 6px 18px rgba(16, 46, 67, 0.18);
}

.chat-widget.is-open .chat-buddy-label { display: none; }

.chat-panel {
  position: absolute;
  right: 0;
  bottom: calc(100% + var(--s-3));
  display: flex;
  flex-direction: column;
  width: min(380px, calc(100vw - var(--s-6)));
  max-height: min(620px, calc(100vh - var(--s-8) - var(--header-h)));
  overflow: hidden;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: 0 24px 60px rgba(16, 46, 67, 0.3);
}

/* display:flex overstyrer standarden for hidden-attributtet, så det
   skal siges eksplicit — ellers er chatten synlig fra starten. */
.chat-panel[hidden] { display: none; }

.chat-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--s-4);
  padding: var(--s-4) var(--s-5);
  color: var(--white);
  background: var(--navy);
}

.chat-head h2 { font-size: 18px; line-height: var(--leading-heading); }

.chat-badge {
  margin-top: 2px;
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--blue-bright);
}

.chat-close {
  padding: 0 4px;
  font-size: 26px;
  line-height: 1;
  color: var(--white);
  background: none;
  border: 0;
  cursor: pointer;
}

.chat-close:focus-visible { outline: 3px solid var(--blue-bright); outline-offset: 2px; }

/* AI-deklarationen står altid øverst i panelet, ikke i en fodnote. */
.chat-notice {
  padding: var(--s-3) var(--s-5);
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--blue-dark);
  background: var(--pale);
  border-bottom: 1px solid var(--line);
}

.chat-log {
  flex: 1;
  min-height: 120px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  padding: var(--s-4) var(--s-5);
  list-style: none;
}

.chat-line {
  max-width: 88%;
  padding: 10px 14px;
  font-size: 14.5px;
  line-height: 1.6;
  border-radius: 12px;
  overflow-wrap: anywhere;
}

/* Linjeskift fra agenten skal overleve, men ikke det indryk, HTML-kilden
   tilfældigvis har — derfor pre-wrap på teksten, ikke på boblen. */
.chat-line p { margin: 0; font: inherit; white-space: pre-wrap; }

.chat-line--agent {
  align-self: flex-start;
  color: var(--ink);
  background: var(--pale);
  border: 1px solid var(--line);
}

.chat-line--user {
  align-self: flex-end;
  color: var(--white);
  background: var(--blue-dark);
}

.chat-line--error {
  align-self: flex-start;
  color: var(--blue-dark);
  background: #f6e9e4;
  border: 1px solid #e3cfc7;
}

.chat-line--typing {
  display: flex;
  gap: 5px;
  align-items: center;
  color: var(--ink-soft);
}

.chat-line--typing i {
  width: 6px;
  height: 6px;
  background: var(--ink-soft);
  border-radius: 50%;
  animation: chat-typing 1.1s ease-in-out infinite;
}

.chat-line--typing i:nth-child(2) { animation-delay: 0.16s; }
.chat-line--typing i:nth-child(3) { animation-delay: 0.32s; }

@keyframes chat-typing {
  0%, 60%, 100% { opacity: 0.25; transform: translateY(0); }
  30% { opacity: 1; transform: translateY(-3px); }
}

.chat-prompts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  padding: 0 var(--s-5) var(--s-4);
}

.chat-prompts button {
  padding: 8px 12px;
  font-size: 13px;
  color: var(--blue-dark);
  background: var(--white);
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  cursor: pointer;
}

.chat-prompts button:hover { border-color: var(--blue); background: var(--pale); }
.chat-prompts button:focus-visible { outline: 3px solid var(--blue); outline-offset: 1px; }

.chat-prompts .chat-prompt--primary {
  color: var(--white);
  background: var(--blue);
  border-color: var(--blue);
}

.chat-prompts .chat-prompt--primary:hover { background: var(--blue-dark); border-color: var(--blue-dark); }

.chat-composer {
  display: flex;
  gap: var(--s-2);
  padding: var(--s-3) var(--s-4) var(--s-4);
  border-top: 1px solid var(--line);
}

.chat-composer input {
  flex: 1;
  min-width: 0;
  padding: 11px 13px;
  font: inherit;
  font-size: 15px;
  color: var(--ink);
  background: var(--white);
  border: 1px solid var(--line-strong);
  border-radius: 4px;
}

.chat-composer input:focus {
  outline: 3px solid var(--blue);
  outline-offset: 1px;
  border-color: var(--blue);
}

.chat-composer .button {
  padding: 11px 18px;
  font-size: 15px;
}

/* Bogen ligger som et ark oven i samtalen. Det ville ellers skubbe
   tråden ud af vinduet, når panelet har fast højde. */
.chat-booking, .chat-owner {
  position: absolute;
  inset: 0;
  overflow-y: auto;
  padding: var(--s-5);
  background: var(--white);
}

.chat-booking h3, .chat-owner h3 { font-size: 17px; }
.chat-owner { z-index: 2; }
.chat-owner > p { margin: 16px 0; font-size: 13px; color: var(--ink-soft); }
.chat-owner label { display: block; margin: 20px 0; font-size: 13px; }
.chat-owner input { display: block; width: 100%; margin-top: 8px; padding: 12px; border: 1px solid var(--line-strong); border-radius: 6px; font: inherit; }
.chat-owner input:focus { outline: 3px solid var(--blue); outline-offset: 1px; }
.chat-owner-state { display: flex; justify-content: space-between; gap: 12px; padding: 8px 16px; background: var(--blue-pale); font-size: 11px; }
.chat-owner-state button { color: var(--blue-dark); text-decoration: underline; }
.chat-owner[hidden], .chat-owner-state[hidden] { display: none; }
.chat-icloud fieldset { border: 0; padding: 0; margin-top: 16px; }
.chat-icloud fieldset p { font-size: 13px; margin-top: 12px; }
.chat-icloud [hidden] { display: none; }
.chat-icloud select { width: 100%; padding: 10px; margin-top: 8px; border: 1px solid var(--line-strong); border-radius: 6px; font: inherit; }
.chat-icloud .chat-icloud-check { display: flex; align-items: center; gap: 8px; }
.chat-icloud input[type="checkbox"] { width: 18px; height: 18px; margin: 0; padding: 0; }
.chat-icloud-day { display: grid; grid-template-columns: 1fr 82px 82px; gap: 6px; align-items: center; margin: 12px 0; }
.chat-icloud-day label { margin: 0; font-size: 12px; }
.chat-icloud-day input[type="time"] { min-width: 0; padding: 8px 4px; font-size: 12px; margin: 0; }
.chat-icloud [data-icloud-hours][aria-disabled="true"] { opacity: .5; }

.chat-booking > p {
  margin-top: var(--s-2);
  font-size: 13px;
  color: var(--ink-soft);
}

.chat-booking label {
  display: block;
  margin-top: var(--s-4);
  font-size: 13px;
  font-weight: 500;
}

.chat-booking input,
.chat-booking select,
.chat-booking textarea {
  width: 100%;
  margin-top: var(--s-1);
  padding: 10px 12px;
  font: inherit;
  font-size: 15px;
  color: var(--ink);
  background: var(--white);
  border: 1px solid var(--line-strong);
  border-radius: 4px;
}

.chat-booking input:focus,
.chat-booking select:focus,
.chat-booking textarea:focus {
  outline: 3px solid var(--blue);
  outline-offset: 1px;
  border-color: var(--blue);
}

.chat-booking textarea { resize: vertical; }
.chat-booking[hidden], .chat-booking [hidden] { display: none; }
.chat-booking fieldset { border: 0; padding: 0; margin-top: var(--s-4); min-width: 0; }
.chat-booking legend, .chat-booking h4 { font-size: 18px; font-weight: 650; line-height: 1.35; }
.chat-booking fieldset > p { margin-top: var(--s-2); font-size: 13px; }
.chat-booking-progress { color: var(--blue-dark); }
.chat-booking-slots { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 12px; }
.chat-booking-slots button { border: 1px solid var(--line); border-radius: 10px; padding: 11px 6px; font-size: 14px; }
.chat-booking-slots button[aria-pressed="true"] { background: var(--blue); border-color: var(--blue); color: white; }
.chat-booking-slots button:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; }
.chat-booking-grid { display: grid; grid-template-columns: 90px 1fr; gap: 12px; }
.chat-booking-summary { margin-top: 20px; }
.chat-booking-summary dt { color: var(--muted); font-size: 12px; margin-top: 12px; }
.chat-booking-summary dd { margin: 4px 0 0; font-size: 14px; white-space: pre-line; overflow-wrap: anywhere; }
.chat-booking-reference { font-size: 11px; color: var(--muted); overflow-wrap: anywhere; }
.chat-booking .button:disabled { opacity: .5; cursor: default; }

.chat-booking .button { margin-top: var(--s-5); width: 100%; }

.chat-booking-consent {
  margin-top: var(--s-3);
  font-size: 12px;
  color: var(--ink-soft);
}

.chat-booking-status {
  margin-top: var(--s-3);
  font-size: 13px;
  color: var(--blue-dark);
}

.chat-booking-back {
  padding: 6px 0;
  font-size: 13px;
  color: var(--ink-soft);
  background: none;
  border: 0;
  cursor: pointer;
  text-decoration: underline;
}

.chat-booking-back:hover { color: var(--blue); }
.chat-booking-back:focus-visible { outline: 3px solid var(--blue); outline-offset: 1px; }

@media (max-width: 760px) {
  .chat-widget { right: var(--s-4); bottom: var(--s-4); }
  .chat-buddy { width: 76px; height: 88px; }
  .chat-buddy-label { display: none; }
  .chat-panel { width: calc(100vw - var(--s-5)); max-height: calc(100vh - 120px); }
}

/* ---------------------------------------------------------------- *
   20. Responsivt
   ---------------------------------------------------------------- */

@media (max-width: 1050px) {
  :root { --gutter: 6%; --header-h: 85px; }

  html { scroll-padding-top: calc(var(--header-h) + 20px); }

  .brand { font-size: 22px; }
  .brand-sub { font-size: 10px; letter-spacing: 0.12em; }

  .menu-toggle { display: none; }
  .has-menu .menu-toggle {
    display: flex;
    align-items: center;
    gap: var(--s-4);
    padding: var(--s-2) var(--s-3);
    background: none;
    border: 1px solid var(--line-strong);
    cursor: pointer;
  }

  .site-header { flex-wrap: wrap; }
  .has-menu .site-header { flex-wrap: nowrap; }
  nav { width: 100%; flex-wrap: wrap; padding-bottom: var(--s-4); }
  .has-menu nav {
    display: none;
    position: absolute;
    left: 0;
    right: 0;
    top: var(--header-h);
    z-index: 20;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: var(--s-5) 6%;
    background: var(--white);
    border-bottom: 1px solid var(--line);
    font-size: 17px;
  }

  .has-menu nav.open { display: flex; max-height: calc(100svh - var(--header-h)); overflow-y: auto; }

  nav > a { padding: var(--s-4) 0; border-bottom: 1px solid var(--line); }

  .nav-cta { justify-content: center; margin-top: var(--s-4); padding: var(--s-3) var(--s-4); }
  .trust-bar li { align-items: flex-start; }
  .trust-bar li::before { margin-top: 4px; }

  .hero { min-height: 660px; }
  .trust-bar { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .card-grid-3 > :last-child { grid-column: 1 / -1; }
  .card-grid { gap: var(--s-5); }

  .hero-copy { max-width: none; padding: var(--s-8) 6% var(--s-8); }

  .section { padding: var(--s-9) var(--gutter); }

  .section-intro,
  .areas-layout,
  .section-head,
  .approach-layout,
  .quality-layout,
  .contact-layout { grid-template-columns: 1fr; }

  .section-head { display: block; }
  .section-head > p { margin-top: var(--s-5); }

  .card-grid-2,
  .card-grid-3,
  .card-grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
  :root { --text-display: clamp(38px, 11.5vw, 60px); --text-h2: 34px; }

  .hero { min-height: 640px; }
  .hero-media::after {
    background: linear-gradient(90deg, rgba(9, 26, 38, 0.84), rgba(9, 26, 38, 0.6)),
      linear-gradient(0deg, rgba(9, 26, 38, 0.6), transparent);
  }
  .hero-actions { flex-direction: column; align-items: stretch; max-width: 360px; }
  .hero-foot-note { max-width: 40ch; }
  .hero-foot-note span { display: block; height: 4px; overflow: hidden; }
  .card, .promise { padding: var(--s-5); }
  .quality-card { padding: var(--s-6); }
  .panels .panel { min-height: 0; }
  .faq details { padding: 0 var(--s-4); }

  .hero-copy { gap: var(--s-4); padding: var(--s-7) 6% var(--s-8); }

  .hero-lead { font-size: 16px; }

  .hero-foot-note { padding-top: var(--s-4); }

  .hero-toggle { right: 6%; bottom: var(--s-4); padding: 8px 12px; font-size: 12px; }

  .trust-bar {
    gap: var(--s-5) var(--s-4);
    font-size: 13px;
    padding: var(--s-5) 6%;
  }

  .section { padding: var(--s-8) var(--gutter); }

  .card-grid-2,
  .card-grid-3,
  .card-grid-4 { grid-template-columns: 1fr; gap: var(--s-5); }

  .tabs button { padding: var(--s-5) 0; }

  .tab-text { font-size: 22px; }

  .contact-details > div { grid-template-columns: 1fr; gap: var(--s-1); }

  .contact-details dt { padding-top: 0; }

  .footer-top,
  .footer-bottom { flex-direction: column; align-items: flex-start; }

  .footer-legal dl { flex-direction: column; gap: var(--s-4); }
}

/* Meget smalle skærme: headerens brand og menu-knap skal kunne være der
   samtidig uden at skubbe siden i vandret overløb. */
@media (max-width: 400px) {
  .site-header { padding: 0 4%; gap: var(--s-3); }

  .brand { gap: 10px; font-size: 19px; }
  .trust-bar { grid-template-columns: 1fr; }
  .trust-bar small { margin-top: 0; }

  .brandmark { width: 26px; height: 30px; border-width: 2.5px; }
  .brandmark::after { right: -7px; width: 16px; height: 18px; border-width: 2.5px; }

  .brand-sub { font-size: 9px; letter-spacing: 0.08em; }

  .menu-toggle { gap: var(--s-3); padding: var(--s-2) 10px; font-size: 14px; }

  .button { gap: var(--s-5); padding: 15px 18px; }
}

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

  .chat-buddy-mascot * { animation: none !important; transition: none !important; }

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