@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&display=swap');

/* Time & Tempo visual system — core palette + controlled occasion accents */
:root{
  --tt-bg:#050609;
  --tt-panel:#0b0d12;
  --tt-panel-2:#11141a;
  --tt-text:#f5f3f0;
  --tt-muted:#aeb5be;
  --tt-rule:rgba(255,255,255,.12);
  --tt-violet:#7b2cff;
  --tt-cyan:#00e5ff;
  --tt-font:"Manrope","Avenir Next","Segoe UI",Arial,sans-serif;
}

/* Typography: Weddings intentionally keeps its existing editorial treatment. */
body:not(.wedding-dj-page),
body:not(.wedding-dj-page) button,
body:not(.wedding-dj-page) input,
body:not(.wedding-dj-page) select,
body:not(.wedding-dj-page) textarea{font-family:var(--tt-font)}

body:not(.wedding-dj-page) :is(h1,h2,h3,h4,.section-title){font-family:var(--tt-font);font-weight:800}
body:not(.wedding-dj-page) .topbar nav,
body:not(.wedding-dj-page) .eyebrow,
body:not(.wedding-dj-page) .kicker,
body:not(.wedding-dj-page) .primary,
body:not(.wedding-dj-page) .line-link{font-family:var(--tt-font)}

/* Core marketing pages: Time & Tempo violet + cyan. */
:is(.services-page,.about-page,.areas-page,.venues-page,.guest-requests-page,.contact-page) .eyebrow{color:var(--tt-cyan)}
:is(.services-page,.about-page,.areas-page,.venues-page,.guest-requests-page,.contact-page) .section-title span{color:var(--tt-violet)}
:is(.services-page,.about-page,.areas-page,.venues-page,.guest-requests-page,.contact-page) .page-hero h1 em{
  color:var(--tt-cyan);
  -webkit-text-stroke:0;
  text-stroke:0;
}
:is(.services-page,.about-page,.areas-page,.venues-page,.guest-requests-page,.contact-page) .line-link{color:var(--tt-cyan);border-color:var(--tt-cyan)}
:is(.services-page,.about-page,.areas-page,.venues-page,.guest-requests-page,.contact-page) .primary{
  background:linear-gradient(100deg,var(--tt-violet),#5c4cff 55%,var(--tt-cyan));
}
:is(.services-page,.about-page,.areas-page,.venues-page,.guest-requests-page,.contact-page) .white-section .eyebrow{color:#6526cf}
:is(.services-page,.about-page,.areas-page,.venues-page,.guest-requests-page,.contact-page) .white-section .section-title span{color:#6526cf}

/* Homepage core sections. The themed-night section and poster palette are deliberately untouched. */
.home-hero-simple .kicker span{color:var(--tt-violet)}
.home-hero-simple h1{color:var(--tt-text)}
.home-services .production-title h2 span{
  color:var(--tt-violet);
  -webkit-text-stroke:0;
  text-stroke:0;
}
.home-services .service-icon{color:var(--tt-violet)}
.home-services .service-link{color:#4b27b7}
.local-home .kicker{color:var(--tt-cyan)}
.local-home h2 span{
  color:var(--tt-cyan);
  -webkit-text-stroke:0;
  text-stroke:0;
}
.local-home .line-link{color:var(--tt-cyan);border-color:var(--tt-cyan)}

/* Venue & Event Planning uses the core system except when its dedicated wedding theme is active. */
.venue-event-planning-page:not(.planning-theme-wedding) .eyebrow{color:var(--tt-cyan)}
.venue-event-planning-page:not(.planning-theme-wedding) .section-title span,
.venue-event-planning-page:not(.planning-theme-wedding) .planning-selector-heading h2 span,
.venue-event-planning-page:not(.planning-theme-wedding) .plan-copy h2 span,
.venue-event-planning-page:not(.planning-theme-wedding) .plan-details-heading h2 span{color:var(--tt-violet)}
.venue-event-planning-page:not(.planning-theme-wedding) .plan-cta p span{
  color:#fff;
  -webkit-text-stroke:0;
  text-stroke:0;
}
.venue-event-planning-page:not(.planning-theme-wedding) .plan-cta{background:linear-gradient(120deg,#5620c9,#4a39d4 56%,#087f9a)}
.venue-event-planning-page:not(.planning-theme-wedding) .line-link{color:var(--tt-cyan);border-color:var(--tt-cyan)}

/* Proms: violet + soft electric pink. */
.prom-page{
  --prom-violet:#8e4bff;
  --prom-pink:#ff64c2;
  --prom-blue:#ff64c2;
  --prom-gold:#d7c7ff;
}
.prom-page .eyebrow,.prom-page .prom-hero .eyebrow{color:var(--prom-pink)}
.prom-page .prom-hero h1,.prom-page .prom-head h2,.prom-page .prom-production-copy h2,.prom-page .prom-boundaries h2{color:#fff}
.prom-page .prom-hero h1 span,.prom-page .prom-head h2 span{color:var(--prom-violet)}
.prom-page .prom-card>span,.prom-page .prom-planning-grid span,.prom-page .prom-faq summary::after{color:var(--prom-pink)}
.prom-page .prom-card::before{background:linear-gradient(90deg,var(--prom-violet),transparent)}
.prom-page .prom-card:nth-child(even)::before{background:linear-gradient(90deg,var(--prom-pink),transparent)}
.prom-page .prom-flow-grid span{color:#d7c7ff}
.prom-page .prom-hero .primary{background:linear-gradient(105deg,var(--prom-violet),#7656ff 52%,var(--prom-pink))}
.prom-page .prom-cta{background:radial-gradient(circle at 20% 15%,rgba(255,100,194,.14),transparent 30%),radial-gradient(circle at 82% 18%,rgba(142,75,255,.17),transparent 30%),linear-gradient(120deg,#29133f,#27225b 55%,#351637)}
.prom-page .prom-cta p span{color:#f1d9eb}
.prom-page .line-link{color:#f3eafa;border-color:rgba(255,255,255,.65)}
.home-prom-feature .home-prom-badge{border-color:rgba(255,100,194,.34);color:#ffd5ed}
.home-prom-feature .kicker{color:#ff9bd5}
.home-prom-feature h2 span{color:#a66cff}
.home-prom-feature .primary{background:linear-gradient(105deg,#8e4bff,#7656ff 52%,#ff64c2)}
.home-prom-feature .line-link{color:#ffd5ed;border-color:#ff9bd5}

/* Christmas: warm champagne gold + deep evergreen. */
.christmas-party-page{--tt-xmas-gold:#d6b56d;--tt-xmas-evergreen:#3d725d}
.christmas-party-page .eyebrow,.christmas-party-page .christmas-hero .eyebrow{color:var(--tt-xmas-gold)!important}
.christmas-party-page .christmas-hero h1 span,
.christmas-party-page .christmas-head h2 span,
.christmas-party-page .christmas-local-card h2 span,
.christmas-party-page .christmas-festive-grid h2 span,
.christmas-party-page .christmas-planning-copy h2 span,
.christmas-party-page .christmas-cta h2 span{color:var(--tt-xmas-gold)}
.christmas-party-page .christmas-card-grid article,
.christmas-party-page .christmas-flow-grid article{--xmas-accent:var(--tt-xmas-gold)}
.christmas-party-page .christmas-card-grid article:nth-child(even),
.christmas-party-page .christmas-flow-grid article:nth-child(even){--xmas-accent:var(--tt-xmas-evergreen)}
.christmas-party-page .primary{background:linear-gradient(105deg,#214839,#356650 52%,#c6a15e)}
.christmas-party-page .line-link{color:#e7c983;border-color:#d6b56d}
.home-christmas-banner .kicker{color:#e7c983}
.home-christmas-banner h2 span{color:#d6b56d}
.home-christmas-banner .primary{background:linear-gradient(105deg,#214839,#356650 52%,#c6a15e)}
.home-christmas-banner .line-link{color:#e7c983;border-color:#d6b56d}

/* Brand Events: refined champagne + muted violet. */
.brand-events-page{--brand-gold:#d9b475;--brand-violet:#9d79c7;--brand-magenta:#9d79c7}
.brand-events-page .eyebrow{color:#d9b475}
.brand-events-page .brand-hero h1 span,.brand-events-page .brand-awards-copy h2 span{color:#d9b475}
.brand-events-page .brand-heading h2 span,.brand-events-page .brand-working h2 span{color:#b492d2}
.brand-events-page .brand-hero .primary{background:linear-gradient(105deg,#8d6aae,#9d79c7 52%,#b99052)}
.brand-events-page .line-link{color:#e4c690;border-color:#d9b475}
.brand-events-page .brand-cta{background:radial-gradient(circle at 18% 15%,rgba(157,121,199,.16),transparent 30%),radial-gradient(circle at 82% 18%,rgba(217,180,117,.14),transparent 28%),linear-gradient(125deg,#17121d,#1a1721 52%,#241d14)}
.brand-events-page .brand-cta>p span{color:#d9b475}
.home-brand-feature .brand-badge{border-color:rgba(217,180,117,.35);color:#ecd3a8}
.home-brand-feature .kicker{color:#b79ad0}
.home-brand-feature h2 span{color:#d9b475}
.home-brand-feature .primary{background:linear-gradient(105deg,#8d6aae,#9d79c7 52%,#b99052)}
.home-brand-feature .line-link{color:#e4c690;border-color:#d9b475}
.service-brand-feature .eyebrow{color:#b79ad0}
.service-brand-feature h2 span{color:#d9b475}
.service-brand-feature .primary{background:linear-gradient(105deg,#8d6aae,#9d79c7 52%,#b99052)}

/* Karaoke keeps a brighter version of the Time & Tempo family. */
.karaoke-page{--karaoke-pink:#ff35c8;--karaoke-cyan:#54e5ff}
.karaoke-page .karaoke-hero h1 span,
.karaoke-page .section-title span,
.karaoke-page .karaoke-photo-copy h2 span{color:var(--karaoke-cyan)}
.karaoke-page .eyebrow,.karaoke-page .karaoke-hero .eyebrow{color:var(--karaoke-pink)}
.karaoke-page .primary{background:linear-gradient(105deg,#d82fbc,#ff35c8 46%,#54e5ff)}
.karaoke-page .line-link{color:var(--karaoke-cyan);border-color:var(--karaoke-cyan)}

/* Navigation: restrained, consistent parent UI; page-specific accents only when active. */
body:not(.wedding-dj-page) .topbar nav>a{color:#c2c7ce}
body:not(.wedding-dj-page) .topbar nav>a:hover{color:var(--tt-cyan)}
body:not(.wedding-dj-page):not(.prom-page):not(.brand-events-page):not(.christmas-party-page):not(.karaoke-page) .topbar nav>a.active{color:var(--tt-cyan)}
.prom-page .topbar nav>a.active{color:#ff8bd0}
.brand-events-page .topbar nav>a.active{color:#d9b475}
.christmas-party-page .topbar nav>a.active{color:#e8b85f}
.karaoke-page .topbar nav>a.active{color:#54e5ff}

/* Themed-night package/poster colour rules are intentionally not overridden here. */

@media(max-width:720px){
  body:not(.wedding-dj-page) :is(h1,h2,h3,.section-title){font-weight:800}
}


/* V3 — Proms readability + hero sparkle, Christmas festive hero twinkle.
   Page-scoped, decorative only, and motion-safe. */
.prom-page .prom-boundaries h2{
  color:#21192a!important;
}
.prom-page .prom-boundaries .prom-shell>div>p,
.prom-page .prom-boundaries-box p{
  color:#4b4852!important;
}
.prom-page .prom-boundaries-box b{
  color:#17131d!important;
}

.prom-page .prom-hero h1 span,
.christmas-party-page .christmas-hero h1 span{
  position:relative;
  display:inline-block;
  isolation:isolate;
}

.prom-page .prom-hero h1 span{
  background:linear-gradient(108deg,#8450f6 0%,#a86cff 30%,#d9c5ff 48%,#ad72ff 62%,#8750f4 100%);
  background-size:230% 100%;
  background-position:0 50%;
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent!important;
  -webkit-text-fill-color:transparent;
  filter:drop-shadow(0 0 18px rgba(142,75,255,.16));
  animation:promHeroTextShimmer 7.5s ease-in-out infinite;
}
.prom-page .prom-hero h1 span::before,
.prom-page .prom-hero h1 span::after{
  position:absolute;
  z-index:2;
  pointer-events:none;
  color:#f2eaff;
  -webkit-text-fill-color:#f2eaff;
  text-shadow:0 0 7px rgba(255,255,255,.88),0 0 16px rgba(163,104,255,.72);
  line-height:1;
  opacity:.18;
}
.prom-page .prom-hero h1 span::before{
  content:"✦";
  top:-.12em;
  right:-.11em;
  font-size:.14em;
  animation:promHeroSparkle 4.8s ease-in-out infinite;
}
.prom-page .prom-hero h1 span::after{
  content:"✧";
  left:.06em;
  bottom:-.02em;
  font-size:.11em;
  animation:promHeroSparkle 5.6s 1.7s ease-in-out infinite;
}

.christmas-party-page .christmas-hero h1 span{
  background:linear-gradient(108deg,#caa65e 0%,#d9b76e 28%,#fff0b7 47%,#e3c67e 61%,#c7a257 100%);
  background-size:235% 100%;
  background-position:0 50%;
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent!important;
  -webkit-text-fill-color:transparent;
  filter:drop-shadow(0 0 16px rgba(214,181,109,.13));
  animation:xmasHeroTextShimmer 8.8s ease-in-out infinite;
}
.christmas-party-page .christmas-hero h1 span::before,
.christmas-party-page .christmas-hero h1 span::after{
  position:absolute;
  z-index:2;
  pointer-events:none;
  line-height:1;
  opacity:.18;
  color:#fff2c5;
  -webkit-text-fill-color:#fff2c5;
  text-shadow:0 0 8px rgba(255,244,205,.95),0 0 18px rgba(214,181,109,.72);
}
.christmas-party-page .christmas-hero h1 span::before{
  content:"✦";
  top:-.13em;
  right:-.09em;
  font-size:.13em;
  animation:xmasHeroTwinkle 5.8s ease-in-out infinite;
}
.christmas-party-page .christmas-hero h1 span::after{
  content:"✧";
  left:.08em;
  bottom:-.01em;
  font-size:.10em;
  animation:xmasHeroTwinkle 6.6s 2.1s ease-in-out infinite;
}

@keyframes promHeroTextShimmer{
  0%,20%{background-position:0 50%}
  48%,64%{background-position:100% 50%}
  100%{background-position:0 50%}
}
@keyframes promHeroSparkle{
  0%,72%,100%{opacity:.16;transform:scale(.66) rotate(0deg)}
  80%{opacity:.95;transform:scale(1.18) rotate(20deg)}
  88%{opacity:.28;transform:scale(.78) rotate(34deg)}
}
@keyframes xmasHeroTextShimmer{
  0%,28%{background-position:0 50%}
  54%,68%{background-position:100% 50%}
  100%{background-position:0 50%}
}
@keyframes xmasHeroTwinkle{
  0%,76%,100%{opacity:.14;transform:scale(.62) rotate(0deg)}
  83%{opacity:.92;transform:scale(1.12) rotate(18deg)}
  91%{opacity:.25;transform:scale(.76) rotate(32deg)}
}

@media(max-width:720px){
  .prom-page .prom-hero h1 span::before,
  .christmas-party-page .christmas-hero h1 span::before{right:-.04em}
  .prom-page .prom-hero h1 span::after,
  .christmas-party-page .christmas-hero h1 span::after{left:.03em}
}

@media(prefers-reduced-motion:reduce){
  .prom-page .prom-hero h1 span,
  .christmas-party-page .christmas-hero h1 span,
  .prom-page .prom-hero h1 span::before,
  .prom-page .prom-hero h1 span::after,
  .christmas-party-page .christmas-hero h1 span::before,
  .christmas-party-page .christmas-hero h1 span::after{
    animation:none!important;
  }
  .prom-page .prom-hero h1 span,
  .christmas-party-page .christmas-hero h1 span{background-position:52% 50%}
  .prom-page .prom-hero h1 span::before,
  .prom-page .prom-hero h1 span::after,
  .christmas-party-page .christmas-hero h1 span::before,
  .christmas-party-page .christmas-hero h1 span::after{opacity:.42}
}


/* Animation note: keep background-position non-important so the hero shimmer keyframes can move the gradient. */
/* V4 — Stronger prom and Christmas hero heading gradients with more depth.
   Keeps the page identities distinct: Proms = illuminated violet, Christmas = champagne metallic. */
.prom-page .prom-hero h1,
.christmas-party-page .christmas-hero h1{
  position:relative;
  text-wrap:balance;
}

.prom-page .prom-hero h1{
  color:#f7f3ff;
  text-shadow:0 2px 18px rgba(17,9,32,.24);
}
.prom-page .prom-hero h1:not(:has(span)){
  background:linear-gradient(180deg,#ffffff 0%,#f3eaff 55%,#e8d7ff 100%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  -webkit-text-fill-color:transparent;
}
.prom-page .prom-hero h1 span{
  background:linear-gradient(110deg,
    #6230e9 0%,
    #7e42f5 22%,
    #a96bff 39%,
    #fbf5ff 50%,
    #d2a7ff 58%,
    #8b4cf7 76%,
    #6230e9 100%)!important;
  background-size:285% 100%!important;
  background-position:0 50%;
  -webkit-background-clip:text!important;
  background-clip:text!important;
  color:transparent!important;
  -webkit-text-fill-color:transparent!important;
  filter:drop-shadow(0 0 14px rgba(144,91,255,.18)) drop-shadow(0 10px 22px rgba(22,10,40,.12));
  animation:promHeroTextShimmer 6.8s -3.4s ease-in-out infinite!important;
  text-shadow:none!important;
}
.prom-page .prom-hero h1 span::before,
.prom-page .prom-hero h1 span::after{
  text-shadow:0 0 8px rgba(255,255,255,.95),0 0 18px rgba(183,132,255,.85)!important;
}
.prom-page .prom-hero h1 span::before{
  top:-.16em!important;
  right:-.13em!important;
  font-size:.16em!important;
}
.prom-page .prom-hero h1 span::after{
  left:.04em!important;
  bottom:-.05em!important;
  font-size:.12em!important;
}

.christmas-party-page .christmas-hero h1{
  color:#fffaf0;
  text-shadow:0 2px 18px rgba(18,15,9,.18);
}
.christmas-party-page .christmas-hero h1:not(:has(span)){
  background:linear-gradient(180deg,#fffdf8 0%,#fff5df 62%,#f2e2bd 100%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  -webkit-text-fill-color:transparent;
}
.christmas-party-page .christmas-hero h1 span{
  background:linear-gradient(110deg,
    #a97d35 0%,
    #c49b50 20%,
    #e2bd6d 38%,
    #fff8d8 50%,
    #f3dc94 59%,
    #c9a052 77%,
    #a97d35 100%)!important;
  background-size:290% 100%!important;
  background-position:0 50%;
  -webkit-background-clip:text!important;
  background-clip:text!important;
  color:transparent!important;
  -webkit-text-fill-color:transparent!important;
  filter:drop-shadow(0 0 12px rgba(214,181,109,.16)) drop-shadow(0 10px 20px rgba(29,39,30,.10));
  animation:xmasHeroTextShimmer 7.6s -1.8s ease-in-out infinite!important;
  text-shadow:none!important;
}
.christmas-party-page .christmas-hero h1 span::before,
.christmas-party-page .christmas-hero h1 span::after{
  text-shadow:0 0 8px rgba(255,247,218,.98),0 0 18px rgba(220,191,122,.88)!important;
}
.christmas-party-page .christmas-hero h1 span::before{
  top:-.16em!important;
  right:-.12em!important;
  font-size:.15em!important;
}
.christmas-party-page .christmas-hero h1 span::after{
  left:.05em!important;
  bottom:-.04em!important;
  font-size:.11em!important;
}

@media(max-width:720px){
  .prom-page .prom-hero h1 span::before,
  .christmas-party-page .christmas-hero h1 span::before{right:-.06em!important}
  .prom-page .prom-hero h1 span::after,
  .christmas-party-page .christmas-hero h1 span::after{left:.03em!important}
}


/* V5 — Brand Events cool commercial identity. */
.brand-events-page{--brand-gold:#8c78d8;--brand-violet:#8c78d8;--brand-magenta:#7187c8;--brand-silver:#d7d4e3;--brand-blue:#7187c8}
.brand-events-page .eyebrow{color:#a99add!important}
.brand-events-page .brand-hero h1 span{color:transparent!important}
.brand-events-page .brand-awards-copy h2 span{color:transparent!important}
.brand-events-page .brand-heading h2 span,.brand-events-page .brand-working h2 span{color:#8c78d8}
.brand-events-page .brand-hero .primary{background:linear-gradient(110deg,#5d4a98,#8c78d8 52%,#7187c8)!important}
.brand-events-page .line-link{color:#d7d4e3;border-color:#9f94d2}
.brand-events-page .brand-cta{background:radial-gradient(circle at 18% 18%,rgba(140,120,216,.19),transparent 31%),radial-gradient(circle at 82% 22%,rgba(113,135,200,.16),transparent 28%),linear-gradient(125deg,#100d17,#21172e 49%,#0d111c)!important}
.brand-events-page .brand-cta>p span{color:transparent!important}
.home-brand-feature .brand-badge{border-color:rgba(151,137,211,.42);color:#d8d4e8}
.home-brand-feature .kicker{color:#9faee0}
.home-brand-feature h2 span{color:transparent!important}
.home-brand-feature .primary{background:linear-gradient(110deg,#5d4a98,#8c78d8 50%,#7187c8)!important}
.home-brand-feature .line-link{color:#d4d0e4;border-color:#9f94d2}
.brand-events-page .topbar nav>a.active{color:#a99add}