/* ============================================================
   TOKENS — Rockin' L Holiday Lighting
   Navy / cardinal red / cream, pulled from the trailer wrap & yard sign
============================================================ */
:root{
  --navy:        #0F2039;
  --navy-2:      #16294A;
  --navy-3:      #1E3A61;
  --navy-deep:   #0A1524;
  --cream:       #F3ECDE;
  --cream-dim:   #D9CFBB;
  --red:         #C4262E;
  --red-deep:    #98181F;
  --paper:       #FAF7F1;
  --ink:         #12181F;
  --ink-dim:     #52585F;
  --line:        rgba(15,32,57,0.12);
  --line-dark:   rgba(243,236,222,0.16);
  --snow:        #FFFFFF;

  --display: "Alfa Slab One", "Georgia", serif;
  --script:  "Dancing Script", cursive;
  --body:    "Inter", system-ui, -apple-system, sans-serif;

  --wrap: 1160px;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--body);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block; }
a{ color:inherit; }
ul{ margin:0; padding:0; }
.wrap{ max-width:var(--wrap); margin:0 auto; padding:0 24px; }
section{ position:relative; }

h1,h2,h3,h4{ font-family:var(--display); font-weight:400; line-height:1.05; margin:0; letter-spacing:-0.01em; }
.eyebrow{ font-family:var(--body); font-weight:700; font-size:0.75rem; letter-spacing:0.16em; text-transform:uppercase; color:var(--red); }

.btn{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--body); font-size:0.9rem; font-weight:700;
  letter-spacing:0.02em;
  padding:14px 26px; border-radius:6px; border:1.5px solid transparent;
  text-decoration:none; cursor:pointer; transition:background 0.15s, color 0.15s, border-color 0.15s, transform 0.1s;
}
.btn:active{ transform:translateY(1px); }
.btn-red{ background:var(--red); color:var(--snow); }
.btn-red:hover{ background:var(--red-deep); }
.btn-outline-cream{ border-color:rgba(243,236,222,0.55); color:var(--cream); }
.btn-outline-cream:hover{ background:var(--cream); color:var(--navy); border-color:var(--cream); }
.btn-outline-navy{ border-color:var(--navy); color:var(--navy); }
.btn-outline-navy:hover{ background:var(--navy); color:var(--cream); }

/* ================= HEADER ================= */
header.site{
  background:var(--navy-deep);
  border-bottom:1px solid var(--line-dark);
  position:sticky; top:0; z-index:100;
}
.nav{ display:flex; align-items:center; justify-content:space-between; gap:1.5rem; padding:0.9rem 24px; max-width:var(--wrap); margin:0 auto; }
.brand{ display:flex; align-items:baseline; gap:2px; text-decoration:none; }
.brand-word{ font-family:var(--display); color:var(--cream); font-size:1.35rem; letter-spacing:0.01em; }
.brand-word em{ font-family:var(--script); font-style:normal; color:var(--red); font-size:1.65rem; margin-left:2px; }
.brand-sub{ display:block; font-size:0.6rem; letter-spacing:0.18em; text-transform:uppercase; color:var(--cream-dim); margin-top:-2px; }
.nav-links{ display:flex; gap:1.75rem; list-style:none; }
.nav-links a{ color:var(--cream-dim); text-decoration:none; font-size:0.9rem; font-weight:600; }
.nav-links a:hover{ color:var(--cream); }
.nav-links .mobile-only{ display:none; }
.nav-cta{ display:flex; align-items:center; gap:1rem; flex-shrink:0; }
.nav-phone{ color:var(--cream); font-weight:700; text-decoration:none; font-size:0.95rem; white-space:nowrap; }
.nav-toggle{ display:none; background:none; border:0; color:var(--cream); cursor:pointer; flex-shrink:0; }
.nav-toggle svg{ width:26px; height:26px; }

@media (max-width:900px){
  .nav-links{
    display:none; position:absolute; top:100%; left:0; right:0;
    background:var(--navy-deep); flex-direction:column; gap:0; padding:0.5rem 24px 1rem;
    border-bottom:1px solid var(--line-dark);
  }
  .nav-links.nav-links-open{ display:flex; }
  .nav-links a{ padding:0.75rem 0; border-bottom:1px solid var(--line-dark); }
  .nav-links .mobile-only{ display:block; }
  .nav-toggle{ display:block; }
  .nav-phone span{ display:none; }
}

@media (max-width:520px){
  .nav-phone, .nav-cta .btn-red{ display:none; }
}

/* ================= HERO ================= */
.hero{
  background:
    radial-gradient(120% 90% at 15% 0%, rgba(196,38,46,0.14) 0%, rgba(196,38,46,0) 45%),
    radial-gradient(140% 100% at 85% 100%, var(--navy-3) 0%, var(--navy) 45%, var(--navy-deep) 100%);
  color:var(--cream);
  padding:5rem 0 4.5rem;
  overflow:hidden;
}
.snowfield{ position:absolute; inset:0; overflow:hidden; pointer-events:none; }
.snowfield span{
  position:absolute; top:-10px; display:block; width:6px; height:6px; border-radius:50%;
  background:rgba(255,255,255,0.55); animation:fall linear infinite;
}
@keyframes fall{
  to{ transform:translateY(110vh); }
}
.hero-inner{ position:relative; max-width:760px; }
.hero-badges{ display:flex; flex-wrap:wrap; gap:0.6rem; margin-bottom:1.25rem; }
.chip{
  display:inline-flex; align-items:center; gap:0.4rem;
  background:rgba(243,236,222,0.1); border:1px solid rgba(243,236,222,0.25);
  color:var(--cream); font-size:0.75rem; font-weight:700; letter-spacing:0.06em; text-transform:uppercase;
  padding:0.35rem 0.7rem; border-radius:999px;
}
.chip .dot{ width:6px; height:6px; border-radius:50%; background:var(--red); }
.hero h1{ font-size:2.75rem; margin-bottom:1rem; }
.hero h1 .accent{ color:var(--red); }
.hero-sub{ font-size:1.125rem; color:var(--cream-dim); max-width:600px; margin-bottom:1.75rem; }
.hero-actions{ display:flex; flex-wrap:wrap; gap:1rem; margin-bottom:2.5rem; }
.hero-tag{ font-family:var(--script); color:var(--red); font-size:1.75rem; }

@media (max-width:600px){
  .hero h1{ font-size:2.1rem; }
}

/* ================= TRUST STRIP ================= */
.trust-strip{ background:var(--cream); padding:1.5rem 0; border-bottom:1px solid var(--line); }
.trust-row{ display:flex; flex-wrap:wrap; justify-content:center; gap:2.25rem; }
.trust-item{ display:flex; align-items:center; gap:0.6rem; font-weight:700; font-size:0.9rem; color:var(--navy); }
.trust-item svg{ width:20px; height:20px; color:var(--red); flex-shrink:0; }

/* ================= SECTION GENERIC ================= */
.section{ padding:4.5rem 0; }
.section-head{ max-width:640px; margin:0 auto 2.75rem; text-align:center; }
.section-head h2{ font-size:2rem; color:var(--navy); margin-top:0.5rem; }
.section-head p{ color:var(--ink-dim); margin-top:0.75rem; font-size:1.0625rem; }
.section-navy{ background:var(--navy); color:var(--cream); }
.section-navy .section-head h2{ color:var(--cream); }
.section-navy .section-head p{ color:var(--cream-dim); }

/* ================= SERVICES ================= */
.service-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:1.25rem; }
.service-card{
  background:var(--snow); border:1px solid var(--line); border-radius:10px; padding:1.75rem;
  box-shadow:0 1px 3px rgba(15,32,57,0.05);
}
.service-card .icon{
  width:44px; height:44px; border-radius:8px; background:rgba(196,38,46,0.1);
  display:flex; align-items:center; justify-content:center; margin-bottom:1rem;
}
.service-card .icon svg{ width:24px; height:24px; color:var(--red); }
.service-card h3{ font-family:var(--body); font-weight:800; font-size:1.0625rem; color:var(--navy); margin-bottom:0.4rem; }
.service-card p{ font-size:0.9375rem; color:var(--ink-dim); margin:0; }

/* ================= PRICING ================= */
.pricing-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:1.5rem; max-width:900px; margin:0 auto; }
.pricing-card{
  background:var(--snow); border:1px solid var(--line); border-radius:12px; padding:2rem;
  box-shadow:0 1px 3px rgba(15,32,57,0.05); text-align:center;
}
.pricing-card.featured{ border-color:var(--red); box-shadow:0 4px 20px rgba(196,38,46,0.12); position:relative; }
.pricing-card .pricing-tag{ font-family:var(--body); font-weight:700; font-size:0.75rem; letter-spacing:0.1em; text-transform:uppercase; color:var(--red); margin-bottom:0.5rem; display:block; }
.pricing-card h3{ font-family:var(--body); font-weight:800; font-size:1.1875rem; color:var(--navy); margin-bottom:0.75rem; }
.pricing-card .price{ font-family:var(--display); font-size:2.5rem; color:var(--navy); line-height:1; margin-bottom:0.25rem; }
.pricing-card .price .unit{ font-family:var(--body); font-size:0.9375rem; font-weight:600; color:var(--ink-dim); }
.pricing-card p{ color:var(--ink-dim); font-size:0.9375rem; margin:0.75rem 0 0; }
.pricing-note{ text-align:center; color:var(--ink-dim); font-size:0.9rem; margin-top:1.75rem; max-width:640px; margin-left:auto; margin-right:auto; }

/* ================= LIGHT SHOWS ================= */
.showcase-eq{ display:flex; align-items:flex-end; justify-content:center; gap:6px; height:64px; margin:2rem auto; }
.showcase-eq span{
  width:8px; border-radius:3px; background:linear-gradient(180deg,var(--red),var(--cream));
  animation:eq-bounce 1.1s ease-in-out infinite; transform-origin:bottom;
}
.showcase-eq span:nth-child(1){ height:30%; animation-delay:-0.9s; }
.showcase-eq span:nth-child(2){ height:70%; animation-delay:-0.5s; }
.showcase-eq span:nth-child(3){ height:45%; animation-delay:-1.1s; }
.showcase-eq span:nth-child(4){ height:90%; animation-delay:-0.3s; }
.showcase-eq span:nth-child(5){ height:55%; animation-delay:-0.7s; }
.showcase-eq span:nth-child(6){ height:80%; animation-delay:-0.2s; }
.showcase-eq span:nth-child(7){ height:40%; animation-delay:-1.3s; }
.showcase-eq span:nth-child(8){ height:65%; animation-delay:-0.6s; }
.showcase-eq span:nth-child(9){ height:35%; animation-delay:-0.9s; }
.showcase-eq span:nth-child(10){ height:75%; animation-delay:-0.4s; }
@keyframes eq-bounce{
  0%, 100%{ transform:scaleY(0.4); }
  50%{ transform:scaleY(1); }
}
@media (prefers-reduced-motion: reduce){
  .showcase-eq span{ animation:none; transform:scaleY(0.7); }
}

/* ================= HOW IT WORKS ================= */
.steps{ display:grid; grid-template-columns:repeat(4,1fr); gap:1.5rem; counter-reset:step; }
.step{ text-align:center; }
.step .num{
  width:40px; height:40px; margin:0 auto 0.85rem; border-radius:50%;
  background:var(--red); color:var(--snow); display:flex; align-items:center; justify-content:center;
  font-family:var(--body); font-weight:800; font-size:1.05rem;
}
.step h4{ font-family:var(--body); font-weight:800; font-size:1rem; color:var(--cream); margin-bottom:0.35rem; }
.step p{ font-size:0.9rem; color:var(--cream-dim); margin:0; }
@media (max-width:800px){ .steps{ grid-template-columns:1fr 1fr; } }

/* ================= GALLERY ================= */
.gallery-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; }
.gallery-card{
  aspect-ratio:4/3; border-radius:10px; overflow:hidden; position:relative;
  background:linear-gradient(160deg,var(--navy-3),var(--navy) 60%,var(--navy-deep));
}
.gallery-card svg{ position:absolute; inset:0; width:100%; height:100%; }
.gallery-card img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform 0.25s ease; }
.gallery-card:hover img{ transform:scale(1.04); }
.gallery-note{ text-align:center; color:var(--ink-dim); font-size:0.875rem; margin-top:1.25rem; }
@media (max-width:800px){ .gallery-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:520px){ .gallery-grid{ grid-template-columns:1fr; } }

/* ================= SERVICE AREA ================= */
.area-list{ display:flex; flex-wrap:wrap; gap:0.6rem; justify-content:center; margin-top:1.5rem; }
.area-chip{
  background:var(--paper); border:1px solid var(--line); color:var(--navy);
  font-size:0.875rem; font-weight:700; padding:0.5rem 1rem; border-radius:999px;
  text-decoration:none; transition:background 0.15s, color 0.15s, border-color 0.15s;
}
.area-chip:hover{ background:var(--red); color:var(--snow); border-color:var(--red); }

/* ================= FAQ ================= */
.faq-list{ max-width:760px; margin:0 auto; }
.faq-item{ border-bottom:1px solid var(--line); }
.faq-q{
  width:100%; text-align:left; background:none; border:0; cursor:pointer;
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding:1.25rem 0; font-family:var(--body); font-weight:700; font-size:1rem; color:var(--navy);
}
.faq-q .plus{ font-size:1.4rem; color:var(--red); transition:transform 0.15s; flex-shrink:0; }
.faq-item.open .faq-q .plus{ transform:rotate(45deg); }
.faq-a{ max-height:0; overflow:hidden; transition:max-height 0.2s ease; }
.faq-a p{ padding:0 0 1.25rem; color:var(--ink-dim); font-size:0.9375rem; margin:0; }
.faq-item.open .faq-a{ max-height:280px; }

/* ================= QUOTE FORM ================= */
.quote-panel{
  background:var(--snow); border:1px solid var(--line); border-radius:14px;
  padding:2.5rem; max-width:640px; margin:0 auto; box-shadow:0 4px 24px rgba(15,32,57,0.08);
}
.form-row{ display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
@media (max-width:600px){ .form-row{ grid-template-columns:1fr; } }
.form-group{ margin-bottom:1.1rem; }
.form-group label{ display:block; font-weight:700; font-size:0.85rem; margin-bottom:0.4rem; color:var(--navy); }
.form-group input, .form-group select, .form-group textarea{
  width:100%; padding:0.7rem 0.9rem; border:1.5px solid var(--line); border-radius:6px;
  font:inherit; font-size:0.9375rem; background:var(--paper);
}
.form-group input:focus, .form-group select:focus, .form-group textarea:focus{
  outline:2px solid var(--red); outline-offset:1px; border-color:var(--red);
}
.form-group textarea{ min-height:100px; resize:vertical; }

/* ================= INTERIOR PAGE HEADER (locations, etc.) ================= */
.page-head{
  background:radial-gradient(140% 100% at 85% 100%, var(--navy-3) 0%, var(--navy) 45%, var(--navy-deep) 100%);
  color:var(--cream); padding:2.75rem 0 3.25rem;
}
.crumb{ display:block; color:var(--cream-dim); font-size:0.875rem; text-decoration:none; margin-bottom:1.25rem; }
.crumb:hover{ color:var(--cream); }
.page-head .eyebrow{ display:block; }
.page-head h1{ font-size:2.25rem; margin:0.6rem 0 0.85rem; max-width:640px; }
.page-sub{ color:var(--cream-dim); font-size:1.0625rem; max-width:600px; margin:0; }

/* ================= INTERIOR CONTENT ================= */
.content{ padding:3.5rem 0; }
.content h2{ font-size:1.5rem; color:var(--navy); margin:2rem 0 0.85rem; }
.content h2:first-child{ margin-top:0; }
.content p{ color:var(--ink-dim); font-size:1rem; max-width:720px; }
.content a{ color:var(--red); font-weight:700; text-decoration:underline; }

.feature-list{ list-style:none; max-width:720px; margin:1.25rem 0; }
.feature-list li{ display:flex; align-items:flex-start; gap:0.75rem; padding:0.6rem 0; color:var(--ink); font-size:0.9375rem; border-bottom:1px solid var(--line); }
.feature-list li:last-child{ border-bottom:0; }
.feature-list svg{ width:20px; height:20px; color:var(--red); flex-shrink:0; margin-top:1px; }

.mini-faq{ max-width:720px; margin-top:1rem; }
.mini-faq .faq-row{ padding:1rem 0; border-bottom:1px solid var(--line); }
.mini-faq b{ display:block; color:var(--navy); font-size:0.9375rem; margin-bottom:0.3rem; }
.mini-faq p{ margin:0; font-size:0.9rem; }

.crosslinks{ display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:1rem; margin-top:1.25rem; max-width:920px; }
.crosslink-card{
  display:block; background:var(--snow); border:1px solid var(--line); border-radius:10px;
  padding:1.25rem; text-decoration:none !important; box-shadow:0 1px 3px rgba(15,32,57,0.05);
}
.crosslink-card b{ display:block; color:var(--navy); font-size:0.9375rem; margin-bottom:0.25rem; font-weight:800; }
.crosslink-card span{ display:block; color:var(--ink-dim); font-size:0.85rem; }

/* ================= BANNER (interior CTA strip) ================= */
.banner{
  background:var(--navy-deep); color:var(--cream); padding:2.5rem 0;
}
.banner .wrap{ display:flex; align-items:center; justify-content:space-between; gap:1.5rem; flex-wrap:wrap; }
.banner h2{ color:var(--cream); font-size:1.5rem; margin:0.35rem 0 0.35rem; }
.banner p{ color:var(--cream-dim); margin:0; }

/* ================= FOOTER ================= */
footer{ background:var(--navy-deep); color:var(--cream-dim); padding:3rem 0 2rem; }
.footer-grid{ display:grid; grid-template-columns:1.2fr 1fr 1fr 1fr; gap:2rem; margin-bottom:2rem; }
.footer-brand p{ font-size:0.9375rem; margin-top:0.75rem; max-width:320px; }
.footer-col h5{ color:var(--cream); font-size:0.8125rem; letter-spacing:0.1em; text-transform:uppercase; margin-bottom:0.9rem; }
.footer-col ul{ list-style:none; display:flex; flex-direction:column; gap:0.6rem; }
.footer-col a{ text-decoration:none; color:var(--cream-dim); font-size:0.9rem; }
.footer-col a:hover{ color:var(--cream); }
.footer-bottom{ border-top:1px solid var(--line-dark); padding-top:1.5rem; display:flex; justify-content:space-between; flex-wrap:wrap; gap:0.75rem; font-size:0.8125rem; }
@media (max-width:800px){ .footer-grid{ grid-template-columns:1fr; } }