/* Basic clean responsive styles for HOPCOTT static site */
:root{--max:1100px;--accent:#374151;--brand:#0f172a;--muted:#6b7280;--indigo:#4f46e5;}
*{box-sizing:border-box}
body{font-family:Inter,ui-sans-serif,system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial; color:#111827; margin:0; background:#f8fafc; line-height:1.5;}
.container{max-width:var(--max);margin:0 auto;padding:28px;}
.site-header{background:#fff;border-bottom:1px solid #e6edf3;position:sticky;top:0;z-index:40;}
.header-inner{display:flex;align-items:center;justify-content:space-between;}
.brand{display:flex;gap:12px;align-items:center}
.logo{width:46px;height:46px;border-radius:8px;background:#0f172a;color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700}
.brand h1{font-size:18px;margin:0}
.sub{font-size:12px;color:var(--muted);margin-top:2px}
.nav a{margin-left:18px;text-decoration:none;color:var(--muted);font-weight:600}
.nav a.cta{color:var(--indigo)}
.hero{display:grid;grid-template-columns:1fr;gap:20px;align-items:center;padding:36px 0}
@media(min-width:900px){.hero{grid-template-columns:1fr 420px}}
.eyebrow{color:var(--indigo);font-weight:700;letter-spacing:0.06em;font-size:12px;margin:0}
h2{font-size:30px;margin:8px 0 12px}
.lead{color:#374151;font-size:16px}
.hero-ctas a{display:inline-block;padding:10px 16px;border-radius:8px;text-decoration:none}
.primary{background:var(--indigo);color:#fff}
.secondary{border:1px solid #e6edf3;color:var(--brand);background:#fff;margin-left:10px}
.stats{display:flex;gap:16px;margin-top:18px}
.stats div{background:#fff;padding:12px;border-radius:8px;flex:1;text-align:center}
.image-placeholder{height:260px;background:#eef2ff;border-radius:12px;display:flex;align-items:center;justify-content:center;color:#4b5563}

/* Cards & sections */
.card{background:#fff;border-radius:12px;padding:20px;box-shadow:0 4px 12px rgba(15,23,42,0.03);margin-bottom:20px}
.three-cols{display:grid;grid-template-columns:1fr;gap:16px;margin-top:12px}
@media(min-width:800px){.three-cols{grid-template-columns:repeat(3,1fr)}}
.grid-3{display:grid;grid-template-columns:1fr;gap:16px;margin-top:12px}
@media(min-width:900px){.grid-3{grid-template-columns:repeat(3,1fr)}}
.grid-2{display:grid;grid-template-columns:1fr;gap:16px}
@media(min-width:900px){.grid-2{grid-template-columns:1fr 1fr}}
.service-card{background:#fff;padding:18px;border-radius:10px;box-shadow:0 2px 8px rgba(2,6,23,0.03)}
.service-card ul{padding-left:18px;color:var(--muted)}
.link{display:inline-block;margin-top:12px;color:var(--indigo);text-decoration:none;font-weight:600}
.project .proj-img{height:120px;background:#f3f4f6;border-radius:8px;display:flex;align-items:center;justify-content:center;color:var(--muted)}
.project .meta{font-size:12px;color:var(--muted);margin-top:8px}
.person .avatar{width:70px;height:70px;border-radius:50%;background:#eef2ff;display:flex;align-items:center;justify-content:center;margin:0 auto 10px;color:var(--indigo);font-weight:700}
.person .role{color:var(--indigo);font-weight:700;margin:6px 0}

/* Contact */
.contact-card{display:grid;grid-template-columns:1fr;gap:16px}
@media(min-width:900px){.contact-card{grid-template-columns:1fr 420px}}
.form-row{display:grid;grid-template-columns:1fr;gap:10px}
@media(min-width:700px){.form-row{grid-template-columns:1fr 1fr}}
input,textarea{width:100%;padding:12px;border-radius:8px;border:1px solid #e6edf3}
.form-actions{display:flex;align-items:center;gap:12px;margin-top:8px}
.hint{color:var(--muted);font-size:14px}
.map-placeholder{height:220px;background:#f1f5f9;border-radius:8px;display:flex;align-items:center;justify-content:center;color:var(--muted)}

/* Footer */
.site-footer{background:#fff;border-top:1px solid #e6edf3;margin-top:24px;padding:18px 0}
.small{font-size:13px}
.muted{color:var(--muted)}

/* Utilities */
a{color:var(--indigo);text-decoration:none}
button{cursor:pointer;border:0}