/* Headeren, som trionn gør det.
   Den er gennemsigtig og bruger mix-blend-mode: difference, så den inverterer
   sig selv mod hvad der end ligger bag. Den skifter aldrig tilstand og har
   ingen scroll-lytter: over sort bliver hvid til hvid, over bone bliver hvid
   til næsten sort. Alt indhold i baren SKAL derfor være rent hvidt for at
   inversionen regner rigtigt. */
.hdr {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 60;
  height: var(--hdr-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-inline: var(--gut);
  mix-blend-mode: difference;
  color: #fff;
  pointer-events: none;
}
.hdr > * {
  pointer-events: auto;
}

.hdr__brand {
  display: flex;
  align-items: center;
}
.hdr__logo {
  display: block;
  height: 1.35rem;
  width: auto;
}

.hdr__end {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

/* Piller. Den massive inverterer med sin egen tekst, hvilket er hele pointen:
   hvid pille med sort tekst på mørk baggrund, sort pille med hvid tekst på lys. */
.hdr__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-pill);
  background: #fff;
  color: #000;
  border: 1px solid #fff;
  padding: 0.68em 1.4em;
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  transition:
    background-color 300ms var(--ease),
    border-color 300ms var(--ease);
}
.hdr__cta:hover {
  background: rgba(255, 255, 255, 0.8);
  border-color: rgba(255, 255, 255, 0.8);
}
.hdr__menu {
  display: inline-flex;
  align-items: center;
  gap: 0.75em;
  border-radius: var(--r-pill);
  border: 1px solid #fff;
  background: transparent;
  color: #fff;
  padding: 0.68em 1.3em;
  font-family: var(--sans);
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  transition: border-color 300ms var(--ease);
}
.hdr__menu:hover {
  border-color: rgba(255, 255, 255, 0.6);
}
.hdr__bars {
  display: grid;
  gap: 3px;
  width: 14px;
}
.hdr__bars span {
  display: block;
  height: 1px;
  background: currentColor;
  transition: transform 300ms var(--ease);
}
.hdr__menu[aria-expanded="true"] .hdr__bars span:first-child {
  transform: translateY(2px) rotate(45deg);
}
.hdr__menu[aria-expanded="true"] .hdr__bars span:last-child {
  transform: translateY(-2px) rotate(-45deg);
}

/* ---------- char scramble (shared) ---------- */

.nav-link {
  position: relative;
  display: inline-flex;
  line-height: 1;
  cursor: pointer;
  overflow: visible;
  user-select: none;
}
.nav-link .text-layer {
  display: inline-flex;
}
.nav-link .text-layer.clone {
  position: absolute;
  left: 0;
  top: 0;
  pointer-events: none;
}
.nav-link .text-layer.clone .char {
  opacity: 0;
}
.nav-link .char {
  display: inline-block;
  will-change: transform, opacity, filter;
}

/* ---------- menu shell ---------- */

.menu {
  position: fixed;
  inset: 0;
  z-index: 55;
  display: flex;
  justify-content: flex-end;
  padding: 14.4px;
  pointer-events: none;
}
.menu[data-open="true"] {
  pointer-events: auto;
}
.menu[data-open="false"] {
  pointer-events: none;
}

.menu__panel {
  position: relative;
  z-index: 5;
  display: flex;
  width: 100%;
  max-width: 396px;
  max-height: 100%;
  overflow-y: auto;
  overscroll-behavior: contain;
  border-radius: 1.5rem;
  background: var(--white);
  color: var(--on-light);
  border: 1px solid color-mix(in srgb, var(--on-light) 8%, transparent);
  pointer-events: none;
  visibility: hidden;
  clip-path: circle(0% at 92% 5%);
  opacity: 0;
  transform-origin: 90% 5%;
}
.menu[data-open="true"] .menu__panel {
  pointer-events: auto;
  visibility: visible;
}

.menu__inner {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 5rem;
  width: 100%;
  min-height: 100%;
  padding: 5rem 2rem 2.5rem;
  box-sizing: border-box;
}

/* ---------- nav links ---------- */

.menu__nav {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.5rem;
  width: 100%;
  margin: auto 0;
  list-style: none;
  padding: 0;
}
.menu__item {
  width: 100%;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 280ms var(--ease);
}
.menu[data-open="true"] .menu__item {
  opacity: 1;
  transform: translateY(0);
}
.menu[data-open="true"] .menu__nav:hover .menu__item {
  opacity: 0.4;
}
.menu[data-open="true"] .menu__nav:hover .menu__item:hover {
  opacity: 1;
}
.menu[data-open="true"] [data-menu-stagger] {
  opacity: 1;
  transform: translateY(0);
}
.menu__link {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  color: inherit;
  text-decoration: none;
}
.menu__label {
  font-family: var(--display);
  font-size: clamp(1.6rem, 2.4vw, 2.025rem);
  font-weight: 400;
  letter-spacing: -0.04em;
  line-height: 1;
  color: var(--on-light);
}
.menu__arrow {
  display: inline-flex;
  opacity: 0;
  transform: translateX(0);
  transition:
    opacity 220ms ease-out,
    transform 220ms ease-out;
  color: var(--on-light);
  padding-top: 0.35em;
}
.menu__link:hover .menu__arrow {
  opacity: 1;
  transform: translateX(8px);
  /* Delay only on enter — hide immediately on leave. Matches slower scramble. */
  transition-delay: 840ms;
}

/* ---------- meta / enquiry / social ---------- */

.menu__meta {
  display: flex;
  flex-direction: column;
  gap: 2.25rem;
}
.menu__meta [data-menu-stagger] {
  opacity: 0;
  transform: translateY(12px);
}
.menu__block {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1rem;
}
.menu__eyebrow {
  font-family: var(--display);
  font-size: 0.95rem;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--on-light) 50%, transparent);
  line-height: 1;
}
.menu__line {
  display: flex;
  gap: 0.5rem;
  margin: 0;
  font-family: var(--sans);
  font-size: 0.95rem;
  line-height: 1.25;
  color: var(--on-light);
}
.menu__line a {
  color: inherit;
  text-decoration: none;
}
.menu__prefix {
  color: color-mix(in srgb, var(--on-light) 55%, transparent);
}
.menu__addr {
  display: block;
  color: color-mix(in srgb, var(--on-light) 70%, transparent);
  font-size: 0.875rem;
  line-height: 1.45;
}
.menu__social {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem 1.5rem;
  list-style: none;
  padding: 0;
  margin: 0;
  width: 100%;
}
.menu__social a {
  font-family: var(--sans);
  font-size: 0.95rem;
  color: var(--on-light);
  text-decoration: none;
}

.menu__story {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: flex-start;
  border-radius: var(--r-pill);
  border: 1px solid color-mix(in srgb, var(--on-light) 35%, transparent);
  padding: 0.55em 1.15em;
  font-family: var(--display);
  font-size: 0.95rem;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  color: var(--on-light);
  text-decoration: none;
  transition: border-color 300ms var(--ease);
}
.menu__story:hover {
  border-color: var(--on-light);
}

/* ---------- mobile: full-bleed ink ---------- */

@media (max-width: 767px) {
  .hdr__logo {
    height: 1.05rem;
  }

  .menu {
    padding: 0;
  }
  .menu__panel {
    max-width: none;
    width: 100%;
    height: 100%;
    max-height: none;
    border-radius: 0;
    border: 0;
    background: var(--ink);
    color: var(--on-dark);
  }
  .menu__inner {
    padding: 7rem 1.5rem 3rem;
    gap: 3.5rem;
  }
  .menu__label {
    color: var(--on-dark);
    font-size: clamp(1.75rem, 8vw, 2.4rem);
  }
  .menu__arrow {
    color: var(--on-dark);
  }
  .menu__eyebrow {
    color: var(--on-dark-dim);
  }
  .menu__line,
  .menu__social a,
  .menu__story {
    color: var(--on-dark);
  }
  .menu__prefix {
    color: var(--on-dark-dim);
  }
  .menu__addr {
    color: var(--on-dark-dim);
  }
  .menu__story {
    border-color: color-mix(in srgb, var(--on-dark) 35%, transparent);
  }
  .menu__story:hover {
    border-color: var(--on-dark);
  }
}

@media (prefers-reduced-motion: reduce) {
  .menu__panel {
    transition: none !important;
    clip-path: none;
  }
  .menu[data-open="false"] .menu__panel {
    opacity: 0;
    visibility: hidden;
  }
  .menu[data-open="true"] .menu__panel {
    opacity: 1;
    visibility: visible;
  }
  .menu__item,
  .menu__arrow,
  [data-menu-stagger] {
    transition: none !important;
  }
  .nav-link .char {
    will-change: auto;
  }
}


/* Language switch — pille som Menu-knappen på desktop; i fold-ud på mobil. */
.hdr__lang {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  border-radius: var(--r-pill);
  border: 1px solid #fff;
  background: transparent;
  color: #fff;
  padding: 0.68em 1.15em;
  font-family: var(--sans);
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  transition: border-color 300ms var(--ease);
}
.hdr__lang:hover {
  border-color: rgba(255, 255, 255, 0.6);
}
.hdr__lang-link {
  color: inherit;
  opacity: 0.45;
  text-decoration: none;
  transition: opacity 200ms ease;
}
.hdr__lang-link:hover,
.hdr__lang-link.is-active {
  opacity: 1;
}
.hdr__lang-sep {
  opacity: 0.35;
}

/* I fold-ud-menuen — kun synlig på mobil */
.menu__lang {
  display: none;
  align-items: center;
  gap: 0.4rem;
  width: fit-content;
  border-radius: var(--r-pill);
  border: 1px solid color-mix(in srgb, var(--on-light) 35%, transparent);
  color: var(--on-light);
  padding: 0.68em 1.15em;
  font-family: var(--sans);
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  opacity: 0;
  transform: translateY(12px);
  transition:
    opacity 280ms var(--ease),
    transform 280ms var(--ease),
    border-color 300ms var(--ease);
}
.menu[data-open="true"] .menu__lang {
  opacity: 1;
  transform: translateY(0);
}
.menu__lang .hdr__lang-link {
  color: inherit;
}
.menu__lang:hover {
  border-color: var(--on-light);
}

@media (max-width: 767px) {
  .hdr__lang--bar {
    display: none !important;
  }

  .menu__lang {
    display: inline-flex;
    border-color: color-mix(in srgb, var(--on-dark) 40%, transparent);
    color: var(--on-dark);
  }
  .menu__lang:hover {
    border-color: var(--on-dark);
  }
}