/* ==========================================================
   Footer — brand blurb, quick links, services, contact
========================================================== */
/* 
footer{
  border-top: 1px solid var(--line-soft); position: relative; z-index: 2;
  background: color-mix(in srgb, var(--charcoal) 92%, transparent);
}
.footer-top{ display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.2fr; gap: 50px; padding: 80px 0 60px; }
.footer-brand .logo{ margin-bottom: 18px; }
.footer-brand p{ color: var(--fog); font-size: 13.5px; max-width: 32ch; margin-bottom: 22px; }
.footer-social{ display: flex; gap: 12px; }
.footer-social a{
  width: 34px; height: 34px; border: 1px solid var(--line); border-radius: 50%;
  display: flex; align-items: center; justify-content: center; font-size: 12px;
  font-family: var(--font-mono); transition: border-color .2s ease, color .2s ease;
}
.footer-social a:hover{ border-color: var(--signal); color: var(--signal-2); }
.footer-col h5{ font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--fog-dim); margin-bottom: 18px; }
.footer-col ul{ display: flex; flex-direction: column; gap: 11px; }
.footer-col a{ font-size: 13.5px; color: var(--fog); transition: color .2s ease; }
.footer-col a:hover{ color: var(--paper); }
.footer-contact p{ font-size: 13.5px; color: var(--fog); margin-bottom: 10px; }
.footer-bottom{
  border-top: 1px solid var(--line-soft); padding: 26px 0; display: flex; justify-content: space-between;
  flex-wrap: wrap; gap: 12px; font-family: var(--font-mono); font-size: 11.5px; color: var(--fog-dim);
}

@media (max-width: 900px){ .footer-top{ grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px){
  .footer-top{ grid-template-columns: 1fr; padding: 56px 0 40px; gap: 34px; }
  .footer-bottom{ padding: 20px 0; }
} */






/* ==========================================================
   Footer — brand blurb, quick links, services, contact
========================================================== */

/* footer{
  border-top: 1px solid var(--line-soft); position: relative; z-index: 2;
  background: color-mix(in srgb, var(--charcoal) 92%, transparent);
}
.footer-top{ display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.2fr; gap: 50px; padding: 80px 0 60px; }
.footer-brand .logo{ margin-bottom: 18px; }
.footer-brand p{ color: var(--fog); font-size: 13.5px; max-width: 32ch; margin-bottom: 22px; }
.footer-social{ display: flex; gap: 12px; }
.footer-social a{
  width: 34px; height: 34px; border: 1px solid var(--line); border-radius: 50%;
  display: flex; align-items: center; justify-content: center; font-size: 12px;
  font-family: var(--font-mono); transition: border-color .2s ease, color .2s ease;
}
.footer-social a:hover{ border-color: var(--signal); color: var(--signal-2); }
.footer-col h5{ font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--fog-dim); margin-bottom: 18px; }
.footer-col ul{ display: flex; flex-direction: column; gap: 11px; }
.footer-col a{ font-size: 13.5px; color: var(--fog); transition: color .2s ease; }
.footer-col a:hover{ color: var(--paper); }
.footer-contact p{ font-size: 13.5px; color: var(--fog); margin-bottom: 10px; }
.footer-bottom{
  border-top: 1px solid var(--line-soft); padding: 26px 0; display: flex; justify-content: space-between;
  flex-wrap: wrap; gap: 12px; font-family: var(--font-mono); font-size: 11.5px; color: var(--fog-dim);
} */

/* @media (max-width: 900px){ .footer-top{ grid-template-columns: 1fr 1fr; } } */

/* @media (max-width: 560px){
  .footer-top{ 
    grid-template-columns: 1fr 1fr; 
    padding: 56px 0 40px; 
    gap: 34px; 
  } */
  
  /* Forces the top brand section to span both columns */
  /* .footer-top > :first-child {
    grid-column: 1 / -1;
  } */
  
  /* Forces the bottom contact section to span both columns */
  /* .footer-top > :last-child {
    grid-column: 1 / -1;
  } */

  /* .footer-bottom{ padding: 20px 0; }
} */





/* ==========================================================
   Footer — brand blurb, quick links, services, contact
========================================================== */

footer{
  border-top: 1px solid var(--line-soft); position: relative; z-index: 2;
  background: color-mix(in srgb, var(--charcoal) 92%, transparent);
}
.footer-top{ display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.2fr; gap: 50px; padding: 80px 0 60px; }
.footer-brand .logo{ margin-bottom: 18px; }
.footer-brand p{ color: var(--fog); font-size: 13.5px; max-width: 32ch; margin-bottom: 22px; }
.footer-social{ display: flex; gap: 12px; }
.footer-social a{
  width: 34px; height: 34px; border: 1px solid var(--line); border-radius: 50%;
  display: flex; align-items: center; justify-content: center; font-size: 12px;
  font-family: var(--font-mono); transition: border-color .2s ease, color .2s ease;
}
.footer-social a:hover{ border-color: var(--signal); color: var(--signal-2); }
.footer-col h5{ font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--fog-dim); margin-bottom: 18px; }
.footer-col ul{ display: flex; flex-direction: column; gap: 11px; }
.footer-col a{ font-size: 13.5px; color: var(--fog); transition: color .2s ease; }
.footer-col a:hover{ color: var(--paper); }
.footer-contact p{ font-size: 13.5px; color: var(--fog); margin-bottom: 10px; }
.footer-bottom{
  border-top: 1px solid var(--line-soft); padding: 26px 0; display: flex; justify-content: space-between;
  flex-wrap: wrap; gap: 12px; font-family: var(--font-mono); font-size: 11.5px; color: var(--fog-dim);
}

@media (max-width: 900px){ .footer-top{ grid-template-columns: 1fr 1fr; } }

@media (max-width: 560px){
  .footer-top{ 
    grid-template-columns: 1fr 1fr; 
    padding: 56px 0 40px; 
    gap: 34px; 
    text-align: center; /* Centers text in grid */
  }
  
  /* Forces the top brand section to span both columns */
  .footer-top > :first-child {
    grid-column: 1 / -1;
  }
  
  /* Forces the bottom contact section to span both columns */
  .footer-top > :last-child {
    grid-column: 1 / -1;
  }

  /* Centers the social media icons */
  .footer-social { 
    justify-content: center; 
  }

  /* Centers the quick links inside their columns */
  .footer-col ul { 
    align-items: center; 
  }

  /* Centers the copyright and bottom text */
  .footer-bottom{ 
    padding: 20px 0; 
    justify-content: center; 
    text-align: center; 
  }
}