/* ==========================================================================
   NEDA MEDIA — DELT STYLESHEET
   Struktur:
   1. Reset
   2. Design tokens (farver, typografi, spacing)
   3. Basis / typografi
   4. Layout-hjælpere
   5. Knapper og badges
   6. Header / navigation
   7. Hero
   8. Logo-showcase (Elfsight)
   9. Problem-sektion
   10. Ydelser
   11. Cases
   12. Proces
   13. Om stifteren
   13b. Team (menneskerne bag)
   14. Anbefalinger (egen slider)
   15. FAQ
   16. Afsluttende CTA
   17. Footer
   18. Undersider (ydelser, cases, om, book, privatliv)
   19. Reduced motion
   ========================================================================== */

/* -------------------------------------------------------------------------
   1. RESET
   ------------------------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

* {
  margin: 0;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  min-height: 100vh;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

img,
picture,
video {
  display: block;
  max-width: 100%;
  height: auto;
}

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

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

button {
  cursor: pointer;
  background: none;
  border: none;
}

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

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

/* -------------------------------------------------------------------------
   2. DESIGN TOKENS
   ------------------------------------------------------------------------- */
:root {
  /* Farver — varm skandinavisk palet, ingen gradienter */
  --color-bg: #faf8f4;
  --color-bg-alt: #f1ece3;
  --color-bg-dark: #1c2420;
  --color-surface: #ffffff;
  --color-text: #1c1b19;
  --color-text-muted: #5c584f;
  --color-text-inverse: #f6f4ef;
  --color-text-inverse-muted: #c7c9c2;
  --color-accent: #2f4a3c;
  --color-accent-dark: #223529;
  --color-accent-soft: #e4ebe6;
  --color-warm: #c97b4a;
  --color-warm-soft: #f4e3d7;
  --color-border: #e3ded3;
  --color-border-strong: #cfc7b6;

  /* Typografi — moderne parring: Fraunces (display) + Inter (body),
     med systemstacks som fallback hvis Google Fonts ikke når at loade */
  --font-heading: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;

  /* Fluid typografi */
  --fs-xs: clamp(0.8rem, 0.77rem + 0.15vw, 0.9rem);
  --fs-sm: clamp(0.9rem, 0.87rem + 0.2vw, 1rem);
  --fs-base: clamp(1rem, 0.96rem + 0.2vw, 1.125rem);
  --fs-md: clamp(1.15rem, 1.08rem + 0.35vw, 1.35rem);
  --fs-lg: clamp(1.4rem, 1.25rem + 0.75vw, 1.9rem);
  --fs-xl: clamp(1.9rem, 1.6rem + 1.5vw, 2.75rem);
  --fs-2xl: clamp(2.4rem, 1.9rem + 2.5vw, 4rem);

  /* Fluid spacing */
  --space-2xs: clamp(0.4rem, 0.37rem + 0.15vw, 0.5rem);
  --space-xs: clamp(0.75rem, 0.7rem + 0.25vw, 0.9rem);
  --space-sm: clamp(1.1rem, 1rem + 0.5vw, 1.5rem);
  --space-md: clamp(1.75rem, 1.5rem + 1.25vw, 2.5rem);
  --space-lg: clamp(2.75rem, 2.2rem + 2.75vw, 4.5rem);
  --space-xl: clamp(4rem, 3.2rem + 4vw, 7rem);

  --container-width: 1200px;
  --container-padding: clamp(1.25rem, 4vw, 2.5rem);

  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 18px;

  --transition-fast: 160ms ease;
  --transition-base: 240ms ease;

  --header-height: 76px;
}

/* -------------------------------------------------------------------------
   3. BASIS / TYPOGRAFI
   ------------------------------------------------------------------------- */
body {
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: var(--fs-base);
}

h1,
h2,
h3,
h4 {
  font-family: var(--font-heading);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--color-text);
  font-optical-sizing: auto;
}

h1 {
  font-size: var(--fs-2xl);
  font-weight: 700;
  letter-spacing: -0.03em;
}

h2 {
  font-size: var(--fs-xl);
}

h3 {
  font-size: var(--fs-md);
}

/* Consistent mobile type scale — restrains default heading sizes so
   long Danish phrases don't wrap into 4-6 awkward lines. Only touches
   generic h1/h2/h3; sections with their own more-specific heading rule
   (Hero, Problem, case headers, etc.) already win over this and are
   untouched, since this is deliberately no more specific than the
   base h1/h2/h3 rules above. Desktop (min-width: 600px+) is unaffected. */
@media (max-width: 599px) {
  h1 {
    font-size: clamp(1.9rem, 1.6rem + 3vw, 2.4rem);
  }

  h2 {
    font-size: clamp(1.6rem, 1.4rem + 2vw, 2rem);
  }

  h3 {
    font-size: clamp(1.1rem, 1rem + 1vw, 1.25rem);
  }
}

p {
  color: var(--color-text-muted);
}

.lede {
  font-size: var(--fs-md);
  line-height: 1.6;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
summary:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 3px;
}

/* Skip-link til tastaturbrugere */
.skip-link {
  position: absolute;
  left: -999px;
  top: 0;
  background: var(--color-accent);
  color: var(--color-text-inverse);
  padding: 0.75rem 1.25rem;
  z-index: 200;
  border-radius: 0 0 var(--radius-sm) 0;
  pointer-events: none;
}

.skip-link:focus {
  left: 0;
  pointer-events: auto;
}

/* -------------------------------------------------------------------------
   4. LAYOUT-HJÆLPERE
   ------------------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--container-width);
  margin-inline: auto;
  padding-inline: var(--container-padding);
}

.container-narrow {
  width: 100%;
  max-width: 780px;
  margin-inline: auto;
  padding-inline: var(--container-padding);
}

section {
  padding-block: var(--space-xl);
}

.section-alt {
  background: var(--color-bg-alt);
}

.logo-showcase-wrap {
  padding-top: var(--space-md);
}

.section-dark {
  background: var(--color-bg-dark);
  color: var(--color-text-inverse);
}

.section-dark h1,
.section-dark h2,
.section-dark h3,
.section-dark p {
  color: var(--color-text-inverse);
}

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

.section-header {
  max-width: 680px;
  margin-bottom: var(--space-lg);
}

.section-header.center {
  margin-inline: auto;
  text-align: center;
}

.eyebrow {
  display: inline-block;
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: var(--space-xs);
}

.section-dark .eyebrow {
  color: rgba(246, 244, 239, 0.65);
}

.section-header h2 {
  margin-bottom: var(--space-sm);
}

.grid {
  display: grid;
  gap: var(--space-md);
}

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

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

.flow > * + * {
  margin-top: var(--space-sm);
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* Reveal-on-scroll (subtilt, respekterer reduced motion) */
.reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 700ms ease, transform 700ms ease;
}

.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Billeder/videoer: samme fade, men et meget subtilt scale-ind i stedet
   for (eller udover) translate — føles roligt, ikke som et "pop" */
.reveal.reveal-media {
  transform: translateY(10px) scale(1.03);
  transition: opacity 800ms ease, transform 800ms ease;
}

.reveal.reveal-media.is-visible {
  transform: translateY(0) scale(1);
}

/* -------------------------------------------------------------------------
   5. KNAPPER OG BADGES
   ------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  padding: 0.9em 1.6em;
  border-radius: var(--radius-sm);
  font-size: var(--fs-sm);
  font-weight: 600;
  letter-spacing: 0.01em;
  transition: background var(--transition-fast), color var(--transition-fast),
    border-color var(--transition-fast), transform var(--transition-fast);
  white-space: nowrap;
}

.btn:active {
  transform: translateY(1px);
}

.btn-primary {
  background: var(--color-accent);
  color: var(--color-text-inverse);
  border: 1px solid var(--color-accent);
}

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

.btn-secondary {
  background: transparent;
  color: var(--color-text);
  border: 1px solid var(--color-border-strong);
}

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

.section-dark .btn-secondary {
  color: var(--color-text-inverse);
  border-color: rgba(246, 244, 239, 0.35);
}

.section-dark .btn-secondary:hover {
  border-color: var(--color-text-inverse);
}

.btn-block {
  width: 100%;
  justify-content: center;
}

.cta-group {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
  align-items: center;
}

/* Understated editorial text link — the vocabulary used everywhere a
   second, quieter action sits beside a primary button */
.text-link {
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--color-text);
  border-bottom: 1px solid transparent;
  transition: color var(--transition-fast), border-color var(--transition-fast);
}

.text-link:hover {
  color: var(--color-accent);
  border-color: var(--color-accent);
}

.section-dark .text-link {
  color: var(--color-text-inverse);
}

.section-dark .text-link:hover {
  color: var(--color-text-inverse);
  border-color: var(--color-text-inverse);
}

.badge {
  display: inline-block;
  padding: 0.3em 0.8em;
  border-radius: 999px;
  font-size: var(--fs-xs);
  font-weight: 600;
  background: var(--color-accent-soft);
  color: var(--color-accent);
  border: 1px solid transparent;
}

.badge-placeholder {
  background: var(--color-bg-alt);
  color: var(--color-text);
  border: 1px dashed var(--color-border-strong);
}

/* -------------------------------------------------------------------------
   6. HEADER / NAVIGATION
   ------------------------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(250, 248, 244, 0.9);
  backdrop-filter: saturate(140%) blur(8px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--transition-base), box-shadow var(--transition-base);
}

.site-header.is-scrolled {
  border-bottom-color: var(--color-border);
  box-shadow: 0 4px 18px rgba(28, 27, 25, 0.04);
}

.nav-bar {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  min-height: var(--header-height);
}

.nav-links,
.nav-cta,
.nav-toggle,
.logo {
  position: relative;
  z-index: 1;
}

.logo {
  display: flex;
  align-items: center;
}

.logo img {
  height: 34px;
  width: auto;
  display: block;
}

.footer-brand .logo img {
  height: 38px;
}

.nav-links {
  display: none;
  align-items: center;
  gap: var(--space-md);
}

.nav-links a {
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--color-text);
  position: relative;
  padding-block: 0.3em;
}

.nav-links a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: 2px;
  background: var(--color-accent);
  transition: width var(--transition-fast);
}

.nav-links a:hover::after,
.nav-links a[aria-current="page"]::after {
  width: 100%;
}

.nav-links a[aria-current="page"] {
  color: var(--color-accent);
}

/* Language switcher (DA / EN) — sits between the nav links and the CTA on
   desktop, and as its own row inside the mobile menu. */
.lang-switch {
  display: none;
  align-items: center;
  gap: 0.4em;
  font-size: var(--fs-sm);
  font-weight: 500;
}

.lang-switch .lang-link {
  color: var(--color-text-muted, var(--color-text));
  opacity: 0.6;
  padding: 0.2em 0.15em;
}

.lang-switch .lang-link:hover {
  opacity: 1;
}

.lang-switch .lang-link.is-active {
  color: var(--color-accent);
  opacity: 1;
  font-weight: 700;
}

.lang-switch .lang-sep {
  opacity: 0.35;
}

.lang-switch-mobile {
  display: flex;
  margin-top: var(--space-2xs);
  padding-top: var(--space-xs);
  border-top: 1px solid var(--color-border);
  font-family: var(--font-body);
  font-size: var(--fs-md);
}

.lang-switch-mobile .lang-link {
  border-bottom: none;
  padding: 0.2em 0.3em;
  display: inline;
}

.nav-cta {
  display: none;
}

.nav-toggle {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 42px;
  height: 42px;
  align-items: center;
  border-radius: var(--radius-sm);
}

.nav-toggle:hover {
  background: var(--color-bg-alt);
}

.nav-toggle .bar {
  width: 22px;
  height: 2px;
  background: var(--color-text);
  transition: transform var(--transition-base), opacity var(--transition-base);
}

.nav-toggle[aria-expanded="true"] .bar:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.nav-toggle[aria-expanded="true"] .bar:nth-child(2) {
  opacity: 0;
}

.nav-toggle[aria-expanded="true"] .bar:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

.mobile-menu {
  position: fixed;
  top: var(--header-height);
  left: 0;
  right: 0;
  /* .site-header has backdrop-filter, which establishes a new containing
     block for position:fixed descendants — so a bottom:0 inset would
     resolve against the header's own ~76px box, not the viewport,
     collapsing this menu to almost no height. vh/dvh are immune to
     containing-block size, so an explicit height sidesteps that entirely.
     The plain vh line is a fallback for browsers without dvh support. */
  height: calc(100vh - var(--header-height));
  height: calc(100dvh - var(--header-height));
  background: var(--color-bg);
  z-index: 99;
  padding: var(--space-md) var(--container-padding);
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  transform: translateY(-8px);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity var(--transition-base), transform var(--transition-base),
    visibility var(--transition-base);
  overflow-y: auto;
}

.mobile-menu.is-open {
  opacity: 1;
  transform: translateY(0);
  visibility: visible;
  pointer-events: auto;
}

.mobile-menu a {
  font-family: var(--font-heading);
  font-size: var(--fs-lg);
  display: block;
  padding-block: var(--space-2xs);
  border-bottom: 1px solid var(--color-border);
}

.mobile-menu .btn {
  margin-top: var(--space-xs);
  align-self: stretch;
  width: 100%;
  justify-content: center;
  white-space: normal;
  text-align: center;
}

@media (min-width: 900px) {
  .nav-links {
    display: flex;
  }
  .lang-switch {
    display: flex;
  }
  .nav-cta {
    display: inline-flex;
  }
  .nav-toggle {
    display: none;
  }
  .mobile-menu {
    display: none;
  }
}

/* -------------------------------------------------------------------------
   7. HERO
   ------------------------------------------------------------------------- */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  padding-block: var(--space-xl) calc(var(--space-xl) * 1.1);
  color: var(--color-text-inverse);
}

@media (max-height: 640px) {
  .hero {
    min-height: 100vh;
  }
}

@media (max-width: 599px) {
  .hero {
    padding-top: max(var(--space-xl), calc(var(--header-height) + var(--space-md)));
  }
}

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

.hero-media video,
.hero-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Sophisticated warm-brown overlay — strong enough for text contrast,
   tuned toward the beige/brown palette rather than flat black */
.hero-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(0deg, rgba(26, 20, 14, 0.78) 0%, rgba(32, 24, 16, 0.42) 42%, rgba(38, 28, 18, 0.22) 68%, rgba(44, 32, 20, 0.32) 100%),
    linear-gradient(90deg, rgba(20, 15, 10, 0.35) 0%, rgba(20, 15, 10, 0) 55%);
  pointer-events: none;
}

.hero-grid {
  position: relative;
  z-index: 1;
  width: 100%;
}

.hero-content {
  max-width: 42rem;
}

@media (min-width: 900px) {
  .hero-content {
    max-width: 54rem;
  }
}

.hero-content h1 {
  font-size: clamp(2.2rem, 1.4rem + 3.6vw, 4.1rem);
  line-height: 1.08;
  letter-spacing: -0.025em;
  margin-bottom: var(--space-md);
  max-width: 26ch;
  color: var(--color-text-inverse);
}

.hero-content .lede {
  max-width: 44ch;
  margin-bottom: var(--space-lg);
  color: var(--color-text-inverse-muted);
}

/* Flow statement — quiet editorial typography, not a UI widget.
   Default (muted-dark) works on light sections; .hero overrides to
   a light tone for its dark video overlay. */
.flow-statement {
  margin-top: var(--space-lg);
  font-size: var(--fs-sm);
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--color-text-muted);
}

.flow-statement .sep {
  color: var(--color-border-strong);
  margin-inline: 0.5em;
}

/* Zero-width spaces around each arrow give the browser a real line-break
   opportunity between words (e.g. after "Annoncering", before "CRM")
   without ever breaking inside a word — and without adding any visible
   character or touching the copy itself. */
.flow-statement .sep::before,
.flow-statement .sep::after {
  content: "\200B";
}

@media (max-width: 599px) {
  /* Backstop only, in case a single segment is ever still too long for
     the viewport even with the word-boundary breaks above — this should
     rarely if ever trigger now. */
  .flow-statement {
    overflow-wrap: anywhere;
    word-break: normal;
    max-width: 100%;
  }
}

.hero .flow-statement {
  font-size: var(--fs-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(246, 244, 239, 0.65);
}

@media (max-width: 599px) {
  /* The word/arrow run has no whitespace between segments, so without
     this the browser has no natural break point and the line can run
     past the viewport edge. overflow-wrap:anywhere lets it wrap only
     where actually needed to stay inside the container. */
  .hero .flow-statement {
    overflow-wrap: anywhere;
    word-break: normal;
    max-width: 100%;
  }
}

.hero .flow-statement .sep {
  color: rgba(246, 244, 239, 0.35);
}

.hero .btn-secondary,
.hero .text-link {
  color: var(--color-text-inverse);
  border-color: rgba(246, 244, 239, 0.4);
}

.hero .text-link:hover {
  color: var(--color-text-inverse);
  border-color: var(--color-text-inverse);
}

/* -------------------------------------------------------------------------
   8. LOGO-SHOWCASE (ELFSIGHT)
   ------------------------------------------------------------------------- */
.logo-showcase-wrap {
  min-height: 140px;
}

.widget-frame {
  min-height: 140px;
  display: flex;
  align-items: center;
  justify-content: center;
}

@media (max-width: 767px) {
  /* Only the outer wrapper is touched here — the empty space was this
     section's own top/bottom padding plus the 140px min-height carried
     over from .widget-frame's desktop rule. Reaching further in and
     forcing height/gap/margin on the widget's own internal markup was
     tried and reverted: Elfsight sizes its logo cards itself, and
     overriding that from outside clipped the cards instead of just
     tightening whitespace. Leave its internal DOM alone. */
  .logo-showcase-wrap {
    padding-top: var(--space-xs);
    padding-bottom: var(--space-xs);
    min-height: 0;
  }

  .widget-frame {
    min-height: 0;
  }
}

/* -------------------------------------------------------------------------
   9. PROBLEM-SEKTION
   ------------------------------------------------------------------------- */
.problem-grid {
  display: grid;
  gap: var(--space-lg);
}

@media (min-width: 900px) {
  .problem-grid {
    grid-template-columns: 0.9fr 1.1fr;
  }
}

/* "De mangler et system" — wide, left-aligned editorial layout.
   Heading + flow line anchor one column; the explanation runs in a
   second, wider-measure column — not one narrow centered block. */
.problem-layout {
  display: grid;
  gap: var(--space-lg);
  text-align: left;
}

.problem-heading-col,
.problem-body-col {
  min-width: 0;
}

@media (min-width: 900px) {
  .problem-layout {
    grid-template-columns: 0.85fr 1.15fr;
    gap: var(--space-xl);
    align-items: start;
  }
}

.problem-intro {
  font-size: var(--fs-md);
  color: var(--color-text-muted);
  margin-bottom: var(--space-xs);
}

.problem-heading {
  font-size: clamp(2.2rem, 1.8rem + 2.2vw, 3.6rem);
  line-height: 1.05;
  margin-bottom: var(--space-md);
  max-width: 12ch;
}

.problem-body-col p {
  max-width: 62ch;
  margin-bottom: var(--space-sm);
}

.problem-closing {
  margin-top: var(--space-md);
  font-size: var(--fs-lg);
  font-weight: 600;
  line-height: 1.4;
  color: var(--color-text);
  max-width: 48ch;
}

/* -------------------------------------------------------------------------
   10. YDELSER
   ------------------------------------------------------------------------- */
.service-card {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-md);
  background: var(--color-surface);
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  height: 100%;
  transition: border-color var(--transition-base), transform var(--transition-base);
}

.service-card:hover {
  border-color: var(--color-accent);
  transform: translateY(-3px);
}

.service-icon {
  width: 46px;
  height: 46px;
  border-radius: var(--radius-sm);
  background: var(--color-accent-soft);
  color: var(--color-accent);
  display: flex;
  align-items: center;
  justify-content: center;
}

.service-icon svg {
  width: 24px;
  height: 24px;
}

.service-value {
  margin-top: auto;
  padding-top: var(--space-xs);
  border-top: 1px solid var(--color-border);
  font-size: var(--fs-sm);
  color: var(--color-text);
}

.service-value strong {
  color: var(--color-accent);
}

/* Homepage services — numbered editorial index, not icon cards.
   Typography and thin dividers do the work instead of bordered
   boxes/accent-colored bullets. */
.service-index {
  border-top: 1px solid var(--color-border);
}

.service-index-item {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-xs);
  padding-block: var(--space-md);
  border-bottom: 1px solid var(--color-border);
}

.service-index-value {
  width: 100%;
}

@media (min-width: 768px) {
  .service-index-item {
    grid-template-columns: 3.5rem 1fr 1fr;
    align-items: baseline;
    gap: var(--space-lg);
  }
}

.service-index-num {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: var(--fs-md);
  color: var(--color-accent);
}

.service-index-item h3 {
  font-size: var(--fs-md);
  margin-bottom: 0.35em;
}

.service-index-item p {
  font-size: var(--fs-sm);
}

.service-index-value {
  font-size: var(--fs-sm);
  color: var(--color-text);
}

.service-index-value strong {
  color: var(--color-accent);
}

/* Udvidet ydelses-sektion (ydelser.html) */
.service-detail {
  border-bottom: 1px solid var(--color-border);
  padding-block: var(--space-lg);
  display: grid;
  gap: var(--space-md);
}

.service-detail:first-of-type {
  padding-top: 0;
}

.service-detail:last-of-type {
  border-bottom: none;
}

@media (min-width: 900px) {
  .service-detail {
    grid-template-columns: 0.9fr 1.1fr;
    gap: var(--space-xl);
  }
  /* Photo-led services break the two-column text grid — the photo-band
     inside handles its own layout, full width, for visual variety */
  .service-detail-featured {
    display: block;
  }
}

.service-detail-list {
  display: grid;
  gap: var(--space-sm);
}

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

.service-detail-list h4 {
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-accent);
  margin-bottom: 0.5em;
}

.service-detail-list ul {
  display: flex;
  flex-direction: column;
  gap: 0.4em;
}

.service-detail-list li {
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
  padding-left: 1.1em;
  position: relative;
}

.service-detail-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.75em;
  width: 10px;
  height: 1px;
  background: var(--color-border-strong);
}

/* -------------------------------------------------------------------------
   11. CASES
   ------------------------------------------------------------------------- */

/* Homepage teaser: 1 flagship + 4 in a grid — editorial photography,
   no cards, no borders, no shadows. Caption sits in normal flow below
   each image, never overlaid on the photograph. */
.case-flagship {
  margin-bottom: var(--space-xl);
  display: grid;
  gap: var(--space-lg);
}

@media (min-width: 900px) {
  .case-flagship {
    /* Asymmetric split — portrait video/photo on one side, rich
       proof content on the other. Varied composition vs. the grid below. */
    grid-template-columns: 0.85fr 1.15fr;
    align-items: center;
    gap: var(--space-xl);
  }
}

.case-flagship-media {
  /* This is an <a> — anchors are inline by default, and aspect-ratio
     has no effect on inline boxes. Without display:block the media
     column collapses to its text baseline height and the caption
     column overlaps it. */
  display: block;
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--color-bg-alt);
}

.case-flagship-media video,
.case-flagship-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.8s ease;
  display: block;
}

/* Portrait source video (e.g. Shapeit, shot 9:16) — show the full frame,
   never crop it to fit a landscape-ish box. The container matches the
   real aspect ratio, so contain needs no letterboxing in practice, but
   it's there as a safety net against any rounding. Selectors are
   doubled-up with the parent media class so this reliably wins over
   the cover/aspect-ratio rules defined later for those same classes. */
.media-contain-portrait {
  aspect-ratio: 9 / 16;
  background: var(--color-bg-dark);
}

.case-flagship-media.media-contain-portrait,
.case-story-media.media-contain-portrait,
.case-tease-media.media-contain-portrait {
  aspect-ratio: 9 / 16;
  background: var(--color-bg-dark);
}

.case-flagship-media.media-contain-portrait video,
.case-flagship-media.media-contain-portrait img,
.case-story-media.media-contain-portrait video,
.case-story-media.media-contain-portrait img,
.case-tease-media.media-contain-portrait video,
.case-tease-media.media-contain-portrait img {
  object-fit: contain;
}

.case-flagship:hover .case-flagship-media video,
.case-flagship:hover .case-flagship-media img {
  transform: scale(1.04);
}

.case-flagship-caption {
  max-width: 60ch;
}

.case-kicker {
  display: block;
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: 0.5em;
}

.case-flagship-caption h3 {
  font-size: clamp(1.6rem, 1.4rem + 1vw, 2.1rem);
  margin-bottom: 0.5em;
}

/* Bare typographic stats — no cards, no borders. Numbers are set in the
   body sans at a confident weight (not the display serif) so they read
   as clean modern data, not decorative type — and stay visually
   subordinate to the case headline above them. */
.stat-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-lg);
  margin-block: var(--space-sm) var(--space-md);
  padding-top: var(--space-sm);
  border-top: 1px solid var(--color-border);
}

.stat-row .stat {
  display: flex;
  flex-direction: column;
}

.stat-row .stat strong {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: clamp(1.5rem, 1.3rem + 0.9vw, 2rem);
  letter-spacing: -0.01em;
  color: var(--color-accent);
  line-height: 1;
}

.stat-row .stat span {
  margin-top: 0.4em;
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.case-flagship-caption .case-mini-quote {
  font-style: italic;
  color: var(--color-text);
  margin-bottom: var(--space-md);
}

.case-tease-grid {
  display: grid;
  gap: var(--space-lg) var(--space-md);
}

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

.case-tease-media {
  /* Same fix as .case-flagship-media: this is an <a>, inline by
     default, and aspect-ratio doesn't apply to inline boxes — without
     display:block the card collapses and the caption overlaps it. */
  display: block;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--color-bg-alt);
}

.case-tease-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.8s ease;
}

.case-tease:hover .case-tease-media img {
  transform: scale(1.04);
}

.case-tease-caption {
  margin-top: var(--space-sm);
}

.case-tease-caption h3 {
  font-size: var(--fs-md);
  margin-bottom: 0.3em;
}

.case-tease-caption p {
  margin-bottom: 0.6em;
}

.case-tease-placeholder {
  aspect-ratio: 4 / 3;
  background: var(--color-bg-alt);
  border: 1.5px dashed var(--color-border-strong);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-muted);
  font-size: var(--fs-xs);
  text-align: center;
  padding: var(--space-sm);
}

/* Legacy per-case block, still used on cases.html */
.case-image {
  aspect-ratio: 16 / 10;
  background: var(--color-bg-alt);
  border-bottom: 1px solid var(--color-border);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-muted);
  font-size: var(--fs-xs);
  text-align: center;
  padding: var(--space-xs);
}

.case-quote {
  margin-top: var(--space-xs);
  padding: var(--space-xs) var(--space-sm);
  background: var(--color-bg-alt);
  border-radius: var(--radius-sm);
  font-style: italic;
  font-size: var(--fs-sm);
}

/* Editorial case-study layout — no cards, no borders, no shadows.
   Large photography/video, sequential narrative, generous whitespace. */
.case-story {
  padding-block: var(--space-xl);
  border-bottom: 1px solid var(--color-border);
}

.case-story:first-of-type {
  padding-top: 0;
}

.case-story:last-of-type {
  border-bottom: none;
}

.case-story-header {
  max-width: 70ch;
  margin-bottom: var(--space-lg);
}

.case-story-header h2 {
  font-size: clamp(2rem, 1.7rem + 1.4vw, 3rem);
  margin-bottom: var(--space-sm);
}

/* Shapeit-style featured case: asymmetric split, video dominant */
.case-story-split {
  display: grid;
  gap: var(--space-lg);
  align-items: start;
}

@media (min-width: 900px) {
  .case-story-split {
    grid-template-columns: 0.85fr 1.15fr;
    gap: var(--space-xl);
  }
}

.case-story-media {
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--color-bg-alt);
}

.case-story-media.wide {
  aspect-ratio: 16 / 10;
}

.case-story-media video,
.case-story-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Two-up gallery for cases with more than one real photo (varied sizes) */
.case-story-gallery {
  display: grid;
  gap: var(--space-sm);
  grid-template-columns: 1.3fr 1fr;
}

.case-story-gallery .case-story-media:first-child {
  aspect-ratio: 4 / 5;
}

.case-story-gallery .case-story-media:last-child {
  aspect-ratio: 3 / 4;
}

@media (max-width: 639px) {
  .case-story-gallery {
    grid-template-columns: 1fr;
  }
}

/* Even split variant: two images, different aspect ratios per side */
.case-story-gallery.gallery-even {
  grid-template-columns: 1fr 1fr;
}

.case-story-gallery.gallery-even .case-story-media:first-child {
  aspect-ratio: 3 / 4;
}

.case-story-gallery.gallery-even .case-story-media:last-child {
  aspect-ratio: 4 / 5;
}

/* Offset variant: second image staggered down for editorial rhythm */
.case-story-gallery.gallery-offset .case-story-media:last-child {
  margin-top: var(--space-xl);
}

/* Reverse variant: second image is dominant instead of the first */
.case-story-gallery.gallery-reverse {
  grid-template-columns: 1fr 1.3fr;
}

.case-story-gallery.gallery-reverse .case-story-media:first-child {
  aspect-ratio: 3 / 4;
}

.case-story-gallery.gallery-reverse .case-story-media:last-child {
  aspect-ratio: 4 / 5;
}

@media (max-width: 639px) {
  .case-story-gallery.gallery-even,
  .case-story-gallery.gallery-reverse {
    grid-template-columns: 1fr;
  }
  .case-story-gallery.gallery-offset .case-story-media:last-child {
    margin-top: 0;
  }
}

.case-story-body {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.case-story-body h4 {
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-accent);
  margin-bottom: 0.35em;
}

.case-story-quote {
  font-family: var(--font-heading);
  font-size: var(--fs-lg);
  line-height: 1.4;
  font-style: italic;
}

.case-story-quote cite {
  display: block;
  margin-top: var(--space-xs);
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  font-style: normal;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

/* Lighter treatment for cases without full narrative yet */
.case-story-simple {
  margin-top: var(--space-lg);
}

.case-story-simple .case-story-media {
  margin-bottom: var(--space-md);
}

/* -------------------------------------------------------------------------
   12. PROCES
   ------------------------------------------------------------------------- */
.process-list {
  display: grid;
  gap: var(--space-md);
  counter-reset: step;
}

@media (min-width: 900px) {
  .process-list {
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-sm);
  }
}

.process-step {
  position: relative;
  padding: var(--space-md) var(--space-sm) var(--space-sm);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
}

.process-step .step-number {
  font-family: var(--font-heading);
  font-size: var(--fs-lg);
  color: var(--color-accent);
  display: block;
  margin-bottom: var(--space-xs);
}

@media (min-width: 900px) {
  .process-list::before {
    content: "";
    grid-column: 1 / -1;
  }
}

/* -------------------------------------------------------------------------
   13. OM STIFTEREN
   ------------------------------------------------------------------------- */
.founder-grid {
  display: grid;
  gap: var(--space-lg);
  align-items: center;
}

@media (min-width: 900px) {
  .founder-grid {
    grid-template-columns: 0.8fr 1.2fr;
    gap: var(--space-xl);
  }
}

.founder-media .media-frame {
  aspect-ratio: 3 / 4;
  overflow: hidden;
  background: var(--color-bg-alt);
}

.founder-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.founder-quote {
  font-family: var(--font-heading);
  font-size: var(--fs-lg);
  line-height: 1.35;
  color: var(--color-text);
  margin-block: var(--space-sm);
}

@media (max-width: 599px) {
  .founder-grid h2 {
    line-height: 1.2;
    margin-bottom: var(--space-xs);
  }

  .founder-quote {
    line-height: 1.45;
    margin-block: var(--space-xs);
  }

  .founder-grid > div > p {
    line-height: 1.6;
    margin-bottom: var(--space-sm);
  }
}

.founder-facts {
  display: grid;
  gap: var(--space-sm);
  margin-top: var(--space-md);
}

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

.founder-facts h4 {
  font-size: var(--fs-sm);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-accent);
  margin-bottom: 0.4em;
}

.founder-facts p {
  font-size: var(--fs-sm);
}

/* Reusable asymmetric photo + text band — used to place real photography
   in About / Ydelser / Process / Kontakt without turning every section
   into a card grid. No borders, no shadows, editorial crop only. */
.photo-band {
  display: grid;
  gap: var(--space-lg);
  align-items: center;
}

@media (min-width: 900px) {
  .photo-band {
    grid-template-columns: 0.9fr 1.1fr;
    gap: var(--space-xl);
  }
  .photo-band.reverse .photo-band-media {
    order: 2;
  }
}

.photo-band-media {
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--color-bg-alt);
}

.photo-band-media.landscape {
  aspect-ratio: 3 / 2;
}

.photo-band-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.photo-band-text {
  max-width: 60ch;
}

/* -------------------------------------------------------------------------
   13B. TEAM (MENNESKERNE BAG)
   ------------------------------------------------------------------------- */
.team-grid {
  grid-template-columns: 1fr;
}

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

@media (min-width: 900px) {
  .team-grid {
    grid-template-columns: repeat(3, 220px);
    justify-content: center;
  }
}

.team-card-media {
  aspect-ratio: 3 / 4;
  overflow: hidden;
  border-radius: var(--radius-lg);
  background: var(--color-bg-alt);
}

.team-card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.team-card-body {
  margin-top: var(--space-sm);
}

.team-card-name {
  font-family: var(--font-heading);
  font-size: var(--fs-md);
  font-weight: 400;
  color: var(--color-text);
}

.team-card-title {
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
  margin-top: 0.2em;
}

.team-card-bio {
  font-size: var(--fs-sm);
  margin-top: var(--space-xs);
}

.team-card-bio:empty {
  display: none;
}

/* -------------------------------------------------------------------------
   14. ANBEFALINGER (EGEN SLIDER)
   Erstatter det tidligere Common Ninja-widget. Alle slides ligger i
   DOM'en samtidig i en flex-række uden wrap, så rækkens højde altid
   svarer til det højeste citat — det er det, der forhindrer siden i
   at "hoppe" når man skifter slide, uden at vi skal måle højder i JS.
   ------------------------------------------------------------------------- */
.testimonial-slider:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 6px;
  border-radius: var(--radius-sm);
}

.testimonial-controls {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
}

.testimonial-viewport {
  flex: 1;
  min-width: 0;
  overflow: hidden;
}

.testimonial-track {
  display: flex;
  align-items: stretch;
  transition: transform var(--transition-base);
}

@media (prefers-reduced-motion: reduce) {
  .testimonial-track {
    transition: none;
  }
}

.testimonial-slide {
  flex: 0 0 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: var(--space-sm);
  padding: var(--space-sm) var(--space-xs);
  margin: 0;
}

.testimonial-stars {
  display: flex;
  gap: 0.2em;
  color: var(--color-accent);
}

.testimonial-stars svg {
  width: 20px;
  height: 20px;
  fill: currentColor;
}

.testimonial-quote {
  margin: 0;
  max-width: 60ch;
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.testimonial-quote p {
  color: var(--color-text);
  font-size: var(--fs-md);
  line-height: 1.55;
}

.testimonial-author {
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
}

.testimonial-name {
  font-weight: 600;
}

.testimonial-arrow {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid var(--color-border-strong);
  background: var(--color-surface);
  color: var(--color-text);
  cursor: pointer;
  transition: border-color var(--transition-fast), color var(--transition-fast);
}

.testimonial-arrow svg {
  width: 18px;
  height: 18px;
}

.testimonial-arrow:hover {
  border-color: var(--color-accent);
  color: var(--color-accent);
}

.testimonial-dots {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--space-2xs);
  margin-top: var(--space-md);
}

.testimonial-dot {
  width: 9px;
  height: 9px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--color-border-strong);
  cursor: pointer;
  transition: background var(--transition-fast), transform var(--transition-fast);
}

.testimonial-dot:hover {
  background: var(--color-accent);
}

.testimonial-dot.is-active {
  background: var(--color-accent);
  transform: scale(1.2);
}

@media (max-width: 599px) {
  .testimonial-controls {
    gap: var(--space-2xs);
  }

  .testimonial-arrow {
    width: 34px;
    height: 34px;
  }

  .testimonial-quote p {
    font-size: var(--fs-base);
  }
}

/* -------------------------------------------------------------------------
   AI CONTENT SHOWCASE — editorial horizontal scroll, native snap,
   varied ratios, no e-commerce-carousel chrome (no dot indicators,
   no boxed arrows sitting on top of images).
   ------------------------------------------------------------------------- */
.ai-showcase-track {
  display: flex;
  gap: var(--space-md);
  overflow-x: auto;
  scroll-snap-type: x proximity;
  padding-bottom: var(--space-sm);
  margin-top: var(--space-lg);
  scrollbar-width: thin;
  scrollbar-color: var(--color-border-strong) transparent;
}

.ai-showcase-track::-webkit-scrollbar {
  height: 6px;
}

.ai-showcase-track::-webkit-scrollbar-thumb {
  background: var(--color-border-strong);
  border-radius: 999px;
}

.ai-showcase-item {
  flex: 0 0 auto;
  scroll-snap-align: start;
  width: clamp(220px, 30vw, 320px);
  overflow: hidden;
  background: var(--color-bg-alt);
  transition: transform 0.6s ease;
}

.ai-showcase-item.is-wide {
  width: clamp(300px, 42vw, 460px);
}

.ai-showcase-item.ratio-portrait {
  aspect-ratio: 4 / 5;
}

.ai-showcase-item.ratio-square {
  aspect-ratio: 1 / 1;
}

.ai-showcase-item.ratio-landscape {
  aspect-ratio: 16 / 10;
}

.ai-showcase-item.ratio-tall {
  aspect-ratio: 9 / 16;
  width: clamp(200px, 24vw, 260px);
}

@media (max-width: 599px) {
  /* Below ~600px the 30vw/24vw components never exceed their floor, so
     every item renders at a flat, cramped 220px/200px regardless of
     phone size. Scale to the actual viewport instead so a 320px phone
     and a 430px phone each get a proportionate, comfortable item. */
  .ai-showcase-item {
    width: min(78vw, 320px);
  }

  .ai-showcase-item.ratio-tall {
    width: min(60vw, 260px);
  }

  .ai-showcase-track {
    gap: var(--space-sm);
  }
}

.ai-showcase-item img,
.ai-showcase-item video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 1.6s ease;
}

.ai-showcase-item:hover img,
.ai-showcase-item:hover video {
  transform: scale(1.03);
}

.ai-showcase-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--space-sm);
  border: 1.5px dashed var(--color-border-strong);
  color: var(--color-text-muted);
  font-size: var(--fs-xs);
}

.ai-showcase-hint {
  margin-top: var(--space-xs);
  font-size: var(--fs-xs);
  color: var(--color-text-muted);
}

/* -------------------------------------------------------------------------
   15. FAQ
   ------------------------------------------------------------------------- */
.faq-list {
  border-top: 1px solid var(--color-border);
}

.faq-item {
  border-bottom: 1px solid var(--color-border);
}

.faq-question {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  padding-block: var(--space-sm);
  text-align: left;
  font-family: var(--font-heading);
  font-size: var(--fs-md);
  color: var(--color-text);
}

.faq-question .icon {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  position: relative;
}

.faq-question .icon::before,
.faq-question .icon::after {
  content: "";
  position: absolute;
  background: var(--color-accent);
  border-radius: 2px;
  transition: transform var(--transition-base), opacity var(--transition-base);
}

.faq-question .icon::before {
  top: 50%;
  left: 0;
  width: 100%;
  height: 2px;
  transform: translateY(-50%);
}

.faq-question .icon::after {
  top: 0;
  left: 50%;
  width: 2px;
  height: 100%;
  transform: translateX(-50%);
}

.faq-question[aria-expanded="true"] .icon::after {
  transform: translateX(-50%) rotate(90deg);
  opacity: 0;
}

.faq-answer {
  overflow: hidden;
  max-height: 0;
  transition: max-height var(--transition-base) ease;
}

.faq-answer p {
  padding-bottom: var(--space-sm);
  max-width: 65ch;
}

/* -------------------------------------------------------------------------
   16. AFSLUTTENDE CTA
   ------------------------------------------------------------------------- */
.final-cta {
  text-align: center;
}

.final-cta .container-narrow {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-sm);
}

.final-cta .cta-group {
  justify-content: center;
  margin-top: var(--space-xs);
}

/* -------------------------------------------------------------------------
   17. FOOTER
   ------------------------------------------------------------------------- */
.site-footer {
  background: var(--color-bg-dark);
  color: rgba(246, 244, 239, 0.82);
  padding-block: var(--space-lg) var(--space-md);
}

.footer-grid {
  display: grid;
  gap: var(--space-lg);
}

@media (min-width: 768px) {
  .footer-grid {
    grid-template-columns: 1.4fr 0.8fr 0.8fr 1fr;
  }
}

.footer-brand .logo {
  color: var(--color-text-inverse);
  margin-bottom: var(--space-xs);
}

.footer-brand .logo span {
  color: var(--color-text-inverse);
}

.footer-brand p {
  max-width: 34ch;
  font-size: var(--fs-base);
  line-height: 1.6;
  color: rgba(246, 244, 239, 0.82);
}

.footer-col h4 {
  color: var(--color-text-inverse);
  font-size: var(--fs-sm);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: var(--space-xs);
}

.footer-col ul {
  display: flex;
  flex-direction: column;
  gap: 0.6em;
}

.footer-col ul {
  color: rgba(246, 244, 239, 0.82);
}

.footer-col ul li {
  font-size: var(--fs-sm);
  line-height: 1.5;
}

.footer-col a {
  font-size: var(--fs-sm);
  color: rgba(246, 244, 239, 0.82);
  transition: color var(--transition-fast);
}

.footer-col a:hover {
  color: var(--color-text-inverse);
}

.footer-social {
  display: flex;
  gap: var(--space-xs);
  margin-top: var(--space-xs);
}

.footer-social a {
  width: 36px;
  height: 36px;
  border: 1px solid rgba(246, 244, 239, 0.25);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color var(--transition-fast), background var(--transition-fast);
}

.footer-social a:hover {
  border-color: var(--color-text-inverse);
  background: rgba(246, 244, 239, 0.12);
}

.footer-social svg {
  width: 16px;
  height: 16px;
}

.footer-bottom {
  margin-top: var(--space-lg);
  padding-top: var(--space-sm);
  border-top: 1px solid rgba(246, 244, 239, 0.12);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
  justify-content: space-between;
  font-size: var(--fs-xs);
}

/* -------------------------------------------------------------------------
   18. UNDERSIDER
   ------------------------------------------------------------------------- */

/* Page hero (til undersider) */
.page-hero {
  padding-block: var(--space-lg);
  border-bottom: 1px solid var(--color-border);
}

.page-hero .eyebrow {
  margin-bottom: var(--space-xs);
}

.page-hero .lede {
  max-width: 60ch;
  margin-top: var(--space-sm);
}

/* -------------------------------------------------------------------------
   SUBPAGE VIDEO HEROES — three deliberately different compositions using
   the same source footage, so each page feels like a different window
   into the same world rather than a repeated template. All stay subtle
   enough that the page heading remains the dominant element.
   ------------------------------------------------------------------------- */

/* Variant 1: full-bleed background (Ydelser, Kontakt) — shorter than the
   homepage hero, headline stays inverse-colored over a dark overlay */
.page-hero-video {
  position: relative;
  overflow: hidden;
  min-height: 52vh;
  display: flex;
  align-items: center;
  border-bottom: none;
  color: var(--color-text-inverse);
}

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

.page-hero-video .page-hero-media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.page-hero-video .page-hero-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(26, 20, 14, 0.62), rgba(26, 20, 14, 0.78));
}

.page-hero-video .container {
  position: relative;
  z-index: 1;
}

.page-hero-video .eyebrow {
  color: rgba(246, 244, 239, 0.65);
}

.page-hero-video h1 {
  color: var(--color-text-inverse);
}

.page-hero-video .lede {
  color: var(--color-text-inverse-muted);
}

.page-hero-video.is-centered {
  text-align: center;
  min-height: 44vh;
}

.page-hero-video.is-centered .lede {
  margin-inline: auto;
}

/* Variant 2: contained band above the heading (Cases) — page stays on
   the normal light background, video is a quiet supporting strip */
.page-hero-band-media {
  aspect-ratio: 21 / 9;
  overflow: hidden;
  margin-bottom: var(--space-lg);
  background: var(--color-bg-dark);
}

.page-hero-band-media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Variant 3: text + contained video side by side (Om os) */
.page-hero-split-grid {
  display: grid;
  gap: var(--space-lg);
  align-items: center;
}

@media (min-width: 900px) {
  .page-hero-split-grid {
    grid-template-columns: 1.1fr 0.9fr;
    gap: var(--space-xl);
  }
}

.page-hero-split-media {
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--color-bg-alt);
}

.page-hero-split-media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.breadcrumb-back {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
  margin-bottom: var(--space-sm);
}

.breadcrumb-back:hover {
  color: var(--color-accent);
}

/* Booking-side */
.booking-layout {
  display: grid;
  gap: var(--space-lg);
}

@media (min-width: 960px) {
  .booking-layout {
    grid-template-columns: 0.85fr 1.15fr;
    align-items: start;
  }
}

.booking-points {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  margin-block: var(--space-md);
}

.booking-point {
  display: flex;
  gap: var(--space-xs);
  align-items: flex-start;
}

.booking-point .num {
  font-family: var(--font-heading);
  font-size: var(--fs-md);
  color: var(--color-accent);
  flex-shrink: 0;
  width: 2ch;
}

.booking-reassurance {
  display: flex;
  align-items: center;
  gap: 0.6em;
  font-size: var(--fs-sm);
  padding: var(--space-xs) var(--space-sm);
  background: var(--color-accent-soft);
  border-radius: var(--radius-md);
  margin-top: var(--space-md);
}

.calendly-frame {
  min-height: 700px;
  height: 100%;
}

.embed-placeholder {
  border: 1.5px dashed var(--color-border-strong);
  border-radius: var(--radius-lg);
  background: var(--color-bg-alt);
  min-height: 480px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--space-lg);
}

.embed-placeholder-inner {
  max-width: 40ch;
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  align-items: center;
}

.embed-placeholder.form-placeholder {
  min-height: 320px;
}

/* Premium contact form — ready for a GoHighLevel connection, see the
   HTML comment above the <form> in kontakt.html for the integration point */
.contact-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.form-row {
  display: flex;
  flex-direction: column;
  gap: 0.4em;
}

.form-row label {
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.form-row input,
.form-row textarea {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 0.8em 1em;
  background: var(--color-surface);
  font-size: var(--fs-base);
  color: var(--color-text);
  transition: border-color var(--transition-fast);
}

.form-row input:focus,
.form-row textarea:focus {
  border-color: var(--color-accent);
  outline: none;
}

.form-row textarea {
  resize: vertical;
  min-height: 100px;
}

.contact-form .btn {
  margin-top: var(--space-xs);
}

.contact-form-status {
  font-size: var(--fs-sm);
  color: var(--color-accent);
  min-height: 1.2em;
}

.contact-details {
  margin-top: var(--space-md);
  display: grid;
  gap: 0.6em;
  font-size: var(--fs-sm);
}

.contact-details dt {
  font-weight: 700;
  color: var(--color-accent);
  display: inline;
}

.contact-details dd {
  display: inline;
  margin-left: 0.4em;
}

.contact-details div {
  display: flex;
  gap: 0.3em;
}

/* Privatlivspolitik */
.policy-section {
  padding-block: var(--space-md);
  border-bottom: 1px solid var(--color-border);
}

.policy-section:last-child {
  border-bottom: none;
}

.policy-section h2 {
  font-size: var(--fs-lg);
  margin-bottom: var(--space-xs);
}

.policy-section p,
.policy-section li {
  font-size: var(--fs-sm);
  max-width: 72ch;
}

.policy-section ul {
  display: flex;
  flex-direction: column;
  gap: 0.5em;
  margin-top: var(--space-xs);
}

.policy-section li {
  padding-left: 1.2em;
  position: relative;
}

.policy-section li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--color-text-muted);
}

.placeholder-tag {
  font-family: var(--font-body);
  font-weight: 700;
  color: var(--color-text);
  background: var(--color-bg-alt);
  border: 1px dashed var(--color-border-strong);
  padding: 0.05em 0.4em;
  border-radius: 4px;
  font-size: 0.92em;
}

.policy-toc {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5em;
  margin-block: var(--space-md);
}

.policy-toc a {
  font-size: var(--fs-xs);
  border: 1px solid var(--color-border);
  border-radius: 999px;
  padding: 0.5em 1em;
}

.policy-toc a:hover {
  border-color: var(--color-accent);
  color: var(--color-accent);
}

/* Om-siden: netværk/team */
.network-grid {
  display: grid;
  gap: var(--space-sm);
}

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

.network-card {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-sm);
  background: var(--color-surface);
}

/* -------------------------------------------------------------------------
   19. REDUCED MOTION
   ------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .reveal {
    opacity: 1;
    transform: none;
  }
}

/* -------------------------------------------------------------------------
   20. MOBILE-ONLY GLOBAL SAFETY NET
   Desktop (600px+) is untouched by everything in this section.
   ------------------------------------------------------------------------- */
@media (max-width: 599px) {
  /* Backstop only — the actual overflow sources (unbreakable flow-statement
     run, etc.) are fixed at their origin above. This just guarantees a
     stray future regression can't create a horizontal scrollbar. */
  html,
  body {
    overflow-x: hidden;
  }

  /* Comfortable tap targets */
  .nav-toggle {
    width: 44px;
    height: 44px;
  }

  .footer-social a {
    width: 44px;
    height: 44px;
  }

  .policy-toc a {
    padding: 0.65em 1.1em;
  }
}