/* All Massive Events, DJ-JP
   "Lit by the Room": the interface is monochrome. All color on the page comes from real footage: the hero,
   the stills and clips in every section, and a soft wash in the colors of whichever clip is playing
   (see js/main.js). Rule: text never sits on footage or on anything brighter than about relative luminance
   0.03 (the ambient wash and the lit bands are capped below that), so every contrast ratio in DESIGN-PLAN.md
   stays true no matter what color the room is. Labels on top of a picture sit on their own near-black chip.
   Lit bands: tools/make-lit-band.py measures the cap after JPEG.
   No inline styles anywhere (strict CSP). One typeface, three weights: 400 body, 600 interface, 800 display. */

@font-face {
  font-family: "Schibsted Grotesk";
  src: url("/fonts/schibsted-grotesk-var.woff2") format("woff2");
  font-weight: 400 800;
  font-style: normal;
  font-display: swap;
}
@property --g1 { syntax: "<color>"; inherits: true; initial-value: #d9a441; }
@property --g2 { syntax: "<color>"; inherits: true; initial-value: #d9a441; }
@property --g3 { syntax: "<color>"; inherits: true; initial-value: #d9a441; }

:root {
  color-scheme: dark;
  --ground: #0a0a0a;
  --alt: #131211;
  --surface: #191817;
  --surface2: #22211f;
  --text: #f5f3ef;
  --muted: #b4afa6;
  --faint: #8e897f;
  --line: rgba(245, 243, 239, 0.12);
  --line2: rgba(245, 243, 239, 0.28);
  --err: #ff8a80;
  --font: "Schibsted Grotesk", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

  /* type roles: six fixed steps and four fluid ones. Nothing else sets a font size (the footer mark aside). */
  --fs-label: 0.8125rem;
  --fs-small: 0.9rem;
  --fs-body: 1rem;
  --fs-large: 1.125rem;
  --fs-h3: 1.25rem;
  --fs-title: 1.5rem;
  --fs-lede: clamp(1.0625rem, 1.4vw, 1.25rem);
  --fs-h2: clamp(1.9rem, 3.6vw, 2.75rem);
  --fs-h1: clamp(2.5rem, 4.6vw, 4rem);
  --fs-display: clamp(2.75rem, 5.2vw, 5rem);

  --wrap: 1180px;
  --gutter: clamp(1.25rem, 5vw, 3rem);
  --header: 69px;
  --r: 14px;
  --r-sm: 10px;
  --ease: cubic-bezier(0.23, 1, 0.32, 1);
  --dur: 0.35s;
  --glow-t: 0.45s;
  --marquee: 36s;
  --g1: #d9a441;
  --g2: #d9a441;
  --g3: #d9a441;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; scroll-padding-top: 5.5rem; scrollbar-color: #3b3936 var(--ground); }
body {
  margin: 0;
  background: var(--ground);
  color: var(--text);
  font: 400 var(--fs-body) / 1.6 var(--font);
  -webkit-tap-highlight-color: transparent;
  text-rendering: optimizeLegibility;
}
body.has-callbar { padding-bottom: 0; }
img, video, svg { display: block; max-width: 100%; height: auto; }
h1, h2, h3, h4, p, ul, ol, dl, figure, blockquote { margin: 0; }
a { color: inherit; text-underline-offset: 0.2em; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid #fff; outline-offset: 3px; border-radius: 4px; }
::selection { background: var(--text); color: var(--ground); }
[hidden] { display: none !important; }

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: absolute; left: 1rem; top: -4rem; z-index: 200; background: var(--text); color: var(--ground); padding: 0.8rem 1.1rem; border-radius: 999px; font-weight: 600; text-decoration: none; }
.skip:focus { top: 1rem; }
.wrap { width: min(100% - 2 * var(--gutter), var(--wrap)); margin-inline: auto; }
.wrap.narrow { width: min(100% - 2 * var(--gutter), 760px); }

/* ---------- ambient: the colors of the clip that is playing, washed very softly across the whole page ----------
   Fixed behind everything; flat sections (.section--alt, header, footer) stay flat on top of it.
   Peak is 10% of the glow over the ground, which keeps --faint text above 4.5:1 on any hue. */
.ambient {
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
  opacity: 0.1;
  background:
    radial-gradient(70% 55% at 100% 0%, var(--g1), transparent 70%),
    radial-gradient(60% 50% at 0% 100%, var(--g3), transparent 70%);
  transition: --g1 1.6s ease, --g2 1.6s ease, --g3 1.6s ease;
}

/* ---------- type ---------- */
h1 { font: 800 var(--fs-h1) / 0.98 var(--font); letter-spacing: -0.04em; text-wrap: balance; overflow-wrap: break-word; }
.hero--home h1 { font-size: var(--fs-display); }
h2 { font: 800 var(--fs-h2) / 1.05 var(--font); letter-spacing: -0.03em; text-wrap: balance; }
h3 { font: 800 var(--fs-h3) / 1.2 var(--font); letter-spacing: -0.02em; }
h2.h3, .h3 { font-size: var(--fs-title); letter-spacing: -0.02em; }
em { font-style: normal; text-decoration: underline; text-decoration-color: var(--g2); text-decoration-thickness: 0.07em; text-underline-offset: 0.14em; }
.lede { font-size: var(--fs-lede); color: var(--muted); max-width: 54ch; margin-top: 1.1rem; }
.eyebrow, .tag, .hero-meta, .group-title, .foot-h { font: 600 var(--fs-label) / 1.3 var(--font); letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.eyebrow { margin-bottom: 1rem; }
.fineprint { color: var(--muted); font-size: var(--fs-small); max-width: 64ch; margin-top: 1rem; }
.fineprint a, .prose a { color: var(--text); }
.prose { color: var(--muted); font-size: var(--fs-large); max-width: 62ch; margin-top: 1.1rem; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.55rem;
  min-height: 48px; padding: 0.8rem 1.5rem; border-radius: 999px;
  font: 600 var(--fs-body) / 1 var(--font); text-decoration: none; cursor: pointer;
  border: 1.5px solid transparent; background: none;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease), color var(--dur) var(--ease), transform 0.16s var(--ease);
}
.btn:active { transform: scale(0.97); }
.btn-primary { background: var(--text); color: var(--ground); }
.btn-ghost { border-color: var(--line2); color: var(--text); }
.btn-sm { min-height: 40px; padding: 0.55rem 1.1rem; font-size: var(--fs-small); }
.btn-lg { min-height: 56px; padding: 1rem 1.9rem; font-size: var(--fs-large); }
.ico { width: 1.25rem; height: 1.25rem; flex: none; }
.ico-lg { width: 2rem; height: 2rem; }
.ico-sm { width: 0.9rem; height: 0.9rem; }
.btn-row { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.7rem; }
.btn-row--center { justify-content: center; }
.arrow-link { display: inline-flex; align-items: center; min-height: 44px; margin-top: auto; font-weight: 600; text-decoration: underline; text-decoration-color: var(--g2); text-decoration-thickness: 2px; text-underline-offset: 0.28em; color: var(--text); align-self: flex-start; transition: text-underline-offset 0.2s var(--ease); }
@media (hover: hover) and (pointer: fine) {
  .btn-primary:hover { background: #fff; }
  .btn-ghost:hover { border-color: var(--text); }
  .arrow-link:hover, .route:hover .arrow-link { text-underline-offset: 0.42em; }
  .card:hover { border-color: var(--line2); }
  .main-nav a:hover, .lang-link:hover, .foot-bottom a:hover, .site-footer li a:hover { color: #fff; text-decoration: underline; }
  .shot:hover > img, .route:hover .shot > img { transform: scale(1.035); }
  .tile-media:hover .chip { background: var(--text); color: var(--ground); }
}

/* ---------- header ---------- */
.site-header { position: sticky; top: 0; z-index: 60; background: var(--ground); border-bottom: 1px solid var(--line); }
.header-row { display: flex; align-items: center; gap: 1.25rem; min-height: 68px; position: relative; }
.brand { display: flex; align-items: center; min-height: 44px; flex: none; }
.brand img { height: 46px; width: auto; }
.main-nav { display: none; gap: 1.6rem; margin-inline: auto; }
.main-nav a { font-weight: 600; font-size: var(--fs-small); text-decoration: none; color: var(--muted); padding: 0.4rem 0; border-bottom: 2px solid transparent; }
.main-nav a[aria-current="page"] { color: var(--text); border-bottom-color: var(--text); }
.header-tools { margin-left: auto; display: flex; align-items: center; gap: 0.9rem; }
.lang-link { display: none; font-weight: 600; font-size: var(--fs-small); color: var(--muted); text-decoration: none; padding: 0.5rem 0.2rem; }
.header-cta { display: none; }
.menu { position: static; }
.menu > summary { list-style: none; cursor: pointer; width: 44px; height: 44px; display: grid; place-items: center; border: 1.5px solid var(--line2); border-radius: 999px; }
.menu > summary::-webkit-details-marker { display: none; }
/* the row it hangs from is page-width, so it reaches out by one gutter on each side to span the screen */
.menu-panel { position: absolute; left: calc(-1 * var(--gutter)); right: calc(-1 * var(--gutter)); top: 100%; background: var(--ground); border-bottom: 1px solid var(--line); padding: 1rem var(--gutter) 1.6rem; max-height: calc(100dvh - var(--header)); overflow-y: auto; box-shadow: 0 30px 60px rgba(0, 0, 0, 0.7); }
.menu[open] .menu-panel { animation: menuIn 0.2s var(--ease); }
@keyframes menuIn { from { opacity: 0; transform: translateY(-8px); } }
.menu-panel nav { display: grid; }
.menu-panel nav a { font: 800 var(--fs-title) / 1 var(--font); letter-spacing: -0.02em; text-decoration: none; padding: 0.95rem 0; border-bottom: 1px solid var(--line); }
.menu-panel nav a[aria-current="page"] { color: var(--muted); }
.menu-tools { display: flex; align-items: center; gap: 1rem; margin-top: 1.2rem; }
.menu-tools .lang-link { display: inline-block; }
@media (min-width: 1000px) {
  .main-nav { display: flex; }
  .lang-link, .header-cta { display: inline-flex; }
  .menu { display: none; }
  .header-tools { margin-left: 0; }
}

/* ---------- footage frames ----------
   .shot is any framed still: the picture fills it, and a clip can fade in over the picture (.pv, added by JS).
   Each use sets its own aspect ratio. Focal points for clips whose subject is not centered are at the end. */
.shot { position: relative; display: block; overflow: hidden; border-radius: var(--r); background: var(--surface); }
.shot > img, .shot > picture > img, .shot > .pv { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.shot > img, .shot > picture > img { transition: transform 0.7s var(--ease); }
.shot > .pv { opacity: 0; transition: opacity 0.4s ease; pointer-events: none; }
.shot.is-playing > .pv { opacity: 1; }
.chip {
  position: absolute; left: 0.6rem; bottom: 0.6rem; z-index: 1;
  display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.5rem 0.75rem; border-radius: 999px;
  background: rgba(10, 10, 10, 0.9); color: var(--text);
  font: 600 var(--fs-label) / 1 var(--font);
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}

/* ---------- hero ----------
   Media heroes: the footage is the first thing on screen. Phone: full-width frame on top, words under it.
   Desktop: words on the left at the page's own left edge, and the frame runs from there off the right edge
   of the screen. The five columns are: left margin, copy, gap, the part of the frame inside the page width,
   and the bleed to the screen edge. */
.hero { position: relative; isolation: isolate; }
.hero--text { padding-block: clamp(3rem, 7vw, 5.5rem) clamp(1rem, 3vw, 2rem); }
.hero--text .hero-grid { display: grid; gap: 1.75rem; align-items: center; }
.hero--media { padding-bottom: clamp(2.5rem, 6vw, 4.5rem); transition: --g1 var(--glow-t) ease, --g2 var(--glow-t) ease, --g3 var(--glow-t) ease; }
.hero--media .hero-grid { display: grid; gap: 1.75rem; }
.hero--media .hero-copy { padding-inline: var(--gutter); }
.hero-media { order: -1; }
/* Phone: the glow is only a short spill of light under the frame (the frame is 80vw tall) and is gone
   before the headline starts. Desktop: it sits behind the frame and has faded out where the words are. */
.hero-glow {
  position: absolute; inset: 0 0 auto; height: calc(80vw + 1.5rem); z-index: -1; pointer-events: none;
  background:
    radial-gradient(52% 70% at 70% 26%, var(--g1), transparent 72%),
    radial-gradient(52% 70% at 92% 60%, var(--g2), transparent 72%),
    radial-gradient(56% 70% at 62% 100%, var(--g3), transparent 72%);
  -webkit-mask-image: linear-gradient(180deg, #000 0, #000 calc(100% - 3rem), transparent 100%);
  mask-image: linear-gradient(180deg, #000 0, #000 calc(100% - 3rem), transparent 100%);
}
.hero-frame { position: relative; aspect-ratio: 5 / 4; overflow: hidden; background: #000; }
.hero-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 0.9s ease; pointer-events: none; filter: saturate(1.15); }
.hero-video.is-active { opacity: 1; z-index: 2; }
/* outgoing clip: stays opaque underneath while the incoming one fades in over it */
.hero-video.is-leaving { opacity: 1; z-index: 1; transition: none; }
.hero-toggle { transition: transform 0.16s var(--ease); position: absolute; z-index: 3; right: 0.75rem; bottom: 0.75rem; width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; background: rgba(10, 10, 10, 0.72); border: 1px solid var(--line2); cursor: pointer; }
.hero-meta { margin-top: 1.75rem; padding-top: 1rem; border-top: 1px solid var(--line); max-width: 26rem; }
@media (min-width: 900px) {
  .hero--media { padding-block: clamp(1.25rem, 2.5vw, 2rem) clamp(3rem, 6vw, 5rem); }
  .hero--media .hero-grid {
    grid-template-columns: minmax(var(--gutter), 1fr) minmax(0, 28rem) 3rem minmax(0, 42.75rem) minmax(0, 1fr);
    gap: 0; align-items: center;
  }
  .hero--media .hero-copy { grid-column: 2; padding-inline: 0; }
  .hero-media { grid-column: 4 / -1; order: 0; }
  .hero-frame {
    aspect-ratio: auto; height: clamp(26rem, 74vh, 44rem);
    border-radius: var(--r) 0 0 var(--r);
    box-shadow: 0 0 0 1px var(--line2), 0 28px 90px -36px var(--g2);
  }
  .hero-glow {
    inset: 0; height: auto;
    /* the words end at 40% to 50% of the width depending on the screen, so the glow starts at 50% */
    -webkit-mask-image: linear-gradient(90deg, transparent 0, transparent 50%, #000 78%);
    mask-image: linear-gradient(90deg, transparent 0, transparent 50%, #000 78%);
  }
}

/* ---------- marquee ---------- */
.marquee { border-block: 1px solid var(--line); overflow: hidden; padding-block: 0.95rem; background: var(--ground); }
.marquee-track { display: flex; width: max-content; animation: marquee var(--marquee) linear infinite; }
.marquee-list { display: flex; list-style: none; padding: 0; }
.marquee-list li { position: relative; padding-inline: 1.5rem; white-space: nowrap; font: 600 var(--fs-body) / 1 var(--font); letter-spacing: 0.1em; text-transform: uppercase; }
.marquee-list li::after { content: ""; position: absolute; right: -0.2rem; top: 50%; width: 0.42rem; height: 0.42rem; border-radius: 50%; background: var(--g2); transform: translateY(-50%); }
@keyframes marquee { to { transform: translateX(-50%); } }

/* ---------- sections ---------- */
.section { padding-block: clamp(3.5rem, 8vw, 6.5rem); }
.section--alt { background: var(--alt); border-block: 1px solid var(--line); }
/* overflow: clip (not hidden) so the sticky stage inside a lit band still sticks; hidden is the fallback */
.section--lit { position: relative; isolation: isolate; background: var(--ground); border-block: 1px solid var(--line); overflow: hidden; overflow: clip; }
/* a blurred frame of real footage, fading out toward the edges */
.section--lit::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: url("/images/band-party.jpg") center / cover no-repeat;
  -webkit-mask-image: radial-gradient(75% 90% at 50% 40%, #000 30%, transparent 100%);
  mask-image: radial-gradient(75% 90% at 50% 40%, #000 30%, transparent 100%);
}
/* spotlight (created by JS for mouse users). Peak 12% over the band (band capped at lum 0.02): worst case keeps --muted at 4.74:1. */
.spot {
  position: absolute; left: -260px; top: -260px; width: 520px; height: 520px; z-index: -1; pointer-events: none;
  border-radius: 50%; background: radial-gradient(closest-side, var(--g2), transparent);
  opacity: 0; transition: opacity 0.4s ease;
}
.spot.on { opacity: 0.12; }
.section--tight { padding-block: clamp(2.5rem, 5vw, 4rem); }
.sec-head { max-width: 46rem; margin-bottom: clamp(1.75rem, 4vw, 3rem); }
.grid { display: grid; gap: 1.25rem; }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 1.5rem; display: flex; flex-direction: column; gap: 0.65rem; transition: border-color var(--dur) var(--ease); }
.card p { color: var(--muted); }
.card .tag { margin-bottom: 0.2rem; }
.review blockquote p { color: var(--text); font-size: var(--fs-large); }
.review figcaption { color: var(--muted); font-size: var(--fs-small); }

/* why people book: the man on the mic, and the reasons as a plain ledger */
.why-grid { display: grid; gap: 2rem; align-items: center; }
.why-media { aspect-ratio: 3 / 2; }
.why-copy .sec-head { margin-bottom: 1.75rem; }
.ledger { border-top: 1px solid var(--line); }
.ledger-row { display: grid; grid-template-columns: 8.5rem 1fr; gap: 1rem; align-items: baseline; padding: 0.85rem 0; border-bottom: 1px solid var(--line); }
.ledger dt { font: 800 var(--fs-title) / 1.1 var(--font); letter-spacing: -0.03em; }
.ledger dd { margin: 0; color: var(--muted); }
@media (min-width: 900px) {
  .why-grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 4rem; }
  .why-media { aspect-ratio: 4 / 3; }
}

/* what are you celebrating: three doors, each with its own night behind it */
.grid-routes { display: grid; gap: 2.25rem; }
.route { display: flex; flex-direction: column; }
.route-media { aspect-ratio: 16 / 10; }
.route-body { display: flex; flex-direction: column; gap: 0.5rem; padding-top: 1.1rem; flex: 1; }
.route-body p:not(.tag) { color: var(--muted); }
@media (min-width: 860px) {
  .grid-routes { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; }
  .route-media { aspect-ratio: 4 / 5; }
}

/* what we offer: each service shows its own footage; the picture is the button that opens the clip */
.tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.75rem 1rem; }
.tile { display: flex; flex-direction: column; gap: 0.8rem; min-width: 0; }
.tile-media { width: 100%; padding: 0; border: 0; cursor: pointer; aspect-ratio: 4 / 3; text-align: left; }
.tile-body { display: grid; gap: 0.3rem; align-content: start; }
.tile-body h3 { font-size: var(--fs-large); }
.tile-body p { color: var(--muted); font-size: var(--fs-small); }
.tile-body .fineprint { margin-top: 0.2rem; }
.tile--lead, .tile--text { grid-column: 1 / -1; }
.tile--lead .tile-body h3, .tile--text .tile-body h3 { font-size: var(--fs-h3); }
.tile--lead .tile-body p, .tile--text .tile-body p { font-size: var(--fs-body); }
.tile--text { padding: 1.25rem; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); justify-content: center; }
@media (min-width: 900px) {
  .tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2.25rem 1.5rem; }
  .tiles--n6 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .tile-body h3 { font-size: var(--fs-h3); }
  .tile-body p { font-size: var(--fs-body); }
  .tile--lead, .tile--text { grid-column: auto; }
  .tiles--lead .tile--lead { grid-column: span 2; grid-row: span 2; }
  .tiles--lead .tile--lead .tile-media { aspect-ratio: auto; flex: 1; min-height: 20rem; }
  .tiles--lead .tile--text { grid-column: span 2; padding: 1.75rem; }
}

.seals { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(128px, 1fr)); border-top: 1px solid var(--line); }
.seals li { padding: 1.5rem 1rem 0.5rem 0; display: flex; flex-direction: column; gap: 0.4rem; }
.seals strong { font: 800 var(--fs-title) / 1 var(--font); letter-spacing: -0.03em; }
.seals span { color: var(--muted); font-size: var(--fs-small); }
.seals--compact { margin-top: 2rem; grid-template-columns: repeat(2, 1fr); }

/* a night with DJ-JP: the steps scroll, and the stage beside (or above) them shows each moment */
.night-grid { display: grid; gap: 1.75rem; }
.stage { position: sticky; top: var(--header); z-index: 2; aspect-ratio: 16 / 9; margin-inline: calc(-1 * var(--gutter)); overflow: hidden; background: #000; }
.stage-shot { position: absolute; inset: 0; opacity: 0; transition: opacity 0.5s ease; border-radius: 0; }
.stage-shot.is-active { opacity: 1; }
.timeline { list-style: none; padding: 0; counter-reset: step; position: relative; max-width: 46rem; }
.timeline::before { content: ""; position: absolute; left: 1.05rem; top: 0.5rem; bottom: 0.5rem; width: 2px; background: var(--line); }
.step { position: relative; z-index: 1; padding: 0 0 2.2rem 3.4rem; counter-increment: step; }
.step:last-child { padding-bottom: 0; }
.step::before { content: counter(step); position: absolute; left: 0; top: 0; width: 2.1rem; height: 2.1rem; border-radius: 50%; background: var(--ground); border: 2px solid var(--line2); display: grid; place-items: center; font: 600 var(--fs-label) / 1 var(--font); font-variant-numeric: tabular-nums; color: var(--muted); }
.step h3 { margin: 0.15rem 0 0.35rem; transition: color 0.3s ease; }
.step p { color: var(--muted); max-width: 54ch; }
/* with the stage running, the step that is on stage is the bright one (both colors pass AA) */
.night.is-live .step h3 { color: var(--muted); }
.night.is-live .step.is-active h3 { color: var(--text); }
@media (min-width: 900px) {
  .night-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 4rem; align-items: start; }
  .stage { order: 2; top: 6.5rem; margin-inline: 0; aspect-ratio: 4 / 3; border-radius: var(--r); box-shadow: 0 0 0 1px var(--line); }
}
@supports (animation-timeline: view()) {
  /* a line in the room's color fills down the timeline as you scroll, under the numbered circles */
  .timeline { view-timeline: --night block; }
  .timeline::after {
    content: ""; position: absolute; left: 1.05rem; top: 0.5rem; bottom: 0.5rem; width: 2px; background: var(--g2);
    transform-origin: top; transform: scaleY(0);
    animation: nightFill linear both; animation-timeline: --night;
    /* the tip rides at 58% of the viewport height, so it reaches each circle just before that circle lights (~51%) */
    animation-range: entry 42vh entry calc(100% + 42vh);
  }
  @keyframes nightFill { to { transform: scaleY(1); } }
  .step::before { animation: stepOn linear both; animation-timeline: view(); animation-range: entry 25% cover 45%; }
  @keyframes stepOn { from { border-color: var(--line2); color: var(--muted); background: var(--ground); } to { border-color: var(--g2); color: var(--text); background: var(--surface2); } }
}

.partner { max-width: 52rem; }
.partner-logo { width: min(100%, 240px); height: auto; border-radius: var(--r-sm); margin-bottom: 0.4rem; }
@media (min-width: 760px) {
  .partner { display: grid; grid-template-columns: 240px 1fr; column-gap: 2rem; row-gap: 0.65rem; align-items: start; padding: 2rem; }
  .partner-logo { grid-row: 1 / span 4; margin: 0; }
  .partner > :not(.partner-logo) { grid-column: 2; }
}

.split { display: grid; gap: 2rem; align-items: center; }
.split-copy > p { color: var(--muted); font-size: var(--fs-large); max-width: 56ch; }
.split-copy .arrow-link { margin-top: 0.75rem; }
.portrait { position: relative; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 1.5rem 1.5rem 0; overflow: hidden; }
.portrait img { margin-inline: auto; max-height: min(440px, 62vh); width: auto; }
.badge { position: absolute; left: 1rem; bottom: 1rem; background: var(--ground); border: 1px solid var(--line2); border-radius: var(--r-sm); padding: 0.6rem 0.9rem; display: flex; align-items: baseline; gap: 0.4rem; }
.badge strong { font: 800 var(--fs-title) / 1 var(--font); letter-spacing: -0.03em; }
.badge span { color: var(--muted); font-size: var(--fs-small); }
@media (min-width: 860px) { .split { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: 4rem; } }

/* service areas: three regions, towns as one readable line each */
.areas { margin: 0; display: grid; gap: 0; border-top: 1px solid var(--line); }
.area { display: grid; gap: 0.3rem 2rem; padding: 1.15rem 0; border-bottom: 1px solid var(--line); }
.area dt { font: 800 var(--fs-h3) / 1.2 var(--font); letter-spacing: -0.02em; }
.area dd { margin: 0; color: var(--muted); }
@media (min-width: 760px) { .area { grid-template-columns: 16rem 1fr; align-items: baseline; } }
.checks { list-style: none; padding: 0; display: grid; gap: 1.1rem 2.5rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); }
.checks li { position: relative; padding-left: 2rem; }
.checks li::before { content: ""; position: absolute; left: 0.1rem; top: 0.5em; width: 0.95rem; height: 0.5rem; border-left: 2px solid var(--text); border-bottom: 2px solid var(--text); transform: rotate(-45deg); }

.faq-list { border-top: 1px solid var(--line); }
.faq { border-bottom: 1px solid var(--line); }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 1.2rem; padding: 1.2rem 0; font: 600 var(--fs-large) / 1.3 var(--font); }
.faq summary::-webkit-details-marker { display: none; }
.faq-ico { flex: none; transition: transform 0.25s var(--ease); }
.faq[open] .faq-ico { transform: rotate(45deg); }
.faq-a { padding: 0 0 1.4rem; color: var(--muted); max-width: 60ch; }
.group-title { margin: 3rem 0 0.9rem; }
.group-title:first-of-type { margin-top: 0; }

.cta-band { text-align: center; }
.cta-band .lede { margin-inline: auto; }

.social { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 0.75rem; }
.gallery { list-style: none; padding: 0; columns: 3 260px; column-gap: 1rem; }
.gallery li { break-inside: avoid; margin: 0 0 1rem; }
.gallery-item { display: block; width: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; border-radius: var(--r); overflow: hidden; }

/* ---------- form ---------- */
.form-wrap { display: grid; gap: 3rem; }
@media (min-width: 940px) { .form-wrap { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 4.5rem; align-items: start; } }
.direct { list-style: none; padding: 0; margin-top: 2rem; display: grid; gap: 1.1rem; }
.direct li { display: grid; gap: 0.3rem; }
.direct a { font: 800 var(--fs-h3) / 1.2 var(--font); letter-spacing: -0.02em; word-break: break-word; }
.form { display: grid; gap: 1.3rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: clamp(1.25rem, 3vw, 2rem); }
.field { display: grid; gap: 0.4rem; align-content: start; }
.field-row { display: grid; gap: 1.3rem; }
@media (min-width: 640px) { .field-row { grid-template-columns: 1fr 1fr; } }
label { font-weight: 600; }
.opt { color: var(--faint); font-weight: 400; }
.hint { color: var(--muted); font-size: var(--fs-small); }
input, select, textarea { width: 100%; min-height: 52px; background: #101010; border: 1.5px solid var(--line2); border-radius: var(--r-sm); padding: 0.85rem 1rem; font-size: var(--fs-body); caret-color: var(--text); }
textarea { min-height: 130px; resize: vertical; }
input::placeholder, textarea::placeholder { color: var(--faint); }
input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid #fff; outline-offset: 2px; border-color: #fff; }
.field.has-error input, .field.has-error select, .field.has-error textarea { border-color: var(--err); }
.err { color: var(--err); font-weight: 600; font-size: var(--fs-small); }
.err-summary { border: 1.5px solid var(--err); border-radius: var(--r-sm); padding: 0.9rem 1.1rem; color: var(--err); font-weight: 600; }
.check { display: flex; gap: 0.7rem; align-items: flex-start; font-weight: 400; color: var(--muted); }
.check input { width: 1.25rem; min-height: 1.25rem; height: 1.25rem; flex: none; margin-top: 0.15rem; accent-color: #fff; }
.form-notice { margin-top: 0; }
.form .btn-lg { width: 100%; }

.review-path { margin-bottom: 1.5rem; }
.review-path .btn { align-self: flex-start; margin-top: 0.4rem; }
.review-form h3 { margin-bottom: -0.6rem; }
.legal h3 { margin: 2.4rem 0 0.7rem; }
.legal p, .legal li { color: var(--muted); margin-bottom: 0.8rem; max-width: 68ch; }
.legal ul { padding-left: 1.2rem; }
.legal a { color: var(--text); }
.updated { color: var(--faint); font-size: var(--fs-small); }
.message .btn-row { margin-top: 2rem; }

/* ---------- footer, callbar ---------- */
.site-footer { border-top: 1px solid var(--line); background: #070707; padding-top: clamp(2.5rem, 6vw, 4rem); overflow: hidden; }
.footer-grid { display: grid; gap: 2.2rem; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.foot-brand img { height: 52px; width: auto; margin-bottom: 1rem; }
.foot-brand p { color: var(--muted); max-width: 34ch; font-size: var(--fs-small); }
.foot-h { margin-bottom: 1rem; }
.site-footer ul { list-style: none; padding: 0; display: grid; gap: 0.55rem; font-size: var(--fs-small); color: var(--muted); }
.site-footer li a { text-decoration: none; }
.foot-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.8rem 2rem; margin-top: 2.5rem; padding-block: 1.4rem 1.8rem; border-top: 1px solid var(--line); color: var(--muted); font-size: var(--fs-small); }
.foot-bottom nav { display: flex; gap: 1.4rem; flex-wrap: wrap; }
.foot-bottom a { color: var(--muted); }
/* the sign-off: the name at room size, a shade above the floor. Decorative (aria-hidden), so it carries no contrast duty. */
.foot-mark { font: 800 11vw / 0.78 var(--font); letter-spacing: -0.045em; white-space: nowrap; text-align: center; color: var(--surface2); user-select: none; margin-bottom: -0.06em; }
.callbar { display: none; position: fixed; left: 0; right: 0; bottom: 0; z-index: 55; gap: 0.6rem; padding: 0.6rem var(--gutter) calc(0.6rem + env(safe-area-inset-bottom)); background: rgba(10, 10, 10, 0.97); border-top: 1px solid var(--line); }
.callbar { transition: transform 0.25s var(--ease), visibility 0s linear 0s; }
.callbar.is-tucked { transform: translateY(100%); visibility: hidden; transition: transform 0.2s var(--ease), visibility 0s linear 0.2s; }
.callbar .btn { flex: 1; padding-inline: 0.9rem; white-space: nowrap; }
@media (max-width: 760px) {
  .callbar { display: flex; }
  body.has-callbar { padding-bottom: calc(4.6rem + env(safe-area-inset-bottom)); }
  body.has-callbar .foot-mark { margin-bottom: 0.1em; }
}

/* ---------- dialogs ---------- */
dialog.modal { border: 1px solid var(--line2); background: var(--surface); color: var(--text); border-radius: var(--r); padding: 0; width: min(92vw, 920px); max-height: 92dvh; overflow: auto; overscroll-behavior: contain; }
dialog.modal::backdrop { background: rgba(0, 0, 0, 0.82); }
/* Enter 250ms, exit 150ms (faster out than in). Browsers without allow-discrete just close instantly. */
dialog.modal, dialog.modal::backdrop {
  opacity: 0;
  transition: opacity 0.15s var(--ease), transform 0.15s var(--ease), overlay 0.15s allow-discrete, display 0.15s allow-discrete;
}
dialog.modal { transform: scale(0.97); }
dialog.modal[open], dialog.modal[open]::backdrop { opacity: 1; transform: none; transition-duration: 0.25s; }
@starting-style {
  dialog.modal[open], dialog.modal[open]::backdrop { opacity: 0; }
  dialog.modal[open] { transform: scale(0.96); }
}
.modal-bar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.9rem 1rem 0.9rem 1.4rem; border-bottom: 1px solid var(--line); }
.icon-btn:active, .hero-toggle:active { transform: scale(0.95); }
.icon-btn { transition: transform 0.16s var(--ease); width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; border: 1.5px solid var(--line2); background: none; cursor: pointer; }
.modal-body { padding: 1rem 1.4rem 1.2rem; display: grid; gap: 1rem; }
.modal-body video, .modal-body img { width: 100%; max-height: 68dvh; object-fit: contain; background: #000; border-radius: var(--r-sm); }
.modal-body figcaption { color: var(--muted); font-size: var(--fs-small); margin-top: 0.5rem; }
.modal-note { padding: 0 1.4rem 1.2rem; margin-top: 0; }
.lb-nav { display: flex; justify-content: space-between; padding: 0 1rem 1rem; }

/* ---------- reveal: footage tiles and frames come up as they enter; headings and running text never wait.
   Only below-the-fold frames get the class, so the first view is always fully visible. ---------- */
.js .will-reveal { opacity: 0; transform: translateY(16px); }
.js .will-reveal.in { opacity: 1; transform: none; transition: opacity 0.6s var(--ease), transform 0.6s var(--ease); }

/* ---------- focal points: clips and photos whose subject is not in the middle of the frame ---------- */
.hero-video[data-clip="dj-booth"], [data-clip="dj-booth"] > img, [data-clip="dj-booth"] > .pv { object-position: 50% 12%; }
[data-clip="fog-firstdance-2"] > img, [data-clip="fog-firstdance-2"] > .pv { object-position: 50% 34%; }
[data-clip="booth-standalone"] > img { object-fit: contain; background: #000; }
[data-clip="booth-360-platform"] > img { object-position: 50% 72%; }

/* ---------- reduced motion: calmer, not broken ---------- */
@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; }
  .marquee-track { animation: none; width: auto; flex-wrap: wrap; justify-content: center; }
  .marquee-list:nth-child(2) { display: none; }
  .marquee-list { flex-wrap: wrap; justify-content: center; }
  .shot:hover > img, .route:hover .shot > img { transform: none; }
  /* fades that explain a change stay (short, no movement); everything that moves stays off */
  .hero-video, .stage-shot { transition-duration: 0.4s !important; }
  dialog.modal, dialog.modal::backdrop { transition-property: opacity, overlay, display !important; transition-duration: 0.15s !important; }
  dialog.modal, dialog.modal[open] { transform: none; }
  .menu[open] .menu-panel { animation: none; }
  .callbar, .callbar.is-tucked { transform: none; }
  .timeline::after { display: none; }
  .btn:active, .icon-btn:active, .hero-toggle:active { transform: none; }
}

@media print {
  body { background: #fff; color: #000; }
  .site-header, .callbar, .hero-frame, .hero-glow, .ambient, .marquee, dialog, .menu, .hero-toggle, .stage, .foot-mark, .chip { display: none !important; }
  .section, .section--alt, .section--lit { background: #fff; border: 0; padding-block: 1rem; }
  .section--lit::before { display: none; }
  .card, .form, .tile--text { background: #fff; border: 1px solid #999; }
  * { color: #000 !important; box-shadow: none !important; }
  a[href^="http"]::after, a[href^="tel"]::after, a[href^="mailto"]::after { content: " (" attr(href) ")"; font-size: 0.85em; }
}

/* contact page: on phones the date field should come right after the direct-contact list, not after the trust badges */
@media (max-width: 899px) { .seals--compact { display: none; } }

/* without JavaScript the pause button cannot work, so it is not shown */
html:not(.js) .hero-toggle { display: none; }

/* very small phones (320px): tighten the header so logo and menu button fit */
@media (max-width: 380px) {
  .header-row { gap: 0.6rem; }
  .header-tools { gap: 0.5rem; }
  .brand img { height: 36px; }
  .ledger-row { grid-template-columns: 7rem 1fr; }
  .ledger dt { font-size: var(--fs-h3); }   /* "Asegurado" has to fit the narrow column */
}