article{ max-width:940px; margin:0 auto; padding:32px 16px 40px; }
h1{ font-size:2rem; font-weight:700; color:#003366; margin:0 0 18px; text-align:center; }

.lead, article p { font-size:1.05rem; line-height:1.75; color:#222; text-align:justify; }

.hero{ margin:20px 0 30px; }
.hero-frame{ position:relative; width:100%; height:450px; overflow:hidden; border-radius:5px; }
.hero img{ width:100%; height:100%; object-fit:cover; display:block; }
.caption{
  position:absolute; left:0; right:0; bottom:0; padding:10px 16px;
  text-align:center; color:#fff; font-weight:600;
  background:linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.55) 70%, rgba(0,0,0,.75) 100%);
  font-size:.95rem; border-radius:0 0 10px 10px;
}

.commitments { margin-top:50px; }
.commitments h2{ text-align:center; font-size:1.7rem; color:#0099cc; margin:0 0 28px; }
.commit-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:24px; }
.commit-item{
  background:#f9fafb; border:1px solid #e5e7eb; border-radius:12px; padding:22px 18px; text-align:center;
  transition:transform .2s ease, box-shadow .2s ease;
}
.commit-item:hover{ transform:translateY(-5px); box-shadow:0 8px 18px rgba(0,0,0,.08); }
.commit-item .icon{ font-size:2rem; display:block; margin-bottom:12px; color:#0099cc; }
.commit-item p{ margin:0; font-size:.95rem; color:var(--ink); text-align:center; }
.commit-item strong{ display:block; margin-bottom:6px; }

.foot{ max-width:940px; margin:0 auto; padding:20px 0 40px; text-align:center; color:#64748b; font-size:.9rem; }