/* =========================================================
   LitUp Vancouver — site-wide visual upgrade (v9)
   Loaded on every page after the page's own <style>.
   ========================================================= */
:root{
  --lu-red:#E0413A; --lu-green:#2FA35B; --lu-amber:#F2B33D; --lu-blue:#4F8CF0;
  --lu-orange:#F2862E; --lu-warm:#FFE2A6;
  --lu-pumpkin:#F39C3C; --lu-violet:#2A1740;
  --lu-saffron:#FFA62B; --lu-maroon:#3B0D1F;
  --lu-pine:#0E3B2A;
}

/* ---------- Season ribbon (above header) ---------- */
.lu-ribbon{
  background:linear-gradient(90deg,#081729 0%,#13305a 50%,#081729 100%);
  color:rgba(255,255,255,.9); font-size:13px; line-height:1.35;
  border-bottom:1px solid rgba(255,255,255,.07);
}
.lu-ribbon .lu-ribbon-in{
  max-width:1120px; margin:0 auto; padding:8px 24px;
  display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap;
}
.lu-ribbon strong{color:var(--gold-light);}
.lu-ribbon a{color:#fff; border-bottom:1px solid rgba(228,193,104,.6);}
.lu-chips{display:flex; gap:8px; flex-wrap:wrap;}
.lu-chip{
  display:inline-flex; align-items:center; gap:6px; padding:3px 10px; border-radius:20px;
  background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.12); font-size:12px; white-space:nowrap;
}
.lu-chip i{width:7px; height:7px; border-radius:50%; display:inline-block; box-shadow:0 0 8px currentColor;}
@media (max-width:760px){ .lu-chips{display:none;} .lu-ribbon .lu-ribbon-in{justify-content:center; text-align:center;} }

/* ---------- C9 bulb strands ---------- */
header{position:sticky;}
.lu-header-strand{
  position:absolute; left:0; right:0; top:100%; height:30px; margin-top:-3px;
  pointer-events:none; z-index:-1; overflow:visible;
}
.lu-strand{display:block;}
.lu-strand svg{display:block; overflow:visible;}
.lu-bulb{animation:luTwinkle 3.4s ease-in-out infinite; transform-box:fill-box; transform-origin:50% 0;}
.lu-bulb .glass{filter:drop-shadow(0 0 3px currentColor) drop-shadow(0 0 7px currentColor);}
.lu-bulb:nth-of-type(3n){animation-delay:.6s;}
.lu-bulb:nth-of-type(4n){animation-delay:1.3s;}
.lu-bulb:nth-of-type(5n){animation-delay:2.1s;}
.lu-bulb:nth-of-type(7n){animation-delay:2.7s;}
@keyframes luTwinkle{
  0%,100%{opacity:.78; transform:rotate(-2deg);}
  50%{opacity:1; transform:rotate(2deg);}
}
.lu-hero-strand{height:46px; margin:0 auto 34px; max-width:980px;}

/* ---------- Hero glow + bokeh ---------- */
.hero{overflow:hidden; isolation:isolate;}
.hero .wrap{position:relative; z-index:2;}
.lu-bokeh{position:absolute; inset:0; z-index:1; pointer-events:none;}
.lu-bokeh span{
  position:absolute; border-radius:50%; filter:blur(1.5px); opacity:.0;
  animation:luFloat 11s ease-in-out infinite;
}
@keyframes luFloat{
  0%{transform:translateY(16px) scale(.9); opacity:0;}
  25%{opacity:.55;}
  70%{opacity:.35;}
  100%{transform:translateY(-70px) scale(1.05); opacity:0;}
}
.lu-own-pill{
  display:inline-flex; align-items:center; gap:10px; margin:0 auto 18px;
  padding:7px 16px 7px 8px; border-radius:30px;
  background:rgba(255,255,255,.09); border:1px solid rgba(228,193,104,.45);
  color:#fff; font-size:14px; font-weight:500; backdrop-filter:blur(4px);
}
.lu-own-pill b{
  background:var(--gold); color:var(--navy-deep); font-size:11px; letter-spacing:.08em;
  text-transform:uppercase; padding:4px 10px; border-radius:20px;
}
.hero h1 em{
  background:linear-gradient(90deg,#FFE2A6,#E4C168 40%,#FFF1CC 55%,#E4C168 70%,#FFE2A6);
  background-size:200% auto; -webkit-background-clip:text; background-clip:text; color:transparent;
  animation:luShine 6s linear infinite;
}
@keyframes luShine{to{background-position:200% center;}}

/* ---------- Buttons: soft glow ---------- */
.btn-primary{box-shadow:0 8px 22px -10px rgba(199,154,46,.85);}
.btn-primary:hover{box-shadow:0 10px 28px -8px rgba(228,193,104,.95);}
.lu-btn-glow{position:relative; overflow:hidden;}
.lu-btn-glow::after{
  content:""; position:absolute; top:0; left:-60%; width:40%; height:100%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);
  transform:skewX(-20deg); animation:luSweep 4.5s ease-in-out infinite;
}
@keyframes luSweep{0%,60%{left:-60%;} 100%{left:130%;}}

/* ---------- Festival trio ---------- */
.lu-fest{background:var(--navy-deep); padding:72px 24px; position:relative;}
.lu-fest .section-head h2{color:#fff;}
.lu-fest .section-head p{color:rgba(255,255,255,.7);}
.lu-fest-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:20px;}
.lu-fest-card{
  border-radius:14px; padding:30px 28px 28px; color:#fff; position:relative; overflow:hidden;
  display:flex; flex-direction:column; min-height:100%;
  border:1px solid rgba(255,255,255,.1);
  transition:transform .25s ease, box-shadow .25s ease;
}
.lu-fest-card:hover{transform:translateY(-4px);}
.lu-fest-card.hal{background:radial-gradient(120% 90% at 100% 0%,rgba(243,156,60,.35),transparent 60%),linear-gradient(160deg,#2A1740,#150b22);}
.lu-fest-card.hal:hover{box-shadow:0 22px 50px -22px rgba(243,156,60,.7);}
.lu-fest-card.diw{background:radial-gradient(120% 90% at 100% 0%,rgba(255,166,43,.4),transparent 60%),linear-gradient(160deg,#5a1230,#2b0816);}
.lu-fest-card.diw:hover{box-shadow:0 22px 50px -22px rgba(255,166,43,.7);}
.lu-fest-card.xmas{background:radial-gradient(120% 90% at 100% 0%,rgba(224,65,58,.35),transparent 60%),linear-gradient(160deg,#0E3B2A,#071d15);}
.lu-fest-card.xmas:hover{box-shadow:0 22px 50px -22px rgba(224,65,58,.6);}
.lu-fest-top{display:flex; align-items:center; justify-content:space-between; margin-bottom:18px;}
.lu-fest-icon{width:52px; height:52px;}
.lu-count{
  text-align:right; font-size:11.5px; letter-spacing:.08em; text-transform:uppercase; color:rgba(255,255,255,.65);
}
.lu-count strong{display:block; font-family:'Fraunces',serif; font-size:30px; line-height:1; color:#fff; letter-spacing:0; text-transform:none;}
.lu-fest-card h3{color:#fff; font-size:23px; margin-bottom:6px;}
.lu-fest-card .lu-price{font-size:14px; color:rgba(255,255,255,.75); margin-bottom:14px;}
.lu-fest-card .lu-price b{color:#fff; font-family:'Fraunces',serif; font-size:20px;}
.lu-fest-card ul{list-style:none; margin:0 0 22px; flex-grow:1;}
.lu-fest-card li{font-size:14px; color:rgba(255,255,255,.85); padding:5px 0 5px 22px; position:relative;}
.lu-fest-card li::before{content:""; position:absolute; left:2px; top:12px; width:8px; height:8px; border-radius:50%; background:currentColor; box-shadow:0 0 8px currentColor;}
.lu-fest-card.hal li::before{color:var(--lu-pumpkin);}
.lu-fest-card.diw li::before{color:var(--lu-saffron);}
.lu-fest-card.xmas li::before{color:var(--lu-red);}
.lu-fest-card .lu-tag{
  display:inline-block; font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  padding:4px 10px; border-radius:20px; background:rgba(255,255,255,.12); margin-bottom:12px; align-self:flex-start;
}
.lu-fest-card .btn{justify-content:center;}
.lu-fest-card.hal .btn{background:var(--lu-pumpkin); color:#1a0f02;}
.lu-fest-card.diw .btn{background:var(--lu-saffron); color:#2b0816;}
.lu-fest-card.xmas .btn{background:#fff; color:var(--lu-pine);}
@media (max-width:900px){ .lu-fest-grid{grid-template-columns:1fr;} }

/* ---------- Own your lights ---------- */
.lu-own{background:linear-gradient(180deg,var(--cream),#fff);}
.lu-own-grid{display:grid; grid-template-columns:1fr auto 1fr; gap:22px; align-items:stretch;}
.lu-own-card{
  background:#fff; border:1px solid var(--line); border-radius:14px; padding:32px 30px;
  box-shadow:0 18px 40px -30px rgba(15,42,74,.45);
}
.lu-own-card.year2{background:var(--navy); color:#fff; border-color:var(--navy);}
.lu-own-card.year2 h3{color:#fff;}
.lu-own-card .lu-yr{font-size:12px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--gold); margin-bottom:8px;}
.lu-own-card h3{font-size:24px; margin-bottom:16px;}
.lu-own-card ul{list-style:none;}
.lu-own-card li{padding:9px 0 9px 30px; position:relative; font-size:15px; border-bottom:1px solid var(--line);}
.lu-own-card.year2 li{border-color:rgba(255,255,255,.12); color:rgba(255,255,255,.9);}
.lu-own-card li:last-child{border-bottom:0;}
.lu-own-card li::before{content:"✓"; position:absolute; left:2px; color:var(--gold); font-weight:700;}
.lu-own-card li.off{color:var(--ink-soft); text-decoration:line-through; text-decoration-color:rgba(199,154,46,.7);}
.lu-own-card.year2 li.off{color:rgba(255,255,255,.55);}
.lu-own-card li.off::before{content:"—"; color:rgba(255,255,255,.4);}
.lu-own-arrow{display:flex; align-items:center; justify-content:center;}
.lu-own-arrow svg{width:64px; height:64px;}
.lu-own-note{
  margin-top:28px; display:grid; grid-template-columns:repeat(3,1fr); gap:18px;
}
.lu-own-note div{background:#fff; border:1px solid var(--line); border-radius:12px; padding:20px 22px; font-size:14.5px; color:var(--ink-soft);}
.lu-own-note b{display:block; color:var(--navy); font-family:'Fraunces',serif; font-size:17px; margin-bottom:4px;}
@media (max-width:860px){
  .lu-own-grid{grid-template-columns:1fr;}
  .lu-own-arrow svg{transform:rotate(90deg); width:44px; height:44px;}
  .lu-own-note{grid-template-columns:1fr;}
}

/* ---------- Package finder ---------- */
.lu-finder{
  margin:0 auto 44px; max-width:860px; background:#fff; border:1px solid var(--line); border-radius:14px;
  padding:28px 30px; box-shadow:0 18px 40px -30px rgba(15,42,74,.45);
  display:grid; grid-template-columns:1.2fr 1fr; gap:28px; align-items:center;
}
.lu-finder label{display:block; font-weight:600; color:var(--navy); margin-bottom:6px; font-size:15px;}
.lu-finder .lu-ft{font-family:'Fraunces',serif; font-size:40px; color:var(--navy); line-height:1;}
.lu-finder .lu-ft small{font-family:'Work Sans',sans-serif; font-size:14px; color:var(--ink-soft);}
.lu-finder input[type=range]{width:100%; margin:16px 0 6px; accent-color:var(--gold); height:28px;}
.lu-finder .lu-hint{font-size:12.5px; color:var(--ink-soft);}
.lu-finder-out{background:var(--cream); border-radius:12px; padding:20px 22px; border:1px dashed rgba(199,154,46,.6);}
.lu-finder-out .lu-pk{font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--gold); font-weight:700;}
.lu-finder-out .lu-pp{font-family:'Fraunces',serif; font-size:34px; color:var(--navy); line-height:1.1; margin:2px 0 6px;}
.lu-finder-out p{font-size:13.5px; color:var(--ink-soft); margin-bottom:12px;}
@media (max-width:760px){ .lu-finder{grid-template-columns:1fr;} }

/* ---------- Pricing card ownership lines ---------- */
.price-card li.lu-own-li{font-weight:600; color:var(--navy);}
.price-card li.lu-own-li::before{content:"★";}
.price-card{transition:transform .25s ease, box-shadow .25s ease;}
.price-card:hover{transform:translateY(-4px); box-shadow:0 24px 50px -26px rgba(15,42,74,.45);}

/* ---------- Service cards + gallery polish ---------- */
.service-card{position:relative;}
.service-card::after{
  content:""; position:absolute; left:0; right:0; top:0; height:3px;
  background:linear-gradient(90deg,var(--lu-red),var(--lu-amber),var(--lu-green),var(--lu-blue));
  opacity:0; transition:opacity .25s ease;
}
.service-card:hover::after{opacity:1;}
.gallery-preview-grid img, .gallery-grid img{
  cursor:zoom-in; transition:transform .35s ease, box-shadow .35s ease, filter .35s ease;
}
.gallery-preview-grid img:hover, .gallery-grid img:hover{
  transform:translateY(-3px) scale(1.015); filter:saturate(1.15) brightness(1.05);
  box-shadow:0 20px 40px -20px rgba(8,23,41,.6), 0 0 0 3px rgba(228,193,104,.5);
}
.lu-lightbox{
  position:fixed; inset:0; z-index:260; background:rgba(5,12,22,.92);
  display:flex; align-items:center; justify-content:center; padding:24px;
  opacity:0; pointer-events:none; transition:opacity .25s ease;
}
.lu-lightbox.on{opacity:1; pointer-events:auto;}
.lu-lightbox img{max-width:min(1100px,100%); max-height:86vh; border-radius:8px; box-shadow:0 30px 80px -20px #000;}
.lu-lightbox button{
  position:absolute; background:rgba(255,255,255,.1); color:#fff; border:1px solid rgba(255,255,255,.2);
  width:46px; height:46px; border-radius:50%; font-size:22px; cursor:pointer;
}
.lu-lightbox .lb-x{top:18px; right:18px;}
.lu-lightbox .lb-prev{left:16px; top:50%; transform:translateY(-50%);}
.lu-lightbox .lb-next{right:16px; top:50%; transform:translateY(-50%);}

/* ---------- Reviews ---------- */
.lu-rating{
  display:inline-flex; align-items:center; gap:12px; margin-top:16px; padding:10px 18px;
  background:#fff; border:1px solid var(--line); border-radius:40px; font-size:14px; color:var(--ink-soft);
}
.lu-rating b{font-family:'Fraunces',serif; font-size:22px; color:var(--navy);}
.lu-rating .stars{color:var(--gold); letter-spacing:2px;}
.lu-review-cta{display:flex; gap:14px; justify-content:center; flex-wrap:wrap; margin-top:30px;}
.t-card{transition:transform .25s ease, box-shadow .25s ease;}
.t-card:hover{transform:translateY(-3px); box-shadow:0 20px 40px -28px rgba(15,42,74,.5);}
.lu-foot-review{
  display:inline-flex; align-items:center; gap:8px; margin-top:16px; padding:9px 16px;
  border:1px solid rgba(228,193,104,.5); border-radius:30px; color:#fff; font-size:13.5px; font-weight:600;
}
.lu-foot-review:hover{background:rgba(228,193,104,.12);}
.lu-foot-review span{color:var(--gold-light); letter-spacing:1px;}

/* ---------- Popup upgrade ---------- */
.popup-card{border-radius:14px; overflow:hidden; padding-top:0;}
.lu-pop-head{
  margin:0 -32px 22px; padding:16px 32px 18px;
  background:radial-gradient(120% 120% at 100% 0%,rgba(199,154,46,.35),transparent 55%),linear-gradient(160deg,#0F2A4A,#081729);
  color:#fff; position:relative;
}
.lu-pop-head .lu-strand{height:34px; margin:0 -32px 4px;}
.lu-pop-head .eyebrow{color:var(--gold-light); margin-bottom:4px;}
.lu-pop-head h3{color:#fff; font-size:25px; margin-bottom:4px;}
.lu-pop-head p{color:rgba(255,255,255,.75); font-size:14px;}
.popup-close{z-index:2; color:rgba(255,255,255,.8); top:10px;}
.popup-close:hover{color:#fff;}
.lu-pop-own{
  display:flex; gap:12px; align-items:flex-start; background:#fff; border:1px solid rgba(199,154,46,.45);
  border-radius:10px; padding:12px 14px; margin-bottom:16px; font-size:13.5px; color:var(--ink);
}
.lu-pop-own svg{flex-shrink:0; width:26px; height:34px;}
.lu-pop-own b{color:var(--navy);}
.lu-pop-trust{display:flex; justify-content:center; gap:14px; flex-wrap:wrap; margin-top:14px; font-size:12px; color:var(--ink-soft);}
.lu-pop-trust span::before{content:"✓ "; color:var(--gold); font-weight:700;}
.lu-pop-wa{display:block; text-align:center; margin-top:10px; font-size:13px; color:#128C4B; font-weight:600;}
.popup-card{max-height:calc(100vh - 32px); overflow-y:auto;}
@media (max-width:480px){
  .popup-card{padding-left:22px; padding-right:22px;}
  .lu-pop-head{margin-left:-22px; margin-right:-22px; padding-left:22px; padding-right:22px;}
  .lu-pop-head .lu-strand{margin-left:-22px; margin-right:-22px;}
}

/* ---------- Mobile action bar ---------- */
.lu-mbar{display:none;}
@media (max-width:760px){
  .lu-mbar{
    display:grid; grid-template-columns:1fr 1fr 1.4fr; gap:8px;
    position:fixed; left:0; right:0; bottom:0; z-index:150;
    padding:10px 12px calc(10px + env(safe-area-inset-bottom));
    background:rgba(8,23,41,.96); backdrop-filter:blur(8px); border-top:1px solid rgba(255,255,255,.1);
  }
  .lu-mbar a{
    display:flex; align-items:center; justify-content:center; gap:7px; padding:12px 6px; border-radius:10px;
    font-weight:700; font-size:14px; color:#fff; background:rgba(255,255,255,.08);
  }
  .lu-mbar a.wa{background:#25D366; color:#052e16;}
  .lu-mbar a.q{background:var(--gold); color:var(--navy-deep);}
  .lu-mbar svg{width:17px; height:17px;}
  body{padding-bottom:76px;}
}

/* ---------- Ownership band on service pages ---------- */
.lu-band{
  background:linear-gradient(90deg,var(--navy-deep),var(--navy)); color:#fff; padding:28px 24px;
}
.lu-band .wrap{display:flex; align-items:center; justify-content:space-between; gap:18px 28px; flex-wrap:wrap;}
.lu-band h3{color:#fff; font-size:22px; margin-bottom:4px;}
.lu-band p{color:rgba(255,255,255,.78); font-size:15px;}
.lu-band .lu-band-strand{width:120px; height:40px; flex-shrink:0;}
.lu-included{display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:16px; margin-top:26px; text-align:left;}
.lu-included div{background:#fff; border:1px solid var(--line); border-radius:12px; padding:18px 20px;}
.lu-included b{display:block; color:var(--navy); font-family:'Fraunces',serif; font-size:17px; margin-bottom:4px;}
.lu-included span{font-size:14px; color:var(--ink-soft);}

@media (prefers-reduced-motion: reduce){
  .lu-bulb, .lu-bokeh span, .hero h1 em, .lu-btn-glow::after{animation:none !important;}
  .lu-bokeh{display:none;}
}

/* popup form sits flat inside the card */
.popup-card form{background:transparent; padding:0; border-radius:0;}
.hero .wrap{padding-top:96px;}
@media (max-width:760px){
  .nav-cta > .btn-primary{display:none;}   /* bottom bar carries the quote button on phones */
  .logo{white-space:nowrap;}
}
.price-card .btn{justify-content:center;}