/* ================================================================
   GLENSHIEL FOOTER — everything scoped to .gsf so it cannot leak
   into the theme, Elementor or Gravity Forms styling.
   ================================================================ */
.gsf {
  --gsf-deep:   #54402e;
  --gsf-brown:  #6b4a35;
  --gsf-tan:    #b99a77;
  --gsf-stone:  #d4c8b5;
  --gsf-band:   #efe8dc;
  --gsf-cream:  #f9f6f0;
  --gsf-muted:  #5b5651;

  font-family: 'Archivo', system-ui, -apple-system, sans-serif;
  font-weight: 400;
  font-size: 15px;
  line-height: 1.7;
  color: rgba(255,255,255,.78);
  background: var(--gsf-deep);
  width: 100%;
  max-width: 100%;
  overflow-x: clip;
  text-align: left;
}
.gsf *, .gsf *::before, .gsf *::after { box-sizing: border-box; margin: 0; padding: 0; }
.gsf ul { list-style: none; }
.gsf img { max-width: 100%; height: auto; display: block; }
.gsf a { color: inherit; text-decoration: none; transition: color .18s; }
.gsf a:hover { color: #fff; }
.gsf a:focus-visible { outline: 2px solid var(--gsf-stone); outline-offset: 3px; }

/* ---- main band ---- */
.gsf__main { padding: 72px 24px 64px; }
.gsf__grid {
  max-width: 1240px; margin: 0 auto;
  display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.2fr; gap: 56px;
}

.gsf__logo { display: inline-block; }
.gsf__logo img { width: 104px; }
.gsf__blurb { margin-top: 24px; max-width: 320px; font-size: 14.5px; color: rgba(255,255,255,.72); }

.gsf__social { display: flex; gap: 10px; margin-top: 26px; }
.gsf__social a {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 50%;
  border: 1px solid rgba(255,255,255,.28); color: #fff;
  transition: background .2s, border-color .2s, transform .2s;
}
.gsf__social a:hover { background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.6); transform: translateY(-2px); }
.gsf__social svg { width: 17px; height: 17px; fill: currentColor; display: block; }

/* column headings — small caps, tan, with the site's hairline rule */
.gsf .gsf__title {
  font-family: 'Archivo', sans-serif !important;
  font-weight: 700 !important; font-size: 11px; letter-spacing: .2em;
  text-transform: uppercase; color: var(--gsf-tan);
  margin: 0 0 20px; padding-bottom: 12px;
  border-bottom: 1px solid rgba(255,255,255,.16);
}
.gsf__col li + li { margin-top: 9px; }
.gsf__col a { font-size: 14.5px; }

.gsf__contact .gsf__lead { font-size: 16px; line-height: 1.85; }
.gsf__contact .gsf__lead a { border-bottom: 1px solid rgba(255,255,255,.28); }
.gsf__contact .gsf__lead a:hover { border-color: #fff; }
.gsf__addr { margin-top: 18px; font-size: 14.5px; color: rgba(255,255,255,.72); }
.gsf__hours { margin-top: 14px; font-size: 13.5px; color: rgba(255,255,255,.6); }
.gsf__note { margin-top: 16px; font-size: 12.5px; font-style: italic; color: rgba(255,255,255,.5); }

/* ---- bottom strip: light, so the St John lockup keeps its own colours ---- */
.gsf__strip { background: var(--gsf-band); color: var(--gsf-muted); padding: 26px 24px; }
.gsf__strip-inner {
  max-width: 1240px; margin: 0 auto;
  display: flex; align-items: center; gap: 14px 30px; flex-wrap: wrap;
}
.gsf__stjohn { flex: 0 0 auto; }
.gsf__stjohn img { height: 34px; width: auto; }
.gsf__stjohn-line { flex: 1 1 320px; font-size: 13px; line-height: 1.6; }
.gsf__legal { font-size: 12.5px; color: #8b837a; margin-left: auto; }
.gsf__legal a { color: var(--gsf-brown); border-bottom: 1px solid rgba(107,74,53,.3); }
.gsf__legal a:hover { color: var(--gsf-brown); border-color: var(--gsf-brown); }
.gsf__sep { margin: 0 8px; color: #b9b0a5; }

/* ---- responsive ---- */
@media (max-width: 1000px) {
  .gsf__grid { grid-template-columns: 1fr 1fr; gap: 44px 40px; }
  .gsf__brand { grid-column: 1 / -1; }
  .gsf__blurb { max-width: 540px; }
}
@media (max-width: 700px) {
  .gsf__main { padding: 56px 22px 48px; }
  .gsf__grid { grid-template-columns: 1fr; gap: 38px; }
  .gsf__strip { padding: 24px 22px 30px; }
  .gsf__strip-inner { flex-direction: column; align-items: flex-start; gap: 14px; }
  /* flex-grow stretches vertically once the row becomes a column, which
     left a tall gap above the copyright line */
  .gsf__stjohn-line { flex: 0 0 auto; }
  .gsf__legal { margin-left: 0; }
}
@media (max-width: 380px) {
  .gsf__main, .gsf__strip { padding-left: 18px; padding-right: 18px; }
}