.branches-hero,
.branches-section {
  width: min(1120px, calc(100% - 40px));
  margin-inline: auto;
}

.branches-hero {
  min-height: 370px;
  display: flex;
  align-items: center;
  margin-top: 10px;
  padding: clamp(42px, 7vw, 82px);
  border-radius: 28px;
  color: #fff;
  background: linear-gradient(125deg, rgba(11, 63, 63, .96), rgba(212, 154, 28, .88)), url("../images/branchmanager.png") center 36% / cover;
}

.branches-hero > div { max-width: 660px; }
.branches-hero .page-eyebrow { color: #f7d56b; }
.branches-hero h1 { margin: 13px 0 18px; font: 700 clamp(2.3rem, 5vw, 4.2rem) / 1.12 "Noto Serif Oriya", serif; }
.branches-hero p { max-width: 580px; margin: 0; color: #fbf4dc; font-size: 1.06rem; line-height: 1.7; }

.branches-section { padding: 92px 0; }
.branch-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 36px; }
.branch-grid article { min-height: 245px; padding: 30px; border: 1px solid #eadfca; border-radius: 18px; background: #fff; box-shadow: 0 10px 25px rgba(83, 62, 15, .05); }
.branch-number { display: block; color: var(--brand-primary); font-size: .78rem; font-weight: 700; letter-spacing: .1em; }
.branch-grid h3 { margin: 17px 0 11px; font: 700 1.45rem "Noto Serif Oriya", serif; }
.branch-grid p { min-height: 52px; margin: 0 0 22px; color: #6b5b4a; line-height: 1.6; }
.branch-grid a { color: var(--brand-primary); font-weight: 700; text-decoration: none; }
.branch-grid a:hover { color: var(--brand-primary-dark); }

html[data-theme="dark"] .branch-grid article { border-color: #514536; background: #30281e; box-shadow: none; }
html[data-theme="dark"] .branch-grid p { color: #cfc1aa; }
html[data-theme="dark"] .branch-grid h3 { color: #f8ecd3; }

@media (max-width: 760px) {
  .branches-hero,
  .branches-section { width: min(100% - 40px, 1120px); }
  .branches-hero { min-height: 330px; }
  .branches-section { padding: 65px 0; }
  .branch-grid { grid-template-columns: 1fr; }
  .branch-grid article { min-height: 0; }
  .branch-grid p { min-height: 0; }
}

@media (max-width: 430px) {
  .branches-hero,
  .branches-section { width: min(100% - 28px, 1120px); }
}