/* ==========================================================
   Christmas Lights page + home-page seasonal banner
   Kept in its own file so the main style.css stays untouched.
   ========================================================== */
:root{
  --gold:#f5c451;
  --gold-deep:#e0a82e;
  --pine:#0f3b2e;
}

/* ---- Hanging string of bulbs ---- */
.light-string{
  position:absolute;left:0;right:0;top:0;height:46px;z-index:1;pointer-events:none;
  display:flex;justify-content:space-between;padding:0 10px;
}
.light-string::before{
  content:"";position:absolute;left:-10px;right:-10px;top:-18px;height:34px;
  border-bottom:2px solid rgba(20,40,30,.9);border-radius:0 0 50% 50%/0 0 100% 100%;
}
.light-string i{
  position:relative;width:11px;height:17px;margin-top:12px;border-radius:50% 50% 50% 50%/40% 40% 60% 60%;
  background:var(--b);box-shadow:0 0 10px 2px var(--b),0 0 22px 4px var(--b);
  animation:twinkle 2.6s ease-in-out infinite;
}
.light-string i::before{content:"";position:absolute;left:2px;top:-5px;width:7px;height:6px;border-radius:2px;background:#1f2a24}
.light-string i:nth-child(4n+1){--b:#ffd36b;animation-delay:0s}
.light-string i:nth-child(4n+2){--b:#ff5a5a;animation-delay:.7s}
.light-string i:nth-child(4n+3){--b:#4ade80;animation-delay:1.3s}
.light-string i:nth-child(4n+4){--b:#60a5fa;animation-delay:1.9s}
.light-string i:nth-child(odd){margin-top:16px}
@media (max-width:700px){.light-string i:nth-child(n+13){display:none}}
@keyframes twinkle{0%,100%{opacity:1}50%{opacity:.45}}
@media (prefers-reduced-motion:reduce){.light-string i{animation:none}}

/* ---- Hero ---- */
.lights-hero{
  background:
    radial-gradient(ellipse at 80% 0%,rgba(245,196,81,.20),transparent 55%),
    radial-gradient(ellipse at 10% 100%,rgba(37,99,235,.28),transparent 60%),
    linear-gradient(180deg,#070f22 0%,var(--navy) 60%,var(--navy-2) 100%);
}
.lights-hero .hero-inner{z-index:2;padding-top:96px}
.lights-hero .hero-bg{opacity:.35}
.lights-eyebrow{color:var(--gold)!important}
.lights-eyebrow::before{background:var(--gold)!important}
.price-pill{
  display:inline-flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px;margin-top:6px;
  background:rgba(245,196,81,.12);border:1px solid rgba(245,196,81,.45);
  padding:10px 18px;border-radius:100px;
}
.price-pill b{color:var(--gold);font-size:17px}
.price-pill span{color:#c7d2e6;font-size:13.5px}
.btn-gold{background:var(--gold);color:#1a1405;box-shadow:0 8px 22px -6px rgba(245,196,81,.55)}
.btn-gold:hover{background:var(--gold-deep)}
.lights-points{list-style:none;padding:0;margin:30px 0 0;display:flex;flex-wrap:wrap;gap:12px 26px}
.lights-points li{display:flex;align-items:center;gap:8px;font-size:14.5px;font-weight:600;color:#e5ebf5}
.lights-points svg{width:18px;height:18px;color:var(--gold);flex:none}

/* ---- Offer cards ---- */
.offer-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:44px}
@media (max-width:800px){.offer-grid{grid-template-columns:1fr}}
.offer-card{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:30px 28px;
  display:flex;flex-direction:column;transition:transform .18s ease,box-shadow .18s ease;
}
.offer-card:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.offer-tag{align-self:flex-start;background:#fff6dc;color:#8a5a00;font-size:12px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;padding:6px 12px;border-radius:100px;margin-bottom:14px}
.offer-card p{font-size:15px}
.offer-card .checklist{margin:6px 0 22px}
.offer-foot{margin-top:auto;padding-top:18px;border-top:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;gap:12px}
.offer-foot b{font-size:18px;color:var(--navy)}
.offer-foot a.more{font-size:14px;font-weight:700;color:var(--blue)}

/* ---- Steps ---- */
.steps{list-style:none;padding:0;margin:44px 0 0;display:grid;grid-template-columns:repeat(4,1fr);gap:22px;counter-reset:none}
@media (max-width:900px){.steps{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.steps{grid-template-columns:1fr}}
.steps li{background:var(--bg);border:1px solid var(--line);border-radius:var(--radius);padding:24px 22px}
.step-num{
  width:38px;height:38px;border-radius:50%;background:var(--navy);color:var(--gold);
  display:flex;align-items:center;justify-content:center;font-weight:800;margin-bottom:14px;
}
.steps h3{font-size:17px;margin-bottom:6px}
.steps p{font-size:14.5px;margin:0}

/* ---- Home-page seasonal banner ---- */
.lights-banner{
  position:relative;overflow:hidden;padding:64px 0 48px;color:#fff;
  background:
    radial-gradient(ellipse at 85% 0%,rgba(245,196,81,.22),transparent 55%),
    linear-gradient(120deg,#070f22 0%,var(--navy) 100%);
}
.lights-banner-inner{position:relative;z-index:2;display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap}
.lights-banner h2{color:#fff;margin-bottom:8px}
.lights-banner p{color:#c7d2e6;margin:0;max-width:560px}

/* ---- Keep the 5-link menu on one line on laptops ---- */
nav.links a,.brand span,.nav-phone{white-space:nowrap}
@media (min-width:901px) and (max-width:1500px){
  nav.links{gap:18px}
  nav.links a{font-size:14px}
  .nav-phone span{display:none}
}
@media (min-width:901px) and (max-width:1040px){
  .brand small{display:none}
  .brand span{font-size:15px}
  .nav-cta .btn-primary{padding:12px 16px}
}

/* ---- Full-screen video version of the home-page banner ----
   The clip is vertical, so on wide screens it plays full height in the
   middle with a blurred copy filling the sides (nothing gets cut off).
   On phones it fills the whole screen. */
.lights-banner.has-video{min-height:100vh;min-height:100svh;padding:0;display:flex;align-items:flex-end;background:#000}
.lb-fill{position:absolute;inset:-40px;width:calc(100% + 80px);height:calc(100% + 80px);object-fit:cover;filter:blur(28px) brightness(.55) saturate(1.2);z-index:0}
.lb-main{position:absolute;top:0;bottom:0;right:max(24px,calc((100% - 1180px)/2 + 24px));height:100%;width:auto;max-width:none;aspect-ratio:9/16;object-fit:cover;z-index:1;box-shadow:0 0 80px rgba(0,0,0,.7)}
.lb-shade{position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,rgba(5,10,24,.88) 0%,rgba(5,10,24,.45) 50%,rgba(5,10,24,.2) 100%)}
.lights-banner.has-video .lights-banner-inner{position:relative;z-index:2;width:100%;padding-top:80px;padding-bottom:80px;display:block}
.lights-banner.has-video .lights-banner-copy{max-width:360px}
.lights-banner.has-video h2{font-size:clamp(30px,3.6vw,46px)}
.lights-banner.has-video h2,.lights-banner.has-video p{text-shadow:0 2px 12px rgba(0,0,0,.85)}
.lights-banner-copy .btn{margin-top:22px}
.lights-banner.has-video .light-string{z-index:3}
/* Medium screens: video moves right so it never sits behind the text */
@media (min-width:761px) and (max-width:1100px){.lb-main{right:0}}
/* Phones: video fills the screen, text sits at the bottom over a dark fade */
@media (max-width:760px){
  .lb-main{left:0;right:0;width:100%;height:100%;aspect-ratio:auto}
  .lb-fill{display:none}
  .lb-shade{z-index:2;background:linear-gradient(0deg,rgba(5,10,24,.95) 0%,rgba(5,10,24,.6) 32%,rgba(5,10,24,0) 55%)}
  .lights-banner.has-video .lights-banner-inner{padding-top:0;padding-bottom:104px}
  .lights-banner.has-video .lights-banner-copy{max-width:none}
}
@media (prefers-reduced-motion:reduce){.lb-fill{display:none}}