/* The site footer, identical on every page except the landing page:
   email + copy button and social buttons on the left, copyright on the right.
   Uses "footer.hp-footer" so it wins over each page's older footer rules. */
footer.hp-footer {
  display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 16px 24px; margin: 0; padding: 28px 40px 36px; text-align: left;
  border-top: 1px solid rgba(234,227,201,0.12);
}
.hp-footer-contact { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; position: relative; }
.hp-footer-mail { display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 14px; border-radius: 999px; font: 13px/1 Arial, sans-serif; color: rgb(234,227,201); text-decoration: none; border: 1px solid rgba(234,227,201,0.3); transition: color 0.2s, border-color 0.2s; }
.hp-footer-mail:hover { color: rgb(220,75,46); border-color: rgb(220,75,46); }
.hp-footer-btn { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; padding: 0; border-radius: 50%; color: rgb(234,227,201); background: rgba(234,227,201,0.08); border: 1px solid rgba(234,227,201,0.2); cursor: pointer; transition: color 0.2s, border-color 0.2s, background 0.2s; }
.hp-footer-btn:hover { color: rgb(220,75,46); border-color: rgb(220,75,46); background: rgba(220,75,46,0.08); }
.hp-footer-mail svg, .hp-footer-btn svg { width: 16px; height: 16px; fill: currentColor; display: block; }
.hp-footer-gap { width: 8px; }
.hp-footer-copied { position: absolute; left: 0; top: 100%; margin-top: 6px; font: 11px/1.3 Arial, sans-serif; color: rgba(234,227,201,0.55); white-space: nowrap; }
.hp-footer-copy { font: 12px/1.5 Arial, sans-serif; color: rgba(234,227,201,0.45); }
@media (max-width: 768px) {
  footer.hp-footer { flex-direction: column; justify-content: center; text-align: center; padding: 28px 20px 40px; gap: 26px; }
  .hp-footer-contact { justify-content: center; row-gap: 12px; }
  .hp-footer-gap { flex-basis: 100%; width: auto; height: 0; }  /* email on one row, social icons on the next */
  .hp-footer-copied { left: 50%; transform: translateX(-50%); }
}
/* Quick tooltips (data-tip) on the footer email buttons */
[data-tip] { position: relative; }
[data-tip]::after { content: attr(data-tip); position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translate(-50%, 4px); white-space: nowrap; font: 12px/1 Arial, sans-serif; letter-spacing: 0.02em; color: rgb(33,29,29); background: rgb(234,227,201); padding: 7px 10px; border-radius: 6px; pointer-events: none; opacity: 0; transition: opacity 0.15s ease 0.15s, transform 0.15s ease 0.15s; z-index: 5; }
[data-tip]:hover::after, [data-tip]:focus-visible::after { opacity: 1; transform: translate(-50%, 0); }