/* ============================================================
   CØLM — Brand Stylesheet
   Aesop-inspired editorial luxury × Danish minimalism
   ============================================================ */

/* ── Fonts ─────────────────────────────────────────────────── */

@font-face {
  font-family: 'Hubot Sans';
  src: url('/assets/fonts/hubot-sans-light.woff2') format('woff2');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Hubot Sans';
  src: url('/assets/fonts/hubot-sans-regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Hubot Sans';
  src: url('/assets/fonts/hubot-sans-medium.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Geist';
  src: url('/assets/fonts/geist-light.woff2') format('woff2');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Geist';
  src: url('/assets/fonts/geist-regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Geist';
  src: url('/assets/fonts/geist-medium.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}


/* ── Custom Properties ──────────────────────────────────────── */

:root {
  color-scheme: light;

  /* Brand palette */
  --color-bg:           #F6FAEC;
  --color-bg-alt:       #F6FAEC;
  --color-text:         #2B2B2B;
  --color-accent:       #737B4C;
  --color-accent-hover: #5c6338;

  /* Bone White. Var tidligere fladen under hver eneste løftet komponent —
     det gav store lyse bånd, der læste som rå hvid ved siden af cremen.
     I dag er den ikke en sektionsflade, men den lysere af de to cremer, og
     bruges dér hvor noget skal lysne et hak (hover på fyldt knap i mørkt
     felt). --color-bg-alt endte med samme værdi som --color-bg og kan derfor
     ikke bruges til at skelne sektioner; se --color-surface-dark og
     --color-surface-tint nedenfor. */
  --color-surface:      #FCFAF8;   /* Bone White */

  /* De to sektionsflader. Én mørk til de steder, der skal bære vægt, og en
     tonet lys til de små paneler, der bare skal kunne skelnes fra siden.
     Begge er Dark Grey fra paletten — den ene ved fuld styrke, den anden som
     en anelse over cremen. Ingen ny farve. */
  --color-surface-dark: #2B2B2B;                 /* Dark Grey */
  --color-surface-tint: rgba(43, 43, 43, 0.035); /* Dark Grey, næsten væk */
  /* Den uigennemsigtige udgave af tinten ovenfor — nøjagtig samme flade,
     men den komponerer ikke med det, der ligger bagved. Kort og paneler
     skal ligge fast. Ikke en ny farve: #EFF3E5 ER tinten lagt på cremen. */
  --color-surface-sink: #EFF3E5;

  /* Oliven i #737B4C rammer kun 4,24:1 mod cremen. Det er nok til flader
     og streger (WCAG 1.4.11 kræver 3:1), men ikke til de 10-12 px
     versaletiketter, brandet bruger overalt. Denne nuance er den samme
     oliven, blot mørkere, og lander på 4,98:1. --color-accent bruges
     fortsat til rammer, streger og dekorative flader. */
  --color-accent-ink:   #68703F;

  /* Derived */
  /* 0,52 gav kun 3,11:1 mod cremen — under AA for de 10-12 px etiketter,
     tokenet mest bruges til. 0,66 giver 4,62:1 og ændrer tonen minimalt. */
  --color-text-muted:   rgba(43, 43, 43, 0.66);
  /* Dæmpet brødtekst i blokke med links. Se advarslen om opacity ovenfor:
     dæmpningen skal ligge i farvekanalen, ikke i undertræet. */
  --color-text-dim:     rgba(43, 43, 43, 0.82);
  --color-border:       rgba(43, 43, 43, 0.10);
  --color-border-soft:  rgba(43, 43, 43, 0.06);
  --color-overlay-dark: rgba(43, 43, 43, 0.38);
  --color-overlay-warm: rgba(252, 250, 248, 0.18);

  /* Typography */
  --font-display: 'Hubot Sans', 'Helvetica Neue', Arial, sans-serif;
  --font-body:    'Geist', 'Helvetica Neue', Arial, sans-serif;
  --font-ui:      'Geist', 'Helvetica Neue', Arial, sans-serif;

  /* Scale */
  --size-xs:   0.625rem;   /*  10px */
  --size-sm:   0.75rem;    /*  12px */
  --size-base: 1rem;       /*  16px */
  --size-md:   1.125rem;   /*  18px */
  --size-lg:   1.375rem;   /*  22px */
  --size-xl:   1.75rem;    /*  28px */
  --size-2xl:  2.5rem;     /*  40px */
  --size-3xl:  3.5rem;     /*  56px */
  --size-4xl:  5rem;       /*  80px */
  --size-5xl:  7rem;       /* 112px */

  /* Spacing */
  --space-1:  0.5rem;
  --space-2:  1rem;
  --space-3:  1.5rem;
  --space-4:  2rem;
  --space-6:  3rem;
  --space-8:  4rem;
  --space-12: 6rem;
  --space-16: 8rem;
  --space-24: 12rem;

  /* Layout */
  --max-width:        1280px;
  --max-width-narrow: 760px;
  --max-width-text:   640px;

  /* Motion */
  --ease-out:   cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in:    cubic-bezier(0.7, 0, 0.84, 0);
  --ease-inout: cubic-bezier(0.45, 0, 0.55, 1);
  --duration-fast:   160ms;
  --duration-base:   280ms;
  --duration-slow:   480ms;
  --duration-slower: 700ms;

  /* Borders */
  --radius-sm:  4px;
  --radius-md:  6px;
  /* Kun til footerkortet, sidens eneste flade over ~200 px, der har en
     radius. 4–6 px forsvinder på en flade på 1300 px og læser som skarp
     kant; 24 px læste som en widget. 10 px er det mindste, der stadig
     kan ses som en afrunding i den skala. */
  --radius-lg: 10px;

  /* Sidens ydre luftrum: footerkortet og bundlinjen deler kant med det. */
  --gutter-page: clamp(var(--space-2), 2vw, var(--space-4));

  /* Topbarens højde: --space-1 over og under mærkets 38 px. Den er fast og
     ens på alle bredder, og footeren regner sin egen topmargen ud fra den. */
  --nav-h: calc(var(--space-1) * 2 + 38px);
}


/* ── Reset ──────────────────────────────────────────────────── */

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

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

.hl { color: var(--color-accent); }

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

body {
  background-color: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--size-base);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

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

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

ul, ol {
  list-style: none;
}

button, input, textarea, select {
  font: inherit;
  color: inherit;
  background: none;
  border: none;
  outline: none;
  -webkit-appearance: none;
  appearance: none;
}

svg {
  display: block;
}


/* ── Accessibility ──────────────────────────────────────────── */

.skip-to-content {
  position: absolute;
  top: -100%;
  left: var(--space-4);
  z-index: 9999;
  padding: var(--space-2) var(--space-4);
  background: var(--color-text);
  color: var(--color-bg);
  font-family: var(--font-ui);
  font-size: var(--size-sm);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  transition: top var(--duration-base) var(--ease-out);
}

.skip-to-content:focus {
  top: 0;
}

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

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}


/* ── Layout Utilities ───────────────────────────────────────── */

.container {
  width: 100%;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--space-8);
}

.container--narrow {
  max-width: var(--max-width-narrow);
}


/* ── Navigation ─────────────────────────────────────────────── */

.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  transition: background-color 0.5s var(--ease-out);
}

.site-header::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background-color: transparent;
  transition: background-color 0.5s var(--ease-out);
  pointer-events: none;
}

.site-header.is-scrolled {
  background-color: var(--color-bg-alt);
}

.site-header.is-scrolled::after {
  background-color: var(--color-border);
}

/* Baren er bevidst lav: mærket bærer identiteten, og linjerne under
   navigationen giver den den vandrette vægt, højden før leverede. */
.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-1) var(--space-8);
}

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

/* Default: visible dark logo (non-hero pages) */
.nav-logo img {
  width: 76px;
  height: auto;
  filter: brightness(0) saturate(100%);
  transition: opacity 0.55s var(--ease-out), filter 0.55s var(--ease-out);
}

/* On scroll: logo stays dark — header background stays light */

/* Hero page: nav logo always hidden — morph element IS the logo */
body.has-hero .nav-logo img {
  opacity: 0;
  pointer-events: none;
}

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

.nav-links a {
  position: relative;
  font-family: var(--font-ui);
  font-weight: 500;
  font-size: var(--size-sm);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-text);
  opacity: 0.7;
  transition: opacity var(--duration-fast) var(--ease-out), color 0.5s var(--ease-out);
}

/* Hårstregen tørrer ind fra venstre og ud til højre igen — retningen
   er det, der gør den levende frem for en tændt/slukket streg. Den
   arver currentColor, så den følger linkets farveskift over hero'en af
   sig selv og ikke skal dubleres i body.has-hero-reglerne nedenfor. */
.nav-links a::after {
  content: '';
  position: absolute;
  left: 0;
  /* Sporingen på 0,12em lægger sig også efter det sidste bogstav, så
     linkets boks er en kende bredere end de bogstaver, man ser. Uden
     dette fradrag stikker stregen ud til højre og læser som skæv. */
  right: 0.12em;
  bottom: -0.4em;
  height: 1px;
  background-color: currentColor;
  transform: scaleX(0);
  transform-origin: 100% 50%;
}

.nav-links a:hover::after,
.nav-links a:focus-visible::after,
.nav-links a[aria-current="page"]::after {
  transform: scaleX(1);
  transform-origin: 0 50%;
}

@media (prefers-reduced-motion: no-preference) {
  .nav-links a::after {
    transition: transform var(--duration-base) var(--ease-out);
  }
}

/* On scroll: links stay dark — header background stays light */

/* Hero page at top: cream links over dark hero image */
body.has-hero .nav-links a {
  color: var(--color-bg-alt);
}

/* Once header has background, switch back to dark */
body.has-hero .site-header.is-scrolled .nav-links a {
  color: var(--color-text);
}

.nav-links a:hover {
  opacity: 1;
}

.nav-links a[aria-current="page"] {
  opacity: 1;
}

/* Mobile nav toggle */
.nav-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  cursor: pointer;
  padding: var(--space-1);
  background: none;
  border: none;
  will-change: transform;
}

.nav-toggle span {
  display: block;
  width: 22px;
  height: 1px;
  background-color: var(--color-text);
  transition:
    transform var(--duration-base) var(--ease-out),
    background-color 0.5s var(--ease-out);
}

/* Hero page at top: light hamburger over dark hero image */
body.has-hero .nav-toggle span {
  background-color: var(--color-bg-alt);
}

/* Once header has background, switch back to dark */
body.has-hero .site-header.is-scrolled .nav-toggle span {
  background-color: var(--color-text);
}


/* ── Hero ───────────────────────────────────────────────────── */

.hero {
  position: relative;
  height: 100svh;
  min-height: 600px;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
}

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

.hero-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 40%;
  will-change: transform;
}

/* Noise grain texture overlay */
.hero-image::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
  background-size: 200px 200px;
  opacity: 0.5;
  pointer-events: none;
  mix-blend-mode: multiply;
}

.hero-gradient {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(
      to bottom,
      rgba(43, 43, 43, 0.22) 0%,
      rgba(43, 43, 43, 0) 28%,
      rgba(43, 43, 43, 0) 50%,
      rgba(43, 43, 43, 0.55) 100%
    );
}

/* Hero logo morph — fixed, JS-animated once on first scroll */
.hero-logo-morph {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 101;
  pointer-events: none;
  will-change: transform;
  opacity: 0; /* JS reveals after first position update */
}

.hero-logo-morph.is-transitioning {
  transition:
    transform 0.62s cubic-bezier(0.4, 0, 0.2, 1),
    width     0.62s cubic-bezier(0.4, 0, 0.2, 1);
}

.hero-logo-morph img {
  width: 100%;
  height: auto;
  display: block;
}

/* Dark overlay layer — clipped by JS each frame */
.hero-logo-morph .hero-logo-dark {
  position: absolute;
  top: 0;
  left: 0;
  clip-path: inset(0 0 100% 0);
}

body:not(.has-hero) .hero-logo-morph {
  display: none;
}

.hero-content {
  position: relative;
  z-index: 2;
  width: 100%;
  padding: 0 var(--space-8) var(--space-10);
}

.hero-tagline {
  font-family: var(--font-ui);
  font-weight: 300;
  font-size: var(--size-xs);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(246, 250, 236, 0.72);
  margin-bottom: var(--space-3);
}

.hero-headline {
  font-family: var(--font-display);
  font-weight: 300;
  /* Halvdelen af wordmarkets grad. Ved 7vw ramte den 100 px mod mærkets
     112 og læste som en anden overskrift i samme rang; nu er der et
     tydeligt spring mellem mærket og sætningen under det. */
  font-size: clamp(var(--size-2xl), 4vw, var(--size-3xl));
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--color-bg-alt);
  max-width: 700px;
  margin-bottom: var(--space-6);
  margin-left: 4vw;
}

.hero-sub {
  font-family: var(--font-ui);
  font-weight: 300;
  font-size: var(--size-sm);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(246, 250, 236, 0.58);
}

/* ── Section Common ─────────────────────────────────────────── */

.section {
  padding: var(--space-24) 0;
}

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

.section-label {
  font-family: var(--font-ui);
  font-weight: 300;
  font-size: var(--size-xs);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-accent-ink);
  margin-bottom: var(--space-3);
  display: block;
}

.section-rule {
  width: 40px;
  height: 1px;
  background-color: var(--color-accent);
  margin-bottom: var(--space-6);
}


/* ── Mørke flader ───────────────────────────────────────────────
   Én hjælpeklasse frem for en mørk variant af hver komponent. Den
   redefinerer farvetokens på sig selv, og fordi custom properties nedarver,
   vender hele undertræet med — uden at den enkelte komponent skal kende til
   en mørk tilstand.

   Oliven kan ikke bære tekst her. --color-accent rammer kun 3,15:1 mod
   #2B2B2B og --color-accent-ink kun 2,68:1 (den er lavet til lys baggrund),
   og brandet sætter næsten alle etiketter som 10 px versaler, der kræver
   4,5:1. Etiketterne sættes derfor i cremehvid ved reduceret alfa — 0,62
   giver 6,11:1 — og hierarkiet holder, fordi versaler og letterspacing i
   forvejen bærer det. Oliven er forbeholdt lyse flader.

   Komponenter, der bærer klassen, sætter ikke selv en baggrund. Den kommer
   herfra, så en flade ikke kan ende med lys baggrund og lys tekst. */

.surface--dark {
  --color-text:         var(--color-bg);
  --color-text-dim:     rgba(246, 250, 236, 0.82);  /* 9,5:1 */
  --color-text-muted:   rgba(246, 250, 236, 0.62);  /*  6,1:1 */
  --color-accent-ink:   rgba(246, 250, 236, 0.62);  /* etiketter og links */
  --color-accent:       rgba(246, 250, 236, 0.35);  /* streger og flader   */
  --color-accent-hover: var(--color-bg);            /* hover lysner op     */
  --color-border:       rgba(246, 250, 236, 0.18);
  --color-border-soft:  rgba(246, 250, 236, 0.12);

  background-color: var(--color-surface-dark);
  color: var(--color-text);
}

/* Fyldt oliven knap ville kun ramme 3,15:1 mod fladen — selve knappen ville
   forsvinde, uanset at teksten på den er læsbar. Den vendes i stedet til
   cremehvid fyld med mørk tekst (13,4:1) og bliver dermed utvetydigt
   fladens primære handling. */
.surface--dark .btn--primary,
.surface--dark .btn--filled {
  background-color: var(--color-bg);
  color: var(--color-surface-dark);
  border-color: var(--color-bg);
}

.surface--dark .btn--primary:hover,
.surface--dark .btn--filled:hover {
  background-color: var(--color-surface);   /* Bone White — et hak lysere */
  border-color: var(--color-surface);
}

/* Ghost-knappens kant er en betjeningsgrænse og skal ramme 3:1 (WCAG
   1.4.11). --color-border er en dekorativ hårstreg og lander på 1,75:1
   herinde; 0,36 giver 3,07:1. */
.surface--dark .btn--ghost {
  border-color: rgba(246, 250, 236, 0.36);
}

.surface--dark .btn--ghost:hover {
  border-color: rgba(246, 250, 236, 0.6);
  background-color: rgba(246, 250, 236, 0.08);
}

/* Fokusmarkeringen er oliven og forsvinder på sort. */
.surface--dark :focus-visible {
  outline-color: var(--color-bg);
}


/* ── Brand Story / Scroll Text ──────────────────────────────── */

.brand-story-section {
  padding: var(--space-16) clamp(var(--space-4), 6vw, var(--space-12));
}

.brand-story-inner {
  max-width: 1080px;
  margin: 0 auto;
}

.brand-story-marker {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-6);
}

.brand-story-marker__rule {
  display: block;
  width: 40px;
  height: 1px;
  background-color: var(--color-accent);
  flex-shrink: 0;
}

.brand-story-marker__label {
  font-family: var(--font-ui);
  font-weight: 300;
  font-size: var(--size-xs);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-accent-ink);
}

.brand-story-inner p {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(1.25rem, 2.2vw, 1.75rem);
  line-height: 1.7;
  letter-spacing: -0.01em;
  color: var(--color-text);
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
}

.brand-story-inner p + p {
  margin-top: var(--space-6);
}

/* Created by JS — each word is a flex item, each char animates */
.scroll-word {
  display: inline-flex;
  margin-right: 0.28em;
  margin-top: 0.15em;
  white-space: nowrap;
}

.scroll-char {
  display: inline-block;
  opacity: 0.12;
}

/* ── Product Section ────────────────────────────────────────── */

.product-section {
  padding: var(--space-16) clamp(var(--space-4), 5vw, var(--space-12));
}

.product-grid {
  display: grid;
  grid-template-columns: minmax(0, 480px) 1fr;
  gap: clamp(var(--space-8), 6vw, var(--space-16));
  align-items: start;
  max-width: var(--max-width);
  margin: 0 auto;
}

.product-image-column {
  position: relative;
  overflow: hidden;
  background-color: var(--color-bg-alt);
  border-radius: 6px;
  aspect-ratio: 3 / 4;
}

.product-image-column img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: transform var(--duration-slower) var(--ease-out);
}

.product-image-column:hover img {
  transform: scale(1.03);
}

.product-text-column {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0;
}

/* ── Product Accordion ───────────────────────────────────────── */

.product-accordion {
  border-top: 1px solid var(--color-border);
  margin-top: var(--space-6);
  margin-bottom: var(--space-6);
}

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

.product-accordion-header {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  width: 100%;
  padding: var(--space-3) 0;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  color: var(--color-text);
  transition: opacity var(--duration-base) var(--ease-out);
}

.product-accordion-header:hover {
  opacity: 0.65;
}

.product-accordion-header:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
  border-radius: 2px;
}

.product-accordion-name {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: var(--size-base);
  flex: 1;
}

.product-accordion-tag {
  font-family: var(--font-ui);
  font-weight: 300;
  font-size: var(--size-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-accent-ink);
  /* 0,10 lagde en oliventone under en oliven tekst og trak kontrasten
     under AA. 0,06 lader fladen læses som et mærkat uden at spise tekst. */
  background-color: rgba(115, 123, 76, 0.06);
  padding: 3px 8px;
  border-radius: 3px;
}

.product-accordion-icon {
  width: 14px;
  height: 14px;
  position: relative;
  flex-shrink: 0;
  margin-left: var(--space-1);
}

.product-accordion-icon::before,
.product-accordion-icon::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  background-color: var(--color-text);
  border-radius: 1px;
  transition:
    transform var(--duration-base) var(--ease-out),
    opacity var(--duration-base) var(--ease-out);
}

.product-accordion-icon::before {
  width: 10px;
  height: 1px;
  transform: translate(-50%, -50%);
}

.product-accordion-icon::after {
  width: 1px;
  height: 10px;
  transform: translate(-50%, -50%);
}

.product-accordion-header[aria-expanded="true"] .product-accordion-icon::after {
  transform: translate(-50%, -50%) rotate(90deg);
  opacity: 0;
}

.product-accordion-body {
  overflow: hidden;
  max-height: 0;
  visibility: hidden;
  transition:
    max-height 0.38s var(--ease-out),
    visibility 0s linear 0.38s;
}

.product-accordion-body.is-open {
  visibility: visible;
  transition:
    max-height 0.38s var(--ease-out),
    visibility 0s linear 0s;
}

.product-accordion-body p {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: var(--size-base);
  line-height: 1.75;
  color: var(--color-text);
  opacity: 0.72;
  padding-bottom: var(--space-3);
  max-width: 440px;
}

.product-eyebrow {
  font-family: var(--font-ui);
  font-weight: 300;
  font-size: var(--size-xs);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-accent-ink);
  margin-bottom: var(--space-3);
}

.product-name {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(var(--size-lg), 2.2vw, 2rem);
  line-height: 1.1;
  letter-spacing: -0.025em;
  color: var(--color-text);
  margin-bottom: var(--space-4);
}

.product-description {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: var(--size-md);
  line-height: 1.8;
  color: var(--color-text);
  opacity: 0.82;
  max-width: 480px;
  margin-bottom: var(--space-4);
}

.product-description + .product-description {
  margin-top: 0;
  margin-bottom: var(--space-8);
}

.product-bottom-row {
  display: flex;
  align-items: center;
  gap: var(--space-6);
  flex-wrap: wrap;
  margin-bottom: var(--space-4);
}

.product-detail {
  font-family: var(--font-ui);
  font-weight: 300;
  font-size: var(--size-sm);
  letter-spacing: 0.08em;
  color: var(--color-text-muted);
  margin-bottom: 0;
}


/* ── Product Gallery Strip ──────────────────────────────────── */

/* Ingen fast højde. Billedcellen sætter rækkens højde ud fra sin egen
   4:3, så cellen har samme format som den beskårne kilde uanset bredde —
   ellers strammer beskæringen, jo bredere viewporten bliver, og krukkens
   fod ryger ud af rammen. */
.product-gallery-strip {
  display: grid;
  grid-template-columns: 1fr 1fr;
  overflow: hidden;
}


/* ── Philosophy Section ─────────────────────────────────────── */

.philosophy-section {
  padding: var(--space-16) 0;
  background-color: var(--color-bg-alt);
}

.philosophy-inner {
  max-width: 820px;
  margin: 0 auto;
  padding: 0 var(--space-8);
  text-align: center;
}

.philosophy-headline {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(var(--size-lg), 2.6vw, var(--size-2xl));
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--color-text);
  margin-bottom: var(--space-8);
}

.philosophy-text {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: var(--size-md);
  line-height: 1.85;
  color: var(--color-text);
  opacity: 0.8;
  max-width: 600px;
  margin: 0 auto;
}

.philosophy-text + .philosophy-text {
  margin-top: var(--space-4);
}

.philosophy-mark {
  display: inline-block;
  width: 32px;
  height: 1px;
  background-color: var(--color-accent);
  vertical-align: middle;
  margin: 0 var(--space-2);
}


/* ── Buttons ─────────────────────────────────────────────────── */

.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-ui);
  font-weight: 300;
  font-size: var(--size-sm);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 0.85em 1.8em;
  border: 1px solid currentColor;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition:
    background-color var(--duration-base) var(--ease-out),
    color var(--duration-base) var(--ease-out),
    transform var(--duration-fast) var(--ease-out),
    opacity var(--duration-base) var(--ease-out);
  text-decoration: none;
}

.btn--primary {
  background-color: var(--color-accent-ink);
  color: var(--color-bg);
  border-color: var(--color-accent-ink);
}

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

.btn--primary:active {
  transform: scale(0.97);
}

.btn--filled {
  background-color: var(--color-accent-ink);
  color: var(--color-bg);
  border-color: var(--color-accent-ink);
}

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

.btn--filled:active {
  transform: scale(0.97);
}

/* Stille variant til lys baggrund. --primary og --filled er begge fyldt
   oliven, så et par knapper ved siden af hinanden manglede en rangorden. */
.btn--ghost {
  background-color: transparent;
  color: var(--color-text);
  border-color: var(--color-border);
}

.btn--ghost:hover {
  border-color: rgba(43, 43, 43, 0.28);
  background-color: rgba(43, 43, 43, 0.03);
}

.btn--ghost:active {
  transform: scale(0.97);
}

.btn--light {
  color: rgba(252, 250, 248, 0.85);
  border-color: rgba(252, 250, 248, 0.4);
}

.btn--light:hover {
  background-color: rgba(252, 250, 248, 0.12);
  color: var(--color-bg);
  border-color: rgba(252, 250, 248, 0.75);
}

.btn--light:active {
  transform: scale(0.97);
}

.btn svg {
  width: 14px;
  height: 14px;
  transition: transform var(--duration-base) var(--ease-out);
}

.btn:hover svg {
  transform: translateX(3px);
}


/* ── Page Header (inner pages) ──────────────────────────────── */

.page-header {
  padding-top: calc(var(--space-16) + 80px);
  padding-bottom: var(--space-12);
  border-bottom: 1px solid var(--color-border);
}

.page-header-inner {
  padding: 0 var(--space-8) 0 var(--space-16);
  max-width: var(--max-width);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: var(--space-16);
  align-items: end;
}

.page-header-inner--no-image {
  grid-template-columns: 1fr;
}

.page-header-text {
  padding-bottom: var(--space-4);
  padding-left: var(--space-4);
}

@media (max-width: 768px) {
  .page-header-text {
    padding-left: 0;
  }
}

.page-header-image {
  display: flex;
  align-items: flex-end;
}

.page-header-image img {
  width: 100%;
  height: auto;
  display: block;
}

@media (max-width: 1024px) {
  .page-header-inner {
    grid-template-columns: 1fr 240px;
    gap: var(--space-8);
  }
}

@media (max-width: 768px) {
  .page-header-inner {
    grid-template-columns: 1fr;
    padding: 0 var(--space-4);  /* equal sides on mobile */
  }

  .page-header-image {
    display: none;
  }
}

.page-label {
  font-family: var(--font-ui);
  font-weight: 300;
  font-size: var(--size-xs);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-accent-ink);
  display: block;
  margin-bottom: var(--space-4);
}

.page-title {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(var(--size-3xl), 6vw, var(--size-5xl));
  line-height: 1.05;
  letter-spacing: -0.03em;
  color: var(--color-text);
  max-width: 640px;
}

.page-intro {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: var(--size-lg);
  line-height: 1.75;
  color: var(--color-text);
  opacity: 0.72;
  max-width: 540px;
  margin-top: var(--space-6);
}


/* ── Om os Page ─────────────────────────────────────────────── */

.om-os-body {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--space-8);
}

.story-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-16);
  align-items: center;
  padding: var(--space-24) 0;
}

.story-grid + .story-grid {
  border-top: 1px solid var(--color-border-soft);
}

.story-grid--reverse {
  direction: rtl;
}

.story-grid--reverse > * {
  direction: ltr;
}

.story-image {
  position: relative;
  overflow: hidden;
  aspect-ratio: 3/4;
}

.story-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--duration-slower) var(--ease-out);
}

.story-image:hover img {
  transform: scale(1.03);
}

.story-text {
  padding: var(--space-4) 0;
}

.story-text h2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(var(--size-lg), 2.2vw, 2rem);
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--color-text);
  margin-bottom: var(--space-6);
}

.story-text p {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: var(--size-md);
  line-height: 1.85;
  color: var(--color-text);
  opacity: 0.82;
  max-width: 480px;
  margin-bottom: var(--space-4);
}

.story-text p:last-child {
  margin-bottom: 0;
}

/* Full-width image section on Om os */
.image-break {
  width: 100%;
  position: relative;
  overflow: hidden;
}

.image-break img {
  width: 100%;
  height: 520px;
  object-fit: cover;
  /* 30 % ramte kun det uskarpe gardin bag produktet. 45 % trækker æskens
     overkant og olivengrenene ind i båndet, uden at taglinjen lander oven i
     æskens egen tekst. */
  object-position: center 45%;
}

/* ── Image Break: Tagline Overlay ────────────────────────── */

.image-tagline {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-6);
  pointer-events: none;
}

/* Blød skygge bag teksten. Text-shadow alene rakte ikke, når enderne af
   linjen faldt hen over den lyse, uskarpe baggrund. */
.image-tagline::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(
    ellipse 68% 58% at 50% 50%,
    rgba(43, 43, 43, 0.32) 0%,
    rgba(43, 43, 43, 0.16) 45%,
    rgba(43, 43, 43, 0) 72%
  );
  pointer-events: none;
}

.image-tagline p {
  position: relative;
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(1.75rem, 4.5vw, 4.25rem);
  color: var(--color-bg);
  letter-spacing: -0.025em;
  line-height: 1;
  text-align: center;
  text-shadow:
    0 2px 32px rgba(43, 43, 43, 0.35),
    0 1px 8px  rgba(43, 43, 43, 0.2);
  display: flex;
  align-items: baseline;
  gap: 0.22em;
  flex-wrap: wrap;
  justify-content: center;
  margin: 0;
}

/* Desktop: hide the mobile-only prefix */
.tl-mobile { display: none; }

/* ── Word Cycle ──────────────────────────────────────────── */

.word-cycle {
  display: inline-block;
  position: relative;
  top: 0.09em;
  margin-right: 0.2em;
  transition: width 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.word-cycle__word {
  position: absolute;
  bottom: 0;
  left: 0;
  white-space: nowrap;
  font-weight: 500;
  /* Hidden / resting state */
  opacity: 0;
  transform: translateY(-10px);
  filter: blur(8px);
}

.word-cycle__word.is-current {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
}

@media (prefers-reduced-motion: no-preference) {
  .word-cycle__word.is-entering {
    animation: wc-enter 0.4s ease-out forwards;
  }

  .word-cycle__word.is-exiting {
    animation: wc-exit 0.3s ease-in forwards;
  }
}

@keyframes wc-enter {
  from { opacity: 0; filter: blur(8px); transform: translateY(-10px); }
  to   { opacity: 1; filter: blur(0);   transform: translateY(0); }
}

@keyframes wc-exit {
  from { opacity: 1; filter: blur(0);   transform: translateY(0); }
  to   { opacity: 0; filter: blur(8px); transform: translateY(10px); }
}

.values-section {
  padding: var(--space-24) 0;
  border-top: 1px solid var(--color-border-soft);
}

.values-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-8);
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--space-8);
  margin-top: var(--space-12);
}

.value-item {
  padding-top: var(--space-6);
  border-top: 1px solid var(--color-border);
}

/* Tallet er 56 px og tæller derfor som stor tekst (3:1). Oliven ved 0,5
   ramte 1,87:1. Ved fuld styrke er det 4,24:1 — og på den skala er ren
   oliven stadig et stille tal, ikke et højt. */
.value-number {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: var(--size-3xl);
  color: var(--color-accent);
  line-height: 1;
  margin-bottom: var(--space-3);
}

.value-title {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--size-base);
  letter-spacing: 0.02em;
  color: var(--color-text);
  margin-bottom: var(--space-2);
}

.value-text {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: var(--size-base);
  line-height: 1.7;
  color: var(--color-text);
  opacity: 0.7;
}


/* ── Journal Page ───────────────────────────────────────────── */

.journal-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 40vh;
  text-align: center;
  padding: var(--space-24) var(--space-8);
}

.journal-empty-icon {
  width: 48px;
  height: 48px;
  margin-bottom: var(--space-6);
  opacity: 0.28;
}

.journal-empty h2 {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: var(--size-2xl);
  letter-spacing: -0.02em;
  color: var(--color-text);
  margin-bottom: var(--space-4);
}

.journal-empty p {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: var(--size-md);
  line-height: 1.75;
  color: var(--color-text);
  opacity: 0.6;
  max-width: 440px;
}

/* Future article grid */
.journal-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-8);
  padding: var(--space-16) var(--space-8);
  max-width: var(--max-width);
  margin: 0 auto;
}


/* ── Contact Page ───────────────────────────────────────────── */

.kontakt-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: var(--space-16);
  row-gap: 0;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: var(--space-16) var(--space-8);
}

.kontakt-info h2 {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(var(--size-lg), 2.2vw, 2rem);
  letter-spacing: -0.02em;
  line-height: 1.15;
  color: var(--color-text);
  margin-bottom: var(--space-6);
}

.kontakt-info p {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: var(--size-md);
  line-height: 1.8;
  color: var(--color-text);
  opacity: 0.75;
  max-width: 420px;
  margin-bottom: var(--space-4);
}

.kontakt-info p:last-child {
  margin-bottom: 0;
  padding-bottom: var(--space-8);
}

/* Form */
.contact-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.form-field--grow {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.form-field--grow .form-textarea {
  flex: 1;
}

.form-field {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.form-label {
  font-family: var(--font-ui);
  font-weight: 300;
  font-size: var(--size-xs);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  /* 0,6 gav 3,88:1 på 10 px — en feltetiket er ikke et sted at spare. */
  color: var(--color-text-muted);
}

.form-input,
.form-textarea {
  width: 100%;
  padding: 0.85em 0;
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--color-border);
  font-family: var(--font-body);
  font-weight: 300;
  font-size: var(--size-base);
  color: var(--color-text);
  transition:
    border-color var(--duration-base) var(--ease-out);
  border-radius: 0;
}

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

.form-input::placeholder,
.form-textarea::placeholder {
  color: var(--color-text-muted);
  opacity: 0.6;
}

.form-textarea {
  resize: vertical;
  min-height: 140px;
  line-height: 1.6;
}

.kontakt-forhandler {
  border-top: 1px solid var(--color-border);
  padding-top: var(--space-6);
  grid-column: 1;
  grid-row: 2;
}

.kontakt-forhandler__label {
  font-family: var(--font-ui);
  font-weight: 300;
  font-size: 0.625rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-accent-ink);
  display: block;
  margin-bottom: var(--space-3);
}

.kontakt-forhandler__text {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 1rem;
  line-height: 1.7;
  color: rgba(43, 43, 43, 0.65);
}

.kontakt-forhandler__link {
  color: var(--color-accent-ink);
  text-decoration: underline;
  text-decoration-color: var(--color-accent);
  text-underline-offset: 3px;
  transition: color var(--duration-fast) var(--ease-out);
}

.kontakt-forhandler__link:hover {
  color: var(--color-accent-hover);
}

/* On desktop (2-col grid) form-submit is DOM item 3 but must sit in col 2, row 2 */
.form-submit {
  padding-top: var(--space-6);
  align-self: start;
  grid-column: 2;
  grid-row: 2;
}



/* ── Footer (Card Design) ────────────────────────────────────── */

/* Footeren er et helt skærmbillede høj. Det er hele mekanikken bag, at
   kortet parkerer lige under topbaren, når man ruller helt i bund: er
   footeren nøjagtig én viewporthøjde, ligger dens overkant på 0, og kortet
   står så langt nede, som topmargenen siger — topbarens højde plus den
   samme afstand, kortet har ud til siderne. Alt det, der er til overs,
   falder ned under kortet, fordi bundlinjen skubber sig selv i bund med
   margin-top: auto.

   Uden højden afhang afstanden op til baren af, hvor lang siden tilfældigvis
   var, og kortet lå klods op ad sidens bund i stedet for at kunne rulles op.
   svh og ikke vh: den lille viewporthøjde er den, der gælder, når mobilens
   adresselinje er fremme, så footeren aldrig bliver højere end skærmen. */
.site-footer {
  position: relative;
  /* isolate holder kornlagets mix-blend-mode inde i footeren; uden den
     blander det med det, der ligger bag på siden. */
  isolation: isolate;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  padding:
    calc(var(--nav-h) + var(--gutter-page))
    var(--gutter-page)
    var(--gutter-page);
  background-color: var(--color-bg);

  /* Meshgradient: én radial blob per farve, forankret i sit eget punkt.
     Kun brandfarver — Bone White og Sunk Cream bærer lyset, oliven de to
     toner. Dette er tilstanden ved ph = 0; `main.js` regner nøjagtig de
     samme fire lag om hvert billede og lader blobbene drive om deres
     udgangspunkt. Uden JS og ved reduceret bevægelse står den stille her.
     Ændres et tal, skal det ændres begge steder. */
  background-image:
    radial-gradient(circle at 67.04% 45.93%,
      rgba(252, 250, 248, 0.5) 0%,
      rgba(252, 250, 248, 0.422) 19.025%,
      rgba(252, 250, 248, 0.25) 38.05%,
      rgba(252, 250, 248, 0.078) 57.075%,
      rgba(252, 250, 248, 0) 76.1%),
    radial-gradient(circle at 35.47% 65.92%,
      rgba(115, 123, 76, 1) 0%,
      rgba(115, 123, 76, 0.844) 12.9%,
      rgba(115, 123, 76, 0.5) 25.8%,
      rgba(115, 123, 76, 0.156) 38.7%,
      rgba(115, 123, 76, 0) 51.6%),
    radial-gradient(circle at 48.33% 20.11%,
      rgba(92, 99, 56, 0.6) 0%,
      rgba(92, 99, 56, 0.5064) 16.75%,
      rgba(92, 99, 56, 0.3) 33.5%,
      rgba(92, 99, 56, 0.0936) 50.25%,
      rgba(92, 99, 56, 0) 67%),
    radial-gradient(circle at 80.81% 88.03%,
      rgba(115, 123, 76, 0.9) 0%,
      rgba(115, 123, 76, 0.7596) 10.275%,
      rgba(115, 123, 76, 0.45) 20.55%,
      rgba(115, 123, 76, 0.1404) 30.825%,
      rgba(115, 123, 76, 0) 41.1%);
}

/* Kornet ligger i sit eget lag frem for i footerens background-stack.
   Grunden er animationen: JS skriver background-image hvert billede, og
   med kornet i samme stak skulle den lange data-URI med igennem hver gang.
   Her står den stille. */
.site-footer::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
  background-size: 120px 120px;
  mix-blend-mode: overlay;
  opacity: 0.5;
}

/* Kortet og bundlinjen skal ligge over kornlaget. Uden position males de
   under det, fordi et positioneret element altid maler over et upositioneret. */
.footer-card,
.footer-bottom-bar {
  position: relative;
  z-index: 1;
}

.footer-card {
  max-width: 100%;
  /* Ingen auto i siderne: footeren er en flex-kolonne, og en vandret
     auto-margen slår stretch fra, så kortet skrumper til sit indhold og
     bliver centreret i stedet for at fylde rammen ud.
     Bundmargenen er minimum; bundlinjens margin-top: auto lægger skærmens
     overskud oveni, så afstanden vokser med viewporthøjden. */
  margin: 0 0 clamp(var(--space-6), 6.5vw, var(--space-12));
  /* Ved #737B4C topper cremehvid tekst på 4,32:1 selv ved fuld styrke —
     kortet kunne ikke bære AA-tekst uanset alfa. Den mørkere brandoliven
     giver 6,12:1 ved fuld styrke og 4,95:1 ved de 0,85, teksten bruger. */
  background-color: var(--color-accent-hover);
  border-radius: var(--radius-lg);
  padding: var(--space-4) clamp(var(--space-6), 3.5vw, var(--space-8));
}

/* Header row: logo left, tagline right — på alle bredder.
   Mærket og sloganet deler én højde (--footer-mark-h), så de to kan
   stå på samme grundlinje: logoets bogstaver er 30 px høje i en 48 px
   boks, og sloganets skrift er valgt, så dets versalhøjde også er 30 px. */
.footer-card-header {
  --footer-mark-h: 48px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-8);
  padding-bottom: var(--space-3);
}

.footer-logo-link {
  display: block;
  flex-shrink: 0;
}

.footer-logo-link img {
  width: 96px;
  height: auto;
}

/* Sloganets ord er absolut positionerede og har ingen egenbredde. Boksen
   får derfor sin bredde af flex-algoritmen (flex-grow) frem for af en
   fast værdi; uden en definit bredde kollapser den, og ordene løber ud
   over footerkortets kant. */
.footer-tagline {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: var(--size-base);
  line-height: 1.65;
  color: rgba(252, 250, 248, 0.85);
  flex: 1 1 auto;
  min-width: 0;
  text-align: right;
}

/* Thin rule inside the card */
.footer-divider {
  height: 1px;
  background-color: rgba(252, 250, 248, 0.15);
}

/* 4-column link grid */
.footer-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-6);
  padding: var(--space-4) 0;
}

.footer-grid-col {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.footer-links-label {
  font-family: var(--font-ui);
  font-weight: 300;
  font-size: var(--size-sm);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(252, 250, 248, 0.85);
  display: block;
}

.footer-links-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

/* inline-block giver stregen nedenfor en definit boks at måle sig efter;
   som ren inline ville den følge tekstens linjebokse og springe i bredde,
   hvis et link ombrød. */
.footer-links-list a,
.footer-links-list .footer-link-btn {
  position: relative;
  display: inline-block;
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 0.875rem;
  color: rgba(252, 250, 248, 0.85);
  transition: color var(--duration-fast) var(--ease-out);
}

/* Samme streg som i topmenuen — footerens links skal opføre sig som
   navigationens, ikke som en anden slags link. */
.footer-links-list a::after,
.footer-links-list .footer-link-btn::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -0.25em;
  height: 1px;
  background-color: currentColor;
  transform: scaleX(0);
  transform-origin: 100% 50%;
}

.footer-links-list a:hover,
.footer-links-list .footer-link-btn:hover {
  color: var(--color-bg);
}

.footer-links-list a:hover::after,
.footer-links-list a:focus-visible::after,
.footer-links-list .footer-link-btn:hover::after,
.footer-links-list .footer-link-btn:focus-visible::after {
  transform: scaleX(1);
  transform-origin: 0 50%;
}

@media (prefers-reduced-motion: no-preference) {
  .footer-links-list a::after,
  .footer-links-list .footer-link-btn::after {
    transition: transform var(--duration-base) var(--ease-out);
  }
}

/* Social icons row */
.footer-social-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: var(--space-3);
}

.footer-social-icons {
  display: flex;
  flex-wrap: wrap; /* fem knapper à 44 px er bredere end kortet ved 320 px */
  gap: var(--space-2);
  align-items: center;
}

.footer-social-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 1px solid rgba(252, 250, 248, 0.25);
  border-radius: var(--radius-md);
  color: rgba(252, 250, 248, 0.85);
  transition:
    border-color var(--duration-base) var(--ease-out),
    color var(--duration-base) var(--ease-out),
    background-color var(--duration-base) var(--ease-out);
}

.footer-social-btn:hover {
  border-color: rgba(252, 250, 248, 0.6);
  color: var(--color-bg);
  background-color: rgba(252, 250, 248, 0.08);
}

.footer-social-btn:active {
  transform: scale(0.97);
}

/* Tilbage til toppen. Trekanten er tegnet som fyldt path med rund
   linjesammenføjning frem for tre buer i pathen — spidserne bliver bløde,
   og formen kan skaleres uden at radius skal regnes om. Ingen ramme:
   knappen skal læse som et tegn, ikke som en femte social-knap. */
.footer-to-top {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* Samme 40 px højde som social-knapperne, så over- og underkant flugter
     med deres. Bredden er knappens rammefelt; selve trekanten er de 24 px
     i midten. */
  width: 40px;
  height: 40px;
  padding: 0 6px;
  /* Trekantens blæk er 24 af svg'ens 28 px, altså 20,4 px efter
     nedskaleringen nedenfor, og sidder midt i knappens 40. Uden
     fradraget stopper den 9,8 px inde i forhold til kortets
     indholdskant, mens social-ikonerne i venstre side flugter med den. */
  margin-right: -9.8px;
  background: none;
  border: none;
  cursor: pointer;
  color: rgba(252, 250, 248, 0.75);
  transition:
    color var(--duration-base) var(--ease-out),
    transform var(--duration-base) var(--ease-out);
}

/* 15 % mindre end de 28x40, formen blev tegnet i. Knappens rammefelt
   bliver stående på 40x40, så trekanten skrumper uden at tryklet gør
   det — den er stadig lige så nem at ramme med en tommelfinger. */
.footer-to-top svg {
  width: 23.8px;
  height: 34px;
  display: block;
}

.footer-to-top:hover {
  color: var(--color-bg);
}

.footer-to-top:active {
  transform: translateY(0) scale(0.94);
}

@media (prefers-reduced-motion: no-preference) {
  /* Knappen løfter sig den vej, den sender dig. */
  .footer-to-top:hover {
    transform: translateY(-3px);
  }
}

.footer-bottom-bar {
  max-width: none;
  margin-top: auto;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-4);
}

.footer-copyright {
  font-family: var(--font-ui);
  font-weight: 300;
  font-size: var(--size-xs);
  letter-spacing: 0.08em;
  color: var(--color-text-muted);
}

.footer-ref {
  font-family: var(--font-ui);
  font-weight: 300;
  font-size: var(--size-xs);
  letter-spacing: 0.08em;
  color: var(--color-text-muted);
}

.footer-ref a {
  color: var(--color-text-muted);
  transition: color var(--duration-fast) var(--ease-out);
  text-decoration: underline;
  text-underline-offset: 3px;
}

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


/* ── Reveal Animations ──────────────────────────────────────── */

/* Non-animated fallback: everything visible */
.reveal {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: no-preference) {
  /* Only apply hidden state when JS has initialized the observers */
  body.js-ready .reveal {
    opacity: 0;
    transform: translateY(24px);
    transition:
      opacity var(--duration-slower) var(--ease-out),
      transform var(--duration-slower) var(--ease-out);
  }
  /* But never hide elements that are already marked visible */
  body.js-ready .reveal.is-visible {
    opacity: 1;
    transform: none;
  }

  .reveal-delay-1 { transition-delay: 80ms;  }
  .reveal-delay-2 { transition-delay: 160ms; }
  .reveal-delay-3 { transition-delay: 240ms; }
  .reveal-delay-4 { transition-delay: 320ms; }

  .hero-content .hero-headline,
  .hero-content .hero-sub,
  .hero-content .btn {
    opacity: 0;
    transform: translateY(20px);
    animation: heroReveal var(--duration-slower) var(--ease-out) forwards;
  }

  .hero-content .hero-headline { animation-delay: 200ms; }
  .hero-content .hero-sub { animation-delay: 380ms; }
  .hero-content .btn { animation-delay: 540ms; }

  @keyframes heroReveal {
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
}


/* ── 404 Page ───────────────────────────────────────────────── */

.not-found {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  min-height: calc(100svh - 160px);
  /* Ekstra top, så indholdet ikke lander under den faste header. */
  padding: calc(var(--space-16) + 80px) var(--space-8) var(--space-16);
  max-width: var(--max-width);
  margin: 0 auto;
}

/* Tallet er ornament, ikke indhold — <h1> bærer beskeden. Derfor ligger
   det i CSS frem for i DOM: så optræder det hverken i tilgængeligheds-
   træet eller som tekst med et kontrastkrav, det aldrig var ment til at
   opfylde. Opaciteten er hævet fra 0,06 til 0,10, hvor det faktisk kan
   ses som den svage vandmærkeeffekt, det skal være. */
.not-found-code::before {
  content: '404';
}

.not-found-code {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(var(--size-4xl), 12vw, 200px);
  line-height: 1;
  color: var(--color-text);
  opacity: 0.10;
  letter-spacing: -0.04em;
  margin-bottom: var(--space-6);
  line-height: 0.9;
  user-select: none;
}

.not-found h1 {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(var(--size-2xl), 4vw, var(--size-4xl));
  letter-spacing: -0.02em;
  color: var(--color-text);
  margin-bottom: var(--space-4);
}

.not-found p {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: var(--size-md);
  line-height: 1.75;
  color: var(--color-text);
  opacity: 0.65;
  max-width: 420px;
  margin-bottom: var(--space-8);
}


/* ── Print ──────────────────────────────────────────────────── */

@media print {
  nav, footer, .decorative, .site-header { display: none; }
  body { color: #000; background: #fff; }
  a[href]::after { content: " (" attr(href) ")"; }
}


/* ── Responsive ─────────────────────────────────────────────── */

@media (max-width: 1024px) {
  .product-grid {
    grid-template-columns: 1fr;
  }

  .product-image-column {
    aspect-ratio: 4 / 3;
    max-width: 480px;
    margin: 0 auto;
    width: 100%;
  }

  .product-text-column {
    padding: 0;
  }

  .story-grid {
    grid-template-columns: 1fr;
    gap: var(--space-8);
  }

  .story-grid--reverse {
    direction: ltr;
  }

  .story-image {
    aspect-ratio: 4/3;
  }

  .values-grid {
    grid-template-columns: 1fr 1fr;
  }

  .kontakt-layout {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .kontakt-layout .kontakt-info {
    grid-column: 1;
    grid-row: auto;
    margin-bottom: var(--space-12);
  }

  .kontakt-layout .contact-form {
    grid-column: 1;
    grid-row: auto;
    margin-bottom: var(--space-4);
  }

  .kontakt-layout .form-submit {
    grid-column: 1;
    grid-row: auto;
    padding-top: 0;
    margin-bottom: var(--space-12);
  }

  .kontakt-layout .kontakt-forhandler {
    grid-column: 1;
    grid-row: auto;
  }

  .footer-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  :root {
    --space-16: 5rem;
    --space-24: 7rem;
  }

  .nav {
    padding: var(--space-1) var(--space-4);
  }

  .nav-links {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-8);
    position: fixed;
    inset: 0;
    padding-top: 6rem;
    background-color: var(--color-bg-alt);
    z-index: 102;
    /* Hidden state */
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition:
      opacity var(--duration-base) var(--ease-out),
      visibility var(--duration-base) var(--ease-out);
  }

  .nav-links.is-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }

  /* Always dark text on the overlay, regardless of page type.
     Repeated hero selector overrides body.has-hero .nav-links a (same specificity, later source order). */
  .nav-links a,
  body.has-hero .nav-links a {
    font-size: var(--size-base);
    color: var(--color-text);
    opacity: 0.75;
  }

  .nav-links a:hover,
  .nav-links a[aria-current="page"] {
    opacity: 1;
  }

  /* I overlay-menuen bærer hvert link sin egen linje i en kolonne;
     en understregning ville læse som en tabelrække. */
  .nav-links a::after {
    display: none;
  }

  .nav-toggle {
    display: flex;
    position: relative;
    z-index: 200;
  }

  .site-header.nav-is-open {
    z-index: 103;
  }

  .nav.is-open .nav-toggle span {
    background-color: var(--color-text);
  }

  .nav.is-open .nav-toggle span:nth-child(1) {
    transform: translateY(3px) rotate(45deg);
  }

  .nav.is-open .nav-toggle span:nth-child(2) {
    transform: translateY(-3px) rotate(-45deg);
  }

  .container {
    padding: 0 var(--space-4);
  }

  .hero-content {
    position: absolute;
    bottom: 0;
    left: 0;
    width: auto;
    padding: 0 var(--space-3) var(--space-4);
  }

  .hero-headline {
    margin-left: 0;
    margin-bottom: 0;
  }

  .product-text-column {
    padding: var(--space-8) var(--space-4);
  }

  /* Samme model som på desktop; kun kortets egen polstring strammes.
     Rammemålet kommer fra --gutter-page, som allerede er 16 px her. */
  .site-footer {
    padding:
      calc(var(--nav-h) + var(--gutter-page))
      var(--gutter-page)
      var(--gutter-page);
  }

  .footer-card {
    /* 24 px frem for 32: kortet er sidens gulv på en 390 px skærm, og
       den brede polstring stjal både højde og de px, sloganet skal
       bruge ved siden af mærket. */
    padding: var(--space-3);
    /* Kortet er højt på mobil, så minimumsafstanden ned til bundlinjen
       strammes — ellers bliver footeren højere end skærmen, og kortets
       overkant skubbes op bag topbaren. */
    margin-bottom: var(--space-4);
  }

  /* Fem ikoner plus trekanten skal kunne stå på én linje i kortets 294 px
     ved 390 px skærm: 5x40 + 4x8 + trekantens 28 = 260. Ved 320 px slår
     ombrydningen alligevel til, og flex-end holder da trekanten nede ved
     den nederste ikonrække i stedet for at hænge midt i luften. */
  .footer-social-row {
    align-items: flex-end;
    gap: var(--space-3);
    padding-top: var(--space-2);
  }

  .footer-social-icons {
    gap: var(--space-1);
  }

  /* Mærke og slogan bliver side om side også her; kun afstanden
     mellem dem strammes. */
  .footer-card-header {
    gap: var(--space-4);
    padding-bottom: var(--space-2);
  }

  .footer-grid {
    grid-template-columns: 1fr;
    gap: 0;
    padding: var(--space-1) 0;
  }

  .footer-grid-col {
    gap: 0;
    border-bottom: 1px solid rgba(252, 250, 248, 0.12);
  }

  .footer-grid-col:last-child {
    border-bottom: none;
  }

  .footer-bottom-bar {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-1);
  }

  .values-grid {
    grid-template-columns: 1fr;
    gap: var(--space-6);
  }

  .om-os-body {
    padding: 0 var(--space-4);
  }

  .not-found {
    padding: calc(var(--space-8) + 72px) var(--space-4) var(--space-8);
  }

  /* ── Image tagline: 3 rows ─────────────────────────────── */

  .image-tagline p {
    flex-direction: column;
    align-items: center;
    gap: 0.15em;
    line-height: 1.25;
    font-size: 3rem;
  }

  .tl-desktop { display: none; }
  .tl-mobile  { display: block; }

  .image-tagline .word-cycle {
    top: 0;
    margin-right: 0;
    height: 1.25em;        /* reserve space — children are position:absolute so container collapses to 0 otherwise */
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .image-tagline .word-cycle .word-cycle__word {
    left: 50%;
    bottom: auto;
    top: 50%;
    transform: translateX(-50%) translateY(calc(-50% - 10px));
  }

  .image-tagline .word-cycle .word-cycle__word.is-current {
    transform: translateX(-50%) translateY(-50%);
  }

  @keyframes wc-enter-mobile {
    from { opacity: 0; filter: blur(8px); transform: translateX(-50%) translateY(calc(-50% - 10px)); }
    to   { opacity: 1; filter: blur(0);   transform: translateX(-50%) translateY(-50%); }
  }

  @keyframes wc-exit-mobile {
    from { opacity: 1; filter: blur(0);   transform: translateX(-50%) translateY(-50%); }
    to   { opacity: 0; filter: blur(8px); transform: translateX(-50%) translateY(calc(-50% + 10px)); }
  }

  .image-tagline .word-cycle .word-cycle__word.is-entering {
    animation: wc-enter-mobile 0.4s ease-out forwards;
  }

  .image-tagline .word-cycle .word-cycle__word.is-exiting {
    animation: wc-exit-mobile 0.3s ease-in forwards;
  }

  /* ── Gallery strip: stacked ────────────────────────────── */

  .product-gallery-strip {
    grid-template-columns: 1fr;
  }

  .gallery-note {
    padding: var(--space-8) var(--space-6);
  }

  .philosophy-headline {
    font-size: clamp(var(--size-lg), 5vw, var(--size-xl));
  }

  /* ── Footer accordion ──────────────────────────────────── */

  .footer-acc-btn {
    display: flex;
    width: 100%;
    justify-content: space-between;
    align-items: center;
    background: none;
    border: none;
    cursor: pointer;
    /* 16 px over og under en 18 px linjeboks giver en 50 px høj række:
       stadig et komfortabelt trykfelt, men uden de 32 px, der gjorde
       fire lukkede grupper til 340 px tom oliven. */
    padding: var(--space-2) 0;
    font-family: var(--font-ui);
    font-weight: 300;
    font-size: var(--size-sm);
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba(252, 250, 248, 0.85);
    text-align: left;
  }

  .footer-acc-btn:focus-visible {
    outline: 2px solid rgba(252, 250, 248, 0.4);
    outline-offset: 2px;
    border-radius: 2px;
  }

  .footer-acc-icon {
    display: inline-block;
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    position: relative;
    transition: transform 0.3s ease;
  }

  .footer-acc-icon::before,
  .footer-acc-icon::after {
    content: '';
    position: absolute;
    background-color: rgba(252, 250, 248, 0.55);
  }

  .footer-acc-icon::before {
    width: 100%;
    height: 1px;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
  }

  .footer-acc-icon::after {
    width: 1px;
    height: 100%;
    left: 50%;
    top: 0;
    transform: translateX(-50%);
  }

  .footer-acc-btn[aria-expanded="true"] .footer-acc-icon {
    transform: rotate(45deg);
  }

  .footer-acc-panel {
    max-height: 0;
    overflow: hidden;
    visibility: hidden;
    transition:
      max-height 0.35s var(--ease-out),
      visibility 0s linear 0.35s;
  }

  .footer-acc-panel.is-open {
    visibility: visible;
    padding-bottom: var(--space-2);
    transition:
      max-height 0.35s var(--ease-out),
      visibility 0s linear 0s;
  }
}

@media (max-width: 768px) and (prefers-reduced-motion: no-preference) {
  .nav-links {
    transform: translateY(-8px);
    transition:
      opacity var(--duration-base) var(--ease-out),
      transform var(--duration-base) var(--ease-out),
      visibility var(--duration-base) var(--ease-out);
  }

  .nav-links.is-open {
    transform: translateY(0);
  }
}


/* ── Samples trail section ──────────────────────────────────── */

.samples-section {
  position: relative;
  overflow: hidden;
  background: var(--color-bg);
  border-top: 1px solid var(--color-border);
}

/* Desktop: fixed-height interactive zone */
@media (hover: hover) and (pointer: fine) {
  .samples-section {
    min-height: 460px;
    padding-bottom: var(--space-12);
    cursor: crosshair;
  }
}

/* Mobile / touch: padding-based layout */
@media (hover: none), (pointer: coarse) {
  .samples-section {
    padding: var(--space-12) 0 var(--space-16);
  }
}

.samples-trail-canvas {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

.samples-content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  pointer-events: none;
  padding: var(--space-8);
  gap: 0;
}

@media (hover: hover) and (pointer: fine) {
  .samples-content {
    position: absolute;
    inset: 0;
    padding: 0;
  }
}

.samples-eyebrow {
  font-family: var(--font-ui);
  font-weight: 300;
  font-size: var(--size-sm);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  display: block;
  margin-bottom: var(--space-3);
}

.samples-stat-line {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(4.5rem, 16vw, 11rem);
  line-height: 0.9;
  letter-spacing: -0.04em;
  color: var(--color-text);
  display: block;
  white-space: nowrap;
}

/* Mobile marquee strip — hidden on desktop */
.samples-mobile-strip {
  display: none;
}

@media (hover: none), (pointer: coarse) {
  .samples-mobile-strip {
    display: block;
    overflow: hidden;
    margin-top: var(--space-6);
    -webkit-mask-image: linear-gradient(
      to right,
      transparent 0%,
      black 12%,
      black 88%,
      transparent 100%
    );
    mask-image: linear-gradient(
      to right,
      transparent 0%,
      black 12%,
      black 88%,
      transparent 100%
    );
  }

  .samples-mobile-track {
    display: flex;
    gap: var(--space-2);
    width: max-content;
  }

  .samples-mobile-track img {
    width: 80px;
    height: 80px;
    object-fit: cover;
    border-radius: var(--radius-md);
    flex-shrink: 0;
  }
}

@keyframes samplesMarquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

@media (hover: none) and (prefers-reduced-motion: no-preference),
       (pointer: coarse) and (prefers-reduced-motion: no-preference) {
  .samples-mobile-track {
    animation: samplesMarquee 20s linear infinite;
  }
}

/* Trail images (spawned by JS on desktop) */
.trail-img {
  position: absolute;
  pointer-events: none;
  width: 88px;
  height: 88px;
  border-radius: var(--radius-md);
  overflow: hidden;
  z-index: 1;
  will-change: transform, opacity;
}

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


/* ── Samples editorial note ─────────────────────────────────── */

.samples-editorial {
  padding: var(--space-12) var(--space-8);
  border-top: 1px solid var(--color-border);
  background: var(--color-bg-alt);
}

.samples-editorial-inner {
  max-width: var(--max-width);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-12);
  align-items: start;
}

.samples-editorial-heading {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(var(--size-xl), 3vw, var(--size-3xl));
  letter-spacing: -0.02em;
  line-height: 1.15;
  color: var(--color-text);
  margin: 0;
}

.samples-editorial-text {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: var(--size-md);
  line-height: 1.85;
  color: var(--color-text);
  opacity: 0.82;
  margin: 0;
  max-width: 480px;
  padding-top: 0.25em;
}

@media (max-width: 768px) {
  .samples-editorial {
    padding: var(--space-8) var(--space-4);
    border-top: none;
    margin-bottom: var(--space-8);
  }

  .samples-editorial-inner {
    grid-template-columns: 1fr;
    gap: var(--space-4);
  }

  .samples-editorial-text {
    max-width: none;
    padding-top: 0;
  }

  .samples-stat-line {
    font-size: clamp(3rem, 14vw, 4.5rem);
  }
}


/* ============================================================
   Komponenter tilføjet ved overhalingen august 2026
   ============================================================ */

/* ── Gallery strip: billedcelle + note ──────────────────────── */

.gallery-media {
  position: relative;
  overflow: hidden;
  aspect-ratio: 4 / 3;
}

.gallery-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

/* Sunk Cream, ikke en femte farve: #EFF3E5 er rgba(43,43,43,0.035) lagt på
   cremen og gjort uigennemsigtig. Fladen skal være tæt på sidens egen, så
   billedet ved siden af er det, der bærer kontrasten — ikke panelet. */
.gallery-note {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-8);
  background-color: var(--color-surface-sink);
}

.gallery-note__inner {
  max-width: 380px;
}

.gallery-note__label {
  font-family: var(--font-ui);
  font-weight: 300;
  font-size: var(--size-xs);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-accent-ink);
  display: block;
  margin-bottom: var(--space-3);
}

.gallery-note__headline {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(var(--size-lg), 2.5vw, 2.2rem);
  line-height: 1.25;
  letter-spacing: -0.02em;
  color: var(--color-text);
  margin-bottom: var(--space-4);
}

.gallery-note__text {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 1.0625rem;
  line-height: 1.8;
  color: var(--color-text);
  opacity: 0.75;
}


/* ── Tekstlink med pil ──────────────────────────────────────── */

.link-inline,
.gallery-note__link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  margin-top: var(--space-4);
  font-family: var(--font-ui);
  font-weight: 400;
  font-size: var(--size-sm);
  letter-spacing: 0.06em;
  color: var(--color-accent-ink);
  border-bottom: 1px solid transparent;
  transition:
    color var(--duration-fast) var(--ease-out),
    border-color var(--duration-fast) var(--ease-out);
}

.link-inline svg,
.gallery-note__link svg {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
  transition: transform var(--duration-base) var(--ease-out);
}

.link-inline:hover,
.gallery-note__link:hover {
  color: var(--color-accent-hover);
  border-bottom-color: var(--color-accent-hover);
}

@media (prefers-reduced-motion: no-preference) {
  .link-inline:hover svg,
  .gallery-note__link:hover svg {
    transform: translateX(3px);
  }
}

.link-inline:active,
.gallery-note__link:active {
  transform: scale(0.98);
}


/* ── Om os: principper-intro ────────────────────────────────── */

.values-intro {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--space-8);
}

.values-headline {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(var(--size-lg), 2.2vw, 2rem);
  letter-spacing: -0.02em;
  line-height: 1.1;
  color: var(--color-text);
  max-width: 500px;
}

@media (max-width: 768px) {
  .values-intro {
    padding: 0 var(--space-4);
  }
}


/* ── 404: sekundær navigation ───────────────────────────────── */

.not-found-nav {
  margin-top: var(--space-16);
  padding-top: var(--space-8);
  border-top: 1px solid var(--color-border);
  width: 100%;
}

.not-found-nav__label {
  font-family: var(--font-ui);
  font-weight: 300;
  font-size: var(--size-xs);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  display: block;
  margin-bottom: var(--space-4);
}

.not-found-nav__list {
  display: flex;
  gap: var(--space-8);
  flex-wrap: wrap;
}

.not-found-nav__list a {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: var(--size-base);
  color: var(--color-text);
  opacity: 0.72;
  border-bottom: 1px solid transparent;
  transition:
    opacity var(--duration-fast) var(--ease-out),
    border-color var(--duration-fast) var(--ease-out);
}

.not-found-nav__list a:hover {
  opacity: 1;
  border-bottom-color: var(--color-border);
}


/* ── Footer: link der opfører sig som knap ──────────────────── */

.footer-link-btn {
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  letter-spacing: inherit;
  cursor: pointer;
  padding: 0;
  text-align: left;
  background: none;
  border: none;
}


/* ── Cookiesamtykke ─────────────────────────────────────────── */

/* Et tværgående bånd, ikke et kort der svæver. Fladen løber fra kant til
   kant og sidder klods op ad bunden, mens indholdet holder sig inden for
   sidens egen container-rytme — så banneret flugter med alt andet på siden
   frem for at ligge ovenpå som et fremmed element.

   Ingen hårstreg foroven: et mørkt bånd er sin egen adskillelse (DESIGN.md).
   Skyggen er skåret ned til ét lag, og den er der udelukkende, fordi båndet
   svæver hen over rullende indhold — ikke for at markere selve fladen.
   Den mørke flade sættes med .surface--dark på .consent, så baggrunden når
   helt ud i kanterne og tokens nedarver til hele båndet. */

.consent {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 200;
  /* Oliventonet frem for neutral grå — se CLAUDE.md. */
  box-shadow: 0 -16px 40px rgba(115, 123, 76, 0.10);
}

.consent__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
  max-width: var(--max-width);
  margin: 0 auto;
  padding: var(--space-3) var(--space-8);
}

.consent__title {
  font-family: var(--font-ui);
  font-weight: 300;
  font-size: var(--size-xs);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-accent-ink);
  margin-bottom: var(--space-1);
}

/* Dæmpning ligger i farven, ikke i opacity: opacity komponerer hele
   undertræet, så et link inde i afsnittet ville blive dæmpet med — og
   falde under AA. Farvekanalen rammer kun teksten selv. */
.consent__body {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 0.875rem;
  line-height: 1.65;
  color: var(--color-text-dim);
  /* 52ch stammer fra kortet, der kun var 880px bredt. I et tværgående bånd
     brækker det teksten i tre linjer og efterlader «Læs cookiepolitikken»
     delt over et linjeskift. 72ch holder sig inden for det læsbare spænd og
     lander på to linjer i den bredde båndet faktisk har. */
  max-width: 72ch;
}

/* Forælderens opacity ville også dæmpe linket ned under AA. */
/* Holder «Læs cookiepolitikken» samlet, så linket ikke knækker over to
   linjer på smalle skærme. */
.consent__body a {
  white-space: nowrap;
  color: var(--color-accent-ink);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  transition: color var(--duration-fast) var(--ease-out);
}

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

.consent__actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-shrink: 0;
}

.consent__actions .btn {
  padding: 0.7em 1.4em;
  white-space: nowrap;
}

/* Båndet kommer op fra kanten — det er dét, bevægelsen skal sige. Ingen fade
   oveni: en halvgennemsigtig mørk flade hen over brødteksten er et grimt
   mellemtrin. Uden JS-drevet animation er banneret bare til stede med det
   samme. */
@media (prefers-reduced-motion: no-preference) {
  .consent {
    transform: translateY(100%);
    transition: transform var(--duration-slow) var(--ease-out);
  }

  .consent.is-open {
    transform: translateY(0);
  }
}

@media (max-width: 768px) {
  .consent__inner {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
  }

  /* Knapperne lå og passede på præcis 326,0px ved 390px bredde — nul slack.
     «Kun nødvendige» kan ikke ombrydes og har en min-bredde på 162px, så et
     lidt bredere system-font eller 320px-skærme skubbede «Accepter» ud over
     kanten. Med wrap og en basis på 9rem står de ved siden af hinanden, så
     længe der er plads til begge, og falder ellers ned under hinanden. */
  .consent__actions {
    flex-wrap: wrap;
  }

  .consent__actions .btn {
    flex: 1 1 9rem;
    justify-content: center;
  }
}

@media print {
  .consent { display: none; }
}


/* ── Juridiske sider ────────────────────────────────────────── */

/* Samme container som .om-os-body og .kontakt-layout, så venstrekanten
   flugter med resten af siden. Selve læsespalten holdes smal indeni. */
.legal-body {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: var(--space-12) var(--space-8) var(--space-16);
}

.legal-body > * {
  max-width: 780px;
}

.legal-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-4);
  padding-bottom: var(--space-6);
  margin-bottom: var(--space-8);
  border-bottom: 1px solid var(--color-border);
  font-family: var(--font-ui);
  font-weight: 300;
  font-size: var(--size-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

/* Springnavigation. Politikker læses sjældent fra ende til anden — folk
   leder efter ét afsnit. */
.legal-toc {
  margin-bottom: var(--space-12);
}

.legal-toc__label {
  font-family: var(--font-ui);
  font-weight: 300;
  font-size: var(--size-xs);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-accent-ink);
  display: block;
  margin-bottom: var(--space-3);
}

.legal-toc__list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-1) var(--space-4);
  counter-reset: legal-toc;
}

.legal-toc__list li {
  counter-increment: legal-toc;
}

.legal-toc__list a {
  display: flex;
  gap: var(--space-1);
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--color-text);
  opacity: 0.7;
  transition: opacity var(--duration-fast) var(--ease-out);
}

.legal-toc__list a::before {
  content: counter(legal-toc, decimal-leading-zero);
  font-family: var(--font-ui);
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
  color: var(--color-accent);
  flex-shrink: 0;
  padding-top: 0.28em;
}

.legal-toc__list a:hover {
  opacity: 1;
}

.legal-section + .legal-section {
  margin-top: var(--space-12);
}

.legal-section > h2 {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(var(--size-lg), 2.6vw, var(--size-xl));
  letter-spacing: -0.02em;
  line-height: 1.15;
  color: var(--color-text);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-border);
  margin-bottom: var(--space-4);
}

.legal-section h3 {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 1rem;
  letter-spacing: 0.01em;
  color: var(--color-text);
  margin-top: var(--space-6);
  margin-bottom: var(--space-2);
}

/* Dæmpning ligger i farven, ikke i opacity: opacity komponerer hele
   undertræet, så et link inde i afsnittet ville blive dæmpet med — og
   falde under AA. Farvekanalen rammer kun teksten selv. */
.legal-section p,
.legal-section li {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 1.0625rem;
  line-height: 1.8;
  color: var(--color-text-dim);
  max-width: 65ch;
}

.legal-section p + p,
.legal-section p + ul,
.legal-section ul + p {
  margin-top: var(--space-2);
}

.legal-section ul {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding-left: var(--space-3);
}

.legal-section li {
  position: relative;
  padding-left: var(--space-2);
}

.legal-section li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.82em;
  width: 5px;
  height: 1px;
  background-color: var(--color-accent);
}

.legal-section a {
  color: var(--color-accent-ink);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  transition: color var(--duration-fast) var(--ease-out);
}

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

/* Knap midt i en sætning — fx "træk samtykket tilbage her". Skal læse som et
   link, men være en knap, fordi den udfører en handling frem for at navigere. */
.legal-inline-btn {
  font: inherit;
  color: var(--color-accent-ink);
  cursor: pointer;
  padding: 0;
  background: none;
  border: none;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  transition: color var(--duration-fast) var(--ease-out);
}

.legal-inline-btn:hover {
  color: var(--color-accent-hover);
}

/* Faktaboks: dataansvarlig, kontakt og lignende korte opslag. */
.legal-facts {
  background-color: var(--color-surface-tint);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  margin-top: var(--space-4);
  display: grid;
  grid-template-columns: 180px 1fr;
  gap: var(--space-2) var(--space-4);
}

.legal-facts dt {
  font-family: var(--font-ui);
  font-weight: 300;
  font-size: var(--size-xs);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  padding-top: 0.35em;
}

.legal-facts dd {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 1rem;
  line-height: 1.65;
  color: var(--color-text);
}

/* Cookietabellen. Vandret scroll i egen container, aldrig på siden. */
.legal-table-wrap {
  margin-top: var(--space-4);
  overflow-x: auto;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}

.legal-table {
  width: 100%;
  min-width: 560px;
  border-collapse: collapse;
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 0.9375rem;
  text-align: left;
}

.legal-table th {
  font-family: var(--font-ui);
  font-weight: 400;
  font-size: var(--size-xs);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  background-color: var(--color-surface-tint);
  padding: var(--space-2);
  border-bottom: 1px solid var(--color-border);
  white-space: nowrap;
}

/* Dæmpning ligger i farven, ikke i opacity: opacity komponerer hele
   undertræet, så et link inde i afsnittet ville blive dæmpet med — og
   falde under AA. Farvekanalen rammer kun teksten selv. */
.legal-table td {
  padding: var(--space-2);
  vertical-align: top;
  line-height: 1.6;
  color: var(--color-text-dim);
  border-bottom: 1px solid var(--color-border-soft);
}

.legal-table tr:last-child td {
  border-bottom: none;
}

.legal-table code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.8125em;
  letter-spacing: 0;
  color: var(--color-accent-ink);
}

@media (max-width: 768px) {
  .legal-body {
    padding: var(--space-8) var(--space-4) var(--space-12);
  }

  .legal-toc__list {
    grid-template-columns: 1fr;
  }

  .legal-facts {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .legal-facts dt {
    margin-top: var(--space-2);
  }

  .legal-facts dt:first-child {
    margin-top: 0;
  }
}


/* ── Produktside ────────────────────────────────────────────── */

.produkt-section {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: var(--space-16) var(--space-8);
}

/* Fuldbreddet sektion uden egen flade. /produktet har tre af dem, og gør man
   dem alle mørke, bliver siden zebrastribet. Kun ét bånd bærer vægten
   (.surface--dark på opmærksomhedspunkterne); de øvrige adskilles af en
   hårstreg alene. */
.produkt-section--alt {
  max-width: none;
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
}

/* Det mørke bånd er sin egen adskillelse. En cremefarvet hårstreg oven på
   den ville bare læse som en løs kant. */
.produkt-section--alt.surface--dark {
  border-color: transparent;
}

.produkt-section--alt > * {
  max-width: var(--max-width);
  margin-left: auto;
  margin-right: auto;
}

.produkt-heading {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(var(--size-lg), 2.2vw, 2rem);
  line-height: 1.1;
  letter-spacing: -0.025em;
  color: var(--color-text);
  max-width: 620px;
}

.produkt-lead {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: var(--size-md);
  line-height: 1.8;
  color: var(--color-text);
  opacity: 0.78;
  max-width: 58ch;
  margin-top: var(--space-4);
}

/* ── Produktportræt ─────────────────────────────────────────── */

.produkt-portrait {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: stretch;
  border-bottom: 1px solid var(--color-border);
}

.produkt-portrait__media {
  overflow: hidden;
  min-height: 520px;
}

.produkt-portrait__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 40%;
}

.produkt-portrait__facts {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--space-3);
  padding: var(--space-12) var(--space-8);
}

.produkt-portrait__row {
  display: grid;
  grid-template-columns: 150px 1fr;
  gap: var(--space-4);
  align-items: baseline;
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--color-border-soft);
  max-width: 460px;
}

.produkt-portrait__row:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.produkt-portrait__key {
  font-family: var(--font-ui);
  font-weight: 300;
  font-size: var(--size-xs);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.produkt-portrait__value {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--color-text);
}

/* ── Ritualet: tre trin ─────────────────────────────────────── */

.ritual-steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-8);
  margin-top: var(--space-8);
}

.ritual-step {
  border-top: 1px solid var(--color-border);
  padding-top: var(--space-4);
}

.ritual-step__number {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: var(--size-xl);
  letter-spacing: -0.02em;
  color: var(--color-accent-ink);
  line-height: 1;
  margin-bottom: var(--space-3);
}

.ritual-step__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.25rem;
  letter-spacing: -0.01em;
  color: var(--color-text);
  margin-bottom: var(--space-2);
}

.ritual-step__text {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 0.9375rem;
  line-height: 1.75;
  color: var(--color-text);
  opacity: 0.78;
}

/* ── Opmærksomhedspunkter ───────────────────────────────────── */

.notes {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-6) var(--space-12);
  margin-top: var(--space-8);
}

.note {
  border-top: 1px solid var(--color-border);
  padding-top: var(--space-4);
}

.note__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.1875rem;
  letter-spacing: -0.01em;
  line-height: 1.3;
  color: var(--color-text);
  margin-bottom: var(--space-2);
}

.note__text {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 0.9375rem;
  line-height: 1.8;
  color: var(--color-text);
  opacity: 0.8;
  max-width: 46ch;
}

.note__text + .note__text {
  margin-top: var(--space-1);
}

/* Afsluttende bemærkning under punkterne — ikke en advarselskasse. */
.notes-footnote {
  margin-top: var(--space-8);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-border);
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 0.9375rem;
  line-height: 1.8;
  color: var(--color-text);
  opacity: 0.7;
  max-width: 62ch;
}

/* ── Ingredienser ───────────────────────────────────────────── */

/* Ingen egen streg: .product-accordion-item ovenfor har allerede en
   border-bottom, og to streger med 4 rem imellem så ud som en tom række. */
.inci {
  margin-top: var(--space-6);
}

.inci__label {
  font-family: var(--font-ui);
  font-weight: 300;
  font-size: var(--size-xs);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  display: block;
  margin-bottom: var(--space-3);
}

/* Løbende tekst frem for punktopstilling: INCI er én liste i faldende
   rækkefølge, ikke en række uafhængige punkter. */
/* Dæmpningen lå i opacity, og de fremhævede stoffer forsøgte at slippe fri
   med opacity: 1. Det kan et barn ikke — opacity komponerer hele undertræet,
   så oliven blev renderet ved 0,72 og faldt til 2,89:1. Dæmpningen ligger
   derfor i farvekanalen, og em'et kan nå fuld styrke. */
.inci__list {
  font-family: var(--font-ui);
  font-weight: 300;
  font-size: 0.8125rem;
  letter-spacing: 0.06em;
  line-height: 2.1;
  color: rgba(43, 43, 43, 0.72);
  max-width: 72ch;
}

.inci__list em {
  font-style: normal;
  color: var(--color-accent-ink);
}

.inci__note {
  margin-top: var(--space-3);
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 0.875rem;
  line-height: 1.75;
  color: var(--color-text);
  opacity: 0.68;
  max-width: 60ch;
}

/* ── Anmeldelser ────────────────────────────────────────────── */

.quotes {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-8);
  margin-top: var(--space-8);
}

.quote {
  border-top: 1px solid var(--color-border);
  padding-top: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.quote blockquote {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: 1.1875rem;
  line-height: 1.5;
  letter-spacing: -0.01em;
  color: var(--color-text);
  flex: 1;
}

.quote figcaption {
  font-family: var(--font-ui);
  font-weight: 300;
  font-size: var(--size-xs);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
}

.quote figcaption span:not(:last-child)::after {
  content: ' ·';
  color: var(--color-accent);
}

.quotes-source {
  margin-top: var(--space-6);
  font-family: var(--font-ui);
  font-weight: 300;
  font-size: var(--size-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.quotes-source a {
  color: var(--color-accent-ink);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ── Afsluttende CTA ────────────────────────────────────────── */

/* Ligger inde i en .produkt-section, som allerede har sin egen ramme —
   derfor ingen padding her. */
.cta-band {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-4);
  max-width: var(--max-width);
  margin: 0 auto;
}

.cta-band__price {
  font-family: var(--font-ui);
  font-weight: 300;
  font-size: var(--size-sm);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

/* ── Responsivt ─────────────────────────────────────────────── */

@media (max-width: 1024px) {
  .ritual-steps,
  .quotes {
    grid-template-columns: 1fr;
    gap: var(--space-6);
  }

  .notes {
    gap: var(--space-6);
  }
}

@media (max-width: 900px) {
  .produkt-portrait {
    grid-template-columns: 1fr;
  }

  .produkt-portrait__media {
    min-height: 0;
    aspect-ratio: 4 / 5;
  }

  .produkt-portrait__facts {
    padding: var(--space-8) var(--space-4);
  }
}

@media (max-width: 768px) {
  .produkt-section {
    padding: var(--space-8) var(--space-4);
  }

  .notes {
    grid-template-columns: 1fr;
  }

  .produkt-portrait__row {
    grid-template-columns: 1fr;
    gap: var(--space-1);
  }
}


/* ── Forside: ritual-teaser ─────────────────────────────────── */

.ritual-teaser {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: var(--space-16) var(--space-8);
  display: grid;
  grid-template-columns: 1fr 1.25fr;
  gap: var(--space-16);
  align-items: start;
  border-top: 1px solid var(--color-border);
}

.ritual-teaser__headline {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(var(--size-lg), 2.2vw, 1.875rem);
  line-height: 1.1;
  letter-spacing: -0.025em;
  color: var(--color-text);
}

.ritual-teaser__body p {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: var(--size-md);
  line-height: 1.8;
  color: var(--color-text);
  opacity: 0.78;
  max-width: 54ch;
}

.ritual-teaser__body p + p {
  margin-top: var(--space-2);
}

@media (max-width: 1024px) {
  .ritual-teaser {
    grid-template-columns: 1fr;
    gap: var(--space-6);
  }
}

@media (max-width: 768px) {
  .ritual-teaser {
    padding: var(--space-8) var(--space-4);
  }
}


/* ── Journal: oversigt ──────────────────────────────────────── */

.journal-list {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: var(--space-16) var(--space-8);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-8);
}

.journal-card-wrap {
  display: flex;
}

.journal-card {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: var(--space-3);
}

.journal-card__media {
  overflow: hidden;
  border-radius: var(--radius-sm);
  aspect-ratio: 4 / 5;
  /* Pladsholder bag billedet — dækkes altid, men må ikke blinke hvidt. */
  background-color: var(--color-surface-tint);
}

.journal-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--duration-slower) var(--ease-out);
}

@media (prefers-reduced-motion: no-preference) {
  .journal-card:hover .journal-card__media img {
    transform: scale(1.03);
  }
}

.journal-card__kicker {
  font-family: var(--font-ui);
  font-weight: 300;
  font-size: var(--size-xs);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-accent-ink);
}

.journal-card__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.375rem;
  line-height: 1.25;
  letter-spacing: -0.015em;
  color: var(--color-text);
  text-wrap: balance;
}

.journal-card:hover .journal-card__title {
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-thickness: 1px;
}

.journal-card__lead {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 0.9375rem;
  line-height: 1.75;
  color: var(--color-text);
  opacity: 0.72;
}

.journal-card__date {
  font-family: var(--font-ui);
  font-weight: 300;
  font-size: var(--size-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-top: auto;
  padding-top: var(--space-1);
}


/* ── Journal: artikel ───────────────────────────────────────── */

.article-header {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: calc(var(--space-16) + 80px) var(--space-8) var(--space-8);
}

.article-kicker {
  font-family: var(--font-ui);
  font-weight: 300;
  font-size: var(--size-xs);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-accent-ink);
  display: block;
  margin-bottom: var(--space-4);
}

.article-title {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(var(--size-2xl), 5vw, 4.25rem);
  line-height: 1.05;
  letter-spacing: -0.03em;
  color: var(--color-text);
  max-width: 16ch;
  text-wrap: balance;
}

.article-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-4);
  margin-top: var(--space-6);
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-border);
  max-width: 680px;
  font-family: var(--font-ui);
  font-weight: 300;
  font-size: var(--size-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.article-hero {
  width: 100%;
  overflow: hidden;
}

.article-hero img {
  width: 100%;
  height: clamp(320px, 46vw, 620px);
  object-fit: cover;
}

.article-hero figcaption,
.article-figure figcaption {
  max-width: var(--max-width);
  margin: var(--space-2) auto 0;
  padding: 0 var(--space-8);
  font-family: var(--font-ui);
  font-weight: 300;
  font-size: var(--size-xs);
  letter-spacing: 0.08em;
  color: var(--color-text-muted);
}

.article-body {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: var(--space-12) var(--space-8) var(--space-16);
}

.article-body > * {
  max-width: 680px;
}

/* Redaktionel indholdsoversigt. Kapitlerne ligger før brødteksten, så den
   lange artikel kan aflæses som en hel fortælling, før man går ind i den. */
.article-body > .article-contents {
  max-width: 780px;
}

.article-contents {
  display: grid;
  grid-template-columns: 160px minmax(0, 1fr);
  gap: var(--space-4);
  margin-bottom: var(--space-6);
  padding: var(--space-3) 0;
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
}

.article-contents__label {
  font-family: var(--font-ui);
  font-weight: 300;
  font-size: var(--size-xs);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.article-contents ol {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.article-contents li {
  padding-left: 0;
  font-family: var(--font-body);
  font-size: var(--size-base);
  line-height: 1.5;
}

.article-contents li::before {
  display: none;
}

.article-contents a {
  color: var(--color-text);
  text-decoration-color: var(--color-border);
  transition: color var(--duration-fast) var(--ease-out),
              text-decoration-color var(--duration-fast) var(--ease-out);
}

.article-contents a:hover {
  color: var(--color-accent-hover);
  text-decoration-color: var(--color-accent);
}

.article-lead {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: var(--size-lg);
  line-height: 1.7;
  color: var(--color-text);
  opacity: 0.88;
  margin-bottom: var(--space-6);
}

.article-body h2 {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(var(--size-lg), 2.6vw, var(--size-xl));
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--color-text);
  margin-top: var(--space-8);
  margin-bottom: var(--space-3);
}

.article-body h2[id] {
  scroll-margin-top: 120px;
}

/* Dæmpning ligger i farven, ikke i opacity: opacity komponerer hele
   undertræet, så et link inde i afsnittet ville blive dæmpet med — og
   falde under AA. Farvekanalen rammer kun teksten selv. */
.article-body p {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 1.0625rem;
  line-height: 1.85;
  color: rgba(43, 43, 43, 0.85);
}

.article-body p + p {
  margin-top: var(--space-2);
}

.article-body ul {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  margin-top: var(--space-2);
  padding-left: var(--space-3);
}

/* Dæmpning ligger i farven, ikke i opacity: opacity komponerer hele
   undertræet, så et link inde i afsnittet ville blive dæmpet med — og
   falde under AA. Farvekanalen rammer kun teksten selv. */
.article-body li {
  position: relative;
  padding-left: var(--space-2);
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 1.0625rem;
  line-height: 1.85;
  color: rgba(43, 43, 43, 0.85);
}

.article-body li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.88em;
  width: 5px;
  height: 1px;
  background-color: var(--color-accent);
}

.article-body a {
  color: var(--color-accent-ink);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  transition: color var(--duration-fast) var(--ease-out);
}

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

/* Pull quote — bryder spalten og markerer artiklens omdrejningspunkt. */
.article-pull {
  max-width: 780px;
  margin: var(--space-8) 0;
  padding: var(--space-4) 0 var(--space-4) var(--space-4);
  border-left: 1px solid var(--color-accent);
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(1.375rem, 2.6vw, 1.875rem);
  line-height: 1.35;
  letter-spacing: -0.02em;
  color: var(--color-text);
}

/* Figuren må gerne bryde tekstspalten, men kun så meget som .article-pull.
   Uden loft rendererede et portrætbillede 1152 x 1536 px — halvanden
   skærmhøjde. Højden får derfor et loft, der følger vinduet: på mobil er
   et portrætbillede lavere end 70vh og beskæres slet ikke, på desktop
   klippes det til et roligt bånd. */
.article-figure {
  max-width: 780px;
  margin: var(--space-8) 0;
}

.article-figure img {
  width: 100%;
  height: auto;
  max-height: min(70vh, 620px);
  object-fit: cover;
  object-position: center 30%;
  border-radius: var(--radius-sm);
}

/* Billedteksten hører til figuren, ikke til den fuldbreddede hero, og skal
   flugte med figurens venstrekant. */
.article-body .article-figure figcaption {
  max-width: none;
  padding: 0;
}

/* Læs videre. Fladen kommer fra .surface--dark; det mørke felt lukker
   artiklen af og er sin egen adskillelse fra teksten ovenover. */
.article-more {
  padding-top: 1px;
}

.article-more__inner {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: var(--space-12) var(--space-8);
}

.article-more__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-8);
  margin-top: var(--space-6);
}

/* Bredere format end på oversigten: det her er en fodnote til artiklen,
   ikke en forside. Portrætformatet fyldte 680 px pr. kort. */
.article-more__grid .journal-card__media {
  aspect-ratio: 16 / 10;
}

@media (max-width: 1024px) {
  .journal-list {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .journal-list {
    grid-template-columns: 1fr;
    padding: var(--space-8) var(--space-4);
    gap: var(--space-8);
  }

  .article-header {
    padding: calc(var(--space-8) + 72px) var(--space-4) var(--space-6);
  }

  .article-body {
    padding: var(--space-8) var(--space-4) var(--space-12);
  }

  .article-contents {
    grid-template-columns: 1fr;
    gap: var(--space-2);
  }

  .article-hero figcaption,
  .article-figure figcaption {
    padding: 0 var(--space-4);
  }

  .article-more__inner {
    padding: var(--space-8) var(--space-4);
  }

  .article-more__grid {
    grid-template-columns: 1fr;
    gap: var(--space-6);
  }
}


/* ── Strukturelle mikroetiketter ──────────────────────────────
   Sektions- og kategorietiketter skal kunne aflæses som navigation i
   indholdet. Datoer, metadata og billedtekster forbliver mindre og lettere. */

.hero-tagline,
.section-label,
.brand-story-marker__label,
.product-accordion-tag,
.product-eyebrow,
.page-label,
.form-label,
.kontakt-forhandler__label,
.footer-links-label,
.footer-acc-btn,
.samples-eyebrow,
.gallery-note__label,
.not-found-nav__label,
.consent__title,
.legal-toc__label,
.legal-facts dt,
.produkt-portrait__key,
.inci__label,
.journal-card__kicker,
.article-kicker,
.article-contents__label,
.brugsanvisning-card__kicker,
.usage-track__label {
  font-weight: 600;
  font-size: var(--size-sm);
  font-synthesis: weight;
}


/* ══ BRUGSANVISNING ═══════════════════════════════════════════
   Oversigten (/brugsanvisning) og de enkelte produkters
   brugsanvisning. Alt visuelt forklarende materiale er håndtegnet
   SVG i ét stregsprog — se .ill nedenfor. */


/* ── Illustrationssproget ─────────────────────────────────────
   Én stregvægt, ét pennehoved. `non-scaling-stroke` er det, der
   binder sættet sammen: stregen rammer samme bredde på skærmen,
   uanset om tegningen vises som 44 px glyf eller 320 px ansigtskort
   — præcis som den samme pen ville gøre det på papir. */

.ill {
  display: block;
  width: 100%;
  height: auto;
  color: var(--color-text);
}
.ill path,
.ill circle,
.ill ellipse {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7px;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}
/* Sekundære streger: etiketlinjer, bryn, vævsmarkering. */
.ill .ill-hair {
  stroke-width: 1.2px;
}
/* Zoner: dér hvor cremen skal ligge. Oliven er dekorativ flade her,
   ikke tekst, så --color-accent er den rigtige — se DESIGN.md. */
.ill .ill-zone {
  stroke: var(--color-accent);
  stroke-width: 1.4px;
  fill: var(--color-accent);
  fill-opacity: 0.15;
}
.ill .ill-zone--solid {
  fill-opacity: 0.32;
}
.ill--glyph path,
.ill--glyph circle,
.ill--glyph ellipse {
  stroke-width: 1.5px;
}


/* ── Higgsfield-illustrationerne ──────────────────────────────
   Tegnet i Aesop-referencens markørstreg og gemt som ren alfa: filerne
   har ingen farve, kun gennemsigtighed, og bæres derfor som CSS-masker.
   Stregen får sin farve fra `currentColor` ligesom SVG-glyfferne, den
   står side om side med — ét sæt, én hånd, én farvestyring. */

.ill-mask {
  display: block;
  width: 100%;
  aspect-ratio: var(--ill-ratio, 1);
  background-color: currentColor;
  -webkit-mask: var(--ill) no-repeat center / contain;
  mask: var(--ill) no-repeat center / contain;
}
.ill--produkt     { --ill: url("/assets/img/colm-ill-produkt.webp");     --ill-ratio: 0.730; }
.ill--rens        { --ill: url("/assets/img/colm-ill-rens.webp");        --ill-ratio: 0.954; }
.ill--tyndt-lag   { --ill: url("/assets/img/colm-ill-tyndt-lag.webp");   --ill-ratio: 0.785; }
.ill--nat         { --ill: url("/assets/img/colm-ill-nat.webp");         --ill-ratio: 1.025; }
.ill--ansigt      { --ill: url("/assets/img/colm-ill-ansigt.webp");      --ill-ratio: 0.976; }
.ill--lagdiagram  { --ill: url("/assets/img/colm-ill-lagdiagram.webp");  --ill-ratio: 3.331; }

/* Ansigtskortet er tegningen plus de zoner, cremen skal ligge i. Zonerne
   bliver ved med at være SVG: de bærer information, ikke stemning, og skal
   kunne rettes præcist. De to lag ligger i samme boks og skalerer sammen. */
.face-map {
  position: relative;
  width: 100%;
  aspect-ratio: 0.976;
  color: var(--color-text);
}
.face-map__zones {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* ── Oversigt: produktgrid ────────────────────────────────────
   Fire i bredden på desktop, to på mobil. Griddet er venstrestillet,
   så ét produkt ser bevidst ud frem for strakt. */

.brugsanvisning-grid {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: var(--space-12) var(--space-8) var(--space-16);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-8) var(--space-6);
  align-items: start;
}

.brugsanvisning-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.brugsanvisning-card__media {
  position: relative;
  display: grid;
  aspect-ratio: 4 / 5;
  border-radius: var(--radius-sm);
  background-color: var(--color-surface-sink);
  overflow: hidden;
}

/* De to lag ligger oven på hinanden i samme gridcelle. */
.brugsanvisning-card__layer {
  position: relative;
  grid-area: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}
.brugsanvisning-card__layer--ill {
  padding: 9% 13%;
}
.brugsanvisning-card__layer--foto {
  opacity: 0;
}
.brugsanvisning-card__layer--foto img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  /* Skyggen kommer fra billedets egen alfakanal, ikke fra en tegnet ellipse
     under produktet. drop-shadow følger derfor krukkens og æskens faktiske
     silhuet og falder til højre og ned, som lyset gjorde i optagelsen. */
  filter: drop-shadow(0.9rem 1.1rem 0.9rem
    color-mix(in srgb, var(--color-text) 26%, transparent));
}

/* Fritlagt foto i et sidehoved. Samme silhuetskygge som kortets — ét greb,
   ikke to. */
.page-header-image--grounded img {
  filter: drop-shadow(0.9rem 1.1rem 0.9rem
    color-mix(in srgb, var(--color-text) 24%, transparent));
}

.brugsanvisning-card__kicker {
  font-family: var(--font-ui);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-accent-ink);
}
.brugsanvisning-card__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.25rem;
  line-height: 1.25;
  letter-spacing: -0.015em;
  color: var(--color-text);
  text-wrap: balance;
}
.brugsanvisning-card:hover .brugsanvisning-card__title {
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-thickness: 1px;
}
.brugsanvisning-card__text {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 0.9375rem;
  line-height: 1.7;
  color: var(--color-text);
  opacity: 0.72;
}

/* Krydsfaden er en ren hover-finesse. På berøringsskærme bliver
   illustrationen stående — fotoet møder man i stedet på produktets
   egen side. Samme greb som produktprøvernes musespor. */
@media (hover: hover) and (pointer: fine) {
  @media (prefers-reduced-motion: no-preference) {
    .brugsanvisning-card__layer {
      transition: opacity var(--duration-base) var(--ease-out);
    }
  }
  .brugsanvisning-card:hover .brugsanvisning-card__layer--ill,
  .brugsanvisning-card:focus-within .brugsanvisning-card__layer--ill {
    opacity: 0;
  }
  .brugsanvisning-card:hover .brugsanvisning-card__layer--foto,
  .brugsanvisning-card:focus-within .brugsanvisning-card__layer--foto {
    opacity: 1;
  }
}


/* ── Brugsanvisningens sektioner ──────────────────────────────── */

/* Tydeligt spring fra produktsidens ritual til den fulde brugsanvisning.
   Knappen frem for et inline-link: .ritual-step__text og .produkt-lead er
   begge dæmpet med opacity, og et link derinde falder under AA. */
.produkt-cta {
  margin-top: var(--space-8);
}

/* Tegning ved siden af tekst. */
.usage-split {
  display: grid;
  grid-template-columns: minmax(0, 300px) minmax(0, 1fr);
  gap: var(--space-12);
  align-items: center;
  margin-top: var(--space-8);
}
.usage-split--wide {
  grid-template-columns: minmax(0, 380px) minmax(0, 1fr);
}
.usage-split__figure {
  margin: 0;
}
.usage-split__body > * + * {
  margin-top: var(--space-3);
}
.usage-split__body p {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: var(--size-base);
  line-height: 1.8;
  color: var(--color-text-dim);
  max-width: 56ch;
}

/* Nøglen til ansigtskortet. */
.usage-legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-4);
  margin-top: var(--space-4);
  padding: 0;
  list-style: none;
}
.usage-legend li {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 0.9375rem;
  color: var(--color-text-dim);
}
.usage-legend__swatch {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  flex: none;
  border: 1.4px solid var(--color-accent);
  background-color: color-mix(in srgb, var(--color-accent) 15%, transparent);
}
.usage-legend__swatch--off {
  background-color: transparent;
  border-color: var(--color-border);
}

/* De to doseringsforløb. */
.usage-tracks {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-8) var(--space-12);
  margin-top: var(--space-8);
}
.usage-track__label {
  display: block;
  font-family: var(--font-ui);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-accent-ink);
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--color-border);
}
.usage-track__list {
  --arrow-down: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 9 15'%3E%3Cpath d='M4.5 1.2C4.3 5 4.4 9 4.6 13.2M1.4 9.5C2.6 10.9 3.7 12.1 4.6 13.5 5.4 12.1 6.5 10.9 7.6 9.5' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  list-style: none;
  padding: 0;
  margin: var(--space-3) 0 0;
}
.usage-track__list li {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: var(--size-base);
  line-height: 1.75;
  color: var(--color-text-dim);
}
.usage-track__list li + li {
  margin-top: var(--space-2);
  padding-top: var(--space-2);
}
/* Den tegnede pil mellem to trin — samme pen som illustrationerne. */
.usage-track__list li + li::before {
  content: "";
  display: block;
  width: 9px;
  height: 15px;
  margin-bottom: var(--space-2);
  background-color: var(--color-accent);
  -webkit-mask: var(--arrow-down) no-repeat center / contain;
  mask: var(--arrow-down) no-repeat center / contain;
}

/* Trin med tegning over nummeret. */
/* Fast højde, så tegningerne står på én fælles grundlinje og numrene
   under dem flugter på tværs af de tre spalter. Motiverne har vidt
   forskellige formater — månen er bred og lav, kluden høj og smal —
   og uden det ville hver spalte begynde sit eget sted. */
.ritual-step__figure {
  margin: 0 0 var(--space-4);
  width: 140px;
  height: 118px;
  color: var(--color-accent-ink);
}
.ritual-step__figure .ill-mask {
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  -webkit-mask-position: center bottom;
  mask-position: center bottom;
}

/* Glyf ved siden af en note. */
.note__glyph {
  display: block;
  width: 40px;
  margin-bottom: var(--space-2);
  color: var(--color-accent-ink);
}


/* ── Sloganet, der former sig ─────────────────────────────────
   "Ro til den urolige hud" sagt langsomt, i takter — footerens tagline
   på hver side. To ord ligger oven på hinanden; deres blur og opacity
   køres modsat, og SVG-filteret trækker de to blurrede former sammen
   til én, så overgangen smelter frem for at krydsfade.

   Tærsklen er kalibreret til den lyse skrift på footerkortet: en
   kraftigere blur æder de tynde streger, før alfakontrasten når at
   samle dem, og sætningen forsvinder helt.

   Det er den ene bevidste undtagelse fra husreglen om kun at animere
   transform og opacity. Uden JavaScript, og ved reduceret bevægelse,
   står .slogan__static tilbage med hele sætningen. */

/* 1x1 og ikke 0x0: WebKit holder op med at kunne slå et filter op i en
   svg uden udstrækning, og så forsvinder hele scenen, filteret er lagt
   på — sloganet var væk på mobil frem for bare ufiltreret. Overflow
   skjuler den ene pixel. */
.slogan__filter {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  pointer-events: none;
}
/* Størrelsen er logoets, ikke en tekststørrelse. Hubot Sans Light har en
   versalhøjde på 0,729 × skriftstørrelsen; 2,5725 rem giver 30 px, samme
   højde som CØLM-mærkets bogstaver ved 96 px bredde. Derfor er den fast
   og ikke en clamp — mærket skalerer heller ikke med viewporten. */
.footer-tagline .slogan__static,
.footer-tagline .slogan__word {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: 2.5725rem;
  line-height: 1;
  letter-spacing: -0.02em;
  /* Bone White i fuld styrke rammer 6,12:1 på footerkortets oliven. */
  color: var(--color-surface);
  margin: 0;
}
/* Uden JavaScript står hele sætningen og må ombrydes. */
.footer-tagline .slogan__static {
  line-height: 1.15;
  padding-top: 2px;
}
.footer-tagline .slogan__stage {
  position: relative;
  height: var(--footer-mark-h);
  filter: url(#slogan-goo);
}
/* Grundlinjen flugter med logoets: mærkets bogstaver bunder 41,7 px nede
   i sin 48 px boks, og ved line-height 1 ligger skriftens baseline
   36,6 px nede i linjeboksen (halv leading + ascent 45 − 13). De 5 px
   lukker forskellen. */
.footer-tagline .slogan__word {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
  padding-top: 5px;
  white-space: nowrap;
  user-select: none;
}


/* ── Brugsanvisning: mindre skærme ────────────────────────────── */

@media (max-width: 1024px) {
  .brugsanvisning-grid {
    grid-template-columns: repeat(3, 1fr);
  }
  .usage-split,
  .usage-split--wide {
    grid-template-columns: minmax(0, 240px) minmax(0, 1fr);
    gap: var(--space-6);
  }
}

@media (max-width: 768px) {
  .brugsanvisning-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-6) var(--space-4);
    padding: var(--space-8) var(--space-4) var(--space-12);
  }
  .usage-split,
  .usage-split--wide {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-4);
  }
  .usage-split__figure {
    width: min(260px, 70%);
  }
  .usage-tracks {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-6);
  }

}