/* ===================================================================
   FOOTER — one shared footer for every page.
   Loaded last on each page so it is the only source of footer styling.

   Layouts
   - Wide screens (over 1400px): tagline left, links right, arch centred
     between them. The arch is sized so the three never touch.
   - Tablets and small laptops (761–1400px): tagline left, links right
     along the top; the arch sits centred underneath them.
   - Phones (760px and under): everything stacked on the left, arch
     centred at the bottom.

   The gutter follows each page's own (--gut, or the homepage's
   --content-gut) so the footer lines up with the content above it.
   =================================================================== */
footer.site-footer{
  --foot-font:"owners-wide","Helvetica Neue",Arial,sans-serif;
  --foot-mint:#9fd3af;
  --foot-paper:#eaf3ec;
  --foot-muted:rgba(234,243,236,.6);
  --foot-faint:rgba(234,243,236,.42);
  --foot-gut:var(--gut,clamp(20px,5vw,84px));
  --arch-w:clamp(300px,28vw,460px);
  position:relative;z-index:1;overflow:hidden;
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  column-gap:calc(var(--arch-w) + 64px);row-gap:40px;align-items:center;
  min-height:clamp(330px,30vw,470px);
  padding:clamp(76px,9vw,124px) var(--foot-gut) 46px;
  border-top:0;
  font-family:var(--foot-font);
}
/* Homepage: its own content gutter, and above the fixed hero layers. */
footer.site-footer.is-home{--foot-gut:var(--content-gut,clamp(28px,6vw,104px));z-index:6}

/* Left: tagline, then legal + copyright */
footer.site-footer .footer-brand{position:relative;z-index:2;align-self:center;display:grid;gap:24px;min-width:0;max-width:none}
footer.site-footer .footer-brand p{
  margin:0;color:var(--foot-mint);font-family:var(--foot-font);
  font-size:clamp(16px,1.35vw,20px);font-weight:700;line-height:1.25;letter-spacing:0;
  text-transform:uppercase;white-space:normal;
}
footer.site-footer .footer-meta{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-start;gap:12px 24px;min-height:0}
footer.site-footer .footer-legal{display:flex;flex-wrap:wrap;gap:12px 24px;justify-content:flex-start}
footer.site-footer .footer-legal a,
footer.site-footer .fine{
  color:var(--foot-muted)!important;font-family:var(--foot-font);font-size:12px!important;font-weight:400;
  line-height:1.4;letter-spacing:.06em;text-transform:uppercase;
}
footer.site-footer .fine{color:var(--foot-faint)!important}

/* Right: links, then socials */
footer.site-footer .footer-right{position:relative;z-index:2;display:grid;gap:24px;justify-items:end;text-align:right;min-width:0}
/* The footer links sit in a <nav>; reset anything the header's nav
   styles would otherwise give them (the homepage turns every <nav>
   into the full-screen menu on smaller screens). */
footer.site-footer .footer-primary{
  position:static;inset:auto;z-index:auto;display:flex;flex-direction:row;flex-wrap:wrap;
  align-items:baseline;justify-content:flex-end;gap:12px 22px;
  padding:0;margin:0;background:none;-webkit-backdrop-filter:none;backdrop-filter:none;
  opacity:1;visibility:visible;pointer-events:auto;transform:none;white-space:normal;
}
footer.site-footer .footer-primary a{
  position:relative;padding:0;
  color:var(--foot-paper);font-family:var(--foot-font);font-size:13px!important;font-weight:700;
  line-height:1.35;letter-spacing:.04em;text-transform:uppercase;text-align:inherit;opacity:1;
  transition:color .3s ease;
}
footer.site-footer .footer-primary a::after{content:none}
footer.site-footer a:hover,footer.site-footer a:focus-visible{color:var(--foot-mint)!important;opacity:1}
footer.site-footer .socials{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:18px}
footer.site-footer .social-icon{
  display:grid;place-items:center;width:34px;height:34px;color:var(--foot-muted);line-height:0;
  transition:color .3s ease,transform .3s ease;
}
footer.site-footer .social-icon:hover,footer.site-footer .social-icon:focus-visible{color:var(--foot-mint);transform:translateY(-3px)}
footer.site-footer .social-icon svg{display:block;width:24px;height:24px;overflow:visible}

/* The arch, centred and bleeding off the bottom edge */
footer.site-footer .footer-arch{
  position:absolute;z-index:1;left:50%;bottom:0;width:var(--arch-w);line-height:0;
  transform:translate(-50%,48%);pointer-events:none;
}
footer.site-footer .footer-arch img{display:block;width:100%;height:auto;filter:drop-shadow(0 -5px 10px rgba(159,211,175,.12))}

/* Tablets and small laptops: text along the top, arch underneath.
   Bottom padding = the visible part of the arch (about 0.81 × its width). */
@media (max-width:1400px){
  footer.site-footer{
    --arch-w:clamp(240px,30vw,340px);
    column-gap:clamp(32px,6vw,72px);align-items:start;min-height:0;
    padding-bottom:calc(var(--arch-w) * .81 + 56px);
  }
  footer.site-footer .footer-brand{align-self:start}
}

/* Phones: one column, left aligned, arch at the bottom */
@media (max-width:760px){
  footer.site-footer{
    --arch-w:min(300px,78vw);
    grid-template-columns:1fr;row-gap:40px;
    padding-top:76px;padding-bottom:calc(var(--arch-w) * .81 + 56px);
  }
  footer.site-footer .footer-right{justify-items:start;text-align:left}
  footer.site-footer .footer-primary,
  footer.site-footer .socials{justify-content:flex-start}
}