/* Simple, clean styles for contact page */
:root{
  --bg:#f7f8fb;
  --card:#ffffff;
  --accent:#0b74de;
  --muted:#666;
  --radius:12px;
  --maxwidth:720px;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,"Helvetica Neue",Arial;
  background:linear-gradient(180deg,var(--bg),#ffffff);
  color:#111;
  -webkit-font-smoothing:antialiased;
}
.container{
  max-width:var(--maxwidth);
  margin:6vh auto;
  padding:1.5rem;
}
/* Header / brand */
.site-header{ margin-bottom:1rem }
.brand{ display:flex; flex-direction:column; align-items:center; gap:.75rem; text-align:center }
.logo{ height:160px; width:auto; border-radius:8px; background:white; padding:8px; box-shadow:0 8px 20px rgba(0,0,0,0.10) }
.brand-text{ display:block; max-width:540px }
.subtag{ color:var(--muted); margin:0; margin-top:.25rem; font-size:1rem }
.card{
  background:var(--card);
  border-radius:var(--radius);
  padding:1rem 1.25rem;
  box-shadow:0 6px 18px rgba(16,24,40,0.06);
  margin-bottom:1rem;
}
.contact-card h2, .about h2{ margin-top:0 }
.contact-card a{ color:var(--accent); text-decoration:none }
.contact-card a:hover{ text-decoration:underline }
ul{ padding-left:1.15rem }
.note{ font-size:.9rem; color:var(--muted); margin-top:.6rem }
footer{ text-align:center; color:var(--muted); font-size:.9rem; margin-top:1rem }
@media (max-width:480px){
  .container{ margin:4vh 1rem }
  .logo{ height:120px }
  .brand{ gap:.6rem; align-items:center }
  .subtag{ font-size:0.95rem }
}