/* =========================================================
   VIGGE STUDIOS
   Palette taken from the existing brand:
   yellow #FCC662 · orange #FC6400 · cream #FFF9D5 · brown #4D260D
   ========================================================= */

:root {
  --yellow: #FCC662;
  --yellow-lt: #FFE0A3;
  --orange: #FC6400;
  --orange-dp: #D24E00;
  --cream: #FFF9D5;
  --cream-2: #FFF3C2;
  --text: #4D260D;
  --text-soft: #6E4428;
  --line: rgba(77, 38, 13, 0.14);

  /* night tones, mixed from the same brown/orange family */
  --night: #1A0A03;
  --night-2: #2A1206;
  --night-3: #3A1B08;
  --night-line: rgba(252, 198, 98, 0.18);
  --night-text: #F7E7C4;
  --night-soft: rgba(247, 231, 196, 0.62);

  --font-display: "Fraunces", Georgia, "Times New Roman", serif;
  --font-body: "Outfit", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  --font-mono: "Space Mono", ui-monospace, "SFMono-Regular", monospace;

  --r-lg: 34px;
  --r-md: 22px;
  --r-sm: 14px;

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-io: cubic-bezier(0.65, 0, 0.35, 1);

  --wrap: 1240px;
  --pad: max(22px, 5vw);

  --beat: 0.4839s; /* 124 bpm */
}

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

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  /* both html and body must clip, or the document still reports a
     wider scroll box than the viewport */
  overflow-x: clip;
}

body {
  margin: 0;
  background: var(--night);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.62;
  /* `clip` not `hidden`: hidden makes body a scroll container, which
     both breaks position:sticky and lets the page be panned sideways */
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
}

body.is-locked { overflow: hidden; }

img, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }

::selection { background: var(--orange); color: #fff; }

.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 var(--pad); }
.wrap.wide { max-width: 1560px; }

/* ---------- typography ---------- */
.eyebrow {
  margin: 0 0 20px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--orange);
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.pip {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--orange);
  box-shadow: 0 0 0 0 rgba(252, 100, 0, 0.5);
  animation: pip var(--beat) linear infinite;
  flex: none;
}
@keyframes pip {
  0%   { box-shadow: 0 0 0 0 rgba(252, 100, 0, 0.55); transform: scale(1); }
  60%  { box-shadow: 0 0 0 10px rgba(252, 100, 0, 0); transform: scale(0.86); }
  100% { box-shadow: 0 0 0 0 rgba(252, 100, 0, 0); transform: scale(1); }
}

.h2 {
  margin: 0 0 22px;
  font-family: var(--font-display);
  font-weight: 700;
  font-variation-settings: "SOFT" 30, "WONK" 1, "opsz" 100;
  font-size: clamp(32px, 4.6vw, 60px);
  line-height: 1.04;
  letter-spacing: -0.022em;
}
.h2 em { font-style: italic; font-weight: 500; color: var(--orange); }

.lead { margin: 0 0 18px; font-size: clamp(17px, 1.5vw, 20px); color: var(--text-soft); max-width: 58ch; font-weight: 300; }
.body { margin: 0 0 18px; color: var(--text-soft); max-width: 58ch; font-weight: 300; }

.section { position: relative; padding: clamp(84px, 11vw, 160px) 0; }

.section-head { max-width: 720px; margin: 0 auto clamp(48px, 6vw, 84px); text-align: center; }
.section-head .eyebrow { justify-content: center; }
.section-head .lead { margin-left: auto; margin-right: auto; }

/* ---------- buttons ---------- */
.btn {
  --btn-bg: var(--orange);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 15px 30px;
  border: 0;
  border-radius: 999px;
  font-weight: 600;
  font-size: 15px;
  letter-spacing: 0.01em;
  cursor: pointer;
  overflow: hidden;
  isolation: isolate;
  transition: transform 0.5s var(--ease), box-shadow 0.5s var(--ease);
}
.btn > span { position: relative; z-index: 2; }
.btn::before {
  content: "";
  position: absolute; inset: 0; z-index: 1;
  background: var(--btn-bg);
  transition: transform 0.55s var(--ease);
}
.btn::after {
  content: "";
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(100deg, var(--yellow), #FFD98A 55%, var(--yellow));
  transform: translateY(101%);
  transition: transform 0.55s var(--ease);
}
.btn-solid { color: #fff; box-shadow: 0 14px 34px -12px rgba(252, 100, 0, 0.7); }
.btn-solid:hover { transform: translateY(-3px); box-shadow: 0 22px 46px -14px rgba(252, 100, 0, 0.6); color: var(--text); }
.btn-solid:hover::after { transform: translateY(0); }

.btn-ghost { color: var(--night-text); border: 1px solid rgba(247, 231, 196, 0.38); background: transparent; }
.btn-ghost::before { background: transparent; }
.btn-ghost::after { background: var(--cream); }
.btn-ghost:hover { color: var(--text); transform: translateY(-3px); border-color: transparent; }
.btn-ghost:hover::after { transform: translateY(0); }

.btn-lg { padding: 18px 38px; font-size: 16px; }
.btn-sm { padding: 11px 22px; font-size: 14px; }
.btn-block { width: 100%; }

/* =========================================================
   CURSOR
   ========================================================= */
.cursor { position: fixed; top: 0; left: 0; z-index: 9000; pointer-events: none; opacity: 0; transition: opacity 0.3s; }
body.cursor-ready .cursor { opacity: 1; }
.cursor-dot {
  position: absolute; left: 0; top: 0;
  width: 7px; height: 7px; margin: -3.5px 0 0 -3.5px;
  border-radius: 50%; background: var(--orange);
  transform: translate(var(--mx, 0px), var(--my, 0px)) scale(var(--dot-s, 1));
  transition: opacity 0.2s;
}
.cursor-ring {
  position: absolute; left: 0; top: 0;
  width: 40px; height: 40px; margin: -20px 0 0 -20px;
  border-radius: 50%; border: 1px solid rgba(252, 100, 0, 0.5);
  transform: translate(var(--rx, 0px), var(--ry, 0px)) scale(var(--ring-s, 1));
  transition: background 0.35s, border-color 0.35s, width 0.35s var(--ease), height 0.35s var(--ease), margin 0.35s var(--ease);
}
.cursor-label {
  position: absolute; left: 0; top: 0;
  transform: translate(var(--rx, 0px), var(--ry, 0px)) translate(-50%, -50%) scale(var(--label-s, 0.6));
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--text); opacity: 0; transition: opacity 0.25s;
  white-space: nowrap;
}
body.cursor-hover .cursor { --ring-s: 1.5; --dot-s: 0.4; }
body.cursor-hover .cursor-ring { background: rgba(252, 100, 0, 0.1); }
body.cursor-media .cursor { --dot-s: 0; --label-s: 1; }
body.cursor-media .cursor-ring { width: 92px; height: 92px; margin: -46px 0 0 -46px; background: var(--yellow); border-color: transparent; }
body.cursor-media .cursor-dot { opacity: 0; }
body.cursor-media .cursor-label { opacity: 1; }

/* =========================================================
   GLOBAL LAYERS
   ========================================================= */
.lightfield {
  position: fixed; inset: 0; z-index: 1;
  pointer-events: none; opacity: 0;
  transition: opacity 1.4s var(--ease);
  mix-blend-mode: screen;
}
body.loaded .lightfield { opacity: 1; }

.grain {
  position: fixed; inset: -120px; z-index: 2; pointer-events: none; opacity: 0.3;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/></filter><rect width='180' height='180' filter='url(%23n)' opacity='0.42'/></svg>");
  animation: grain 6s steps(6) infinite;
}
@keyframes grain {
  0%,100% { transform: translate(0,0); }
  20% { transform: translate(-24px, 12px); }
  40% { transform: translate(18px, -22px); }
  60% { transform: translate(-14px, -12px); }
  80% { transform: translate(22px, 18px); }
}

/* =========================================================
   HEADER
   ========================================================= */
.site-header {
  position: fixed; z-index: 200; top: 0; left: 0; right: 0;
  height: 82px;
  padding: 0 var(--pad);
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px;
  transition: background 0.5s var(--ease), backdrop-filter 0.5s, border-color 0.5s, height 0.4s var(--ease), transform 0.5s var(--ease);
  border-bottom: 1px solid transparent;
}
.site-header.is-stuck {
  height: 68px;
  background: rgba(26, 10, 3, 0.72);
  backdrop-filter: blur(20px) saturate(1.3);
  -webkit-backdrop-filter: blur(20px) saturate(1.3);
  border-bottom-color: var(--night-line);
}
.site-header.is-hidden { transform: translateY(-102%); }

.brand { display: inline-flex; align-items: center; gap: 12px; }
.brand-mark {
  width: 40px; height: 40px; border-radius: 50%;
  overflow: hidden; flex: none;
  box-shadow: 0 0 0 1px rgba(252, 198, 98, 0.4), 0 8px 20px -8px rgba(0,0,0,0.6);
  transition: transform 0.6s var(--ease);
}
.brand-mark img { width: 100%; height: 100%; object-fit: cover; }
.brand:hover .brand-mark { transform: rotate(-14deg) scale(1.06); }
.brand-name {
  font-weight: 500; font-size: 18px; letter-spacing: -0.01em;
  color: var(--night-text);
}

.nav { display: flex; gap: 4px; }
.nav a {
  position: relative;
  padding: 9px 15px;
  font-size: 14.5px; font-weight: 400;
  color: var(--night-soft);
  border-radius: 999px;
  transition: color 0.35s;
  overflow: hidden;
}
.nav a span { position: relative; z-index: 2; }
.nav a::before {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: rgba(252, 198, 98, 0.12);
  transform: scale(0.6); opacity: 0;
  border-radius: 999px;
  transition: transform 0.45s var(--ease), opacity 0.35s;
}
.nav a:hover { color: var(--yellow); }
.nav a:hover::before { transform: scale(1); opacity: 1; }
.nav a.is-active { color: var(--yellow); }
.nav a.is-active::before { transform: scale(1); opacity: 1; }

.header-right { display: flex; align-items: center; gap: 10px; }

/* instagram icon button */
.ig-link {
  width: 40px; height: 40px; flex: none;
  display: grid; place-items: center;
  border-radius: 50%;
  border: 1px solid rgba(247, 231, 196, 0.26);
  transition: border-color 0.4s, background 0.4s, transform 0.5s var(--ease);
}
.ig-link svg { width: 19px; height: 19px; fill: none; stroke: var(--night-text); stroke-width: 1.6; }
.ig-link svg .ig-dot { fill: var(--night-text); stroke: none; }
.ig-link:hover { border-color: var(--orange); background: rgba(252, 100, 0, 0.16); transform: translateY(-2px); }
.ig-link:hover svg { stroke: var(--yellow); }
.ig-link:hover svg .ig-dot { fill: var(--yellow); }

.burger {
  display: none;
  width: 44px; height: 44px;
  border: 1px solid rgba(247, 231, 196, 0.28);
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  padding: 0;
  place-content: center; justify-items: center; gap: 4px;
}
.burger i { display: block; width: 17px; height: 1.6px; background: var(--night-text); border-radius: 2px; transition: transform 0.45s var(--ease), opacity 0.3s; }
.burger[aria-expanded="true"] i:nth-child(1) { transform: translateY(5.6px) rotate(45deg); }
.burger[aria-expanded="true"] i:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] i:nth-child(3) { transform: translateY(-5.6px) rotate(-45deg); }

/* mobile menu */
.mobile-menu {
  position: fixed; inset: 0; z-index: 190;
  background: linear-gradient(170deg, var(--night), var(--night-2));
  display: flex; flex-direction: column; justify-content: center;
  padding: 100px var(--pad) 48px;
  opacity: 0; visibility: hidden;
  transition: opacity 0.5s var(--ease), visibility 0.5s;
}
.mobile-menu[hidden] { display: flex; }
.mobile-menu.is-open { opacity: 1; visibility: visible; }
.mobile-menu nav { display: flex; flex-direction: column; gap: 2px; }
.mobile-menu nav a {
  display: flex; align-items: baseline; gap: 16px;
  padding: 15px 0;
  border-bottom: 1px solid rgba(252, 198, 98, 0.14);
  font-family: var(--font-display);
  font-size: clamp(28px, 8vw, 40px);
  color: var(--night-text);
  opacity: 0; transform: translateY(18px);
  transition: opacity 0.5s var(--ease), transform 0.5s var(--ease), color 0.3s;
}
.mobile-menu.is-open nav a { opacity: 1; transform: none; }
.mobile-menu nav a em {
  font-family: var(--font-mono); font-style: normal;
  font-size: 12px; letter-spacing: 0.16em; color: var(--orange);
}
.mobile-menu-foot {
  margin-top: 36px; display: flex; flex-wrap: wrap; gap: 10px 22px;
  font-family: var(--font-mono); font-size: 13px; color: var(--yellow);
}

/* =========================================================
   HERO
   ========================================================= */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex; align-items: flex-start;
  padding: 344px 0 100px;
  overflow: hidden;
  background: var(--night);
  z-index: 3;
}

.hero-bg { position: absolute; inset: 0; z-index: 0; }
.hero-bg video {
  width: 100%; height: 100%; object-fit: cover;
  opacity: 0.34;
  filter: saturate(1.15) contrast(1.05);
  transform: scale(1.08);
}
.hero-bg-tint {
  position: absolute; inset: 0;
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(252, 100, 0, 0.22), transparent 58%),
    radial-gradient(90% 70% at 50% 108%, rgba(252, 198, 98, 0.16), transparent 60%),
    linear-gradient(180deg, rgba(26,10,3,0.86), rgba(26,10,3,0.68) 42%, rgba(26,10,3,0.95));
}

/* ---- 3D disco ball ----
   Facets carry static, varied brightness; the shimmer comes from the
   ball's own rotation plus one specular overlay. Animating 300+ filters
   individually is what made this stutter, so nothing animates per facet. */
.ball-stage {
  position: absolute; z-index: 1;
  top: 0; left: 50%; transform: translateX(-50%);
  width: min(520px, 92vw); height: 340px;
  perspective: 1400px;
  pointer-events: none;
}
.ball-rig {
  position: absolute; left: 50%; top: 198px;
  transform: translateX(-50%);
  transform-style: preserve-3d;
}
.ball-cord {
  position: absolute; left: 50%; bottom: 100%;
  width: 2px; height: 200px;
  margin-left: -1px;
  background: linear-gradient(180deg, transparent, rgba(252, 198, 98, 0.55));
}
.ball {
  position: relative;
  width: 0; height: 0;
  transform-style: preserve-3d;
  animation: ballSpin 26s linear infinite;
}
@keyframes ballSpin { to { transform: rotateY(360deg); } }

.facet {
  position: absolute; left: 0; top: 0;
  background: linear-gradient(140deg, #FFF6D8 0%, var(--yellow) 38%, #C88A2A 70%, #6E4428 100%);
  box-shadow: inset 0 0 0 0.5px rgba(26, 10, 3, 0.5);
  filter: brightness(var(--b, 1));
  backface-visibility: hidden;
}

/* single rotating highlight instead of per-facet animation */
.ball-spec {
  position: absolute; left: 50%; top: 50%;
  width: 300px; height: 300px; margin: -150px 0 0 -150px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 34% 30%, rgba(255, 255, 255, 0.55), rgba(255, 249, 213, 0.12) 32%, transparent 58%),
    conic-gradient(from 0deg, transparent 0 18%, rgba(255, 249, 213, 0.16) 26%, transparent 34% 68%, rgba(252, 198, 98, 0.14) 76%, transparent 84%);
  mix-blend-mode: screen;
  animation: specSpin 9s linear infinite;
  pointer-events: none;
}
@keyframes specSpin { to { transform: rotate(360deg); } }

.ball-glow {
  position: absolute; left: 50%; top: 50%;
  width: 560px; height: 560px; margin: -280px 0 0 -280px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(252, 198, 98, 0.34), rgba(252, 100, 0, 0.12) 42%, transparent 68%);
  animation: glowPulse var(--beat) ease-out infinite;
  pointer-events: none;
}
@keyframes glowPulse {
  0% { transform: scale(1.04); opacity: 0.95; }
  70% { transform: scale(0.95); opacity: 0.6; }
  100% { transform: scale(1.04); opacity: 0.95; }
}
.ball-shine {
  position: absolute; left: 50%; top: 50%;
  width: 24px; height: 24px; margin: -12px 0 0 -12px;
  border-radius: 50%;
  background: #FFF9D5;
  filter: blur(9px);
  opacity: 0.7;
}

.beams { position: absolute; inset: -40vh -50vw; pointer-events: none; }
.beam {
  position: absolute; left: 50%; top: 250px;
  width: 2px; height: 130vh;
  transform-origin: 50% 0;
  background: linear-gradient(180deg, rgba(252, 198, 98, 0.5), rgba(252, 198, 98, 0.06) 42%, transparent 78%);
  filter: blur(1px);
  opacity: 0;
  animation: beamSweep var(--bd, 9s) var(--ease-io) infinite;
  animation-delay: var(--bdl, 0s);
}
@keyframes beamSweep {
  0%, 100% { opacity: 0; }
  12% { opacity: 0.55; }
  50% { opacity: 0.2; }
  88% { opacity: 0.45; }
}

/* ---- hero content ---- */
.hero-inner {
  position: relative; z-index: 4;
  width: 100%; max-width: var(--wrap);
  margin: 0 auto; padding: 0 var(--pad);
  text-align: center;
  color: var(--night-text);
}
.hero-eyebrow { color: var(--yellow); }
.hero-eyebrow .pip { background: var(--yellow); }

.hero-title {
  margin: 0 0 26px;
  font-family: var(--font-display);
  font-weight: 700;
  font-variation-settings: "SOFT" 40, "WONK" 1, "opsz" 144;
  font-size: clamp(38px, 7.2vw, 100px);
  line-height: 1.0;
  letter-spacing: -0.03em;
}
.hero-title .line { display: block; overflow: hidden; padding-bottom: 0.07em; }
.hero-title .w {
  display: inline-block;
  transform: translateY(112%) rotate(4deg);
  opacity: 0;
  transition: transform 1s var(--ease), opacity 0.8s var(--ease);
}
body.loaded .hero-title .w { transform: none; opacity: 1; }
.hero-title .em { font-style: italic; font-weight: 500; color: var(--yellow); }

.hero-text {
  margin: 0 auto 34px;
  max-width: 54ch;
  font-size: clamp(16px, 1.5vw, 19px);
  font-weight: 300;
  color: var(--night-soft);
  opacity: 0; transform: translateY(22px);
  transition: opacity 0.9s var(--ease) 0.42s, transform 0.9s var(--ease) 0.42s;
}
body.loaded .hero-text { opacity: 1; transform: none; }

.hero-actions {
  display: flex; flex-wrap: wrap; gap: 14px; justify-content: center;
  opacity: 0; transform: translateY(22px);
  transition: opacity 0.9s var(--ease) 0.54s, transform 0.9s var(--ease) 0.54s;
}
body.loaded .hero-actions { opacity: 1; transform: none; }

.hero-meta {
  margin-top: 44px;
  display: flex; align-items: center; justify-content: center; gap: 22px; flex-wrap: wrap;
  opacity: 0;
  transition: opacity 1s var(--ease) 0.7s;
}
body.loaded .hero-meta { opacity: 1; }

.hero-badge {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 9px 18px;
  border: 1px solid rgba(252, 198, 98, 0.3);
  border-radius: 999px;
  background: rgba(252, 198, 98, 0.07);
  backdrop-filter: blur(8px);
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em;
  color: var(--yellow);
}
.hero-badge .pip { background: var(--yellow); }

.vu { display: flex; align-items: flex-end; gap: 3px; height: 30px; }
.vu i {
  display: block; width: 3px; border-radius: 2px;
  background: linear-gradient(180deg, var(--orange), var(--yellow));
  height: 20%;
  transition: height 0.09s linear;
}

.scroll-cue {
  position: absolute; z-index: 5; bottom: 34px; right: var(--pad);
  display: grid; justify-items: center; gap: 10px;
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase;
  color: rgba(247, 231, 196, 0.55);
}
.scroll-cue-line { display: block; width: 1px; height: 46px; background: linear-gradient(180deg, transparent, var(--yellow)); }
.scroll-cue-line::after {
  content: ""; display: block; width: 1px; height: 14px; background: var(--orange);
  animation: cueDrop 2.2s var(--ease-io) infinite;
}
@keyframes cueDrop { 0% { transform: translateY(-46px); opacity: 0; } 40% { opacity: 1; } 100% { transform: translateY(0); opacity: 0; } }

/* =========================================================
   MARQUEE
   ========================================================= */
.marquee {
  position: relative; z-index: 4;
  background: var(--orange);
  color: #fff;
  padding: 17px 0;
  overflow: hidden;
  border-top: 1px solid rgba(0,0,0,0.08);
}
.marquee-track {
  display: flex; align-items: center; gap: 30px;
  width: max-content;
  animation: marquee 34s linear infinite;
}
.marquee-track span {
  font-family: var(--font-display); font-size: clamp(19px, 2.4vw, 28px);
  font-style: italic; font-weight: 500; white-space: nowrap;
}
.marquee-track i { font-size: 12px; opacity: 0.7; font-style: normal; }
@keyframes marquee { to { transform: translateX(-50%); } }

/* =========================================================
   LIGHT SECTIONS
   ========================================================= */
.about, .services, .events, .why {
  background: var(--cream);
  color: var(--text);
  z-index: 4;
}
.services { background: linear-gradient(180deg, var(--cream), var(--cream-2)); }
.events { background: var(--cream-2); }
.why { background: linear-gradient(180deg, var(--cream-2), var(--cream)); }

/* ---------- ABOUT ---------- */
.about-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: clamp(36px, 6vw, 90px); align-items: center;
}
.tick-list { list-style: none; margin: 30px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.tick-list li span {
  display: inline-block; padding: 8px 16px;
  border: 1px solid var(--line); border-radius: 999px;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.06em;
  color: var(--text-soft); background: rgba(255,255,255,0.5);
}

/* Ejerkort: et rigtigt ansigt på manden bag firmaet. En privat kunde
   skal overlade sit bryllup til en fremmed, og et navn med et ansigt
   vejer tungere end nogen formulering. object-position frame'er ansigtet
   uden at billedfilen skal beskæres. */
.owner-card {
  margin: 26px 0 0; padding: 12px 24px 12px 12px;
  display: inline-flex; align-items: center; gap: 16px;
  border: 1px solid var(--line); border-radius: 999px;
  background: rgba(255, 255, 255, 0.55);
}
.owner-card img {
  width: 72px; height: 72px; border-radius: 50%;
  object-fit: cover; object-position: 50% 50%;
  box-shadow: 0 0 0 2px rgba(252, 198, 98, 0.55);
}
.owner-card figcaption { display: grid; gap: 3px; }
.owner-card b { font-family: var(--font-display); font-size: 21px; font-weight: 700; color: var(--text); line-height: 1; }
.owner-card span {
  font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--text-soft);
}

.about-visual { position: relative; }
.tilt-card {
  position: relative; margin: 0;
  border-radius: var(--r-lg);
  overflow: hidden;
  transform-style: preserve-3d;
  transition: transform 0.5s var(--ease), box-shadow 0.5s var(--ease);
  box-shadow: 0 40px 80px -40px rgba(77, 38, 13, 0.55);
  will-change: transform;
}
.tilt-card img { width: 100%; height: clamp(340px, 46vw, 560px); object-fit: cover; }
.tilt-card figcaption {
  position: absolute; left: 18px; bottom: 18px;
  padding: 9px 16px; border-radius: 999px;
  background: rgba(26, 10, 3, 0.6);
  backdrop-filter: blur(10px);
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.06em;
  color: var(--night-text);
}

/* 3D vinyl */
.vinyl-prop {
  position: absolute; right: -34px; bottom: -46px;
  width: clamp(120px, 17vw, 190px); aspect-ratio: 1;
  perspective: 700px;
  pointer-events: none;
  filter: drop-shadow(0 24px 34px rgba(77, 38, 13, 0.45));
}
.vinyl {
  position: relative; width: 100%; height: 100%; border-radius: 50%;
  transform: rotateX(58deg) rotateZ(0deg);
  transform-style: preserve-3d;
  background: radial-gradient(circle at 50% 50%, #2A1206 0 27%, #150802 27.5% 100%);
}
.vinyl-grooves {
  position: absolute; inset: 6%; border-radius: 50%;
  background: repeating-radial-gradient(circle at 50% 50%,
    rgba(255, 249, 213, 0.09) 0 1px, transparent 1px 4px);
}
.vinyl-label {
  position: absolute; inset: 34%; border-radius: 50%; overflow: hidden;
  box-shadow: 0 0 0 1px rgba(252, 198, 98, 0.35);
}
.vinyl-label img { width: 100%; height: 100%; object-fit: cover; }
.vinyl-sheen {
  position: absolute; inset: 0; border-radius: 50%;
  background: conic-gradient(from 0deg, transparent 0 12%, rgba(252, 198, 98, 0.3) 18%, transparent 26% 62%, rgba(255, 249, 213, 0.22) 70%, transparent 78%);
  mix-blend-mode: screen;
}

/* ---------- SERVICES ---------- */
.service-list { display: grid; gap: clamp(18px, 2.4vw, 28px); }

.service {
  position: relative;
  display: grid; grid-template-columns: 1.05fr 1fr; align-items: center; gap: clamp(24px, 4vw, 56px);
  padding: clamp(28px, 3.6vw, 46px);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: rgba(255, 255, 255, 0.44);
  overflow: hidden;
  transition: transform 0.6s var(--ease), box-shadow 0.6s var(--ease), border-color 0.6s, background 0.6s;
}
.service::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(70% 120% at 88% 50%, rgba(252, 100, 0, 0.1), transparent 62%);
  opacity: 0; transition: opacity 0.6s var(--ease);
}
.service:hover {
  transform: translateY(-5px);
  box-shadow: 0 36px 70px -38px rgba(77, 38, 13, 0.5);
  border-color: rgba(252, 100, 0, 0.32);
  background: rgba(255, 255, 255, 0.72);
}
.service:hover::before { opacity: 1; }

.service-copy { position: relative; z-index: 2; }
.service-no {
  display: inline-block; margin-bottom: 16px;
  font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.18em;
  color: var(--orange);
  padding: 5px 12px; border: 1px solid rgba(252, 100, 0, 0.3); border-radius: 999px;
}
.service-copy h3 {
  margin: 0 0 12px;
  font-family: var(--font-display); font-weight: 700;
  font-variation-settings: "SOFT" 30, "WONK" 1;
  font-size: clamp(24px, 2.9vw, 38px); line-height: 1.08; letter-spacing: -0.02em;
}
.service-copy p { margin: 0; color: var(--text-soft); max-width: 44ch; font-weight: 300; }

.service-prop {
  position: relative; z-index: 2;
  height: clamp(200px, 22vw, 268px);
  display: grid; place-items: center;
  perspective: 900px;
}
.prop { position: relative; transform-style: preserve-3d; }

/* ---- prop: turntable ---- */
.prop-turntable { width: 230px; height: 190px; transform: rotateX(52deg) rotateZ(-24deg); transform-style: preserve-3d; transition: transform 0.9s var(--ease); }
.service:hover .prop-turntable { transform: rotateX(44deg) rotateZ(-16deg) translateZ(16px); }
.tt-deck {
  position: absolute; inset: 0;
  border-radius: 14px;
  background: linear-gradient(150deg, #3A1B08, #1A0A03);
  box-shadow: 0 0 0 1px rgba(252, 198, 98, 0.22), 0 20px 34px -16px rgba(77, 38, 13, 0.7);
  transform-style: preserve-3d;
}
.tt-shadow {
  position: absolute; left: 8%; top: 14%; width: 84%; height: 84%;
  background: rgba(77, 38, 13, 0.32); filter: blur(22px); border-radius: 50%;
  transform: translateZ(-24px);
}
.tt-platter {
  position: absolute; left: 12px; top: 12px;
  width: 166px; height: 166px; border-radius: 50%;
  background: radial-gradient(circle, #2A1206 0 30%, #120701 31% 100%);
  box-shadow: inset 0 0 0 1px rgba(252, 198, 98, 0.18);
  transform: translateZ(6px);
}
.tt-vinyl {
  position: absolute; inset: 5px; border-radius: 50%;
  background:
    repeating-radial-gradient(circle at 50% 50%, rgba(252, 198, 98, 0.11) 0 1px, transparent 1px 5px),
    radial-gradient(circle, #241005 0 30%, #0F0601 31% 100%);
  animation: spin33 1.8s linear infinite;
}
.tt-vinyl i {
  position: absolute; inset: 33%; border-radius: 50%;
  background: linear-gradient(140deg, var(--yellow), var(--orange));
}
.tt-vinyl b {
  position: absolute; left: 50%; top: 50%; width: 5px; height: 5px; margin: -2.5px 0 0 -2.5px;
  border-radius: 50%; background: #120701;
}
@keyframes spin33 { to { transform: rotate(360deg); } }

.tt-arm {
  position: absolute; right: 14px; top: 22px;
  width: 8px; height: 96px; border-radius: 6px;
  background: linear-gradient(180deg, #C9A05A, #6E4428);
  transform: translateZ(14px) rotate(-24deg);
  transform-origin: 50% 8px;
  animation: armDrift 9s ease-in-out infinite alternate;
  box-shadow: 0 4px 10px rgba(0,0,0,0.4);
}
.tt-arm-head { position: absolute; left: -4px; bottom: -8px; width: 16px; height: 16px; border-radius: 3px; background: linear-gradient(140deg, var(--yellow), var(--orange)); }
@keyframes armDrift { from { transform: translateZ(14px) rotate(-26deg); } to { transform: translateZ(14px) rotate(-16deg); } }

.tt-pitch {
  position: absolute; right: 16px; bottom: 16px; width: 46px; height: 8px;
  border-radius: 6px; background: rgba(252, 198, 98, 0.16);
  transform: translateZ(10px);
}
.tt-pitch span { position: absolute; top: -3px; left: 40%; width: 12px; height: 14px; border-radius: 3px; background: var(--yellow); animation: pitchMove 5s ease-in-out infinite alternate; }
@keyframes pitchMove { from { left: 12%; } to { left: 62%; } }

.tt-led {
  position: absolute; left: 190px; top: 18px; width: 8px; height: 8px; border-radius: 50%;
  background: var(--orange); transform: translateZ(10px);
  animation: ledBlink var(--beat) steps(2) infinite;
}
@keyframes ledBlink { 0%,49% { opacity: 1; } 50%,100% { opacity: 0.25; } }

/* ---- prop: speaker ---- */
.prop-speaker { width: 150px; height: 214px; transform: rotateX(8deg) rotateY(-26deg); transform-style: preserve-3d; transition: transform 0.9s var(--ease); }
.service:hover .prop-speaker { transform: rotateX(6deg) rotateY(-18deg) translateZ(18px); }
.sp-box { position: absolute; inset: 0; transform-style: preserve-3d; }
.sp-face {
  position: absolute; inset: 0;
  border-radius: 10px;
  background: linear-gradient(160deg, #3A1B08, #1A0A03 70%);
  box-shadow: 0 0 0 1px rgba(252, 198, 98, 0.2), 0 26px 40px -22px rgba(77, 38, 13, 0.8);
  transform: translateZ(22px);
  display: grid; justify-items: center; align-content: center; gap: 14px;
  padding: 18px;
}
.sp-side {
  position: absolute; right: 0; top: 0; width: 44px; height: 100%;
  background: linear-gradient(90deg, #24100557, #120701);
  transform: rotateY(90deg) translateZ(128px);
  transform-origin: right center;
  border-radius: 0 10px 10px 0;
}
.sp-top {
  position: absolute; left: 0; top: 0; width: 100%; height: 44px;
  background: linear-gradient(180deg, #3A1B08, #24100599);
  transform: rotateX(90deg) translateZ(22px);
  transform-origin: top center;
  border-radius: 10px 10px 0 0;
}
.sp-tweeter {
  width: 44px; height: 44px; border-radius: 50%;
  background: radial-gradient(circle, #4D260D, #120701 70%);
  box-shadow: inset 0 0 0 1px rgba(252, 198, 98, 0.25);
  display: grid; place-items: center;
}
.sp-tweeter i { width: 16px; height: 16px; border-radius: 50%; background: linear-gradient(140deg, var(--yellow), #8A5A18); }
.sp-woofer {
  position: relative;
  width: 96px; height: 96px; border-radius: 50%;
  background: radial-gradient(circle, #35180799 0 40%, #150802 41% 100%);
  box-shadow: inset 0 0 0 1px rgba(252, 198, 98, 0.28), inset 0 0 24px rgba(0,0,0,0.7);
  display: grid; place-items: center;
  animation: woofer var(--beat) var(--ease) infinite;
}
.sp-woofer i {
  width: 38px; height: 38px; border-radius: 50%;
  background: radial-gradient(circle at 36% 32%, var(--yellow), var(--orange) 60%, #8A3200);
  box-shadow: 0 0 18px rgba(252, 100, 0, 0.5);
}
.sp-woofer b {
  position: absolute; inset: 8px; border-radius: 50%;
  border: 1px solid rgba(252, 198, 98, 0.12);
}
@keyframes woofer {
  0% { transform: scale(1.06); }
  22% { transform: scale(0.94); }
  100% { transform: scale(1.06); }
}
.sp-badge {
  font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.28em;
  color: rgba(252, 198, 98, 0.55); text-transform: uppercase;
}
.sp-waves { position: absolute; left: -52px; top: 50%; transform: translateY(-50%); display: grid; gap: 8px; }
.sp-waves i {
  display: block; width: 34px; height: 34px;
  border-left: 2px solid rgba(252, 100, 0, 0.55);
  border-radius: 50% 0 0 50%;
  opacity: 0;
  animation: waveOut calc(var(--beat) * 2) var(--ease-io) infinite;
}
.sp-waves i:nth-child(2) { animation-delay: calc(var(--beat) * 0.3); }
.sp-waves i:nth-child(3) { animation-delay: calc(var(--beat) * 0.6); }
@keyframes waveOut { 0% { opacity: 0; transform: translateX(14px) scale(0.6); } 40% { opacity: 0.85; } 100% { opacity: 0; transform: translateX(-16px) scale(1.25); } }

/* ---- prop: moving light ---- */
.prop-light { width: 250px; height: 220px; transform-style: preserve-3d; }
.lt-truss {
  position: absolute; left: 0; top: 8px; width: 100%; height: 18px;
  border-radius: 4px;
  background: linear-gradient(180deg, #6E4428, #2A1206);
  display: flex; justify-content: space-around; align-items: center;
  box-shadow: 0 6px 14px -6px rgba(77, 38, 13, 0.6);
}
.lt-truss i { display: block; width: 2px; height: 24px; background: rgba(252, 198, 98, 0.3); transform: rotate(28deg); }
.lt-rig { position: absolute; left: 62px; top: 26px; transform-origin: 50% 0; animation: headSwing 6s var(--ease-io) infinite alternate; }
.lt-rig-b { left: auto; right: 62px; animation-delay: -3s; animation-direction: alternate-reverse; }
@keyframes headSwing { from { transform: rotate(-26deg); } to { transform: rotate(26deg); } }
.lt-yoke { width: 26px; height: 16px; margin: 0 auto; background: linear-gradient(180deg, #6E4428, #3A1B08); border-radius: 3px; }
.lt-head {
  width: 34px; height: 30px; margin: 0 auto;
  border-radius: 6px 6px 10px 10px;
  background: linear-gradient(160deg, #4D260D, #180901);
  box-shadow: inset 0 0 0 1px rgba(252, 198, 98, 0.22);
  display: grid; place-items: end center;
}
.lt-lens {
  width: 20px; height: 8px; border-radius: 50%;
  background: radial-gradient(circle, #FFF6D8, var(--yellow) 60%, var(--orange));
  box-shadow: 0 0 16px rgba(252, 198, 98, 0.9);
  animation: lensFlick var(--beat) steps(2) infinite;
}
@keyframes lensFlick { 0%,60% { opacity: 1; } 61%,100% { opacity: 0.55; } }
.lt-beam {
  position: absolute; left: 50%; top: 30px;
  width: 22px; height: 150px; margin-left: -11px;
  background: linear-gradient(180deg, rgba(252, 198, 98, 0.65), rgba(252, 100, 0, 0.16) 55%, transparent);
  clip-path: polygon(38% 0, 62% 0, 100% 100%, 0 100%);
  filter: blur(2px);
  mix-blend-mode: screen;
  animation: beamFlick calc(var(--beat) * 2) var(--ease-io) infinite;
}
@keyframes beamFlick { 0%,100% { opacity: 0.85; } 50% { opacity: 0.45; } }
.lt-floor {
  position: absolute; left: 50%; bottom: 12px; transform: translateX(-50%);
  width: 190px; height: 34px; border-radius: 50%;
  background: radial-gradient(ellipse, rgba(252, 198, 98, 0.34), transparent 70%);
  filter: blur(5px);
  animation: glowPulse var(--beat) ease-out infinite;
}

/* ---- prop: fog machine ---- */
.prop-fog { width: 200px; height: 200px; transform-style: preserve-3d; }
.fog-box { position: absolute; left: 34px; bottom: 34px; width: 128px; height: 60px; transform-style: preserve-3d; transform: rotateX(12deg) rotateY(-22deg); transition: transform 0.9s var(--ease); }
.service:hover .prop-fog .fog-box { transform: rotateX(10deg) rotateY(-14deg) translateZ(14px); }
.fog-face {
  position: absolute; inset: 0; border-radius: 8px;
  background: linear-gradient(160deg, #3A1B08, #1A0A03);
  box-shadow: 0 0 0 1px rgba(252, 198, 98, 0.2), 0 20px 30px -18px rgba(77, 38, 13, 0.75);
  transform: translateZ(20px);
}
.fog-side { position: absolute; right: 0; top: 0; width: 40px; height: 100%; background: linear-gradient(90deg, #24100566, #120701); transform: rotateY(90deg) translateZ(108px); transform-origin: right center; border-radius: 0 8px 8px 0; }
.fog-top { position: absolute; left: 0; top: 0; width: 100%; height: 40px; background: linear-gradient(180deg, #3A1B08, #241005); transform: rotateX(90deg) translateZ(20px); transform-origin: top center; border-radius: 8px 8px 0 0; }
.fog-nozzle { position: absolute; left: -12px; top: 16px; width: 22px; height: 22px; border-radius: 4px 2px 2px 4px; background: linear-gradient(140deg, #C9A05A, #6E4428); transform: translateZ(20px); }
.fog-led { position: absolute; right: 14px; top: 14px; width: 8px; height: 8px; border-radius: 50%; background: var(--orange); transform: translateZ(21px); animation: ledBlink var(--beat) steps(2) infinite; }
.fog-grip { position: absolute; right: 14px; bottom: 12px; width: 46px; height: 6px; border-radius: 4px; background: rgba(252, 198, 98, 0.18); transform: translateZ(21px); }
.fog-shadow { position: absolute; left: 40px; bottom: 24px; width: 130px; height: 16px; border-radius: 50%; background: rgba(77, 38, 13, 0.34); filter: blur(10px); }

/* ---- prop: bartender ---- */
.prop-bar { width: 200px; height: 200px; transform-style: preserve-3d; }
/* De øvrige props er mørke objekter på cremebaggrund. Et lyst,
   translucent glas forsvandt i baggrunden, så glasset tegnes som mørk
   silhuet med lysende væske indeni — samme kontrastsprog som resten. */
.bar-glass {
  position: absolute; left: 50%; bottom: 34px; width: 150px; height: 150px;
  transform: translateX(-50%) rotateX(10deg) rotateY(-14deg);
  transform-style: preserve-3d; transition: transform 0.9s var(--ease);
}
.service:hover .prop-bar .bar-glass { transform: translateX(-50%) rotateX(7deg) rotateY(-6deg) translateZ(16px); }
.bar-bowl {
  position: absolute; top: 0; left: 0; width: 150px; height: 88px;
  clip-path: polygon(0 0, 100% 0, 52.5% 100%, 47.5% 100%);
  background: linear-gradient(165deg, #3A1B08, #1A0A03);
}
.bar-liquid {
  position: absolute; top: 5px; left: 5px; width: 140px; height: 66px;
  clip-path: polygon(0 0, 100% 0, 53% 100%, 47% 100%);
  background: linear-gradient(165deg, var(--yellow-lt), var(--orange) 72%, var(--orange-dp));
  box-shadow: 0 0 26px rgba(252, 198, 98, 0.35);
}
.bar-cherry {
  position: absolute; top: 16px; left: 96px; width: 18px; height: 18px; border-radius: 50%;
  background: radial-gradient(circle at 34% 30%, #FFF6D8, var(--orange) 58%, #8A5A18);
  box-shadow: 0 0 16px rgba(252, 100, 0, 0.5);
}
.bar-stem {
  position: absolute; top: 86px; left: 50%; width: 9px; height: 48px; transform: translateX(-50%);
  background: linear-gradient(90deg, #1A0A03, #5E2E12 45%, #1A0A03);
}
.bar-foot {
  position: absolute; top: 128px; left: 50%; width: 76px; height: 14px; transform: translateX(-50%);
  border-radius: 50%;
  background: linear-gradient(180deg, #5E2E12, #1A0A03);
  box-shadow: 0 0 0 1px rgba(252, 198, 98, 0.16);
}
.bar-shadow {
  position: absolute; left: 50%; bottom: 30px; width: 148px; height: 18px;
  transform: translateX(-50%); border-radius: 50%;
  background: rgba(77, 38, 13, 0.34); filter: blur(10px);
}

.fog-puffs { position: absolute; left: 0; bottom: 44px; width: 120px; height: 130px; pointer-events: none; }
.fog-puffs i {
  position: absolute; left: 10px; bottom: 0;
  width: 54px; height: 54px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 249, 213, 0.5), rgba(252, 198, 98, 0.16) 55%, transparent 72%);
  filter: blur(8px);
  opacity: 0;
  animation: puff 5.6s var(--ease-io) infinite;
}
.fog-puffs i:nth-child(2) { animation-delay: 1.1s; left: 0; }
.fog-puffs i:nth-child(3) { animation-delay: 2.2s; left: 18px; }
.fog-puffs i:nth-child(4) { animation-delay: 3.3s; left: 6px; }
.fog-puffs i:nth-child(5) { animation-delay: 4.4s; left: 24px; }
@keyframes puff {
  0% { opacity: 0; transform: translate(0, 0) scale(0.4); }
  18% { opacity: 0.9; }
  100% { opacity: 0; transform: translate(-58px, -104px) scale(2.4); }
}

.service-note {
  margin: clamp(38px, 5vw, 60px) auto 0;
  max-width: 68ch; text-align: center;
  color: var(--text-soft);
  font-size: 15.5px; font-weight: 300;
  padding: 22px 26px;
  border: 1px dashed rgba(77, 38, 13, 0.22);
  border-radius: var(--r-md);
  background: rgba(255,255,255,0.4);
}

/* =========================================================
   ATMOSPHERE (dark)
   ========================================================= */
.atmosphere {
  position: relative; z-index: 4;
  background: linear-gradient(180deg, var(--night), var(--night-2) 50%, var(--night));
  color: var(--night-text);
  overflow: hidden;
}
.atmosphere::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(80% 50% at 50% 0%, rgba(252, 100, 0, 0.18), transparent 60%);
  pointer-events: none;
}
.atmosphere .h2 em { color: var(--yellow); }
.atmosphere .lead { color: var(--night-soft); }
.atmosphere .eyebrow { color: var(--yellow); }
.atmosphere .eyebrow .pip { background: var(--yellow); }

.gallery {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(12px, 1.4vw, 20px);
  grid-auto-rows: clamp(150px, 15vw, 220px);
}
.g-item {
  position: relative; margin: 0;
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--night-3);
  box-shadow: 0 30px 60px -34px rgba(0,0,0,0.9);
  transform-style: preserve-3d;
  transition: transform 0.7s var(--ease), box-shadow 0.7s var(--ease);
  grid-column: span 1; grid-row: span 1;
}
/* transform is driven by the parallax loop, so it must not be transitioned */
.g-item img, .g-item video { width: 100%; height: 100%; object-fit: cover; transition: filter 0.7s; }
.g-item::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 45%, rgba(26, 10, 3, 0.72));
  opacity: 0.85; transition: opacity 0.6s;
  pointer-events: none;
}
.g-item:hover { transform: translateY(-6px); box-shadow: 0 40px 70px -30px rgba(0,0,0,0.95); }
.g-item:hover img, .g-item:hover video { filter: brightness(1.08) saturate(1.08); }
.g-item:hover::after { opacity: 0.5; }
.g-item.g-wide { grid-column: span 2; grid-row: span 2; }
.g-item.g-tall { grid-column: span 1; grid-row: span 2; }

.g-item figcaption {
  position: absolute; left: 14px; bottom: 12px; z-index: 3;
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase;
  color: rgba(247, 231, 196, 0.86);
}

/* =========================================================
   EVENTS
   ========================================================= */
.events-inner {
  display: grid; grid-template-columns: 0.85fr 1.15fr; gap: clamp(30px, 5vw, 70px); align-items: center;
  padding: clamp(34px, 4.6vw, 66px);
  border-radius: var(--r-lg);
  background: linear-gradient(150deg, rgba(255,255,255,0.62), rgba(255,255,255,0.28));
  border: 1px solid var(--line);
  box-shadow: 0 40px 80px -50px rgba(77, 38, 13, 0.5);
}
.events-head .h2 { margin-bottom: 0; font-size: clamp(28px, 3.4vw, 46px); }
.chips { display: flex; flex-wrap: wrap; gap: 10px; }
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 12px 22px;
  border-radius: 999px;
  border: 1px solid rgba(77, 38, 13, 0.2);
  background: rgba(255, 249, 213, 0.7);
  font-size: 15px; font-weight: 400;
  transition: transform 0.45s var(--ease), background 0.4s, color 0.4s, border-color 0.4s, box-shadow 0.45s var(--ease);
  cursor: default;
}
.chip:hover {
  transform: translateY(-4px) rotate(-1.5deg);
  background: var(--orange); color: #fff; border-color: transparent;
  box-shadow: 0 16px 28px -14px rgba(252, 100, 0, 0.7);
}
.chip em { font-style: normal; font-family: var(--font-mono); font-size: 10.5px; opacity: 0.66; letter-spacing: 0.04em; }
.chip-alt { background: rgba(252, 198, 98, 0.34); border-color: rgba(252, 100, 0, 0.24); }

/* =========================================================
   WHY
   ========================================================= */
.why-head { max-width: 640px; margin-bottom: clamp(38px, 5vw, 62px); }
.why-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(14px, 1.6vw, 22px); }
.why-card {
  position: relative;
  padding: clamp(24px, 2.6vw, 34px);
  border-radius: var(--r-md);
  border: 1px solid var(--line);
  background: rgba(255,255,255,0.5);
  overflow: hidden;
  transition: transform 0.6s var(--ease), box-shadow 0.6s var(--ease), background 0.5s;
}
.why-card::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px;
  background: linear-gradient(90deg, var(--orange), var(--yellow));
  transform: scaleX(0); transform-origin: 0 50%;
  transition: transform 0.7s var(--ease);
}
.why-card:hover { transform: translateY(-6px); box-shadow: 0 30px 56px -34px rgba(77, 38, 13, 0.55); background: #fff; }
.why-card:hover::after { transform: scaleX(1); }
.why-card strong {
  display: block; margin-bottom: 16px;
  font-family: var(--font-display); font-size: 42px; font-weight: 700;
  color: var(--orange); line-height: 1;
}
.why-card p { margin: 0; color: var(--text-soft); font-size: 15.5px; font-weight: 300; }

/* =========================================================
   CONTACT
   ========================================================= */
.contact {
  position: relative; z-index: 4;
  background: linear-gradient(180deg, var(--cream) 0%, var(--night-2) 13%, var(--night) 42%);
  color: var(--night-text);
  overflow: hidden;
}
.contact .h2 { font-size: clamp(30px, 3.7vw, 50px); }
.contact-glow {
  position: absolute; left: 50%; top: 24%; transform: translateX(-50%);
  width: min(900px, 120vw); height: 620px;
  background: radial-gradient(circle, rgba(252, 100, 0, 0.22), transparent 64%);
  pointer-events: none;
  animation: glowPulse calc(var(--beat) * 4) ease-in-out infinite;
}
.contact .eyebrow { color: var(--yellow); }
.contact .eyebrow .pip { background: var(--yellow); }
.contact .h2 em { color: var(--yellow); }
.contact .lead { color: var(--night-soft); }

.contact-grid { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: clamp(34px, 5vw, 74px); align-items: start; }

.contact-direct { margin-top: 34px; display: grid; gap: 2px; }
.contact-line {
  display: flex; align-items: baseline; gap: 16px; flex-wrap: wrap;
  padding: 17px 4px;
  border-bottom: 1px solid rgba(252, 198, 98, 0.16);
  transition: padding-left 0.5s var(--ease), border-color 0.4s;
}
.contact-line:hover { padding-left: 14px; border-bottom-color: var(--orange); }
.cl-label {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--orange); min-width: 84px;
}
.cl-value { font-size: clamp(15px, 1.6vw, 19px); color: var(--night-text); word-break: break-word; }

/* form */
.contact-form-wrap { position: relative; }
.contact-form {
  position: relative;
  padding: clamp(26px, 3.4vw, 40px);
  border-radius: var(--r-lg);
  border: 1px solid rgba(252, 198, 98, 0.22);
  background: linear-gradient(160deg, rgba(58, 27, 8, 0.7), rgba(26, 10, 3, 0.86));
  backdrop-filter: blur(14px);
  box-shadow: 0 50px 90px -50px rgba(0,0,0,0.9);
  display: grid; gap: 16px;
}
.form-title {
  margin: 0 0 4px;
  font-family: var(--font-display); font-size: 26px; font-weight: 700;
}
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.field { display: grid; gap: 8px; margin: 0; padding: 0; border: 0; }
/* Labels stod på 10px med alpha 0.6 — for småt og for svagt til at læse
   på en telefon i dagslys, på præcis det element hvor bookingen sker. */
.field > span, .field legend > span {
  font-family: var(--font-mono); font-size: 12.5px; letter-spacing: 0.14em; text-transform: uppercase;
  color: rgba(247, 231, 196, 0.84);
}
.field legend { padding: 0; margin-bottom: 8px; }

.field input, .field select, .field textarea {
  width: 100%;
  padding: 14px 16px;
  border-radius: var(--r-sm);
  /* Felterne var MØRKERE end kortet de ligger på (0,5 sort mod en brun
     gradient) med en kant på ca. 1,3:1 — de læstes slet ikke som felter.
     Nu et lyst slør og en tydelig kant, så de træder frem. */
  border: 1px solid rgba(252, 198, 98, 0.5);
  background: rgba(255, 249, 213, 0.08);
  color: var(--night-text);
  font-size: 16px;
  transition: border-color 0.35s, background 0.35s, box-shadow 0.35s;
  appearance: none;
  -webkit-appearance: none;
}
.field textarea { resize: vertical; min-height: 108px; }
.field input::placeholder, .field textarea::placeholder { color: rgba(247, 231, 196, 0.32); }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none;
  border-color: var(--orange);
  background: rgba(26, 10, 3, 0.78);
  box-shadow: 0 0 0 4px rgba(252, 100, 0, 0.16);
}
.field input[type="date"]::-webkit-calendar-picker-indicator,
.field input[type="time"]::-webkit-calendar-picker-indicator { filter: invert(0.8) sepia(1) saturate(4) hue-rotate(-12deg); cursor: pointer; }

.field-help {
  margin: -4px 0 2px;
  font-size: 13.5px; line-height: 1.55;
  color: rgba(247, 231, 196, 0.68);
}

.select-wrap { position: relative; }
.select-wrap::after {
  content: ""; position: absolute; right: 18px; top: 50%; margin-top: -3px;
  width: 8px; height: 8px;
  border-right: 1.6px solid var(--yellow); border-bottom: 1.6px solid var(--yellow);
  transform: rotate(45deg) translateY(-2px);
  pointer-events: none;
}
.select-wrap select option { background: var(--night-2); color: var(--night-text); }

.pick-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.pick-item { position: relative; cursor: pointer; }
.pick-item input { position: absolute; opacity: 0; pointer-events: none; }
.pick-item span {
  display: grid; place-items: center;
  padding: 13px 6px;
  border-radius: var(--r-sm);
  border: 1px solid rgba(252, 198, 98, 0.2);
  background: rgba(26, 10, 3, 0.45);
  font-size: 14.5px; font-weight: 500;
  transition: all 0.35s var(--ease);
}
.pick-item:hover span { border-color: rgba(252, 198, 98, 0.5); }
.pick-item input:checked + span {
  background: var(--orange); border-color: var(--orange); color: #fff;
  box-shadow: 0 10px 22px -10px rgba(252, 100, 0, 0.8);
  transform: translateY(-2px);
}
.pick-item input:focus-visible + span { outline: 2px solid var(--yellow); outline-offset: 2px; }

/* Stod på 10,5px med alpha 0,42 ≈ 3,5:1 og dumpede dermed WCAG 4,5:1.
   Det er teksten der fortæller kunden hvad der sker med hendes data. */
.form-foot {
  margin: 2px 0 0; text-align: center;
  font-family: var(--font-mono); font-size: 13px; letter-spacing: 0.05em; line-height: 1.6;
  color: rgba(247, 231, 196, 0.74);
}

/* Feltet der mangler, markeres tydeligt — men i husets varme røde,
   ikke browserens skrigende standardrød. */
.field input.is-invalid, .field select.is-invalid, .field textarea.is-invalid {
  border-color: var(--orange);
  background: rgba(252, 100, 0, 0.1);
  box-shadow: 0 0 0 3px rgba(252, 100, 0, 0.16);
}

/* spamfælde — skal være usynlig for mennesker, men ikke
   display:none, da nogle bots springer skjulte felter over */
.hp {
  position: absolute; left: -9999px;
  width: 1px; height: 1px; overflow: hidden;
}

.form-error {
  margin: 10px 0 0; text-align: center;
  font-size: 14px; line-height: 1.5;
  color: #FFB4A2;
}
.form-error[hidden] { display: none; }
.form-error a { color: var(--yellow); text-decoration: underline; }

/* knappen skal se optaget ud mens der sendes, så ingen
   trykker to gange og sender dobbelt */
.contact-form.is-sending { cursor: progress; }
.contact-form.is-sending .btn[disabled],
#book-send[disabled] { opacity: 0.6; pointer-events: none; }

.form-done {
  position: absolute; inset: 0; z-index: 5;
  display: grid; place-content: center; justify-items: center; gap: 12px;
  padding: 34px; text-align: center;
  border-radius: var(--r-lg);
  background: linear-gradient(160deg, rgba(58, 27, 8, 0.97), rgba(26, 10, 3, 0.98));
  opacity: 0; transition: opacity 0.5s var(--ease);
}
.form-done[hidden] { display: none; }
.form-done.is-in { opacity: 1; }
.form-done-ball {
  width: 60px; height: 60px; border-radius: 50%;
  background-image:
    linear-gradient(rgba(26,10,3,0.4) 1px, transparent 1px),
    linear-gradient(90deg, rgba(26,10,3,0.4) 1px, transparent 1px),
    radial-gradient(circle at 34% 30%, #FFF6D8, var(--yellow) 44%, #8A5A18);
  background-size: 9px 9px, 9px 9px, 100% 100%;
  box-shadow: 0 0 40px rgba(252, 198, 98, 0.5);
  animation: specSpin 5s linear infinite;
}
.form-done-title { margin: 6px 0 0; font-family: var(--font-display); font-size: 25px; }
.form-done-text { margin: 0; color: var(--night-soft); font-size: 15px; }

/* =========================================================
   REEL — horizontal run-through of every image and video
   ========================================================= */
.reel {
  position: relative; z-index: 4;
  background: var(--night);
  height: 460vh;                 /* scroll distance that drives the track */
}
.reel-sticky {
  position: sticky; top: 0;
  height: 100svh;
  display: flex; flex-direction: column; justify-content: center;
  overflow: hidden;
  background:
    radial-gradient(70% 50% at 50% 0%, rgba(252, 100, 0, 0.16), transparent 60%),
    var(--night);
}
.reel-head {
  position: relative; z-index: 3;
  padding: 0 var(--pad) clamp(18px, 3vh, 34px);
  color: var(--night-text);
}
.reel-head .eyebrow { color: var(--yellow); margin-bottom: 12px; }
.reel-head .eyebrow .pip { background: var(--yellow); }
.reel-title {
  margin: 0;
  font-family: var(--font-display); font-weight: 700;
  font-variation-settings: "SOFT" 40, "WONK" 1, "opsz" 144;
  font-size: clamp(30px, 5vw, 62px); line-height: 1; letter-spacing: -0.028em;
}
.reel-title em { font-style: italic; font-weight: 500; color: var(--yellow); }

.reel-viewport { position: relative; z-index: 2; width: 100%; }
.reel-track {
  display: flex; align-items: stretch; gap: clamp(14px, 1.6vw, 26px);
  padding: 0 var(--pad);
  width: max-content;
  will-change: transform;
}
.reel-item {
  position: relative; margin: 0; flex: none;
  width: clamp(240px, 30vw, 400px);
  height: clamp(300px, 52vh, 520px);
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--night-3);
  box-shadow: 0 30px 60px -34px rgba(0,0,0,0.95);
  transition: transform 0.6s var(--ease);
}
.reel-item img, .reel-item video { width: 100%; height: 100%; object-fit: cover; }
.reel-item::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 46%, rgba(26, 10, 3, 0.8));
  pointer-events: none;
}
.reel-item figcaption {
  position: absolute; left: 18px; right: 18px; bottom: 16px; z-index: 2;
  display: grid; gap: 3px;
  color: var(--night-text);
}
.reel-item figcaption b {
  font-family: var(--font-display); font-weight: 700; font-size: 20px; letter-spacing: -0.01em;
}
.reel-item figcaption span {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase;
  color: rgba(247, 231, 196, 0.62);
}
.reel-item:hover { transform: translateY(-8px); }

/* instagram card at the end of the reel */
.reel-ig {
  display: grid; place-content: center; justify-items: center; gap: 12px;
  text-align: center; padding: 30px;
  background: linear-gradient(150deg, var(--orange), #B24500);
  color: #fff;
}
.reel-ig::after { display: none; }
.reel-ig-icon {
  width: 62px; height: 62px; border-radius: 50%;
  display: grid; place-items: center;
  border: 1px solid rgba(255,255,255,0.5);
  transition: transform 0.6s var(--ease);
}
.reel-ig-icon svg { width: 28px; height: 28px; fill: none; stroke: #fff; stroke-width: 1.6; }
.reel-ig-icon svg .ig-dot { fill: #fff; stroke: none; }
.reel-ig b { font-family: var(--font-display); font-size: 23px; font-weight: 700; }
.reel-ig span { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.12em; }
.reel-ig:hover .reel-ig-icon { transform: scale(1.1) rotate(-8deg); }

.reel-progress {
  position: relative; z-index: 3;
  margin: clamp(18px, 3vh, 32px) var(--pad) 0;
  height: 2px; border-radius: 2px;
  background: rgba(252, 198, 98, 0.16);
  overflow: hidden;
}
.reel-progress i {
  display: block; height: 100%; width: 0;
  background: linear-gradient(90deg, var(--orange), var(--yellow));
}
.reel-hint {
  position: absolute; right: var(--pad); bottom: 18px; z-index: 3;
  margin: 0;
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase;
  color: rgba(247, 231, 196, 0.4);
}

/* =========================================================
   INSTAGRAM BAND
   ========================================================= */
.ig-band { position: relative; z-index: 4; background: var(--night); padding: 0 var(--pad) clamp(60px, 8vw, 100px); }
.ig-band-inner {
  max-width: var(--wrap); margin: 0 auto;
  display: flex; align-items: center; gap: clamp(16px, 3vw, 30px); flex-wrap: wrap;
  padding: clamp(24px, 3.4vw, 38px) clamp(24px, 4vw, 46px);
  border-radius: var(--r-lg);
  border: 1px solid rgba(252, 198, 98, 0.2);
  background: linear-gradient(140deg, rgba(58, 27, 8, 0.8), rgba(26, 10, 3, 0.9));
  color: var(--night-text);
  transition: border-color 0.5s, transform 0.6s var(--ease), background 0.5s;
}
.ig-band-inner:hover {
  border-color: rgba(252, 100, 0, 0.5);
  transform: translateY(-4px);
  background: linear-gradient(140deg, rgba(70, 33, 10, 0.9), rgba(32, 13, 4, 0.95));
}
.ig-band-mark {
  width: 58px; height: 58px; flex: none; border-radius: 50%;
  display: grid; place-items: center;
  background: linear-gradient(140deg, var(--orange), #B24500);
  box-shadow: 0 14px 30px -14px rgba(252, 100, 0, 0.9);
}
.ig-band-mark svg { width: 27px; height: 27px; fill: none; stroke: #fff; stroke-width: 1.6; }
.ig-band-mark svg .ig-dot { fill: #fff; stroke: none; }
.ig-band-text { display: grid; gap: 2px; margin-right: auto; }
.ig-band-text b { font-family: var(--font-display); font-size: clamp(19px, 2.2vw, 26px); font-weight: 700; }
.ig-band-text em { font-style: normal; font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.1em; color: var(--yellow); }
.ig-band-cta {
  font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--yellow); white-space: nowrap;
}

/* =========================================================
   FOOTER
   ========================================================= */
.site-footer {
  position: relative; z-index: 4;
  background: var(--night);
  color: var(--night-text);
  padding: clamp(40px, 5vw, 60px) 0 34px;
  border-top: 1px solid var(--night-line);
}
.footer-grid {
  display: flex; flex-wrap: wrap; gap: 30px 50px; align-items: center; justify-content: space-between;
  padding-bottom: 34px;
  border-bottom: 1px solid rgba(252, 198, 98, 0.12);
}
.footer-brand { display: inline-flex; align-items: center; gap: 12px; font-size: 19px; font-weight: 500; }
/* Målt i reviewet: footer-links var 23px høje og telefonnummeret stod
   på 12px — begge langt under de 44px en tommel har brug for. Telefon
   er den handling med højest hensigt når arrangementet nærmer sig,
   så den får sin egen vægt. */
.footer-nav { display: flex; flex-wrap: wrap; gap: 2px 22px; font-size: 15px; }
.footer-nav a { display: inline-block; padding: 11px 0; color: var(--night-soft); transition: color 0.3s; }
.footer-nav a:hover { color: var(--yellow); }
.footer-contact { display: grid; gap: 2px; font-family: var(--font-mono); font-size: 14px; }
.footer-contact a { display: inline-block; padding: 10px 0; color: var(--night-soft); transition: color 0.3s; }
.footer-contact a:hover { color: var(--yellow); }
.footer-contact .footer-tel { font-size: 19px; letter-spacing: 0.04em; color: var(--yellow); }
.footer-address {
  margin-top: 14px; font-style: normal; line-height: 1.75;
  font-size: 12.5px; color: rgba(247, 231, 196, 0.52);
}

/* --- studio-kreditering --- */
.credit {
  position: relative; overflow: hidden;
  display: flex; align-items: center; justify-content: space-between; gap: clamp(18px, 3vw, 36px);
  flex-wrap: wrap;
  width: calc(100% - var(--pad) * 2);
  max-width: var(--wrap);
  margin: clamp(30px, 4vw, 44px) auto 0;
  padding: clamp(26px, 3.6vw, 40px) clamp(24px, 4vw, 46px);
  border-radius: var(--r-lg);
  border: 1px solid rgba(252, 198, 98, 0.24);
  background: linear-gradient(140deg, rgba(58, 27, 8, 0.85), rgba(26, 10, 3, 0.92));
  color: var(--night-text);
  transition: border-color 0.5s, transform 0.6s var(--ease), background 0.5s;
}
.credit:hover { border-color: rgba(252, 100, 0, 0.55); transform: translateY(-4px); }
.credit-glow {
  position: absolute; left: 12%; top: -70%;
  width: 320px; height: 320px; border-radius: 50%;
  background: radial-gradient(circle, rgba(252, 100, 0, 0.28), transparent 66%);
  pointer-events: none;
}
.credit-text { position: relative; z-index: 2; display: grid; gap: 10px; justify-items: start; }
.credit-logo { display: block; color: var(--yellow); }
.credit-logo svg { width: clamp(200px, 22vw, 280px); height: auto; display: block; }
.credit-text b {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(24px, 3.4vw, 42px); line-height: 1.04; letter-spacing: -0.025em;
  color: var(--yellow);
}
.credit-text em {
  font-style: normal; font-family: var(--font-mono);
  font-size: clamp(11px, 1.2vw, 13px); letter-spacing: 0.1em;
  color: rgba(247, 231, 196, 0.68);
}
.credit-cta {
  position: relative; z-index: 2;
  display: inline-flex; align-items: center; gap: 10px;
  padding: 14px 26px; border-radius: 999px;
  background: var(--orange); color: #fff;
  font-size: 14.5px; font-weight: 600; white-space: nowrap;
  box-shadow: 0 14px 32px -14px rgba(252, 100, 0, 0.9);
  transition: gap 0.4s var(--ease), box-shadow 0.4s;
}
.credit:hover .credit-cta { gap: 14px; box-shadow: 0 20px 40px -14px rgba(252, 100, 0, 1); }
@media (max-width: 900px) {
  .credit { flex-direction: column; align-items: flex-start; text-align: left; }
  .credit-cta { width: 100%; justify-content: center; }
}

.footer-bottom {
  padding-top: 22px;
  display: flex; flex-wrap: wrap; gap: 10px 20px; justify-content: space-between; align-items: center;
  font-size: 12.5px; color: rgba(247, 231, 196, 0.42);
}
.footer-bottom p { margin: 0; }
.studio-credit { color: rgba(247, 231, 196, 0.42); transition: color 0.3s; }
.studio-credit:hover { color: var(--yellow); }

/* =========================================================
   STICKY MOBILE CTA
   ========================================================= */
.sticky-cta {
  position: fixed; z-index: 150;
  left: 50%; bottom: 26px; transform: translate(-50%, 180%);
  display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  padding: 15px 30px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--orange), #E05300);
  color: #fff;
  font-size: 15px; font-weight: 600; letter-spacing: 0.01em;
  box-shadow: 0 18px 42px -14px rgba(252, 100, 0, 0.85), 0 0 0 1px rgba(255, 214, 150, 0.25) inset;
  overflow: hidden; isolation: isolate;
  transition: transform 0.6s var(--ease), box-shadow 0.5s var(--ease), padding 0.5s var(--ease);
}
.sticky-cta.is-in { transform: translate(-50%, 0); }
.sticky-cta-text, .sticky-cta-arrow { position: relative; z-index: 2; }
.sticky-cta-arrow { transition: transform 0.5s var(--ease); }
/* soft beat pulse so it reads as "live" without shouting */
.sticky-cta-pulse {
  position: absolute; inset: 0; z-index: 1;
  background: radial-gradient(120% 160% at 50% 120%, rgba(252, 198, 98, 0.7), transparent 62%);
  opacity: 0.5;
  animation: ctaPulse calc(var(--beat) * 2) var(--ease-io) infinite;
}
@keyframes ctaPulse { 0%, 100% { opacity: 0.28; transform: scale(1); } 50% { opacity: 0.6; transform: scale(1.12); } }
.sticky-cta:hover { box-shadow: 0 24px 54px -14px rgba(252, 100, 0, 0.95); padding-right: 34px; }
.sticky-cta:hover .sticky-cta-arrow { transform: translateX(4px); }

/* Note: the four source clips have no audio track, so there is
   deliberately no sound control anywhere on the page. */

/* =========================================================
   BOOKING-OPLEVELSE
   ========================================================= */
.book {
  position: fixed; inset: 0; z-index: 400;
  background: var(--night);
  color: var(--night-text);
  opacity: 0;
  transition: opacity 0.6s var(--ease);
}
.book[hidden] { display: none; }
.book.is-open { opacity: 1; }

/* --- baggrundseffekter --- */
.book-fx { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.book-canvas { position: absolute; inset: 0; width: 100%; height: 100%; mix-blend-mode: screen; opacity: 0.9; }
.book-vignette {
  position: absolute; inset: 0;
  background:
    radial-gradient(80% 60% at 50% 0%, rgba(252, 100, 0, 0.22), transparent 62%),
    radial-gradient(120% 90% at 50% 100%, rgba(26, 10, 3, 0.9), transparent 55%);
}
.book-beams { position: absolute; left: 50%; top: -8%; width: 2px; height: 130vh; }
.book-beams i {
  position: absolute; left: 0; top: 0; width: 2px; height: 100%;
  transform-origin: 50% 0;
  background: linear-gradient(180deg, rgba(252, 198, 98, 0.5), transparent 70%);
  filter: blur(1.5px);
  animation: bookBeam 7s var(--ease-io) infinite;
}
.book-beams i:nth-child(1) { transform: rotate(-46deg); animation-delay: -0.4s; }
.book-beams i:nth-child(2) { transform: rotate(-22deg); animation-delay: -1.8s; }
.book-beams i:nth-child(3) { transform: rotate(2deg);   animation-delay: -3.1s; }
.book-beams i:nth-child(4) { transform: rotate(24deg);  animation-delay: -4.6s; }
.book-beams i:nth-child(5) { transform: rotate(48deg);  animation-delay: -5.9s; }
@keyframes bookBeam { 0%,100% { opacity: 0.1; } 45% { opacity: 0.6; } }

.book-ball {
  position: absolute; left: 50%; top: 0;
  width: 130px; height: 130px; margin-left: -65px;
  transform: translateY(calc(-140px + var(--ball-drop, 0px)));
  transition: transform 1.1s var(--ease);
}
.book-ball-body {
  position: absolute; inset: 0; border-radius: 50%;
  background-image:
    linear-gradient(rgba(26,10,3,0.45) 1px, transparent 1px),
    linear-gradient(90deg, rgba(26,10,3,0.45) 1px, transparent 1px),
    radial-gradient(circle at 34% 28%, #FFF6D8, var(--yellow) 42%, #8A5A18 78%, #4D260D);
  background-size: 13px 13px, 13px 13px, 100% 100%;
  box-shadow: 0 0 80px rgba(252, 198, 98, 0.45);
  animation: specSpin 14s linear infinite;
}
.book-ball-spec {
  position: absolute; inset: -30%; border-radius: 50%;
  background: radial-gradient(circle, rgba(252, 198, 98, 0.3), transparent 62%);
  animation: glowPulse var(--beat) ease-out infinite;
}

/* --- chrome --- */
.book-chrome {
  position: absolute; z-index: 4; top: 0; left: 0; right: 0;
  height: 82px; padding: 0 var(--pad);
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
}
.book-brand { display: inline-flex; align-items: center; gap: 12px; font-size: 17px; font-weight: 500; }
.book-rail {
  flex: 1; max-width: 320px; height: 2px; border-radius: 2px;
  background: rgba(252, 198, 98, 0.16); overflow: hidden;
}
.book-rail i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--orange), var(--yellow)); transition: width 0.45s var(--ease); }
.book-close {
  width: 44px; height: 44px; flex: none; padding: 0;
  border-radius: 50%; cursor: pointer;
  border: 1px solid rgba(247, 231, 196, 0.28);
  background: transparent;
  display: grid; place-items: center;
  transition: background 0.35s, border-color 0.35s, transform 0.5s var(--ease);
}
.book-close svg { width: 18px; height: 18px; fill: none; stroke: var(--night-text); stroke-width: 1.8; stroke-linecap: round; }
.book-close:hover { background: rgba(252, 100, 0, 0.7); border-color: transparent; transform: rotate(90deg); }

/* --- scroll-trin --- */
.book-scroll {
  position: relative; z-index: 3;
  height: 100svh; overflow-y: auto; overflow-x: hidden;
  scroll-snap-type: y mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
}
.book-scroll::-webkit-scrollbar { display: none; }

.book-step {
  min-height: 100svh;
  scroll-snap-align: start; scroll-snap-stop: always;
  display: grid; place-items: center;
  padding: 110px var(--pad) 70px;
  position: relative;
}
.book-inner {
  width: 100%; max-width: 620px; text-align: center;
  opacity: 0; transform: translateY(40px) scale(0.97);
  transition: opacity 0.8s var(--ease), transform 0.9s var(--ease);
}
.book-inner-wide { max-width: 940px; }
.book-step.is-active .book-inner { opacity: 1; transform: none; }

.book-num {
  margin: 0 0 14px;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.24em;
  color: var(--orange);
}
.book-h {
  margin: 0 0 18px;
  font-family: var(--font-display); font-weight: 700;
  font-variation-settings: "SOFT" 40, "WONK" 1, "opsz" 144;
  font-size: clamp(32px, 5.6vw, 68px); line-height: 1.02; letter-spacing: -0.03em;
}
.book-h em { font-style: italic; font-weight: 500; color: var(--yellow); }
/* the last step carries a long summary, so its heading stays smaller */
.book-final .book-h { font-size: clamp(28px, 4.2vw, 48px); margin-bottom: 14px; }
.book-lead, .book-sub {
  margin: 0 auto 30px; max-width: 46ch;
  color: var(--night-soft); font-weight: 300;
  font-size: clamp(15px, 1.5vw, 18px);
}
.book-sub { margin-bottom: 24px; }

.book-skip {
  display: block; margin: 22px auto 0; padding: 6px 4px;
  background: none; border: 0; cursor: pointer;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
  color: rgba(247, 231, 196, 0.45);
  border-bottom: 1px solid rgba(247, 231, 196, 0.22);
  transition: color 0.3s, border-color 0.3s;
}
.book-skip:hover { color: var(--yellow); border-color: var(--yellow); }

.book-scrollhint {
  position: absolute; bottom: 26px; left: 50%; transform: translateX(-50%);
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase;
  color: rgba(247, 231, 196, 0.35);
  animation: hintBob 2.4s var(--ease-io) infinite;
}
@keyframes hintBob { 0%,100% { transform: translate(-50%, 0); opacity: 0.4; } 50% { transform: translate(-50%, 7px); opacity: 0.85; } }

/* --- valgknapper --- */
.book-opts { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.book-opt {
  padding: 14px 24px; border-radius: 999px; cursor: pointer;
  border: 1px solid rgba(252, 198, 98, 0.26);
  background: rgba(26, 10, 3, 0.5);
  color: var(--night-text); font-size: 15.5px; font-weight: 400;
  transition: transform 0.45s var(--ease), background 0.35s, border-color 0.35s, color 0.35s, box-shadow 0.45s var(--ease);
}
.book-opt:hover { transform: translateY(-3px); border-color: var(--yellow); }
.book-opt.is-on {
  background: var(--orange); border-color: var(--orange); color: #fff; font-weight: 600;
  box-shadow: 0 16px 34px -14px rgba(252, 100, 0, 0.9);
  transform: translateY(-3px);
}
.book-opt:focus-visible { outline: 2px solid var(--yellow); outline-offset: 3px; }

/* --- ydelseskort med 3D-props --- */
/* auto-fit i stedet for et fast antal kolonner: ydelseslisten er vokset
   fra 4 til 5, og et hårdkodet repeat(4) efterlod den sidste alene på
   en halvtom række. */
.book-props { display: grid; grid-template-columns: repeat(auto-fit, minmax(136px, 1fr)); gap: 14px; margin-bottom: 30px; }
.book-prop {
  position: relative; cursor: pointer; overflow: hidden;
  display: grid; justify-items: center; gap: 4px;
  padding: 18px 14px 20px;
  border-radius: var(--r-md);
  border: 1px solid rgba(252, 198, 98, 0.2);
  background: linear-gradient(160deg, rgba(58, 27, 8, 0.6), rgba(26, 10, 3, 0.8));
  color: var(--night-text);
  transition: transform 0.5s var(--ease), border-color 0.4s, background 0.4s, box-shadow 0.5s var(--ease);
}
.book-prop:hover { transform: translateY(-6px); border-color: rgba(252, 198, 98, 0.55); }
.book-prop.is-on {
  border-color: var(--orange);
  background: linear-gradient(160deg, rgba(120, 48, 4, 0.72), rgba(40, 15, 3, 0.9));
  box-shadow: 0 24px 46px -20px rgba(252, 100, 0, 0.8);
  transform: translateY(-6px);
}
.book-prop::after {
  content: "✓"; position: absolute; top: 10px; right: 12px;
  width: 22px; height: 22px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--orange); color: #fff; font-size: 12px;
  opacity: 0; transform: scale(0.4);
  transition: opacity 0.35s, transform 0.45s var(--ease);
}
.book-prop.is-on::after { opacity: 1; transform: scale(1); }
.book-prop b { font-family: var(--font-display); font-size: 20px; font-weight: 700; }
.book-prop em {
  font-style: normal; font-family: var(--font-mono);
  font-size: 10px; letter-spacing: 0.08em; color: var(--night-soft); text-align: center;
}
.book-prop-stage {
  height: 118px; width: 100%;
  display: grid; place-items: center;
  perspective: 700px; margin-bottom: 8px;
}
.book-prop-stage .prop { display: block; }
/* skalerede kopier af props fra services-sektionen */
.bp-turntable { width: 130px; height: 108px; transform: rotateX(52deg) rotateZ(-22deg) scale(0.92); }
.bp-turntable .tt-deck { position: absolute; inset: 0; border-radius: 10px; }
.bp-turntable .tt-platter { left: 8px; top: 8px; width: 92px; height: 92px; }
.bp-turntable .tt-arm { right: 8px; top: 12px; height: 56px; }
.bp-speaker { width: 78px; height: 112px; transform: rotateX(8deg) rotateY(-26deg); }
.bp-speaker .sp-face { padding: 10px; gap: 8px; transform: translateZ(14px); }
.bp-speaker .sp-tweeter { width: 26px; height: 26px; }
.bp-speaker .sp-tweeter i { width: 10px; height: 10px; }
.bp-speaker .sp-woofer { width: 54px; height: 54px; }
.bp-speaker .sp-woofer i { width: 22px; height: 22px; }
.bp-speaker .sp-side { width: 26px; transform: rotateY(90deg) translateZ(65px); }
.bp-speaker .sp-top { height: 26px; transform: rotateX(90deg) translateZ(14px); }
.bp-light { width: 140px; height: 112px; }
.bp-light .lt-truss { height: 12px; }
.bp-light .lt-rig { left: 50%; margin-left: -17px; top: 18px; }
.bp-light .lt-beam { height: 78px; }
.bp-light .lt-floor { width: 108px; height: 20px; bottom: 4px; }
.bp-fog { width: 130px; height: 112px; }
/* the machine itself was disappearing into the card, so lift its
   contrast and keep the puffs from washing over it */
.bp-fog .fog-face { background: linear-gradient(160deg, #55290F, #2A1206); box-shadow: 0 0 0 1px rgba(252, 198, 98, 0.42), 0 16px 26px -14px rgba(0,0,0,0.9); }
.bp-fog .fog-top { background: linear-gradient(180deg, #5E2E12, #3A1B08); }
.bp-fog .fog-nozzle { background: linear-gradient(140deg, #E0B76D, #8A5A18); }
.bp-fog .fog-puffs i { opacity: 0; animation-duration: 4.4s; }
.bp-fog .fog-box { left: 18px; bottom: 16px; width: 88px; height: 44px; }
.bp-fog .fog-side { width: 28px; transform: rotateY(90deg) translateZ(74px); }
.bp-fog .fog-top { height: 28px; transform: rotateX(90deg) translateZ(20px); }
.bp-fog .fog-puffs { bottom: 30px; width: 86px; height: 84px; }
.bp-fog .fog-puffs i { width: 36px; height: 36px; }
.bp-bar { width: 130px; height: 112px; }
.bp-bar .bar-glass { bottom: 14px; width: 92px; height: 92px; transform: translateX(-50%) rotateX(8deg) rotateY(-12deg); }
.bp-bar .bar-bowl { width: 92px; height: 54px; }
.bp-bar .bar-liquid { top: 3px; left: 3px; width: 86px; height: 41px; }
.bp-bar .bar-cherry { top: 10px; left: 59px; width: 12px; height: 12px; }
.bp-bar .bar-stem { top: 53px; width: 6px; height: 29px; }
.bp-bar .bar-foot { top: 78px; width: 48px; height: 10px; }
.bp-bar .bar-shadow { bottom: 6px; width: 98px; height: 13px; }

/* --- felter --- */
.book-when, .book-contact { display: grid; gap: 20px; margin-bottom: 30px; text-align: left; }
.book-time { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; min-width: 0; }
.book-time-note {
  margin: -8px 0 2px;
  font-size: 13.5px; line-height: 1.55;
  color: rgba(247, 231, 196, 0.68);
}
.book-contact { grid-template-columns: 1fr 1fr; }
.book-field { display: grid; gap: 9px; }
.book-field > span {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase;
  color: rgba(247, 231, 196, 0.6);
}
.book-field input[type="text"],
.book-field input[type="tel"],
.book-field input[type="email"],
.book-field input[type="date"],
.book-field input[type="time"] {
  width: 100%; padding: 15px 18px;
  border-radius: var(--r-sm);
  border: 1px solid rgba(252, 198, 98, 0.22);
  background: rgba(26, 10, 3, 0.55);
  color: var(--night-text); font-size: 16px;
  transition: border-color 0.35s, box-shadow 0.35s, background 0.35s;
  appearance: none; -webkit-appearance: none;
}
.book-field input::placeholder { color: rgba(247, 231, 196, 0.3); }
.book-field input:focus {
  outline: none; border-color: var(--orange);
  background: rgba(26, 10, 3, 0.8);
  box-shadow: 0 0 0 4px rgba(252, 100, 0, 0.16);
}
.book-field input[type="date"]::-webkit-calendar-picker-indicator,
.book-field input[type="time"]::-webkit-calendar-picker-indicator { filter: invert(0.8) sepia(1) saturate(4) hue-rotate(-12deg); cursor: pointer; }

.book-guests { display: grid; gap: 8px; }
.book-guests-num {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(38px, 6vw, 62px); line-height: 1; color: var(--yellow);
  text-align: center;
}
.book-guests input[type="range"] {
  width: 100%; height: 30px; background: transparent; cursor: pointer;
  appearance: none; -webkit-appearance: none;
}
.book-guests input[type="range"]::-webkit-slider-runnable-track {
  height: 4px; border-radius: 4px;
  background: linear-gradient(90deg, var(--orange) var(--fill, 20%), rgba(252, 198, 98, 0.2) var(--fill, 20%));
}
.book-guests input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 24px; height: 24px; margin-top: -10px; border-radius: 50%;
  background: radial-gradient(circle at 34% 30%, #FFF6D8, var(--yellow) 55%, #8A5A18);
  box-shadow: 0 0 0 4px rgba(252, 100, 0, 0.22), 0 6px 16px rgba(0,0,0,0.5);
}
.book-guests input[type="range"]::-moz-range-track { height: 4px; border-radius: 4px; background: rgba(252, 198, 98, 0.2); }
.book-guests input[type="range"]::-moz-range-progress { height: 4px; border-radius: 4px; background: var(--orange); }
.book-guests input[type="range"]::-moz-range-thumb {
  width: 22px; height: 22px; border: 0; border-radius: 50%;
  background: radial-gradient(circle at 34% 30%, #FFF6D8, var(--yellow) 55%, #8A5A18);
  box-shadow: 0 0 0 4px rgba(252, 100, 0, 0.22);
}
.book-guests-scale {
  display: flex; justify-content: space-between;
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.1em;
  color: rgba(247, 231, 196, 0.4);
}
.book-guests-scale i { font-style: normal; }

/* --- opsummering --- */
.book-summary {
  margin: 0 0 30px; padding: 26px 28px;
  border-radius: var(--r-md);
  border: 1px solid rgba(252, 198, 98, 0.2);
  background: linear-gradient(160deg, rgba(58, 27, 8, 0.6), rgba(26, 10, 3, 0.85));
  display: grid; gap: 2px; text-align: left;
}
.book-sum-row {
  display: flex; align-items: baseline; gap: 16px; flex-wrap: wrap;
  padding: 10px 0;
  border-bottom: 1px solid rgba(252, 198, 98, 0.12);
}
.book-sum-row:last-child { border-bottom: 0; }
.book-sum-row dt {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--orange); min-width: 116px;
}
.book-sum-row dd { margin: 0; font-size: 16.5px; color: var(--night-text); }
.book-sum-row dd.is-empty { color: rgba(247, 231, 196, 0.35); font-style: italic; }
.book-note {
  margin: 14px 0 0;
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.06em;
  color: rgba(247, 231, 196, 0.42);
}

/* --- kvittering --- */
.book-done {
  position: absolute; inset: 0; z-index: 6;
  display: grid; place-content: center; justify-items: center; gap: 14px;
  padding: 40px var(--pad); text-align: center;
  background: linear-gradient(170deg, rgba(40, 17, 4, 0.97), rgba(26, 10, 3, 0.99));
  opacity: 0; transition: opacity 0.6s var(--ease);
}
.book-done[hidden] { display: none; }
.book-done.is-in { opacity: 1; }
.book-done-ball {
  width: 74px; height: 74px; border-radius: 50%;
  background-image:
    linear-gradient(rgba(26,10,3,0.42) 1px, transparent 1px),
    linear-gradient(90deg, rgba(26,10,3,0.42) 1px, transparent 1px),
    radial-gradient(circle at 34% 30%, #FFF6D8, var(--yellow) 44%, #8A5A18);
  background-size: 11px 11px, 11px 11px, 100% 100%;
  box-shadow: 0 0 60px rgba(252, 198, 98, 0.5);
  animation: specSpin 6s linear infinite;
}
.book-done h3 { margin: 8px 0 0; font-family: var(--font-display); font-size: clamp(24px, 3.4vw, 34px); font-weight: 700; }
.book-done p { margin: 0; color: var(--night-soft); font-weight: 300; }
.book-done-links { display: flex; gap: 22px; flex-wrap: wrap; justify-content: center; margin: 4px 0 8px; }
.book-done-links a {
  font-family: var(--font-mono); font-size: 12.5px; color: var(--yellow);
  border-bottom: 1px solid rgba(252, 198, 98, 0.35); padding-bottom: 2px;
}

@media (max-width: 900px) {
  .book-props { grid-template-columns: repeat(2, 1fr); }
  /* med 5 ydelser bliver den sidste alene i venstre kolonne; lad den
     fylde bredden ud, så rækken ser bevidst ud i stedet for afhugget */
  .book-props > :last-child:nth-child(odd) { grid-column: 1 / -1; }
  .book-contact { grid-template-columns: 1fr; }
  .book-rail { max-width: 150px; }
}
@media (max-width: 640px) {
  .book-step { padding: 96px var(--pad) 60px; }
  .book-prop-stage { height: 96px; }
  .book-opt { padding: 12px 18px; font-size: 14.5px; }
  .book-brand span:not(.brand-mark) { display: none; }
  .book-time { grid-template-columns: 1fr; }
}

/* =========================================================
   REVEALS
   ========================================================= */
[data-reveal] {
  opacity: 0;
  transform: translateY(34px);
  transition: opacity 0.95s var(--ease), transform 1.05s var(--ease);
}
[data-reveal].is-in { opacity: 1; transform: none; }

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width: 1080px) {
  .nav { display: none; }
  .burger { display: grid; }
  .why-grid { grid-template-columns: repeat(2, 1fr); }
  .gallery { grid-template-columns: repeat(2, 1fr); grid-auto-rows: clamp(150px, 26vw, 220px); }
}

@media (max-width: 900px) {
  body { font-size: 16px; }
  .hero { padding-top: 316px; }
  .ball-rig { top: 186px; }
  .about-grid,
  .events-inner,
  .contact-grid { grid-template-columns: 1fr; }

  /* text always first on mobile */
  .copy-block { order: -1; }
  .about-visual { order: 0; }

  .service { grid-template-columns: 1fr; gap: 26px; }
  .service-copy { order: -1; }
  .service-prop { height: 210px; order: 0; }

  .vinyl-prop { right: -10px; bottom: -28px; width: 108px; }
  .header-right .btn-sm { display: none; }
  .sticky-cta { bottom: 14px; padding: 12px 24px; font-size: 14.5px; }
  .site-footer { padding-bottom: 84px; }
  .footer-grid { flex-direction: column; align-items: flex-start; }

  /* Reel stacks vertically on touch. A horizontal scroller here
     hijacked the finger during vertical scrolling and made the
     page slide sideways, so nothing on mobile may pan at all. */
  .reel { height: auto; }
  .reel-sticky { position: static; height: auto; overflow: visible; padding: clamp(70px, 12vw, 110px) 0; }
  .reel-viewport { overflow: visible; }
  .reel-track {
    display: grid; grid-template-columns: 1fr;
    gap: 14px; width: auto;
    transform: none !important;
  }
  .reel-item { width: 100%; height: 56vh; }
  .reel-progress, .reel-hint { display: none; }
}

@media (max-width: 640px) {
  :root { --r-lg: 24px; --r-md: 18px; }
  .hero { min-height: 92svh; padding: 292px 0 64px; }
  .ball-stage { width: 100vw; height: 260px; }
  .ball-rig { top: 190px; }
  .ball-glow { width: 320px; height: 320px; margin: -160px 0 0 -160px; }
  .ball-spec { width: 200px; height: 200px; margin: -100px 0 0 -100px; }
  .hero-title { font-size: clamp(34px, 9.4vw, 44px); }
  .hero-actions { flex-direction: column; align-items: stretch; }
  .hero-actions .btn { width: 100%; }
  .hero-meta { margin-top: 28px; gap: 14px; }
  .vu { display: none; }
  .scroll-cue { display: none; }
  .field-row { grid-template-columns: 1fr; }
  .pick-grid { grid-template-columns: repeat(2, 1fr); }
  .gallery { grid-template-columns: 1fr; grid-auto-rows: 210px; }
  .g-item.g-wide, .g-item.g-tall { grid-column: span 1; grid-row: span 1; }
  .why-grid { grid-template-columns: 1fr; }
  .marquee-track span { font-size: 19px; }
  .contact-line { padding: 14px 2px; }
  .cl-label { min-width: 100%; }
  .ig-band-text { margin-right: 0; }
}

@media (hover: none) {
  .cursor { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  [data-reveal] { opacity: 1; transform: none; }
  .hero-title .w { opacity: 1; transform: none; }
  .grain { display: none; }
  .reel { height: auto; }
  .reel-sticky { position: static; height: auto; padding: 90px 0; }
  .reel-viewport { overflow-x: auto; }
  .reel-track { transform: none !important; }
}

/* =========================================================
   PERSONDATAPOLITIK — enkel læsbar side, samme palette
   ========================================================= */
.legal-page {
  background: var(--night);
  color: var(--night-text);
}
.legal-wrap {
  max-width: 720px;
  margin: 0 auto;
  padding: clamp(48px, 9vw, 96px) var(--pad) clamp(64px, 12vw, 120px);
}
.legal-back {
  display: inline-block; margin-bottom: 34px;
  font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.08em;
  color: var(--yellow); text-decoration: none;
}
.legal-back:hover { text-decoration: underline; }
.legal-wrap h1 {
  margin: 0 0 18px;
  font-family: var(--font-display); font-weight: 500;
  font-size: clamp(34px, 7vw, 54px); line-height: 1.08;
  color: var(--night-text);
}
.legal-lead { margin: 0 0 46px; font-size: 18px; color: var(--night-soft); }
.legal-wrap h2 {
  margin: 40px 0 12px;
  font-family: var(--font-display); font-weight: 500;
  font-size: clamp(21px, 3.4vw, 26px); color: var(--yellow-lt);
}
.legal-wrap p { margin: 0 0 16px; color: rgba(247, 231, 196, 0.82); }
.legal-wrap a { color: var(--yellow); }
.legal-list {
  margin: 0 0 20px; padding: 0; list-style: none;
  display: grid; gap: 12px;
}
.legal-list li {
  position: relative; padding-left: 22px;
  color: rgba(247, 231, 196, 0.82); line-height: 1.7;
}
.legal-list li::before {
  content: ""; position: absolute; left: 2px; top: 11px;
  width: 7px; height: 7px; border-radius: 50%; background: var(--yellow);
}
.legal-list b { color: var(--night-text); font-weight: 600; }
.legal-todo {
  padding: 1px 7px; border-radius: var(--r-sm);
  background: rgba(252, 100, 0, 0.16); color: var(--yellow-lt);
  font-family: var(--font-mono); font-size: 13px;
}
.legal-foot {
  margin-top: 48px; padding-top: 22px;
  border-top: 1px solid var(--night-line);
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.06em;
  color: rgba(247, 231, 196, 0.42);
}