/* Non-Traditional Wedding DJs — site styles */
@font-face { font-family: "Jost"; src: url("/assets/fonts/jost-latin-300-normal.woff2") format("woff2"); font-weight: 300; font-display: swap; }
@font-face { font-family: "Jost"; src: url("/assets/fonts/jost-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Jost"; src: url("/assets/fonts/jost-latin-500-normal.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Syncopate"; src: url("/assets/fonts/syncopate-latin-700-normal.woff2") format("woff2"); font-weight: 700; font-display: swap; }
/* Lulo Clean (licensed web font) */
@font-face { font-family: "Lulo Clean";
  src: url("/assets/fonts/lulo-clean-one-bold.woff2") format("woff2"),
       url("/assets/fonts/lulo-clean-one-bold.woff") format("woff");
  font-weight: 700; font-style: normal; font-display: swap; }
:root { --green: #00F768; --pink: #FF6DFF; --ink: #000; --paper: #fff; --muted: #555; --soft: #f7f7f7; --cream: #fffef6; --rule: #e6e6e6; --display: "Lulo Clean", "Syncopate", "Arial Black", sans-serif; --body: "Futura PT", "Jost", "Futura", "Century Gothic", sans-serif; --read: "Helvetica Neue", Helvetica, Arial, sans-serif; --wrap: 1760px; --gutter: clamp(16px, 6.25vw, 80px); --text: 18px; }
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; overflow-x: clip; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--body); font-weight: 300; font-size: 17px; line-height: 1.6; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
p { margin: 0 0 1em; }
strong, b { font-weight: 500; }
h1, h2, h3, h4 { font-family: var(--display); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; line-height: 1.25; margin: 0 0 .6em; }
h1 { font-size: clamp(28px, 4vw, 42px); }
h2 { font-size: clamp(20px, 2.5vw, 28px); }
h3 { font-size: 18px; }
h4 { font-size: 15px; }
h5, h6 { font-family: var(--body); font-weight: 400; font-size: 18px; line-height: 1.4; margin: 0 0 .6em; }
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }
.skip { position: absolute; left: -9999px; }
.skip:focus { left: 16px; top: 16px; background: var(--paper); padding: 8px 12px; z-index: 100; }
/* buttons */
.btn { display: inline-block; background: var(--green); color: var(--ink); text-decoration: none; font-family: var(--body);
  font-weight: 300; font-size: 17px; line-height: 1.2; padding: 9px 26px; min-width: 220px; text-align: center; border: 0; cursor: pointer;
  transition: background .15s; }
.btn:hover { background: var(--pink); }
.btn-pink { background: var(--pink); }
.btn-pink:hover { background: var(--green); }
.btn-sm { min-width: 0; padding: 7px 16px; font-size: 15px; }
p.cta { margin: 1.6em 0; }
/* header */
.site-header { position: sticky; top: 0; z-index: 50; background: rgba(255,255,255,.97); border-bottom: 1px solid transparent; transition: border-color .2s; }
.site-header.scrolled { border-bottom-color: var(--rule); }
.header-inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 76px; }
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; }
.brand img { width: 52px; height: 51px; }
.brand-name { font-family: var(--display); font-weight: 700; text-transform: uppercase; font-size: 14px; letter-spacing: .08em; line-height: 1.25; }
.site-nav { display: flex; align-items: center; gap: 26px; }
.site-nav ul { list-style: none; display: flex; gap: 28px; margin: 0; padding: 0; }
.site-nav a { text-decoration: none; font-weight: 300; font-size: 16px; }
.site-nav ul a:hover, .site-nav ul a[aria-current] { color: #00b84d; }
.nav-toggle { display: none; background: none; border: 0; width: 44px; height: 44px; padding: 10px; cursor: pointer; }
.nav-toggle span { display: block; height: 2px; background: var(--ink); margin: 5px 0; transition: transform .2s, opacity .2s; }
@media (max-width: 960px) {
  .header-inner { min-height: 64px; }
  .brand img { width: 42px; height: 41px; }
  .brand-name { font-size: 11px; max-width: 200px; }
  .nav-toggle { display: block; }
  .site-nav { position: fixed; inset: 64px 0 0 0; background: var(--paper); flex-direction: column; align-items: flex-start;
    padding: 28px var(--gutter); gap: 28px; opacity: 0; visibility: hidden; transform: translateY(-8px); transition: opacity .2s, transform .2s, visibility .2s; }
  .site-nav.open { opacity: 1; visibility: visible; transform: none; }
  .site-nav ul { flex-direction: column; gap: 20px; }
  .site-nav ul a { font-family: var(--display); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; font-size: 20px; }
  .nav-open .nav-toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .nav-open .nav-toggle span:nth-child(2) { opacity: 0; }
  .nav-open .nav-toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
}
/* imported content pages */
.content { max-width: calc(1040px + 2 * var(--gutter)); margin: 0 auto; padding: 56px var(--gutter) 72px; }
.content .block { padding: 24px 0 40px; }
.content .block > h2:first-child, .content .block > h3:first-child { text-align: center; margin-bottom: 1em; }
.content .block > h1:first-child { text-align: left; }
.content .block > p.cta { text-align: center; }
.content .block.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px 64px; align-items: center; }
.content .split-text > :first-child { margin-top: 0; }
.content .split-text > h2, .content .split-text > h3 { text-align: left; }
.content .split-text p.cta { text-align: left; }
.content .split-media p.figure { margin: 0; }
.content .split-media img { margin: 0 auto; max-height: 760px; width: auto; }
.content .block.split .split-media { order: 2; }
.content h1 + h2, .content h1 + h3 { margin-top: -.2em; }
.content p.figure { margin: 2em 0; }
.content p.figure img { margin: 0 auto; }
.content ul, .content ol { padding-left: 1.2em; }
.content li { margin: .25em 0; }
.content li > p { margin: 0; }
.content table, .post table { border-collapse: collapse; width: 100%; margin: 1.5em 0; font-size: 16px; }
.content th, .content td, .post th, .post td { border: 1px solid #ddd; padding: 10px 12px; text-align: left; vertical-align: top; }
.content tr:first-child td, .post tr:first-child td { font-weight: 500; background: var(--soft); }
.content thead:has(th:empty), .post thead:has(th:empty) { display: none; }
.content p.attrib { color: var(--muted); }
.gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 24px; margin: 2em 0; align-items: center; justify-items: center; }
.gallery img { width: 100%; height: auto; max-height: 420px; object-fit: contain; }
.video { position: relative; aspect-ratio: 16 / 9; margin: 2em auto; background: #111; max-width: 860px; }
.video.video-tall { aspect-ratio: 9 / 16; max-width: 360px; }
.video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.embed { margin: 1em auto; max-width: 860px; }
.embed iframe { width: 100%; border: 0; display: block; }
.embed-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 20px; margin: 1.5em 0; }
@media (max-width: 760px) {
  .content { padding-top: 32px; }
  .content .block.split { grid-template-columns: 1fr; }
  .content .block.split .split-media { order: 2; }
}
/* blog */
.blog-hero { display: flex; align-items: center; justify-content: space-between; gap: 32px; padding-top: 48px; padding-bottom: 8px; }
.blog-hero img { width: min(340px, 40vw); }
.kicker { font-family: var(--display); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; font-size: 18px; margin: 0 0 .3em; }
.blog-cats ul { list-style: none; display: flex; flex-wrap: wrap; gap: 10px 32px; padding: 26px 0; margin: 0 0 28px; }
.blog-cats a { text-decoration: none; font-family: var(--display); font-weight: 700; text-transform: uppercase; letter-spacing: .08em; font-size: 13px; }
.blog-cats a[aria-current] { color: #00b84d; }
.post-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 28px; margin-bottom: 72px; }
.post-card a { display: flex; flex-direction: column; text-decoration: none; border: 1px solid var(--rule); height: 100%; transition: border-color .15s; }
.post-card a:hover { border-color: var(--ink); }
.post-card-img { aspect-ratio: 454 / 334; overflow: hidden; background: var(--soft); }
.post-card-img img { width: 100%; height: 100%; object-fit: cover; }
.post-card-body { padding: 22px 24px 26px; }
.post-card h2 { font-size: 16px; line-height: 1.45; margin: 0 0 .7em; }
.post-card p { font-family: var(--read); font-size: 15px; color: #333; margin: 0 0 .8em; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.post-card .post-meta { color: var(--muted); font-size: 13px; margin: 0; }
.post { max-width: 940px; margin: 0 auto 72px; border: 1px solid var(--rule); padding: clamp(24px, 6vw, 88px) clamp(18px, 9vw, 120px); font-family: var(--read); font-weight: 400; font-size: 17px; line-height: 1.65; }
.post h1 { font-size: clamp(24px, 3vw, 30px); line-height: 1.3; }
.post h2 { font-size: 20px; margin-top: 2em; }
.post h3 { font-size: 16px; margin-top: 1.8em; }
.post .post-meta { color: var(--muted); font-size: 14px; margin-bottom: 2em; }
.post p.figure { margin: 2em 0; }
.post ul, .post ol { padding-left: 1.3em; }
.post-cats { list-style: none; display: flex; flex-wrap: wrap; gap: 10px; padding: 24px 0 0; margin: 40px 0 0; border-top: 1px solid var(--rule); }
.post-cats a { display: inline-block; border: 1px solid var(--ink); padding: 4px 12px; text-decoration: none; font-size: 14px; }
.recent { margin-top: 48px; }
.recent-head { display: flex; justify-content: space-between; align-items: baseline; }
.recent-head h2 { font-size: 16px; margin: 0 0 1em; }
.recent .post-grid { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 20px; margin-bottom: 0; }
.recent .post-card p:not(.post-meta) { display: none; }
.recent .post-card h2 { font-size: 13px; }
/* testimonial speech bubble */
.quote { margin: 0; }
.bubble { position: relative; border: 2px solid var(--ink); border-radius: 14px; padding: 12px 16px; background: var(--paper); font-weight: 400; font-size: 16px; line-height: 1.45; max-width: 300px; margin: 0; }
.bubble::after { content: ""; position: absolute; left: 20px; bottom: -16px; width: 18px; height: 16px; background: var(--paper);
  border-left: 2px solid var(--ink); border-bottom: 2px solid var(--ink); transform: skewX(-38deg); transform-origin: top left; }
.quote figcaption { margin: 22px 0 0 40px; font-size: 15px; line-height: 1.35; }
/* footer */
.site-footer { padding: 64px 0 40px; font-size: 16px; }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr auto; gap: 32px; align-items: start; }
.footer-info h5 { font-family: var(--display); font-weight: 700; text-transform: uppercase; letter-spacing: .08em; font-size: 14px; margin: 0 0 1.4em; }
.footer-info h5 a { text-decoration: none; }
.footer-info p { margin: 0 0 1em; }
.footer-info a { text-decoration: none; }
.footer-philly { font-weight: 400; color: #116dff !important; }
.social { list-style: none; display: flex; gap: 8px; padding: 0; margin: 12px 0 0; }
.social img { width: 30px; height: 30px; }
.footer-logo img { width: 170px; height: auto; margin: 0 auto; }
.footer-nav ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 22px; }
.footer-nav a { text-decoration: none; font-size: 15px; }
.poem { text-align: center; margin-top: 56px; font-size: 15px; line-height: 1.5; }
.poem p { margin: 0 0 .2em; }
.poem a { color: var(--pink); text-decoration: none; }
@media (max-width: 760px) {
  .footer-grid { grid-template-columns: 1fr; }
  .footer-logo img { margin: 0; width: 120px; }
  .blog-hero { flex-direction: column; align-items: flex-start; }
  .blog-hero img { width: 220px; align-self: center; }
}
/* ---------- homepage ---------- */
.home section { padding-top: clamp(64px, 9vw, 136px); }
.home .section-title { margin-bottom: 1.4em; }
.hero { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; padding-top: clamp(40px, 6vw, 72px) !important; }
.hero h1 { font-size: clamp(42px, 6.2vw, 74px); line-height: 1.12; letter-spacing: .08em; margin-bottom: .35em; }
.hero h1 span { display: block; }
.hero-sub { font-size: clamp(20px, 2.4vw, 28px); line-height: 1.3; margin-bottom: 1.1em; }
.hero-text p { max-width: 380px; }
.hero-art { display: flex; flex-direction: column; align-items: center; gap: 28px; }
.hero-art img { width: min(400px, 80vw); }
.pillars { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; align-items: end; padding-bottom: 40px; }
.pillar img { height: 140px; width: auto; margin: 0 auto 18px; }
.pillar .mic { height: 120px; margin-bottom: 38px; }
.pillar h2 { font-size: 18px; line-height: 1.45; margin: 0; padding: 0 9%; }
.pillar:first-child h2 { padding-left: 18%; }
.pillar:last-child h2 { padding-left: 9%; padding-right: 12%; }
.priorities .section-title { font-size: clamp(28px, 4vw, 46px); margin-bottom: 1.6em; }
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 72px; }
.priorities h3 { font-size: 17px; text-align: center; margin: 0 0 1.2em; line-height: 1.4; }
.priorities p { font-size: 16px; }
.steps .section-title { font-size: clamp(28px, 4vw, 46px); }
.step-list { list-style: none; padding: 0; margin: 0 0 72px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 40px; }
.step-list img { width: 64px; height: 64px; margin-bottom: 14px; }
.step-list h3 { font-size: 16px; margin: 0 0 .6em; }
.step-list p { font-size: 16px; }
.quote-center { display: flex; flex-direction: column; align-items: center; }
.hard-to-find { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; }
.hard-to-find img { width: min(440px, 100%); justify-self: center; }
.hard-to-find .read-more { font-weight: 400; text-decoration: none; font-size: 15px; }
.quality-list { list-style: none; padding: 0; margin: 0 0 72px; display: grid; grid-template-columns: repeat(5, 1fr); gap: 28px; }
.quality-list > li { text-align: left; }
.quality-list .icon { width: 52px; height: 52px; margin: 0 auto 16px; }
.quality-list h3 { font-size: 15px; text-align: center; margin: 0 0 1em; }
.quality-list p, .quality-list li li { font-size: 15px; }
.quality-list .langs { margin: 0; padding-left: 1.2em; list-style: disc; }
.quality-list .langs li { margin: 0; }
.quote-row { display: flex; align-items: center; justify-content: center; gap: 64px 120px; flex-wrap: wrap; }
.quote-row img { width: min(320px, 70vw); }
.quote-row.two { align-items: flex-start; }
.proud .quote-row { margin-top: 48px; }
.cards { display: grid; grid-template-columns: 1fr 1fr; gap: 0; background: var(--soft); }
.card { display: grid; grid-template-columns: 1fr 1fr; background: var(--cream); min-height: 0; align-items: center; }
.card img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 444 / 610; }
.card-text { padding: 32px 36px; }
.card-text h3 { margin-top: 0; text-align: center; font-size: 17px; }
.card-text h3 a { text-decoration: none; }
.card-text p { font-size: 15px; }
.deserve .cta { margin: 32px 0 72px; }
.inclusive { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; }
.inclusive h2 { margin-bottom: 1.4em; }
.inclusive .plain-list li { font-family: var(--display); font-weight: 700; text-transform: uppercase; letter-spacing: .1em; font-size: 15px; margin: .5em 0; }
.inclusive img { width: min(340px, 80%); justify-self: center; }
.plain-list { list-style: none; padding: 0; margin: 0 0 1em; }
.plain-list li { margin: .2em 0; }
.venues h2 { margin-bottom: .2em; }
.venues-sub { font-family: var(--display); font-weight: 700; text-transform: uppercase; letter-spacing: .1em; font-size: 14px; margin-bottom: 2.4em; }
.venues h3 { text-align: center; font-size: 16px; margin: 0 0 1.6em; }
.venues .plain-list { max-width: 360px; margin: 0 auto; font-size: 16px; }
.home > section:last-child { padding-bottom: 72px; }
@media (max-width: 900px) {
  .hero-art { order: -1; }
  .hero-art .btn-pink { display: none; }
  .step-list > li { text-align: center; }
  .step-list img { margin: 0 auto 14px; }
  .hero, .hard-to-find, .inclusive, .two-col, .cards, .card { grid-template-columns: 1fr; }
  .two-col { gap: 40px; }
  .pillars { grid-template-columns: 1fr; gap: 48px; }
  .pillar:first-child h2 { padding-left: 12px; }
  .pillar { text-align: center; }
  .step-list { grid-template-columns: 1fr 1fr; }
  .quality-list { grid-template-columns: 1fr 1fr; }
  .card img { height: 320px; }
  .quote-row { gap: 48px; }
}
@media (max-width: 520px) {
  .step-list, .quality-list { grid-template-columns: 1fr; }
  .quality-list > li { text-align: center; }
  .quality-list .langs { display: inline-block; text-align: left; }
  .btn { min-width: 0; width: 100%; max-width: 320px; }
}
/* DJ profile pages */
.dj-profile .content .block:first-child h1 { margin-bottom: .3em; }
.dj-profile .content .block:first-child h2 { font-size: 18px; }
/* mobile quick action bar (like the Wix mobile site) */
.action-bar { display: none; }
@media (max-width: 760px) {
  .action-bar { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; background: var(--paper);
    box-shadow: 0 -2px 10px rgba(0,0,0,.08); justify-content: space-around; padding: 10px 0 calc(10px + env(safe-area-inset-bottom)); }
  .action-bar a { display: flex; width: 56px; height: 32px; align-items: center; justify-content: center; }
  .action-bar svg { width: 24px; height: 24px; }
  body { padding-bottom: 56px; }
}
.embed-form iframe { min-height: 300px; }
.video-file { margin: 1.5em auto; max-width: 860px; }
.video-file video { width: 100%; height: auto; display: block; }
.embed-grid .embed { margin: 0; }
.content ul.icon-row { list-style: none; padding: 0; display: flex; gap: 10px; }
.content ul.icon-row img { width: 34px; height: 34px; }
/* FAQ */
.faq-page { padding-top: 56px; padding-bottom: 72px; max-width: calc(900px + 2 * var(--gutter)); text-align: left; }
.faq-page > h1, .faq-page > .cta { text-align: center; }
.faq-title { font-size: 20px; margin-top: 1.4em; }
.faq-tabs { list-style: none; display: flex; flex-wrap: wrap; gap: 10px; padding: 0 0 24px; margin: 0 0 24px; border-bottom: 1px solid var(--rule); }
.faq-tabs button { background: #fff; border: 1.5px solid #000; border-radius: 999px; padding: 8px 18px; font: inherit; font-size: 16px; font-weight: 500; cursor: pointer; color: #000; transition: background .15s; }
.faq-tabs button:hover { background: #f1f1f1; }
.faq-tabs button[aria-selected="true"] { background: #00F768; border-color: #00F768; color: #000; }
.faq-cat { position: absolute; left: -9999px; }
.faq-item { border: 1px solid #ccc; margin: 0 0 12px; }
.faq-item summary { list-style: none; cursor: pointer; padding: 18px 52px 18px 20px; position: relative; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: ""; position: absolute; right: 22px; top: 50%; width: 9px; height: 9px; border-right: 1.5px solid #000; border-bottom: 1.5px solid #000; transform: translateY(-70%) rotate(45deg); transition: transform .2s; }
.faq-item[open] summary::after { transform: translateY(-30%) rotate(-135deg); }
.faq-item h3 { font-family: var(--body); text-transform: none; letter-spacing: 0; font-weight: 400; font-size: 18px; margin: 0; }
.faq-answer { padding: 0 20px 16px; }
/* About page DJ roster */
.content .roster { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 32px 40px; margin: 2em 0; }
.roster-card { display: grid; grid-template-columns: 124px 1fr; gap: 20px; align-items: start; }
.roster-photo img { width: 124px; height: 137px; object-fit: cover; }
.roster-info p { margin: 0; }
.roster-role { font-family: var(--display); font-weight: 700; text-transform: uppercase; letter-spacing: .08em; font-size: 11px; margin-top: 18px !important; }
.roster-name { font-family: var(--display); font-weight: 700; text-transform: uppercase; letter-spacing: .08em; font-size: 12px; line-height: 1.35; }
.roster-name a, .roster-more a { text-decoration: none; }
.roster-more { font-family: var(--display); font-weight: 700; text-transform: uppercase; letter-spacing: .08em; font-size: 14px; margin: 14px 0 18px !important; }
.roster-ig img { width: 22px; height: 22px; }
/* ---------- measured layouts (tools/layout_build.py) ---------- */
.L-sec { position: relative; height: var(--dsh); }
.L-frame { position: relative; width: min(calc(100vw - 2 * var(--gutter)), 1600px); height: 100%; margin: 0 auto; }
.L-i { position: absolute; left: var(--dx); top: var(--dy); width: var(--dw); height: var(--dh); }
.L-full { left: calc(50% - 50vw); width: 100vw; }
.L-rt { height: auto; min-height: var(--dh); z-index: 2; }
.L-t { font-size: var(--dfs); line-height: var(--dlh); margin: var(--dmt, 0) 0 0; font-weight: 300; letter-spacing: normal; text-transform: none; }
h1.L-t, h2.L-t, h3.L-t, h4.L-t, h5.L-t, h6.L-t { font-weight: 700; }
h1.L-t[style*="--body"], h2.L-t[style*="--body"], h3.L-t[style*="--body"], h4.L-t[style*="--body"], h5.L-t[style*="--body"], h6.L-t[style*="--body"] { font-weight: 300; }
.L-t a { color: inherit; text-decoration: inherit; }
/* Links inside regular text are always underlined so people can tell they're clickable (Ben, Nov 3).
   Headings and buttons that are links keep their own look. */
p.L-t a:not(.btn), ul.L-t a, ol.L-t a { text-decoration: underline; }
p.L-t a, ul.L-t a, ol.L-t a, .post p a, .post li a, .private-page a, .dj-review figcaption a {
  text-decoration-thickness: 1px; text-underline-offset: .18em; transition: color .15s; }
p.L-t a:not(.btn):hover, ul.L-t a:hover, ol.L-t a:hover, .post p a:not(.btn):hover, .post li a:hover,
.private-page a:hover, .dj-review figcaption a:hover { color: var(--pink); }
/* Google review links: a small Google "G" in front */
a.g-review { white-space: nowrap; }
a.g-review::before { content: ""; display: inline-block; width: .95em; height: .95em; margin-right: .35em; vertical-align: -.12em;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cpath fill='%23FFC107' d='M43.6 20.1H42V20H24v8h11.3C33.7 32.7 29.2 36 24 36c-6.6 0-12-5.4-12-12s5.4-12 12-12c3.1 0 5.8 1.2 7.9 3.1l5.7-5.7C34 6.1 29.3 4 24 4 13 4 4 13 4 24s9 20 20 20 20-9 20-20c0-1.3-.1-2.7-.4-3.9z'/%3E%3Cpath fill='%23FF3D00' d='M6.3 14.7l6.6 4.8C14.7 15.1 19 12 24 12c3.1 0 5.8 1.2 7.9 3.1l5.7-5.7C34 6.1 29.3 4 24 4 16.3 4 9.7 8.3 6.3 14.7z'/%3E%3Cpath fill='%234CAF50' d='M24 44c5.2 0 9.9-2 13.4-5.2l-6.2-5.2C29.2 35.1 26.7 36 24 36c-5.2 0-9.6-3.3-11.3-8l-6.5 5C9.5 39.6 16.2 44 24 44z'/%3E%3Cpath fill='%231976D2' d='M43.6 20.1H42V20H24v8h11.3c-.8 2.2-2.2 4.2-4.1 5.6l6.2 5.2C37 39.2 44 34 44 24c0-1.3-.1-2.7-.4-3.9z'/%3E%3C/svg%3E") center / contain no-repeat; }
ul.L-t, ol.L-t { padding-left: 1.3em; }
.L-btn { display: flex; align-items: center; justify-content: center; font-size: var(--dfs); text-decoration: none; text-align: center; line-height: 1.2; }
.L-btn:hover { filter: brightness(.95); }
.L-img img, .L-img a { display: block; width: 100%; height: 100%; }
.L-svg svg { width: 100%; height: 100%; display: block; }
.L-vid video { width: 100%; height: 100%; object-fit: cover; display: block; }
.L-line { border-top: 1px solid #000; height: 0 !important; }
.L-box { z-index: 0; }
@media (max-width: 1139px) {
  .L-page { container-type: inline-size; max-width: 520px; margin: 0 auto; }
  .L-sec { height: var(--msh); }
  .L-donly, .L-dhide-m, .map-link { display: none !important; }
  .L-rt:has(.map-link) { min-height: 0; }
  .L-sec.L-mflow { height: auto !important; padding: 40px 6.2cqw 28px; }
  .L-mflow .L-frame { height: auto; }
  .L-mflow .L-i { position: relative !important; left: auto !important; top: auto !important; width: auto !important; height: auto !important; min-height: 0 !important; transform: none !important; margin: 0 0 16px; }
  .L-mflow .L-qmark { height: 40px; margin: 0; }
  .L-mflow .L-embed { margin: 24px 0 0; }
  .L-mflow .L-embed iframe { width: 100%; }
  .L-mflow .L-embed:has(> .yt-lite, > iframe[src*="youtube"], > iframe[src*="vimeo"]) { aspect-ratio: 16 / 9; height: auto !important; }
  .L-mflow .L-embed > .yt-lite { width: 100%; height: 100%; }
  .L-frame { width: 100%; }
  .L-i { left: var(--mx); top: var(--my); width: var(--mw); height: var(--mh); }
  .L-rt { height: auto; min-height: var(--mh); }
  .L-t { font-size: var(--mfs); line-height: var(--mlh); margin-top: var(--mmt, 0); }
  .L-btn { font-size: var(--mfs); }
}
.L-t[style*="--display"] { text-transform: uppercase; }
.L-embed .embed, .L-embed .video { margin: 0; max-width: none; height: 100%; }
.L-embed iframe { width: 100%; height: 100% !important; border: 0; }
.L-page { overflow-x: clip; }
.L-btn[style*="--display"] { text-transform: uppercase; font-weight: 700; }
.L-donly-i { display: none; }
.L-mrow img { width: 28px; height: 28px; }
@media (max-width: 1139px) {
  .L-donly-i { display: flex; gap: 8px; height: auto; }
}
.proud-top { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; }
.proud-top .section-title { font-size: clamp(28px, 4vw, 46px); margin: 0; }
.proud-top .video { margin: 0; max-width: none; }
@media (max-width: 900px) {
  .proud-top { grid-template-columns: 1fr; gap: 24px; }
}
/* review styles being tried on the homepage */
.quote-a { position: relative; max-width: 340px; padding-top: 34px; }
.quote-a::before { content: "\201C"; position: absolute; top: -14px; left: -4px; font-family: Georgia, serif; font-size: 96px; line-height: 1; color: var(--pink); }
.quote-a .bubble { border: 0; padding: 0; max-width: none; font-size: 19px; font-weight: 300; }
.quote-a .bubble::after { display: none; }
.quote-a figcaption { margin: 16px 0 0; font-family: var(--display); font-weight: 700; text-transform: uppercase; letter-spacing: .08em; font-size: 12px; line-height: 1.6; }
.quote-b { max-width: 340px; }
.quote-b .bubble { border: 2px solid var(--ink); border-radius: 0; padding: 22px 24px; max-width: none; font-size: 18px; font-weight: 300; }
.quote-b .bubble::after { display: none; }
.quote-b figcaption { margin: 14px 0 0; font-family: var(--display); font-weight: 700; text-transform: uppercase; letter-spacing: .08em; font-size: 12px; line-height: 1.6; }
.quote-center.quote-a { align-items: flex-start; margin: 0 auto; }
/* quote marks that replace Wix speech bubbles on measured pages */
.L-qmark { font-family: Georgia, serif; color: var(--pink); font-size: 84px; line-height: 1; }
@media (max-width: 1139px) {
  .L-qmark { font-size: 64px; }
}
.read-more { background: none; border: 0; padding: 0; font: inherit; font-weight: 400; font-size: 17px; cursor: pointer; color: var(--ink); }
.read-more:hover { text-decoration: underline; }
/* Associate DJ application form */
.apply-form { max-width: 620px; margin: 0 auto 80px; padding: 0 var(--gutter); }
.apply-form form { display: grid; gap: 18px; }
.apply-form label { display: grid; gap: 6px; font-size: 16px; font-weight: 400; }
.apply-form input[type=text], .apply-form input[type=email], .apply-form input[type=tel], .apply-form input[type=url] { font: inherit; font-weight: 300; padding: 10px 12px; border: 1px solid #999; border-radius: 0; width: 100%; }
.apply-form input:focus { outline: 2px solid var(--green); border-color: var(--ink); }
.af-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.apply-form fieldset { border: 0; padding: 0; margin: 0; display: grid; gap: 6px; }
.apply-form legend { font-size: 16px; font-weight: 400; margin-bottom: 6px; }
.apply-form .af-check { display: flex; gap: 10px; align-items: center; font-weight: 300; }
.apply-form .btn { justify-self: start; }
.af-thanks { color: #00a14b; font-weight: 500; }
@media (max-width: 600px) {
  .af-row { grid-template-columns: 1fr; }
}
/* DJ page reviews */
.dj-reviews { max-width: min(calc(100vw - 2 * var(--gutter)), 1600px); margin: 0 auto 8px; }
.dj-reviews-title { text-align: center; margin-bottom: 1.4em; font-size: 30px; letter-spacing: .2em; margin: 0 0 56px; }
.dj-reviews-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 28px; align-items: stretch; }
.dj-review { margin: 0; padding: 28px 28px 24px; border: 1.5px solid #000; border-radius: 6px; background: #fff; position: relative; }
.dj-review blockquote { font-size: 16px; line-height: 1.55; margin: 0 0 20px; }
.dj-review figcaption { font-size: 14px; display: flex; flex-direction: column; gap: 4px; }
.dj-review-venue { font-weight: 500; }
.dj-review figcaption a { color: inherit; }
@media (max-width: 1139px) {
  .dj-reviews { max-width: 520px; padding: 0 20px; }
}
.priorities .two-col > div { max-width: 500px; justify-self: center; }
.priorities h3 { font-size: 20px; }
.step-list > li { display: flex; flex-direction: column; align-items: center; text-align: center; }
.step-list img { width: clamp(80px, 8.5vw, 110px); height: auto; margin: 0 auto 40px; }
.step-list h3 { font-size: 22px; line-height: 1.5; max-width: 7em; margin: 0 auto 1.2em; }
.step-list p { max-width: 260px; text-align: left; font-size: 17px; }
.hard-to-find .expand { max-width: 360px; }
.quality-list p, .quality-list li li { font-size: 17px; }
.quality-list h3 { font-size: 18px; }
@media (max-width: 760px) {
  :root { --text: 17px; }
}
body, .post, .content, .faq-answer,
.priorities p, .step-list p, .quality-list p, .quality-list li li, .card-text p, .hard-to-find p,
.hero-text p, .venues .plain-list, .read-more, .hard-to-find .read-more,
.bubble, .quote-a .bubble, .quote-b .bubble, .dj-review blockquote,
.post-card p, .content table, .post table, .apply-form label, .apply-form legend { font-size: var(--text); }
/* measured (Wix layout) pages: paragraphs and lists in the body font never go below the standard size */
.L-t:is(p, ul, ol) { font-size: max(var(--dfs), var(--text)); line-height: max(var(--dlh), 1.55em); }
@media (max-width: 1139px) {
  .L-t:is(p, ul, ol) { font-size: max(var(--mfs), var(--text)); line-height: max(var(--mlh), 1.55em); }
}
.card img { height: auto; object-fit: cover; }
.card-text h3 { font-size: 26px; line-height: 1.45; max-width: 8em; margin: 0 auto 1.2em; }
.deserve .section-title { max-width: 16em; }
@media (min-width: 901px) {
  .cards { box-shadow: 0 0 0 100vmax var(--soft); clip-path: inset(0 -100vmax); }
}
@media (max-width: 900px) {
  .card img { aspect-ratio: 4 / 5; height: auto; }
}
/* measured images keep their proportions as the page stretches */
@media (min-width: 1140px) {
  .L-img[style*="--ar"] { height: auto; aspect-ratio: var(--ar); }
}
/* testimonial text on main pages gets the pink quote mark */
.L-quote .L-qm { display: block; font-family: Georgia, serif; color: var(--pink); font-size: 84px; position: absolute; top: -50px; left: -4px; margin: 0; height: auto; line-height: 1; }
/* photo enlarge on click */
img.zoomable { cursor: zoom-in; }
.lightbox { position: fixed; inset: 0; z-index: 10000; background: rgba(0,0,0,.88); display: flex; align-items: center; justify-content: center; padding: 24px; cursor: zoom-out; }
.lightbox img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; box-shadow: 0 8px 40px rgba(0,0,0,.5); }
.lightbox-close { position: absolute; top: 12px; right: 16px; background: none; border: 0; color: #fff; font-size: 44px; line-height: 1; cursor: pointer; }
/* travel fee map: embedded on desktop, a button on phones */
.map-btn { display: none; }
@media (max-width: 1139px) {
  .embed:has(.map-btn) iframe { display: none; }
  .map-btn { display: inline-block; }
  .embed:has(.map-btn) { display: flex; align-items: center; justify-content: center; }
  .L-sec:has(.map-btn) { --msh: 16cqw !important; display: block !important; }
}
/* parallax column photo */
.L-par { overflow: hidden; }
.L-par img, .L-par video { position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; will-change: transform; }
/* anchor jumps land below the sticky header */
section[id] { scroll-margin-top: 110px; }
.L-alias { position: absolute; top: 0; left: 0; scroll-margin-top: 110px; }
.faq-tabs li { margin: 0; padding: 0; }
.content .faq-tabs { padding-left: 0; margin-left: 0; }
@media (max-width: 760px) {
  .faq-tabs { gap: 8px; }
  .faq-tabs button { font-size: 15px; padding: 6px 14px; }
}
.faq-tabs li:nth-child(even) button[aria-selected="true"] { background: #FF6DFF; border-color: #FF6DFF; }
/* contact page: pick a DJ */
.dj-picker { padding: 0 0 112px; }
.dj-picker h2 { font-family: var(--display); text-transform: uppercase; letter-spacing: .2em; font-size: 28px; margin: 0 0 24px; }
.dj-picker h2:has(+ .dj-sub) { margin-bottom: 8px; }
.dj-sub { font-family: var(--display); text-transform: uppercase; letter-spacing: .2em; font-size: 20px; margin: 0 0 24px; }
.dj-filters { list-style: none; display: flex; flex-wrap: wrap; gap: 10px; padding: 0; margin: 0 0 32px; }
.dj-filters li { margin: 0; padding: 0; }
.dj-filters button { background: #fff; border: 1.5px solid #000; border-radius: 999px; padding: 8px 18px; font: inherit; font-size: 16px; font-weight: 500; cursor: pointer; color: #000; }
.dj-filters button:hover { background: #f1f1f1; }
.dj-filters button[aria-pressed="true"] { background: var(--green); border-color: var(--green); }
.dj-grid { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 40px 28px; }
.dj-card { margin: 0; padding: 0; display: flex; flex-direction: column; }
.dj-card[hidden] { display: none; }
.dj-photo { display: block; aspect-ratio: 4 / 5; overflow: hidden; background: #eee; }
.dj-photo img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .3s; }
.dj-photo:hover img { transform: scale(1.04); }
.dj-card h3 { font-family: var(--display); text-transform: uppercase; letter-spacing: .15em; font-size: 16px; margin: 16px 0 4px; }
.dj-meta { margin: 0 0 14px; font-size: 16px !important; line-height: 1.4; }
.dj-tag { display: inline-block; margin-left: 8px; padding: 1px 10px; border-radius: 999px; background: var(--pink); font-size: 13px; font-weight: 500; vertical-align: 1px; }
.dj-actions { margin-top: auto; display: flex; flex-direction: column; align-items: stretch; gap: 10px; }
.dj-actions .btn { padding: 8px 16px; font-size: 16px; text-align: center; }
.dj-actions .dj-more { text-align: center; }
.dj-card h3 a { color: inherit; text-decoration: none; }
.dj-card h3 a:hover { color: var(--pink); }
.dj-actions .btn-alt { background: #fff; border: 1.5px solid #000; }
.dj-more { color: #000; font-size: 15px; text-decoration: underline; text-underline-offset: 3px; }
.dj-start .dj-photo { outline-offset: -4px; outline: none; background: #fff; border: 4px solid var(--pink); }
@media (max-width: 1139px) {
  .dj-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 760px) {
  .dj-grid { grid-template-columns: repeat(2, 1fr); gap: 28px 14px; }
  .dj-picker h2 { font-size: 22px; }
  .dj-sub { font-size: 16px; }
  .dj-filters { gap: 8px; }
  .dj-filters button { font-size: 15px; padding: 6px 14px; }
  .dj-actions .btn { font-size: 15px; padding: 7px 12px; }
  .dj-tag { margin: 4px 0 0; display: table; }
}
.dj-start .dj-photo img { object-fit: contain; padding: 12%; box-sizing: border-box; }
/* subheadings inside a block of body text (e.g. venue lists): smaller, lined up with the text, room above */
@media (min-width: 1140px) {
  .L-rt > .L-t:not(:first-child):is(h2, h3, h4) { font-size: min(var(--dfs), 20px); line-height: 1.35; text-align: left !important; margin-top: 1.1em; margin-bottom: .3em; }
}
/* buttons: never smaller than 18px text */
.L-btn { font-size: max(var(--dfs), 18px); }
@media (max-width: 1139px) {
  .L-btn { font-size: max(var(--mfs), 16px); }
}
.dj-review { display: flex; flex-direction: column; }
.dj-review::before { content: "\201C"; position: absolute; top: -26px; left: 20px; padding: 0 8px; background: #fff; color: var(--pink); font-family: Georgia, serif; font-size: 64px; line-height: 1; }
.dj-review figcaption { margin-top: auto; padding-top: 14px; border-top: 1px solid var(--rule); }
@media (max-width: 1139px) {
  .dj-reviews-grid { gap: 40px; }
}
.dj-reviews { padding-top: 56px; }
@media (max-width: 1139px) {
  .dj-reviews-title { font-size: 22px; margin-bottom: 44px; }
}
/* DJ pages: reviews heading matches the other section titles (24px) */
.dj-profile .dj-reviews-title { font-size: 24px; }
@media (max-width: 1139px) {
  .dj-profile .dj-reviews-title { font-size: 20px; }
}
/* keep the pink quote mark clear of the first line */
.dj-review { padding-top: 48px; }
/* DJ name at the top of each DJ page stays on one line (desktop) */
@media (min-width: 1140px) {
  .dj-profile .L-rt > h1.L-t { white-space: nowrap; }
}
/* YouTube: picture + play button until clicked */
.yt-lite { display: block; width: 100%; height: 100%; min-height: 180px; aspect-ratio: 16 / 9; border: 0; padding: 0; cursor: pointer; background: #000 center / cover no-repeat; position: relative; }
.L-embed .yt-lite { aspect-ratio: auto; }
.yt-play { position: absolute; left: 50%; top: 50%; width: 68px; height: 48px; margin: -24px 0 0 -34px; background: #f00; border-radius: 14px; opacity: .92; transition: opacity .15s; }
.yt-play::after { content: ""; position: absolute; left: 27px; top: 14px; border-style: solid; border-width: 10px 0 10px 17px; border-color: transparent transparent transparent #fff; }
.yt-lite:hover .yt-play { opacity: 1; }
.yt-lite + iframe, iframe.yt-on { width: 100%; height: 100%; border: 0; display: block; }
.video .yt-lite { position: absolute; inset: 0; aspect-ratio: auto; }
/* phones: subheadings inside a block of body text (venue lists etc.) small, left, with room above */
@media (max-width: 1139px) {
  .L-rt > .L-t:not(:first-child):is(h2, h3, h4) { font-size: min(var(--mfs), 17px); line-height: 1.35; letter-spacing: .12em; text-align: left !important; margin-top: 1.2em; margin-bottom: .35em; }
}
/* Phones: heading sizes for Lulo (approved by Ben on the Philadelphia page) */
@media (max-width: 1139px) {
  .L-rt > h1.L-t { font-size: 28px !important; line-height: 1.3 !important; letter-spacing: .12em; }
  .L-rt > :is(h2, h3, h4).L-t:first-child { font-size: 20px !important; line-height: 1.35 !important; letter-spacing: .12em; }
  .L-rt > :is(h2, h3, h4).L-t:not(:first-child) { font-size: 17px !important; }
  main > .L-page > .L-sec:first-child .L-rt > h2.L-t { font-size: 15px !important; }
}
@media (max-width: 1139px) {
  .home .hero h1 { font-size: 28px; line-height: 1.3; letter-spacing: .12em; }
  .home .section-title, .home h2 { font-size: 20px; line-height: 1.35; letter-spacing: .12em; }
  .home h3 { font-size: min(1em, 20px); }
  .home .card-text h3, .home .steps h3 { font-size: 20px; letter-spacing: .12em; }
  .home .hero-sub { font-size: 15px; }
}
@media (max-width: 1139px) {
  .home .pillar h2 { font-size: 17px; }
}

/* roomier section breaks (Ben, Nov 1): blocks built outside the measured layout match the 96 / 64 gap */
.L-roomy .dj-reviews { padding-top: 72px; padding-bottom: 72px; }
.L-roomy .dj-picker { padding-top: 72px; padding-bottom: 72px; }
@media (max-width: 1139px) {
  .L-roomy .dj-reviews, .L-roomy .dj-picker { padding-top: 48px; padding-bottom: 48px; }
}

/* taglines resized to the tagline scale (Ben, Nov 1): phone uses the approved tagline size */
@media (max-width: 1139px) {
  .L-page .L-rt > .L-t.L-tagline:is(h1, h2, h3, h4, p) { font-size: 15px !important; line-height: 1.4 !important; }
}

/* list pages (preferred vendors): Wix's random empty lines dropped, every entry and heading evenly spaced */
.L-list .L-rt > .L-t:empty { display: none; }
.L-list .L-rt > p.L-t { margin: 0 0 12px; }
.L-list .L-rt > :is(h2, h3, h4, h5, h6).L-t { margin: 40px 0 12px; }
.L-list .L-rt > :is(h2, h3, h4, h5, h6).L-t br { display: none; }

/* centered numbered or bulleted lists: the number sits with its line, not at the far left */
.L-rt > :is(ol, ul).L-t[style*="text-align:center"] { list-style-position: inside; padding-left: 0; }

/* About DJ list on phones (two per row trial): names use their own size, not the 17px reading minimum */
@media (max-width: 1139px) {
  #team .L-rt > p.L-t { font-size: var(--mfs); line-height: var(--mlh); }
  #team .L-img[style*="--ar"] { aspect-ratio: auto; height: var(--mh); }  /* every DJ photo the same size */
  #team .L-img img { object-fit: cover !important; }
}
[id^="viewer-"] { scroll-margin-top: 110px; }
/* Lulo's wide letter spacing leaves extra room after the last letter of each line, so centered
   headings looked about 3 to 4px left of center: nudge them back (Ben, Nov 2) */
.L-t[style*="text-align:center"] { translate: .16em 0; }

.unsub-form { max-width: 420px; margin-bottom: 120px; }
.unsub-form .btn { justify-self: center; min-width: 160px; }
.unsub-done { text-align: center; font-size: 18px; }
/* team, admin, sales (password pages) */
.private-page { max-width: 760px; margin: 0 auto; padding: 64px var(--gutter) 96px; text-align: center; }
.private-page h1 { margin-bottom: .3em; }
.private-page h2 { margin: 2.2em 0 .8em; }
.private-page h3 { margin: 1.6em 0 .6em; font-size: 18px; }
.private-page p { margin: .5em 0; font-size: 18px; }
.private-page .pv-note { font-size: 15px; }
.private-page .video { margin: 2em auto; }

/* DJ bio row (Ben, Nov 3): heading 24px above the bio, both left aligned in a column up to 520px wide,
   centered top to bottom against the photo (tops level if the bio is taller); 80px between text and photo */
.L-sec.dj-bio { height: auto !important; padding: 72px 0 40px; }
.dj-bio .L-frame { display: grid; grid-template-columns: minmax(0, 520px) minmax(0, 680px); grid-template-rows: 1fr auto auto 1fr; column-gap: 80px; justify-content: center; }
.dj-bio .L-frame > .L-i { position: static; width: auto; height: auto; min-height: 0; transform: none !important; }
.dj-bio .L-frame > .L-i:not(.bio-h):not(.bio-t):not(.bio-img) { display: none; }
.dj-bio .bio-h { grid-column: 1; grid-row: 2; margin-bottom: 24px; }
.dj-bio .bio-t { grid-column: 1; grid-row: 3; }
.dj-bio .bio-img { grid-column: 2; grid-row: 1 / 5; align-self: start; }  /* photo sets the row height; the bio centers on it, or tops level if the bio is taller */
.dj-bio .bio-h .L-t, .dj-bio .bio-t .L-t { text-align: left !important; translate: none; }
.dj-bio .bio-img { aspect-ratio: var(--bio-ar); max-height: 760px; overflow: hidden; }  /* the box itself is capped, so the bio centers on what you see */
.dj-bio .bio-img img, .dj-bio .bio-img picture { display: block; width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 1139px) {
  .L-sec.dj-bio { padding: 48px 0 32px; }
  .dj-bio .L-frame { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto; padding: 0 6.25cqw; }
  .dj-bio .bio-h, .dj-bio .bio-t, .dj-bio .bio-img { grid-column: 1; grid-row: auto; }
  .dj-bio .bio-t { margin-bottom: 24px; }
}

/* Services: green add ons price table (lighting, photo booths, Chinese MC) in one row on desktop,
   same width as the pink DJ price table above it (Ben, Nov 4) */
.L-i:has(> .embed iframe[src*="9bf05a_1552dc8d"]) { --dx: 6.2% !important; --dw: 87.5% !important; }