/* =========================================================================
   Festive lights theme. Loaded only when site.json has
     "features": { "festiveLights": true, "snow": true }
   Bulb colours are tokens (--light-1..4, from brand.lightColors), so a
   Halloween season is a colour change, not a rewrite. Pure CSS: no images,
   no scripts, CSP-safe. All motion stops under prefers-reduced-motion
   (the blanket rule in styles.css).
   ========================================================================= */

.festive {
  /* One garland tile is 144x40px: a sagging wire with four sockets, and a bulb + soft glow
     per colour. Split into two layers (A = colours 1+3, B = colours 2+4) that fade in
     opposite phase, which reads as twinkling. */
  --garland-wire: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='144' height='40'%3E%3Cpath d='M0 6 Q72 22 144 6' fill='none' stroke='%23ffffff' stroke-opacity='.38' stroke-width='1.5'/%3E%3Cpath d='M18 9v4M54 13v4M90 13v4M126 9v4' stroke='%239aa3b2' stroke-width='3.5'/%3E%3C/svg%3E");
  --bulb-1: radial-gradient(circle 6px at 18px 18px, var(--light-1) 0 96%, transparent), radial-gradient(circle 16px at 18px 18px, rgba(var(--light-1-rgb), .5), transparent);
  --bulb-2: radial-gradient(circle 6px at 54px 22px, var(--light-2) 0 96%, transparent), radial-gradient(circle 16px at 54px 22px, rgba(var(--light-2-rgb), .5), transparent);
  --bulb-3: radial-gradient(circle 6px at 90px 22px, var(--light-3) 0 96%, transparent), radial-gradient(circle 16px at 90px 22px, rgba(var(--light-3-rgb), .5), transparent);
  --bulb-4: radial-gradient(circle 6px at 126px 18px, var(--light-4) 0 96%, transparent), radial-gradient(circle 16px at 126px 18px, rgba(var(--light-4-rgb), .5), transparent);
}

/* ------------------------------ Garlands -------------------------------- */
.festive .site-header::before, .festive .site-header::after,
.festive .cta-band::before, .festive .cta-band::after,
.festive .site-footer::before, .festive .site-footer::after,
.festive .intro-overlay::after {
  content: ""; position: absolute; left: 0; right: 0; height: 40px; pointer-events: none;
  background-repeat: repeat-x; background-size: 144px 40px; background-position: center top;
}
.festive .site-footer { position: relative; }
.festive .site-header::before, .festive .site-header::after { top: 100%; }
.festive .cta-band::before, .festive .cta-band::after,
.festive .site-footer::before, .festive .site-footer::after,
.festive .intro-overlay::after { top: 0; }
.festive .cta-band { padding-top: 96px; }
.festive .site-footer { padding-top: 84px; }

.festive .site-header::before, .festive .cta-band::before, .festive .site-footer::before {
  background-image: var(--bulb-1), var(--bulb-3), var(--garland-wire);
  animation: twinkleA 2.6s ease-in-out infinite;
}
.festive .site-header::after, .festive .cta-band::after, .festive .site-footer::after {
  background-image: var(--bulb-2), var(--bulb-4);
  animation: twinkleB 2.6s ease-in-out infinite;
}
.festive .intro-overlay::after { background-image: var(--bulb-1), var(--bulb-2), var(--bulb-3), var(--bulb-4), var(--garland-wire); }
@keyframes twinkleA { 0%, 100% { opacity: 1; } 50% { opacity: .45; } }
@keyframes twinkleB { 0%, 100% { opacity: .45; } 50% { opacity: 1; } }
/* the wire lives in layer A; keep it from fading too far */

/* ------------------------------ Snow (features.snow) -------------------- */
.snow .hero-inner { position: relative; z-index: 1; }
.snow {
  --snow: radial-gradient(circle 2.5px at 31px 43px, #fff 0 90%, transparent),
    radial-gradient(circle 2px at 157px 113px, rgba(255,255,255,.85) 0 90%, transparent),
    radial-gradient(circle 1.5px at 67px 151px, rgba(255,255,255,.7) 0 90%, transparent),
    radial-gradient(circle 1.5px at 211px 59px, rgba(255,255,255,.6) 0 90%, transparent),
    radial-gradient(circle 3px at 97px 23px, rgba(255,255,255,.5) 0 90%, transparent),
    radial-gradient(circle 1px at 13px 89px, rgba(255,255,255,.8) 0 90%, transparent);
  /* Tile sizes all divide 900px, so the pattern repeats exactly every 900px of fall while
     the mix of sizes keeps it from reading as a grid. */
  --snow-size: 180px 180px, 300px 300px, 225px 225px, 450px 450px, 300px 300px, 150px 150px;
}
/* PERFORMANCE: the layer is 900px taller than the hero and slides down by exactly 900px using
   transform, which the compositor (GPU) handles without repainting. Animating
   background-position instead repaints the whole hero every frame and stutters on phones. */
.snow .hero::before {
  content: ""; position: absolute; left: 0; right: 0; top: -900px; bottom: 0; z-index: 0; pointer-events: none; opacity: .8;
  background-image: var(--snow); background-size: var(--snow-size);
  animation: snowfall 34s linear infinite; will-change: transform;
}
@keyframes snowfall { to { transform: translate3d(0, 900px, 0); } }

/* ------------------------------ Bulb map outline ------------------------ */
.festive .neon-map { width: 300px; overflow: visible; filter: drop-shadow(0 0 5px rgba(255,255,255,.4)); }
.map-wire { fill: none; stroke: rgba(255,255,255,.3); stroke-linejoin: round; }
/* dash "0 4" + round caps = a dot every 4th unit of the 96-unit path: 24 bulbs per colour */
.map-bulb { fill: none; stroke-linecap: round; stroke-dasharray: 0 4; animation: bulbTwinkle 2.6s ease-in-out infinite; }
.map-bulb.b1 { stroke: var(--light-1); }
.map-bulb.b2 { stroke: var(--light-2); stroke-dashoffset: -1; animation-delay: -.65s; }
.map-bulb.b3 { stroke: var(--light-3); stroke-dashoffset: -2; animation-delay: -1.3s; }
.map-bulb.b4 { stroke: var(--light-4); stroke-dashoffset: -3; animation-delay: -1.95s; }
@keyframes bulbTwinkle { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
.festive .av-ring { border-color: rgba(255,255,255,.07); }
.festive .area-map { border-color: rgba(255,255,255,.14); }
@media (max-width: 600px) { .festive .neon-map { width: 230px; } }

/* ------------------------------ Colour-cycled accents ------------------- */
/* section kickers: three little bulbs instead of plain rules */
.festive .sec-kicker::before, .festive .sec-kicker::after, .festive .hero-eyebrow::before {
  width: 36px; height: 9px; background:
    radial-gradient(circle 3.5px at 5px 4.5px, var(--light-1) 0 92%, transparent),
    radial-gradient(circle 3.5px at 18px 4.5px, var(--light-2) 0 92%, transparent),
    radial-gradient(circle 3.5px at 31px 4.5px, var(--light-4) 0 92%, transparent);
}
.festive .svc-card:nth-child(4n+1) .svc-card-no, .festive .step:nth-child(4n+1) .snum, .festive .trust-item:nth-child(4n+1) svg { color: var(--light-1); }
.festive .svc-card:nth-child(4n+2) .svc-card-no, .festive .step:nth-child(4n+2) .snum, .festive .trust-item:nth-child(4n+2) svg { color: var(--light-2); }
.festive .svc-card:nth-child(4n+3) .svc-card-no, .festive .step:nth-child(4n+3) .snum, .festive .trust-item:nth-child(4n+3) svg { color: var(--light-3); }
.festive .svc-card:nth-child(4n+4) .svc-card-no, .festive .step:nth-child(4n+4) .snum, .festive .trust-item:nth-child(4n+4) svg { color: var(--light-4); }
.festive .svc-card:nth-child(4n+1):hover { border-color: var(--light-1); }
.festive .svc-card:nth-child(4n+2):hover { border-color: var(--light-2); }
.festive .step { border-top: 3px solid transparent; }
.festive .step:nth-child(4n+1) { border-top-color: var(--light-1); }
.festive .step:nth-child(4n+2) { border-top-color: var(--light-2); }
.festive .step:nth-child(4n+3) { border-top-color: var(--light-3); }
.festive .step:nth-child(4n+4) { border-top-color: var(--light-4); }
.festive .chips li:nth-child(4n+1) { border-color: rgba(var(--light-1-rgb), .7); }
.festive .chips li:nth-child(4n+2) { border-color: rgba(var(--light-2-rgb), .7); }
.festive .chips li:nth-child(4n+3) { border-color: rgba(var(--light-3-rgb), .7); }
.festive .chips li:nth-child(4n+4) { border-color: rgba(var(--light-4-rgb), .7); }
.festive .btn-primary { box-shadow: 0 0 0 1px rgba(var(--accent-rgb), .35), 0 6px 26px rgba(var(--accent-rgb), .35); }
.festive .contact-info::before { background: linear-gradient(90deg, var(--light-1), var(--light-3), var(--light-2), var(--light-4)); }
.festive .photo-grid .gphoto { outline: 1px solid rgba(255,255,255,.08); }

/* ------------------------------ Mobile menu ----------------------------- */
@media (max-width: 860px) {
  /* garland across the top of the drawer (two layers so it twinkles) */
  .festive .nav-links::before, .festive .nav-links::after {
    content: ""; position: absolute; left: 0; right: 0; top: 64px; height: 40px; pointer-events: none;
    background-repeat: repeat-x; background-size: 144px 40px; background-position: center top;
  }
  .festive .nav-links::before { background-image: var(--bulb-1), var(--bulb-3), var(--garland-wire); animation: twinkleA 2.6s ease-in-out infinite; }
  .festive .nav-links::after  { background-image: var(--bulb-2), var(--bulb-4); animation: twinkleB 2.6s ease-in-out infinite; }
  .festive .nav-links { padding-top: 124px; }
  /* snow behind the links */
  /* static flakes here: the drawer is only open for a moment, so it isn't worth an animation */
  .snow .nav-links { background-image: var(--snow); background-size: var(--snow-size); }
  /* a glowing bulb either side of each link, cycling through the light colours */
  .festive .nav-links > li:not(.drawer-head):not(.drawer-cta) > a { display: flex; align-items: center; justify-content: center; gap: 16px; }
  .festive .nav-links > li:not(.drawer-head):not(.drawer-cta) > a::before,
  .festive .nav-links > li:not(.drawer-head):not(.drawer-cta) > a::after {
    content: ""; display: block; position: static; flex: none; width: 11px; height: 11px; border-radius: 50%;
    background: var(--bulb-c); box-shadow: 0 0 10px 2px var(--bulb-c), 0 0 22px 6px rgba(var(--bulb-rgb), .35);
    animation: bulbTwinkle 2.6s ease-in-out infinite; animation-delay: var(--bulb-d, 0s);
  }
  .festive .nav-links > li > a::after { animation-delay: calc(var(--bulb-d, 0s) - 1.3s) !important; }
  .festive .nav-links > li:nth-child(4n+2) { --bulb-c: var(--light-1); --bulb-rgb: var(--light-1-rgb); --bulb-d: 0s; }
  .festive .nav-links > li:nth-child(4n+3) { --bulb-c: var(--light-2); --bulb-rgb: var(--light-2-rgb); --bulb-d: -.5s; }
  .festive .nav-links > li:nth-child(4n+4) { --bulb-c: var(--light-3); --bulb-rgb: var(--light-3-rgb); --bulb-d: -1s; }
  .festive .nav-links > li:nth-child(4n+5) { --bulb-c: var(--light-4); --bulb-rgb: var(--light-4-rgb); --bulb-d: -1.5s; }
  .festive .nav-links > li > a:hover, .festive .nav-links > li > a[aria-current="page"] { color: var(--bulb-c); }
  /* "MENU" label gets the three-bulb mark */
  .festive .drawer-head span { display: inline-flex; align-items: center; gap: 10px; }
  .festive .drawer-head span::before { content: ""; width: 36px; height: 9px; background:
    radial-gradient(circle 3.5px at 5px 4.5px, var(--light-1) 0 92%, transparent),
    radial-gradient(circle 3.5px at 18px 4.5px, var(--light-2) 0 92%, transparent),
    radial-gradient(circle 3.5px at 31px 4.5px, var(--light-4) 0 92%, transparent); }
  /* the header's own garland would sit on top of the open drawer */
  body.menu-open .site-header::before, body.menu-open .site-header::after { display: none; }
}

/* ------------------------------ Trust strip: bulbs with a check ---------- */
.festive .trust-item .bulb-ico { width: 32px; height: 32px; filter: drop-shadow(0 0 5px currentColor); animation: bulbGlow 3.2s ease-in-out infinite; }
@keyframes bulbGlow { 0%, 100% { opacity: 1; } 50% { opacity: .7; } }   /* gentler than the garland: these sit next to text */
.festive .trust-item:nth-child(2n) .bulb-ico { animation-delay: -1.6s; }
.bulb-socket { fill: #9aa3b2; }
.bulb-check { fill: none; stroke: var(--dark-deep); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }

/* ------------------------------ Split services backdrop ------------------ */
/* Two services, each with "backdrop": "snowflakes" | "bats" in site.json: the section splits
   down the middle with a pattern behind each half. Patterns are tiny inline SVG tiles (static:
   nothing to animate, nothing to repaint). */
.festive {
  --bd-snowflakes: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='170' height='170' fill='none' stroke='%23ffffff' stroke-linecap='round' stroke-width='1.3'%3E%3Cg id='f' opacity='.2'%3E%3Cpath d='M0-11v22M-9.500-5.500l19 11M-9.500 5.500l19-11M0-11l-2.600 2.800M0-11l2.600 2.800M0 11l-2.600-2.800M0 11l2.600-2.800M-9.500-5.500l3.700.9M-9.500-5.500l1.100 3.700M9.500 5.500l-3.700-.9M9.500 5.500l-1.100-3.700M-9.500 5.500l3.700-.9M-9.500 5.500l1.100-3.700M9.500-5.500l-3.700.9M9.500-5.500l-1.100 3.700' transform='translate(34 38)'/%3E%3C/g%3E%3Cg opacity='.13'%3E%3Cpath d='M0-11v22M-9.500-5.500l19 11M-9.500 5.500l19-11M0-11l-2.600 2.800M0-11l2.600 2.800M0 11l-2.600-2.800M0 11l2.600-2.800' transform='translate(122 96) scale(1.7) rotate(18)'/%3E%3C/g%3E%3Cg opacity='.16'%3E%3Cpath d='M0-7v14M-6-3.500l12 7M-6 3.500l12-7' transform='translate(58 136)'/%3E%3Cpath d='M0-7v14M-6-3.500l12 7M-6 3.500l12-7' transform='translate(140 22) scale(.8)'/%3E%3C/g%3E%3C/svg%3E");
  --bd-bats: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='190' height='160'%3E%3Cpath id='b' fill='%23c9a2ff' fill-opacity='.2' transform='translate(14 22)' d='M32 6l3-5 2 6c6-4 14-4 22 0-3 1-5 4-5 7-3-2-6-1-8 2-2-3-5-3-7-1-1 3-3 6-7 9-4-3-6-6-7-9-2-2-5-2-7 1-2-3-5-4-8-2 0-3-2-6-5-7 8-4 16-4 22 0l2-6z'/%3E%3Cpath fill='%23ff9a3c' fill-opacity='.17' transform='translate(104 84) rotate(-12) scale(.72)' d='M32 6l3-5 2 6c6-4 14-4 22 0-3 1-5 4-5 7-3-2-6-1-8 2-2-3-5-3-7-1-1 3-3 6-7 9-4-3-6-6-7-9-2-2-5-2-7 1-2-3-5-4-8-2 0-3-2-6-5-7 8-4 16-4 22 0l2-6z'/%3E%3Cpath fill='%23c9a2ff' fill-opacity='.13' transform='translate(120 14) rotate(10) scale(.5)' d='M32 6l3-5 2 6c6-4 14-4 22 0-3 1-5 4-5 7-3-2-6-1-8 2-2-3-5-3-7-1-1 3-3 6-7 9-4-3-6-6-7-9-2-2-5-2-7 1-2-3-5-4-8-2 0-3-2-6-5-7 8-4 16-4 22 0l2-6z'/%3E%3Cpath fill='%23ff9a3c' fill-opacity='.12' transform='translate(26 112) rotate(8) scale(.58)' d='M32 6l3-5 2 6c6-4 14-4 22 0-3 1-5 4-5 7-3-2-6-1-8 2-2-3-5-3-7-1-1 3-3 6-7 9-4-3-6-6-7-9-2-2-5-2-7 1-2-3-5-4-8-2 0-3-2-6-5-7 8-4 16-4 22 0l2-6z'/%3E%3C/svg%3E");
  --bd-tint-snowflakes: linear-gradient(180deg, rgba(90,170,255,.13), rgba(90,170,255,.04));
  --bd-tint-bats: linear-gradient(180deg, rgba(150,80,255,.17), rgba(255,130,30,.07));
}
.svc-split { overflow: hidden; }
.svc-split > .container { position: relative; z-index: 1; }
.svc-split .svc-cards { grid-template-columns: 1fr 1fr; }
.svc-split::before, .svc-split::after { content: ""; position: absolute; top: 0; bottom: 0; width: 50%; z-index: 0; pointer-events: none; }
.svc-split::before { left: 0; }
.svc-split::after { right: 0; border-left: 1px solid rgba(255,255,255,.12); }
.svc-split.bd-left-snowflakes::before, .svc-split.bd-right-snowflakes::after { background-image: var(--bd-snowflakes), var(--bd-tint-snowflakes); background-size: 170px 170px, auto; }
.svc-split.bd-left-bats::before, .svc-split.bd-right-bats::after { background-image: var(--bd-bats), var(--bd-tint-bats); background-size: 190px 160px, auto; }
/* the intro line sits on the busy patterns: give it a solid pill so it stays readable */
.svc-split .sec-head p { display: inline-block; margin-top: 4px; padding: 9px 22px; border-radius: 999px;
  background: color-mix(in srgb, var(--dark) 90%, transparent); border: 1px solid rgba(var(--accent-rgb), .55); color: #fff; font-weight: 600;
  box-shadow: 0 6px 20px rgba(0,0,0,.35); }
@media (max-width: 600px) {
  /* cards stack on phones: first pattern on top, fading into the second below */
  .svc-split .svc-cards { grid-template-columns: 1fr; }
  .svc-split::before, .svc-split::after { width: 100%; left: 0; right: 0; border: 0; }
  .svc-split::before { -webkit-mask-image: linear-gradient(to bottom, #000 46%, transparent 60%); mask-image: linear-gradient(to bottom, #000 46%, transparent 60%); }
  .svc-split::after  { -webkit-mask-image: linear-gradient(to bottom, transparent 48%, #000 62%); mask-image: linear-gradient(to bottom, transparent 48%, #000 62%); }
}