/* ═══════════════════════════════════════════════════════════════
   HALFTONE WORDMARK FOOTER — Tight Proportional Canvas Spacing
   ═══════════════════════════════════════════════════════════════ */

/* Tighten spacing between Contact Section and Halftone Wordmark Footer */
#contact {
  padding-bottom: clamp(0.75rem, 1.5vw, 1.5rem) !important;
}

.contact-section-inner {
  margin-bottom: 0 !important;
}

.halftone-wordmark-footer-section {
  position: relative;
  width: 100%;
  background: var(--bg-root);
  transition: background-color 0.4s ease;
  overflow: hidden;
  border-top: none; /* Seamless transition from contact background */
  margin-top: 0;
  padding-top: 0;
  display: block;
  user-select: none;
  -webkit-user-select: none;
}

.hwf-root {
  position: relative;
  width: 100%;
  height: clamp(140px, 16vw, 230px);
  overflow: hidden;
  isolation: isolate;
  background: var(--hwf-bg, var(--bg-root));
  color: var(--hwf-ink, var(--text-primary));
  -webkit-font-smoothing: antialiased;
  transition: background-color 0.35s ease, color 0.35s ease;
  display: block;
  margin: 0;
  padding: 0;
}

.hwf-root canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  max-width: none;
  touch-action: pan-y;
  cursor: crosshair;
}

.hwf-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Responsive Heights on Tablet & Mobile Phones */
@media (max-width: 1024px) {
  #contact {
    padding-bottom: 1rem !important;
  }
  .hwf-root {
    height: clamp(120px, 16vw, 180px);
  }
}

@media (max-width: 768px) {
  #contact {
    padding-bottom: 0.5rem !important;
  }
  .hwf-root {
    height: clamp(95px, 20vw, 135px);
  }
}

@media (max-width: 480px) {
  #contact {
    padding-bottom: 0.25rem !important;
  }
  .hwf-root {
    height: clamp(80px, 22vw, 115px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .hwf-root canvas {
    cursor: default;
  }
}