/* Footer nav: Packages / Services / More as expandable rows, links opening to the right of
   the title. Without JS every group stays open (plain lists), so nothing is ever unreachable.
   Loaded from inside the footer markup, so it travels with the footer when pages are cloned.
   Only transform and opacity animate. */
.fnav{ --fnav-ease:cubic-bezier(.34,1.4,.64,1); --fnav-out:cubic-bezier(.16,1,.3,1);
  display:flex; flex-direction:column; border-top:1px solid rgba(255,255,255,.08); }
@media(min-width:768px){ .fnav{ grid-column:span 2; } }

.fnav-group{ display:grid; grid-template-columns:minmax(0,10.5rem) minmax(0,1fr); gap:0 16px;
  align-items:start; border-bottom:1px solid rgba(255,255,255,.08); }
@media(min-width:768px){ .fnav-group{ grid-template-columns:minmax(0,13rem) minmax(0,1fr); gap:0 32px; } }

.fnav-title{ appearance:none; background:none; border:0; margin:0; cursor:pointer; text-align:left;
  display:flex; align-items:center; justify-content:space-between; gap:12px; width:100%;
  padding:18px 0; color:#F5F5F5; font:inherit; font-family:'Archivo',sans-serif; font-weight:800;
  font-size:20px; letter-spacing:-0.02em; line-height:1.1; border-radius:8px;
  transition:opacity .35s var(--fnav-out); }
@media(min-width:768px){ .fnav-title{ font-size:24px; padding:22px 0; } }
.fnav-title:hover .fnav-name{ transform:translateX(4px); }
.fnav-title:focus-visible{ outline:2px solid #3B6FD6; outline-offset:4px; }
.fnav-title:active .fnav-name{ transform:translateX(2px) scale(.98); }
.fnav-name{ display:inline-block; white-space:nowrap; transition:transform .45s var(--fnav-ease); }

/* plus that turns into a cross */
.fnav-icon{ position:relative; flex:none; width:22px; height:22px; border-radius:50%;
  border:1px solid rgba(255,255,255,.18); transition:transform .5s var(--fnav-ease); }
.fnav-icon::before,.fnav-icon::after{ content:""; position:absolute; left:50%; top:50%;
  width:9px; height:1.5px; margin:-.75px 0 0 -4.5px; background:currentColor; border-radius:1px; }
.fnav-icon::after{ transform:rotate(90deg); }
.fnav-title:hover .fnav-icon{ border-color:rgba(59,111,214,.7); }
.fnav-group.is-open .fnav-icon{ transform:rotate(135deg); border-color:#3B6FD6; color:#7FB6FF; }

.fnav-links{ list-style:none; margin:0; padding:18px 0; display:grid; gap:10px 32px;
  color:#9A9AA0; font-size:14px; line-height:1.5; }
@media(min-width:768px){ .fnav-links{ padding:24px 0; grid-template-columns:repeat(2,minmax(0,1fr)); } }
/* Services reads in a set order (A–Z with Overhead, Lighting, Upgrades moved up), so it fills down each column (5 rows for its 9 links) to read in order */
@media(min-width:768px){ #fnav-services{ grid-auto-flow:column; grid-template-rows:repeat(5,auto); } }
.fnav-links a{ display:inline-block; color:inherit; text-decoration:none; border-radius:4px;
  transition:color .25s ease, transform .45s var(--fnav-ease); }
.fnav-links a:hover{ color:#F5F5F5; transform:translateX(3px); }
.fnav-links a:focus-visible{ color:#F5F5F5; outline:2px solid #3B6FD6; outline-offset:3px; }
.fnav-links a:active{ color:#3B6FD6; transform:translateX(1px); }

/* JS-enhanced state */
.fnav.is-ready .fnav-group:not(.is-open) .fnav-links{ display:none; }
.fnav.is-ready.has-open .fnav-group:not(.is-open) .fnav-title{ opacity:.4; }
.fnav.is-ready.has-open .fnav-group:not(.is-open) .fnav-title:hover,
.fnav.is-ready.has-open .fnav-group:not(.is-open) .fnav-title:focus-visible{ opacity:.8; }
.fnav.is-ready .fnav-group.is-open .fnav-links li{ animation:fnav-in .55s var(--fnav-out) both;
  animation-delay:calc(var(--i,0) * 40ms); }
@keyframes fnav-in{ from{ opacity:0; transform:translateX(-10px); } to{ opacity:1; transform:none; } }

/* no JS: titles are just headings, not buttons that do nothing */
.fnav:not(.is-ready) .fnav-icon{ display:none; }
.fnav:not(.is-ready) .fnav-title{ cursor:default; }

@media (prefers-reduced-motion:reduce){
  .fnav *{ transition:none !important; animation:none !important; }
}