*{box-sizing:border-box}body{margin:0;font:16px/1.5 system-ui,Arial,Helvetica,sans-serif;color:#222}
.wrap{max-width:1100px;margin:0 auto;padding:0 16px}
.site-header,.site-footer{background:#f6f6f6}
.site-header .wrap,.site-footer .wrap{display:flex;align-items:center;justify-content:space-between;padding:14px 16px}
.nav a{margin-left:14px;text-decoration:none;color:#222}
.hero{padding:64px 0}
.btn{display:inline-block;padding:10px 16px;border:1px solid #222;text-decoration:none}
.content{padding:24px 0}

body {
  background-color: #0b7054;
  margin: 0;
  font-family: Arial, sans-serif;
  color: #fff; /* keep text readable */
}

.site-header,
.site-footer {
  background-color: #0b7054;  /* match body */
  color: #fff;               /* ensure text is visible */
  padding: 20px 0;
}

.site-header .nav a,
.site-footer a {
  color: #fff;
  text-decoration: none;
  margin-left: 16px;
}

.site-header .nav a:hover,
.site-footer a:hover {
  text-decoration: underline;
}




.logo img {
  max-height: 80px;   /* keeps it from taking over the header */
  height: auto;
  width: auto;
  display: block;
}
.site-header .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.hero-banner {
  position: relative;
  background: url('/images/team-header-1920x550.jpg') no-repeat center center;
  background-size: cover;
  min-height: 300px; /* adjust height as needed */
  display: flex;
  align-items: center;
  justify-content: center;
}

.hero-overlay {
  background: rgba(0,0,0,0.5); /* dark overlay for text readability */
  padding: 40px 20px;
  border-radius: 12px;
}

.hero-overlay h1 {
  color: #fff;
  font-size: 2.5rem;
  margin: 0;
  text-align: center;
}

/* page-specific light styles */
.page-wrap{max-width:1100px;margin:0 auto;padding:24px 16px}
.grid{display:grid;grid-template-columns:1fr;gap:24px}
@media(min-width:900px){.grid{grid-template-columns:1fr 1fr}}
.card{background:#fff;border:1px solid #eee;border-radius:12px;padding:20px;box-shadow:0 1px 2px rgba(0,0,0,.04)}
label{display:block;margin:.5rem 0 .25rem;font-weight:600;color:#000}  /* labels black for contrast */
input[type=text],
input[type=email],
select,
textarea{
  width:100%;
  padding:10px;
  border:1px solid #ccc;
  border-radius:8px;
  font-size:16px;
  color:#000;            /* force black text */
  background-color:#fff; /* white background */
}
textarea{min-height:140px;resize:vertical}
.req{color:#cd201b;margin-left:4px}
small.hint{color:#666}
.form-actions{margin-top:14px}
button.btn{
  padding:10px 16px;
  border:1px solid #222;
  border-radius:10px;
  background:#fff;
  color:#000; /* black button text */
  cursor:pointer
}
.alert{padding:12px 14px;border-radius:10px;margin-bottom:16px}
.alert.error{background:#ffecec;border:1px solid #f5b5b5;color:#000}
.alert.ok{background:#ecfff2;border:1px solid #b5f5cd;color:#000}
.honey{position:absolute !important;left:-9999px !important}


:root{
  --green:#1e5b3c;
  --green-dark:#184c33;
  --text:#fff;
}

.wrap{max-width:1200px;margin:0 auto;padding:24px 16px}

/* Banner */
.about-hero{
  margin:0 0 28px;
  background:var(--green);
  color:#fff;
  border-radius:12px;
  padding:48px 16px;
  text-align:center;
}
.about-hero h1{
  margin:0 0 8px;
  font-size:2rem;
  line-height:1.25;
}
.about-hero .sub{
  margin:0;
  opacity:.95;
  font-size:1.1rem;
}

/* Team */
.team-grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:28px;
}
.member{
  background:#fff;
  border:1px solid #e9e9e9;
  border-radius:14px;
  padding:22px;
  box-shadow:0 1px 2px rgba(0,0,0,.04);
}
.avatar{
  width:170px;height:170px;margin:0 auto 12px;
  border-radius:50%;
  border:4px solid #e1f0e8; /* subtle ring */
  overflow:hidden;
  display:flex;align-items:center;justify-content:center;
}
.avatar img{width:100%;height:100%;object-fit:cover;display:block}
.avatar .fallback{
  width:100%;height:100%;
  display:flex;align-items:center;justify-content:center;
  background:linear-gradient(145deg, var(--green), var(--green-dark));
  color:#fff;font-weight:800;font-size:72px;
}
.member h3{
  text-align:center;margin:6px 0 2px;font-size:1.05rem;color:#0b3b29
}
.member .role{
  text-align:center;margin:0 0 12px;color:#47675a;font-weight:600
}
.member .bio{
  margin:0;color:#333;line-height:1.6;font-size:.98rem;
  text-align:left;
}

/* Responsive */
@media (max-width:1024px){
  .team-grid{grid-template-columns:repeat(2, minmax(0,1fr))}
  .avatar{width:150px;height:150px}
}
@media (max-width:640px){
  .about-hero{padding:36px 14px;border-radius:10px}
  .about-hero h1{font-size:1.6rem}
  .team-grid{grid-template-columns:1fr}
  .member{padding:18px}
  .avatar{width:140px;height:140px}
}

.about-header-image {
  text-align:center;
  margin:0 0 28px;
}
.about-header-image img {
  max-width:100%;
  height:auto;
  border-radius:8px; /* optional, soft corners */
  display:block;
  margin:0 auto;
}