/* Art of Sound
   Desert night palette. Each service has its own "uplight" color, taken from
   the colors Art of Sound already used for its service icons. */

@font-face {
  font-family: "Archivo";
  src: url("fonts/archivo-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
}
@font-face {
  font-family: "Archivo";
  src: url("fonts/archivo-italic-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "Russo One";
  src: url("fonts/russo-one-latin.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}

:root {
  --night: #09090a;
  --dusk: #141415;
  --dusk-2: #1e1e20;
  --sand: #f3e8d6;
  --haze: #aaa49b;
  --line: rgba(243, 232, 214, 0.14);
  --bulb: #ffc93c;           /* marquee-bulb amber: the one action color */
  --c-weddings: #ff5277;
  --c-corporate: #a9b8ff;
  --c-lighting: #ffd23f;
  --c-av: #2fc2ff;
  --c-music: #5cf2b0;
  --wrap: 1180px;
  --gutter: max(clamp(20px, 4vw, 40px), env(safe-area-inset-left), env(safe-area-inset-right));
  --radius-sm: 10px;
  --radius-lg: 22px;
  --font: "Archivo", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --display: "Russo One", "Archivo", ui-sans-serif, system-ui, sans-serif;
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { overflow-x: clip; }
body { overflow: clip; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 88px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  background: var(--night);
  color: var(--sand);
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--bulb); outline-offset: 3px; border-radius: 4px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--bulb); color: var(--night); padding: 10px 16px; border-radius: var(--radius-sm); font-weight: 600; text-decoration: none; }
.skip:focus { top: 12px; }
.wrap { width: min(100% - 2 * var(--gutter), var(--wrap)); margin-inline: auto; }

/* Type scale: condensed, heavy headlines; quiet body. */
/* Russo One has no slanted version, so the browser slants it, like the AOS logo. */
h1, h2, h3 { margin: 0; font-family: var(--display); font-weight: 400; font-style: italic; font-synthesis: style; letter-spacing: -0.01em; line-height: 1; text-wrap: balance; }
h1 { font-size: clamp(30px, 5.4vw, 72px); }
h2 { font-size: clamp(26px, 3.4vw, 42px); }
h3 { font-size: clamp(20px, 2vw, 24px); line-height: 1.1; }
p { margin: 0; max-width: 62ch; }
.lede { font-size: clamp(18px, 1.8vw, 21px); color: var(--haze); line-height: 1.55; }
.muted { color: var(--haze); }

/* Buttons */
/* Buttons are slanted rectangles, leaning forward like the AOS logo.
   The slanted shape is drawn behind the button so the text itself stays upright. */
.btn {
  position: relative; isolation: isolate;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 52px; padding: 0 30px;
  font-weight: 600; font-size: 17px; text-decoration: none; white-space: nowrap;
  border: 0; background: none; cursor: pointer; color: var(--sand);
}
.btn::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  transform: skewX(-14deg); border-radius: 3px;
  border: 1.5px solid transparent;
  transition: background-color .15s, border-color .15s;
}
.btn:focus-visible { outline: none; }
.btn:focus-visible::before { outline: 3px solid var(--bulb); outline-offset: 3px; }
.btn-primary { color: var(--night); }
.btn-primary::before { background: var(--sand); }
.btn-primary:hover::before { background: #fff; }
.btn-ghost::before { border-color: rgba(243, 232, 214, 0.45); background: rgba(9,9,10, 0.25); }
.btn-ghost:hover::before { border-color: var(--sand); background: rgba(243, 232, 214, 0.08); }
.btn svg { width: 18px; height: 18px; flex: none; }
.text-link { font-weight: 600; text-decoration-thickness: 1.5px; text-underline-offset: 5px; text-decoration-color: var(--bulb); }
.text-link:hover { color: var(--bulb); }

/* Header */
.site-header { position: sticky; top: 0; z-index: 40; border-bottom: 1px solid var(--line); }
/* The frosted background sits on a separate layer so the mobile menu (position: fixed) can cover the whole screen. */
.site-header::before { content: ""; position: absolute; inset: 0; z-index: -1; background: rgba(9,9,10, 0.82); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.site-header .wrap { display: flex; align-items: center; justify-content: space-between; gap: 24px; height: 72px; }
.logo img { width: 92px; height: auto; }
.nav { display: flex; align-items: center; gap: 30px; }
.nav a:not(.btn) { text-decoration: none; font-weight: 500; color: var(--haze); }
.nav a:not(.btn):hover, .nav a[aria-current="page"] { color: var(--sand); }
.nav .btn { min-height: 44px; padding: 0 20px; font-size: 16px; }
.menu-toggle { display: none; }
@media (max-width: 860px) {
  .site-header .wrap { height: 64px; }
  .logo img { width: 78px; }
  .menu-toggle {
    display: inline-flex; align-items: center; justify-content: center;
    width: 48px; height: 48px; margin-right: -10px; border: 0; background: none; cursor: pointer;
  }
  .menu-toggle svg { width: 26px; height: 26px; }
  .nav {
    position: fixed; inset: 64px 0 0; z-index: 39;
    flex-direction: column; align-items: stretch; gap: 0;
    padding: 12px var(--gutter) 40px; background: var(--night);
    visibility: hidden; opacity: 0; transition: opacity .18s, visibility 0s .18s;
  }
  .nav.open { visibility: visible; opacity: 1; transition: opacity .18s; }
  .nav a:not(.btn) { font-family: var(--display); font-size: 30px; font-weight: 400; font-style: italic; letter-spacing: -0.01em; color: var(--sand); padding: 14px 0; border-bottom: 1px solid var(--line); }
  .nav .btn { margin-top: 28px; min-height: 56px; font-size: 18px; }
  body.menu-open { overflow: hidden; }
}

/* Home page: the header floats over the video and turns solid once you scroll. */
.home .site-header { position: fixed; left: 0; right: 0; border-bottom-color: transparent; transition: border-color .25s; }
.home .site-header::before { opacity: 0; transition: opacity .25s; }
.home .site-header.solid, body.menu-open .site-header { border-bottom-color: var(--line); }
.home .site-header.solid::before, body.menu-open .site-header::before { opacity: 1; }

/* Hero */
.hero { position: relative; height: 100vh; height: 100svh; min-height: 560px; display: grid; align-items: end; overflow: hidden; isolation: isolate; }
.hero-media { position: absolute; inset: 0; z-index: -2; }
.hero-media video, .hero-media img { width: 100%; height: 100%; object-fit: cover; }
/* The footage is dark and flat; lift it so the lights and people pop. */
.hero-media video { filter: brightness(1.3) contrast(1.35) saturate(1.35); }
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(180deg, rgba(9,9,10,0.55) 0, rgba(9,9,10,0) 18%, rgba(9,9,10,0) 45%, rgba(9,9,10,0.45) 78%, var(--night) 100%),
    linear-gradient(90deg, rgba(9,9,10,0.5), rgba(9,9,10,0) 55%);
}
.hero-content { padding-block: 120px clamp(48px, 7vh, 88px); }
.hero h1 { max-width: 22ch; }
.hero .lede { margin-top: 22px; color: var(--sand); opacity: .9; max-width: 64ch; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 14px 18px; margin-top: 34px; }
.video-toggle {
  position: absolute; right: var(--gutter); bottom: 24px; width: 44px; height: 44px; border-radius: 50%;
  border: 1px solid rgba(243,232,214,.35); background: rgba(9,9,10,.45); cursor: pointer;
  display: grid; place-items: center;
}
.video-toggle svg { width: 16px; height: 16px; }
@media (max-width: 640px) {
  .hero { min-height: 600px; }
  .hero-content { padding-bottom: 96px; }
  .hero-actions .btn { flex: 1 1 100%; }
  .video-toggle { bottom: 28px; top: auto; }
}

/* Proof strip */
/* Awards ticker: one quiet band under the hero that scrolls endlessly.
   Items alternate between solid and outlined type for a bit of rhythm. */
.ticker {
  display: block; overflow: hidden; text-decoration: none;
  border-block: 1px solid var(--line); background: var(--night);
  /* A slight upward lean, like the logo. Wider than the screen so the ends never show. */
  position: relative; z-index: 2; width: 106vw; margin-left: -3vw; transform: rotate(-1.4deg);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.ticker-track { display: flex; width: max-content; animation: ticker 60s linear infinite; }
.ticker-run { display: flex; align-items: center; flex: none; }
.ticker-run span { white-space: nowrap; }
.ticker-run > span:not(.ticker-star) {
  font-family: var(--display); font-style: italic; font-size: clamp(15px, 1.4vw, 19px); line-height: 1;
  padding-block: clamp(16px, 1.6vw, 20px); text-transform: uppercase; letter-spacing: .02em; color: var(--sand);
}
.ticker-years { color: var(--c-lighting) !important; }
.ticker-star { color: var(--c-lighting); font-size: 12px; padding-inline: clamp(18px, 2.2vw, 32px); }
@keyframes ticker { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .ticker-track { animation: none; } }

/* Sections */
/* One even rhythm: every section gets half the gap above and half below,
   so the space between any two sections is always the same. */
:root { --space: clamp(64px, 6vw, 96px); }
.section { padding-block: calc(var(--space) / 2); }
.ticker + .section { padding-top: calc(var(--space) * 1.4); }
main > :last-child { padding-bottom: var(--space); }
.section-head { display: grid; gap: 18px; margin-bottom: clamp(36px, 5vw, 56px); }
.section-head.split { grid-template-columns: 1fr auto; align-items: end; gap: 24px; }
@media (max-width: 720px) { .section-head.split { grid-template-columns: 1fr; } }

/* Service tiles: dark panels washed from below in their own color. */
.services-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 14px; }
.tile {
  --c: var(--sand);
  position: relative; overflow: hidden; isolation: isolate;
  grid-column: span 2; min-height: 236px; padding: 26px;
  display: flex; flex-direction: column; justify-content: space-between; gap: 20px;
  background: var(--dusk); border-radius: var(--radius-lg); text-decoration: none;
}
.tile:nth-child(-n+2) { grid-column: span 3; min-height: 280px; }
.tile::after {
  content: ""; position: absolute; z-index: -1; left: 50%; bottom: -55%; width: 120%; aspect-ratio: 1.6;
  transform: translateX(-50%);
  background: radial-gradient(closest-side, color-mix(in srgb, var(--c) 55%, transparent), transparent);
  opacity: .55; transition: opacity .25s, bottom .25s;
}
.tile:hover::after, .tile:focus-visible::after { opacity: .9; bottom: -45%; }
.tile svg { width: 34px; height: 34px; color: var(--c); }
.tile h3 { margin-bottom: 8px; }
.tile p { color: var(--haze); font-size: 16px; line-height: 1.5; }
.tile[data-c="weddings"] { --c: var(--c-weddings); }
.tile[data-c="corporate"] { --c: var(--c-corporate); }
.tile[data-c="lighting"] { --c: var(--c-lighting); }
.tile[data-c="av"] { --c: var(--c-av); }
.tile[data-c="music"] { --c: var(--c-music); }
@media (max-width: 900px) {
  .services-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .tile, .tile:nth-child(-n+2) { grid-column: span 1; min-height: 190px; padding: 20px; }
  .tile:first-child { grid-column: span 2; }
  .tile p { display: none; }
  .tile:first-child p { display: block; }
  .tile svg { width: 28px; height: 28px; }
}

/* About */
.about { display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(32px, 6vw, 88px); align-items: center; }
.about-photo { border-radius: var(--radius-lg); overflow: hidden; aspect-ratio: 4 / 5; }
.about-photo img { width: 100%; height: 100%; object-fit: cover; }
.about-copy { display: grid; gap: 22px; }
@media (max-width: 820px) { .about { grid-template-columns: 1fr; } .about-photo { aspect-ratio: 4 / 3; } }

/* Logos and venues */
.logos { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 28px 40px; padding: 0; margin: 0; list-style: none; }
.logos img { height: 38px; width: auto; filter: brightness(0) invert(92%) sepia(12%) saturate(330%) hue-rotate(345deg); opacity: .78; }
.logos li:nth-child(4) img { height: 52px; }
.logos img.boxed { filter: grayscale(1) contrast(1.05); opacity: .8; border-radius: 4px; }
.logos img[src*="vogue"] { height: 28px; }
/* Home page: logos rest dimmed and light up as the cursor passes over them. */
@media (hover: hover) {
  .logos-glow img, .logos-glow img.boxed { opacity: .28; transition: opacity .35s, filter .35s, transform .35s; }
  .logos-glow li:hover img { opacity: 1; transform: scale(1.06); filter: brightness(0) invert(1); }
  .logos-glow li:hover img.boxed { filter: grayscale(1) brightness(1.4); }
  .logos-glow li { padding: 14px 6px; }
}
@media (max-width: 640px) {
  .logos { display: grid; grid-template-columns: repeat(3, 1fr); justify-items: center; gap: 30px 18px; }
  .logos img { height: 30px; max-width: 100%; }
  .logos li:nth-child(4) img { height: 42px; }
}
.rail {
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(240px, 1fr); gap: 14px;
  overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 14px; margin: 0; list-style: none; padding-left: 0;
  scrollbar-width: thin; scrollbar-color: var(--dusk-2) transparent;
}
.rail > * { scroll-snap-align: start; }
@media (max-width: 640px) { .rail { grid-auto-columns: 76%; margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter); scroll-padding-inline: var(--gutter); } }
.venue figure { margin: 0; }
.venue img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius-sm); }
.venue figcaption { margin-top: 10px; font-weight: 600; }

/* Testimonials */
.quotes { grid-auto-columns: minmax(320px, 1fr); }
@media (min-width: 1000px) { .quotes { grid-auto-columns: calc((100% - 28px) / 3); } }
.quote { background: var(--dusk); border-radius: var(--radius-lg); padding: 28px; display: flex; flex-direction: column; gap: 18px; }
.quote blockquote { margin: 0; }
.quote .pull { font-size: 22px; line-height: 1.3; font-weight: 600; letter-spacing: -0.01em; }
.quote details { color: var(--haze); font-size: 16px; }
.quote summary { cursor: pointer; font-weight: 600; color: var(--sand); width: max-content; text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--line); }
.quote summary::-webkit-details-marker { display: none; }
.quote summary { list-style: none; }
.quote details[open] summary { margin-bottom: 10px; }
.quote footer { margin-top: auto; display: flex; justify-content: space-between; gap: 12px; color: var(--haze); font-size: 15px; border-top: 1px solid var(--line); padding-top: 16px; }
.quote footer cite { font-style: normal; font-weight: 600; color: var(--sand); }
.rail-controls { display: flex; gap: 10px; }
.rail-controls button { width: 48px; height: 48px; border-radius: 50%; border: 1px solid var(--line); background: none; cursor: pointer; display: grid; place-items: center; }
.rail-controls button:hover { border-color: var(--sand); }
.rail-controls svg { width: 20px; height: 20px; }
@media (max-width: 720px) { .rail-controls { display: none; } }

/* Closing call to action */


/* Footer */

/* Sticky phone bar */
.call-bar { display: none; }
@media (max-width: 720px) {
  .call-bar {
    display: grid; grid-template-columns: 1fr 1.4fr; gap: 8px;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
    padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
    background: rgba(9,9,10,.92); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
    border-top: 1px solid var(--line);
    transform: translateY(110%); transition: transform .2s;
  }
  .call-bar.show { transform: none; }
  .call-bar .btn { min-height: 48px; padding: 0 14px; font-size: 16px; }
  body.has-call-bar .site-footer { padding-bottom: 110px; }
}

/* Page heads (inner pages) */
.page-head { padding-block: clamp(56px, 9vw, 112px) clamp(32px, 5vw, 56px); display: grid; gap: 22px; }
.page-head h1 { font-size: clamp(32px, 5vw, 64px); max-width: 18ch; }
.jump { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 0; padding: 0; list-style: none; }
.jump a { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--line); text-decoration: none; font-weight: 500; font-size: 15px; }
.jump a::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--c, var(--sand)); }
.jump a:hover { border-color: var(--sand); }

/* Services page */
.service { --c: var(--sand); padding-block: clamp(56px, 8vw, 96px); border-top: 1px solid var(--line); }
.service[data-c="weddings"] { --c: var(--c-weddings); }
.service[data-c="corporate"] { --c: var(--c-corporate); }
.service[data-c="lighting"] { --c: var(--c-lighting); }
.service[data-c="av"] { --c: var(--c-av); }
.service[data-c="music"] { --c: var(--c-music); }
.service-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 6vw, 80px); align-items: start; }
.service-copy { display: grid; gap: 20px; }
.service-copy > svg { width: 40px; height: 40px; color: var(--c); }
.service-photo { position: relative; border-radius: var(--radius-lg); overflow: hidden; aspect-ratio: 4 / 3; }
.service-photo img { width: 100%; height: 100%; object-fit: cover; }
.service-photo::after { content: ""; position: absolute; inset: auto 0 0; height: 4px; background: var(--c); }
.service-list { list-style: none; padding: 0; margin: 4px 0 0; display: grid; grid-template-columns: 1fr 1fr; gap: 0 24px; }
.service-list li { padding: 12px 0; border-bottom: 1px solid var(--line); font-weight: 500; display: flex; gap: 10px; align-items: baseline; }
.service-list li::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--c); flex: none; transform: translateY(-2px); }
.gear { margin-top: 8px; border-radius: var(--radius-lg); background: var(--dusk); padding: 24px 26px; }
.gear h3 { font-size: 22px; margin-bottom: 4px; }
.gear dl { margin: 12px 0 0; display: grid; grid-template-columns: auto 1fr; gap: 0 24px; }
.gear dt, .gear dd { margin: 0; padding: 11px 0; border-top: 1px solid var(--line); }
.gear dt { font-weight: 600; }
.gear dd { color: var(--haze); }
@media (max-width: 820px) {
  .service-grid { grid-template-columns: 1fr; }
  .service-photo { order: -1; }
  .gear dl { grid-template-columns: 1fr; }
  .gear dd { border-top: 0; padding-top: 0; }
}
@media (max-width: 420px) { .service-list { grid-template-columns: 1fr; } }
.brands { margin-top: clamp(40px, 6vw, 64px); display: grid; gap: 26px; }
.brands h3, .venues h3 { font-size: 22px; }
.venues { margin-top: clamp(40px, 6vw, 64px); display: grid; gap: 20px; }

/* Gallery */
.filters { display: flex; flex-wrap: wrap; gap: 8px; }
.filters button { min-height: 44px; padding: 0 18px; border-radius: 999px; border: 1px solid var(--line); background: none; cursor: pointer; font-weight: 600; display: inline-flex; align-items: center; gap: 8px; }
.filters button::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--c, var(--sand)); }
.filters button[aria-pressed="true"] { background: var(--sand); color: var(--night); border-color: var(--sand); }
.filters button:hover { border-color: var(--sand); }
.gallery { columns: 3 300px; column-gap: 14px; margin-top: 28px; }
.gallery button { display: block; width: 100%; padding: 0; margin: 0 0 14px; border: 0; background: var(--dusk); border-radius: var(--radius-sm); overflow: hidden; cursor: zoom-in; break-inside: avoid; }
.gallery img { width: 100%; transition: transform .35s; }
.gallery button:hover img { transform: scale(1.03); }
.gallery button[hidden] { display: none; }
@media (max-width: 640px) { .gallery { columns: 2; column-gap: 8px; } .gallery button { margin-bottom: 8px; } }
.lightbox { padding: 0; border: 0; background: transparent; max-width: 100vw; max-height: 100vh; width: 100vw; height: 100svh; }
.lightbox::backdrop { background: rgba(4,3,8,.95); }
.lightbox-inner { position: relative; width: 100%; height: 100%; display: grid; grid-template-rows: 1fr auto; padding: 64px 16px 20px; }
.lightbox figure { margin: 0; display: grid; place-items: center; min-height: 0; }
.lightbox img { max-width: 100%; max-height: calc(100svh - 150px); width: auto; border-radius: 8px; }
.lightbox figcaption { text-align: center; color: var(--haze); padding-top: 14px; font-size: 15px; }
.lb-btn { position: absolute; width: 52px; height: 52px; border-radius: 50%; border: 1px solid rgba(243,232,214,.3); background: rgba(9,9,10,.6); cursor: pointer; display: grid; place-items: center; }
.lb-btn svg { width: 22px; height: 22px; }
.lb-close { top: 10px; right: 12px; }
.lb-prev { left: 16px; top: 50%; transform: translateY(-50%); }
.lb-next { right: 16px; top: 50%; transform: translateY(-50%); }
@media (max-width: 640px) { .lb-prev, .lb-next { top: auto; bottom: 16px; transform: none; } .lightbox figcaption { padding-inline: 64px; } }

/* Contact */
.contact { display: grid; grid-template-columns: 1fr 1.25fr; gap: clamp(36px, 6vw, 88px); align-items: start; padding-bottom: clamp(72px, 10vw, 120px); }
.contact-aside { display: grid; gap: 26px; position: sticky; top: 104px; }
/* Left side: the neon sign photo, with the phone number sitting on it. */
.contact-aside { gap: 0; border-radius: var(--radius-lg); overflow: hidden; background: #000; }
.contact-photo { position: relative; margin: 0; aspect-ratio: 4 / 5; }
.contact-photo img { width: 100%; height: 100%; object-fit: cover; object-position: center 40%; }
.contact-photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(0,0,0,0) 70%, #000 100%); }
.contact-call { position: relative; margin-top: -28px; padding: 0 clamp(22px, 3vw, 34px) clamp(24px, 3vw, 34px); display: grid; gap: 14px; justify-items: start; }
.contact-call-k { font-family: var(--display); font-style: italic; font-size: clamp(26px, 2.6vw, 34px); line-height: 1; }
.contact-call .btn svg { color: var(--bulb); }
.contact-call-note { color: var(--haze); font-size: 15px; max-width: 34ch; }
@media (max-width: 860px) { .contact { grid-template-columns: 1fr; } .contact-aside { position: static; order: 2; } .contact-photo { aspect-ratio: 4 / 3; } }
.form-card { background: var(--dusk); border-radius: var(--radius-lg); padding: clamp(24px, 4vw, 40px); }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 16px; }
.field { display: grid; gap: 8px; }
.field.full { grid-column: 1 / -1; }
.field label { font-weight: 600; font-size: 15px; }
.field label span { color: var(--haze); font-weight: 400; }
.field input, .field select, .field textarea {
  width: 100%; min-height: 52px; padding: 12px 14px; border-radius: var(--radius-sm);
  border: 1px solid rgba(243,232,214,.22); background: var(--night); color: var(--sand);
  font: inherit; font-size: 17px;
}
.field textarea { min-height: 150px; resize: vertical; }
.field select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f3e8d6' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; background-size: 18px; padding-right: 42px; }
.field input::placeholder, .field textarea::placeholder { color: rgba(170,164,155,.7); }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--bulb); box-shadow: 0 0 0 3px rgba(255,201,60,.25); }
input[type="date"]::-webkit-calendar-picker-indicator { filter: invert(.9); }
.form-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; margin-top: 24px; }
.form-foot p { font-size: 15px; color: var(--haze); }
@media (max-width: 560px) { .form-grid { grid-template-columns: 1fr; } .form-foot .btn { width: 100%; } }
.form-fail { display: none; border-radius: var(--radius-sm); padding: 22px; margin-top: 18px; background: color-mix(in srgb, var(--c-weddings) 18%, var(--dusk)); }

/* Big tappable choices (event type and add-ons): slanted like the site's buttons. */
.chip-set { border: 0; padding: 0; margin: 0 0 26px; min-width: 0; }
.chip-set legend { font-weight: 600; font-size: 15px; margin-bottom: 12px; padding: 0; }
.chip-set legend span { color: var(--haze); font-weight: 400; }
.chips { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.chip { position: relative; cursor: pointer; }
.chip input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.chip span { position: relative; display: grid; place-items: center; min-height: 54px; padding: 8px 12px; text-align: center; font-weight: 600; font-size: 15px; line-height: 1.2; transition: color .2s; }
.chip span::before { content: ""; position: absolute; inset: 0; z-index: -1; transform: skewX(-12deg); border: 1px solid rgba(243,232,214,.22); background: var(--night); transition: background .2s, border-color .2s; }
.chip span { z-index: 0; }
.chip:hover span::before { border-color: rgba(243,232,214,.55); }
.chip input:checked + span { color: var(--night); }
.chip input:checked + span::before { background: var(--sand); border-color: var(--sand); }
.chip input:focus-visible + span::before { outline: 3px solid var(--bulb); outline-offset: 3px; }
@media (max-width: 560px) { .chips { grid-template-columns: 1fr 1fr; } }

/* After sending: a full-screen "you're in" moment with a slow bass pulse. */
.form-done { display: none; position: fixed; inset: 0; z-index: 200; background: rgba(9,9,10,.97); place-items: center; padding: 24px; overflow: hidden; text-align: center; outline: none; }
.form-done[style*="block"] { display: grid !important; animation: done-in .5s ease both; }
.done-inner { position: relative; display: grid; justify-items: center; gap: 18px; max-width: 520px; }
.done-inner img { width: 120px; height: auto; opacity: .95; }
.done-inner h2 { font-size: clamp(48px, 8vw, 96px); line-height: .95; }
.done-inner p { color: var(--haze); font-size: 18px; }
.done-inner p a { color: var(--sand); }
.done-actions { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; margin-top: 8px; }
.done-rings { position: absolute; left: 50%; top: 50%; width: 0; height: 0; }
.done-rings i { position: absolute; left: 50%; top: 50%; width: 60vmin; height: 60vmin; margin: -30vmin 0 0 -30vmin; border-radius: 50%; border: 1px solid rgba(255,201,60,.35); box-shadow: 0 0 60px rgba(255,201,60,.12) inset; animation: done-pulse 3.6s cubic-bezier(.2,.6,.3,1) infinite; opacity: 0; }
.done-rings i:nth-child(2) { animation-delay: 1.2s; border-color: rgba(255,82,119,.3); }
.done-rings i:nth-child(3) { animation-delay: 2.4s; border-color: rgba(120,150,255,.3); }
@keyframes done-pulse { 0% { transform: scale(.35); opacity: 0; } 15% { opacity: 1; } 100% { transform: scale(1.9); opacity: 0; } }
@keyframes done-in { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .done-rings i { animation: none; opacity: .4; } .form-done[style*="block"] { animation: none; } }
body.sent { overflow: hidden; }

/* 404 */
.not-found { min-height: 60svh; display: grid; align-content: center; gap: 22px; padding-block: 80px; }
.field [aria-invalid="true"] { border-color: var(--c-weddings); box-shadow: 0 0 0 3px rgba(255,82,119,.25); }

/* Services lineup (home page): the five services as big slanted names, like a
   festival lineup. Pointing at one shows a real photo from that kind of event. */
.lineup { display: grid; grid-template-columns: 1.25fr 1fr; gap: clamp(32px, 5vw, 72px); align-items: center; }
.lineup-list { list-style: none; margin: 0; padding: 0; }
.lineup-more { margin-top: 36px; }
.lineup-item { display: block; padding: 6px 0; text-decoration: none; }
.lineup-thumb { display: none; }
/* The highlighted service's description opens up under its name. */
.lineup-short {
  display: block; max-width: 620px; color: var(--haze); font-size: 18px; line-height: 1.45;
  max-height: 0; opacity: 0; overflow: hidden; transition: max-height .35s, opacity .35s, margin .35s;
}
.lineup-item.active .lineup-short { max-height: 60px; opacity: 1; margin: 4px 0 10px; }
.lineup-name {
  display: inline-block; font-family: var(--display); font-style: italic;
  font-size: clamp(36px, 4.6vw, 68px); line-height: 1.08; letter-spacing: -0.015em; white-space: nowrap;
  color: rgba(243, 232, 214, 0.22); transition: color .25s;
}
.lineup-item.active .lineup-name, .lineup-item:focus-visible .lineup-name { color: var(--sand); }
/* The photo card tilts toward the cursor like a 3D card, with a light sheen that follows it. */
.lineup-stage { perspective: 1100px; }
.lineup-frame {
  position: relative; aspect-ratio: 4 / 5; border-radius: var(--radius-lg); overflow: hidden; background: var(--dusk);
  transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) scale(var(--s, 1));
  transition: transform .5s cubic-bezier(.2,.8,.2,1), box-shadow .5s;
  box-shadow: 0 30px 60px -30px rgba(0,0,0,.8);
  will-change: transform;
}
.lineup-frame.tilting { transition: transform .25s ease-out, box-shadow .3s; box-shadow: 0 50px 90px -35px rgba(0,0,0,.95); }
.lineup-frame::after {
  content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; opacity: 0; transition: opacity .3s;
  background: radial-gradient(60% 50% at var(--gx, 50%) var(--gy, 50%), rgba(255,255,255,.22), transparent 70%);
  mix-blend-mode: soft-light;
}
.lineup-frame.tilting::after { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .lineup-frame { transform: none !important; } }
.lineup-photo { position: absolute; inset: 0; margin: 0; opacity: 0; transition: opacity .45s; }
.lineup-photo.active { opacity: 1; }
.lineup-photo img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.04); transition: transform 1.2s; }
.lineup-photo::after { content: ""; position: absolute; inset: auto 0 0; height: 30%; background: linear-gradient(180deg, transparent, rgba(9,9,10,.55)); }
.lineup-photo.active img { transform: scale(1); }

@media (prefers-reduced-motion: reduce) { .lineup-photo, .lineup-photo img { transition: none; } }
@media (max-width: 820px) {
  .lineup { grid-template-columns: 1fr; }
  .lineup-frame, .lineup-stage { display: none; }
  .lineup-more { width: 100%; margin-top: 24px; }
  .lineup-list { border-top: 1px solid var(--line); }
  .lineup-item { display: grid; grid-template-columns: 72px 1fr; grid-template-rows: auto auto; column-gap: 16px; align-items: center; padding: 14px 0; border-bottom: 1px solid var(--line); }
  .lineup-thumb { display: block; grid-row: 1 / 3; width: 72px; height: 72px; border-radius: var(--radius-sm); overflow: hidden; }
  .lineup-thumb img { width: 100%; height: 100%; object-fit: cover; }
  .lineup-name { font-size: 26px; white-space: normal; color: var(--sand); align-self: end; }
  .lineup-short, .lineup-item.active .lineup-short { display: block; max-height: none; opacity: 1; margin: 4px 0 0; color: var(--haze); font-size: 15px; line-height: 1.4; align-self: start; }
}


/* Meet DJ Zephyr (home page): his photo at the decks on the left, the story on the right. */
.meet { position: relative; padding-block: calc(var(--space) / 2) 0; }
.meet-inner { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 80px); align-items: center; }
.meet-copy { display: grid; gap: 24px; justify-items: start; }
.meet-copy h2 { font-size: clamp(40px, 5vw, 68px); }
.meet .lede { color: rgba(243, 232, 214, 0.86); }
.meet-facts { list-style: none; margin: 4px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, auto); gap: 28px; }
.meet-facts li { display: grid; gap: 6px; max-width: 16ch; }
.meet-facts strong { font-family: var(--display); font-style: italic; font-weight: 400; font-size: clamp(30px, 3vw, 40px); line-height: 1; }
.meet-facts span { font-size: 15px; line-height: 1.35; color: rgba(243, 232, 214, 0.8); }
@media (max-width: 820px) {
  .meet-inner { grid-template-columns: 1fr; gap: 28px; }
    .meet-facts { grid-template-columns: 1fr 1fr 1fr; gap: 16px; }
  .meet-facts strong { font-size: 28px; }
  .meet-facts span { font-size: 13px; }
  .meet .btn { width: 100%; }
}

/* Reviews: one big quote at a time in the logo type, crossfading through them. */
.spot-title { font-family: var(--font); font-style: normal; font-size: 15px; font-weight: 500; letter-spacing: 0; color: var(--haze); margin-bottom: 22px; }
.spot-stage { display: grid; }
.spot-quote { grid-area: 1 / 1; margin: 0; opacity: 0; transform: translateY(10px); transition: opacity .6s, transform .6s; pointer-events: none; }
.spot-quote.active { opacity: 1; transform: none; pointer-events: auto; }
.spot-quote blockquote { margin: 0; }
.spot-quote p { font-family: var(--display); font-style: italic; font-size: clamp(28px, 3.6vw, 50px); line-height: 1.08; max-width: 26ch; text-wrap: balance; color: var(--sand); }
.spot-quote figcaption { margin-top: 22px; color: var(--haze); font-size: 17px; }
.spot-quote cite { font-style: normal; font-weight: 600; color: var(--sand); }
.spot-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px; margin-top: clamp(32px, 4vw, 48px); padding-top: 24px; border-top: 1px solid var(--line); }
.spot-picks { display: flex; flex-wrap: wrap; gap: 6px 22px; list-style: none; margin: 0; padding: 0; }
.spot-picks button { background: none; border: 0; padding: 6px 0; cursor: pointer; font-size: 16px; font-weight: 500; color: var(--haze); position: relative; }
.spot-picks button:hover { color: var(--sand); }
.spot-picks button[aria-pressed="true"] { color: var(--sand); }
.spot-picks button[aria-pressed="true"]::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--c-lighting); transform-origin: left; animation: spot-progress var(--spot-time, 4.5s) linear forwards; }
.spotlight.paused .spot-picks button[aria-pressed="true"]::after { animation: none; }
@keyframes spot-progress { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@media (prefers-reduced-motion: reduce) { .spot-quote { transition: none; } .spot-picks button[aria-pressed="true"]::after { animation: none; } }
@media (max-width: 560px) { .spot-foot .btn { width: 100%; white-space: normal; text-align: center; } }

/* Meet -> brands -> reviews: one even gap between each, measured from what you see. */
.meet { padding-bottom: 0; }
.meet + .spotlight { padding-top: var(--space); }
/* Brand logos sit between the services and Meet DJ Zephyr. */
.brand-strip { padding-block: calc(var(--space) * 1.35) 0; }
.brand-strip .logos { padding-top: 8px; }
.brand-strip + .meet { padding-top: calc(var(--space) * .9); }
.spot-quote p { max-width: 30ch; }
.spot-foot { border-top: 0; padding-top: 0; }
/* Crossfade: the old quote leaves quickly before the new one arrives, so they never overlap. */
.spot-quote { transition: opacity .25s ease, transform .25s ease; }
.spot-quote.active { transition: opacity .45s ease .25s, transform .45s ease .25s; }

/* Closing: a calm, centered sign-off after the loud quote above. */
.closing { position: relative; isolation: isolate; overflow: hidden; padding-block: calc(var(--space) * 1.1) calc(var(--space) * 1.2); }
.closing-inner { display: grid; justify-items: center; text-align: center; gap: 18px; position: relative; }
/* Bass rings: outlined circles that thump and ripple out from behind the logo. */
.bass { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; pointer-events: none;
  -webkit-mask-image: radial-gradient(closest-side, #000 50%, transparent); mask-image: radial-gradient(closest-side, #000 50%, transparent); }
.closing-logo { width: 110px; opacity: .9; margin-bottom: 10px; }
.closing h2 { font-size: clamp(30px, 3.6vw, 46px); }
.closing .lede { max-width: 44ch; }
.closing-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px 18px; margin-top: 10px; }
.closing-email { color: var(--haze); font-size: 16px; text-decoration: none; margin-top: 6px; }
.closing-email:hover { color: var(--sand); }
@media (max-width: 560px) { .closing-actions { width: 100%; } .closing-actions .btn { flex: 1 1 100%; } }
main > .closing:last-child { padding-bottom: calc(var(--space) * 1.2); }

/* Footer: one thin line. */
.site-footer { border-top: 1px solid var(--line); padding-block: 26px; color: var(--haze); font-size: 14px; }
.footer-line { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 32px; }
.footer-line p { max-width: none; }
.footer-nav { display: flex; flex-wrap: wrap; gap: 8px 24px; }
.site-footer a { text-decoration: none; color: var(--haze); }
.site-footer a:hover { color: var(--sand); }
@media (max-width: 720px) { body.has-call-bar .site-footer { padding-bottom: 100px; } }

/* Phones: services become swipeable photo cards. */
@media (max-width: 820px) {
  .lineup-list { display: grid; grid-auto-flow: column; grid-auto-columns: 78%; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; border-top: 0;
    margin-inline: calc(-1 * var(--gutter)); padding: 0 var(--gutter) 6px; scroll-padding-inline: var(--gutter); scrollbar-width: none; }
  .lineup-list::-webkit-scrollbar { display: none; }
  .lineup-list li { scroll-snap-align: start; }
  .lineup-item { display: flex; flex-direction: column; gap: 6px; padding: 0 0 4px; border: 0; }
  .lineup-thumb { width: 100%; height: auto; aspect-ratio: 4 / 5; border-radius: var(--radius-lg); margin-bottom: 8px; }
  .lineup-name { font-size: 26px; }
}
/* Phones: review names scroll sideways on one line instead of wrapping. */
@media (max-width: 560px) {
  .spot-picks { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter); }
  .spot-picks::-webkit-scrollbar { display: none; }
  .spot-picks li { flex: none; }
}
.lineup-left { min-width: 0; }
@media (max-width: 820px) {
  .lineup { display: block; }
  .lineup-list { width: auto; }
  .lineup-item .lineup-name { display: block; order: 2; }
  .lineup-item .lineup-short { order: 3; }
  .lineup-item .lineup-thumb { order: 1; }
}
@media (max-width: 820px) { .lineup-item .lineup-name { align-self: flex-start; } }
/* Home logo band: slightly bigger logos */
.brand-strip .logos img { height: 46px; }
.brand-strip .logos li:nth-child(4) img { height: 62px; }
.brand-strip .logos img[src*="vogue"] { height: 34px; }
@media (max-width: 640px) { .brand-strip .logos img { height: 34px; } .brand-strip .logos li:nth-child(4) img { height: 48px; } .brand-strip .logos img[src*="vogue"] { height: 26px; } }

/* Dance-floor glows: a few huge, faint colored lights spread down the page,
   drifting very slowly. They sit behind everything and stay toward the sides. */
body { position: relative; }
.glows { position: absolute; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.glows i {
  position: absolute; width: 70vmax; height: 70vmax; border-radius: 50%;
  background: radial-gradient(closest-side, var(--g), transparent 70%);
  opacity: .11; transform: translate(-50%, -50%); will-change: transform;
  animation: glow-drift var(--d) ease-in-out infinite alternate;
}
.glows i:nth-child(1) { --g: #ff5277; left: 2%;  top: 26%; --d: 31s; --x: 6vw;  --y: 4vh; }
.glows i:nth-child(2) { --g: #2fc2ff; left: 98%; top: 36%; --d: 37s; --x: -7vw; --y: 6vh; }
.glows i:nth-child(3) { --g: #ffc93c; left: 4%;  top: 50%; --d: 27s; --x: 5vw;  --y: -5vh; }
.glows i:nth-child(4) { --g: #ffc93c; left: 96%; top: 60%; --d: 41s; --x: -5vw; --y: -4vh; opacity: .07; }
.glows i:nth-child(5) { --g: #ff5277; left: 92%; top: 74%; --d: 34s; --x: -6vw; --y: 5vh; }
.glows i:nth-child(6) { --g: #2fc2ff; left: 6%;  top: 84%; --d: 29s; --x: 7vw;  --y: -6vh; }
.glows i:nth-child(7) { --g: #2fc2ff; left: 60%; top: 96%; --d: 38s; --x: -4vw; --y: -5vh; opacity: .08; }
@keyframes glow-drift {
  from { transform: translate(-50%, -50%) scale(1); }
  to   { transform: translate(calc(-50% + var(--x)), calc(-50% + var(--y))) scale(1.08); }
}
@media (prefers-reduced-motion: reduce) { .glows i { animation: none; } }
@media (max-width: 720px) { .glows i { width: 110vmax; height: 110vmax; opacity: .09; } }

/* ---------- Services page: text scrolls on the left, one big photo stays on the right ---------- */
.svc-head { padding-bottom: clamp(16px, 3vw, 40px); }
.svc-scroll { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(40px, 6vw, 96px); align-items: start; }
.svc-step { --c: var(--sand); min-height: 78vh; display: flex; flex-direction: column; justify-content: center; gap: 22px; padding-block: 8vh; }
.svc-step[data-c="weddings"] { --c: var(--c-weddings); }
.svc-step[data-c="corporate"] { --c: var(--c-corporate); }
.svc-step[data-c="lighting"] { --c: var(--c-lighting); }
.svc-step[data-c="av"] { --c: var(--c-av); }
.svc-step[data-c="music"] { --c: var(--c-music); }
.svc-step h2 { font-size: clamp(40px, 5.2vw, 72px); color: rgba(243,232,214,.25); transition: color .4s; }
.svc-step.active h2 { color: var(--sand); }
.svc-step .lede { max-width: 46ch; }
.svc-step-photo { display: none; }
.svc-stage { position: sticky; top: 96px; height: calc(100vh - 136px); min-height: 420px; border-radius: var(--radius-lg); overflow: hidden; background: var(--dusk);
  box-shadow: 0 40px 80px -40px rgba(0,0,0,.9); }
.svc-frame { position: absolute; inset: 0; margin: 0; opacity: 0; transition: opacity .6s; }
.svc-frame.active { opacity: 1; }
.svc-frame img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.05); transition: transform 1.4s; }
.svc-frame.active img { transform: scale(1); }
@media (prefers-reduced-motion: reduce) { .svc-frame, .svc-frame img, .svc-step h2 { transition: none; } }

/* Tags for lighting, A/V and live music */
.svc-tags { display: flex; flex-wrap: wrap; gap: 10px; list-style: none; margin: 4px 0 0; padding: 0; }
.svc-tags li { padding: 8px 14px; border: 1px solid var(--line); border-radius: 4px; font-size: 15px; font-weight: 500; }
.svc-tags li::before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--c); margin-right: 9px; vertical-align: 1px; }

/* The Love Package as a DJ's equipment rider */
.rider { max-width: 520px; margin-top: 6px; border-top: 2px solid var(--sand); }
.rider-head { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 14px 0 10px; }
.rider-head h3 { font-size: 22px; }
.rider-head span { font-size: 14px; color: var(--haze); }
.rider ul { list-style: none; margin: 0; padding: 0; }
.rider li { display: flex; align-items: baseline; gap: 10px; padding: 11px 0; border-top: 1px solid var(--line); font-size: 15px; }
.rider-item { font-weight: 600; white-space: nowrap; }
.rider-dots { flex: 1; border-bottom: 1px dotted rgba(243,232,214,.25); transform: translateY(-4px); min-width: 20px; }
.rider-spec { color: var(--haze); text-align: right; }

.svc-brands { display: grid; gap: 16px; margin-top: 10px; }
.svc-brands h3 { font-family: var(--font); font-style: normal; font-size: 14px; font-weight: 500; color: var(--haze); }
.svc-brands .logos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px 28px; justify-items: start; }
.svc-brands .logos img { height: 28px; } .svc-brands .logos li:nth-child(4) img { height: 40px; } .svc-brands .logos img[src*="vogue"] { height: 22px; }

.svc-venues { padding-top: var(--space); }
.venue-rail { grid-auto-columns: minmax(280px, 1fr); }
@media (min-width: 1000px) { .venue-rail { grid-auto-columns: calc((100% - 42px) / 4); } }
.venue-rail .venue img { aspect-ratio: 4 / 5; border-radius: var(--radius-lg); }

@media (max-width: 900px) {
  .svc-scroll { grid-template-columns: 1fr; }
  .svc-stage { display: none; }
  .svc-step { min-height: 0; padding-block: 0 calc(var(--space) * .8); gap: 18px; }
  .svc-step h2 { color: var(--sand); }
  .svc-step-photo { display: block; border-radius: var(--radius-lg); overflow: hidden; aspect-ratio: 4 / 3; }
  .svc-step-photo img { width: 100%; height: 100%; object-fit: cover; }
  .rider-spec { font-size: 14px; }
}
@media (max-width: 480px) { .rider li { flex-wrap: wrap; } .rider-dots { display: none; } .rider-spec { width: 100%; text-align: left; } }

/* Services header: clean and centered, with one soft stage light slowly swaying down onto the title. */
.svc-hero { position: relative; padding-block: clamp(56px, 7vw, 104px) clamp(40px, 5vw, 64px); text-align: center; }
.svc-hero-inner { display: grid; justify-items: center; gap: 22px; }
.svc-hero h1 { font-size: clamp(40px, 6vw, 84px); max-width: 16ch; }
.svc-hero .lede { max-width: 52ch; }
.svc-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 26px; margin-top: 10px; }
.svc-links a { color: var(--haze); text-decoration: none; font-weight: 500; font-size: 16px; }
.svc-links a:hover { color: var(--sand); }
.svc-hero .filters { justify-content: center; margin-top: 10px; }
#gal-title ~ .lede { max-width: 64ch; }

/* ---------- Services: build your night ---------- */
.plan-step { padding-top: calc(var(--space) / 2); }
.plan-head { display: flex; align-items: center; gap: 16px; margin-bottom: 28px; }
.plan-n { width: 40px; height: 40px; flex: none; display: grid; place-items: center; transform: skewX(-12deg); border: 1.5px solid var(--sand); font-family: var(--display); font-style: italic; font-size: 20px; }
.plan-head h2 { font-size: clamp(28px, 3.4vw, 44px); }
.event-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.addon-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.pick-card { --c: var(--sand); display: flex; flex-direction: column; background: var(--dusk); border-radius: var(--radius-lg); overflow: hidden; border: 1.5px solid transparent; transition: border-color .25s, box-shadow .25s; }
.pick-card[data-c="weddings"] { --c: var(--c-weddings); } .pick-card[data-c="corporate"] { --c: var(--c-corporate); }
.pick-card[data-c="lighting"] { --c: var(--c-lighting); } .pick-card[data-c="av"] { --c: var(--c-av); } .pick-card[data-c="music"] { --c: var(--c-music); }
.pick-card.picked { border-color: var(--c); box-shadow: 0 0 0 4px color-mix(in srgb, var(--c) 18%, transparent); }
.pick-photo { aspect-ratio: 16 / 10; overflow: hidden; }
.addon-card .pick-photo { aspect-ratio: 4 / 3; }
.pick-photo img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s; }
.pick-card:hover .pick-photo img { transform: scale(1.03); }
.pick-body { display: flex; flex-direction: column; gap: 16px; padding: clamp(20px, 2.6vw, 30px); flex: 1; }
.pick-body h3 { font-size: clamp(26px, 2.6vw, 34px); }
.pick-body > p { color: var(--haze); max-width: 52ch; }
.pick-body h4 { font-family: var(--font); font-style: normal; font-size: 14px; font-weight: 600; letter-spacing: 0; margin: 0; }
.pick-btn { align-self: flex-start; margin-top: auto; }
.pick-card.picked .pick-btn::before { background: var(--c); border-color: var(--c); }
.pick-card.picked .pick-btn { color: var(--night); }
.pick-plus { font-weight: 700; font-size: 20px; line-height: 1; }
.event-card .rider { max-width: none; margin: 0; }
.event-card .svc-brands { margin: 0; }
.rider-head h4 { font-family: var(--display); font-style: italic; font-size: 20px; font-weight: 400; }
@media (max-width: 900px) { .event-grid, .addon-grid { grid-template-columns: 1fr; } }

/* How it works */
.how h2 { font-size: clamp(28px, 3.4vw, 44px); margin-bottom: 28px; }
.how-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; counter-reset: none; }
.how-steps li { display: grid; gap: 10px; align-content: start; padding-top: 18px; border-top: 1px solid var(--line); }
.how-n { font-family: var(--display); font-style: italic; font-size: 34px; line-height: 1; color: rgba(243,232,214,.35); }
.how-steps h3 { font-size: 22px; }
.how-steps p { color: var(--haze); font-size: 16px; }
@media (max-width: 900px) { .how-steps { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .how-steps { grid-template-columns: 1fr; } }

/* The plan bar: appears once something is picked */
.plan-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 35; background: rgba(9,9,10,.92); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-top: 1px solid var(--line); transform: translateY(110%); transition: transform .3s; }
.plan-bar.show { transform: none; }
.plan-bar[hidden] { display: block; visibility: hidden; }
.plan-bar.show[hidden] { visibility: visible; }
.plan-bar-inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-block: 12px calc(12px + env(safe-area-inset-bottom)); }
.plan-summary { font-weight: 600; max-width: none; }
.plan-summary span { color: var(--haze); font-weight: 500; }
.plan-actions { display: flex; align-items: center; gap: 18px; flex: none; }
.plan-clear { background: none; border: 0; color: var(--haze); cursor: pointer; font-size: 15px; text-decoration: underline; text-underline-offset: 4px; }
body.has-plan .call-bar { display: none; }
body.has-plan .site-footer { padding-bottom: 100px; }
@media (max-width: 560px) { .plan-bar-inner { flex-direction: column; align-items: stretch; gap: 10px; } .plan-actions { justify-content: space-between; } .plan-go { flex: 1; } }

/* Even card heights: tags are compact, the Love Package folds open, buttons sit on one line at the bottom. */
.pick-card .svc-tags { gap: 8px; }
.pick-card .svc-tags li { padding: 5px 11px; font-size: 14px; }
.addon-grid .pick-body > p { min-height: 4.8em; }
.rider-fold summary { list-style: none; cursor: pointer; }
.rider-fold summary::-webkit-details-marker { display: none; }
.rider-fold summary:hover span { color: var(--sand); }
.fold-icon { display: inline-grid; place-items: center; width: 22px; height: 22px; margin-left: 8px; border: 1px solid var(--line); border-radius: 50%; font-style: normal; font-size: 15px; line-height: 1; transition: transform .25s; }
.rider-fold[open] .fold-icon { transform: rotate(45deg); }
.rider-fold ul { padding-bottom: 4px; }

/* Love Package: the fold-out reads as a clear button */
.rider-fold summary.rider-head { align-items: center; }
.rider-toggle { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border: 1px solid rgba(243,232,214,.4); border-radius: 999px; font-size: 14px; font-weight: 600; color: var(--sand); transition: background .2s, border-color .2s; white-space: nowrap; }
.rider-fold summary:hover .rider-toggle { background: rgba(243,232,214,.08); border-color: var(--sand); }
.rider-toggle .fold-icon { margin: 0; width: auto; height: auto; border: 0; font-size: 18px; }
.rider-sub { display: block; font-family: var(--font); font-style: normal; font-size: 14px; font-weight: 400; color: var(--haze); margin-top: 4px; }

/* Brands: fading carousel, three logos at a time */
.brand-fade { position: relative; height: 64px; }
.brand-set { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(3, 1fr); align-items: center; justify-items: start; gap: 24px;
  list-style: none; margin: 0; padding: 0; opacity: 0; transition: opacity .8s ease; }
.brand-set.active { opacity: 1; }
.brand-set img { height: 30px; width: auto; filter: brightness(0) invert(92%) sepia(12%) saturate(330%) hue-rotate(345deg); opacity: .8; }
.brand-set img.boxed { filter: grayscale(1) contrast(1.05); }
.brand-set img[src*="jazz"] { height: 44px; } .brand-set img[src*="vogue"] { height: 24px; }
@media (prefers-reduced-motion: reduce) { .brand-set { transition: none; } }

/* Brands on the Corporate card: a slow, endless scrolling strip with soft edges */
.brand-scroll { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.brand-track { display: flex; width: max-content; animation: ticker 32s linear infinite; }
.brand-run { display: flex; align-items: center; list-style: none; margin: 0; padding: 0; flex: none; }
.brand-run li { flex: none; padding-inline: 26px; height: 56px; display: flex; align-items: center; }
.brand-run img { height: 28px; width: auto; filter: brightness(0) invert(92%) sepia(12%) saturate(330%) hue-rotate(345deg); opacity: .8; }
.brand-run img.boxed { filter: grayscale(1) contrast(1.05); }
.brand-run img[src*="jazz"] { height: 42px; } .brand-run img[src*="vogue"] { height: 22px; }
@media (prefers-reduced-motion: reduce) { .brand-track { animation: none; } }

/* Gallery viewer: the photos on a curve */
.curve { position: fixed; inset: 0; z-index: 100; background: radial-gradient(120% 90% at 50% 40%, #151517, #050506); }
.curve[hidden] { display: none; }
.curve-stage, .curve-stage canvas { position: absolute; inset: 0; width: 100% !important; height: 100% !important; }
.curve-stage canvas { cursor: grab; touch-action: none; }
.curve-stage canvas:active { cursor: grabbing; }
.curve-cap { position: absolute; left: 50%; bottom: 34px; transform: translateX(-50%); width: min(90%, 620px); text-align: center; color: var(--sand); font-size: 16px; }
.curve-count { position: absolute; left: calc(24px + env(safe-area-inset-left)); top: calc(26px + env(safe-area-inset-top)); color: var(--haze); font-size: 14px; font-variant-numeric: tabular-nums; }
.curve-btn { position: absolute; width: 52px; height: 52px; border-radius: 50%; border: 1px solid rgba(243,232,214,.3); background: rgba(9,9,10,.6); color: var(--sand); font-size: 26px; line-height: 1; cursor: pointer; display: grid; place-items: center; }
.curve-btn:hover { border-color: var(--sand); }
.curve-close { top: calc(16px + env(safe-area-inset-top)); right: calc(16px + env(safe-area-inset-right)); font-size: 18px; }
.curve-prev { left: 20px; top: 50%; transform: translateY(-50%); }
.curve-next { right: 20px; top: 50%; transform: translateY(-50%); }
@media (max-width: 640px) { .curve-prev, .curve-next { top: auto; bottom: 74px; transform: none; } .curve-cap { bottom: calc(24px + env(safe-area-inset-bottom)); font-size: 14px; } .curve-prev, .curve-next { bottom: calc(74px + env(safe-area-inset-bottom)); } }
body.curve-open { overflow: hidden; }

/* Phones: every tap target at least 44px tall, without changing how things look. */
@media (max-width: 860px) {
  .logo { display: inline-flex; align-items: center; min-height: 44px; }
  .footer-nav a { display: inline-flex; align-items: center; min-height: 44px; }
  .spot-picks button { min-height: 44px; min-width: 44px; }
  .svc-links a { display: inline-flex; align-items: center; min-height: 44px; }
  .svc-links { gap: 0 22px; }
}
@media (max-width: 480px) {
  .rider-fold summary.rider-head { flex-direction: column; align-items: flex-start; gap: 12px; }
  .rider-fold summary.rider-head h4 { white-space: nowrap; }
}

/* Home sign-off: the spinning record sits where the logo goes, with the bass rings pulsing out from it,
   and Zephyr's name, huge and outlined, glides behind everything. */
.closing .record { position: relative; width: clamp(120px, 14vw, 170px); aspect-ratio: 1; margin-bottom: 14px; filter: drop-shadow(0 16px 24px rgba(0,0,0,.6)); }
.record-disc { display: block; width: 100%; height: 100%; border-radius: 50%; animation: record-spin 3.2s linear infinite; }
.record-sheen { position: absolute; inset: 0; border-radius: 50%; pointer-events: none; mix-blend-mode: screen;
  background: conic-gradient(from 20deg, transparent 0 8%, rgba(255,255,255,.32) 13%, transparent 20% 52%, rgba(255,255,255,.24) 60%, transparent 67%);
  -webkit-mask: radial-gradient(circle, transparent 33%, #000 34%); mask: radial-gradient(circle, transparent 33%, #000 34%); }
@keyframes record-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .record-disc { animation: none; } }
.closing-word { position: absolute; z-index: -2; inset: 0; display: flex; align-items: center; justify-content: center; pointer-events: none; overflow: hidden; }
.closing-word span { display: block; white-space: nowrap; font-family: var(--display); font-style: italic; font-size: clamp(140px, 22vw, 360px); line-height: .8; letter-spacing: -0.02em;
  color: transparent; -webkit-text-stroke: 1.5px rgba(243, 232, 214, 0.12); will-change: transform; }

/* Meet photo: a tall rounded card, the same 3D tilt card as the services photo. */
.meet-stage { perspective: 1100px; width: min(100%, 470px); margin-inline: auto; }
.meet-card { position: relative; aspect-ratio: 4 / 5; border-radius: var(--radius-lg); overflow: hidden; background: var(--dusk);
  transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) scale(var(--s, 1));
  transition: transform .5s cubic-bezier(.2,.8,.2,1), box-shadow .5s; box-shadow: 0 30px 60px -30px rgba(0,0,0,.8); will-change: transform; }
.meet-card.tilting { transition: transform .25s ease-out, box-shadow .3s; box-shadow: 0 50px 90px -35px rgba(0,0,0,.95); }
.meet-card::after { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; opacity: 0; transition: opacity .3s;
  background: radial-gradient(60% 50% at var(--gx, 50%) var(--gy, 50%), rgba(255,255,255,.22), transparent 70%); mix-blend-mode: soft-light; }
.meet-card.tilting::after { opacity: 1; }
.meet-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 30% 50%; }
@media (prefers-reduced-motion: reduce) { .meet-card { transform: none !important; } }
@media (max-width: 820px) { .meet-stage { width: min(78%, 340px); } }
@media (min-width: 821px) { .meet { padding-bottom: 40px; } }

/* Gallery: his live clip, a tall tile in the grid */
.gal-video { margin: 0 0 14px; border-radius: var(--radius-sm); overflow: hidden; background: var(--dusk); break-inside: avoid; }
.gal-video video { display: block; width: 100%; aspect-ratio: 9 / 16; object-fit: cover; }
.gal-video[hidden] { display: none; }
@media (max-width: 640px) { .gal-video { margin-bottom: 8px; } }