@import url("/css/training-course.css");

/* Remove the browser's default outer page margin; BFSM shell spacing stays intentional. */
body {
  margin: 0;
}

/* =========================================================
   BASIC FIRE SAFETY MANAGEMENT (BFSM)
   CSS NAVIGATION MAP

   01. Shared layout, type and variables
   02. Hero
   03. Course overview
   04. Workplace fire safety management
   05. Course content
   06. Benefits
   07. Recommended participants
   08. Training details
   09. CTA
   10. FAQ
   11. Footer (shared FSM/FSO styles in /css/share.css)
   12. Tablet responsive rules
   13. Mobile responsive rules

   Note: later section comments intentionally override earlier
   component rules, preserving the currently approved BFSM UI.
   ========================================================= */

/* 01. Shared layout, type and variables */
.bfsm-page {
  --bfsm-navy: #001776;
  --bfsm-navy-deep: #000f4f;
  --bfsm-red: #a83b2d;
  --bfsm-red-deep: #812a20;
  --bfsm-orange: #b96818;
  --bfsm-pale-blue: #eaf2f8;
  --bfsm-pale-red: #fceae3;
  --bfsm-surface: #f5f6f4;
  --bfsm-line: #d5e0e7;
  --bfsm-text: #233143;
  --bfsm-muted: #465a6f;
  --bfsm-radius: 22px;
  color: var(--bfsm-text);
  font-family: "Poppins", sans-serif;
}

.bfsm-page,
.bfsm-page *,
.bfsm-page *::before,
.bfsm-page *::after {
  box-sizing: border-box;
}

.bfsm-shell {
  width: min(1180px, calc(100% - 40px));
  margin-inline: auto;
}
.bfsm-page section {
  padding: clamp(54px, 6vw, 82px) 0;
}
.bfsm-section-label,
.bfsm-hero-eyebrow {
  display: block;
  margin: 0 0 12px;
  color: var(--bfsm-red);
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}
.bfsm-section-heading {
  max-width: 760px;
  margin: 0 auto 36px;
  text-align: center;
}
.bfsm-section-heading h2,
.bfsm-overview-panel h2,
.bfsm-management-panel h2,
.bfsm-participants-intro h2,
.bfsm-cta h2 {
  margin: 0 0 14px;
  color: var(--bfsm-navy);
  font-size: clamp(2rem, 4vw, 3rem);
  line-height: 1.15;
}
.bfsm-section-heading > p:last-child,
.bfsm-overview-panel > p:last-child,
.bfsm-management-panel p,
.bfsm-participants-intro > p:last-child,
.bfsm-cta p {
  margin: 0;
  color: var(--bfsm-muted);
  line-height: 1.75;
}

.bfsm-hero {
  position: relative;
  isolation: isolate;
  min-height: clamp(390px, 40vw, 520px);
  display: grid;
  align-items: center;
  overflow: hidden;
  color: #fff;
  background: url("/images/basic_fire_course.webp") center / cover no-repeat;
}
.bfsm-hero-overlay {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(
    90deg,
    rgba(0, 13, 77, 0.92),
    rgba(0, 23, 118, 0.72),
    rgba(0, 23, 118, 0.32)
  );
}
.bfsm-hero-content {
  max-width: 760px;
  padding: 64px 0;
}
.bfsm-hero-eyebrow {
  width: fit-content;
  padding: 9px 14px;
  border-radius: 999px;
  background: #fff;
  color: var(--bfsm-navy);
  letter-spacing: 0.08em;
}
.bfsm-hero h1 {
  max-width: 720px;
  margin: 0 0 14px;
  color: #fff;
  font-size: clamp(2.65rem, 6vw, 4.5rem);
  font-weight: 800;
  line-height: 1.08;
  text-shadow: 5px 5px 0 rgba(215, 57, 37, 0.82);
}
.bfsm-hero p {
  max-width: 700px;
  margin: 0 0 30px;
  font-size: clamp(1rem, 1.8vw, 1.2rem);
  line-height: 1.75;
}
.bfsm-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 13px 24px;
  border: 2px solid transparent;
  border-radius: 10px;
  font-weight: 800;
  text-decoration: none;
  transition:
    transform 0.2s ease,
    background-color 0.2s ease;
}
.bfsm-button:hover {
  transform: translateY(-2px);
}
.bfsm-button-primary {
  background: var(--bfsm-red);
  color: #fff;
}
.bfsm-button-primary:hover {
  background: var(--bfsm-red-deep);
  color: #fff;
}

.bfsm-overview {
  background: linear-gradient(180deg, #fff, var(--bfsm-pale-blue));
}
.bfsm-overview-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 20px;
  align-items: stretch;
}
.bfsm-overview-panel {
  padding: clamp(28px, 4vw, 46px);
  border: 1px solid var(--bfsm-line);
  border-left: 6px solid var(--bfsm-navy);
  border-radius: var(--bfsm-radius);
  background: #fff;
  box-shadow: 0 10px 26px rgba(0, 23, 118, 0.08);
}
.bfsm-management-panel {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr);
  gap: 18px;
  padding: clamp(28px, 4vw, 46px);
  border: 1px solid rgba(215, 57, 37, 0.2);
  border-radius: var(--bfsm-radius);
  background: #fff7f6;
  box-shadow: 0 10px 26px rgba(0, 23, 118, 0.08);
}
.bfsm-management-icon {
  display: inline-flex;
  width: 64px;
  height: 64px;
  align-items: center;
  justify-content: center;
  border-radius: 16px;
  background: var(--bfsm-pale-red);
  color: var(--bfsm-red);
  font-size: 1.8rem;
}

.bfsm-modules {
  background: #f7faff;
}
.bfsm-module-track {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  max-width: 1000px;
  margin-inline: auto;
}
.bfsm-module-item {
  position: relative;
  min-height: 104px;
  padding: 22px 22px 20px;
  border: 1px solid rgba(0, 23, 118, 0.18);
  border-radius: 12px;
  background: #fff;
  text-align: center;
  box-shadow: 0 10px 26px rgba(0, 23, 118, 0.05);
  transition:
    background-color 0.2s ease,
    transform 0.2s ease;
}
.bfsm-module-item:last-child {
  grid-column: 1 / -1;
  width: calc(50% - 8px);
  justify-self: center;
}
.bfsm-module-item::before {
  position: absolute;
  inset: 0 auto 0 0;
  width: 5px;
  border-radius: 12px 0 0 12px;
  background: var(--bfsm-red);
  content: "";
  transform: scaleY(0);
  transform-origin: bottom;
  transition: transform 0.2s ease;
}
.bfsm-module-item:nth-child(even)::before {
  background: var(--bfsm-orange);
}
.bfsm-module-item:hover {
  background: #f7faff;
  transform: translateX(5px);
}
.bfsm-module-item:hover::before {
  transform: scaleY(1);
}
.bfsm-module-item span {
  display: block;
  margin-bottom: 8px;
  color: var(--bfsm-red);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.06em;
}
.bfsm-module-item:nth-child(even) span {
  color: #bd4c08;
}
.bfsm-module-item h3 {
  margin: 0;
  color: var(--bfsm-navy);
  font-size: 1.02rem;
  line-height: 1.4;
}

.bfsm-benefits {
  background: #fff;
}
.bfsm-benefit-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}
.bfsm-benefit-card {
  padding: 25px 22px;
  border: 1px solid var(--bfsm-line);
  border-top: 4px solid var(--bfsm-red);
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 10px 26px rgba(0, 23, 118, 0.08);
}
.bfsm-benefit-card:nth-child(2) {
  border-top-color: var(--bfsm-orange);
}
.bfsm-benefit-card:nth-child(3) {
  border-top-color: var(--bfsm-navy);
}
.bfsm-benefit-card:nth-child(4) {
  border-top-color: #f3b43f;
}
.bfsm-benefit-card i,
.bfsm-details-grid i {
  display: inline-flex;
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
  border-radius: 13px;
  background: var(--bfsm-pale-red);
  color: var(--bfsm-red);
  font-size: 1.2rem;
}
.bfsm-benefit-card h3,
.bfsm-details-grid h3 {
  margin: 0 0 9px;
  color: var(--bfsm-navy);
  font-size: 1.04rem;
}
.bfsm-benefit-card p,
.bfsm-details-grid p {
  margin: 0;
  color: var(--bfsm-muted);
  font-size: 0.94rem;
  line-height: 1.65;
}

.bfsm-participants {
  background: var(--bfsm-pale-blue);
}
.bfsm-participants-layout {
  display: grid;
  grid-template-columns: minmax(260px, 0.78fr) minmax(0, 1.22fr);
  gap: 26px;
  align-items: stretch;
}
.bfsm-participants-intro {
  padding: 34px;
  border-radius: var(--bfsm-radius);
  background: var(--bfsm-navy);
}
.bfsm-participants-intro h2,
.bfsm-participants-intro > p:last-child {
  color: #fff;
}
.bfsm-participants-intro .bfsm-section-label {
  color: #a9c8ff;
}
.bfsm-participant-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.bfsm-participant-list li {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 20px;
  border: 1px solid var(--bfsm-line);
  border-radius: 16px;
  background: #fff;
  color: var(--bfsm-navy);
  font-weight: 700;
  box-shadow: 0 10px 26px rgba(0, 23, 118, 0.06);
}
.bfsm-participant-list i {
  color: var(--bfsm-red);
  font-size: 1.25rem;
}

.bfsm-training-details {
  background: var(--bfsm-surface);
}
.bfsm-details-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}
.bfsm-details-grid article {
  padding: 24px 22px;
  border: 1px solid var(--bfsm-line);
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 10px 26px rgba(0, 23, 118, 0.06);
}
.bfsm-details-grid article:nth-child(4) {
  grid-column: 1 / 2;
}
.bfsm-details-grid article:nth-child(5) {
  grid-column: 2 / 3;
}

.bfsm-cta {
  background: var(--bfsm-navy);
}
.bfsm-cta-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
}
.bfsm-cta-content > div {
  max-width: 760px;
}
.bfsm-cta h2,
.bfsm-cta p {
  color: #fff;
}
.bfsm-cta .bfsm-section-label {
  color: #a9c8ff;
}
.bfsm-cta .bfsm-button {
  flex: 0 0 auto;
}

.bfsm-faq {
  background: #fff;
}
.bfsm-faq-list {
  display: grid;
  gap: 12px;
  max-width: 930px;
  margin-inline: auto;
}
.bfsm-faq-list details {
  border: 1px solid var(--bfsm-line);
  border-radius: 14px;
  background: #fff;
  overflow: hidden;
}
.bfsm-faq-list summary {
  position: relative;
  padding: 19px 54px 19px 20px;
  color: var(--bfsm-navy);
  cursor: pointer;
  font-weight: 800;
  list-style: none;
}
.bfsm-faq-list summary::after {
  position: absolute;
  top: 50%;
  right: 20px;
  color: var(--bfsm-red);
  content: "+";
  font-size: 1.5rem;
  transform: translateY(-50%);
}
.bfsm-faq-list details[open] summary::after {
  content: "−";
}
.bfsm-faq-list details > p {
  margin: 0;
  padding: 0 20px 16px;
  color: var(--bfsm-muted);
  line-height: 1.72;
}
.bfsm-faq-list details > p:last-child {
  padding-bottom: 20px;
}
.bfsm-faq-list a {
  color: var(--bfsm-red);
  font-weight: 800;
}

.bfsm-site-footer {
  padding: 38px 0 16px;
  border-top: 1px solid var(--bfsm-line);
  background: #fff;
  color: var(--bfsm-navy);
  font-family: "Poppins", sans-serif;
}
.bfsm-footer-grid {
  display: grid;
  grid-template-columns: 1.45fr 1.1fr 0.9fr 0.75fr 1.15fr;
  gap: 24px;
  align-items: start;
}
.bfsm-footer-company img {
  display: block;
  width: min(100%, 265px);
  height: auto;
  margin-bottom: 12px;
}
.bfsm-site-footer h3 {
  margin: 0 0 12px;
  color: var(--bfsm-navy);
  font-size: 1rem;
}
.bfsm-site-footer p,
.bfsm-site-footer a {
  margin: 0;
  color: var(--bfsm-navy);
  font-size: 0.88rem;
  line-height: 1.7;
}
.bfsm-site-footer a {
  display: block;
  text-decoration: none;
}
.bfsm-site-footer a:hover {
  color: var(--bfsm-red);
  text-decoration: underline;
}
.bfsm-footer-links {
  display: grid;
  gap: 6px;
}
.bfsm-footer-badges {
  display: flex;
  gap: 10px;
  align-items: center;
}
.bfsm-footer-badges img {
  width: min(50%, 112px);
  height: auto;
  object-fit: contain;
}
.bfsm-footer-copyright {
  margin: 26px auto 0;
  padding: 14px 20px 0;
  border-top: 1px solid var(--bfsm-line);
  text-align: center;
}

.bfsm-legacy-page,
.legacy-course-content {
  display: none !important;
}

@media (max-width: 900px) {
  .bfsm-overview-layout {
    grid-template-columns: 1fr;
  }
  .bfsm-benefit-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .bfsm-participants-layout {
    grid-template-columns: 1fr;
  }
  .bfsm-details-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .bfsm-details-grid article:nth-child(4),
  .bfsm-details-grid article:nth-child(5) {
    grid-column: auto;
  }
  .bfsm-footer-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 620px) {
  .bfsm-shell {
    width: min(100% - 30px, 1180px);
  }
  .bfsm-page section {
    padding: 58px 0;
  }
  .bfsm-hero-content {
    padding: 62px 0;
  }
  .bfsm-hero h1 {
    font-size: clamp(2.65rem, 13vw, 4rem);
    text-shadow: 4px 4px 0 rgba(215, 57, 37, 0.82);
  }
  .bfsm-management-panel {
    grid-template-columns: 1fr;
  }
  .bfsm-module-track {
    grid-template-columns: 1fr;
  }
  .bfsm-module-item,
  .bfsm-module-item:last-child {
    grid-column: auto;
    width: auto;
  }
  .bfsm-benefit-grid,
  .bfsm-participant-list,
  .bfsm-details-grid {
    grid-template-columns: 1fr;
  }
  .bfsm-cta-content {
    align-items: flex-start;
    flex-direction: column;
  }
  .bfsm-footer-grid {
    grid-template-columns: 1fr;
  }
  .bfsm-footer-badges {
    justify-content: flex-start;
  }
}

.kg-course-page.theme-fire {
  --kg-accent: #ff751f;
  --kg-accent-deep: #c34a0d;
  --kg-accent-soft: #fff2e9;
}
.theme-fire .kg-course-hero {
  min-height: clamp(480px, 50vw, 750px);
  background-image:
    linear-gradient(
      90deg,
      rgba(0, 13, 77, 0.9),
      rgba(0, 23, 118, 0.68),
      rgba(0, 23, 118, 0.28)
    ),
    url("/images/fire-background.webp");
  background-position: center;
  background-size: cover;
}
.theme-fire .kg-course-hero::after {
  background: var(--kg-accent);
  opacity: 0.08;
}
.theme-fire .kg-course-hero-inner {
  display: block;
  min-height: clamp(480px, 50vw, 750px);
  padding-block: 110px;
}
.theme-fire .kg-course-hero-media {
  display: none;
}
.kg-course-page .kg-course-section-kicker {
  display: none;
}

.bfsm-overview-section {
  background: var(--kg-blue-soft);
}
.bfsm-intro-layout {
  display: grid;
  grid-template-columns: minmax(280px, 0.85fr) minmax(0, 1.15fr);
  gap: 42px;
  align-items: center;
  padding: clamp(28px, 5vw, 52px);
  border: 1px solid var(--kg-line);
  border-radius: 22px;
  background: #fff;
  box-shadow: 0 20px 52px rgba(0, 23, 118, 0.1);
}
.bfsm-intro-image {
  overflow: hidden;
  margin: 0;
  border-radius: 18px;
  background: var(--kg-navy);
}
.bfsm-intro-image img {
  display: block;
  width: 100%;
  height: 300px;
  object-fit: cover;
}
.bfsm-intro-image figcaption {
  padding: 12px 16px;
  color: #fff;
  font-size: 0.82rem;
}
.bfsm-intro-copy h2,
.bfsm-management-panel h2,
.bfsm-participants-intro h2 {
  margin-bottom: 14px;
  color: var(--kg-navy);
  font-size: clamp(2rem, 4vw, 3rem);
  line-height: 1.12;
}
.bfsm-intro-copy p,
.bfsm-management-panel p,
.bfsm-participants-intro p {
  margin: 0;
  color: #3f4c63;
  font-size: 1rem;
  line-height: 1.75;
}
.bfsm-management-section {
  background: #fff7f2;
}
.bfsm-management-panel {
  display: grid;
  grid-template-columns: 82px minmax(0, 1fr);
  gap: 26px;
  align-items: start;
  padding: clamp(28px, 5vw, 52px);
  border: 1px solid rgba(215, 57, 37, 0.18);
  border-left: 6px solid var(--kg-accent);
  border-radius: 22px;
  background: #fff;
  box-shadow: 0 16px 42px rgba(0, 23, 118, 0.07);
}
.bfsm-management-panel h2 {
  color: var(--kg-red);
}
.bfsm-management-icon {
  display: inline-flex;
  width: 70px;
  height: 70px;
  align-items: center;
  justify-content: center;
  border-radius: 18px;
  background: var(--kg-accent-soft);
  color: var(--kg-accent);
  font-size: 2rem;
}
.bfsm-benefits-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}
.bfsm-benefit-card {
  padding: 22px 20px;
  border-top: 4px solid var(--kg-accent);
}
.bfsm-benefit-card:nth-child(2) {
  border-top-color: var(--kg-red);
}
.bfsm-benefit-card:nth-child(3) {
  border-top-color: var(--kg-navy);
}
.bfsm-benefit-card:nth-child(4) {
  border-top-color: var(--kg-gold);
}
.bfsm-participants-section {
  background: var(--kg-surface);
}
.bfsm-participants-layout {
  display: grid;
  grid-template-columns: minmax(260px, 0.75fr) minmax(0, 1.25fr);
  gap: 26px;
  align-items: stretch;
}
.bfsm-participants-intro {
  padding: 34px;
  border-radius: 20px;
  background: var(--kg-navy);
}
.bfsm-participants-intro h2,
.bfsm-participants-intro p {
  color: #fff;
}
.bfsm-participants-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}
.bfsm-participant-item {
  display: flex;
  min-height: 92px;
  align-items: center;
  gap: 14px;
  padding: 20px;
  border: 1px solid var(--kg-line);
  border-radius: 16px;
  background: #fff;
  color: var(--kg-navy);
  font-weight: 700;
  box-shadow: 0 10px 26px rgba(0, 23, 118, 0.06);
}
.bfsm-participant-item i {
  flex: 0 0 38px;
  color: var(--kg-accent);
  font-size: 1.35rem;
  text-align: center;
}

.bfsm-course-content-card,
.bfsm-benefit-card {
  min-height: 100%;
}

.bfsm-course-content-track {
  position: relative;
  display: grid;
  gap: 16px;
  max-width: 920px;
  margin-inline: auto;
}

.bfsm-course-content-track::before {
  position: absolute;
  top: 24px;
  bottom: 24px;
  left: 31px;
  width: 2px;
  background: rgba(255, 117, 31, 0.25);
  content: "";
}

.bfsm-course-content-card {
  z-index: 1;
  display: grid;
  grid-template-columns: 48px 58px minmax(0, 1fr);
  align-items: center;
  gap: 18px;
  min-height: 86px;
  padding: 18px 24px;
}

.bfsm-course-content-card::before {
  display: none;
}

.bfsm-course-content-card .bfsm-card-icon {
  margin: 0;
}

.bfsm-course-content-card .kg-course-number {
  margin: 0;
  font-size: 0.9rem;
}

.bfsm-course-content-card h3 {
  margin: 0;
}

.bfsm-training-details-layout {
  display: grid;
  grid-template-columns: minmax(280px, 0.78fr) minmax(0, 1.22fr);
  gap: 24px;
  align-items: stretch;
}

.bfsm-training-image {
  min-height: 100%;
  margin: 0;
  overflow: hidden;
  border-radius: 20px;
  background: var(--kg-navy);
  box-shadow: 0 18px 42px rgba(0, 23, 118, 0.12);
}

.bfsm-training-image img {
  display: block;
  width: 100%;
  height: calc(100% - 47px);
  min-height: 320px;
  object-fit: cover;
}

.bfsm-training-image figcaption {
  padding: 14px 18px;
  color: #fff;
  font-size: 0.82rem;
}

.bfsm-training-details {
  grid-template-columns: 1fr;
  gap: 14px;
}

.bfsm-training-details .kg-course-detail {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr);
  column-gap: 14px;
  align-items: start;
  padding: 20px 22px;
}

.bfsm-training-details .bfsm-detail-icon {
  grid-row: span 2;
  margin: 0;
}

.bfsm-training-details .kg-course-detail h3,
.bfsm-training-details .kg-course-detail p {
  grid-column: 2;
}

@media (max-width: 860px) {
  .bfsm-intro-layout,
  .bfsm-participants-layout {
    grid-template-columns: 1fr;
  }
  .bfsm-benefits-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .bfsm-intro-image img {
    height: 260px;
  }
  .bfsm-management-panel {
    grid-template-columns: 64px minmax(0, 1fr);
  }
  .bfsm-management-icon {
    width: 58px;
    height: 58px;
    font-size: 1.5rem;
  }

  .theme-fire .kg-course-hero-inner {
    padding-block: 82px;
  }
}

@media (max-width: 600px) {
  .bfsm-benefits-grid,
  .bfsm-participants-list {
    grid-template-columns: 1fr;
  }
  .bfsm-management-panel {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .bfsm-participants-intro {
    padding: 24px;
  }
  .bfsm-intro-layout {
    padding: 22px;
  }
}

@media (max-width: 860px) {
  .bfsm-training-details-layout {
    grid-template-columns: 1fr;
  }

  .bfsm-training-image img {
    height: 280px;
    min-height: 0;
  }
}

@media (max-width: 600px) {
  .bfsm-course-content-track::before {
    left: 25px;
  }

  .bfsm-course-content-card {
    grid-template-columns: 42px 42px minmax(0, 1fr);
    gap: 12px;
    padding: 16px;
  }

  .bfsm-course-content-card h3 {
    font-size: 1rem;
  }
}

.bfsm-card-icon,
.bfsm-detail-icon,
.bfsm-faq-heading-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--kg-accent);
}

.bfsm-card-icon {
  width: 48px;
  height: 48px;
  margin-bottom: 18px;
  border-radius: 14px;
  background: var(--kg-accent-soft);
  font-size: 1.25rem;
}

.bfsm-detail-icon {
  width: 42px;
  height: 42px;
  margin-bottom: 14px;
  border-radius: 12px;
  background: var(--kg-accent-soft);
  font-size: 1.1rem;
}

.bfsm-faq-heading-icon {
  width: 58px;
  height: 58px;
  margin: 0 auto 14px;
  border: 1px solid rgba(255, 117, 31, 0.2);
  border-radius: 50%;
  background: var(--kg-accent-soft);
  font-size: 1.45rem;
}

@media (max-width: 600px) {
  .bfsm-card-icon {
    width: 42px;
    height: 42px;
    margin-bottom: 14px;
  }
}

/* Final BFSM layout overrides: keep the page compact and independent of legacy rules. */
.bfsm-page section {
  padding: clamp(54px, 6vw, 82px) 0;
}
.bfsm-hero {
  min-height: clamp(390px, 40vw, 520px);
}
.bfsm-hero-content {
  padding: 64px 0;
}
.bfsm-hero h1 {
  margin-bottom: 14px;
  font-size: clamp(2.65rem, 6vw, 4.5rem);
  line-height: 1.08;
  text-shadow: 5px 5px 0 rgba(215, 57, 37, 0.82);
}
.bfsm-overview-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 20px;
  align-items: stretch;
}
.bfsm-overview-panel {
  padding: clamp(28px, 4vw, 46px);
}
.bfsm-management-panel {
  grid-template-columns: 58px minmax(0, 1fr);
  gap: 18px;
  padding: clamp(28px, 4vw, 46px);
  border-color: rgba(215, 57, 37, 0.2);
  border-left: 1px solid rgba(215, 57, 37, 0.2);
  background: #fff7f6;
}
.bfsm-module-track {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  max-width: 1000px;
  margin-inline: auto;
}
.bfsm-module-item {
  position: relative;
  min-height: 104px;
  padding: 22px 22px 20px;
  border: 1px solid rgba(0, 23, 118, 0.18);
  border-radius: 12px;
  background: #fff;
  text-align: center;
  box-shadow: 0 10px 26px rgba(0, 23, 118, 0.05);
}
.bfsm-module-item:last-child {
  grid-column: 1 / -1;
  width: calc(50% - 8px);
  justify-self: center;
}
.bfsm-module-item::before {
  position: absolute;
  inset: 0 auto 0 0;
  width: 5px;
  border-radius: 12px 0 0 12px;
  background: var(--bfsm-red);
  content: "";
  transform: scaleY(0);
  transform-origin: bottom;
  transition: transform 0.2s ease;
}
.bfsm-module-item:nth-child(even)::before {
  background: var(--bfsm-orange);
}
.bfsm-module-item:hover {
  background: #f7faff;
  transform: translateX(5px);
}
.bfsm-module-item:hover::before {
  transform: scaleY(1);
}
.bfsm-module-item span {
  display: block;
  width: auto;
  height: auto;
  margin: 0 0 8px;
  border-radius: 0;
  background: transparent;
  color: var(--bfsm-red);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.06em;
}
.bfsm-module-item:nth-child(even) span {
  color: #bd4c08;
}
.bfsm-module-item h3 {
  margin: 0;
  color: var(--bfsm-navy);
  font-size: 1.02rem;
  line-height: 1.4;
}

@media (max-width: 900px) {
  .bfsm-overview-layout {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 620px) {
  .bfsm-hero-content {
    padding: 62px 0;
  }
  .bfsm-module-track {
    grid-template-columns: 1fr;
  }
  .bfsm-module-item,
  .bfsm-module-item:last-child {
    grid-column: auto;
    width: auto;
  }
}

/* Typography and FAQ behaviour aligned to the FSM/FSO responsive system. */
.bfsm-page {
  font-size: 16px;
}
.bfsm-section-label,
.bfsm-hero-eyebrow {
  font-size: 11px;
}
.bfsm-section-heading h2,
.bfsm-overview-panel h2,
.bfsm-management-panel h2,
.bfsm-participants-intro h2,
.bfsm-cta h2 {
  font-size: clamp(28px, 4vw, 30px);
  line-height: 1.15;
  letter-spacing: -0.025em;
}
.bfsm-section-heading > p:last-child,
.bfsm-overview-panel > p:last-child,
.bfsm-management-panel p,
.bfsm-participants-intro > p:last-child,
.bfsm-cta p {
  font-size: 16px;
}
.bfsm-hero h1 {
  font-size: clamp(2rem, 9vw, 4.5rem);
  line-height: 1.1;
}
.bfsm-hero p {
  font-size: 16px;
}
.bfsm-module-item h3,
.bfsm-benefit-card h3,
.bfsm-details-grid h3 {
  font-size: 17px;
}
.bfsm-benefit-card p,
.bfsm-details-grid p,
.bfsm-participant-list li {
  font-size: 16px;
}

.bfsm-faq {
  background: #eef5fb;
}
.bfsm-faq-list {
  max-width: 920px;
  margin: 40px auto 0;
  border-top: 1px solid #bdccdc;
}
.bfsm-faq-item {
  padding: 0 20px;
  border-bottom: 1px solid #bdccdc;
  background: transparent;
}
.bfsm-faq-question {
  position: relative;
  display: block;
  width: 100%;
  padding: 24px 58px 24px 0;
  border: 0;
  background: transparent;
  color: var(--bfsm-text);
  cursor: pointer;
  font: inherit;
  font-size: 18px;
  font-weight: 800;
  line-height: 1.45;
  text-align: left;
  transition: color 0.2s ease;
}
.bfsm-faq-question::after {
  position: absolute;
  top: 50%;
  right: 10px;
  width: 30px;
  height: 30px;
  color: var(--bfsm-navy);
  content: "+";
  font-size: 25px;
  font-weight: 500;
  line-height: 28px;
  text-align: center;
  transform: translateY(-50%);
}
.bfsm-faq-question.active::after {
  color: var(--bfsm-orange);
  content: "−";
}
.bfsm-faq-question:hover,
.bfsm-faq-question:focus-visible {
  color: var(--bfsm-navy);
}
.bfsm-faq-question:focus-visible {
  outline: 3px solid rgba(0, 23, 118, 0.2);
  outline-offset: 5px;
}
.bfsm-faq-answer {
  max-width: 800px;
  padding: 0 0 25px;
  color: var(--bfsm-text);
  font-size: 16px;
  line-height: 1.75;
  text-align: justify;
  animation: bfsm-faq-open 0.3s ease-out;
}
.bfsm-faq-answer p {
  margin: 0;
}
.bfsm-faq-answer p + p {
  margin-top: 12px;
}
.bfsm-faq-answer a {
  color: var(--bfsm-red);
  font-weight: 800;
}
@keyframes bfsm-faq-open {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (max-width: 600px) {
  .bfsm-page {
    font-size: 14px;
  }
  .bfsm-hero h1 {
    font-size: 22px;
    text-shadow: 3px 3px 0 var(--bfsm-red);
  }
  .bfsm-hero p,
  .bfsm-section-heading > p:last-child,
  .bfsm-overview-panel > p:last-child,
  .bfsm-management-panel p,
  .bfsm-participants-intro > p:last-child,
  .bfsm-cta p,
  .bfsm-benefit-card p,
  .bfsm-details-grid p,
  .bfsm-participant-list li,
  .bfsm-faq-answer {
    font-size: 14px;
  }
  .bfsm-section-heading h2,
  .bfsm-overview-panel h2,
  .bfsm-management-panel h2,
  .bfsm-participants-intro h2,
  .bfsm-cta h2 {
    font-size: 22px;
    line-height: 1.2;
  }
  .bfsm-module-item h3,
  .bfsm-benefit-card h3,
  .bfsm-details-grid h3 {
    font-size: 16px;
  }
  .bfsm-faq-list {
    margin-top: 25px;
  }
  .bfsm-faq-item {
    padding: 0 12px;
  }
  .bfsm-faq-question {
    padding: 16px 32px 16px 0;
    font-size: 14px;
  }
  .bfsm-faq-question::after {
    right: -2px;
    font-size: 22px;
  }
  .bfsm-faq-answer {
    padding-bottom: 16px;
    hyphens: auto;
  }
}

@media (max-width: 429px) {
  .bfsm-hero-eyebrow {
    font-size: 9px;
  }
  .bfsm-hero h1 {
    font-size: 20px;
  }
  .bfsm-hero p,
  .bfsm-section-heading > p:last-child,
  .bfsm-overview-panel > p:last-child,
  .bfsm-management-panel p,
  .bfsm-participants-intro > p:last-child,
  .bfsm-cta p,
  .bfsm-benefit-card p,
  .bfsm-details-grid p,
  .bfsm-participant-list li,
  .bfsm-faq-answer {
    font-size: 13px;
  }
  .bfsm-section-heading h2,
  .bfsm-overview-panel h2,
  .bfsm-management-panel h2,
  .bfsm-participants-intro h2,
  .bfsm-cta h2 {
    font-size: 22px;
  }
  .bfsm-faq-question {
    font-size: 13px;
  }
}

@media (max-width: 374px) {
  .bfsm-hero h1 {
    font-size: 18px;
  }
  .bfsm-hero p,
  .bfsm-section-heading > p:last-child,
  .bfsm-overview-panel > p:last-child,
  .bfsm-management-panel p,
  .bfsm-participants-intro > p:last-child,
  .bfsm-cta p,
  .bfsm-benefit-card p,
  .bfsm-details-grid p,
  .bfsm-participant-list li,
  .bfsm-faq-answer {
    font-size: 12px;
  }
  .bfsm-section-heading h2,
  .bfsm-overview-panel h2,
  .bfsm-management-panel h2,
  .bfsm-participants-intro h2,
  .bfsm-cta h2 {
    font-size: 18px;
  }
  .bfsm-module-item h3,
  .bfsm-benefit-card h3,
  .bfsm-details-grid h3 {
    font-size: 15px;
  }
  .bfsm-faq-question {
    padding-block: 12px;
    font-size: 12px;
  }
  .bfsm-faq-answer {
    padding-bottom: 12px;
  }
}

/* Match the FSM/FSO section rhythm: 50px desktop, 40px tablet, 30px phone. */
.bfsm-page section {
  padding: 50px 0;
}
.bfsm-page .bfsm-hero {
  padding: 0;
}
.bfsm-section-heading {
  margin-bottom: 30px;
}

@media (max-width: 768px) {
  .bfsm-page section {
    padding: 40px 0;
  }
  .bfsm-page .bfsm-hero {
    padding: 0;
  }
  .bfsm-section-heading {
    margin-bottom: 28px;
  }
}

@media (max-width: 600px) {
  .bfsm-page section {
    padding: 30px 13px;
  }
  .bfsm-page .bfsm-hero {
    padding: 0;
  }
  .bfsm-section-heading {
    margin-bottom: 25px;
  }
}

/* BFSM uses a distinct, contrast-safe fire-training palette rather than FSM/FSO colours. */
.bfsm-hero-overlay {
  background: linear-gradient(
    90deg,
    rgba(0, 15, 79, 0.93),
    rgba(0, 23, 118, 0.74),
    rgba(0, 23, 118, 0.34)
  );
}
.bfsm-hero h1 {
  text-shadow: 5px 5px 0 rgba(168, 59, 45, 0.86);
}
.bfsm-management-panel {
  border-color: rgba(168, 59, 45, 0.24);
  border-left-color: rgba(168, 59, 45, 0.24);
  background: #fff8f4;
}
.bfsm-management-panel h2 {
  color: #873524;
}
.bfsm-management-icon {
  width: 64px;
  height: 64px;
  border-radius: 16px;
  background: var(--bfsm-pale-red);
  color: var(--bfsm-red);
  font-size: 1.8rem;
}
.bfsm-benefit-card {
  padding: 25px 22px;
  border-color: var(--bfsm-line);
  border-top-color: var(--bfsm-red);
}
.bfsm-benefit-card:nth-child(2) {
  border-top-color: var(--bfsm-orange);
}
.bfsm-benefit-card:nth-child(3) {
  border-top-color: var(--bfsm-navy);
}
.bfsm-benefit-card:nth-child(4) {
  border-top-color: #8a7129;
}
.bfsm-benefit-card i,
.bfsm-details-grid i {
  background: var(--bfsm-pale-red);
  color: var(--bfsm-red);
}
.bfsm-participants-intro {
  background: var(--bfsm-navy);
}
.bfsm-participant-list li {
  border-color: var(--bfsm-line);
  color: var(--bfsm-navy);
}
.bfsm-participant-list i {
  color: var(--bfsm-red);
}
.bfsm-site-footer {
  border-top-color: var(--bfsm-line);
  color: var(--bfsm-navy);
}
.bfsm-site-footer p,
.bfsm-site-footer a,
.bfsm-site-footer h3 {
  color: var(--bfsm-navy);
}
.bfsm-site-footer a:hover {
  color: var(--bfsm-red);
}

@media (max-width: 600px) {
  .bfsm-hero h1 {
    text-shadow: 3px 3px 0 var(--bfsm-red);
  }
}

/* Compact vertical course track: restore the original BFSM sequence at FSM/FSO card density. */
.bfsm-module-track {
  position: relative;
  grid-template-columns: 1fr;
  gap: 10px;
  max-width: 920px;
}
.bfsm-module-track::before {
  position: absolute;
  top: 24px;
  bottom: 24px;
  left: 25px;
  width: 2px;
  background: rgba(168, 59, 45, 0.24);
  content: "";
}
.bfsm-module-item,
.bfsm-module-item:last-child {
  z-index: 1;
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  width: 100%;
  min-height: 0;
  align-items: center;
  gap: 14px;
  padding: 10px 16px;
  text-align: left;
  justify-self: stretch;
}
.bfsm-module-item::before {
  display: none;
}
.bfsm-module-item span {
  display: inline-flex;
  width: 34px;
  height: 34px;
  align-items: center;
  justify-content: center;
  margin: 0;
  border-radius: 50%;
  background: var(--bfsm-red);
  color: #fff;
  font-size: 11px;
  letter-spacing: 0;
}
.bfsm-module-item:nth-child(even) span {
  background: var(--bfsm-orange);
  color: #fff;
}
.bfsm-module-item h3 {
  font-size: 16px;
  text-align: left;
}
.bfsm-module-item:hover {
  background: #f7faff;
  transform: translateX(4px);
}

@media (max-width: 600px) {
  .bfsm-module-track::before {
    left: 22px;
  }
  .bfsm-module-item,
  .bfsm-module-item:last-child {
    grid-template-columns: 36px minmax(0, 1fr);
    gap: 11px;
    padding: 9px 12px;
  }
  .bfsm-module-item span {
    width: 30px;
    height: 30px;
    font-size: 10px;
  }
  .bfsm-module-item h3 {
    font-size: 15px;
  }
}

/* Course overview: use contrast and hierarchy rather than extra content cards. */
.bfsm-overview-layout {
  gap: 24px;
}
.bfsm-overview-panel {
  position: relative;
  display: grid;
  align-content: center;
  min-height: 310px;
  padding: clamp(32px, 4vw, 54px);
  border: 0;
  border-left: 7px solid var(--bfsm-red);
  border-radius: 0 22px 22px 0;
  box-shadow: 0 18px 40px rgba(0, 23, 118, 0.09);
}
.bfsm-overview-panel::before {
  position: absolute;
  top: 0;
  right: 0;
  width: 108px;
  height: 108px;
  border-radius: 0 22px 0 108px;
  background: var(--bfsm-pale-blue);
  content: "";
}
.bfsm-overview-panel h2,
.bfsm-overview-panel p {
  position: relative;
  z-index: 1;
}
.bfsm-overview-panel h2 {
  max-width: 290px;
}
.bfsm-management-panel {
  position: relative;
  grid-template-columns: 1fr;
  min-height: 310px;
  overflow: hidden;
  padding: clamp(32px, 4vw, 54px);
  border: 0;
  border-radius: 22px;
  background: var(--bfsm-navy);
  box-shadow: 0 18px 40px rgba(0, 23, 118, 0.17);
}
.bfsm-management-panel::before {
  position: absolute;
  right: -34px;
  bottom: -55px;
  color: rgba(255, 255, 255, 0.07);
  content: "\f134";
  font-family: "Font Awesome 6 Free";
  font-size: 17rem;
  font-weight: 900;
  line-height: 1;
  transform: rotate(-13deg);
}
.bfsm-management-panel::after {
  position: absolute;
  top: 0;
  right: 0;
  width: 38%;
  height: 5px;
  background: var(--bfsm-red);
  content: "";
}
.bfsm-management-panel > * {
  position: relative;
  z-index: 1;
}
.bfsm-management-icon {
  width: 52px;
  height: 52px;
  margin-bottom: 18px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  font-size: 1.4rem;
}
.bfsm-management-panel h2 {
  max-width: 440px;
  color: #fff;
}
.bfsm-management-panel p {
  max-width: 510px;
  color: rgba(255, 255, 255, 0.84);
}

@media (max-width: 600px) {
  .bfsm-overview-layout {
    gap: 16px;
  }
  .bfsm-overview-panel,
  .bfsm-management-panel {
    min-height: 0;
    padding: 28px 25px;
  }
  .bfsm-overview-panel::before {
    width: 78px;
    height: 78px;
  }
  .bfsm-management-panel::before {
    font-size: 12rem;
  }
}

/* Separate introduction sections: editorial overview followed by a dedicated workplace statement. */
.bfsm-overview {
  background: linear-gradient(180deg, #fff 0%, #f3f7fc 100%);
}
.bfsm-overview .bfsm-overview-panel {
  grid-template-columns: minmax(230px, 0.78fr) minmax(0, 1.22fr);
  column-gap: clamp(34px, 6vw, 88px);
  max-width: 1060px;
  margin-inline: auto;
}
.bfsm-overview .bfsm-overview-panel h2 {
  margin: 0;
  font-size: clamp(28px, 4vw, 30px);
}
.bfsm-overview .bfsm-overview-panel p {
  padding-left: clamp(22px, 3vw, 38px);
  border-left: 1px solid #c5d3e4;
}
.bfsm-workplace-management {
  background: #edf3fa;
}
.bfsm-workplace-management .bfsm-management-panel {
  grid-template-columns: 72px minmax(0, 1fr);
  column-gap: clamp(22px, 4vw, 46px);
  max-width: 1060px;
  min-height: 330px;
  margin-inline: auto;
}
.bfsm-workplace-management .bfsm-management-icon {
  align-self: start;
  margin: 0;
}
.bfsm-workplace-management .bfsm-management-panel h2 {
  max-width: 680px;
  font-size: clamp(28px, 4vw, 30px);
}
.bfsm-workplace-management .bfsm-management-panel p {
  max-width: 720px;
}

@media (max-width: 700px) {
  .bfsm-overview .bfsm-overview-panel {
    grid-template-columns: 1fr;
    row-gap: 20px;
  }
  .bfsm-overview .bfsm-overview-panel p {
    padding: 20px 0 0;
    border-top: 1px solid #c5d3e4;
    border-left: 0;
  }
  .bfsm-workplace-management .bfsm-management-panel {
    grid-template-columns: 1fr;
    row-gap: 18px;
  }
}

@media (max-width: 600px) {
  .bfsm-overview .bfsm-overview-panel h2,
  .bfsm-workplace-management .bfsm-management-panel h2 {
    font-size: 22px;
    line-height: 1.2;
  }
}

@media (max-width: 374px) {
  .bfsm-overview .bfsm-overview-panel h2,
  .bfsm-workplace-management .bfsm-management-panel h2 {
    font-size: 18px;
  }
}

/* Training details: image-led layout with a compact information list. */
.bfsm-details-layout {
  display: grid;
  grid-template-columns: minmax(300px, 0.82fr) minmax(0, 1.18fr);
  gap: clamp(26px, 5vw, 68px);
  align-items: start;
}
.bfsm-details-visual {
  min-width: 0;
}
.bfsm-details-image {
  position: relative;
  margin: 0;
  overflow: hidden;
  border-radius: 22px;
  background: var(--bfsm-navy);
  box-shadow: 0 18px 38px rgba(0, 23, 118, 0.14);
}
.bfsm-details-image img {
  display: block;
  width: 100%;
  height: auto;
}
.bfsm-details-heading {
  max-width: 680px;
  margin: 0 0 28px;
}
.bfsm-details-heading h2 {
  margin: 0 0 10px;
  color: var(--bfsm-navy);
  font-size: clamp(28px, 4vw, 30px);
  line-height: 1.15;
}
.bfsm-details-heading p {
  margin: 0;
  color: var(--bfsm-muted);
  font-size: 16px;
  line-height: 1.6;
}
.bfsm-details-content {
  align-self: start;
}
.bfsm-details-grid {
  grid-template-columns: 1fr;
  gap: 9px;
}
.bfsm-details-grid article,
.bfsm-details-grid article:nth-child(4),
.bfsm-details-grid article:nth-child(5) {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 15px;
  align-items: center;
  padding: 14px 16px;
  border-radius: 13px;
  box-shadow: none;
  grid-column: auto;
}
.bfsm-details-grid i {
  width: 40px;
  height: 40px;
  margin: 0;
  border-radius: 11px;
  font-size: 1rem;
}
.bfsm-details-grid h3 {
  margin: 0 0 3px;
  line-height: 1.3;
}
.bfsm-details-grid p {
  line-height: 1.45;
}

@media (max-width: 900px) {
  .bfsm-details-layout {
    grid-template-columns: 1fr;
    gap: 26px;
  }
}

@media (max-width: 600px) {
  .bfsm-details-image {
    border-radius: 16px;
  }
  .bfsm-details-heading {
    margin-bottom: 22px;
  }
  .bfsm-details-heading h2 {
    font-size: 22px;
    line-height: 1.2;
  }
  .bfsm-details-heading p {
    font-size: 14px;
  }
  .bfsm-details-grid article,
  .bfsm-details-grid article:nth-child(4),
  .bfsm-details-grid article:nth-child(5) {
    grid-template-columns: 38px minmax(0, 1fr);
    gap: 12px;
    padding: 12px;
  }
  .bfsm-details-grid i {
    width: 36px;
    height: 36px;
  }
}

/* FAQ visual refresh only: preserve the existing accordion layout and interaction. */
.bfsm-faq {
  background: #f6f8fb;
}
.bfsm-faq-list {
  border-top-color: #c9d6e7;
}
.bfsm-faq-item {
  border-bottom-color: #c9d6e7;
}
.bfsm-faq-question {
  border-left: 3px solid transparent;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.78);
  color: #17365d;
  font-weight: 700;
}
.bfsm-faq-question::after {
  right: 16px;
  width: 28px;
  height: 28px;
  border: 1px solid #b9cbe1;
  border-radius: 50%;
  background: #fff;
  color: var(--bfsm-navy);
  font-size: 21px;
  line-height: 25px;
}
.bfsm-faq-question:hover,
.bfsm-faq-question:focus-visible {
  color: var(--bfsm-red);
}
.bfsm-faq-question.active {
  border-left-color: var(--bfsm-red);
  background: #fff;
  color: var(--bfsm-navy);
  box-shadow: 0 5px 15px rgba(0, 23, 118, 0.06);
}
.bfsm-faq-question.active::after {
  border-color: var(--bfsm-red);
  background: var(--bfsm-red);
  color: #fff;
}
.bfsm-faq-answer {
  color: #40546a;
}

@media (max-width: 600px) {
  .bfsm-faq-question::after {
    right: 10px;
    width: 24px;
    height: 24px;
    font-size: 18px;
    line-height: 21px;
  }
}

/* Cohesive FAQ cards: question, answer and open state read as one component. */
.bfsm-faq-list {
  display: grid;
  gap: 10px;
  border-top: 0;
}
.bfsm-faq-item {
  overflow: hidden;
  padding: 0;
  border: 1px solid #c9d6e7;
  border-radius: 12px;
  background: #fff;
  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease;
}
.bfsm-faq-item:has(.bfsm-faq-question.active) {
  border-color: rgba(168, 59, 45, 0.5);
  box-shadow: 0 9px 22px rgba(0, 23, 118, 0.07);
}
.bfsm-faq-question {
  padding: 21px 62px 21px 20px;
  border-left: 0;
  border-radius: 0;
  background: #fff;
}
.bfsm-faq-question::after {
  right: 20px;
}
.bfsm-faq-question.active {
  border-bottom: 1px solid #e1e8f1;
  border-left: 0;
  background: #fff;
  box-shadow: none;
}
.bfsm-faq-answer {
  max-width: none;
  padding: 18px 20px 22px;
  background: #fbfcfe;
  color: #40546a;
}

@media (max-width: 600px) {
  .bfsm-faq-item {
    border-radius: 10px;
  }
  .bfsm-faq-question {
    padding: 16px 48px 16px 15px;
  }
  .bfsm-faq-question::after {
    right: 14px;
  }
  .bfsm-faq-answer {
    padding: 14px 15px 17px;
  }
}

/* CTA: a contained training callout, distinct from the full-width navy sections. */
.bfsm-cta {
  position: relative;
  overflow: hidden;
  background: #edf3fa;
}
.bfsm-cta-content {
  position: relative;
  isolation: isolate;
  max-width: 1060px;
  min-height: 188px;
  padding: clamp(30px, 4vw, 46px) clamp(28px, 5vw, 62px);
  overflow: hidden;
  border-radius: 22px;
  background: linear-gradient(
    118deg,
    var(--bfsm-navy-deep) 0%,
    var(--bfsm-navy) 68%,
    #07348b 100%
  );
  box-shadow: 0 18px 40px rgba(0, 23, 118, 0.18);
}
.bfsm-cta-content::before,
.bfsm-cta-content::after {
  position: absolute;
  z-index: -1;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 50%;
  content: "";
}
.bfsm-cta-content::before {
  top: -155px;
  right: -68px;
  width: 330px;
  height: 330px;
}
.bfsm-cta-content::after {
  right: 118px;
  bottom: -185px;
  width: 300px;
  height: 300px;
  border-color: rgba(168, 59, 45, 0.55);
}
.bfsm-cta-content > div {
  position: relative;
  z-index: 1;
  max-width: 650px;
}
.bfsm-cta h2 {
  margin-bottom: 10px;
  color: #fff;
}
.bfsm-cta p {
  max-width: 620px;
  color: #dce6f7;
  line-height: 1.65;
}
.bfsm-cta .bfsm-button {
  position: relative;
  z-index: 1;
  min-width: 142px;
  border-color: rgba(255, 255, 255, 0.35);
  background: #fff;
  color: var(--bfsm-navy);
  box-shadow: 0 10px 22px rgba(0, 10, 54, 0.22);
}
.bfsm-cta .bfsm-button:hover,
.bfsm-cta .bfsm-button:focus-visible {
  border-color: var(--bfsm-red);
  background: var(--bfsm-red);
  color: #fff;
}

@media (max-width: 700px) {
  .bfsm-cta-content {
    min-height: 0;
    align-items: flex-start;
    flex-direction: column;
    gap: 24px;
    padding: 30px 26px;
  }
  .bfsm-cta .bfsm-button {
    min-width: 0;
  }
}

@media (max-width: 600px) {
  .bfsm-cta-content {
    border-radius: 16px;
    padding: 27px 22px;
  }
  .bfsm-cta-content::before {
    top: -120px;
    right: -125px;
    width: 270px;
    height: 270px;
  }
  .bfsm-cta-content::after {
    right: 38px;
    bottom: -175px;
    width: 230px;
    height: 230px;
  }
  .bfsm-cta .bfsm-button {
    width: 100%;
  }
}

/* Workplace management: a text statement balanced by a replaceable, natural-ratio image. */
.bfsm-workplace-management {
  background: linear-gradient(180deg, #f4f7fb 0%, #eaf1f8 100%);
}
.bfsm-workplace-management .bfsm-management-panel {
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(290px, 0.88fr);
  column-gap: clamp(28px, 5vw, 68px);
  min-height: 0;
  padding: 0;
  border: 1px solid #d5e0e7;
  border-radius: 22px;
  background: #fff;
  box-shadow: 0 18px 40px rgba(0, 23, 118, 0.1);
}
.bfsm-workplace-management .bfsm-management-panel::before,
.bfsm-workplace-management .bfsm-management-panel::after {
  display: none;
}
.bfsm-workplace-management .bfsm-management-panel > div {
  padding: clamp(42px, 5vw, 62px) 0 clamp(42px, 5vw, 62px)
    clamp(36px, 5vw, 62px);
}
.bfsm-workplace-management .bfsm-management-panel h2 {
  max-width: 560px;
  margin-bottom: 14px;
  color: var(--bfsm-navy);
}
.bfsm-workplace-management .bfsm-management-panel p {
  max-width: 600px;
  color: var(--bfsm-muted);
}
.bfsm-workplace-management .bfsm-management-icon {
  position: absolute;
  top: clamp(22px, 3vw, 32px);
  left: clamp(22px, 3vw, 32px);
  width: 44px;
  height: 44px;
  margin: 0;
  border: 1px solid #f1c4ba;
  border-radius: 12px;
  background: var(--bfsm-pale-red);
  color: var(--bfsm-red);
  font-size: 1.05rem;
}
.bfsm-workplace-management .bfsm-management-panel > div {
  padding-top: clamp(94px, 9vw, 118px);
}
.bfsm-management-image,
.bfsm-management-image-mobile {
  align-self: center;
  margin: 30px 34px 30px 0;
  overflow: hidden;
  border-radius: 16px;
  background: #152950;
  box-shadow: 0 12px 28px rgba(0, 23, 118, 0.14);
}

.bfsm-management-image-mobile {
  display: none;
}

.bfsm-management-image img,
.bfsm-management-image-mobile img {
  display: block;
  width: 100%;
  height: auto;
}

@media (max-width: 800px) {
  .bfsm-workplace-management .bfsm-management-panel {
    grid-template-columns: 1fr;
    row-gap: 0;
  }
  .bfsm-workplace-management .bfsm-management-panel > div {
    padding: 92px 28px 30px;
  }
  .bfsm-management-image {
    margin: 0 28px 28px;
  }
}

@media (max-width: 600px) {
  .bfsm-workplace-management .bfsm-management-panel {
    border-radius: 16px;
  }
  .bfsm-workplace-management .bfsm-management-icon {
    top: 20px;
    left: 20px;
    width: 40px;
    height: 40px;
    border-radius: 11px;
    font-size: 1rem;
  }
  .bfsm-workplace-management .bfsm-management-panel > div {
    padding: 80px 22px 25px;
  }
  .bfsm-management-image {
    margin: 0 22px 22px;
    border-radius: 12px;
  }
}

/* Simplified workplace section: copy at left, normal-ratio image at right. */
.bfsm-workplace-management {
  background: #f3f7fb;
}
.bfsm-workplace-management .bfsm-management-panel {
  grid-template-columns: minmax(0, 0.88fr) minmax(0, 1.12fr);
  align-items: center;
  gap: clamp(32px, 6vw, 76px);
  max-width: 1060px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.bfsm-workplace-management .bfsm-management-panel > div,
.bfsm-workplace-management .bfsm-management-panel > div:first-of-type {
  padding: 0;
}
.bfsm-workplace-management .bfsm-management-panel h2 {
  position: relative;
  margin: 0 0 22px;
  padding-bottom: 18px;
  color: var(--bfsm-navy);
}
.bfsm-workplace-management .bfsm-management-panel h2::after {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 52px;
  height: 3px;
  background: var(--bfsm-red);
  content: "";
}
.bfsm-workplace-management .bfsm-management-panel p {
  margin: 0;
  color: var(--bfsm-muted);
}
.bfsm-management-image {
  align-self: center;
  margin: 0;
  overflow: hidden;
  border-radius: 16px;
  background: transparent;
  box-shadow: none;
}
.bfsm-management-image img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid #c5d3e4;
  border-radius: 16px;
}

@media (max-width: 800px) {
  .bfsm-workplace-management .bfsm-management-panel {
    grid-template-columns: 1fr;
    gap: 26px;
  }
  .bfsm-management-image {
    order: -1;
    margin: 0;
  }
  .bfsm-workplace-management .bfsm-management-panel > div,
  .bfsm-workplace-management .bfsm-management-panel > div:first-of-type {
    padding: 0;
  }
}

@media (max-width: 600px) {
  .bfsm-workplace-management .bfsm-management-panel {
    gap: 22px;
  }
  .bfsm-management-image {
    margin: 0;
    border-radius: 12px;
  }
  .bfsm-management-image img {
    border-radius: 12px;
  }
  .bfsm-workplace-management .bfsm-management-panel h2 {
    margin-bottom: 18px;
    padding-bottom: 14px;
  }
}

/* BFSM background sequence: warmer and more neutral than the FSM/FSO blue surfaces. */
.bfsm-overview {
  background: linear-gradient(180deg, #fffdfa 0%, #f7f0e8 100%);
}
.bfsm-overview-panel::before {
  background: #eee2d4;
}
.bfsm-workplace-management {
  background: #eff3ee;
}
.bfsm-modules {
  background: #f8f5f0;
}
.bfsm-module-item {
  border-color: #d9d5cd;
  background: #fffdfa;
}
.bfsm-module-item:hover {
  background: #fff6ed;
}
.bfsm-benefits {
  background: #fcfbf8;
}
.bfsm-benefit-card {
  border-color: #ded9d1;
  background: #fff;
}
.bfsm-participants {
  background: #e9eff0;
}
.bfsm-participant-list li {
  border-color: #d4dcdf;
  background: #fffdf9;
}
.bfsm-training-details {
  background: #f4f1ec;
}
.bfsm-details-grid article,
.bfsm-details-grid article:nth-child(4),
.bfsm-details-grid article:nth-child(5) {
  border-color: #ddd8d0;
  background: #fffdfa;
}
.bfsm-cta {
  background: #e7edef;
}
.bfsm-faq {
  background: #f7f5f1;
}
.bfsm-faq-item {
  border-color: #d8d5ce;
  background: #fffdfa;
}
.bfsm-faq-question,
.bfsm-faq-question.active {
  background: #fffdfa;
}
.bfsm-faq-question.active {
  border-bottom-color: #e6e0d7;
}
.bfsm-faq-answer {
  background: #fcf8f3;
}

/* Tablet and mobile alignment: centre introductions; keep information lists easy to scan. */
@media (max-width: 900px) {
  .bfsm-overview .bfsm-overview-panel,
  .bfsm-workplace-management .bfsm-management-panel > div,
  .bfsm-details-heading,
  .bfsm-participants-intro,
  .bfsm-cta-content > div {
    text-align: center;
  }

  .bfsm-overview .bfsm-overview-panel h2,
  .bfsm-workplace-management .bfsm-management-panel h2 {
    margin-inline: auto;
  }

  .bfsm-workplace-management .bfsm-management-panel h2::after {
    left: 50%;
    transform: translateX(-50%);
  }
  .bfsm-workplace-management .bfsm-management-panel p,
  .bfsm-details-heading p,
  .bfsm-cta p {
    margin-inline: auto;
  }

  .bfsm-details-heading {
    max-width: 680px;
    margin-inline: auto;
  }
  .bfsm-details-grid,
  .bfsm-module-track,
  .bfsm-participant-list,
  .bfsm-faq-list {
    text-align: left;
  }
}

@media (max-width: 600px) {
  .bfsm-overview .bfsm-overview-panel p {
    text-align: center;
  }
  .bfsm-section-heading {
    text-align: center;
  }
  .bfsm-section-heading > p:last-child {
    margin-inline: auto;
  }
  .bfsm-cta-content {
    align-items: stretch;
  }
  .bfsm-cta-content > div {
    text-align: center;
  }
  .bfsm-details-grid article,
  .bfsm-module-item,
  .bfsm-participant-list li,
  .bfsm-faq-question,
  .bfsm-faq-answer {
    text-align: left;
  }
}

/* Mobile type hierarchy and compact points. */
@media (max-width: 600px) {
  .bfsm-overview .bfsm-overview-panel p,
  .bfsm-workplace-management .bfsm-management-panel p,
  .bfsm-section-heading > p:last-child,
  .bfsm-benefit-card p,
  .bfsm-participants-intro > p:last-child,
  .bfsm-details-heading p,
  .bfsm-details-grid p,
  .bfsm-cta p,
  .bfsm-faq-answer {
    text-align: justify;
    hyphens: auto;
    text-justify: inter-word;
  }

  .bfsm-section-heading h2,
  .bfsm-overview .bfsm-overview-panel h2,
  .bfsm-workplace-management .bfsm-management-panel h2,
  .bfsm-participants-intro h2,
  .bfsm-details-heading h2,
  .bfsm-cta h2 {
    text-align: center;
  }

  .bfsm-benefit-card {
    text-align: center;
  }
  .bfsm-benefit-card i {
    display: flex;
    margin-inline: auto;
  }
  .bfsm-benefit-card h3 {
    text-align: center;
  }
  .bfsm-benefit-card p {
    text-align: justify;
  }

  .bfsm-participant-list li {
    padding: 9px 12px;
  }
  .bfsm-module-item h3 {
    font-size: 13px;
    line-height: 1.35;
  }
}

/* Hero hierarchy follows the FSM/FSO order: label, title, copy, then action. */
.bfsm-hero-content {
  max-width: none;
  padding-block: 64px;
  transform: translateY(12px);
}
.bfsm-hero-int {
  max-width: 700px;
}
.bfsm-hero-eyebrow {
  display: inline-flex;
  width: fit-content;
  margin: 0 0 12px;
  padding: 9px 14px;
  border-radius: 999px;
  background: #fff;
  color: var(--bfsm-navy);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  line-height: 1.4;
  text-shadow: none;
}
.bfsm-hero h1 {
  max-width: 720px;
  margin: 0 0 14px;
}
.bfsm-hero p.bfsm-hero-copy {
  max-width: 700px;
  margin: 0;
  color: #fff;
  font-size: 16px;
  line-height: 1.75;
}
.bfsm-hero-actions {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 28px;
}
.bfsm-hero .bfsm-button {
  min-height: 48px;
  padding: 13px 24px;
}

@media (max-width: 600px) {
  .bfsm-hero-content {
    padding-block: 44px;
    transform: translateY(10px);
    text-align: center;
  }
  .bfsm-hero h1 {
    margin-inline: auto;
  }
  .bfsm-hero-eyebrow {
    display: flex;
    margin-inline: auto;
    font-size: 9px;
    letter-spacing: 0.08em;
  }
  .bfsm-hero p.bfsm-hero-copy {
    margin: 0 auto;
    font-size: 14px;
    text-align: center;
  }
  .bfsm-hero-actions {
    flex-direction: column;
    align-items: center;
    gap: 9px;
    margin-top: 20px;
  }
  .bfsm-hero .bfsm-button {
    width: 65%;
    min-height: 48px;
    padding: 13px 14px;
    font-size: 13px;
  }
}

/* Fixed, natural-ratio image presentation for the workplace overview and details.
   The frame prevents a large replacement image from expanding the section; the
   image uses object-fit rather than stretching, so its proportions are retained. */
.bfsm-management-image,
.bfsm-details-image {
  width: min(100%, 460px);
  aspect-ratio: 16 / 10;
}

.bfsm-management-image {
  justify-self: end;
}

.bfsm-details-image {
  justify-self: start;
}

.bfsm-management-image img,
.bfsm-details-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (max-width: 900px) {
  .bfsm-details-image {
    width: min(100%, 550px);
    margin-inline: auto;
  }
}

@media (max-width: 800px) {
  .bfsm-management-image {
    width: min(100%, 550px);
    margin-inline: auto;
  }
}

@media (max-width: 600px) {
  .bfsm-management-image,
  .bfsm-details-image {
    width: min(100%, 300px);
    margin-inline: auto;
  }
}

/* FAQ icon: match the CPR plain-symbol alignment without changing BFSM accordion behaviour. */
.bfsm-faq-question::after {
  right: 20px;
  width: auto;
  height: auto;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--bfsm-red);
  font-size: 24px;
  font-weight: 800;
  line-height: 1;
  text-align: initial;
}

.bfsm-faq-question.active::after {
  color: var(--bfsm-orange);
}

@media (max-width: 600px) {
  .bfsm-faq-question::after {
    right: 14px;
    font-size: 20px;
    font-weight: 800;
    line-height: 1;
  }
}

/* Final BFSM FAQ colour and icon state: prevents older blue/circle rules from mixing in. */
.bfsm-faq {
  background: #f7f5f1;
}

.bfsm-faq-item {
  border-color: #d8d5ce;
  background: #fffdfa;
}

.bfsm-faq-item:has(.bfsm-faq-question.active) {
  border-color: rgba(168, 59, 45, 0.5);
}

.bfsm-faq-question,
.bfsm-faq-question.active {
  border-left: 0;
  background: #fffdfa;
  color: var(--bfsm-text);
  font-weight: 700;
}

.bfsm-faq-question.active {
  border-bottom-color: #e6e0d7;
  color: var(--bfsm-navy);
}

.bfsm-faq-question::after {
  content: "+";
  color: var(--bfsm-red);
}

.bfsm-faq-question.active::after,
.bfsm-faq-question[aria-expanded="true"]::after {
  border: 0;
  background: transparent;
  content: "−";
  color: var(--bfsm-orange);
}

.bfsm-faq-answer {
  border-top: 1px solid #e6e0d7;
  background: #fcf8f3;
  color: var(--bfsm-text);
}

/* CPR-style two-layer hero overlay, using BFSM's fire-red accent. */
.bfsm-hero-overlay {
  background:
    linear-gradient(
      90deg,
      rgba(0, 0, 0, 0.32),
      rgba(0, 23, 118, 0.3) 56%,
      rgba(0, 0, 0, 0.6)
    ),
    linear-gradient(90deg, rgba(168, 59, 45, 0.18), rgba(168, 59, 45, 0) 68%);
}

@media (max-width: 600px) {
  .bfsm-hero-overlay {
    background:
      linear-gradient(90deg, rgba(0, 0, 0, 0.65), rgba(0, 0, 0, 0.55)),
      linear-gradient(90deg, rgba(168, 59, 45, 0.12), rgba(168, 59, 45, 0) 72%);
  }
}

/* Hero width follows the CPR, HAZMAT and ERT course-page shell; normal BFSM sections stay compact. */
.bfsm-hero .bfsm-shell {
  width: min(1400px, calc(100% - 40px));
}

.bfsm-hero-content,
.bfsm-hero-int {
  max-width: 900px;
}

.bfsm-hero h1 {
  max-width: 900px;
}

/* Large desktop: keep the BFSM hero title prominent from 900px upward. */
@media (min-width: 900px) {
  .bfsm-hero h1 {
    font-size: clamp(60px, 6vw, 72px);
  }
}

/* Tablet: retain a strong title without letting it exceed 40px. */
@media (min-width: 621px) and (max-width: 899px) {
  .bfsm-hero h1 {
    font-size: 40px;
  }
}

.bfsm-hero p.bfsm-hero-copy {
  max-width: 740px;
}

@media (max-width: 1200px) {
  .bfsm-hero .bfsm-shell {
    width: min(1400px, calc(100% - 120px));
  }
}

@media (max-width: 991px) {
  .bfsm-hero .bfsm-shell {
    width: min(1400px, calc(100% - 80px));
  }

  .bfsm-hero-content,
  .bfsm-hero-int {
    max-width: 600px;
  }
}

@media (max-width: 768px) {
  .bfsm-hero .bfsm-shell {
    width: min(1400px, calc(100% - 90px));
  }

  #bfsm-management-title {
    padding: 0 !important;
  }

  .bfsm-management-image-mobile {
    display: block;
    width: min(100%, 460px);
    margin: 20px auto;
  }

  .bfsm-management-image {
    display: none;
  }
  
}

@media (min-width: 469px) and (max-width: 600px) {
  .bfsm-hero .bfsm-shell {
    width: min(1400px, calc(100% - 32px));
  }
}

@media (max-width: 600px) {
  .bfsm-management-image-mobile {
    width: min(100%, 280px);
    margin: 18px auto;
  }
}

@media (max-width: 468px) {
  .bfsm-hero .bfsm-shell {
    width: min(1400px, calc(100% - 40px));
  }
}

@media (max-width: 374px) {
  .bfsm-hero .bfsm-shell {
    width: min(1400px, calc(100% - 32px));
  }
}

/* Desktop editorial descriptions: justify only the three requested BFSM sections. */
.bfsm-overview .bfsm-overview-panel > p,
.bfsm-workplace-management .bfsm-management-panel p,
.bfsm-benefits .bfsm-section-heading > p:last-child {
  text-align: justify;
  hyphens: auto;
}

/* Why Fire Safety Management Matters: icon, title, then readable supporting copy. */
.bfsm-benefits .bfsm-benefit-card i {
  display: flex;
  margin-inline: auto;
}

.bfsm-benefits .bfsm-benefit-card h3 {
  text-align: center;
}

.bfsm-benefits .bfsm-benefit-card p {
  text-align: justify;
  hyphens: auto;
}

/* Hero action: retain the approved BFSM fire-red CTA against the dark hero overlay. */
.bfsm-hero .bfsm-button-primary {
  border-color: transparent;
  background: var(--bfsm-red);
  color: #fff;
}

.bfsm-hero .bfsm-button-primary:hover,
.bfsm-hero .bfsm-button-primary:focus-visible {
  border-color: transparent;
  background: var(--bfsm-red-deep);
  color: #fff;
}

/* Workplace section: no standalone label, badge or title marker at any viewport. */
.bfsm-workplace-management .bfsm-management-icon,
.bfsm-workplace-management .bfsm-management-panel h2::after {
  display: none;
}