/* Footer offices — clean default, How-we-work style shine border on hover */
@property --floc-angle {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}

.footer-locations {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  align-items: start !important;
  justify-items: center !important;
  text-align: center !important;
  gap: 0 !important;
  padding: 3.4vw 0 3.6vw !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
  max-width: 92vw !important;
  margin: 0 auto !important;
}

.footer-locations .floc {
  width: 100% !important;
  padding: 0 1.6vw !important;
  box-sizing: border-box !important;
}

.footer-locations .floc:not(:last-child) {
  border-right: 1px solid transparent !important;
  border-image: linear-gradient(
      180deg,
      transparent 0%,
      rgba(255, 255, 255, 0.16) 18%,
      rgba(238, 61, 37, 0.5) 50%,
      rgba(255, 255, 255, 0.16) 82%,
      transparent 100%
    )
    1 !important;
}

.footer-locations .floc .floc-link {
  --c: #ee3d25;
  --c-rgb: 238, 61, 37;
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 0.9vw !important;
  color: inherit !important;
  text-decoration: none !important;
  padding: 1.5vw 1.6vw !important;
  border: 1px solid transparent !important;
  border-radius: 1vw !important;
  background: transparent !important;
  box-shadow: none !important;
  outline: none !important;
  overflow: visible !important;
  isolation: isolate !important;
  transition:
    transform 0.35s ease,
    border-color 0.35s ease,
    background 0.35s ease !important;
}

/* Shine border beam (same idea as How we work / trust cards) */
.footer-locations .floc .floc-link::before {
  content: "" !important;
  position: absolute !important;
  inset: -1px !important;
  border-radius: inherit !important;
  padding: 2px !important;
  background: conic-gradient(
    from var(--floc-angle),
    rgba(var(--c-rgb), 0) 0deg,
    rgba(var(--c-rgb), 0) 220deg,
    rgba(var(--c-rgb), 0.55) 290deg,
    var(--c) 335deg,
    #fff 360deg
  ) !important;
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0) !important;
  -webkit-mask-composite: xor !important;
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0) !important;
  mask-composite: exclude !important;
  filter: drop-shadow(0 0 0.4vw var(--c)) !important;
  opacity: 0 !important;
  pointer-events: none !important;
  z-index: 2 !important;
  transition: opacity 0.25s ease !important;
}

@keyframes floc-beam {
  to {
    --floc-angle: 360deg;
  }
}

.footer-locations .floc .floc-link:hover,
.footer-locations .floc .floc-link:focus-visible {
  outline: none !important;
  border-color: rgba(238, 61, 37, 0.45) !important;
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(238, 61, 37, 0.14), transparent 55%),
    linear-gradient(165deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.02)) !important;
  box-shadow: none !important;
  transform: translateY(-0.25vw);
}

.footer-locations .floc .floc-link:hover::before,
.footer-locations .floc .floc-link:focus-visible::before {
  opacity: 1 !important;
  animation: floc-beam 2s linear infinite !important;
}

.footer-locations .floc .fcity {
  font-family: "Geometria", sans-serif !important;
  font-weight: 600 !important;
  font-size: 1.35vw !important;
  letter-spacing: -0.01em !important;
  color: #fff !important;
  margin: 0 !important;
  display: inline-flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 0.7vw !important;
  position: relative !important;
  z-index: 1 !important;
}

.footer-locations .floc .flag {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  width: 2.6vw !important;
  height: 2.6vw !important;
  margin: 0 !important;
  line-height: 0 !important;
  border-radius: 50% !important;
  background: rgba(255, 255, 255, 0.06) !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  box-shadow: none !important;
  transition: border-color 0.3s ease, background 0.3s ease !important;
}

.footer-locations .floc .flag svg {
  width: 1.35vw !important;
  height: 0.98vw !important;
  display: block !important;
  border-radius: 0.08vw !important;
  box-shadow: none !important;
}

.footer-locations .floc .faddr {
  font-family: "Raleway", sans-serif !important;
  font-weight: 400 !important;
  font-size: 0.86vw !important;
  line-height: 170% !important;
  color: rgba(255, 255, 255, 0.55) !important;
  margin: 0 !important;
  max-width: 18em !important;
  position: relative !important;
  z-index: 1 !important;
  transition: color 0.3s ease !important;
}

.footer-locations .floc .floc-link:hover .faddr,
.footer-locations .floc .floc-link:focus-visible .faddr {
  color: rgba(255, 255, 255, 0.92) !important;
}

.footer-locations .floc .floc-link:hover .flag,
.footer-locations .floc .floc-link:focus-visible .flag {
  border-color: rgba(238, 61, 37, 0.55) !important;
  background: rgba(238, 61, 37, 0.12) !important;
}

/* Tablet: keep US | UK side by side */
@media (min-width: 701px) and (max-width: 1100px) {
  .footer-locations {
    max-width: 94vw !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 0 !important;
    padding: 4.5vw 0 !important;
  }
  .footer-locations .floc {
    padding: 0 1.2vw !important;
  }
  .footer-locations .floc:not(:last-child) {
    border-right: 1px solid transparent !important;
    border-image: linear-gradient(
        180deg,
        transparent 0%,
        rgba(255, 255, 255, 0.16) 18%,
        rgba(238, 61, 37, 0.5) 50%,
        rgba(255, 255, 255, 0.16) 82%,
        transparent 100%
      )
      1 !important;
    border-bottom: 0 !important;
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
  }
  .footer-locations .floc .floc-link {
    padding: 18px 14px !important;
    border-radius: 14px !important;
    gap: 12px !important;
  }
  .footer-locations .floc .fcity {
    font-size: 18px !important;
    gap: 10px !important;
  }
  .footer-locations .floc .flag {
    width: 36px !important;
    height: 36px !important;
  }
  .footer-locations .floc .flag svg {
    width: 20px !important;
    height: 14px !important;
  }
  .footer-locations .floc .faddr {
    font-size: 13px !important;
    max-width: 22em !important;
  }
}

/* Phone only: stack locations */
@media (max-width: 700px) {
  .footer-locations {
    max-width: 92vw !important;
    grid-template-columns: 1fr !important;
    gap: 0 !important;
    padding: 7vw 0 !important;
  }
  .footer-locations .floc {
    padding: 0 !important;
  }
  .footer-locations .floc:not(:last-child) {
    border-right: 0 !important;
    border-image: none !important;
    padding-bottom: 4vw !important;
    margin-bottom: 4vw !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
  }
  .footer-locations .floc .floc-link {
    padding: 5vw 4.5vw !important;
    border-radius: 3.5vw !important;
    gap: 2.5vw !important;
  }
  .footer-locations .floc .fcity {
    font-size: 4.5vw !important;
    gap: 2.2vw !important;
  }
  .footer-locations .floc .flag {
    width: 9vw !important;
    height: 9vw !important;
  }
  .footer-locations .floc .flag svg {
    width: 4.8vw !important;
    height: 3.5vw !important;
  }
  .footer-locations .floc .faddr {
    font-size: 3.4vw !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .footer-locations .floc .floc-link:hover::before,
  .footer-locations .floc .floc-link:focus-visible::before {
    animation: none !important;
    opacity: 1 !important;
    --floc-angle: 200deg;
  }
}