/* present-with-confidence — per-site overrides. Loaded AFTER brand/brand.css.
   House convention: element styling stays inline; these are the rules that
   cannot be: the hero's "(because it is)" annotation (positioned out of
   document flow, repositioned at three breakpoints) and the page's own
   grid breakpoints. The page deliberately does NOT rely on brand's .m-2col,
   which collapses to TWO columns at <=768px — that orphans the third card. */

.hero-note { position: absolute; z-index: 2; pointer-events: none; width: 210px; left: 100%; bottom: -52px; margin-left: 26px; }
.hero-note .note-text { display: block; margin: 2px 0 0 76px; transform: rotate(-15deg); transform-origin: left center; }
@media (max-width: 1400px) {
  .hero-h1-wrap { padding-bottom: 118px; }
  .hero-note { left: auto; right: 0; bottom: 0; margin-left: 0; width: 186px; }
  .hero-note svg { width: 104px; height: 90px; }
  .hero-note .note-text { margin: 2px 0 0 66px; font-size: 16px !important; }
}
@media (max-width: 700px) {
  .hero-h1-wrap { padding-bottom: 106px; }
  .hero-note { width: 164px; }
  .hero-note svg { width: 92px; height: 80px; }
  .hero-note .note-text { margin: 2px 0 0 50px; font-size: 15px !important; }
}
.cards-3 { display: grid; grid-template-columns: repeat(3, 1fr); }
.cards-2 { display: grid; grid-template-columns: repeat(2, 1fr); }
.strip-3 { display: grid; grid-template-columns: repeat(3, 1fr); }
@media (max-width: 980px) { .cards-3 { grid-template-columns: 1fr; } }
@media (max-width: 900px) {
  .cards-2 { grid-template-columns: 1fr; }
  .strip-3 { grid-template-columns: 1fr; }
  .m-stack { grid-template-columns: 1fr !important; }
  .m-hide { display: none !important; }
}
@media (max-width: 540px) {
  .contact-email { font-size: 15px !important; padding: 15px 18px !important; gap: 9px !important; }
}