/* ==========================================================================
   Storm — global footer (injected sitewide by server.js, storm.uk + titan).
   One evenly-spaced footer used on every page. The native footers (Framer on
   storm.uk, React on titan) are hidden so the site is consistent. Even columns
   via CSS grid (repeat(5) equal tracks + equal gap), even padding all round.
   ========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Anton&display=swap');

:root { --sf-purple: #894eef; }

/* Hide every native footer but ours. */
footer:not(#storm-footer) { display: none !important; }

#storm-footer {
  background: #0a0a0a; color: #cacaca;
  border-top: 1px solid rgba(255, 255, 255, .08);
  padding: clamp(52px, 6vw, 92px) clamp(20px, 5vw, 80px) 40px;
  font-family: Inter, system-ui, sans-serif;
  position: relative; z-index: 1;
}
#storm-footer * { box-sizing: border-box; }

/* even columns + even gaps */
#storm-footer .sf-grid {
  max-width: 1400px; margin: 0 auto;
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: clamp(28px, 3vw, 56px); align-items: start;
}

#storm-footer .sf-label {
  font-family: "Geist Mono", ui-monospace, monospace;
  font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: #777;
  margin: 0 0 18px;
}
#storm-footer .sf-col a,
#storm-footer .sf-col .sf-val {
  display: block; color: #cacaca; text-decoration: none;
  font-size: 16px; line-height: 1.35; margin-bottom: 12px; transition: color .2s ease;
}
#storm-footer .sf-col a:hover { color: #fff; }

/* contact column: bigger email / phone (long email must wrap, never overlap) */
#storm-footer .sf-contact .sf-block { margin-bottom: 26px; }
#storm-footer .sf-contact .sf-val,
#storm-footer .sf-contact span,
#storm-footer .sf-contact a {
  font-size: clamp(16px, 1.25vw, 20px); color: #fff; margin-bottom: 0;
  display: block; overflow-wrap: break-word; word-break: break-word;
}

#storm-footer .sf-ext::after { content: " \2197"; color: var(--sf-purple); }

/* newsletter */
#storm-footer .sf-news p { margin: 0 0 18px; font-size: 15px; line-height: 1.5; color: #cacaca; }
#storm-footer .sf-news form { display: flex; flex-direction: column; gap: 14px; align-items: flex-start; }
#storm-footer .sf-news input {
  width: 100%; background: transparent; border: 0; border-bottom: 1px solid rgba(255, 255, 255, .28);
  color: #fff; padding: 9px 0; font-size: 15px; outline: none;
}
#storm-footer .sf-news input::placeholder { color: #777; }
#storm-footer .sf-news input:focus { border-bottom-color: var(--sf-purple); }
#storm-footer .sf-news button {
  padding: 12px 30px; border-radius: 1000px; background: transparent; color: #fff;
  border: 1px solid rgba(255, 255, 255, .35); cursor: pointer;
  font-weight: 700; font-size: 13px; letter-spacing: .05em; text-transform: uppercase;
  transition: background .2s ease, color .2s ease, border-color .2s ease;
}
#storm-footer .sf-news button:hover { background: var(--sf-purple); border-color: var(--sf-purple); color: #fff; }

/* bottom bar */
#storm-footer .sf-bottom {
  max-width: 1400px; margin: clamp(40px, 5vw, 64px) auto 0; padding-top: 24px;
  border-top: 1px solid rgba(255, 255, 255, .08);
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 14px;
  font-size: 13px; color: #777;
}
#storm-footer .sf-bottom .sf-wordmark { font-family: "Anton", sans-serif; font-style: italic; text-transform: uppercase; letter-spacing: .03em; color: #cacaca; }
#storm-footer .sf-bottom nav a { color: #777; text-decoration: none; margin-left: 22px; transition: color .2s ease; }
#storm-footer .sf-bottom nav a:first-child { margin-left: 0; }
#storm-footer .sf-bottom nav a:hover { color: #fff; }

@media (max-width: 960px) { #storm-footer .sf-grid { grid-template-columns: repeat(2, 1fr); row-gap: 40px; } }
@media (max-width: 560px) { #storm-footer .sf-grid { grid-template-columns: 1fr; } #storm-footer .sf-bottom { flex-direction: column; } }