/* ==========================================================================
   SITE FOOTER — v2 design, ported to the live site
   ==========================================================================

   Self-contained and scoped under .wm-footer: the tokens are declared on the
   element itself rather than inherited, so this works regardless of what the
   bought template stylesheet has already done to the page.

   Two ideas carried over from v2:

   1. A signature — an oversized wordmark cropped by a fixed-height overflow,
      so it reads as trimmed by the edge of the page rather than merely large.
      It behaves like embossing on a letterhead: registered without being read.
   2. Asymmetry — the brand column is wider than the link columns and sits
      opposite them, so the eye has somewhere to start rather than meeting
      four equal-weight blocks.

   Unlike v2 this version also carries real contact details, because v1 has
   them in the database and a footer is where people look for them.
   ========================================================================== */

.wm-footer {
  --azure-300: #5fcdfb;
  --azure-400: #29b6f0;
  --ink-950: #080c12;
  --ink-500: #4e6479;
  --ink-400: #7a8ea3;
  --ink-300: #a8b8c8;
  --ink-200: #cdd8e2;
  --success: #197f52;

  position: relative;
  isolation: isolate;
  overflow: hidden;
  background-color: var(--ink-950) !important;
  background-image: none !important;
  color: var(--ink-300);
  font-family: 'Roboto', sans-serif;
  padding-block: 4.5rem 0;
}

.wm-footer *, .wm-footer *::before, .wm-footer *::after { box-sizing: border-box; }
.wm-footer a { text-decoration: none; }
.wm-footer ul { list-style: none; margin: 0; padding: 0; }

/* Grain, matching the hero, so both dark bands read as the same material. */
.wm-footer::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: .04;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Bloom in the top-left, opposite the hero's top-right one, so scrolling the
   whole page moves the light across rather than repeating it. */
.wm-footer::before {
  content: '';
  position: absolute;
  inset-block-start: -30%;
  inset-inline-start: -15%;
  width: 46rem;
  height: 46rem;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(circle, rgb(41 182 240 / .10) 0%, transparent 62%);
}

.wm-footer__container {
  width: 100%;
  max-width: 1440px;
  margin-inline: auto;
  padding-inline: clamp(1.25rem, .5rem + 3vw, 2.5rem);
  /* Lets the signature size itself against this box rather than the viewport,
     so the wordmark cannot outgrow the space it has to fit in. Safe here
     because the width comes from max-width, never from the contents. */
  container-type: inline-size;
}

/* --- Upper band ------------------------------------------------------------ */

.wm-footer__top {
  display: grid;
  gap: 3rem;
  padding-block-end: 2rem;
}

@media (width >= 62rem) {
  .wm-footer__top {
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 1.75fr);
    gap: 6rem;
  }
}

.wm-footer__brand {
  display: inline-flex;
  align-items: center;
  gap: .5625rem;
  color: #fff !important;
}

.wm-footer__brand svg { flex-shrink: 0; color: var(--azure-400); }

.wm-footer__brand-text {
  font-weight: 600;
  font-size: 1.0625rem;
  letter-spacing: -.028em;
  line-height: 1;
  white-space: nowrap;
}

.wm-footer__brand-suffix {
  font-family: 'Mulish', sans-serif;
  font-size: .6875em;
  letter-spacing: .08em;
  color: var(--ink-500);
  margin-inline-start: .3em;
}

.wm-footer__pitch {
  margin-block-start: 1.5rem;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--ink-300) !important;
  max-width: 34ch;
}

/* --- Contact and social ----------------------------------------------------- */

.wm-footer__contact {
  margin-block-start: 2rem;
  display: flex;
  flex-direction: column;
  gap: .4375rem;
}

.wm-footer__contact a,
.wm-footer__contact span {
  font-size: .875rem;
  color: var(--ink-400) !important;
  transition: color .15s ease;
}

.wm-footer__contact a:hover { color: var(--azure-300) !important; }

.wm-footer__social {
  display: flex;
  gap: .375rem;
  margin-block-start: 1.5rem;
}

.wm-footer__social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.125rem;
  height: 2.125rem;
  border-radius: 4px;
  color: var(--ink-400) !important;
  border: 1px solid rgb(255 255 255 / .12);
  transition: all .15s ease;
}

.wm-footer__social a:hover {
  color: var(--ink-950) !important;
  background-color: var(--azure-400);
  border-color: var(--azure-400);
}

.wm-footer__social svg { width: .9375rem; height: .9375rem; }

/* --- Link columns ------------------------------------------------------------ */

.wm-footer__columns {
  display: grid;
  gap: 3rem 2rem;
  grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr));
}

.wm-footer__heading {
  font-family: 'Mulish', sans-serif;
  font-size: .6875rem;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-500) !important;
  margin: 0 0 1rem;
}

.wm-footer__list { display: flex; flex-direction: column; gap: .625rem; }

.wm-footer__link {
  display: inline-block;
  font-size: .875rem;
  color: var(--ink-300) !important;
  transition: color .15s ease, transform .25s cubic-bezier(.16, 1, .3, 1);
}

/* Nudges right on hover rather than underlining — quieter, and it echoes the
   arrow links used elsewhere on the site. */
.wm-footer__link:hover {
  color: #fff !important;
  transform: translateX(3px);
}

.wm-footer__link--muted { color: var(--ink-500) !important; }

/* --- Signature --------------------------------------------------------------- */

.wm-footer__signature {
  position: relative;
  /* Height comes from the line box now. This used to be a fixed short height
     with the glyphs overflowing it, which cut their lower third — the intent
     was a wordmark trimmed by the edge of the page, but against the lower
     band's divider it just looked like the letters ran behind the copyright
     row. Only overflow-x still matters, and the type is sized to fit. */
  overflow: hidden;
  margin-block: .5rem 1.5rem;
  pointer-events: none;
  user-select: none;
}

.wm-footer__signature-text {
  display: block;
  font-family: 'Mulish', sans-serif;
  font-weight: 800;
  /* ExtraBold Mulish sets "WebMotion HQ" at roughly 6.9em, so the type has to
     stay under a seventh of the container or the overflow eats the HQ. Sized
     with a little room to spare: type short of the right edge reads as an
     inset, type past it reads as broken. Raise this to close the gap. The vw
     pair above is the fallback for browsers without container units. */
  font-size: clamp(2.3rem, 11.6vw, 11rem);
  font-size: 13cqw;
  /* Just over the font's own ascent-plus-descent, so the line box holds every
     glyph — the ascenders on the b and the t, the tail on the Q — instead of
     letting them spill out where the overflow would clip them. */
  line-height: 1.2;
  letter-spacing: -.035em;
  white-space: nowrap;
  color: transparent;
  /* Two clipped layers: light travelling through the word, over the fade that
     makes the crop look intended.

     The light layer is a tile twice the container's width holding two soft
     highlights, repeated across the line. Two per tile puts them exactly one
     container-width apart, so one is always somewhere in the word and the
     motion never has a gap in it. */
  background-image:
    linear-gradient(
      104deg,
      rgb(255 255 255 / 0) 0%,
      rgb(95 205 251 / .16) 18%,
      rgb(255 255 255 / .40) 25%,
      rgb(95 205 251 / .16) 32%,
      rgb(255 255 255 / 0) 50%,
      rgb(95 205 251 / .16) 68%,
      rgb(255 255 255 / .40) 75%,
      rgb(95 205 251 / .16) 82%,
      rgb(255 255 255 / 0) 100%
    ),
    linear-gradient(
      to bottom,
      rgb(255 255 255 / .14) 0%,
      rgb(255 255 255 / .09) 60%,
      rgb(255 255 255 / .06) 100%
    );
  background-size: 200% 100%, 100% 100%;
  background-position: 0 0, 0 0;
  background-repeat: repeat-x, no-repeat;
  -webkit-background-clip: text;
  background-clip: text;
  animation: wm-footer-sheen 7s linear infinite;
}

/* Shifts the tile by exactly its own width, so the loop point lands on an
   identical frame and the flow is unbroken. Linear on purpose: any easing
   would show up as the light slowing at the seam. */
@keyframes wm-footer-sheen {
  from { background-position: 0 0, 0 0; }
  to { background-position: -200% 0, 0 0; }
}

/* Four-point stars, drawn rather than imported — an SVG or an icon font would
   be a lot of ceremony for eight pixels of decoration. */
.wm-footer__spark {
  --size: .8rem;
  --x: 10%;
  --y: 20%;

  position: absolute;
  inset-block-start: var(--y);
  inset-inline-start: var(--x);
  width: var(--size);
  height: var(--size);
  background-color: #fff;
  clip-path: polygon(50% 0%, 58% 42%, 100% 50%, 58% 58%, 50% 100%, 42% 58%, 0% 50%, 42% 42%);
  filter: drop-shadow(0 0 6px rgb(95 205 251 / .8));
  opacity: 0;
  transform: scale(.2);
  /* Half the sheen's period, because a highlight passes any given point twice
     per cycle — that keeps each spark on the light rather than drifting off it. */
  animation: wm-footer-spark 3.5s ease-in-out infinite;
}

/* Positions sit along the light's path and each delay is how long a highlight
   takes to travel that far, so a spark fires as the light reaches it. Spread
   across the cycle, they also mean something is always twinkling. */
.wm-footer__spark:nth-of-type(1) { --x: 9%;  --y: 30%; --size: .75rem; animation-delay: .3s; }
.wm-footer__spark:nth-of-type(2) { --x: 33%; --y: 62%; --size: .55rem; animation-delay: 1.15s; }
.wm-footer__spark:nth-of-type(3) { --x: 57%; --y: 26%; --size: .95rem; animation-delay: 2s; }
.wm-footer__spark:nth-of-type(4) { --x: 79%; --y: 58%; --size: .65rem; animation-delay: 2.75s; }

@keyframes wm-footer-spark {
  0%, 100% { opacity: 0; transform: scale(.2) rotate(-25deg); }
  6% { opacity: 1; transform: scale(1) rotate(10deg); }
  16% { opacity: 0; transform: scale(.3) rotate(50deg); }
}

/* --- Lower band -------------------------------------------------------------- */

.wm-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem 2rem;
  padding-block: 1.5rem 2rem;
  border-top: 1px solid rgb(255 255 255 / .09);
}

.wm-footer__meta { margin: 0; font-size: .8125rem; color: var(--ink-500) !important; }

.wm-footer__legal { display: flex; flex-wrap: wrap; gap: 1rem 1.5rem; }

.wm-footer__legal a {
  font-size: .8125rem;
  color: var(--ink-500) !important;
  transition: color .15s ease;
}

.wm-footer__legal a:hover { color: var(--ink-200) !important; }

.wm-footer__totop {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-family: 'Mulish', sans-serif;
  font-size: .6875rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-400) !important;
  transition: color .15s ease;
}

.wm-footer__totop svg {
  width: .875rem;
  height: .875rem;
  transition: transform .25s cubic-bezier(.16, 1, .3, 1);
}

.wm-footer__totop:hover { color: var(--azure-300) !important; }
.wm-footer__totop:hover svg { transform: translateY(-3px); }

@media (prefers-reduced-motion: reduce) {
  /* The signature falls back to the plain cropped wordmark. Stopping the flow
     is not enough — a frozen highlight layer would leave stripes across the
     letters — so the light comes off entirely along with the sparks. */
  .wm-footer__signature-text {
    animation: none;
    background-image: linear-gradient(
      to bottom,
      rgb(255 255 255 / .14) 0%,
      rgb(255 255 255 / .09) 60%,
      rgb(255 255 255 / .06) 100%
    );
    background-size: 100% 100%;
  }

  .wm-footer__spark { display: none; }

  .wm-footer *, .wm-footer *::before, .wm-footer *::after {
    transition-duration: .01ms !important;
  }
}

/* --- Address -----------------------------------------------------------------
   The address column stores HTML: a list of offices with <strong> headings.
   These rules style whatever shape it arrives in rather than assuming one. */

.wm-footer__address { margin-block-start: .25rem; }

.wm-footer__address ul { display: flex; flex-direction: column; gap: .75rem; }

.wm-footer__address li {
  font-size: .875rem;
  line-height: 1.5;
  color: var(--ink-400) !important;
}

/* Office labels read as small mono headings, matching the column headings. */
.wm-footer__address strong {
  display: block;
  font-family: 'Mulish', sans-serif;
  font-size: .625rem;
  font-weight: 500;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--ink-500) !important;
  margin-block-end: .1875rem;
}

/* Empty list items are common in pasted rich text; collapse them rather than
   leaving mystery gaps. */
.wm-footer__address li:empty { display: none; }

.wm-footer__address p { margin: 0; font-size: .875rem; color: var(--ink-400) !important; }

/* --- Brand mark --------------------------------------------------------------
   The real logo, an image rather than the vector redraw. It carries its own
   colour, so unlike the SVG it does not inherit from the footer — sizing and
   rendering are all that need setting here. */

.wm-footer__mark {
  width: 34px;
  height: 34px;
  display: block;
  flex-shrink: 0;
  /* The source is a 1080px square scaled down hard; this keeps the edges
     crisp rather than letting the browser blur them. */
  image-rendering: -webkit-optimize-contrast;
}