/* =========================================================================
   ArchiMass — footer.css (reusable site-footer component)
   ========================================================================= */

.site-footer{
  position:relative;
  border-top:1px solid var(--line-1);
  background:linear-gradient(180deg, var(--carbon), var(--void));
  padding-block:clamp(56px,8vh,96px) 0;
  overflow:hidden;
}
.site-footer__skyline{
  position:absolute; left:0; right:0; bottom:0; height:220px;
  pointer-events:none; opacity:.5;
}
.site-footer__grid{
  position:relative; z-index:1;
  display:grid; gap:clamp(34px,5vw,64px);
  grid-template-columns:1.4fr repeat(5, minmax(0,1fr));
}
.site-footer__brand .logo{ margin-bottom:18px; }
.site-footer__brand p{ max-width:34ch; }

.f-col h4{
  font-family:var(--f-mono); font-size:10px; letter-spacing:.2em;
  text-transform:uppercase; color:var(--paper-mute); margin:0 0 16px;
  font-weight:400;
}
.f-col li{ margin-bottom:9px; }
.f-col a{
  font-size:13.5px; color:var(--paper-dim);
  transition:color .25s var(--ease), padding-left .25s var(--ease);
  display:inline-flex; align-items:center; gap:8px;
}
.f-col a:hover{ color:var(--paper); }
.f-col a .tag{
  font-family:var(--f-mono); font-size:9px; letter-spacing:.12em;
  color:var(--agent); border:1px solid var(--agent-d); padding:1px 4px;
}

.site-footer__regions{
  position:relative; z-index:1;
  margin-top:clamp(40px,6vw,72px); padding-top:26px;
  border-top:1px solid var(--line-1);
  display:flex; flex-wrap:wrap; gap:8px 10px; align-items:center;
}
.region-chip{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--f-mono); font-size:11px; letter-spacing:.08em;
  color:var(--paper-dim); padding:6px 11px;
  border:1px solid var(--line-1);
  transition:border-color .3s var(--ease), color .3s var(--ease);
}
.region-chip:hover{ border-color:var(--instrument-d); color:var(--instrument); }
.region-chip .dot{ width:4px; height:4px; background:var(--instrument-d); transform:rotate(45deg); }

.site-footer__base{
  position:relative; z-index:1;
  margin-top:30px; padding-block:22px 30px;
  border-top:1px solid var(--line-1);
  display:flex; flex-wrap:wrap; gap:14px 26px;
  align-items:center; justify-content:space-between;
}
.site-footer__base .micro a:hover{ color:var(--paper); }
.f-social{ display:flex; gap:8px; }
.f-social a{
  width:34px; height:34px; display:grid; place-items:center;
  border:1px solid var(--line-1); color:var(--paper-mute);
  transition:border-color .3s var(--ease), color .3s var(--ease);
}
.f-social a:hover{ border-color:var(--line-3); color:var(--paper); }
@media (max-width:1000px){
  .site-footer__grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .site-footer__brand{ grid-column:1 / -1; }
}
@media (max-width:520px){
  .site-footer__grid{ grid-template-columns:1fr 1fr; }
  .site-footer__base{ flex-direction:column; align-items:flex-start; }
}

/* --- Parent brand (FSI Atlas) + themed skyline -------------------------- */
.site-footer__skyline{ color:var(--line-2); }
.f-parent{ margin-top:12px !important; }
.f-parent a,
.site-footer__base a[rel="noopener"]{
  color:var(--paper); border-bottom:1px solid var(--instrument-d);
  transition:color .25s var(--ease), border-color .25s var(--ease);
}
.f-parent a:hover,
.site-footer__base a[rel="noopener"]:hover{ color:var(--instrument); border-color:var(--instrument); }

/* Case Studies: separate row preserves the existing footer column widths. */
.footer-case-studies{position:relative;z-index:1;margin-top:30px;padding-top:24px;border-top:1px solid var(--line-1)}
.footer-case-studies ul{display:flex;flex-wrap:wrap;gap:10px 30px}
.footer-case-studies li{margin:0}