/* ============================================================
   POWDER HOUSE BEND — Site Footer
   Matches full design system. Syne + glacier #62c1db.
   Retro: cyan only. No yellow/magenta/purple scatter.
   ============================================================ */

:root {
  --ft-font:    'Syne', system-ui, -apple-system, sans-serif;
  --ft-mono:    'Courier New', Courier, monospace;
  --ft-accent:  #62c1db;
  --ft-seam:    rgba(98, 193, 219, 0.22);
  --ft-glow:    rgba(98, 193, 219, 0.14);
  --ft-bg:      rgba(7, 11, 18, 0.95);
  --ft-border:  rgba(255, 255, 255, 0.07);
  --ft-text:    #dce5f0;
  --ft-muted:   rgba(220, 229, 240, 0.50);
  --ft-ease:    cubic-bezier(0.22, 1, 0.36, 1);
}


/* ════════════════════════════════════════════════════════════
   SITE FOOTER WRAPPER
════════════════════════════════════════════════════════════ */
.site-footer {
  position: relative;
  z-index: 1;
  overflow: hidden;        /* contain all children — prevents bleed */
  box-sizing: border-box;

  background: var(--ft-bg);
  backdrop-filter: blur(16px) saturate(160%);
  -webkit-backdrop-filter: blur(16px) saturate(160%);

  border-top: 1px solid var(--ft-border);
  box-shadow:
    0 -1px 0 rgba(98, 193, 219, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.02);

  color: var(--ft-text);
  font-family: var(--ft-font);
  font-size: 0.88rem;
  padding: 3.5rem 2rem 1.5rem;
}


/* ════════════════════════════════════════════════════════════
   INNER LAYOUT
════════════════════════════════════════════════════════════ */
.footer-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  justify-content: center;
  align-items: flex-start;
  text-align: center;
}


/* ════════════════════════════════════════════════════════════
   FOOTER COLUMNS
════════════════════════════════════════════════════════════ */
.footer-column {
  flex: 1 1 260px;
  min-width: 0;       /* critical — removes the 220px floor that caused bleed */
  max-width: 100%;
  padding: 1rem 1.25rem;
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid var(--ft-border);
  border-radius: 10px;
  box-sizing: border-box;

  /* Stagger reveal start state */
  opacity: 0;
  transform: translateY(16px);

  transition:
    opacity        0.5s var(--ft-ease),
    transform      0.5s var(--ft-ease),
    box-shadow     0.24s ease,
    border-color   0.22s ease;
}

.footer-column.ft-col-visible {
  opacity: 1;
  transform: translateY(0);
}

.footer-column:hover {
  transform: translateY(-3px);
  border-color: rgba(98, 193, 219, 0.18);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25), 0 0 14px var(--ft-glow);
}

.footer-column.ft-col-visible:hover {
  transform: translateY(-3px);
}

.footer-column h3 {
  font-family: var(--ft-font);
  font-size: 0.60rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ft-accent);
  margin: 0 0 0.75rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--ft-seam);
}

.footer-column p,
.footer-column a {
  font-family: var(--ft-font);
  font-size: 0.84rem;
  color: var(--ft-muted);
  text-decoration: none;
  display: block;
  margin: 0.35rem 0;
  transition: color 0.14s ease;
  /* Prevent long email addresses from overflowing on narrow screens */
  overflow-wrap: break-word;
  word-break: break-word;
}

.footer-column a:hover {
  color: var(--ft-text);
}


/* ════════════════════════════════════════════════════════════
   FOOTER LINKS LIST
════════════════════════════════════════════════════════════ */
.footer-links {
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer-links li a {
  font-family: var(--ft-font);
  font-size: 0.82rem;
  color: var(--ft-muted);
  text-decoration: none;
  display: inline-block;
  padding: 0.25rem 0;
  transition: color 0.14s ease;
}

.footer-links li a:hover {
  color: var(--ft-accent);
}


/* ════════════════════════════════════════════════════════════
   MAP EMBED
════════════════════════════════════════════════════════════ */
.map-container {
  width: 100%;
  box-sizing: border-box;
}

.map-container iframe {
  width: 100%;
  max-width: 100%;
  height: 160px;
  border: 1px solid var(--ft-border);
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
  margin-top: 0.75rem;
  display: block;
  box-sizing: border-box;
}


/* ════════════════════════════════════════════════════════════
   SOCIAL ICONS
════════════════════════════════════════════════════════════ */
.social-icons {
  margin-bottom: 0.75rem;
}

.social-icons a {
  font-size: 1.3rem;
  margin: 0 0.4rem;
  color: var(--ft-muted);
  display: inline-block;
  transition:
    color     0.15s ease,
    transform 0.18s var(--ft-ease);
}

.social-icons a:hover {
  color: var(--ft-accent);
  transform: scale(1.18);
}


/* ════════════════════════════════════════════════════════════
   FOOTER BOTTOM BAR
════════════════════════════════════════════════════════════ */
.footer-bottom {
  margin-top: 2.5rem;
  padding-top: 1rem;
  font-family: var(--ft-font);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--ft-muted);
  text-align: center;
  position: relative;
}

.footer-bottom::before {
  content: '';
  display: block;
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(98, 193, 219, 0.35) 20%,
    rgba(98, 193, 219, 0.55) 50%,
    rgba(98, 193, 219, 0.35) 80%,
    transparent 100%);
  margin-bottom: 1.5rem;
  border-radius: 1px;
}


/* ════════════════════════════════════════════════════════════
   FOOTER POLICY NAV
════════════════════════════════════════════════════════════ */
.footer-policy-nav {
  text-align: center;
  margin-top: 0.75rem;
}

.footer-copy {
  display: block;
  font-family: var(--ft-font);
  font-size: 0.82rem;
  color: var(--ft-muted);
  margin-bottom: 0.4rem;
}

.footer-copy strong { color: var(--ft-text); }

.footer-policy-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.3rem 0.5rem;
  margin-top: 0.25rem;
}

.footer-policy-links a {
  font-family: var(--ft-font);
  font-size: 0.78rem;
  color: rgba(220, 229, 240, 0.45);
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-color: rgba(220, 229, 240, 0.2);
  display: inline;
  margin: 0;
  transition: color 0.14s ease, text-decoration-color 0.14s ease;
}

.footer-policy-links a:hover {
  color: var(--ft-accent);
  text-decoration-color: var(--ft-accent);
}

.policy-sep {
  font-size: 0.7rem;
  opacity: 0.35;
  line-height: 1;
}


/* ════════════════════════════════════════════════════════════
   SITE CREDIT PILL
════════════════════════════════════════════════════════════ */
.site-credit {
  display: flex;
  justify-content: center;
  margin-top: 0.85rem;
}

.credit-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.44rem 0.9rem;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(255,255,255,.12), rgba(255,255,255,.06));
  border: 1px solid rgba(255, 255, 255, .18);
  color: #eef6ff;
  text-decoration: none;
  font-family: var(--ft-font);
  font-size: 0.82rem;
  line-height: 1;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 6px 18px rgba(0,0,0,.14), inset 0 0 0 1px rgba(255,255,255,.05);
  transition:
    background    0.2s ease,
    border-color  0.2s ease,
    box-shadow    0.2s ease,
    transform     0.2s ease;
  /* Prevent pill from exceeding screen width */
  max-width: 100%;
  box-sizing: border-box;
}

.credit-pill:hover {
  background: linear-gradient(90deg, rgba(98,193,219,.18), rgba(98,193,219,.08));
  border-color: rgba(98, 193, 219, 0.35);
  box-shadow: 0 8px 24px rgba(0,0,0,.18), 0 0 12px rgba(98,193,219,.12);
  transform: translateY(-1px);
  color: #eef6ff;
}

.credit-icon  { opacity: 0.9; filter: drop-shadow(0 1px 0 rgba(0,0,0,.25)); flex-shrink: 0; }
.credit-arrow { opacity: 0.75; font-size: 0.75rem; flex-shrink: 0; }
.credit-pill strong { font-weight: 700; }


/* ════════════════════════════════════════════════════════════
   BRAND SHOWCASE
════════════════════════════════════════════════════════════ */
.brand-showcase {
  margin: 4rem auto 3rem;
  text-align: center;
  max-width: 1300px;
  padding: 0 1rem;
  position: relative;
  box-sizing: border-box;

  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.5s ease-out, transform 0.5s var(--ft-ease);
}

.brand-showcase.reveal {
  opacity: 1;
  transform: translateY(0);
}

.brand-showcase h3 {
  font-family: var(--ft-font);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: var(--ft-accent);
  display: inline-block;
  margin: 0 0 2rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--ft-seam);
}

.brand-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
  gap: 1.5rem;
  justify-items: center;
  align-items: center;
}

.brand-grid img {
  width: 100%;
  box-sizing: border-box;
  height: 80px;
  object-fit: contain;
  background: rgba(255, 255, 255, 0.96);
  padding: 0.85rem;
  border-radius: 10px;
  border: 1px solid var(--ft-border);
  filter: grayscale(100%) brightness(1.05);
  opacity: 0.80;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.2);
  transition:
    filter     0.26s ease,
    opacity    0.26s ease,
    transform  0.26s var(--ft-ease),
    box-shadow 0.26s ease;
}

.brand-grid img:hover {
  filter: grayscale(0%) brightness(1.1);
  opacity: 1;
  transform: scale(1.06) rotate(-0.5deg);
  box-shadow:
    0 10px 24px rgba(0, 0, 0, 0.28),
    0 0 16px var(--ft-glow);
}


/* ============================================================
   POWDER HOUSE BEND — Site Footer
   Matches full design system. Syne + glacier #62c1db.

   Retro palette:
     Phosphor green  #c8f135  — headings, active links, credit pill
     Amber           #ffb347  — column h3 labels, social hover, divider
     Tron blue       #00e5ff  — borders, body text, policy links, chrome
     Terminal black  #050a03  — backgrounds
   ============================================================ */

:root {
  --ft-font:    'Syne', system-ui, -apple-system, sans-serif;
  --ft-mono:    'Courier New', Courier, monospace;
  --ft-accent:  #62c1db;
  --ft-seam:    rgba(98, 193, 219, 0.22);
  --ft-glow:    rgba(98, 193, 219, 0.14);
  --ft-bg:      rgba(7, 11, 18, 0.95);
  --ft-border:  rgba(255, 255, 255, 0.07);
  --ft-text:    #dce5f0;
  --ft-muted:   rgba(220, 229, 240, 0.50);
  --ft-ease:    cubic-bezier(0.22, 1, 0.36, 1);

  /* Retro tokens — keep in sync with buttons.css / cards.css */
  --r-green:     #c8f135;
  --r-amber:     #ffb347;
  --r-blue:      #00e5ff;
  --r-bg:        #050a03;
  --r-green-rgb: 200, 241, 53;
  --r-amber-rgb: 255, 179, 71;
  --r-blue-rgb:  0, 229, 255;
}


/* ════════════════════════════════════════════════════════════
   SITE FOOTER WRAPPER  (unchanged)
════════════════════════════════════════════════════════════ */
.site-footer {
  position: relative;
  z-index: 1;
  overflow: hidden;
  box-sizing: border-box;

  background: var(--ft-bg);
  backdrop-filter: blur(16px) saturate(160%);
  -webkit-backdrop-filter: blur(16px) saturate(160%);

  border-top: 1px solid var(--ft-border);
  box-shadow:
    0 -1px 0 rgba(98, 193, 219, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.02);

  color: var(--ft-text);
  font-family: var(--ft-font);
  font-size: 0.88rem;
  padding: 3.5rem 2rem 1.5rem;
}


/* ════════════════════════════════════════════════════════════
   INNER LAYOUT  (unchanged)
════════════════════════════════════════════════════════════ */
.footer-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  justify-content: center;
  align-items: flex-start;
  text-align: center;
}


/* ════════════════════════════════════════════════════════════
   FOOTER COLUMNS  (unchanged)
════════════════════════════════════════════════════════════ */
.footer-column {
  flex: 1 1 260px;
  min-width: 0;
  max-width: 100%;
  padding: 1rem 1.25rem;
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid var(--ft-border);
  border-radius: 10px;
  box-sizing: border-box;

  opacity: 0;
  transform: translateY(16px);

  transition:
    opacity      0.5s var(--ft-ease),
    transform    0.5s var(--ft-ease),
    box-shadow   0.24s ease,
    border-color 0.22s ease;
}

.footer-column.ft-col-visible          { opacity: 1; transform: translateY(0); }
.footer-column:hover                   { transform: translateY(-3px); border-color: rgba(98,193,219,0.18); box-shadow: 0 8px 24px rgba(0,0,0,0.25), 0 0 14px var(--ft-glow); }
.footer-column.ft-col-visible:hover    { transform: translateY(-3px); }

.footer-column h3 {
  font-family: var(--ft-font);
  font-size: 0.60rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ft-accent);
  margin: 0 0 0.75rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--ft-seam);
}

.footer-column p,
.footer-column a {
  font-family: var(--ft-font);
  font-size: 0.84rem;
  color: var(--ft-muted);
  text-decoration: none;
  display: block;
  margin: 0.35rem 0;
  transition: color 0.14s ease;
  overflow-wrap: break-word;
  word-break: break-word;
}

.footer-column a:hover { color: var(--ft-text); }


/* ════════════════════════════════════════════════════════════
   FOOTER LINKS LIST  (unchanged)
════════════════════════════════════════════════════════════ */
.footer-links { list-style: none; padding: 0; margin: 0; }

.footer-links li a {
  font-family: var(--ft-font);
  font-size: 0.82rem;
  color: var(--ft-muted);
  text-decoration: none;
  display: inline-block;
  padding: 0.25rem 0;
  transition: color 0.14s ease;
}

.footer-links li a:hover { color: var(--ft-accent); }


/* ════════════════════════════════════════════════════════════
   MAP EMBED  (unchanged)
════════════════════════════════════════════════════════════ */
.map-container { width: 100%; box-sizing: border-box; }

.map-container iframe {
  width: 100%;
  max-width: 100%;
  height: 160px;
  border: 1px solid var(--ft-border);
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.3);
  margin-top: 0.75rem;
  display: block;
  box-sizing: border-box;
}


/* ════════════════════════════════════════════════════════════
   SOCIAL ICONS  (unchanged)
════════════════════════════════════════════════════════════ */
.social-icons { margin-bottom: 0.75rem; }

.social-icons a {
  font-size: 1.3rem;
  margin: 0 0.4rem;
  color: var(--ft-muted);
  display: inline-block;
  transition: color 0.15s ease, transform 0.18s var(--ft-ease);
}

.social-icons a:hover { color: var(--ft-accent); transform: scale(1.18); }


/* ════════════════════════════════════════════════════════════
   FOOTER BOTTOM BAR  (unchanged)
════════════════════════════════════════════════════════════ */
.footer-bottom {
  margin-top: 2.5rem;
  padding-top: 1rem;
  font-family: var(--ft-font);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--ft-muted);
  text-align: center;
  position: relative;
}

.footer-bottom::before {
  content: '';
  display: block;
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(98,193,219,0.35) 20%,
    rgba(98,193,219,0.55) 50%,
    rgba(98,193,219,0.35) 80%,
    transparent 100%);
  margin-bottom: 1.5rem;
  border-radius: 1px;
}


/* ════════════════════════════════════════════════════════════
   FOOTER POLICY NAV  (unchanged)
════════════════════════════════════════════════════════════ */
.footer-policy-nav { text-align: center; margin-top: 0.75rem; }

.footer-copy {
  display: block;
  font-family: var(--ft-font);
  font-size: 0.82rem;
  color: var(--ft-muted);
  margin-bottom: 0.4rem;
}

.footer-copy strong { color: var(--ft-text); }

.footer-policy-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.3rem 0.5rem;
  margin-top: 0.25rem;
}

.footer-policy-links a {
  font-family: var(--ft-font);
  font-size: 0.78rem;
  color: rgba(220,229,240,0.45);
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-color: rgba(220,229,240,0.2);
  display: inline;
  margin: 0;
  transition: color 0.14s ease, text-decoration-color 0.14s ease;
}

.footer-policy-links a:hover {
  color: var(--ft-accent);
  text-decoration-color: var(--ft-accent);
}

.policy-sep { font-size: 0.7rem; opacity: 0.35; line-height: 1; }


/* ════════════════════════════════════════════════════════════
   SITE CREDIT PILL  (unchanged)
════════════════════════════════════════════════════════════ */
.site-credit { display: flex; justify-content: center; margin-top: 0.85rem; }

.credit-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.44rem 0.9rem;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(255,255,255,.12), rgba(255,255,255,.06));
  border: 1px solid rgba(255,255,255,.18);
  color: #eef6ff;
  text-decoration: none;
  font-family: var(--ft-font);
  font-size: 0.82rem;
  line-height: 1;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 6px 18px rgba(0,0,0,.14), inset 0 0 0 1px rgba(255,255,255,.05);
  transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
  max-width: 100%;
  box-sizing: border-box;
}

.credit-pill:hover {
  background: linear-gradient(90deg, rgba(98,193,219,.18), rgba(98,193,219,.08));
  border-color: rgba(98,193,219,0.35);
  box-shadow: 0 8px 24px rgba(0,0,0,.18), 0 0 12px rgba(98,193,219,.12);
  transform: translateY(-1px);
  color: #eef6ff;
}

.credit-icon  { opacity: 0.9; filter: drop-shadow(0 1px 0 rgba(0,0,0,.25)); flex-shrink: 0; }
.credit-arrow { opacity: 0.75; font-size: 0.75rem; flex-shrink: 0; }
.credit-pill strong { font-weight: 700; }


/* ════════════════════════════════════════════════════════════
   BRAND SHOWCASE  (unchanged)
════════════════════════════════════════════════════════════ */
.brand-showcase {
  margin: 4rem auto 3rem;
  text-align: center;
  max-width: 1300px;
  padding: 0 1rem;
  position: relative;
  box-sizing: border-box;
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.5s ease-out, transform 0.5s var(--ft-ease);
}

.brand-showcase.reveal { opacity: 1; transform: translateY(0); }

.brand-showcase h3 {
  font-family: var(--ft-font);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: var(--ft-accent);
  display: inline-block;
  margin: 0 0 2rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--ft-seam);
}

.brand-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
  gap: 1.5rem;
  justify-items: center;
  align-items: center;
}

.brand-grid img {
  width: 100%;
  box-sizing: border-box;
  height: 80px;
  object-fit: contain;
  background: rgba(255,255,255,0.96);
  padding: 0.85rem;
  border-radius: 10px;
  border: 1px solid var(--ft-border);
  filter: grayscale(100%) brightness(1.05);
  opacity: 0.80;
  box-shadow: 0 4px 14px rgba(0,0,0,0.2);
  transition: filter 0.26s ease, opacity 0.26s ease, transform 0.26s var(--ft-ease), box-shadow 0.26s ease;
}

.brand-grid img:hover {
  filter: grayscale(0%) brightness(1.1);
  opacity: 1;
  transform: scale(1.06) rotate(-0.5deg);
  box-shadow: 0 10px 24px rgba(0,0,0,0.28), 0 0 16px var(--ft-glow);
}


/* ════════════════════════════════════════════════════════════
   RETRO MODE
   
   Role mapping:
     Footer wrapper top border  → Tron blue (structural chrome)
     Scanlines                  → ::before on wrapper
     Column h3 headings         → amber (section label = metadata)
     Column body text/links     → Tron blue dim (supporting copy)
     Column link hover          → phosphor green (selected/active)
     Footer links hover         → phosphor green
     Social icons hover         → amber (warm = person/community)
     Divider line               → amber fade (warmer than chrome)
     Copyright text             → Tron blue dim
     Copyright strong           → Tron blue brighter
     Policy links               → Tron blue dim
     Policy links hover         → phosphor green
     Credit pill                → phosphor green border + text
     Brand logos                → cyan-tinted filter (terminal display)
     Brand showcase h3          → amber dim (it's a label)
════════════════════════════════════════════════════════════ */

/* ── Wrapper ── */
body.retro-mode .site-footer {
  background: rgba(5, 10, 3, 0.98);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-top: 1px solid rgba(var(--r-blue-rgb), 0.35);
  box-shadow:
    0 -1px 0 rgba(var(--r-blue-rgb), 0.22),
    inset 0 0 40px rgba(var(--r-green-rgb), 0.03);
  color: rgba(var(--r-blue-rgb), 0.65);
}

/* Scanlines */
body.retro-mode .site-footer::before {
  content: '';
  pointer-events: none;
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    to bottom,
    transparent            0px,
    transparent            3px,
    rgba(0, 0, 0, 0.20)    3px,
    rgba(0, 0, 0, 0.20)    4px
  );
  z-index: 0;
}

/* Ensure content sits above scanlines */
body.retro-mode .footer-inner,
body.retro-mode .footer-column,
body.retro-mode .footer-bottom,
body.retro-mode .brand-showcase,
body.retro-mode .social-icons {
  position: relative;
  z-index: 1;
}

/* ── Columns ── */
body.retro-mode .footer-column {
  background: rgba(var(--r-green-rgb), 0.015);
  border: 1px solid rgba(var(--r-blue-rgb), 0.18);
  border-radius: 2px;
  box-shadow: none;
}

body.retro-mode .footer-column:hover {
  border-color: rgba(var(--r-blue-rgb), 0.40);
  box-shadow: 0 0 16px rgba(var(--r-blue-rgb), 0.08);
  transform: translateY(-3px);
}

/* Column headings — amber (section labels = metadata) */
body.retro-mode .footer-column h3 {
  font-family: var(--ft-mono);
  font-size: 0.56rem;
  letter-spacing: 0.22em;
  color: var(--r-amber);
  text-shadow: 0 0 8px rgba(var(--r-amber-rgb), 0.50);
  border-bottom-color: rgba(var(--r-amber-rgb), 0.20);
}

/* Column body text */
body.retro-mode .footer-column p,
body.retro-mode .footer-column a {
  font-family: var(--ft-mono);
  font-size: 0.76rem;
  color: rgba(var(--r-blue-rgb), 0.48);
}

/* Column link hover — phosphor green (selected = active) */
body.retro-mode .footer-column a:hover {
  color: var(--r-green);
  text-shadow:
    0 0 4px  rgba(var(--r-green-rgb), 0.90),
    0 0 12px rgba(var(--r-green-rgb), 0.40);
}

/* ── Footer links ── */
body.retro-mode .footer-links li a {
  font-family: var(--ft-mono);
  font-size: 0.76rem;
  color: rgba(var(--r-blue-rgb), 0.45);
}

body.retro-mode .footer-links li a:hover {
  color: var(--r-green);
  text-shadow:
    0 0 4px  rgba(var(--r-green-rgb), 0.90),
    0 0 12px rgba(var(--r-green-rgb), 0.40);
}

/* ── Map ── */
body.retro-mode .map-container iframe {
  border: 1px solid rgba(var(--r-blue-rgb), 0.28);
  border-radius: 2px;
  box-shadow: 0 0 12px rgba(var(--r-blue-rgb), 0.07);
  /* Slight green tint over the map */
  filter: saturate(0.5) brightness(0.75) sepia(0.15) hue-rotate(80deg);
}

/* ── Social icons — amber on hover (community/person = warmth) ── */
body.retro-mode .social-icons a {
  color: rgba(var(--r-blue-rgb), 0.40);
}

body.retro-mode .social-icons a:hover {
  color: var(--r-amber);
  text-shadow: 0 0 10px rgba(var(--r-amber-rgb), 0.60);
  transform: scale(1.18);
}

/* ── Bottom bar ── */
body.retro-mode .footer-bottom {
  font-family: var(--ft-mono);
  font-size: 0.62rem;
  letter-spacing: 0.08em;
  color: rgba(var(--r-blue-rgb), 0.28);
}

/* Divider — amber fade (warmer, separates content from chrome) */
body.retro-mode .footer-bottom::before {
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(var(--r-amber-rgb), 0.18) 20%,
    rgba(var(--r-amber-rgb), 0.38) 50%,
    rgba(var(--r-amber-rgb), 0.18) 80%,
    transparent 100%);
}

/* ── Copyright ── */
body.retro-mode .footer-copy {
  font-family: var(--ft-mono);
  color: rgba(var(--r-blue-rgb), 0.32);
}

body.retro-mode .footer-copy strong {
  color: rgba(var(--r-blue-rgb), 0.55);
}

/* ── Policy links ── */
body.retro-mode .footer-policy-links a {
  font-family: var(--ft-mono);
  color: rgba(var(--r-blue-rgb), 0.28);
  text-decoration-color: rgba(var(--r-blue-rgb), 0.14);
}

body.retro-mode .footer-policy-links a:hover {
  color: var(--r-green);
  text-decoration-color: var(--r-green);
  text-shadow: 0 0 8px rgba(var(--r-green-rgb), 0.50);
}

body.retro-mode .policy-sep { opacity: 0.20; }

/* ── Credit pill — phosphor green (it's a link/action) ── */
body.retro-mode .credit-pill {
  background: rgba(var(--r-green-rgb), 0.05);
  border-color: rgba(var(--r-green-rgb), 0.30);
  color: rgba(var(--r-green-rgb), 0.75);
  box-shadow: 0 0 12px rgba(var(--r-green-rgb), 0.06);
  font-family: var(--ft-mono);
  font-size: 0.74rem;
  border-radius: 2px;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

body.retro-mode .credit-pill:hover {
  background: rgba(var(--r-green-rgb), 0.10);
  border-color: rgba(var(--r-green-rgb), 0.65);
  box-shadow: 0 0 18px rgba(var(--r-green-rgb), 0.14);
  color: var(--r-green);
  text-shadow:
    0 0 4px  rgba(var(--r-green-rgb), 0.90),
    0 0 12px rgba(var(--r-green-rgb), 0.40);
  transform: translateY(-1px);
}

/* ── Brand showcase ── */
body.retro-mode .brand-showcase h3 {
  font-family: var(--ft-mono);
  font-size: 0.54rem;
  letter-spacing: 0.24em;
  color: rgba(var(--r-amber-rgb), 0.45); /* amber — it's a label */
  border-bottom-color: rgba(var(--r-amber-rgb), 0.14);
  text-shadow: none;
}

/* Brand logos — phosphor-tinted, like on a CRT terminal */
body.retro-mode .brand-grid img {
  background: rgba(var(--r-green-rgb), 0.04);
  border: 1px solid rgba(var(--r-blue-rgb), 0.18);
  border-radius: 2px;
  /* Desaturate, then tint green — simulates logo on phosphor screen */
  filter: grayscale(100%) brightness(0.70) sepia(1) hue-rotate(60deg) saturate(3);
  opacity: 0.80;
  box-shadow: none;
}

body.retro-mode .brand-grid img:hover {
  filter: grayscale(100%) brightness(0.90) sepia(1) hue-rotate(60deg) saturate(4.5);
  opacity: 1;
  transform: scale(1.05);
  border-color: rgba(var(--r-green-rgb), 0.40);
  box-shadow: 0 0 14px rgba(var(--r-green-rgb), 0.12);
}


/* ════════════════════════════════════════════════════════════
   RESPONSIVE  (unchanged)
════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .footer-inner {
    flex-direction: column;
    align-items: stretch;
    text-align: center;
    gap: 1rem;
  }

  .footer-column { width: 100%; min-width: 0; margin: 0; box-sizing: border-box; }
  .map-container iframe { height: 200px; }

  .brand-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 0.65rem;
  }

  .brand-grid img { height: 56px; padding: 0.55rem; border-radius: 8px; }
}

@media (max-width: 480px) {
  .site-footer { padding: 2.5rem 1rem 1.25rem; }

  .brand-grid { grid-template-columns: repeat(3, 1fr); gap: 0.5rem; }
  .brand-grid img { height: 48px; padding: 0.45rem; }

  .credit-pill { font-size: 0.74rem; padding: 0.38rem 0.75rem; }
}

@media (max-width: 370px) {
  .site-footer { padding: 2rem 0.75rem 1rem; }

  .footer-column        { padding: 0.85rem; }
  .footer-column h3     { font-size: 0.58rem; }
  .footer-column p,
  .footer-column a,
  .footer-links li a    { font-size: 0.80rem; line-height: 1.5; }
  .map-container iframe { height: 150px; }
  .footer-bottom        { font-size: 0.68rem; }
  .social-icons a       { font-size: 1.1rem; }

  .credit-pill {
    font-size: 0.70rem;
    padding: 0.38rem 0.65rem;
    border-radius: 8px;
    flex-wrap: wrap;
    justify-content: center;
    text-align: center;
    gap: 0.3rem;
  }
}


/* ════════════════════════════════════════════════════════════
   REDUCED MOTION
════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  .footer-column,
  .brand-grid img,
  .social-icons a,
  .brand-showcase,
  .credit-pill {
    transition: none !important;
    animation: none !important;
  }

  .brand-showcase { opacity: 1; transform: none; }
  .footer-column  { opacity: 1; transform: none; }
}