/* ============================================================
   FOOTER — International Typographic Style (Swiss)
   ------------------------------------------------------------
   Same 12-column grid, gutter and type scale as the sections
   above it, so the footer's columns land on the page's own
   edges instead of on three arbitrary thirds.

   The type used to be sized in `vh`, so every word in here
   resized with the window HEIGHT: a 22px heading on a laptop, a
   32px heading on a rotated monitor. It is in rem now.
   ============================================================ */

.footer-container {
  --ftr-paper: #121212;
  --ftr-ink: #fff;
  --ftr-accent: #ff820d;
  --ftr-muted: rgba(255, 255, 255, 0.58);
  --ftr-rule: rgba(255, 255, 255, 0.16);

  /* Matches section3, section5 and section6. */
  --ftr-gutter: clamp(1.25rem, 5vw, 6rem);
  --ftr-max: 1440px;

  width: 100%;                 /* was 100vw: overflowed by the scrollbar */
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  overflow-x: hidden;
  position: relative;
  z-index: 2;

  background-color: var(--ftr-paper);
  color: var(--ftr-ink);
  font-family: 'Sofia Pro', sans-serif;
}

.footer-content {
  max-width: var(--ftr-max);
  margin: 0 auto;
  padding: clamp(3rem, 6vw, 5rem) var(--ftr-gutter) clamp(1.5rem, 3vw, 2.5rem);

  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: clamp(1rem, 2vw, 2rem);
  row-gap: clamp(2.5rem, 5vw, 3.5rem);
  align-items: start;
  justify-items: stretch;
}

/* ------------------------------------------------------------
   Column 1 — the mark

   `width: 100%` made the logo as wide as its whole column: a
   300px wordmark shouting over four columns of 16px text.
   ------------------------------------------------------------ */
.footer-logo {
  grid-column: 1 / span 3;
  min-width: 0;
  display: block;
  width: auto;
  height: auto;
}

.logo-link {
  display: inline-block;
}

.logo-image {
  width: clamp(150px, 15vw, 210px);
  height: auto;
  display: block;
}

/* ------------------------------------------------------------
   Columns 2-4 — links, socials, address

   Each opens with the same rule and label, the way the contact
   section's three columns do.
   ------------------------------------------------------------ */
.footer-links {
  grid-column: 5 / span 3;
}

.footer-social {
  grid-column: 8 / span 2;
}

.footer-contact {
  grid-column: 10 / span 3;
}

.footer-links,
.footer-social,
.footer-contact {
  min-width: 0;
  display: block;
  border-top: 1px solid var(--ftr-ink);
  padding-top: clamp(0.85rem, 1.5vw, 1.15rem);
}

.footer-heading {
  margin: 0 0 clamp(1rem, 2vw, 1.4rem);
  color: var(--ftr-ink);
  font-family: 'Sofia Pro', sans-serif;
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.footer-nav ul,
.social-nav ul {
  list-style: none;
  padding: 0;
  margin: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}

.footer-nav ul li,
.social-nav ul li {
  margin: 0;
}

.footer-nav ul li a,
.social-nav ul li a,
.footer-address a {
  color: var(--ftr-muted);
  text-decoration: none;
  font-family: 'Sofia Pro', sans-serif;
  font-size: clamp(0.9375rem, 1vw, 1rem);
  font-weight: 300;
  line-height: 1.45;
  transition: color .15s ease;
}

.footer-nav ul li a:hover,
.social-nav ul li a:hover,
.footer-address a:hover {
  color: var(--ftr-ink);
}

.footer-nav ul li a:focus-visible,
.social-nav ul li a:focus-visible,
.footer-address a:focus-visible,
.logo-link:focus-visible,
.powered-link:focus-visible {
  outline: 2px solid var(--ftr-accent);
  outline-offset: 3px;
}

.footer-nav ul li a,
.social-nav ul li a {
  display: inline-flex;
  align-items: center;
}

.social-nav ul li a img {
  display: inline-block;
  width: 1rem;             /* was 3.25vh */
  height: auto;
  margin-right: 0.6rem;
  opacity: 0.75;
  transition: opacity .15s ease;
}

.social-nav ul li a:hover img {
  opacity: 1;
}

/* ------------------------------------------------------------
   Address
   ------------------------------------------------------------ */
.footer-address {
  font-style: normal;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  align-items: flex-start;
}

/* ------------------------------------------------------------
   Bottom bar
   ------------------------------------------------------------ */
.footer-powered {
  grid-column: 1 / -1;
  margin-top: clamp(1rem, 2vw, 1.75rem);
  padding-top: clamp(1.25rem, 2.5vw, 1.75rem);
  border-top: 1px solid var(--ftr-rule);

  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 0.75rem 1.5rem;
  text-align: left;
}

.powered-text {
  margin: 0;
  color: var(--ftr-muted);
  font-family: 'Sofia Pro', sans-serif;
  font-size: 0.75rem;       /* was 1.6vh */
  font-weight: 400;
  letter-spacing: 0.12em;
  line-height: 1.5;
  text-transform: uppercase;
}

.powered-by {
  font-family: 'Funnel Display', 'Sofia Pro', sans-serif;
  font-weight: 300;
  margin-left: 0;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

.powered-sep {
  color: rgba(255, 255, 255, 0.28);
  margin: 0 0.15rem;
}

.powered-version {
  color: var(--ftr-muted);
  font-family: 'Sofia Pro', sans-serif;
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
}

.powered-link {
  font-family: 'Orbitron', sans-serif;
  font-weight: 700;
  color: #fff;
  text-decoration: none;
  transition: color .3s ease;
  display: inline-block;
  position: relative;
  letter-spacing: 1px;
}

.powered-link::after {
  content: '';
  position: absolute;
  width: 100%;
  transform: scaleX(0);
  height: 1px;
  bottom: -2px;
  left: 0;
  background-color: rgb(202, 114, 0);
  transform-origin: bottom right;
  transition: transform 0.3s ease-out;
}

.powered-link:hover {
  color: rgb(202, 114, 0);
  text-shadow: 0 0 10px rgba(202, 114, 0, 0.4);
}

.powered-link:hover::after {
  transform: scaleX(1);
  transform-origin: bottom left;
}

/* ============================================================
   Responsive — the columns fold in pairs, then to one.
   Flush left throughout: centring four short lists under a
   wordmark is what made the old footer read as a stack of
   unrelated fragments.
   ============================================================ */
@media screen and (max-width: 1024px) {

  .footer-logo {
    grid-column: 1 / -1;
  }

  .footer-links {
    grid-column: 1 / span 6;
  }

  .footer-social {
    grid-column: 7 / span 6;
  }

  .footer-contact {
    grid-column: 1 / span 6;
  }
}

@media screen and (max-width: 620px) {

  .footer-links,
  .footer-social,
  .footer-contact {
    grid-column: 1 / -1;
  }

  .footer-powered {
    flex-direction: column;
    align-items: flex-start;
  }
}

@media (prefers-reduced-motion: reduce) {

  .footer-nav ul li a,
  .social-nav ul li a,
  .footer-address a,
  .social-nav ul li a img,
  .powered-link,
  .powered-link::after {
    transition: none;
  }
}