body { margin: 0; background: #F6F2E9; font-family: 'Zen Kaku Gothic New', sans-serif; -webkit-font-smoothing: antialiased; }
a { color: #C13A28; text-decoration: none; }
a:hover { color: #A93222; }
html { scroll-behavior: smooth; }
summary::-webkit-details-marker { display: none; }
summary { list-style: none; cursor: pointer; }
img { max-width: 100%; }

/* Hover states (converted from the design's style-hover attributes).
   !important is required because the base look is set via inline style,
   which otherwise outranks these class rules. */
.hv-darkred:hover   { background: #A93222 !important; }
.hv-fill-navy:hover  { background: #24395B !important; color: #F6F2E9 !important; }
.hv-navy-dark:hover  { background: #1A2B45 !important; }
.hv-white-08:hover   { background: rgba(255,255,255,0.08) !important; }

/* Responsive layer: the design is desktop-first, so on narrow screens
   collapse the multi-column grids to a single column. */
@media (max-width: 820px) {
  .site-nav { display: none !important; }
  .dcgrid { grid-template-columns: 1fr !important; gap: 28px !important; }
  .hero { padding-top: 48px !important; padding-bottom: 52px !important; }
  .scout-list { grid-template-columns: 1fr !important; }
  .site-footer-inner { flex-direction: column !important; align-items: flex-start !important; }
}