.of-contact-app{display:flex;flex-direction:column;min-height:100vh}
.of-contact-main{flex:1;padding:32px 16px;background:#f4f6f8}
.of-contact-shell{max-width:760px;margin:0 auto}

.of-contact-topbar{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 24px;background:#fff;border-bottom:1px solid #e2e8f0}
.of-contact-wordmark{display:flex;align-items:center;gap:10px;text-decoration:none;color:#172033;font-weight:700;font-size:1.1rem}
.of-contact-mark{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;background:#172033;color:#fff;border-radius:8px;font-weight:800}
.of-contact-topbar nav{display:flex;gap:20px}
.of-contact-topbar nav a{color:#475569;text-decoration:none;font-size:.95rem}
.of-contact-topbar nav a:hover{color:#c95f29}

.of-contact-footer{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:12px;padding:18px 24px;background:#fff;border-top:1px solid #e2e8f0;color:#667085;font-size:.9rem}
.of-contact-footer a{color:#667085;text-decoration:underline}

.of-contact-head{text-align:center;margin-bottom:24px}
.of-contact-head h1{margin-bottom:8px}
.of-contact-head p{color:#667085;font-size:1.1rem}

.of-contact-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:16px;margin-top:16px}
.of-contact-card{display:flex;align-items:center;gap:16px;padding:20px;border:1px solid #e2e8f0;border-radius:12px;text-decoration:none;color:#172033;background:#fff;transition:border-color .15s,box-shadow .15s}
.of-contact-card:hover{border-color:#c95f29;box-shadow:0 4px 12px rgba(23,32,51,.08)}
.of-contact-icon{font-size:32px;line-height:1;min-width:40px;text-align:center}
.of-contact-card-body strong{display:block;font-size:1.1rem;margin-bottom:4px}
.of-contact-card-body span{color:#667085;font-size:.95rem}

.of-contact-info{margin:0 0 24px;padding:24px;background:#fff;border:1px solid #e2e8f0;border-radius:12px}
.of-contact-info h2{margin:0 0 10px;font-size:1.2rem}
.of-contact-info p{margin:0;color:#475569;line-height:1.6}

.of-contact-form-head{margin-bottom:24px}
.of-contact-form-head h1{margin:12px 0 8px}
.of-contact-form-head p{color:#667085}
.of-back{display:inline-block;margin-bottom:8px;color:#667085;text-decoration:none}
.of-back:hover{color:#c95f29}

.of-contact-form form,.of-contact-reply form{margin-top:24px;padding:24px;background:#fff;border:1px solid #e2e8f0;border-radius:12px}
.of-field-honeypot{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;opacity:0;pointer-events:none}
.g-recaptcha{margin:16px 0}
.of-field-label{display:flex;flex-direction:column;gap:6px;margin-bottom:20px;font-weight:500}
.of-field-label input,.of-field-label textarea{display:block;width:100%;max-width:100%;padding:10px;border:1px solid #e2e8f0;border-radius:8px;background:#fff;font:inherit}
.of-field-label input:focus,.of-field-label textarea:focus{border-color:#c95f29;outline:none}
.of-required{color:#c95f29}

.of-contact-status[role=status]{margin-top:16px;color:#b91c1c}
.of-contact-success{padding:24px;background:#f0fdf4;border:1px solid #15803d;border-radius:12px;margin-top:24px}
.of-contact-success h2{margin:0 0 8px}
.of-contact-success p{margin:0 0 16px}

.of-contact-thread{margin:24px 0}
.of-contact-message{padding:16px;border-radius:12px;margin-bottom:12px;background:#fff;border:1px solid #e2e8f0}
.of-message-staff{background:#eff6ff;margin-left:48px}
.of-message-visitor{background:#fff;margin-right:48px}
.of-message-meta{font-size:12px;color:#667085;margin-bottom:8px}

@media (min-width:600px){
  .of-contact-list{grid-template-columns:repeat(2,1fr)}
}