/* ============================================================================
   FOOTER — site footer
   ----------------------------------------------------------------------------
   Loaded by : every page
   Depends on: base/tokens.css

   The footer markup is duplicated in all three HTML pages so its links stay
   in the served HTML for crawlers. Keep the three copies identical — see
   README.md, "Shared chrome".
   ============================================================================ */

footer{background:var(--navy);padding:60px var(--gutter) 28px;}

.foot-grid{
  max-width:var(--content-max);margin:0 auto 3rem;
  display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:3rem;
}

/* The logo PNG is navy artwork; brightness(0) flattens it to black and
   invert(1) flips that to white so it reads on the navy background. */
.foot-logo img{height:52px;margin-bottom:1rem;filter:brightness(0) invert(1);}
.foot-brand p{font-size:0.85rem;color:rgba(255,255,255,0.55);line-height:1.75;max-width:250px;}

.foot-col h4{
  font-size:0.8rem;font-weight:700;letter-spacing:1.8px;
  text-transform:uppercase;color:var(--white);margin-bottom:1.2rem;
}
.foot-col li{margin-bottom:0.6rem;}
.foot-col li a{font-size:0.85rem;color:rgba(255,255,255,0.55);transition:color 0.25s;}
.foot-col li a:hover{color:var(--white);}

.foot-bottom{
  max-width:var(--content-max);margin:0 auto;
  padding-top:1.5rem;border-top:1px solid rgba(255,255,255,0.12);
  display:flex;justify-content:space-between;align-items:center;
}
.foot-bottom p{font-size:0.8rem;color:rgba(255,255,255,0.45);}
.foot-bottom span{color:rgba(255,255,255,0.75);}

@media(max-width:960px){
  .foot-grid{grid-template-columns:1fr 1fr;}
}
@media(max-width:640px){
  .foot-grid{grid-template-columns:1fr;}
  .foot-bottom{flex-direction:column;gap:0.5rem;text-align:center;}
}