/* ============================================================================
   SECTION NINE - THE FOOTER

   HIS OWN, CARRIED OVER FROM THE FIRST SITE. The guide-sign banner with the
   shield breaking out of the panel top and bottom, the four columns, his
   social marks and the legal rule are all lifted out of index.html and
   assets/css/highway19.css and scoped under .sec9. Nothing was redrawn.
   ========================================================================= */
.sec9{
  --blue-900:#062f5e;
  --green-500:#059236;
  --yellow-500:#ffc72c;
  --font-sign:"Be Vietnam Pro","Helvetica Neue",Helvetica,Arial,system-ui,sans-serif;
  --shell:1200px; --gutter:clamp(20px,4vw,48px);

  position:relative; z-index:2;
  background:var(--sec9-bg,var(--blue-900)); color:#fff;
  font-family:var(--font-sign);
  font-size:clamp(16px,1.05vw,17.5px); line-height:1.62; font-weight:450;
}
.sec9 *,.sec9 *::before,.sec9 *::after{ box-sizing:border-box }
.sec9 img{ max-width:100%; display:block }
.sec9 a{ color:inherit }
.sec9 .inner{
  max-width:var(--shell); margin:0 auto;
  padding:clamp(56px,6.5vw,88px) var(--gutter);
}

/* THE BANNER'S OWN DEVICE: green guide sign, white rule, lane arrows, and the
   shield breaking out of the panel top and bottom. */
.sec9 .guide-sign{
  display:flex; align-items:center; justify-content:center;
  gap:clamp(10px,1.8vw,26px);
  background:var(--sec9-sign,var(--green-500));
  border:3px solid #fff; border-radius:11px;
  padding:clamp(15px,2vw,24px) clamp(16px,3vw,36px);
  margin:0 0 clamp(46px,5vw,68px);
}
.sec9 .guide-sign span{
  font-weight:800; color:#fff;
  font-size:clamp(1.05rem,2.5vw,2.05rem); letter-spacing:-.012em;
  line-height:1.1; white-space:nowrap;
}
.sec9 .guide-sign__shield{
  height:clamp(66px,8.4vw,118px); width:auto; flex:none;
  margin:calc(-1 * clamp(22px,3vw,40px)) 0;
  filter:drop-shadow(0 3px 5px rgba(0,0,0,.3));
}
.sec9 .guide-sign__arrows{ width:clamp(56px,7vw,92px); height:auto; flex:none; opacity:.95 }

.sec9 .foot-cols{ display:grid; grid-template-columns:1.7fr 1fr 1fr 1.35fr; gap:var(--gutter) }
.sec9 .foot-cols h4{
  font-size:.78rem; font-weight:800; letter-spacing:.16em; text-transform:uppercase;
  color:var(--sec9-head,var(--yellow-500)); margin:0 0 1.15em;
}
.sec9 .foot-cols ul{ list-style:none; margin:0; padding:0 }
.sec9 .foot-cols li{ margin-bottom:.62em }
.sec9 .foot-cols a{ color:rgba(255,255,255,.85); text-decoration:none; font-size:.945rem }
.sec9 .foot-cols a:hover{ color:#fff; text-decoration:underline }
.sec9 .foot-brand h4{
  font-size:1.15rem; letter-spacing:-.012em; text-transform:none; color:#fff;
  margin:0; line-height:1.15;
}
.sec9 .foot-brand p{ margin:.9em 0 0; font-size:.94rem; color:rgba(255,255,255,.72); max-width:34ch }
.sec9 .socials{ display:flex; gap:.65rem; margin-top:1.15rem }
.sec9 .socials a{
  display:block; width:40px; height:40px;
  transition:transform .16s ease,filter .16s ease;
}
.sec9 .socials a:hover{ transform:translateY(-2px); filter:brightness(1.1) }
.sec9 .socials img{ width:100%; height:100%; display:block }

.sec9 .foot-rule{
  border-top:1px solid rgba(255,255,255,.17);
  margin-top:clamp(44px,5vw,64px); padding-top:1.6rem;
  display:flex; flex-wrap:wrap; gap:.7rem var(--gutter);
  align-items:center; justify-content:space-between;
  font-size:.855rem; color:rgba(255,255,255,.62);
}
.sec9 .foot-rule a{ color:rgba(255,255,255,.75); text-decoration:none }
.sec9 .foot-rule a:hover{ color:#fff; text-decoration:underline }
.sec9 .foot-legal{ display:flex; gap:1.4rem; flex-wrap:wrap }

@media (prefers-reduced-motion:reduce){
  .sec9 .socials a{ transition:filter .16s ease }
  .sec9 .socials a:hover{ transform:none }
}
@media (max-width:900px){
  .sec9 .guide-sign{ flex-wrap:wrap; gap:8px 14px; padding:16px 18px }
  .sec9 .guide-sign__arrows{ display:none }
  .sec9 .guide-sign span{ font-size:1.18rem; white-space:normal }
  .sec9 .guide-sign__shield{ height:52px; margin:0 }
  .sec9 .foot-cols{ grid-template-columns:1fr; gap:2.1rem }
  .sec9 .foot-rule{ flex-direction:column; align-items:flex-start }
}