/* ==========================================================================
   Brand service pages. Loaded alongside eg-maint.css, which supplies the
   tokens, buttons and shell — this file only adds what is specific to the
   brand template.

   Cards carry their own border and sit in a normal gap rather than being
   separated by a 1px grid gap over a lighter background: a short final row
   would otherwise expose that background as large grey rectangles.
   ========================================================================== */

body.eg-brand .eg-br { padding: 10px 0 20px; }

body.eg-brand .eg-br__head { max-width: 900px; margin-bottom: 46px; }
body.eg-brand .eg-br__h1 {
  font-size: 42px !important; line-height: 1.1; letter-spacing: -.018em;
  margin: 0 0 20px !important; color: var(--eg-ink) !important;
}
body.eg-brand .eg-br__lead {
  font-size: 16.5px !important; line-height: 1.7; color: var(--eg-body) !important; margin: 0 0 15px !important;
}
body.eg-brand .eg-br__cta { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 26px; }

body.eg-brand .eg-br__h2 {
  font-size: 28px !important; line-height: 1.18; letter-spacing: -.015em;
  margin: 0 0 12px !important; color: var(--eg-ink) !important;
}
body.eg-brand .eg-br__sub {
  font-size: 15.5px !important; line-height: 1.66; color: var(--eg-body) !important;
  margin: 0 0 24px !important; max-width: 780px;
}

/* Models */
body.eg-brand .eg-br__models { margin-bottom: 46px; }
body.eg-brand .eg-br__chips {
  list-style: none !important; margin: 18px 0 0 !important; padding: 0 !important;
  display: flex; flex-wrap: wrap; gap: 10px;
}
body.eg-brand .eg-br__chips li {
  list-style: none !important; margin: 0 !important;
  background: var(--eg-panel); border: 1px solid var(--eg-line);
  border-left: 2px solid var(--eg-lime);
  padding: 10px 16px; font-size: 13.5px; color: var(--eg-ink) !important;
  letter-spacing: .01em;
}

/* Common work — the depth of the page */
body.eg-brand .eg-br__work { margin-bottom: 46px; }
body.eg-brand .eg-br__list {
  list-style: none !important; margin: 0 !important; padding: 0 !important;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 14px;
}
body.eg-brand .eg-br__item {
  list-style: none !important; margin: 0 !important;
  background: var(--eg-panel); border: 1px solid var(--eg-line);
  border-left: 2px solid var(--eg-lime); padding: 24px 24px 22px;
  transition: background .25s, border-color .25s;
}
body.eg-brand .eg-br__item:hover { background: var(--eg-panel-2); border-color: var(--eg-line-2); border-left-color: var(--eg-lime); }
body.eg-brand .eg-br__item-t { font-size: 17px !important; color: var(--eg-ink) !important; margin: 0 0 9px !important; letter-spacing: -.005em; }
body.eg-brand .eg-br__item-b { font-size: 14.5px !important; line-height: 1.65; color: var(--eg-body) !important; margin: 0 !important; }

/* Performance */
body.eg-brand .eg-br__perf {
  background: var(--eg-panel); border: 1px solid var(--eg-line); border-top: 3px solid var(--eg-lime);
  padding: 34px 34px 30px; margin-bottom: 46px;
}
body.eg-brand .eg-br__perf-b { font-size: 15.5px !important; line-height: 1.7; color: var(--eg-body) !important; margin: 0 0 12px !important; }
body.eg-brand .eg-br__perf-b:last-child { margin-bottom: 0 !important; }

/* Next steps */
body.eg-brand .eg-br__next { border-top: 1px solid var(--eg-line); padding-top: 40px; margin-bottom: 44px; }

/* Sibling links — internal linking is most of what makes a cluster work */
body.eg-brand .eg-br__siblings { border-top: 1px solid var(--eg-line); padding-top: 34px; }
body.eg-brand .eg-br__siblist {
  list-style: none !important; margin: 16px 0 0 !important; padding: 0 !important;
  display: flex; flex-wrap: wrap; gap: 8px;
}
body.eg-brand .eg-br__siblist li { list-style: none !important; margin: 0 !important; }
body.eg-brand .eg-br__siblist a {
  display: inline-block; padding: 9px 14px; font-size: 13px;
  background: var(--eg-panel); border: 1px solid var(--eg-line);
  color: var(--eg-body) !important; text-decoration: none !important;
  transition: color .25s, border-color .25s;
}
body.eg-brand .eg-br__siblist a:hover { color: var(--eg-lime) !important; border-color: var(--eg-lime) !important; }

@media (max-width: 1024px) {
  body.eg-brand .eg-br__h1 { font-size: 33px !important; }
  body.eg-brand .eg-br__h2 { font-size: 24px !important; }
}
@media (max-width: 720px) {
  body.eg-brand .eg-br__h1 { font-size: 27px !important; }
  body.eg-brand .eg-br__list { grid-template-columns: minmax(0,1fr); }
  body.eg-brand .eg-br__perf { padding: 26px 20px; }
  body.eg-brand .eg-mt-btn { display: block; text-align: center; }
  body.eg-brand .eg-br__cta { flex-direction: column; }
}