/* Frosted, blended contact styles */
:root{
  --glass-bg: rgba(255,255,255,0.6);
  --glass-stroke: rgba(255,255,255,0.45);
  --shadow: 0 10px 30px rgba(0,0,0,0.15);
  --radius: 16px;
  --radius-lg: 24px;
}

*{box-sizing:border-box}

body.contact-body{
  margin:0;
  font-family: 'Semplicita', system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  line-height:1.5;
  color:#1a1a1a;
  background:
    radial-gradient(1200px 600px at 20% -10%, rgba(255,192,203,0.12), transparent 60%),
    radial-gradient(1000px 500px at 90% -10%, rgba(255,192,203,0.10), transparent 60%),
    #faf8f7;
}

.contact-hero{
  padding: 6rem 1rem 3rem;
  text-align:center;
  background: linear-gradient(180deg, rgba(255,255,255,0.55), rgba(255,255,255,0));
  backdrop-filter: blur(6px);
}

.contact-hero .brand{
  font-family: 'Diaspora', serif;
  letter-spacing: 0.18em;
  margin:0;
  font-size: clamp(28px, 5vw, 44px);
}

.tagline{
  margin: 0.5rem 0 0;
  opacity:0.8;
}

.contact-wrapper{
  display:grid;
  place-items:center;
  padding: 1rem;
}

.contact-card{
  width:min(980px, 92vw);
  background: var(--glass-bg);
  border: 1px solid var(--glass-stroke);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  backdrop-filter: blur(12px);
  padding: clamp(1rem, 3vw, 2rem);
}

.contact-card h2{
  margin:0 0 0.5rem 0;
  font-size: clamp(22px, 3.5vw, 28px);
}

.intro{margin:0 0 1rem 0; opacity:0.85}

.contact-form .field{
  margin-bottom: 1rem;
}

.contact-form label{
  display:block;
  font-size: 0.95rem;
  margin-bottom: 0.35rem;
}

.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form input[type="date"],
.contact-form input[type="time"],
.contact-form input[type="number"],
.contact-form input[type="file"],
.contact-form select,
.contact-form textarea{
  width:100%;
  padding: 0.75rem 0.9rem;
  border-radius: var(--radius);
  border:1px solid rgba(0,0,0,0.08);
  background: rgba(255,255,255,0.65);
  outline:none;
}

.contact-form textarea{resize:vertical}

.grid.two{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}
.grid.three{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}
@media (max-width: 800px){
  .grid.two, .grid.three{ grid-template-columns: 1fr; }
}

.split{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem;
}

.hint{
  display:block;
  margin-top: 0.35rem;
  opacity:0.7;
  font-size: 0.8rem;
}

.hp-field{ /* honeypot: hide accessibly but not display:none */
  position:absolute !important;
  left:-9999px !important;
  width:1px; height:1px; overflow:hidden;
}

.actions{
  display:flex;
  flex-wrap:wrap;
  gap: 0.75rem;
  align-items:center;
  margin-top: 0.5rem;
}





.field.consent label{
  display:flex; gap:0.5rem; align-items:flex-start;
}

.error{
  color:#b00020;
  font-size: 0.8rem;
  min-height: 1em;
}

.form-status{
  margin-top: 1rem;
  padding: 1rem;
  border-radius: var(--radius);
  background: rgba(255,255,255,0.75);
  border: 1px solid rgba(0,0,0,0.08);
  box-shadow: var(--shadow);
}

.site-footer{
  text-align:center;
  padding: 3rem 1rem 2rem;
  opacity:0.8;
  font-size: 0.95rem;
}


/* === Ensure contact page starts below fixed glass nav === */
body.contact-body{
  padding-top: clamp(84px, 10vh, 120px);
}
@media (max-width: 768px){
  body.contact-body{
    padding-top: clamp(80px, 12vh, 120px);
  }
}


/* === Increase padding so contact card clears header fully === */
body.contact-body{
  padding-top: clamp(120px, 14vh, 160px) !important;
}
@media (max-width: 768px){
  body.contact-body{
    padding-top: clamp(90px, 12vh, 130px) !important;
  }
}


/* === Larger breathing room under fixed nav (desktop) === */
@media (min-width: 1024px){
  body.contact-body{
    padding-top: clamp(120px, 12vh, 180px);
  }
}


/* === Extra breathing room under fixed nav (mobile) === */
@media (max-width: 768px){
  body.contact-body{
    padding-top: clamp(100px, 16vh, 180px);
  }
}


/* === More breathing room under nav on mobile contact === */
@media (max-width: 768px){
  body.contact-body{
    padding-top: clamp(140px, 18vh, 220px);
  }
}


/* === Mobile contact spacing v2: enforce with !important === */
@media (max-width: 768px){
  body.contact-body{
    padding-top: clamp(160px, 20vh, 240px) !important;
  }
}

/* === desktop nav hairlines: scope to header only; dedupe === */
@media (min-width: 961px){