/* =====================================================================
   Remember Me — style.css
   Én stylesheet til alle sider. Opbygning:
     1. Tokens og tema          6. (samlet med 5)
     2. Grundlag               7. Om Philip
     3. Header                    8. Cases (liste)
     4. Logoet (wordmark)      9. Priser og kunder
     5. Entré: showreel i buen          10. Footer, case-sider, overgange
   Farver ligger kun i tokens, så lyst og mørkt tema kun skifter værdier.
   ===================================================================== */

/* ---------- 1. Tokens og tema ---------- */
/* theme.js sætter data-theme på <html>, før siden tegnes. Farver ligger kun her. */
:root {
  --bg: #0a0a0a;
  --bg-raised: #141414;
  --fg: #f4f3f0;
  --muted: #8d8b87;
  --line: rgba(244, 243, 240, 0.14);
  --logo-filter: none;          /* kundelogoerne er hvide; i lyst tema vendes de til sort */

  --font: "Chakra Petch", "Helvetica Neue", Arial, sans-serif;
  --gutter: clamp(16px, 4vw, 56px);
  --max: 1440px;
  --header-h: 36px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --slow: 900ms;
  color-scheme: dark;
}

/* ---------- 2. Grundlag ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { touch-action: manipulation; -webkit-text-size-adjust: 100%; scroll-behavior: smooth; background: var(--bg); overscroll-behavior: none; }
body { overscroll-behavior: none; touch-action: manipulation; }
body {
  margin: 0; background: var(--bg); color: var(--fg);
  font-family: var(--font); font-weight: 300; font-size: 17px; line-height: 1.55;
  overflow-x: hidden; -webkit-font-smoothing: antialiased;
  transition: background-color 700ms var(--ease), color 700ms var(--ease);
}
/* Sidens egen baggrund som et fast lag bag alt, og tekstfarven sat direkte på indholdet.
   Så skifter alt med temaet, også når siden vises i en app, der lægger sin egen farve på. */
body { position: relative; z-index: 0; } /* eget lag, så baggrundslaget herunder ligger over en evt. app-baggrund */
body::before { content: ""; position: fixed; inset: 0; z-index: -1; background: var(--bg); transition: background-color 700ms var(--ease); }
main, .site-footer, .menu { color: var(--fg); }
img, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
a, button { -webkit-tap-highlight-color: transparent; }
::selection { background: var(--fg); color: var(--bg); }
:focus-visible { outline: 1px solid var(--fg); outline-offset: 4px; }

.skip { position: absolute; left: -9999px; top: 0; background: var(--fg); color: var(--bg); padding: 10px 14px; z-index: 100; }
.skip:focus { left: 16px; top: 16px; }
.wrap { width: 100%; max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); }
#cases, #awards, #clients, #om { scroll-margin-top: 20px; }
/* Awards-titlen står fast øverst, mens man scroller igennem priserne */
/* Afsnitstitlerne (Cases, Awards, Clients) står fast øverst, mens man scroller igennem afsnittet */
#cases > .label, #awards > .label, #clients > .label { position: sticky; top: 0; z-index: 3; margin-bottom: clamp(24px, 4vw, 48px);
  padding: calc(var(--header-h) + 14px) var(--gutter) 14px; line-height: 15px; background: var(--bg); }
@media (min-width: 821px) { #cases > .label { background: transparent; pointer-events: none; text-shadow: 0 1px 6px rgba(0, 0, 0, 0.6); } }
.section { padding: clamp(96px, 14vw, 200px) 0; }
#cases { padding-bottom: clamp(24px, 3vw, 48px); }
#awards { padding-top: clamp(60px, 6vw, 90px); }

.link-line { position: relative; display: inline-block; padding-bottom: 2px; }
.link-line::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: currentColor;
  transform-origin: left; transition: transform 500ms var(--ease);
}
.link-line:hover::after { transform: scaleX(0); transform-origin: right; }

/* Elementer der glider ind, når de kommer i syne (site.js sætter .is-in) */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity var(--slow) var(--ease), transform var(--slow) var(--ease); }
.reveal.is-in, .no-js .reveal { opacity: 1; transform: none; }

/* ---------- 3. Header ---------- */
/* Headeren har ingen baggrund og vender farverne om i forhold til det, den står
   på, så den altid står skarpt på både film, lyse og mørke afsnit. */
.site-header {
  position: fixed; inset: 0 0 auto 0; z-index: 50; view-transition-name: site-header;
  color: #fff; text-shadow: 0 1px 8px rgba(0, 0, 0, 0.25);
}
.burger i { box-shadow: 0 1px 6px rgba(0, 0, 0, 0.25); }
.site-header .wrap { display: flex; align-items: center; justify-content: space-between; height: var(--header-h); }
.site-header .wordmark { font-size: 12px; letter-spacing: 0.1em; }
.nav { display: flex; align-items: center; gap: 16px; }
.burger { position: relative; z-index: 2; display: inline-flex; flex-direction: column; justify-content: center; gap: 5px; width: 24px; height: var(--header-h); }
.burger i { display: block; height: 1px; background: currentColor; transform-origin: center; transition: transform 500ms var(--ease), width 500ms var(--ease); }
.burger i:last-child { width: 15px; margin-left: auto; }
.menu-open .burger i:first-child { transform: translateY(3px) rotate(45deg); }
.menu-open .burger i:last-child { width: 24px; transform: translateY(-3px) rotate(-45deg); }
/* Menuen: hele skærmen i modsat farve, store links med små numre */
.menu { position: fixed; inset: 0; z-index: 45; display: flex; flex-direction: column; justify-content: center; padding: 0 var(--gutter);
  background: var(--bg); color: var(--fg); clip-path: inset(0 0 100% 0); visibility: hidden;
  transition: clip-path 800ms var(--ease), visibility 0s linear 800ms; }
.menu-open .menu { clip-path: inset(0); visibility: visible; transition: clip-path 800ms var(--ease); }
.menu-links { display: flex; flex-direction: column; width: min(100%, 1100px); margin: 0 auto; }
.menu-links a { display: flex; align-items: baseline; gap: 16px; padding: 10px 0; border-bottom: 1px solid var(--line);
  font-size: clamp(30px, 6vw, 72px); font-weight: 300; line-height: 1.1; opacity: 0; transform: translateY(12px);
  transition: opacity 600ms var(--ease), transform 600ms var(--ease); }
.menu-links .n { font-size: 11px; letter-spacing: 0.08em; opacity: 0.6; width: 2em; }
.menu-open .menu-links a { opacity: 1; transform: none; }
.menu-open .menu-links a:nth-child(1) { transition-delay: 250ms; } .menu-open .menu-links a:nth-child(2) { transition-delay: 310ms; }
.menu-open .menu-links a:nth-child(3) { transition-delay: 370ms; } .menu-open .menu-links a:nth-child(4) { transition-delay: 430ms; }
.menu-open .menu-links a:nth-child(5) { transition-delay: 490ms; }
@media (hover: hover) { .menu-links:hover a { opacity: 0.45; } .menu-links a:hover { opacity: 1; } }
html.menu-open { overflow: hidden; }
/* Klik i menuen: linkene toner ud, skærmen står sort, siden springer til afsnittet
   og glider så blødt ind fra sort med en let zoom */
html.nav-cover .menu { clip-path: inset(0); visibility: visible; opacity: 1; transition: none; }
html.nav-cover .menu-links { opacity: 0; transition: opacity 280ms var(--ease); }
html.nav-reveal .menu { opacity: 0; transition: opacity 1000ms var(--ease); }
.nav-zoom { transform: scale(1.07); transition: none; }
.nav-zoom.is-zooming { transform: scale(1); transition: transform 1400ms cubic-bezier(0.16, 1, 0.3, 1); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* Ved filmen øverst og ved spillet nederst skjules det lille logo; det store står der i forvejen */
.brand { display: flex; align-items: center; height: var(--header-h); }
.header-mark { transition: opacity 500ms var(--ease), transform 500ms var(--ease); }
.hide-mark .header-mark { opacity: 0; transform: translateY(-6px); pointer-events: none; }

/* Små etiketter i toppen af afsnittene */
@media (max-width: 720px) { .label { text-align: center; } }
.label { margin: 0 auto clamp(40px, 6vw, 80px); font-size: 11px; font-weight: 400; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); }

/* ---------- 4. Logoet (wordmark) ---------- */
.wordmark { font-weight: 700; letter-spacing: 0.08em; white-space: nowrap; line-height: 1; }
.wordmark span { font-weight: 300; }


/* ---------- 5. Entré: showreelen i buen ---------- */
/* Buen og logoet er præsentationens forside, tegnet som vektor. Fladen har altid
   sidens baggrundsfarve, så filmen ser ud til at være skåret ind i siden.
   På en stående skærm vises kun logoet i hvidt oven på filmen. */
.hero { position: relative; height: 100svh; overflow: hidden; background: #000; }
/* Overgang: når man scroller væk, trækker filmen sig roligt ind i en ramme med lige kanter og dæmpes */
.hero { clip-path: inset(calc(var(--hp, 0) * 13%) calc(var(--hp, 0) * 17%) calc(var(--hp, 0) * 13%)); }
.hero-video, .hero-art { opacity: calc(1 - var(--hp, 0) * 0.8); }
.hero-video { transform: translateY(var(--hy, 0px)) scale(calc(1 - var(--hp, 0) * 0.18)); will-change: transform; }
.hero-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; animation: heroin 3600ms cubic-bezier(0.25, 0.1, 0.25, 1) 300ms both, heroscale 6000ms cubic-bezier(0.22, 1, 0.36, 1) 300ms both; }
@keyframes heroscale { from { scale: 1.08; } to { scale: 1; } }
.hero-art { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.hero-art--tall { display: block; inset: auto; left: 50%; top: 50%; width: min(86vw, 1100px); height: auto; transform: translate(-50%, -50%);
  fill: #fff; filter: drop-shadow(0 2px 18px rgba(0, 0, 0, 0.25)); }
.hero-art { opacity: 0; animation: heroin 2600ms var(--ease) 2200ms forwards; }
.site-header { animation: heroin 1600ms var(--ease) 3200ms both; }
@keyframes heroin { from { opacity: 0; } to { opacity: 1; } }
/* Scroll-indikator: en tynd lodret linje med et lys, der glider nedad, og "Scroll" over.
   Toner ind efter logoet og forsvinder, så snart man begynder at scrolle. */
.hero-scroll { position: absolute; left: 50%; bottom: calc(clamp(18px, 3.5vh, 44px) + env(safe-area-inset-bottom)); z-index: 4; transform: translateX(-50%);
  color: #fff; text-decoration: none; opacity: 0; animation: heroin 1600ms var(--ease) 3800ms forwards; }
.hs-in { display: flex; flex-direction: column; align-items: center; gap: 14px; opacity: calc(1 - var(--hp, 0) * 5);
  filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.45)); transition: transform 400ms var(--ease); }
.hs-label { font-size: 10px; font-weight: 500; letter-spacing: 0.38em; text-transform: uppercase; padding-left: 0.38em; opacity: 0.8; }
.hs-line { position: relative; width: 1px; height: clamp(44px, 7vh, 72px); background: rgba(255, 255, 255, 0.22); overflow: hidden; }
.hs-line::after { content: ""; position: absolute; left: 0; top: 0; width: 1px; height: 45%;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0), #fff); animation: hsdrop 2200ms cubic-bezier(0.65, 0, 0.35, 1) infinite; }
@keyframes hsdrop { 0% { transform: translateY(-100%); } 70%, 100% { transform: translateY(230%); } }
@media (hover: hover) { .hero-scroll:hover .hs-in { transform: translateY(4px); } }
.hero-sound {
  position: absolute; right: calc(var(--gutter) - 12px); bottom: clamp(12px, 3vw, 40px); z-index: 4;
  display: grid; place-items: center; width: 48px; height: 48px; color: #fff; filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.35));
  transition: transform 300ms var(--ease);
}
.hero-sound:hover { transform: scale(1.1); }
.hero-sound .s-on { display: none; }
.hero-sound[aria-pressed="true"] .s-on { display: inline; }
.hero-sound[aria-pressed="true"] .s-off { display: none; }

/* ---------- 7. Om Philip ---------- */
/* Siden står stille: billedet glider op og zoomer blødt ud, navnet samles fra
   hver sin side, titlen tegnes frem, kontakt kommer til sidst. */
.me { position: relative; height: 260vh; margin: clamp(40px, 6vh, 80px) 0 clamp(120px, 22vh, 260px); }
.me-sticky { position: sticky; top: 0; height: 100svh; display: flex; align-items: center; overflow: hidden; padding-top: var(--header-h); }
.me-grid { display: grid; grid-template-columns: auto auto; justify-content: center; gap: clamp(32px, 6vw, 96px); align-items: end; }
.me-photo {
  width: min(38vw, calc((100svh - 150px) * 0.8)); aspect-ratio: 4 / 5; overflow: hidden; background: var(--bg-raised);
  clip-path: inset(0 var(--mx, 50%) 0 var(--mx, 50%));
}
.me-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 60% 20%; filter: grayscale(1);
  transform: scale(var(--ps, 1.35)); transform-origin: 50% 40%; }
.me-name { margin: 0; font-size: clamp(30px, 3.6vw, 56px); line-height: 0.98; letter-spacing: 0.02em; font-weight: 700; }
.me-name span { display: block; opacity: var(--no, 0); }
.me-first { font-weight: 300; transform: translateX(var(--fx, -22vw)); }
.me-last { transform: translateX(var(--lx, 22vw)); }
.me-title { margin: 18px 0 0; color: var(--muted); letter-spacing: 0.06em; line-height: 1.8; white-space: nowrap; font-size: clamp(11px, 1vw, 14px);
  clip-path: inset(0 var(--tc, 100%) 0 0); }
/* Titel, kompetencer og nøgletal: rolle i versaler, kompetencer dæmpet, tallene som det, man ser */
.me-title { white-space: normal; }
.me-role { margin: 0; font-size: clamp(10.5px, 0.82vw, 13px); font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; color: var(--fg); white-space: nowrap; }
.me-sep { margin: 0 0.75em; opacity: 0.35; }
.me-skills { margin: 8px 0 0; font-size: clamp(11px, 0.86vw, 13px); letter-spacing: 0.05em; color: var(--muted); white-space: nowrap; }
.me-skills .me-sep { margin: 0 0.45em; }
.me-skills .nw { white-space: nowrap; }
.me-stats { list-style: none; display: flex; gap: clamp(24px, 2.8vw, 48px); margin: clamp(18px, 2.2vw, 30px) 0 0; padding: clamp(14px, 1.6vw, 22px) 0 0;
  border-top: 1px solid rgba(255, 255, 255, 0.14); }
.me-stats li { display: flex; flex-direction: column; gap: 5px; }
.me-stats b { font-size: clamp(26px, 2.5vw, 40px); font-weight: 300; line-height: 1; letter-spacing: 0.01em; color: var(--fg); font-variant-numeric: tabular-nums; }
.me-stats span { font-size: clamp(9px, 0.62vw, 10px); letter-spacing: 0.2em; text-transform: uppercase; color: var(--muted); white-space: nowrap; }
.me-contact { margin: clamp(24px, 3vw, 44px) 0 0; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; font-size: 15px;
  opacity: var(--co, 0); transform: translateY(calc((1 - var(--co, 0)) * 14px)); }
@media (max-width: 820px) {
  .me { height: 230vh; margin: 5vh 0 18vh; }
  .me-grid { grid-template-columns: min(100%, calc(100svh - 340px)); justify-content: center; gap: 22px; align-items: start; }
  .me-photo { width: 100%; aspect-ratio: 1 / 1; }
  .me-name { font-size: clamp(28px, 8vw, 38px); }
  .me-title { font-size: clamp(9.5px, 2.7vw, 13px); letter-spacing: 0.02em; margin-top: 10px; }
  .me-role { font-size: clamp(9px, 2.5vw, 11px); letter-spacing: 0.16em; }
  .me-skills { white-space: normal; font-size: clamp(9.5px, 2.6vw, 11.5px); line-height: 1.55; margin-top: 6px; }
  .me-stats { gap: 20px; margin-top: 12px; padding-top: 10px; }
  .me-stats b { font-size: clamp(19px, 5.4vw, 24px); }
  .me-stats span { font-size: 8px; letter-spacing: 0.14em; }
  .me-contact { margin-top: 16px; font-size: 14px; }
}

/* ---------- 8. Cases ---------- */
/* En rolig liste med firmanavne. Den række, der står midt på skærmen, er markeret og
   popper op, og dens billede (på computer også en kort video) står stille ved siden af.
   Titel, nummer og kunde står ved billedet. */
.cx { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(32px, 5vw, 80px); align-items: start; }
.cx-list { order: 1; display: flex; flex-direction: column; padding: 30vh 0; }
.cx-stage { order: 2; position: sticky; top: 50svh; transform: translateY(-50%); display: flex; flex-direction: column; }
.cx-preview { cursor: pointer; position: relative; width: 100%; max-width: 900px; margin-left: auto; aspect-ratio: 16 / 9; overflow: hidden; background: var(--bg-raised); }
.cx-preview img, .cx-preview video {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transform: scale(1.04); transition: opacity 700ms var(--ease), transform 1400ms var(--ease);
}
.cx-preview .is-on { opacity: 1; transform: none; }
.cx-caption { order: 2; width: 100%; max-width: 900px; margin: 14px 0 0 auto; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; min-height: 1.5em;
  transition: opacity 400ms var(--ease), transform 400ms var(--ease); }
.cx-caption.is-changing { opacity: 0; transform: translateY(4px); }
.cx-cap-num { font-size: 11px; letter-spacing: 0.08em; color: var(--muted); }
.cx-cap-title { font-size: 15px; font-weight: 500; letter-spacing: 0.02em; }
.cx-cap-client { font-size: 12px; letter-spacing: 0.08em; color: var(--muted); }
.cx-row { padding: 11px 0; opacity: 0.28; transition: opacity 500ms var(--ease); }
.cx-row.is-active { opacity: 1; }
.cx-title { display: inline-block; font-size: clamp(14px, 1.45vw, 21px); font-weight: 400; letter-spacing: 0.01em; line-height: 1.15;
  transform-origin: 0 60%; transition: transform 650ms var(--ease); }
.cx-row.is-active .cx-title { transform: scale(1.73); }
@media (max-width: 820px) {
  .cx { grid-template-columns: 1fr; gap: 20px; }
  /* billedet står lidt nede på skærmen med titlen ovenover */
  /* billedet lægger sig lige under den faste Cases-titel */
  .cx-stage { order: 0; top: calc(var(--header-h) + 43px); transform: none; z-index: 2; background: var(--bg);
    margin: 0 calc(var(--gutter) * -1); padding: 2svh var(--gutter) 22px; }
  .cx-stage::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 40px; background: linear-gradient(var(--bg), transparent); pointer-events: none; }
  .cx-caption { order: 0; margin: 0 0 12px; }
  .cx-cap-title { font-size: 14px; }
  .cx-list { padding: 20vh 0 40vh; }
  .cx-title { font-size: 15px; }
  .cx-row.is-active .cx-title { transform: scale(1.67); }
}

/* ---------- 9. Priser og kunder ---------- */
/* Prisvæggen: logo, kategori og case samlet og centreret. */
/* Hvert prislogo findes i en mørk og en lys udgave; temaet vælger */

.awards { list-style: none; margin: 0 auto; padding: 0; max-width: 980px; }
.awards li {
  display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; padding: clamp(24px, 3vw, 42px) 0;
  /* Spotlight: prisen midt på skærmen står i fuld størrelse og lys, de andre er mindre og dæmpede.
     Hele prisen bevæger sig som én enhed. */
  opacity: calc(0.14 + 0.86 * var(--lt, 1)); transform: scale(calc(0.64 + 0.46 * var(--lt, 1)));
  will-change: transform, opacity;
}
.aw-logos { display: flex; align-items: center; justify-content: center; gap: clamp(14px, 2vw, 28px); }
.aw-logos img { height: clamp(34px, 3.8vw, 54px); width: auto; max-width: 100%; }
.aw-logos img.is-wordmark { height: clamp(15px, 1.6vw, 22px); }
.aw-logos.is-trio img { height: clamp(36px, 3.8vw, 54px); }
/* Computer: 2 + 3 + 2. Midterkolonnen har tre priser, siderne to, som ligger forskudt
   ind imellem, så det står symmetrisk. Rækkefølgen på mobil er uændret. */
@media (min-width: 721px) {
  .awards { max-width: min(1240px, 92vw); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-template-rows: repeat(6, auto); column-gap: clamp(24px, 4vw, 72px); }
  .awards li { justify-content: center; }
  .awards li:nth-child(1) { grid-column: 2; grid-row: 1 / 3; } /* NAA guld */
  .awards li:nth-child(2) { grid-column: 1; grid-row: 2 / 4; } /* NAA sølv */
  .awards li:nth-child(3) { grid-column: 3; grid-row: 2 / 4; } /* NAA bronze */
  .awards li:nth-child(5) { grid-column: 2; grid-row: 3 / 5; } /* Rambuk x2 */
  .awards li:nth-child(4) { grid-column: 1; grid-row: 4 / 6; } /* Influenced */
  .awards li:nth-child(6) { grid-column: 3; grid-row: 4 / 6; } /* Rambuk, Involvement */
  .awards li:nth-child(7) { grid-column: 2; grid-row: 5 / 7; } /* IDA, GDA, Red Dot */
}
.aw-text { letter-spacing: 0.02em; }
.aw-cat { display: block; font-size: 15px; font-weight: 500; }
.aw-text small { display: block; margin-top: 6px; color: var(--muted); font-size: 13px; font-weight: 300; }
@media (max-width: 720px) {
  .awards li { gap: 10px; padding: 22px 0; }
  .aw-logos img { height: 34px; }
  .aw-logos img.is-wordmark { height: 14px; }
  .aw-logos.is-trio img { height: 30px; }
  .aw-cat { font-size: 14px; }
  .aw-text small { font-size: 12px; }
  .aw-logos.is-trio img { height: 36px; }
}

/* Kunder: alle logoer på én gang. Når gitteret kommer i syne, dukker de op
   ét ad gangen i tilfældig rækkefølge, fra uskarpt til skarpt. */
.clients { padding-top: clamp(120px, 20vh, 240px); }
.logos { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); list-style: none; margin: 0; padding: 0; }
/* Logoernes størrelse måles ud fra feltets bredde (cqw), ikke højden i procent.
   Safari på iPhone mister af og til højden på felterne, når man scroller op og ned,
   og så blev logoerne for store og blev beskåret. Bredden er altid kendt. */
.logos li { display: flex; align-items: center; justify-content: center; aspect-ratio: 16 / 9; min-height: 0; overflow: hidden;
  container-type: inline-size; touch-action: manipulation; }
/* Computer: felt = 16:9, så 1 % af højden = 0,5625cqw */
.logos img { max-width: 56cqw; max-height: 21.4cqw; width: auto; height: auto; object-fit: contain; filter: var(--logo-filter); }
.logos img.is-boxy { max-height: 16.9cqw; }
.logos img.is-small { max-width: 50cqw; max-height: 19.1cqw; }
.logos img[src*="clients/flugger"] { max-width: 46cqw; }
.logos img[src*="clients/salling"] { max-width: 50cqw; }
.logos img[src*="clients/just-eat"], .logos img[src*="clients/den-blaa-planet"], .logos img[src*="clients/nordisk-film"] { max-height: 22.5cqw; }
.logos img[src*="clients/egekilde"], .logos img[src*="clients/lidl"] { max-height: 21.4cqw; }
.logos img[src*="clients/georg-jensen"], .logos img[src*="clients/moet-chandon"], .logos img[src*="clients/triumph"] { max-width: 64cqw; max-height: 27cqw; }
.logos img[src*="clients/dsc"] { max-height: 32.6cqw; }
.logos li { opacity: 0; filter: blur(10px); transition: opacity 1100ms var(--ease), filter 1100ms var(--ease); }
.logos.is-in li, .no-js .logos li { opacity: 1; filter: blur(0); }
/* Mobil: felt = 2:1. Logoerne styres af bredden, som de altid har set ud på iPhone;
   højden er kun et loft, så intet bliver beskåret. DSC er gjort mindre. */
@media (max-width: 720px) {
  .logos { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .logos li { aspect-ratio: 2 / 1; }
  .logos img, .logos img.is-boxy, .logos img[src*="clients/georg-jensen"], .logos img[src*="clients/moet-chandon"], .logos img[src*="clients/triumph"],
  .logos img[src*="clients/just-eat"], .logos img[src*="clients/den-blaa-planet"], .logos img[src*="clients/nordisk-film"] { max-width: 52cqw; max-height: 25cqw; }
  .logos img.is-small, .logos img[src*="clients/egekilde"], .logos img[src*="clients/lidl"] { max-width: 42cqw; max-height: 21cqw; }
  .logos img[src*="clients/dsc"] { max-width: 30cqw; max-height: 21cqw; }
}

/* ---------- 10. Footer, case-sider, overgange ---------- */
/* Huskespillet "Hukommelsens matrix": øverst står REMEMBERME som svage pladser,
   nedenunder et gitter med 20 lukkede felter (10 par). Et bogstav samler sig af støv,
   når man vender det. Rammer man ved siden af, går det op i røg og bliver glemt.
   Finder man et par, flyver støvet op og bygger bogstavet i logoet. */
/* Spillet ligger på samme sorte baggrund som resten af siden */
.site-footer { touch-action: manipulation; position: relative; display: flex; flex-direction: column; min-height: 100svh; min-height: 100dvh; margin-top: clamp(96px, 14vw, 200px); background: var(--bg); }
.mm-fx { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 2; }
/* Logo øverst, "Play with me…" og brikkerne nedenunder, med luft imellem */
.mm { position: relative; z-index: 1; margin: 0 auto; width: min(88vw, 1100px); flex: 1 0 auto;
  display: flex; flex-direction: column; align-items: center; padding: clamp(96px, 14vw, 200px) 0 calc(clamp(16px, 3vh, 28px) + 44px); }
.mm-logo { width: min(100%, 560px); height: auto; overflow: visible; fill: currentColor; }
/* ===== Spillet, 2026-look: mørkt glas og champagne-lys =====
   Lyset er en begivenhed, ikke en tilstand: det løber ind fra logoet, når et kort vendes,
   når et par matcher og når man vinder. Ellers står glasset mørkt og ånder svagt. */
:root { --champ: #f4f8ff; --champ-rgb: 226, 236, 255; }
@property --edge { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
.mm-slot { fill: currentColor; transition: opacity 700ms var(--ease), fill 900ms var(--ease), filter 900ms var(--ease); transform-box: fill-box; transform-origin: 50% 60%; }
/* Logoet tænder i champagne, før lyset løber ned i kortene */
.mm.is-lit .mm-slot { fill: #fff; filter: drop-shadow(0 0 4px #fff) drop-shadow(0 0 16px rgba(var(--champ-rgb), 0.8)) drop-shadow(0 0 46px rgba(var(--champ-rgb), 0.4)); }
.mm.is-playing .mm-slot { opacity: 0.12; filter: none; }
/* Lyset trækkes ud af logoet fra begge ender: bogstaverne slukker udefra og ind */
.mm.is-lit .mm-slot.is-drained { fill: currentColor; opacity: 0.12; filter: none; transition: opacity 450ms var(--ease), fill 450ms var(--ease), filter 300ms var(--ease); }
.mm.is-playing .mm-slot.is-found { opacity: 1; fill: var(--champ); filter: drop-shadow(0 0 8px rgba(var(--champ-rgb), 0.5)); }
.mm.is-complete .mm-slot { fill: var(--champ); }
.mm.is-celebrating .mm-slot { animation: mmwave 1300ms var(--ease) both; animation-delay: calc(var(--i, 0) * 75ms); }
@keyframes mmwave { 35% { transform: translateY(-12%) scale(1.1); } }
.mm.is-celebrating .mm-logo { animation: mmpulse 2200ms var(--ease) 500ms; }
@keyframes mmpulse { 45% { transform: scale(1.06); filter: drop-shadow(0 0 30px rgba(var(--champ-rgb), 0.6)); } }
.mm.is-complete .mm-logo { cursor: pointer; }

.mm-play { position: relative; width: min(100%, 520px); margin-top: clamp(40px, 7vh, 72px); display: flex; flex-direction: column; align-items: center; }
.mm-hint { margin: 0 0 clamp(28px, 5vh, 52px); font-size: 11.5px; font-weight: 600; letter-spacing: 0.34em; text-transform: uppercase; color: #f7faff;
  text-shadow: 0 0 12px rgba(var(--champ-rgb), 0.55), 0 0 28px rgba(var(--champ-rgb), 0.25); transition: opacity 600ms var(--ease); }
.mm.is-idle .mm-hint { animation: mmblink 2000ms ease-in-out infinite; }
@keyframes mmblink {
  0%, 100% { opacity: 0.3; transform: scale(1); text-shadow: 0 0 8px rgba(var(--champ-rgb), 0.3); }
  50% { opacity: 1; transform: scale(1.09); text-shadow: 0 0 6px #fff, 0 0 18px rgba(var(--champ-rgb), 0.95), 0 0 44px rgba(var(--champ-rgb), 0.6), 0 0 90px rgba(var(--champ-rgb), 0.35); }
}
.mm-board { position: relative; width: 100%; }
.mm-grid { width: 100%; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: clamp(10px, 1.4vw, 18px); transition: opacity 900ms var(--ease); }
.mm-grid:empty { display: none; }
.mm.is-complete .mm-grid, .mm.is-complete .mm-hint { opacity: 0; pointer-events: none; animation: none; }

/* Kortet: liquid glass. Gennemsigtigt, en lys facet i overkanten og lysglimt,
   der fanges i hjørnerne, som når lys rammer kanten af et glas */
.mm-tile { position: relative; aspect-ratio: 1; border: 0; padding: 0; border-radius: 14px; display: grid; place-items: center; cursor: pointer; color: inherit;
  background: linear-gradient(150deg, rgba(255, 255, 255, 0.045) 0%, rgba(255, 255, 255, 0.008) 30%, rgba(255, 255, 255, 0) 60%, rgba(255, 255, 255, 0.015) 100%), #050506;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.10), inset 0 1px 1px rgba(255, 255, 255, 0.18), inset 0 -2px 4px rgba(0, 0, 0, 0.6), 0 24px 44px rgba(0, 0, 0, 0.6);
  transition: transform 400ms var(--ease), box-shadow 400ms var(--ease), opacity 700ms var(--ease); }
/* Lysglimt i kanten: stærkest øverst til venstre, et svagere modlys nederst til højre */
.mm-tile::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 2px; pointer-events: none; z-index: 2;
  background: radial-gradient(55% 45% at 0% 0%, #fff, rgba(255, 255, 255, 0) 72%), radial-gradient(45% 40% at 100% 100%, rgba(255, 255, 255, 0.75), rgba(255, 255, 255, 0) 72%),
    radial-gradient(35% 28% at 100% 0%, rgba(255, 255, 255, 0.35), rgba(255, 255, 255, 0) 70%), radial-gradient(30% 25% at 0% 100%, rgba(255, 255, 255, 0.25), rgba(255, 255, 255, 0) 70%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
  opacity: 0.28; transition: opacity 500ms var(--ease); }
/* Lyset, der løber rundt langs kanten (hover og ved match) */
.mm-tile::after { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1.5px; pointer-events: none; z-index: 2;
  background: conic-gradient(from var(--edge), rgba(255, 255, 255, 0) 0deg, rgba(255, 255, 255, 0) 230deg, rgba(var(--champ-rgb), 0.85) 330deg, #fff 352deg, rgba(255, 255, 255, 0) 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
  opacity: 0; transition: opacity 500ms var(--ease); }
@keyframes mmedge { to { --edge: 360deg; } }
/* Kortets glød: ånder svagt, mens man venter, og flammer op ved match */
/* Glød uden ramme: lys inde i glasset og en blød udstråling, ingen kant */
.mm-glow { position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0;
  background: radial-gradient(75% 75% at 50% 45%, rgba(var(--champ-rgb), 0.16), rgba(var(--champ-rgb), 0.04) 60%, rgba(var(--champ-rgb), 0) 80%);
  box-shadow: 0 0 30px rgba(var(--champ-rgb), 0.24), 0 0 70px rgba(var(--champ-rgb), 0.1);
  transition: opacity 700ms var(--ease); }
.mm.is-idle .mm-tile:not(.is-up):not(.is-done) .mm-glow { animation: mmbreath 3600ms ease-in-out infinite; animation-delay: calc(var(--k, 0) * -0.37s); }
@keyframes mmbreath { 0%, 100% { opacity: 0.05; } 50% { opacity: 0.38; } }
.mm-tile .mm-mark { position: absolute; left: 17%; width: 66%; top: 50%; transform: translateY(-50%); fill: rgba(246, 249, 255, 0.75); z-index: 1; }
@media (hover: hover) {
  .mm-tile:not(.is-up):not(.is-done):hover { transform: translateY(-3px); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.2), inset 0 1px 1px rgba(255, 255, 255, 0.5), inset 0 0 26px rgba(255, 255, 255, 0.06), 0 26px 44px rgba(0, 0, 0, 0.6), 0 0 28px rgba(var(--champ-rgb), 0.14); }
  .mm-tile:not(.is-up):not(.is-done):hover::before { opacity: 1; }
  .mm-tile:not(.is-up):not(.is-done):hover::after { opacity: 1; animation: mmedge 1800ms linear infinite; }
}
/* Ramt af lyset: kanten blinker op, og lyset løber én gang rundt */
.mm-tile.is-hit::before { opacity: 0.85; transition-duration: 160ms; }
/* Forsiden: lidt lysere glas, bogstavet i hvidt med en varm glød */
.mm-tile.is-up { background: radial-gradient(110% 80% at 50% 0%, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0) 62%), #070708;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.24), inset 0 1px 1px rgba(255, 255, 255, 0.4), 0 22px 40px rgba(0, 0, 0, 0.55); }
.mm-tile.is-up::before { opacity: 0.9; }
.mm-tile.is-up .mm-mark { display: none; }
.mm-tile > .mm-letter { position: relative; z-index: 1; width: 40%; height: auto; fill: #fff; opacity: 0; transition: none; overflow: visible; }
.mm-tile.is-shown > .mm-letter { opacity: 1; transition: opacity 220ms var(--ease); }
/* Match: begge kort flammer op og pulserer, før bogstavet flyver op i logoet */
.mm-tile.is-match { animation: mmmatch 820ms var(--ease); z-index: 3; }
.mm-tile.is-match .mm-glow { opacity: 1; box-shadow: 0 0 36px rgba(var(--champ-rgb), 0.5), 0 0 90px rgba(var(--champ-rgb), 0.22);
  background: radial-gradient(80% 80% at 50% 45%, rgba(var(--champ-rgb), 0.26), rgba(var(--champ-rgb), 0.06) 60%, rgba(var(--champ-rgb), 0) 82%); }
.mm-tile.is-match::before { opacity: 1; }
.mm-tile.is-match::after { opacity: 1; animation: mmedge 800ms linear 1; }
@keyframes mmmatch { 0% { transform: scale(1); } 30% { transform: scale(1.08); } 55% { transform: scale(0.98); } 75% { transform: scale(1.04); } 100% { transform: scale(1); } }
.mm-tile.is-done { pointer-events: none; }
/* Lyset, der passerer i kanten, får kortets kanter til at gløde op et øjeblik */
.mm-tile.is-touch::before { opacity: 0.8; transition-duration: 200ms; }
/* Mens man venter: et roligt lys løber én gang rundt i kanten af tilfældige kort */
.mm-tile.is-trace::after { opacity: 1; animation: mmedge 2600ms cubic-bezier(0.45, 0, 0.55, 1) 1; }
/* Hover: lyset samles og bliver kraftigere */
@media (hover: hover) { .mm-tile:not(.is-up):not(.is-done):hover .mm-glow { opacity: 0.7; } }
/* Liquid glass i lyset: når lyset rammer, glider en spejling hen over glasset,
   kanten brydes i et lyst glimt, og glasset fyldes et øjeblik af en blød indre glød */
.mm-sheen { position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 1; overflow: hidden; opacity: 0;
  background:
    linear-gradient(112deg, rgba(255, 255, 255, 0) 30%, rgba(255, 255, 255, 0.26) 44%, rgba(255, 255, 255, 0.07) 50%, rgba(255, 255, 255, 0.16) 54%, rgba(255, 255, 255, 0) 66%) 130% 0 / 260% 100% no-repeat,
    radial-gradient(70% 55% at 50% 0%, rgba(var(--champ-rgb), 0.22), rgba(var(--champ-rgb), 0) 70%),
    radial-gradient(60% 40% at 50% 100%, rgba(var(--champ-rgb), 0.10), rgba(var(--champ-rgb), 0) 70%); }
.mm-tile.is-touch .mm-sheen, .mm-tile.is-hit .mm-sheen { animation: mmsheen 1000ms cubic-bezier(0.3, 0.7, 0.3, 1) 1; }
@keyframes mmsheen {
  0% { opacity: 0; background-position: 130% 0, 0 0, 0 0; }
  20% { opacity: 1; }
  100% { opacity: 0; background-position: -40% 0, 0 0, 0 0; } }
@media (hover: hover) { .mm-tile:not(.is-up):not(.is-done):hover .mm-sheen { opacity: 0.6; background-position: 40% 0, 0 0, 0 0; transition: opacity 400ms var(--ease), background-position 900ms var(--ease); } }
.mm-tile.is-match .mm-sheen { animation: mmsheen 820ms cubic-bezier(0.3, 0.7, 0.3, 1) 1; }
/* Kanten brydes kraftigere, når lyset rammer: et lyst glimt der løber rundt én gang */
.mm-tile.is-done { opacity: 0.16 !important; }
/* Alle kort blinker én gang samtidig, før de vender sig */
/* Lyset rammer alle kort på én gang: kanterne lyser op, og kortet popper en anelse frem */
.mm-tile.is-blink { animation: mmpopb 650ms cubic-bezier(0.2, 0.9, 0.3, 1) 1; }
.mm-tile.is-blink::before { animation: mmblinkrim 650ms cubic-bezier(0.2, 0.8, 0.3, 1) 1; }
@keyframes mmpopb { 0% { transform: scale(1); } 22% { transform: scale(1.045); } 100% { transform: scale(1); } }
@keyframes mmblinkall { 0% { opacity: 0; } 25% { opacity: 1; } 100% { opacity: 0; } }
@keyframes mmblinkrim { 0% { opacity: 0.28; } 25% { opacity: 1; } 100% { opacity: 0.28; } }
/* Forkert par: et kort ryst, og lyset falder roligt tilbage */
.mm-tile.is-miss { animation: mmshake 420ms var(--ease); opacity: 0.7; }
@keyframes mmshake { 20% { transform: translateX(-5px); } 40% { transform: translateX(5px); } 60% { transform: translateX(-3px); } 80% { transform: translateX(2px); } }
/* Vending: glasset drejer om sin midte og løfter sig let */
.mm-tile.is-flipping { animation: mmflip 560ms var(--ease); z-index: 3; }
.mm-tile.is-flipping::before { opacity: 1; transition-duration: 100ms; }

@keyframes mmflip {
  0% { transform: perspective(700px) translateY(0) rotateY(0) scale(1); }
  50% { transform: perspective(700px) translateY(-10px) rotateY(90deg) scale(1.06); }
  100% { transform: perspective(700px) translateY(0) rotateY(0) scale(1); } }

/* Stats under spillet: diskret, som et resultatbord */
.mm-stats { display: flex; align-items: center; justify-content: center; gap: clamp(14px, 2vw, 28px); margin-top: clamp(26px, 4vh, 48px);
  font-size: 10px; font-weight: 500; letter-spacing: 0.24em; text-transform: uppercase; color: var(--muted); transition: opacity 600ms var(--ease); }
.mm-stats b { display: inline-block; margin-left: 0.7em; font-weight: 600; color: #fff; letter-spacing: 0.06em; font-variant-numeric: tabular-nums; }
.mm-stats b.is-bump { animation: mmbump 500ms var(--ease); }
@keyframes mmbump { 40% { transform: scale(1.35); color: var(--champ); text-shadow: 0 0 12px rgba(var(--champ-rgb), 0.8); } }
.mm-stats i { width: 1px; height: 12px; background: rgba(255, 255, 255, 0.16); }

/* Sejrsskærmen står, hvor kortene lå */
.mm-gift { position: absolute; left: 50%; top: 50%; width: min(92vw, 860px); transform: translate(-50%, calc(-50% - clamp(20px, 3vw, 44px))); text-align: center; visibility: hidden; }
.mm-gift p { margin: 0; opacity: 0; transform: translateY(14px) scale(0.98); transition: opacity 900ms var(--ease), transform 900ms var(--ease); }
.mm-wincards { position: relative; height: clamp(96px, 13vw, 150px); margin: 0 auto clamp(18px, 3vh, 30px); width: clamp(200px, 28vw, 320px); visibility: hidden; }
.mm-wc { position: absolute; top: 0; width: clamp(88px, 12vw, 136px); aspect-ratio: 1; border-radius: 16px; display: grid; place-items: center;
  background: linear-gradient(150deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.03) 45%, rgba(255, 255, 255, 0.06)), rgba(12, 12, 14, 0.7);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.35), inset 0 1px 1px rgba(255, 255, 255, 0.7), 0 0 30px rgba(var(--champ-rgb), 0.45), 0 0 80px rgba(var(--champ-rgb), 0.2), 0 24px 40px rgba(0, 0, 0, 0.6);
  opacity: 0; transition: opacity 900ms var(--ease), transform 1100ms cubic-bezier(0.2, 1.4, 0.4, 1); }
.mm-wc svg { width: 70%; fill: #fff; filter: drop-shadow(0 0 6px rgba(var(--champ-rgb), 0.6)); }
.mm-wc:first-child { left: 4%; transform: translateY(30px) rotate(0deg) scale(0.7); }
.mm-wc:last-child { right: 4%; transform: translateY(30px) rotate(0deg) scale(0.7); }
.mm.is-complete .mm-wincards { visibility: visible; }
.mm.is-complete .mm-wc { opacity: 1; transition-delay: 300ms; animation: mmfloat 4200ms ease-in-out 1500ms infinite; }
.mm.is-complete .mm-wc:first-child { transform: translateY(6px) rotate(-14deg) scale(1); }
.mm.is-complete .mm-wc:last-child { transform: translateY(-2px) rotate(11deg) scale(1); --rot: 11deg; }
@keyframes mmfloat { 50% { translate: 0 -6px; } }
.mm-win { font-size: clamp(40px, 6vw, 84px); font-weight: 700; line-height: 1; letter-spacing: 0.02em; text-transform: uppercase; color: #fff;
  text-shadow: 0 0 22px rgba(var(--champ-rgb), 0.65), 0 0 60px rgba(var(--champ-rgb), 0.35), 0 0 120px rgba(var(--champ-rgb), 0.15); }
.mm-prize { margin-top: 16px !important; font-size: clamp(14px, 1.5vw, 20px); font-weight: 500; letter-spacing: 0.18em; line-height: 1.5; text-transform: uppercase; color: #f2f5fb; }
.mm-cta { margin-top: clamp(26px, 4vh, 40px) !important; display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.mm-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 46px; padding: 0 26px; border-radius: 999px; font: inherit; font-size: 11px; font-weight: 600;
  letter-spacing: 0.22em; text-transform: uppercase; color: #fffaf0; background: transparent; border: 1px solid rgba(255, 255, 255, 0.22); cursor: pointer; text-decoration: none;
  transition: border-color 300ms var(--ease), box-shadow 300ms var(--ease), transform 300ms var(--ease); }
.mm-btn { min-height: 50px; padding: 0 34px; font-size: 12px; }
.mm-btn.is-primary { border: 1.5px solid #fff; box-shadow: 0 0 18px rgba(var(--champ-rgb), 0.45), 0 0 46px rgba(var(--champ-rgb), 0.2), inset 0 0 16px rgba(var(--champ-rgb), 0.18); text-shadow: 0 0 10px rgba(var(--champ-rgb), 0.8); }
@media (hover: hover) { .mm-btn:hover { transform: translateY(-2px); border-color: var(--champ); box-shadow: 0 0 30px rgba(var(--champ-rgb), 0.35), inset 0 0 18px rgba(var(--champ-rgb), 0.18); } }
.mm-quote { margin: clamp(60px, 10vh, 120px) auto 0 !important; max-width: 30em; font-size: clamp(11px, 1vw, 13px); font-weight: 700; line-height: 1.4; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); text-wrap: balance; }
.mm-quote .thin { font-weight: 300; }
.mm.is-complete .mm-gift { visibility: visible; }
.mm.is-complete .mm-win { opacity: 1; transform: none; transition-delay: 500ms; animation: mmpop 900ms var(--ease) 500ms both; }
@keyframes mmpop { 0% { transform: scale(0.6); opacity: 0; } 60% { transform: scale(1.08); opacity: 1; } 100% { transform: scale(1); opacity: 1; } }
.mm.is-complete .mm-prize { opacity: 1; transform: none; transition-delay: 1200ms; }
.mm.is-complete .mm-cta { opacity: 1; transform: none; transition-delay: 1700ms; }
.mm.is-complete .mm-quote { opacity: 1; transform: none; transition-delay: 2400ms; }
@media (max-width: 720px) { .mm-quote { display: none; } .mm-gift { transform: translate(-50%, calc(-50% - 10px)); } }
@media (max-width: 720px) {
  .site-footer { margin-top: 168px; }
  .mm { padding-top: 80px; }
  .mm-logo { width: 100%; }
  .mm-play { width: 84%; margin-top: clamp(28px, 5vh, 48px); }
  .mm-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
  .mm-tile { border-radius: 9px; }
  .mm-stats { letter-spacing: 0.18em; gap: 12px; }
}
/* Computer: spillet skalerer med vinduet (som filmen), og brikkerne ligger længere nede */
@media (min-width: 721px) {
  .site-footer { margin-top: calc(2 * clamp(96px, 14vw, 200px) - clamp(44px, 7vh, 180px)); }
  .mm { width: 88vw; padding-top: clamp(44px, 7vh, 180px); }
  .mm-logo { width: min(100%, 40vw); }
  .mm-play { width: min(100%, 44vw, 60svh); margin-top: clamp(50px, 12vh, 240px); }
  .mm-hint { font-size: clamp(11.5px, 0.82vw, 19px); margin-bottom: clamp(32px, 6vh, 110px); }
  .mm-grid { gap: clamp(10px, 1.2vw, 30px); }
}
@media (prefers-reduced-motion: reduce) {
  .mm-grid { display: none; }
  .mm.is-playing .mm-slot { opacity: 1; }
}

/* Nederst til højre: copyright og CVR */
.site-legal { position: absolute; left: 0; right: 0; bottom: clamp(16px, 3vh, 28px); margin: 0; z-index: 3; text-align: center;
  font-size: 9.5px; letter-spacing: 0.08em; color: var(--muted); }

.case-hero { padding: 140px 0 0; }
.back { font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--muted); display: inline-flex; gap: 10px; align-items: center; }
.back:hover { color: var(--fg); }
.back span { display: inline-block; transition: transform 400ms var(--ease); }
.back:hover span { transform: translateX(-6px); }
.case-title { font-size: clamp(34px, 6vw, 88px); line-height: 1; letter-spacing: 0.01em; margin: 32px 0 0; font-weight: 700; }
.case-title span { display: block; font-weight: 300; color: var(--muted); font-size: 0.42em; letter-spacing: 0.06em; margin-top: 16px; }
.case-lead { font-size: clamp(20px, 2.4vw, 32px); line-height: 1.3; max-width: 26ch; margin: 40px 0 0; font-weight: 400; }
.case-media { margin-top: clamp(48px, 6vw, 80px); aspect-ratio: 16 / 9; background: var(--bg-raised); view-transition-name: case-media; }
.case-media img, .case-media video { width: 100%; height: 100%; object-fit: cover; }
.case-media video { object-fit: contain; background: #000; }
.case-body { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: clamp(40px, 7vw, 120px); padding: clamp(64px, 8vw, 120px) 0; }
.case-body p { margin: 0 0 1.2em; max-width: 62ch; }
.case-body aside { font-size: 15px; }
.case-body aside h2 { font-size: 12px; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; color: var(--muted); margin: 0 0 16px; }
.case-body aside ul { list-style: none; margin: 0 0 40px; padding: 0; border-top: 1px solid var(--line); }
.case-body aside li { padding: 12px 0; border-bottom: 1px solid var(--line); }
@media (max-width: 820px) { .case-body { grid-template-columns: 1fr; } }
.gallery { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(12px, 2vw, 24px); }
.gallery figure { margin: 0; background: var(--bg-raised); overflow: hidden; }
.gallery img { width: 100%; height: 100%; object-fit: cover; }
.gallery figure.wide { grid-column: 1 / -1; }
.gallery video { width: 100%; background: #000; }
@media (max-width: 600px) { .gallery { grid-template-columns: 1fr; } }
.pager { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--line); margin-top: clamp(80px, 10vw, 160px); }
.pager a { padding: 40px 0; display: block; }
.pager a + a { text-align: right; border-left: 1px solid var(--line); padding-left: 24px; }
.pager small { display: block; font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--muted); margin-bottom: 10px; }
.pager b { font-weight: 500; font-size: clamp(16px, 2vw, 24px); letter-spacing: 0.04em; }

/* Sideskift: browsere der kan, glider mellem siderne og lader case-billedet
   flyde over i case-sidens topbillede. Andre får en enkel fade (site.js). */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: 420ms var(--ease) both vt-out; }
::view-transition-new(root) { animation: 620ms var(--ease) both vt-in; }
::view-transition-group(case-media) { animation-duration: 700ms; animation-timing-function: var(--ease); }
@keyframes vt-out { to { opacity: 0; transform: translateY(-12px); } }
@keyframes vt-in { from { opacity: 0; transform: translateY(16px); } }
body.is-leaving main { opacity: 0; transform: translateY(-12px); transition: opacity 320ms var(--ease), transform 320ms var(--ease); }

/* ---------- Reducér bevægelse ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; scroll-behavior: auto !important; }
  .reveal { opacity: 1; transform: none; }
  .me { height: auto; }
  .me-sticky { position: relative; height: auto; }
  .hero-art { opacity: 1; animation: none; }
  .me { padding: clamp(96px, 14vw, 200px) 0; margin: 0; }
  .me-photo { clip-path: none; }
  .me-name span, .me-contact { opacity: 1; transform: none; }
  .me-photo img, .me-first, .me-last { transform: none; }
  .me-title { clip-path: none; }
  .logos li { opacity: 1; filter: none; }
  .awards li { opacity: 1; transform: none; }
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}


/* Intro under Cases-overskriften: samme stille stil som copyright-linjen nederst */
.cases-intro { margin-top: calc(clamp(24px, 4vw, 48px) * -0.5); margin-bottom: clamp(24px, 4vw, 48px); }
.cases-note { max-width: min(400px, 24vw); margin: 0; font-size: 10.5px; line-height: 1.6; letter-spacing: 0.04em; color: var(--muted); opacity: 0.8; }

@media (min-width: 821px) {
  /* titlen står over billedet */
  .cx-caption { order: 0; margin: 0 0 14px auto; }
  /* case-navnene toner ud, inden de når op under Cases-overskriften */
  #cases > .label::after { content: ""; position: absolute; top: 100%; left: var(--gutter); width: 36%; height: 72px;
    background: linear-gradient(var(--bg), transparent); opacity: 0; transition: opacity 300ms var(--ease); }
  #cases.is-stuck > .label::after { opacity: 1; }
  #cases > .label { background: linear-gradient(to right, var(--bg) 0, var(--bg) calc(var(--gutter) + 36%), transparent calc(var(--gutter) + 36%)); }
}
@media (max-width: 820px) {
  /* på mobilen står titlen over billedet */
  .cx-caption { order: 0; margin: 0 0 12px; }
}
/* Mobil: disclaimeren står i fuld bredde med lige margen, så blokken flugter med billedets kanter */
@media (max-width: 820px) { .cases-note { max-width: none; margin: 0; text-align: justify; text-align-last: left; hyphens: auto; -webkit-hyphens: auto; } }