/* Incident report (unlisted /incident page).

   The hero reuses the legal-page pattern (.hero / .eyebrow / .lede) so the
   page reads as part of the site; the block below is copied from terms.css
   rather than loading that stylesheet, because this page has no policy body
   and pulling in a whole template's CSS for three rules is worse. Everything
   else is scoped to .page-template-incident. */

.hero { padding: 56px 0 8px; }
.hero-inner { max-width: none; }
.eyebrow {
  display: inline-block;
  color: var(--blue-dark);
  font-size: 15px; letter-spacing: 0; font-weight: 700;
  margin-bottom: 18px;
}
.hero h1 { font-size: 54px; line-height: 1.05; margin: 0 0 18px; font-weight: 700; letter-spacing: -0.8px; }
.hero h1.all-blue { color: var(--blue-dark); }
.hero .lede { color: #4a4a4a; font-size: 17px; margin: 0; line-height: 1.55; max-width: 620px; }

.page-template-incident .hero .container,
.incident-section .container { max-width: 860px; }

.incident-section { padding: 8px 0 80px; }

/* Form embed — same card treatment as the Refer page's Zoho form. */
.incident-section .form-embed-frame {
  margin: 34px 0 0;
  background: #fff;
  border: 1px solid #e2ecf8;
  border-radius: 18px;
  padding: 10px;
  box-shadow: 0 20px 50px rgba(20, 40, 90, 0.08);
  overflow: hidden;
}
.incident-section .form-embed-frame iframe {
  width: 100%;
  border: none;
  display: block;
  background: #fff;
}

.incident-foot {
  font-size: 14px;
  line-height: 1.7;
  color: var(--muted);
  margin: 22px 0 0;
}
.incident-foot a { color: var(--blue); font-weight: 600; text-decoration: underline; }

@media (max-width: 1100px) { .hero h1 { font-size: 48px; } }
@media (max-width: 980px)  { .hero h1 { font-size: 42px; } }
@media (max-width: 760px) {
  .hero { padding: 40px 0 16px; }
  .hero h1 { font-size: 37px; }
  .incident-section { padding: 8px 0 60px; }
}
@media (max-width: 420px) { .hero h1 { font-size: 31px; } }