/* --- site footer ---
   One footer on all sixteen pages. It is loaded as its own file because the
   policy pages use shared.css and the rest use studio.css, and a footer that
   drifts between the two is worse than no footer at all. Colours are written
   out rather than taken from custom properties for the same reason.

   Every link here points at a page that exists. A footer advertising a blog,
   a glossary and a partner programme that are not there reads as a bigger
   company until the first click, and then it reads as a lie. */
.sitefoot{
  max-width:1190px;margin:64px auto 0;padding:40px 5% 26px;
  border-top:1px solid #37494b;color:#b5c7c6;
  font:400 14px/1.55 system-ui,-apple-system,"Segoe UI",sans-serif}
.sitefoot a{color:#b5c7c6;text-decoration:none}
.sitefoot a:hover{color:#f6f1e8;text-decoration:underline}
.sitefoot a:focus-visible{outline:2px solid #80c5c5;outline-offset:3px;border-radius:3px}

.footgrid{display:grid;gap:32px 24px;grid-template-columns:1.7fr repeat(4,1fr);align-items:start}
.footbrand p{margin:0 0 10px;max-width:34ch;color:#9db1b0;font-size:13.5px}
.footmark{display:inline-block;margin-bottom:12px;
  font:600 20px/1 Georgia,"Times New Roman",serif;letter-spacing:.01em;color:#f6f1e8}
.footmark:hover{text-decoration:none;color:#80c5c5}
.footbrand .footmail a{color:#80c5c5}

.sitefoot h2{margin:0 0 12px;
  font:600 11.5px/1 system-ui,-apple-system,"Segoe UI",sans-serif;
  letter-spacing:.11em;text-transform:uppercase;color:#f6f1e8}
.sitefoot ul{list-style:none;margin:0;padding:0}
.sitefoot li{margin:0 0 8px}
.sitefoot li:last-child{margin-bottom:0}

.footbase{margin-top:34px;padding-top:18px;border-top:1px solid #243436;
  display:flex;gap:10px 26px;flex-wrap:wrap;justify-content:space-between;
  font-size:12px;color:#8aa09f}
.footbase p{margin:0;max-width:none}

@media(max-width:1000px){
  .footgrid{grid-template-columns:repeat(3,1fr)}
  .footbrand{grid-column:1/-1}
  .footbrand p{max-width:52ch}}
@media(max-width:620px){
  .sitefoot{margin-top:44px;padding-top:32px}
  .footgrid{grid-template-columns:repeat(2,1fr);gap:26px 18px}}
@media(max-width:380px){.footgrid{grid-template-columns:1fr}}
/* the back-to-top button floats in this corner; keep the last line clear of it */
@media(max-width:620px){.sitefoot{padding-bottom:80px}}