/* Village Trimlight — Permanent Christmas Lights page. Site tokens. */

#vtl-xm { --b:#0c71c3; --ink:#1a1a1a; --mute:#6d7378; --line:#dadada; --bg:#f4f6f8;
  --or:#f38e31; --grn:#1f7a4d; --red:#c0392b; font-family:inherit; color:var(--ink); }
#vtl-xm *,#vtl-xm *::before,#vtl-xm *::after { box-sizing:border-box; }

#vtl-xm .xm-lede { border-left:5px solid var(--b); background:#fff; border-top:1px solid var(--line);
  border-right:1px solid var(--line); border-bottom:1px solid var(--line); padding:26px 28px; margin:0 0 40px; }
#vtl-xm .xm-lede p { margin:0; font-size:17px; line-height:1.65; color:#3d444a; }
#vtl-xm .xm-lede p + p { margin-top:12px; }
#vtl-xm .xm-lede strong { color:var(--ink); font-weight:700; }

#vtl-xm h2.xm-h { font-size:26px; font-weight:700; line-height:1.25; letter-spacing:-.015em;
  margin:0 0 14px; color:var(--ink); }
#vtl-xm .xm-sec { margin:0 0 44px; }
#vtl-xm .xm-sec > p { margin:0 0 14px; font-size:16px; line-height:1.7; color:#4c5257; max-width:74ch; }
#vtl-xm .xm-sec > p:last-child { margin-bottom:0; }
#vtl-xm .xm-sec a { color:var(--b); font-weight:600; }

/* comparison */
#vtl-xm .xm-tablewrap { overflow-x:auto; border:1px solid var(--line); background:#fff; margin:22px 0 0; }
#vtl-xm table { border-collapse:collapse; width:100%; min-width:560px; }
#vtl-xm th, #vtl-xm td { text-align:left; padding:14px 18px; border-bottom:1px solid var(--line);
  font-size:14.5px; line-height:1.55; vertical-align:top; }
#vtl-xm thead th { font-size:11px; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  color:var(--mute); background:var(--bg); }
#vtl-xm thead th.is-us { color:#fff; background:var(--b); }
#vtl-xm tbody th { font-weight:700; color:var(--ink); font-size:14.5px; width:30%; }
#vtl-xm td.is-us { background:#f2f8fd; font-weight:600; color:var(--ink); }
#vtl-xm tr:last-child th, #vtl-xm tr:last-child td { border-bottom:none; }

/* year strip */
#vtl-xm .xm-year { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:1px; background:var(--line); border:1px solid var(--line); margin:22px 0 0; }
#vtl-xm .xm-m { background:#fff; padding:16px 18px; display:flex; flex-direction:column; gap:5px; }
#vtl-xm .xm-m-n { font-size:11px; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  color:var(--b); }
#vtl-xm .xm-m-d { font-size:14px; line-height:1.5; color:#4c5257; }
#vtl-xm .xm-chip { display:inline-block; width:13px; height:13px; margin-right:5px; vertical-align:-2px;
  border:1px solid rgba(0,0,0,.12); }

/* timing callout */
#vtl-xm .xm-now { padding:22px 24px; background:#fff7ee; border-left:5px solid var(--or);
  border-top:1px solid var(--line); border-right:1px solid var(--line); border-bottom:1px solid var(--line);
  font-size:15.5px; line-height:1.65; color:#42484d; margin:0 0 44px; }
#vtl-xm .xm-now strong { color:var(--ink); }

#vtl-xm .xm-note { padding:20px 22px; background:var(--bg); border-left:4px solid var(--line);
  font-size:14.5px; line-height:1.65; color:#4c5257; margin:22px 0 0; }
#vtl-xm .xm-note strong { color:var(--ink); }

/* CTA */
#vtl-xm .xm-cta { margin:44px 0 0; padding:30px 28px; background:var(--b); color:#fff;
  display:flex; flex-direction:column; gap:12px; align-items:flex-start; }
#vtl-xm .xm-cta h2 { margin:0; font-size:25px; font-weight:700; line-height:1.28; color:#fff; }
#vtl-xm .xm-cta p { margin:0; font-size:16px; line-height:1.6; color:#e6f1fa; max-width:64ch; }
#vtl-xm .xm-btn { display:inline-block; margin-top:8px; padding:15px 36px; background:#fff;
  color:var(--b); font-size:14px; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  text-decoration:none; border:2px solid #fff; transition:background .15s,color .15s; }
#vtl-xm .xm-btn:hover { background:transparent; color:#fff; }
#vtl-xm .xm-btn:focus-visible { outline:3px solid #fff; outline-offset:3px; }
#vtl-xm .xm-cta-phone { font-size:15px; color:#cfe4f6; }
#vtl-xm .xm-cta-phone a { color:#fff; font-weight:700; text-decoration:none; }

@media (max-width:600px) {
  #vtl-xm h2.xm-h { font-size:22px; }
  #vtl-xm .xm-lede { padding:20px; }
  #vtl-xm .xm-lede p { font-size:16px; }
  #vtl-xm .xm-cta { padding:24px 20px; }
}
