.breadcrumb { font-size: 0.875rem; color: var(--text-light); margin-bottom: 1rem; }
 .breadcrumb a { color: rgba(255,255,255,0.7); }
 .breadcrumb a:hover { color: var(--white); }
 .breadcrumb span { margin: 0 8px; color: rgba(255,255,255,0.5); }
 .hero-stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; margin-top: 2rem; padding: 14px; background: rgba(255,255,255,0.1); border-radius: 12px; backdrop-filter: blur(10px); }
 .hero-stat { text-align: center; }
 .hero-features { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-top: 2.5rem; }
 .hero-feature-item { background: rgba(255,255,255,0.1); border-radius: 12px; padding: 14px; text-align: center; transition: all 0.3s ease; }
 .hero-feature-item:hover { background: rgba(255,255,255,0.15); transform: translateY(-4px); }
 .hero-feature-item i { font-size: 2rem; color: var(--accent-gold); margin-bottom: 12px; }
 .hero-feature-item h4 { color: var(--white); font-size: 1rem; margin-bottom: 4px; }
 .hero-feature-item p { color: rgba(255,255,255,0.7); font-size: 0.875rem; margin: 0; }
 .hero-stat .icon { width: 48px; height: 48px; background: rgba(255,255,255,0.2); border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 0.5rem; }
 .hero-stat .icon i { font-size: 1.25rem; color: var(--white); }
 .hero-stat .value { font-size: 1.25rem; font-weight: 700; color: var(--white); }
 .hero-stat .label { font-size: 0.75rem; color: rgba(255,255,255,0.7); }
 .benefit-card { text-align: center; padding: 14px 24px; }
 .benefit-icon i { font-size: 1.5rem; color: var(--success-green); }
 .benefit-card h3 { font-size: 1.125rem; margin-bottom: 0.5rem; }
 .benefit-card p { font-size: 0.875rem; color: var(--text-medium); margin-bottom: 0; }
 .cards-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; margin-top: 3rem; }
 .card { background: var(--white); border: 1px solid var(--border-gray); border-radius: 12px; padding: 14px; transition: all var(--transition-base); }
 .card:hover { box-shadow: var(--shadow-lg); transform: translateY(-2px); }
.card h3 { font-size: 1.125rem; margin-bottom: 0.75rem; }
 .card p { font-size: 0.9375rem; color: var(--text-medium); margin-bottom: 0; }
 .calc-box { background: var(--primary-light); border-left: 4px solid var(--primary-blue); padding: 14px 28px; border-radius: 0 12px 12px 0; margin: 2rem 0; }
 .calc-box p { margin: 0; line-height: 1.7; color: var(--text-dark); }
 .feature-cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; margin-top: 3rem; }
 .feature-card { background: var(--white); border: 1px solid var(--border-gray); border-radius: 12px; padding: 14px; transition: all var(--transition-base); border-left: 4px solid var(--primary-blue); }
 .feature-card:hover { box-shadow: var(--shadow-lg); transform: translateY(-2px); }
 .feature-card h3 { font-size: 1.125rem; margin-bottom: 0.75rem; color: var(--primary-navy); }
 .feature-card p { font-size: 0.9375rem; color: var(--text-medium); margin-bottom: 0; }
 .proposal-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 3rem; }
 .proposal-box { background: var(--white); border: 1px solid var(--border-gray); border-radius: 12px; padding: 14px; transition: all var(--transition-base); border-top: 4px solid var(--primary-blue); }
 .proposal-box:hover { box-shadow: var(--shadow-lg); transform: translateY(-2px); }
 .proposal-box h3 { font-size: 1.125rem; margin-bottom: 0.75rem; color: var(--primary-navy); }
 .proposal-box p { font-size: 0.9375rem; color: var(--text-medium); margin-bottom: 0.5rem; }
 .proposal-box .price { font-size: 1.25rem; font-weight: 700; color: var(--primary-blue); margin-top: 0.75rem; }
 .card-header-flex { display: flex; align-items: center; gap: 16px; margin-bottom: 1rem; }
 .card-header-flex h3 { margin-bottom: 0; }
 .flex-grow { flex-grow: 1; }
 .mt-1 { margin-top: 1rem; }
 .text-center { text-align: center; }
 .lead { font-size: 1.125rem; color: var(--text-medium); line-height: 1.7; }
 @media (max-width: 992px) {
 .cards-grid { grid-template-columns: 1fr; }
 .feature-cards { grid-template-columns: 1fr; }
 .proposal-grid { grid-template-columns: 1fr; }
 }
 @media (max-width: 768px) {
 .hero-stats { grid-template-columns: repeat(2, 1fr); }
 .hero-features { grid-template-columns: 1fr; gap: 16px; }
 .hero-feature-item { padding: 14px; }
 .proposal-grid { grid-template-columns: 1fr; }
 }
 
.hero-features a.hero-feature-item { transition: all 0.3s ease; }
.hero-features a.hero-feature-item:hover { transform: translateY(-4px); background: rgba(255,255,255,0.15); }
.hero-features a.hero-feature-item:hover h4 { color: #8a6d1c; }

/* =====================================================================
   HAB Event Response — consistent operational-phase cards.
   All four headings share one structure: a uniform inline icon chip
   + title. The icon colour is the only thing that varies (semantic:
   green normal / red HAB / amber storm / blue post-event), and it is
   echoed by a matching left accent rail so the set reads as a series.
   ===================================================================== */
.hab-phase h3 {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 1.125rem;
  margin-bottom: 0.6rem;
  color: var(--primary-navy);
}
.hab-phase h3 i {
  flex: none;
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 9px;
  font-size: 0.95rem;
  margin: 0;                 /* drop any utility margins from old markup */
  color: var(--phase-color, var(--primary-blue));
  background: var(--phase-tint, rgba(0, 102, 204, 0.12));
}
.hab-phase {
  border-left-color: var(--phase-color, var(--primary-blue)) !important;
}

.phase-normal { --phase-color: #1f9d57; --phase-tint: rgba(31, 157, 87, 0.12); }
.phase-hab    { --phase-color: #e3493c; --phase-tint: rgba(227, 73, 60, 0.12); }
.phase-storm  { --phase-color: #c8821f; --phase-tint: rgba(200, 130, 31, 0.14); }
.phase-post   { --phase-color: #0a6fc2; --phase-tint: rgba(10, 111, 194, 0.12); }

/* Comfortable, even padding + body text aligned under the heading text
   (icon chip 34px + 0.6rem gap) so each card reads as one clean column. */
.hab-phase {
  padding: 1.4rem 1.5rem;
}
.hab-phase h3 {
  align-items: center;
}
.hab-phase p {
  margin: 0;
  padding-left: calc(34px + 0.6rem);
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--text-medium);
}
@media (max-width: 480px) {
  .hab-phase p { padding-left: 0; }
}

/* Seawater DAF benefit cards — icons 30% smaller (44px -> 31px,
   glyph 1.15rem -> 0.8rem) for a lighter, more refined look. */
.feature-card-grid .benefit-card .benefit-icon {
  width: 31px !important;
  height: 31px !important;
  border-radius: 9px;
}
.feature-card-grid .benefit-card .benefit-icon i {
  font-size: 0.8rem !important;
}