/* =====================================================================
   THEME — Enterprise Corporate Light
   Layered on top of main.css. Converts every dark navy section to a
   clean white / light-blue surface with blue (#0066cc) highlights.

   Palette (the single source of truth for the reskin):
     blue          #0066cc      blue-dark     #0052a3
     navy (ink)    #0a2540      text          #41566b      muted #6b7d8f
     surface       #ffffff      surface-2     #f6f9fc       surface-3 #eef4fb
     tint          #e8f2fd      border        #dce6f0       border-strong #c7d6e6
   ===================================================================== */

/* Page canvas stays pure white */
body {
  background-color: #ffffff;
  color: #41566b;
  -webkit-font-smoothing: antialiased;
}

/* =====================================================================
   HERO / PAGE HEADER  →  light
   ===================================================================== */
.hero,
.page-header,
.product-hero,
.tech-hero,
.case-study-hero,
.calc-page-hero,
.demo-hero {
  background:
    radial-gradient(ellipse at 18% 0%, #e8f2fd 0%, rgba(232, 242, 253, 0) 60%),
    linear-gradient(180deg, #ffffff 0%, #f6f9fc 100%) !important;
  color: #41566b;
  border-bottom: 1px solid #dce6f0;
}
.hero::before,
.page-header::before {
  display: none !important;
}

/* Hero with a photo background — matches the live site: the backgro.jpg image
   under a navy overlay, with white hero text. (Non-photo heroes stay light.) */
section.hero-bg {
  background:
    linear-gradient(135deg, rgba(13, 46, 78, 0.86) 0%, rgba(13, 46, 78, 0.7) 100%),
    url('/images/backgro.jpg') !important;
  background-size: cover !important;
  background-position: center !important;
  border-bottom: none !important;
}
section.hero-bg::before {
  display: none !important;
}
section.hero-bg .hero-title,
section.hero-bg .hero-content h1 {
  color: #ffffff !important;
}
section.hero-bg .hero-description,
section.hero-bg .hero-content > p,
section.hero-bg > .container > p,
.calc-page-hero.hero-bg > .container > p {
  color: rgba(255, 255, 255, 0.92) !important;
}
section.hero-bg .badge {
  color: #ffffff !important;
  /* main.css forces a light surface on .badge with !important; on a dark hero
     that produced white-on-white. Restore a translucent dark-friendly chip. */
  background: rgba(255, 255, 255, 0.15) !important;
  border-color: rgba(255, 255, 255, 0.25) !important;
}
section.hero-bg .badge i {
  color: #ffffff !important;
}
section.hero-bg .hero-trust-badges .trust-badge {
  color: #ffffff !important;
}
section.hero-bg .hero-trust-badges .trust-badge i {
  color: #c9a227 !important;
}

.hero-title,
.hero-content h1,
.page-header h1,
.product-hero h1,
.tech-hero h1 {
  color: #0a2540 !important;
}

.hero-description,
.hero-content p,
.page-header p {
  color: #41566b !important;
}

/* A subtle blue accent rule under hero headings */
.hero-title::after {
  content: '';
  display: block;
  width: 64px;
  height: 4px;
  margin-top: 1.25rem;
  border-radius: 2px;
  background: #0066cc;
}

/* Trust badges: gold → blue/navy */
.hero-trust-badges .trust-badge {
  color: #0a2540 !important;
}
.hero-trust-badges .trust-badge i {
  color: #0066cc !important;
}

/* Language selector pill → light */
.hero-language-selector {
  background: #ffffff !important;
  border: 1px solid #dce6f0 !important;
  box-shadow: 0 1px 2px rgba(10, 37, 64, 0.06);
}
.hero-language-selector .lang-icon,
.hero-language-selector .lang-option {
  color: #6b7d8f !important;
}
.hero-language-selector .lang-option:hover,
.hero-language-selector .lang-option.active {
  color: #0066cc !important;
}
.hero-language-selector .lang-divider {
  color: #c7d6e6 !important;
}

/* Secondary buttons on (now light) heroes → blue outline */
.hero .btn-secondary,
.product-hero .btn-secondary,
.tech-hero .btn-secondary,
.case-study-hero .btn-secondary,
.calc-page-hero .btn-secondary,
.demo-hero .btn-secondary,
.page-header .btn-secondary,
.cta-section .btn-secondary {
  background: #ffffff !important;
  color: #0066cc !important;
  border-color: #c7d6e6 !important;
}
.hero .btn-secondary:hover,
.product-hero .btn-secondary:hover,
.tech-hero .btn-secondary:hover,
.case-study-hero .btn-secondary:hover,
.calc-page-hero .btn-secondary:hover,
.demo-hero .btn-secondary:hover,
.page-header .btn-secondary:hover,
.cta-section .btn-secondary:hover {
  background: #e8f2fd !important;
  color: #0052a3 !important;
  border-color: #0066cc !important;
}

/* Hero feature tiles — glass / transparency on the dark photo hero (matches the
   local copy), with a slow "breathing" transparency animation. The animated
   layer is a ::before overlay so the text stays perfectly crisp. */
.hero .hero-feature-item,
.hero-small .hero-feature-item,
.page-header .hero-feature-item,
.tech-hero .hero-feature-item,
.case-study-hero .hero-feature-item,
.hero-bg .hero-feature-item {
  background: rgba(255, 255, 255, 0.05) !important;
  backdrop-filter: blur(5px) !important;
  -webkit-backdrop-filter: blur(5px) !important;
  border: 1px solid rgba(255, 255, 255, 0.16) !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.16) !important;
  position: relative !important;
  overflow: hidden !important;
}
.hero .hero-feature-item::before,
.hero-small .hero-feature-item::before,
.page-header .hero-feature-item::before,
.tech-hero .hero-feature-item::before,
.case-study-hero .hero-feature-item::before,
.hero-bg .hero-feature-item::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.06);
  animation: rbGlassPulse 7s ease-in-out infinite;
  pointer-events: none;
  z-index: 0;
}
.hero .hero-feature-item > *,
.hero-small .hero-feature-item > *,
.page-header .hero-feature-item > *,
.tech-hero .hero-feature-item > *,
.case-study-hero .hero-feature-item > *,
.hero-bg .hero-feature-item > * {
  position: relative;
  z-index: 1;
}
@keyframes rbGlassPulse {
  0%, 100% { opacity: 0.25; }
  50% { opacity: 1; }
}
.hero .hero-feature-item:hover,
.hero-small .hero-feature-item:hover,
.page-header .hero-feature-item:hover,
.tech-hero .hero-feature-item:hover,
.case-study-hero .hero-feature-item:hover,
.hero-bg .hero-feature-item:hover {
  background: rgba(255, 255, 255, 0.16) !important;
  border-color: rgba(255, 255, 255, 0.32) !important;
}
/* Icons: plain gold glyph, NO round/white background (matches the original). */
.hero .hero-feature-item i,
.hero-small .hero-feature-item i,
.page-header .hero-feature-item i,
.tech-hero .hero-feature-item i,
.case-study-hero .hero-feature-item i,
.hero-bg .hero-feature-item i {
  color: #c9a227 !important;
  background: transparent !important;
  width: auto !important;
  height: auto !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  animation: none !important;
}
.hero .hero-feature-item h4,
.hero-small .hero-feature-item h4,
.page-header .hero-feature-item h4,
.tech-hero .hero-feature-item h4,
.case-study-hero .hero-feature-item h4,
.hero-bg .hero-feature-item h4 {
  color: #ffffff !important;
  font-weight: 600 !important;
}
.hero .hero-feature-item p,
.hero-small .hero-feature-item p,
.page-header .hero-feature-item p,
.tech-hero .hero-feature-item p,
.case-study-hero .hero-feature-item p,
.hero-bg .hero-feature-item p {
  color: rgba(255, 255, 255, 0.85) !important;
  font-weight: 400 !important;
}
/* Keep the icon plain on hover (no background pop, no scale). */
.hero .hero-feature-item:hover i,
.hero-small .hero-feature-item:hover i,
.page-header .hero-feature-item:hover i,
.tech-hero .hero-feature-item:hover i,
.case-study-hero .hero-feature-item:hover i,
.hero-bg .hero-feature-item:hover i {
  background: transparent !important;
  box-shadow: none !important;
  transform: none !important;
}
.hero .hero-feature-item:hover h4,
.hero-features a.hero-feature-item:hover h4 {
  color: #c9a227 !important;
}

/* "Key Benefits" band — TWO distinct designs share the .benefits-section name:
     1) GLASS variant: cards use a bare <i> icon and translucent glass, so the
        section must be DARK navy with white text.
     2) LIGHT variant: cards use a structured .benefit-icon wrapper on a white
        card with dark text — these must stay light.
   We detect the light variant by the presence of a .benefit-icon and scope the
   dark/glass treatment to sections WITHOUT one, so forcing white text never
   lands on a white card (which made the text invisible). */
.benefits-section:not(:has(.benefit-icon)) {
  background: linear-gradient(135deg, #0a2540 0%, #143a5c 100%) !important;
}
.benefits-section:not(:has(.benefit-icon)),
.benefits-section:not(:has(.benefit-icon)) h2,
.benefits-section:not(:has(.benefit-icon)) h2 > span,
.benefits-section:not(:has(.benefit-icon)) > .container > p {
  color: #ffffff !important;
}
.benefits-section:not(:has(.benefit-icon)) h2 > i {
  color: #c9a227 !important;
}
.benefits-section:not(:has(.benefit-icon)) .benefit-card {
  position: relative !important;
  overflow: hidden !important;
}
.benefits-section:not(:has(.benefit-icon)) .benefit-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.1);
  animation: rbGlassPulse 7s ease-in-out infinite;
  pointer-events: none;
  z-index: 0;
}
.benefits-section:not(:has(.benefit-icon)) .benefit-card > * {
  position: relative;
  z-index: 1;
}
.benefits-section:not(:has(.benefit-icon)) .benefit-card h3,
.benefits-section:not(:has(.benefit-icon)) .benefit-card h4,
.benefits-section:not(:has(.benefit-icon)) .benefit-card p,
.benefits-section:not(:has(.benefit-icon)) .benefit-card li,
.benefits-section:not(:has(.benefit-icon)) .benefit-card span {
  color: #ffffff !important;
}
.benefits-section:not(:has(.benefit-icon)) .benefit-card i {
  color: #c9a227 !important;
}

/* =====================================================================
   CTA SECTION  →  light
   ===================================================================== */
.cta-section {
  background:
    radial-gradient(ellipse at 15% 50%, #e8f2fd 0%, rgba(232, 242, 253, 0) 55%),
    linear-gradient(135deg, #f6f9fc 0%, #eef4fb 100%) !important;
  color: #41566b !important;
  border-top: 1px solid #dce6f0;
  border-bottom: 1px solid #dce6f0;
}
.cta-section::before {
  display: none !important;
}
.cta-section h2,
.cta-section h3 {
  color: #0a2540 !important;
}

/* =====================================================================
   SUBSCRIBE BANNER  →  light blue card
   ===================================================================== */
.subscribe-banner {
  /* Neumorphic "carved-in" surface to match the callouts. */
  background: #eef2f7 !important;
  border: none !important;
  border-radius: 16px !important;
  box-shadow: 0 4px 14px rgba(10, 37, 64, 0.05) !important;
}
/* The email field sits carved into the banner too. */
.subscribe-banner input,
.subscribe-form input {
  background: #eef2f7 !important;
  border: none !important;
  border-radius: 10px !important;
  box-shadow: 0 4px 14px rgba(10, 37, 64, 0.05) !important;
  color: #15293d !important;
}
.subscribe-banner h3 {
  color: #0a2540 !important;
}
.subscribe-banner p {
  color: #41566b !important;
}
.subscribe-form input {
  background: #ffffff !important;
  border: 1px solid #c7d6e6 !important;
  color: #15293d !important;
}
.subscribe-form input::placeholder {
  color: #6b7d8f !important;
}

/* =====================================================================
   COMPLIANCE SECTION  →  light
   ===================================================================== */
.compliance-section {
  background: linear-gradient(180deg, #f6f9fc 0%, #eef4fb 100%) !important;
  border-top: 1px solid #dce6f0;
}
.compliance-section::before {
  display: none !important;
}
.compliance-section .section-header .section-title,
.compliance-section .section-header .section-label,
.compliance-section .section-title,
.compliance-section .section-label {
  color: #0a2540 !important;
}
.compliance-section .compliance-note {
  color: #6b7d8f !important;
}
/* Badges were cramped — give them breathing room so the rounded card never
   touches the text, and a consistent comfortable size. */
.compliance-grid {
  gap: 20px !important;
  row-gap: 20px !important;
}
/* Plain compliance badges are compact INLINE pills (icon + label on one line),
   not tall centered tiles. The big-tile styling below is reserved for the rare
   variant that carries a .badge-code/.badge-name pair. */
.compliance-badge {
  display: inline-flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 0.45rem !important;
  padding: 0.4rem 0.85rem !important;
  min-width: 0 !important;
  border: 1px solid #dce6f0 !important;
  border-radius: 8px !important;
  background: #f0f6fc !important;
  box-shadow: none !important;
  font-size: 0.8rem !important;
  font-weight: 500 !important;
  line-height: 1.2 !important;
  text-align: left !important;
  margin: 0 0.4rem 0.4rem 0 !important;
  color: #0a2540 !important;
  white-space: nowrap;
}
.compliance-badge i { color: var(--success-green, #1f9d55) !important; }
.compliance-badge a { color: #0066cc !important; text-decoration: none !important; }
/* Tile variant only: stacked code-over-name card. */
.compliance-badge:has(.badge-code) {
  flex-direction: column !important;
  align-items: center !important;
  padding: 18px 24px !important;
  min-width: 140px !important;
  border-radius: 10px !important;
  box-shadow: 0 4px 16px rgba(10, 37, 64, 0.08) !important;
  text-align: center !important;
  white-space: normal;
}
.compliance-badge .badge-code {
  font-size: 1.2rem !important;
  white-space: nowrap;
}
.compliance-badge .badge-code a {
  color: #0066cc !important;
  text-decoration: none !important;
}
.compliance-badge .badge-name {
  font-size: 0.7rem !important;
  color: #6b7d8f !important;
}

/* =====================================================================
   COMPONENT FIXES
   The legacy main.css carries some broad !important rules that clash with
   page-specific interactive components. Restore the intended behaviour
   site-wide here (not per page).

   Interactive equipment-cutaway diagrams (.eic-*): the hotspots must stay
   absolutely positioned on the diagram frame; otherwise they collapse into a
   run of label text. Their per-hotspot coordinates already live in each
   page's CSS — this only re-asserts the positioning context.
   ===================================================================== */
.eic-frame .eic-comp,
.eic-wrapper .eic-comp,
a.eic-comp {
  position: absolute !important;
}

/* Some source pages wrap a styled table container inside an identical one
   (`.table-responsive > .table-responsive`), so the table reads as a box
   inside a box (double border / shadow / margin). Flatten any nested
   instance so only the outer container is styled. Sitewide, any depth. */
.table-responsive .table-responsive {
  margin: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
}

/* =====================================================================
   GOLD ICONS (sitewide)
   Card / feature icons use the brand gold accent. Tune the one value here.
   Nav, footer, trust badges, buttons and inline checkmarks are left as-is.
   ===================================================================== */
.card-icon,
.feature-icon,
.icon-circle > i,
.icon-circle-sm > i,
.icon-circle-xs > i,
.icon-box > i,
.icon-box-green > i,
.feature-card .icon-circle i,
.feature-card .card-icon,
.hero-feature-item i,
.equipment-category-card > h3 > i,
.resource-card > i,
.service-card > i {
  color: #c9a227 !important;
}
/* Neutral light circle behind icons so the GOLD glyph stays high-contrast and
   visible (gold-on-gold washed out; gold-on-blue was disallowed). */
.icon-circle,
.icon-circle-sm,
.icon-circle-xs,
.icon-box {
  background: #eef1f6 !important;
}
/* (Hero feature-item icons are handled in the hero section above — they stay
   transparent with no background, per the original site.) */

/* =====================================================================
   PROCESS-STEP CONTAINERS (sitewide)
   Always show a thin dark-blue frame; never apply hover transforms to the
   step (or its number/icon). Calm, enterprise behaviour.
   ===================================================================== */
.process-step,
.process-step-card,
.process-step-v,
.process-step-sea,
.step-card,
.timeline-step {
  /* Subtle glossy surface (lighter top → faint grey base) like the reference. */
  background: linear-gradient(180deg, #ffffff 0%, #f6f9fc 100%) !important;
  border: 1px solid #e6ecf2 !important;
  border-radius: 12px !important;
  /* Realistic layered shadow: inner top highlight + tight contact + soft ambient. */
  box-shadow: 0 4px 14px rgba(10, 37, 64, 0.05) !important;
  transition: transform 0.25s ease, box-shadow 0.25s ease !important;
}
.process-step:hover,
.process-step.visible:hover,
.process-step-card:hover,
.step-card:hover,
.timeline-step:hover {
  transform: translateY(-4px) !important;
  border-color: #c7d6e6 !important;
  box-shadow:
    0 4px 8px rgba(10, 37, 64, 0.08),
    0 18px 34px rgba(10, 37, 64, 0.18) !important;
}
/* Inline step number ("1", "2"…) → a proper gradient badge. */
.process-step h3,
.process-step-card h3,
.step-card h3 {
  display: flex !important;
  align-items: flex-start !important;
  gap: 0.65rem !important;
  margin-top: 0 !important;
}
.process-number {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 34px !important;
  height: 34px !important;
  flex: 0 0 auto !important;
  border-radius: 9px !important;
  background: linear-gradient(135deg, #0066cc 0%, #0a2540 100%) !important;
  color: #ffffff !important;
  font-size: 0.95rem !important;
  font-weight: 700 !important;
  box-shadow: 0 4px 10px rgba(0, 102, 204, 0.3) !important;
}
.process-step:hover .step-number,
.process-step.visible:hover .step-number {
  transform: none !important;
  background: linear-gradient(135deg, #0066cc 0%, #0068b8 100%) !important;
  color: #ffffff !important;
  box-shadow: 0 4px 16px rgba(0, 82, 155, 0.25) !important;
}
.step-number {
  animation: none !important;
}
.process-steps:has(.process-step:hover) .process-step {
  opacity: 1 !important;
  filter: none !important;
}
.process-step.visible:hover h3,
.process-step:hover h3 {
  color: inherit !important;
}

/* =====================================================================
   DARK-ON-DARK TITLE SAFETY (sitewide)
   Any remaining section/card with a dark gradient background gets readable
   light headings + text, so titles like "Proposal 1: …" are never invisible.
   ===================================================================== */
.bg-gradient-navy,
.bg-gradient-blue,
.bg-gradient-dark,
.proposals-grid .proposal-card.is-dark,
.dark-card,
.card-dark {
  color: #eaf2fb !important;
}
.bg-gradient-navy :is(h1,h2,h3,h4,h5,h6),
.bg-gradient-blue :is(h1,h2,h3,h4,h5,h6),
.bg-gradient-dark :is(h1,h2,h3,h4,h5,h6),
.dark-card :is(h1,h2,h3,h4,h5,h6),
.card-dark :is(h1,h2,h3,h4,h5,h6) {
  color: #ffffff !important;
}

/* Numbered process-step cards (.process-step / .step-number): main.css adds a
   decorative gold "connector dot" (.process-step::after) at top:28px/left:50%
   with z-index:3 — i.e. centred directly over the step number — which appears
   on hover and covers the digit. The horizontal connector line
   (.process-steps::before) already conveys the sequence, so the dot is
   removed here. One change, applied to every process-step on the site. */
.process-step::after {
  display: none !important;
}

/* =====================================================================
   FEATURE CARDS — "step infographic" style (sitewide)
   White rounded card + shadow, outline icon on top, a full-width coloured
   gradient bar for the title (white bold uppercase), description below.
   Bar colours cycle per card like the reference infographic.
   ===================================================================== */
/* Subpage-card style (sitewide): clean white card, left-aligned, a plain
   large blue icon on top, navy bold title (no coloured bar), grey body. */
.feature-card {
  background: #ffffff !important;
  border: 1px solid var(--border-gray, #d1e9e0) !important;
  border-radius: 12px !important;
  box-shadow: 0 4px 14px rgba(10, 37, 64, 0.05) !important;
  overflow: hidden !important;
  padding: 1.4rem 1.5rem !important;
  text-align: left !important;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease !important;
}
.feature-card:hover {
  transform: translateY(-4px) !important;
  border-color: var(--primary-blue, #0066cc) !important;
  box-shadow: 0 14px 30px rgba(10, 37, 64, 0.12) !important;
}
.feature-card .icon-circle,
.feature-card .icon-box {
  background: transparent !important;
  width: auto !important;
  height: auto !important;
  margin: 0 0 1rem !important;
  box-shadow: none !important;
}
.feature-card .icon-circle i,
.feature-card .icon-box i,
.feature-card > i,
.feature-card .card-icon {
  color: var(--primary-blue, #0066cc) !important;
  background: transparent !important;
  font-size: 2rem !important;
  display: block !important;
}
.feature-card h3,
.feature-card h4 {
  margin: 0 0 0.5rem !important;
  padding: 0 !important;
  color: var(--primary-navy, #0a2540) !important;
  font-weight: 700 !important;
  font-size: 1.1rem !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  background: none !important;
  line-height: 1.3 !important;
}
.feature-card p {
  padding: 0 !important;
  margin: 0 !important;
  color: var(--text-medium, #4a5568) !important;
  font-size: 0.92rem !important;
  line-height: 1.55 !important;
}

/* =====================================================================
   PARAMETER CARDS — 3D shadow card, NO colour strip (sitewide)
   White raised card with a clean lift-on-hover (replaces the jarring
   gradient-swap hover).
   ===================================================================== */
.parameter-card {
  background: linear-gradient(180deg, #ffffff 0%, #f6f9fc 100%) !important;
  border: 1px solid #e6ecf2 !important;
  border-radius: 12px !important;
  box-shadow: 0 4px 14px rgba(10, 37, 64, 0.05) !important;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease !important;
}
.parameter-card:hover {
  transform: translateY(-4px) !important;
  background: #ffffff !important;
  border-color: #c7d6e6 !important;
  box-shadow:
    0 4px 8px rgba(10, 37, 64, 0.08),
    0 18px 34px rgba(10, 37, 64, 0.18) !important;
}
.parameter-card h3,
.parameter-card h4,
.parameter-card strong {
  color: #0a2540 !important;
}
.parameter-card p,
.parameter-card span,
.parameter-card small {
  color: #6b7d8f !important;
}
.parameter-card i {
  color: #0066cc !important;
}
/* Links inside parameter cards must stay visible (they were turning
   white/invisible on hover when the card background lightens). */
.parameter-card a,
.parameter-card a:link,
.parameter-card a:visited {
  color: #0a4d8c !important;
  font-weight: 600;
}
.parameter-card a:hover,
.parameter-card a:focus {
  color: #0066cc !important;
}
.parameter-card a i { color: #0066cc !important; }

/* =====================================================================
   SCADA / equipment-library components.
   Sensor & component cards → glossy raised; equipment-library categories →
   carved-in (inset).
   ===================================================================== */
.component-card,
.redundancy-card {
  background: linear-gradient(180deg, #ffffff 0%, #f6f9fc 100%) !important;
  border: 1px solid #e6ecf2 !important;
  border-radius: 12px !important;
  box-shadow: 0 4px 14px rgba(10, 37, 64, 0.05) !important;
}
/* Corporate flat catalogue style — overrides the previous neumorphic look.
   (Detailed layout lives in pages/scada-integration.css; these !important
   rules defer to it by re-stating the same clean treatment.) */
.eq-lib-cat {
  background: #ffffff !important;
  border: 1px solid var(--border-gray, #d1e9e0) !important;
  border-radius: 14px !important;
  box-shadow: 0 4px 16px rgba(10, 37, 64, 0.05) !important;
}
.eq-chip {
  position: relative !important;
  overflow: visible !important;
  background: #fbfdff !important;
  border: 1px solid var(--border-gray, #d1e9e0) !important;
  border-left: 3px solid #c7dcef !important;
  border-radius: 8px !important;
  box-shadow: none !important;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease, background-color 0.2s ease !important;
}
.eq-chip:hover {
  background: #ffffff !important;
  border-left-color: var(--primary-blue, #0066cc) !important;
  box-shadow: 0 8px 20px rgba(10, 37, 64, 0.1) !important;
  transform: translateY(-2px) !important;
}
/* No frosted-glass overlay — keep it flat and corporate. */
.eq-chip::after { display: none !important; }
/* Plain blue icon, no glow. */
.eq-chip .eq-chip-ico,
.eq-chip .eq-chip-ico i,
.eq-chip > i {
  color: #0066cc !important;
  text-shadow: none !important;
  filter: none !important;
}
.eq-chip:hover .eq-chip-ico { background: var(--primary-blue, #0066cc) !important; border-color: var(--primary-blue, #0066cc) !important; }
.eq-chip:hover .eq-chip-ico i { color: #ffffff !important; text-shadow: none !important; filter: none !important; }

/* =====================================================================
   CALLOUT / NOTE BOXES — neumorphic "carved-in" (inset) look (sitewide)
   Soft neutral surface pressed into the page with inset shadow + light edge.
   ===================================================================== */
.callout,
.note-box,
.info-box,
.highlight-box,
.key-insight {
  background: #eef2f7 !important;
  border-radius: 14px !important;
  border: none !important;
  box-shadow: 0 4px 14px rgba(10, 37, 64, 0.05) !important;
}
/* Keep a subtle blue accent edge so it still reads as a callout. */
.callout {
  border-left: 3px solid rgba(0, 102, 204, 0.55) !important;
}
.callout strong,
.note-box strong,
.info-box strong,
.highlight-box strong {
  color: #0a2540 !important;
}

/* =====================================================================
   PROFESSIONAL DATA TABLES (sitewide)
   Clean single-box wrapper (no double border), navy header (kept), zebra rows,
   row hover, subtle cell separation.
   ===================================================================== */
.table-responsive,
.table-wrap,
.table-wrapper {
  border: none !important;
  border-radius: 12px !important;
  /* Wide tables scroll horizontally instead of being clipped (the previous
     overflow:hidden cut off columns on narrow viewports). overflow-y stays
     hidden so the rounded corners still clip the header. */
  overflow-x: auto !important;
  overflow-y: hidden !important;
  /* Glossy raised surface, like the cards. */
  box-shadow: 0 4px 14px rgba(10, 37, 64, 0.05) !important;
}
/* Subtle sheen on the navy header so the table reads as a glossy panel. */
.refinery-table thead,
.data-table thead,
.standards-table thead,
.comparison-table thead,
.specs-table thead,
.sensor-table thead {
  position: relative;
}
.refinery-table thead th,
.data-table thead th,
.standards-table thead th,
.comparison-table thead th,
.specs-table thead th,
.sensor-table thead th {
  box-shadow: 0 4px 14px rgba(10, 37, 64, 0.05) !important;
}
.refinery-table tbody tr:nth-child(even),
.data-table tbody tr:nth-child(even),
.standards-table tbody tr:nth-child(even),
.comparison-table tbody tr:nth-child(even),
.specs-table tbody tr:nth-child(even),
.sensor-table tbody tr:nth-child(even) {
  background: #f5f8fc !important;
}
.refinery-table tbody tr:hover,
.data-table tbody tr:hover,
.standards-table tbody tr:hover,
.comparison-table tbody tr:hover,
.specs-table tbody tr:hover,
.sensor-table tbody tr:hover {
  background: #eaf2fd !important;
}
.refinery-table td, .refinery-table th,
.data-table td, .data-table th,
.standards-table td, .standards-table th,
.comparison-table td, .comparison-table th,
.specs-table td, .specs-table th,
.sensor-table td, .sensor-table th {
  border-bottom: 1px solid #e6ecf2 !important;
  border-left: none !important;
  border-right: none !important;
}

/* =====================================================================
   INDUSTRY CARDS — glossy interior
   Diagonal light gradient + soft top sheen so the card body looks glossy.
   The image area keeps its own background.
   ===================================================================== */
.industry-card {
  background: linear-gradient(165deg, #ffffff 0%, #f5f9fd 58%, #eaf1fa 100%) !important;
  position: relative !important;
}
.industry-card .industry-card-body {
  position: relative;
  z-index: 1;
}
.industry-card .industry-card-body::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 45%;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.65) 0%, rgba(255, 255, 255, 0) 100%);
  pointer-events: none;
  z-index: -1;
}

/* =====================================================================
   BUTTON DEPTH SHADOWS (sitewide)
   Coloured drop shadows so primary/gold/CTA buttons read as raised.
   ===================================================================== */
.btn-primary {
  box-shadow: 0 4px 12px rgba(0, 102, 204, 0.28) !important;
}
.btn-primary:hover {
  box-shadow: 0 7px 18px rgba(0, 102, 204, 0.38) !important;
}
.btn-gold {
  box-shadow: 0 4px 14px rgba(201, 162, 39, 0.4) !important;
}
.btn-gold:hover {
  box-shadow: 0 8px 22px rgba(201, 162, 39, 0.52) !important;
}
.btn-secondary {
  box-shadow: 0 3px 10px rgba(10, 37, 64, 0.12) !important;
}
.btn-secondary:hover {
  box-shadow: 0 5px 14px rgba(10, 37, 64, 0.18) !important;
}

/* =====================================================================
   REALISTIC SURFACE SHADOW — sitewide on standalone card containers
   Soft top highlight + tight contact + ambient shadow so every card reads as a
   raised surface. Glass/dark cards (hero tiles, benefit cards) are excluded.
   ===================================================================== */
.card:not(.benefit-card):not(.hero-feature-item),
.industry-card,
.service-card,
.resource-card,
.equipment-category-card,
.method-card,
.product-card,
.tool-card,
.stat-box,
.calc-box,
.application-card,
.solution-type-card,
.standard-card,
.related-card,
.source-card,
.reuse-card,
.service-strip-card,
.method-step,
.method-card,
.software-card,
.spec-card,
.standard-card,
.state-card,
.system-cta-card {
  box-shadow: 0 4px 14px rgba(10, 37, 64, 0.05) !important;
}
/* Glossy white surface on standalone white cards. Coloured/dark cards (bg-navy,
   bg-gradient-*, bg-sky, etc.) keep their own background. */
.card:not(.benefit-card):not(.hero-feature-item):not([class*="bg-gradient"]):not([class*="bg-navy"]):not([class*="bg-dark"]):not([class*="bg-sky"]):not([class*="gradient-"]),
.resource-card,
.product-card,
.tool-card,
.source-card,
.related-card,
.equipment-category-card,
.service-card,
.method-step,
.method-card,
.software-card,
.spec-card,
.standard-card,
.state-card,
.system-cta-card {
  background: linear-gradient(180deg, #ffffff 0%, #f6f9fc 100%) !important;
}

/* Dark CFD "Validate Your Design" CTA band (.cta-hub) — white text. */
.cta-hub,
.cta-hub :is(h1, h2, h3, h4, p, span, li, strong) {
  color: #ffffff !important;
}
.cta-hub a:not(.btn) {
  color: #c9a227 !important;
}

/* =====================================================================
   SOFTWARE CARDS (CFD hub etc.) — remove the dark-blue icon circle, add a
   glossy raised surface + shadow.
   ===================================================================== */
.software-card {
  background: linear-gradient(180deg, #ffffff 0%, #f6f9fc 100%) !important;
  box-shadow: 0 4px 14px rgba(10, 37, 64, 0.05) !important;
}
.software-card .sw-icon {
  background: #eef1f6 !important;
  color: #c9a227 !important;
  box-shadow: 0 4px 14px rgba(10, 37, 64, 0.05) !important;
}
.software-card:hover .sw-icon {
  background: linear-gradient(135deg, #c9a227, #e8d48b) !important;
  color: #ffffff !important;
}

/* =====================================================================
   HERO BUTTONS on the photo hero — match the live site: the secondary button
   is a translucent glass outline (white text/border), not a solid white chip.
   ===================================================================== */
section.hero-bg .btn-secondary {
  background: rgba(255, 255, 255, 0.1) !important;
  color: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.38) !important;
  backdrop-filter: blur(4px) !important;
}
section.hero-bg .btn-secondary:hover {
  background: rgba(255, 255, 255, 0.2) !important;
  color: #ffffff !important;
  border-color: rgba(255, 255, 255, 0.6) !important;
}

/* =====================================================================
   CARD ACTIONS (sitewide) — fix the "box-in-box" / clipped button
   In narrow industry/application cards the action button + a "… →" text link
   sat side-by-side, overflowed the card and were clipped by overflow:hidden
   (showing e.g. "od Processing Eq"). Stack them full-width so nothing clips.
   ===================================================================== */
.industry-card .card-actions,
.application-card .card-actions,
.card .card-actions {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  flex-wrap: wrap !important;
  gap: 0.6rem !important;
  border: none !important;
}
/* Primary action: solid blue, full-width, centred, never clipped. */
.industry-card .card-actions .btn-secondary,
.application-card .card-actions .btn-secondary,
.card .card-actions .btn-secondary {
  width: 100% !important;
  justify-content: center !important;
  text-align: center !important;
  white-space: normal !important;
  overflow: visible !important;
  background: #0066cc !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: 8px !important;
  padding: 0.6rem 1rem !important;
}
.industry-card .card-actions .btn-secondary:hover,
.card .card-actions .btn-secondary:hover {
  background: #0a2540 !important;
  color: #ffffff !important;
}
/* Secondary "… →" text link: centred under the button, no box. */
.industry-card .card-actions .btn-text,
.application-card .card-actions .btn-text,
.card .card-actions .btn-text {
  width: 100% !important;
  justify-content: center !important;
  text-align: center !important;
  white-space: normal !important;
  border: none !important;
  background: transparent !important;
  color: #0066cc !important;
}

/* =====================================================================
   INDUSTRY TAGS (sitewide)
   Blue outline buttons that fill blue with white text on hover.
   ===================================================================== */
/* Match the original website: white pill with a subtle border + shadow and
   dark-grey text, that fills blue with white text on hover. */
.industry-tag {
  background: #ffffff !important;
  border: 1.5px solid #dce6f0 !important;
  color: #2d3748 !important;
  border-radius: 24px !important;
  box-shadow: 0 1px 3px rgba(10, 37, 64, 0.08) !important;
  transition: background 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, transform 0.15s !important;
}
.industry-tag:hover {
  background: linear-gradient(135deg, #0a7ce6 0%, #0052a3 100%) !important;
  color: #ffffff !important;
  border-color: #0066cc !important;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 102, 204, 0.25) !important;
}

/* =====================================================================
   NAV PILLS / SECTION TABS (sitewide)
   All pills are blue with white text; the active one is deeper navy so it
   still reads as selected. Both keep white font.
   ===================================================================== */
.nav-pill {
  background: #0066cc !important;
  color: #ffffff !important;
  border: 1px solid transparent !important;
}
.nav-pill:hover {
  background: #0052a3 !important;
  color: #ffffff !important;
}
.nav-pill.active {
  background: #0a2540 !important;
  color: #ffffff !important;
}

/* =====================================================================
   NUMBERED STEP CARDS (.step-card / .step-header / .step-number)
   Keep the number and its title on one aligned baseline with consistent
   padding, so stacked step cards line up identically.
   ===================================================================== */
.step-card {
  padding: 1.5rem 1.5rem 1.25rem !important;
}
.step-card .step-header {
  display: flex !important;
  align-items: center !important;
  gap: 1rem !important;
  margin-bottom: 0.75rem !important;
}
.step-card .step-header .step-number {
  flex: 0 0 auto !important;
  margin: 0 !important;
}
.step-card .step-header h3,
.step-card .step-header h4 {
  margin: 0 !important;
  line-height: 1.3 !important;
}

/* =====================================================================
   GENERIC DARK-SECTION SAFETY NET
   Every class the original site used for a dark navy/green surface is
   converted to a light surface, and the blanket "white text" rules those
   sections carry (color:#fff !important) are reversed to readable dark text.
   This is what keeps copy like the "Engineered from first principles…" CTA
   visible after the reskin.
   ===================================================================== */
.section-dark,
.dark-section,
.bg-dark,
.bg-navy,
.bg-gradient-navy,
.bg-gradient-green,
.cta-section-sludge {
  background: linear-gradient(180deg, #f6f9fc 0%, #eef4fb 100%) !important;
  color: #41566b !important;
}

/* Reverse the blanket white-text rules (main.css ~line 19162). Mirror the
   exact selector shape + !important so the dark text wins on equal
   specificity by loading later. */
.cta-section h1, .cta-section h2, .cta-section h3, .cta-section h4, .cta-section h5, .cta-section h6,
.cta-section-sludge h1, .cta-section-sludge h2, .cta-section-sludge h3, .cta-section-sludge h4, .cta-section-sludge h5, .cta-section-sludge h6,
.bg-navy h1, .bg-navy h2, .bg-navy h3, .bg-navy h4, .bg-navy h5, .bg-navy h6,
.bg-gradient-navy h1, .bg-gradient-navy h2, .bg-gradient-navy h3, .bg-gradient-navy h4, .bg-gradient-navy h5, .bg-gradient-navy h6,
.bg-gradient-green h1, .bg-gradient-green h2, .bg-gradient-green h3, .bg-gradient-green h4, .bg-gradient-green h5, .bg-gradient-green h6 {
  color: #0a2540 !important;
}
.cta-section p, .cta-section-sludge p,
.bg-navy p, .bg-gradient-navy p, .bg-gradient-green p,
.cta-section span, .cta-section-sludge span,
.bg-navy span, .bg-gradient-navy span, .bg-gradient-green span,
.cta-section div, .cta-section-sludge div,
.bg-navy div, .bg-gradient-navy div, .bg-gradient-green div,
.cta-section li, .bg-navy li, .bg-gradient-navy li, .bg-gradient-green li {
  color: #41566b !important;
}
.bg-navy .section-label,
.bg-gradient-navy .section-label,
.bg-gradient-green .section-label,
.bg-dark .section-label,
.bg-primary-navy .section-label,
section.bg-navy .section-label,
section.bg-gradient-navy .section-label,
section.bg-gradient-green .section-label,
section.bg-dark .section-label,
section.bg-primary-navy .section-label {
  color: #0a2540 !important;
  background: rgba(255, 255, 255, 0.28) !important;
  border-color: rgba(255, 255, 255, 0.32) !important;
  padding: 6px 16px !important;
  border-radius: 20px !important;
}
.cta-section a:not(.btn),
.cta-section-sludge a:not(.btn),
.bg-navy a:not(.btn),
.bg-gradient-navy a:not(.btn),
.bg-gradient-green a:not(.btn) {
  color: #0066cc !important;
}
/* Keep coloured-icon highlights blue rather than inheriting body text. */
.cta-section .cta-content h3 i,
.system-cta-card .cta-content h3 i {
  color: #0066cc !important;
}

/* =====================================================================
   COMPLIANCE CERTIFICATION CARDS (worldwide-compliance & similar)
   The page CSS intends each .cert-card to be a flex row with an 80x80
   badge (CE / ISO 9001 / ISO 14001 / ASME) as a left column. A stray
   global rule in main.css forces .cert-badge to position:absolute,
   bottom:-12px, left:50% — which floats the badge OVER the card's
   bottom text (cert-items), covering it. Restore the badge to the
   intended in-flow left column so the marking never overlaps any
   container text, and give it a glossy raised finish to match the rest.
   ===================================================================== */
.cert-card {
  align-items: flex-start;
  overflow: visible;
}
.cert-badge {
  position: static !important;
  transform: none !important;
  top: auto !important;
  bottom: auto !important;
  left: auto !important;
  right: auto !important;
  width: 80px !important;
  height: 80px !important;
  padding: 8px !important;
  border-radius: 12px !important;
  white-space: normal !important;
  text-align: center !important;
  line-height: 1.12 !important;
  flex-shrink: 0;
  /* glossy raised finish */
  background: linear-gradient(150deg, #0a78e0 0%, #0052a3 55%, #003d73 100%) !important;
  box-shadow: 0 4px 14px rgba(10, 37, 64, 0.05) !important;
}

/* =====================================================================
   CALCULATOR PAGES — NEUMORPHIC "SOFT UI" KIT (body.is-calc only)
   Calm neutral surface with softly raised panels, carved-in (inset)
   inputs that keep a permanent focus ring, and pressable buttons.
   Scoped to body.is-calc so it never touches the rest of the site.
   Palette: base #e9eef5 · light highlight #ffffff · soft shadow #a3b1c6
   ===================================================================== */
/* Plain light-grey page backdrop — no soft-UI gradient blobs. */
body.is-calc {
  background-color: #f5f7fa;
  background-image: none;
}
body.is-calc #main-content .section { background: transparent !important; }
body.is-calc #main-content .section-light { background: #eef2f7 !important; }

/* The tool card + supporting info panel — flat white corporate cards. */
body.is-calc .calc-container,
body.is-calc .daf-calc-container,
body.is-calc .info-section {
  background: #ffffff !important;
  border: 1px solid var(--border-gray, #d1e9e0) !important;
  border-radius: 14px !important;
  box-shadow: 0 4px 14px rgba(10, 37, 64, 0.05) !important;
}

/* Headings — crisp navy. */
body.is-calc .calc-header h3,
body.is-calc .info-section h3,
body.is-calc .calc-results h4 {
  color: #0a2540 !important;
}

/* Inputs & selects — flat white field, blue focus ring. */
body.is-calc .calc-field input,
body.is-calc .calc-field select,
body.is-calc .daf-calc-field input,
body.is-calc .daf-calc-field select {
  background: #ffffff !important;
  border: 1px solid var(--border-gray, #d1e9e0) !important;
  border-radius: 8px !important;
  color: #1d2b3a !important;
  box-shadow: none !important;
}
body.is-calc .calc-field input:focus,
body.is-calc .calc-field select:focus,
body.is-calc .daf-calc-field input:focus,
body.is-calc .daf-calc-field select:focus {
  outline: none !important;
  border-color: var(--primary-blue, #0066cc) !important;
  box-shadow: 0 0 0 3px rgba(0, 102, 204, 0.12) !important;
}

/* Submit — solid corporate button (no pill / no depress). */
body.is-calc .calc-submit,
body.is-calc .daf-calc-submit {
  background: var(--primary-blue, #0066cc) !important;
  border: none !important;
  border-radius: 8px !important;
  color: #fff !important;
  box-shadow: none !important;
  transition: background-color .2s ease !important;
}
body.is-calc .calc-submit:hover,
body.is-calc .daf-calc-submit:hover {
  background: var(--primary-navy, #0a2540) !important;
}
body.is-calc .calc-submit:active,
body.is-calc .daf-calc-submit:active {
  background: var(--primary-navy, #0a2540) !important;
}

/* Result tiles — flat white; highlight tile keeps a solid navy accent. */
body.is-calc .result-card {
  background: #ffffff !important;
  border: 1px solid var(--border-gray, #d1e9e0) !important;
  border-radius: 12px !important;
  box-shadow: 0 4px 14px rgba(10, 37, 64, 0.05) !important;
}
body.is-calc .result-card:hover {
  transform: translateY(-3px);
  border-color: var(--primary-blue, #0066cc) !important;
}
body.is-calc .result-card.highlight,
body.is-calc .result-highlight {
  background: var(--primary-navy, #0a2540) !important;
  border: 1px solid var(--primary-navy, #0a2540) !important;
  box-shadow: 0 8px 20px rgba(10, 37, 64, 0.18) !important;
}

/* Explanation / advanced blocks — flat panel with a light fill. */
body.is-calc .calc-explanation,
body.is-calc .daf-calc-advanced-content {
  background: #f5f7fa !important;
  border: 1px solid var(--border-gray, #d1e9e0) !important;
  border-radius: 10px !important;
  box-shadow: none !important;
}

/* Results divider line. */
body.is-calc .calc-results {
  border-top: 1px solid var(--border-gray, #d1e9e0) !important;
}

/* Toggle / advanced link button. */
body.is-calc .daf-calc-toggle {
  border-radius: 8px !important;
}

/* Tighter, comfortable spacing on phones. */
@media (max-width: 640px) {
  body.is-calc .calc-container,
  body.is-calc .daf-calc-container,
  body.is-calc .info-section {
    border-radius: 18px !important;
    padding: 1.25rem !important;
  }
}

/* =====================================================================
   STANDARDS BROWSER (plant-layout-hub & similar)
   Region cards (European / American / Asia-Pacific / Oil & Gas / Water /
   BIM) were cramped into narrow 4-up strips with flat grey one-line
   entries. Widen the columns, give each card a glossy raised finish, and
   split every standard into a bold navy code + muted description so the
   list reads clearly.
   ===================================================================== */
.standards-browser {
  grid-template-columns: repeat(auto-fit, minmax(330px, 1fr)) !important;
  gap: 1.5rem !important;
}
.standard-region-card {
  background: linear-gradient(160deg, #ffffff 0%, #f1f6fc 100%) !important;
  border: 1px solid #dce6f0 !important;
  border-left: 4px solid #c9a227 !important;
  border-radius: 16px !important;
  padding: 1.75rem 1.875rem !important;
  box-shadow: 0 4px 14px rgba(10, 37, 64, 0.05) !important;
}
.standard-region-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 4px 14px rgba(10, 37, 64, 0.05) !important;
}
.standard-region-card .region-header {
  margin-bottom: 1.1rem !important;
  padding-bottom: 0.9rem;
  border-bottom: 1px solid #e4ecf5;
}
.standard-region-card h4 {
  font-size: 1.2rem !important;
  color: #0a2540 !important;
}
.standard-region-card ul {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}
.standard-region-card li {
  display: flex !important;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: 0.6rem;
  row-gap: 0.1rem;
  font-size: 0.9rem !important;
  padding: 0.55rem 0 !important;
  border-bottom: 1px solid #eef3f8 !important;
}
.standard-region-card li .std-code {
  font-weight: 700;
  color: #0a4d8c;
  white-space: nowrap;
  letter-spacing: 0.01em;
}
.standard-region-card li .std-desc {
  color: #5a6b7d;
  font-size: 0.86rem;
}

@media (max-width: 560px) {
  .standards-browser { grid-template-columns: 1fr !important; }
}

/* =====================================================================
   REMOTE DEPLOYMENT — KPI stat cards: carved-in (inset) treatment.
   The "5–50 t / transport mass", "2–14 d" etc. tiles read as pressed
   into the surface.
   ===================================================================== */
.kpi-card {
  background: #eef3f9 !important;
  border: none !important;
  border-left: 4px solid #00529b !important;
  border-radius: 12px !important;
  box-shadow: 0 4px 14px rgba(10, 37, 64, 0.05) !important;
}

/* =====================================================================
   PRODUCT TILES ("The Five Product Families") — glossy raised + shadow.
   ===================================================================== */
.product-tile {
  background: linear-gradient(160deg, #ffffff 0%, #eef5fc 100%) !important;
  border: 1px solid #dce6f0 !important;
  border-radius: 16px !important;
  box-shadow: 0 4px 14px rgba(10, 37, 64, 0.05) !important;
}
.product-tile:hover {
  transform: translateY(-6px);
  border-color: #0066cc !important;
  box-shadow: 0 4px 14px rgba(10, 37, 64, 0.05) !important;
}
.product-tile .pt-icon {
  box-shadow: 0 4px 14px rgba(10, 37, 64, 0.05) !important;
}

/* =====================================================================
   INDUSTRIES DEEP-DIVE blocks
   - .challenge-list ("Challenges" lists) → glossy raised panel + shadow.
   - .compliance-note ("Compliance: …") → carved-in (inset) note strip.
   ===================================================================== */
.industry-deep-dive .challenge-list {
  background: linear-gradient(160deg, #ffffff 0%, #eef5fc 100%) !important;
  border: 1px solid #dce6f0 !important;
  border-radius: 14px !important;
  padding: 1.5rem 1.625rem !important;
  box-shadow: 0 4px 14px rgba(10, 37, 64, 0.05) !important;
}

.compliance-note {
  background: #eef3f9 !important;
  border-radius: 12px !important;
  padding: 1rem 1.25rem !important;
  color: #41566b !important;
  box-shadow: 0 4px 14px rgba(10, 37, 64, 0.05) !important;
}
.compliance-note strong {
  color: #0a4d8c !important;
}

/* =====================================================================
   DARK "Key Benefits" glass tiles (SCADA integration & similar) — the
   .benefit-card tiles with a round .icon medallion on the navy band.
   Upgraded to the sitewide glossy gold-glass tile: gradient glass face,
   inset top highlight, layered drop shadow, hover lift, and a glowing
   gold icon. Scoped to the dark (glass) benefits-section only.
   ===================================================================== */
.benefits-section:not(:has(.benefit-icon)) .benefit-card {
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.14) 0%, rgba(255, 255, 255, 0.05) 100%) !important;
  border: 1px solid rgba(255, 255, 255, 0.18) !important;
  border-radius: 16px !important;
  padding: 1.85rem 1.5rem !important;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: 0 4px 14px rgba(10, 37, 64, 0.05) !important;
  transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease !important;
}
.benefits-section:not(:has(.benefit-icon)) .benefit-card:hover {
  transform: translateY(-5px);
  border-color: rgba(201, 162, 39, 0.55) !important;
  box-shadow: 0 4px 14px rgba(10, 37, 64, 0.05) !important;
}
/* Gold glass icon medallion with a soft glow. */
.benefits-section:not(:has(.benefit-icon)) .benefit-card .icon {
  background: linear-gradient(145deg, rgba(201, 162, 39, 0.30) 0%, rgba(201, 162, 39, 0.10) 100%) !important;
  border: 1px solid rgba(201, 162, 39, 0.42) !important;
  box-shadow: 0 4px 14px rgba(10, 37, 64, 0.05) !important;
  transition: box-shadow .3s ease, transform .3s ease !important;
}
.benefits-section:not(:has(.benefit-icon)) .benefit-card:hover .icon {
  transform: scale(1.06);
  box-shadow: 0 4px 14px rgba(10, 37, 64, 0.05) !important;
}
.benefits-section:not(:has(.benefit-icon)) .benefit-card .icon i {
  color: #ffd66b !important;
}

/* =====================================================================
   .calc-box (formula / equation boxes, e.g. "Kynch Flux Density Function")
   The page CSS framed these with a heavy all-round #0066cc border on a
   blue tint, reading as a dark-blue box. Reskin to the sitewide glossy
   card: white→light gradient face, soft neutral border with a single
   blue left-accent highlight, and a crisp inset formula block.
   (The glossy drop-shadow is already applied via the shared card group.)
   ===================================================================== */
.calc-box {
  background: linear-gradient(160deg, #ffffff 0%, #f4f8fc 100%) !important;
  border: 1px solid #dce6f0 !important;
  border-left: 4px solid #0066cc !important;
  border-radius: 14px !important;
  padding: 1.5rem 1.75rem !important;
}
/* Kill the dark-navy heading band that the stacked-calc-box grid rule applies
   (it left a navy title on a navy bar = unreadable). The heading now sits flush
   on the light box as plain navy text with a blue icon. */
.calc-box > h3,
.calc-box h3 {
  background: none !important;
  color: #0a2540 !important;
  margin: 0 0 0.75rem 0 !important;
  padding: 0 !important;
  letter-spacing: normal !important;
}
.calc-box h3 i,
.calc-box h3 .icon-prefix,
.calc-box h3 .fas,
.calc-box h3 .far,
.calc-box .icon-prefix {
  color: #0066cc !important;
  -webkit-text-fill-color: #0066cc !important;
}
.calc-box h3 span {
  color: #0a2540 !important;
  -webkit-text-fill-color: #0a2540 !important;
}
/* The monospace formula line → carved-in code block. */
.calc-box .font-mono,
.calc-box p.bg-white {
  background: #f6fafe !important;
  border: 1px solid #dce6f0 !important;
  border-radius: 8px !important;
  color: #0a2540 !important;
  box-shadow: 0 4px 14px rgba(10, 37, 64, 0.05) !important;
}
.calc-box strong {
  color: #0a4d8c !important;
}

/* =====================================================================
   EQUIPMENT CATALOGUE (water-treatment-equipment & other product-table
   pages). The catalogue tables weren't part of the sitewide data-table
   styling, so they kept a flat grey header. Bring .product-table into the
   glossy navy-header + zebra system, soften the heavy navy header rule,
   turn the lone intro strip into a blue-accent callout, and give the
   action buttons proper depth.
   ===================================================================== */

/* Intro paragraph → glossy blue-accent callout (not a flat grey strip). */
.catalog-intro {
  background: linear-gradient(160deg, #ffffff 0%, #eef5fc 100%) !important;
  border: 1px solid #dce6f0 !important;
  border-left: 4px solid #0066cc !important;
  border-radius: 14px !important;
  padding: 1.5rem 1.75rem !important;
  box-shadow: 0 4px 14px rgba(10, 37, 64, 0.05) !important;
}
.catalog-intro p { color: #41566b !important; }

/* Category header: replace the heavy 2px navy underline with a clean light
   rule, keep the title navy and the icon blue. */
.category-header {
  border-bottom: 1px solid #dce6f0 !important;
  padding-bottom: 1rem !important;
  margin-bottom: 1.25rem !important;
}
.category-header h2 { color: #0a2540 !important; }
.category-header h2 i { color: #0066cc !important; }
.category-section { margin-bottom: 3rem !important; }

/* product-table → full sitewide glossy data-table treatment. */
.product-table thead th {
  background: linear-gradient(180deg, #0a2540 0%, #143a5c 100%) !important;
  color: #ffffff !important;
  border-bottom: none !important;
  box-shadow: 0 4px 14px rgba(10, 37, 64, 0.05) !important;
}
.product-table tbody tr:nth-child(even) { background: #f5f8fc !important; }
.product-table tbody tr:hover { background: #eaf2fd !important; }
.product-table td,
.product-table th {
  border-left: none !important;
  border-right: none !important;
  border-bottom: 1px solid #e6ecf2 !important;
}
.product-name { color: #0a2540 !important; }
.product-code { color: #0066cc !important; }

/* "View Full Specifications" → depth pill that fills blue on hover. */
.view-details-btn {
  border: 1px solid #c7d6e6 !important;
  background: #ffffff !important;
  color: #0066cc !important;
  box-shadow: 0 4px 14px rgba(10, 37, 64, 0.05) !important;
}
.view-details-btn:hover {
  background: linear-gradient(145deg, #0a7ce6 0%, #0052a3 100%) !important;
  color: #ffffff !important;
  border-color: #0052a3 !important;
  box-shadow: 0 4px 14px rgba(10, 37, 64, 0.05) !important;
}

/* SCADA Ready badge → keep the dark pill but add a subtle gloss + glow. */
.scada-badge {
  color: #c9a227 !important;
  box-shadow: 0 4px 14px rgba(10, 37, 64, 0.05) !important;
}
.scada-badge,
.scada-badge:link,
.scada-badge:visited,
.scada-badge:hover { color: #c9a227 !important; }
.scada-badge i { color: #c9a227 !important; }

/* =====================================================================
   PRODUCT-CARD GRID (filtration-systems "Product Range" etc.)
   The DF FPW / FP / FPB cards were full-width and very tall stacked; lay
   them out two per row so the page reads compactly. A lone 3rd card sits
   half-width in the next row.
   ===================================================================== */
.product-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.75rem;
  align-items: stretch;
}
.product-grid > .product-card {
  margin: 0 !important;
  max-width: none !important;
  width: 100% !important;
  height: 100%;
}
@media (max-width: 768px) {
  .product-grid { grid-template-columns: 1fr; }
}

/* =====================================================================
   DOCUMENTATION DOWNLOAD ROWS (.doc-item) — glossy box + gradient button.
   The Download link went dark-text-on-dark on hover; lock it to a glossy
   blue gradient pill with white text in every state, and raise the row
   into a glossy card.
   ===================================================================== */
.doc-item {
  background: linear-gradient(160deg, #ffffff 0%, #eef5fc 100%) !important;
  border: 1px solid #dce6f0 !important;
  border-radius: 14px !important;
  box-shadow: 0 4px 14px rgba(10, 37, 64, 0.05) !important;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease !important;
}
.doc-item:hover {
  transform: translateY(-3px);
  border-color: #0066cc !important;
  box-shadow: 0 4px 14px rgba(10, 37, 64, 0.05) !important;
}
/* Labels stay dark & readable regardless of hover state. */
.doc-meta h4 { color: #0a2540 !important; }
.doc-meta span { color: #6b7d8f !important; }
.doc-info > i { color: #0066cc !important; }

/* Download → glossy gradient pill, white text always. */
.doc-download,
.doc-download:link,
.doc-download:visited {
  background: linear-gradient(145deg, #0a7ce6 0%, #0052a3 100%) !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  border: none !important;
  border-radius: 8px !important;
  box-shadow: 0 4px 14px rgba(10, 37, 64, 0.05) !important;
  transition: background .2s ease, box-shadow .2s ease, transform .15s ease !important;
}
.doc-download i { color: #ffffff !important; }
.doc-download:hover,
.doc-download:focus {
  background: linear-gradient(145deg, #1488f2 0%, #0a5cb0 100%) !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(10, 37, 64, 0.05) !important;
}
.doc-download:hover i { color: #ffffff !important; }

/* =====================================================================
   CAD DOWNLOAD PANEL (.cad-section, documentation page) — keeps its navy
   gradient, but a sitewide heading rule was forcing the text dark on the
   dark panel. Lock all of its text to white.
   ===================================================================== */
.cad-section {
  background: linear-gradient(135deg, #0a2540 0%, #1a3a5c 100%) !important;
  color: #ffffff !important;
}
.cad-section h2,
.cad-section h3,
.cad-section h2 span,
.cad-section h2 i {
  color: #ffffff !important;
}
.cad-section h2 i { color: #c9a227 !important; }
.cad-section p {
  color: rgba(255, 255, 255, 0.85) !important;
}
.cad-section .cad-format {
  background: rgba(255, 255, 255, 0.15) !important;
  color: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.18) !important;
}
/* Primary button on the dark panel stays white-on-navy and readable. */
.cad-section .cad-buttons .btn-primary {
  background: #ffffff !important;
  color: #0a2540 !important;
}
.cad-section .cad-buttons .btn-secondary {
  background: transparent !important;
  color: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.6) !important;
}

/* =====================================================================
   APPLICATION CARDS — the .application-card i rule was meant for the
   HEADER icon (52px medallion + hover scale), but it also caught the
   <li> tick icons, giving them a big box that scaled/recoloured on hover.
   Keep the header icon behaviour; render the list ticks as plain inline
   blue checks with NO hover reaction.
   ===================================================================== */
.application-card li i,
.application-card:hover li i {
  width: auto !important;
  height: auto !important;
  margin: 0 0.5rem 0 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  transform: none !important;
  color: #0066cc !important;
  font-size: 0.9rem !important;
}

/* =====================================================================
   DAF feature grids: fix horizontal overflow + engrave the boxes.
   .grid-auto-250 used minmax(250px,1fr); on a container narrower than
   250px that forces the column wider than the page → overflow. Clamp the
   min track to min(250px,100%) so it never exceeds the available width.
   ===================================================================== */
.grid-auto-250 {
  grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr)) !important;
}
.grid-auto-250 > * { min-width: 0; }

/* .feature-highlight boxes (Heavy-Duty Construction, High Efficiency, Flow
   Range, …) → carved-in / engraved into the surface. */
.feature-highlight {
  background: #eef3f9 !important;
  border: none !important;
  border-radius: 12px !important;
  box-shadow: 0 4px 14px rgba(10, 37, 64, 0.05) !important;
}
.feature-highlight h4 { color: #0a2540 !important; }
.feature-highlight h4 i,
.feature-highlight h4 .icon-prefix { color: #0066cc !important; }
.feature-highlight p { color: #41566b !important; }

/* =====================================================================
   DAF PRODUCT RANGE cards (.product-card-daf). These carry a lot of
   content, so they read best FULL-WIDTH (one per row). The real fix the
   page needed is the feature row inside each card: an auto-fit grid
   stretched a 2-box card's features wide and inconsistent with the
   3-box cards. Pin the feature row to 3 even columns so every box is the
   same width and sits horizontally regardless of count (a 2-box card
   fills the two left columns). One column on mobile.
   ===================================================================== */
.product-grid-daf { display: block !important; }
.product-grid-daf > .product-card-daf { margin-bottom: 1.5rem !important; }
.product-card-daf .grid-auto-250 {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 1.25rem !important;
}
@media (max-width: 760px) {
  .product-card-daf .grid-auto-250 { grid-template-columns: 1fr !important; }
}

/* =====================================================================
   #filtration-system card (containerized-systems) — faint container photo
   as a transparent background watermark. Save the pasted image to:
       app/public/images/filtration-container.jpg
   A strong white veil keeps the dense specs/tables readable on top.
   ===================================================================== */
#filtration-system {
  position: relative;
  background-color: #ffffff;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.9)),
    url('/images/filtration-container.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
#filtration-system > * {
  position: relative;
  z-index: 1;
}

/* =====================================================================
   PERFORMANCE FACTORS cards (lamella-design-calculations) — the bullet
   lists (Winter design margin / Peak summer flow / …) read better as a
   horizontal row of chips than a vertical list. Scoped to .card-large.
   ===================================================================== */
.card-large ul.mt-1-pl-125-disc {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  list-style: none !important;
  padding-left: 0 !important;
  margin-top: 1rem !important;
}
.card-large ul.mt-1-pl-125-disc > li {
  background: #eef4fb;
  border: 1px solid #dce6f0;
  border-radius: 8px;
  padding: 0.5rem 0.85rem;
  font-size: 0.85rem;
  color: #0a2540;
  list-style: none;
}

/* =====================================================================
   BESPOKE SOLUTION CARDS (global-standards-reference "Custom Certification
   Support" etc.) — navy→blue gradient cards whose white text was being
   overridden dark by the sitewide heading rule. Lock text white and give
   the container a glossy raised finish.
   ===================================================================== */
.bespoke-solution-card {
  background: linear-gradient(135deg, #0a2540 0%, #0066cc 100%) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: 16px !important;
  box-shadow: 0 4px 14px rgba(10, 37, 64, 0.05) !important;
}
.bespoke-solution-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 4px 14px rgba(10, 37, 64, 0.05) !important;
}
.bespoke-solution-card h4,
.bespoke-solution-card h3,
.bespoke-solution-card span,
.bespoke-solution-card strong {
  color: #ffffff !important;
}
.bespoke-solution-card p {
  color: rgba(255, 255, 255, 0.85) !important;
}
.bespoke-solution-card i {
  color: #c9a227 !important;
}

/* =====================================================================
   CONTAINERISED SYSTEMS — RB-C equipment cards. These extremely dense
   product cards were squeezed into a multi-column layout, producing a
   ragged, cramped, uneven-height mess. Force each one FULL-WIDTH (one per
   row) so its spec grid, component grids and instrumentation table lay
   out properly inside. Covers grid / flex / multi-column parents.
   ===================================================================== */
body.is-containerized .container > .product-card {
  width: 100% !important;
  display: block !important;
  grid-column: 1 / -1 !important;   /* if parent is a grid */
  column-span: all !important;      /* if parent is multi-column */
  float: none !important;
  margin: 0 0 1.75rem 0 !important;
}
/* Neutralise any multi-column / flex on the container holding them. */
body.is-containerized .container:has(> .product-card) {
  display: block !important;
  column-count: 1 !important;
}

/* =====================================================================
   EQUIPMENT CARDS (metro-tunneling & similar) — make the WHOLE card a
   link to its relevant page, not just the title text. Uses a stretched
   "::after" overlay on the existing per-card title link, so each card
   keeps its own correct target with no markup change.
   ===================================================================== */
.equipment-card {
  position: relative;
  cursor: pointer;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.equipment-card h3 a {
  color: #0a2540;
  text-decoration: none;
}
.equipment-card h3 a::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
}
.equipment-card:hover {
  transform: translateY(-4px);
  border-color: #0066cc;
  box-shadow: 0 4px 14px rgba(10, 37, 64, 0.05);
}
.equipment-card:hover h3 a { color: #0066cc; }
/* keep the benefit tag visually above the overlay (still not a separate link) */
.equipment-card .benefit-tag { position: relative; z-index: 0; }

/* =====================================================================
   CFD / diagram placeholders (.diagram-placeholder) — engraved (carved-in)
   recessed panel instead of the flat dashed box.
   ===================================================================== */
.diagram-placeholder {
  background: #e9eef5 !important;
  border: none !important;
  border-radius: 14px !important;
  box-shadow: 0 4px 14px rgba(10, 37, 64, 0.05) !important;
}
.diagram-placeholder i { color: #0066cc !important; }
.diagram-placeholder h4 { color: #0a2540 !important; }
.diagram-placeholder p { color: #41566b !important; }

/* =====================================================================
   Buttons on the DARK photo hero (section.hero-bg) — keep all button text
   white. The sitewide light-hero rule turned .btn-secondary into a
   white-bg/blue-text button, which reads as blue text on the dark hero.
   Here it becomes a white outline button; primary + pdf stay white text.
   ===================================================================== */
section.hero-bg .btn-secondary {
  background: transparent !important;
  color: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.6) !important;
}
section.hero-bg .btn-secondary:hover {
  background: rgba(255, 255, 255, 0.14) !important;
  color: #ffffff !important;
  border-color: #ffffff !important;
}
section.hero-bg .btn-primary,
section.hero-bg .btn-primary:hover {
  color: #ffffff !important;
}
section.hero-bg .pdf-download,
section.hero-bg .pdf-download:link,
section.hero-bg .pdf-download:visited,
section.hero-bg .pdf-download:hover {
  color: #ffffff !important;
}
section.hero-bg .pdf-download i { color: #ffffff !important; }

/* =====================================================================
   SITEWIDE: WHITE TEXT ON DARK BACKGROUNDS (including buttons)
   Dark background utility containers force their text white, then any
   NESTED LIGHT surface (white/light cards, tables, calc boxes) restores
   dark text so we never get white-on-white. Glass components handled
   elsewhere (benefits-section, hero-bg) are intentionally excluded here.
   ===================================================================== */

/* 1) The dark container itself + its own text elements → white. */
:is(.bg-navy, .bg-navy-gradient, .bg-gradient-navy, .bg-gradient-navy-dark,
    .bg-gold-navy, .bg-primary, .bg-sky, .bg-gradient-sky, .bg-gradient-blue,
    .bg-gradient-green, .bg-gradient-teal, .bg-gradient-purple,
    .bg-gradient-red, .bg-gradient-orange, .section-gradient-dark) {
  color: #ffffff !important;
}
:is(.bg-navy, .bg-navy-gradient, .bg-gradient-navy, .bg-gradient-navy-dark,
    .bg-gold-navy, .bg-primary, .bg-sky, .bg-gradient-sky, .bg-gradient-blue,
    .bg-gradient-green, .bg-gradient-teal, .bg-gradient-purple,
    .bg-gradient-red, .bg-gradient-orange, .section-gradient-dark)
  :is(h1, h2, h3, h4, h5, h6, p, li, span, strong, em, small, label,
      blockquote, figcaption, dt, dd, .section-title, .section-subtitle,
      .section-label, .lead, .eyebrow) {
  color: #ffffff !important;
}

/* 2) Plain (non-button) links inside dark containers → white. */
:is(.bg-navy, .bg-navy-gradient, .bg-gradient-navy, .bg-gradient-navy-dark,
    .bg-gold-navy, .bg-primary, .bg-sky, .bg-gradient-sky, .bg-gradient-blue,
    .bg-gradient-green, .bg-gradient-teal, .bg-gradient-purple,
    .bg-gradient-red, .bg-gradient-orange, .section-gradient-dark)
  a:not(.btn):not([class*="btn-"]):not(.pt-link):not(.scada-badge) {
  color: #ffffff !important;
}

/* 3) Outline / secondary / text buttons on dark → white outline style.
   Solid buttons (btn-primary, btn-gold) keep their own colours. */
:is(.bg-navy, .bg-navy-gradient, .bg-gradient-navy, .bg-gradient-navy-dark,
    .bg-gold-navy, .bg-primary, .bg-sky, .bg-gradient-sky, .bg-gradient-blue,
    .bg-gradient-green, .bg-gradient-teal, .bg-gradient-purple,
    .bg-gradient-red, .bg-gradient-orange, .section-gradient-dark)
  :is(.btn-secondary, .btn-outline, .btn-outline-light, .btn-text) {
  background: transparent !important;
  color: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.6) !important;
}
:is(.bg-navy, .bg-navy-gradient, .bg-gradient-navy, .bg-gradient-navy-dark,
    .bg-gold-navy, .bg-primary, .bg-sky, .bg-gradient-sky, .bg-gradient-blue,
    .bg-gradient-green, .bg-gradient-teal, .bg-gradient-purple,
    .bg-gradient-red, .bg-gradient-orange, .section-gradient-dark)
  :is(.btn-secondary, .btn-outline, .btn-text):hover {
  background: rgba(255, 255, 255, 0.14) !important;
  color: #ffffff !important;
  border-color: #ffffff !important;
}

/* 4) RESTORE — nested LIGHT surfaces keep dark, readable text. */
:is(.bg-navy, .bg-navy-gradient, .bg-gradient-navy, .bg-gradient-navy-dark,
    .bg-gold-navy, .bg-primary, .bg-sky, .bg-gradient-sky, .bg-gradient-blue,
    .bg-gradient-green, .bg-gradient-teal, .bg-gradient-purple,
    .bg-gradient-red, .bg-gradient-orange, .section-gradient-dark)
  :is(.bg-white, .bg-light, .bg-light-gray, [class*="bg-gradient-light"],
      .table-responsive, .result-card, .calc-box, .stat-box, .spec-box,
      .info-box, .info-box-left, .callout)
  :is(h1, h2, h3, h4, h5, h6) {
  color: #0a2540 !important;
}
:is(.bg-navy, .bg-navy-gradient, .bg-gradient-navy, .bg-gradient-navy-dark,
    .bg-gold-navy, .bg-primary, .bg-sky, .bg-gradient-sky, .bg-gradient-blue,
    .bg-gradient-green, .bg-gradient-teal, .bg-gradient-purple,
    .bg-gradient-red, .bg-gradient-orange, .section-gradient-dark)
  :is(.bg-white, .bg-light, .bg-light-gray, [class*="bg-gradient-light"],
      .table-responsive, .result-card, .calc-box, .stat-box, .spec-box,
      .info-box, .info-box-left, .callout)
  :is(p, li, span, td, th, strong, em, small, dt, dd) {
  color: #41566b !important;
}

/* =====================================================================
   DAIRY/CHEESE PROCESS TRAIN + CASE-STUDY CARDS — these utility classes
   had no CSS, so the steps and cards rendered cramped with no spacing.
   ===================================================================== */
.treatment-train {
  padding: 1.5rem;
}
.train-steps {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 1rem;
}
.train-step {
  min-width: 150px;
  text-align: center;
  padding: 1.25rem 1rem;
  background: linear-gradient(160deg, #ffffff 0%, #eef5fc 100%);
  border: 1px solid #dce6f0;
  border-radius: 14px;
  box-shadow: 0 4px 14px rgba(10, 37, 64, 0.05);
}
.train-step h3 { margin: 0 0 0.35rem; font-size: 1rem; }
.icon-50-blue {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: linear-gradient(135deg, #0a7ce6 0%, #0052a3 100%);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 1.1rem;
  margin: 0 auto 0.5rem;
  box-shadow: 0 4px 14px rgba(10, 37, 64, 0.05);
}
.min-w-150-center { min-width: 150px; text-align: center; }
.text-xs-medium { font-size: 0.8rem; color: #6b7d8f; line-height: 1.5; }

/* Case-study cards */
.case-study-card {
  background: #ffffff;
  border: 1px solid #dce6f0;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 4px 14px rgba(10, 37, 64, 0.05);
}
.case-study-card .card-body-padded { padding: 1.25rem 1.5rem 1.5rem; }
.case-study-card .bg-gradient-navy { padding: 1.1rem 1.5rem; }
.case-study-card .border-top-subtle { border-top: 1px solid #e6ecf2; }

/* =====================================================================
   PHYSICS / SCIENCE CARD GRIDS (coagulation-flocculation,
   physicochemical-treatment) — these cards now display in two columns
   on desktop for a more compact layout, while still stacking cleanly on
   smaller screens.
   ===================================================================== */
.cards-grid-physics {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 1.5rem !important;
}
.cards-grid-physics > .card {
  background: linear-gradient(160deg, #ffffff 0%, #f5f9fd 100%) !important;
  border: 1px solid #dce6f0 !important;
  border-radius: 16px !important;
  box-shadow: 0 4px 14px rgba(10, 37, 64, 0.05) !important;
}
/* The inline-styled Camp-number table: give it the clean data-table look. */
.cards-grid-physics .table-responsive table th {
  background: #0a2540 !important;
  color: #ffffff !important;
}
.cards-grid-physics .table-responsive table td,
.cards-grid-physics .table-responsive table th {
  padding: 0.5rem 0.75rem !important;
  border-bottom: 1px solid #e6ecf2 !important;
}
.cards-grid-physics .table-responsive table tr:nth-child(even) td {
  background: #f5f8fc !important;
}

/* Plant design-build process steps: per-stage "Learn more" link + clickable. */
.process-step { position: relative; }
.process-step .step-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: 0.85rem;
  font-size: 0.85rem;
  font-weight: 600;
  color: #0066cc;
  text-decoration: none;
}
.process-step .step-link::after { content: ''; position: absolute; inset: 0; }
.process-step .step-link i { transition: transform 0.2s; }
.process-step:hover .step-link i { transform: translateX(3px); }

/* =====================================================================
   DAF PROCESS FLOW (physicochemical) — .process-step-box had no styling.
   Render as standard glossy step containers with a blue number badge.
   ===================================================================== */
.process-flow {
  /* Horizontal step row: every step sits side-by-side, wrapping only when
     it truly runs out of width. Applies to .process-step-box AND
     .process-step-card sitewide. */
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 1rem;
  justify-content: center;
  margin-top: 1.5rem;
}
.process-flow > .process-step-card,
.process-flow > .process-step-box,
.process-flow > .process-step {
  max-width: none !important;
}
/* When the flow has inline arrow separators between steps, use a flex row so
   the boxes and arrows align horizontally (a grid would give arrows their own
   column and break the alignment). */
.process-flow:has(> .process-arrow),
.process-flow:has(> i.fa-arrow-right) {
  display: flex !important;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
}
.process-flow:has(> .process-arrow) > .process-step-box,
.process-flow:has(> i.fa-arrow-right) > .process-step-box {
  flex: 1 1 160px;
  max-width: 230px !important;
}
.process-flow > .process-arrow,
.process-flow > i.fa-arrow-right {
  flex: 0 0 auto;
  color: var(--primary-blue);
  font-size: 1rem;
  align-self: center;
}
.process-step-box {
  flex: 1 1 180px;
  max-width: 230px;
  text-align: center;
  padding: 1.5rem 1.1rem;
  background: linear-gradient(160deg, #ffffff 0%, #eef5fc 100%);
  border: 1px solid #dce6f0;
  border-radius: 14px;
  cursor: pointer;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
  box-shadow: 0 4px 14px rgba(10, 37, 64, 0.05);
}
.process-step-box:hover {
  transform: translateY(-4px);
  border-color: #0066cc;
  box-shadow: 0 4px 14px rgba(10, 37, 64, 0.05);
}
.process-step-box .number {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  margin: 0 auto 0.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  color: #ffffff;
  background: linear-gradient(135deg, #0a7ce6 0%, #0052a3 100%);
  box-shadow: 0 4px 14px rgba(10, 37, 64, 0.05);
}
.process-step-box .step-icon { color: #0066cc; font-size: 1.4rem; margin-bottom: 0.5rem; }
.process-step-box h4 { color: #0a2540; margin: 0 0 0.35rem; font-size: 1rem; }
.process-step-box p { color: #6b7d8f; font-size: 0.85rem; line-height: 1.5; margin: 0; }

/* =====================================================================
   FEATURE-CARD-GRID light cards (e.g. desalination "Membrane Protection")
   → standard glossy containers. The dark glass benefits-section variant
   has higher specificity, so this only affects the light grids.
   ===================================================================== */
.feature-card-grid .benefit-card {
  background: linear-gradient(160deg, #ffffff 0%, #eef5fc 100%) !important;
  border: 1px solid #dce6f0 !important;
  border-radius: 16px !important;
  padding: 1.75rem 1.5rem !important;
  text-align: center;
  box-shadow: 0 4px 14px rgba(10, 37, 64, 0.05) !important;
}
.feature-card-grid .benefit-card h3,
.feature-card-grid .benefit-card h4 { color: #0a2540 !important; }
.feature-card-grid .benefit-card p { color: #6b7d8f !important; }
.feature-card-grid .benefit-card .benefit-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  margin: 0 auto 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #eef4fb !important;
  border: 1px solid #dce7f5;
  box-shadow: none;
}
.feature-card-grid .benefit-card .benefit-icon i { color: #0a66c2 !important; }

/* =====================================================================
   DARK photo hero (section.hero-bg) — emphasis text (strong/em/b) inside
   the hero description/content was rendering dark-on-dark and vanishing
   (e.g. the bold lead sentence on water-assessment-stations). Force it
   white so the full description reads.
   ===================================================================== */
section.hero-bg .hero-description strong,
section.hero-bg .hero-description em,
section.hero-bg .hero-description b,
section.hero-bg .hero-description i,
section.hero-bg .hero-content p strong,
section.hero-bg .hero-content p em,
section.hero-bg .hero-content p b,
section.hero-bg .hero-content p i {
  color: #ffffff !important;
}

/* =====================================================================
   .benefit-highlight (e.g. "Blower sizing fundamentals" on
   diffused-aeration-systems) — engraved / carved-in panel.
   ===================================================================== */
.benefit-highlight {
  background: #eef3f9 !important;
  border: none !important;
  border-radius: 14px !important;
  box-shadow: 0 4px 14px rgba(10, 37, 64, 0.05) !important;
}
.benefit-highlight h4 { color: #0a2540 !important; }
.benefit-highlight h4 i { color: #0066cc !important; }
.benefit-highlight p { color: #41566b !important; }

/* =====================================================================
   Card feature lists (.my-1-pl-15-medium, e.g. CFD application cards)
   formatted as a clean blue-marker checklist with comfortable spacing.
   ===================================================================== */
.my-1-pl-15-medium {
  list-style: none !important;
  padding-left: 0 !important;
  margin: 1rem 0 !important;
}
.my-1-pl-15-medium li {
  position: relative;
  padding-left: 1.5rem;
  margin-bottom: 0.5rem;
  font-size: 0.9rem;
  line-height: 1.55;
  color: #41566b;
}
.my-1-pl-15-medium li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 7px;
  height: 7px;
  border-radius: 2px;
  background: linear-gradient(135deg, #0a7ce6, #0052a3);
}

/* =====================================================================
   FOOTER — cleaner, more professional formatting.
   ===================================================================== */
.footer {
  border-top: 3px solid #0066cc;
}
.footer .footer-grid-4 {
  gap: 28px 36px !important;
}
.footer-brand-name {
  color: #ffffff;
  font-size: 1.4rem;
  font-weight: 700;
  margin: 0 0 0.85rem;
  letter-spacing: 0.01em;
}
.footer-brand-name::after {
  content: '';
  display: block;
  width: 48px;
  height: 3px;
  margin-top: 0.6rem;
  border-radius: 2px;
  background: #c9a227;
}
.footer-brand p { line-height: 1.65; }
.footer-brand .phone a { color: #ffffff; }
.footer-column h4 {
  color: #ffffff !important;
  font-size: 0.8rem !important;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding-bottom: 0.6rem;
  margin-bottom: 0.9rem !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}
.footer-links li { margin-bottom: 0.55rem !important; line-height: 1.4; }
.footer-links a {
  color: rgba(255, 255, 255, 0.72) !important;
  font-size: 0.9rem !important;
  text-decoration: none;
  transition: color 0.18s;
}
.footer-links a:hover {
  color: #ffffff !important;
}
.footer-links a strong { color: #c9a227; font-weight: 600; }
.footer-social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 9px;
  margin-right: 0.5rem;
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.85);
  transition: background 0.2s, color 0.2s, transform 0.2s;
}
.footer-social a:hover {
  background: #0066cc;
  color: #ffffff;
  transform: translateY(-2px);
}

/* Footer columns: lay out horizontally and align to the TOP so every
   column's heading starts on the same line. */
.footer .footer-grid-4,
.footer .footer-grid {
  align-items: start !important;
}
.footer-column { align-self: start; }

/* RB-C jump-nav tabs: white font on hover (explicit). */
.jump-nav a:hover,
.jump-nav a:focus {
  background: #0066cc !important;
  color: #ffffff !important;
  border-color: #0066cc !important;
}
.jump-nav a:hover i { color: #ffffff !important; }

/* .btn-solid (e.g. "DAF Sizing Calculator") → solid blue button, white font. */
.btn-solid {
  background: linear-gradient(145deg, #0a7ce6 0%, #0052a3 100%) !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: 8px !important;
  padding: 0.7rem 1.4rem !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  box-shadow: 0 4px 14px rgba(10, 37, 64, 0.05) !important;
}
.btn-solid:hover { background: linear-gradient(145deg, #1488f2 0%, #0a5cb0 100%) !important; color: #ffffff !important; }
.btn-solid, .btn-solid i { color: #ffffff !important; }

/* =====================================================================
   ROI CALCULATORS (roi-chemical-dosing, roi-biogas-yield, …) — these use
   .calculator-panel / .results-panel / .form-control / .result-item
   instead of the .calc-* classes, so extend the body.is-calc soft-UI kit
   to them so they match chemical-dosing-calculator visually.
   ===================================================================== */
body.is-calc .calculator-layout {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 1.75rem;
  align-items: start;
}
@media (max-width: 820px) {
  body.is-calc .calculator-layout { grid-template-columns: 1fr; }
}

/* Input + results panels → flat white corporate cards. */
body.is-calc .calculator-panel,
body.is-calc .results-panel {
  background: #ffffff !important;
  border: 1px solid var(--border-gray, #d1e9e0) !important;
  border-radius: 14px !important;
  padding: 1.75rem 1.875rem !important;
  box-shadow: 0 4px 14px rgba(10, 37, 64, 0.05) !important;
}
body.is-calc .calculator-panel > h3,
body.is-calc .results-panel > h3 { color: #0a2540 !important; margin-top: 0; }
body.is-calc .calculator-panel > h3 i,
body.is-calc .results-panel > h3 i { color: #0066cc !important; }
body.is-calc .form-group label { color: #0a2540 !important; font-weight: 600; }
body.is-calc .form-group .hint { color: #6b7d8f !important; font-size: 0.78rem; }

/* Inputs / selects → flat white field, blue focus ring. */
body.is-calc .form-control,
body.is-calc select.form-control {
  background: #ffffff !important;
  border: 1px solid var(--border-gray, #d1e9e0) !important;
  border-radius: 8px !important;
  color: #1d2b3a !important;
  box-shadow: none !important;
}
body.is-calc .form-control:focus {
  outline: none !important;
  border-color: var(--primary-blue, #0066cc) !important;
  box-shadow: 0 0 0 3px rgba(0, 102, 204, 0.12) !important;
}

/* Result rows → clean, with the headline figures emphasised. */
body.is-calc .result-item {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  padding: 0.6rem 0 !important;
  border-bottom: 1px solid rgba(163, 177, 198, 0.28) !important;
}
body.is-calc .result-label { color: #41566b !important; font-size: 0.9rem; }
body.is-calc .result-value { color: #0a2540 !important; font-weight: 700; }
body.is-calc .result-value.highlight { color: #0066cc !important; }
body.is-calc .result-divider {
  height: 1px;
  background: rgba(163, 177, 198, 0.4);
  margin: 0.6rem 0;
  border: none;
}
/* Submit / calculate button → solid corporate button. */
body.is-calc .calculator-panel button,
body.is-calc button.calc-submit,
body.is-calc .btn-calculate {
  background: var(--primary-blue, #0066cc) !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: 8px !important;
  box-shadow: none !important;
}
body.is-calc .calculator-panel button:hover,
body.is-calc button.calc-submit:hover,
body.is-calc .btn-calculate:hover {
  background: var(--primary-navy, #0a2540) !important;
}

/* =====================================================================
   .single-column-grid benefit cards (e.g. self-cleaning-filters
   "Cost Savings & Benefits") — apply our standard glossy card styling
   and lay them out two-per-row instead of a single stacked column.
   ===================================================================== */
.single-column-grid {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 1.5rem !important;
}
@media (max-width: 760px) {
  .single-column-grid { grid-template-columns: 1fr !important; }
}
.single-column-grid .benefit-card {
  display: flex;
  gap: 1.1rem;
  align-items: flex-start;
  background: linear-gradient(160deg, #ffffff 0%, #eef5fc 100%) !important;
  border: 1px solid #dce6f0 !important;
  border-radius: 16px !important;
  padding: 1.5rem 1.625rem !important;
  box-shadow: 0 4px 14px rgba(10, 37, 64, 0.05) !important;
}
.single-column-grid .benefit-card > i {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
  color: #ffffff !important;
  background: linear-gradient(135deg, #0a7ce6 0%, #0052a3 100%) !important;
  box-shadow: 0 4px 14px rgba(10, 37, 64, 0.05);
}
.single-column-grid .benefit-card h4 { color: #0a2540 !important; margin: 0 0 0.4rem; }
.single-column-grid .benefit-card p { color: #6b7d8f !important; margin: 0; line-height: 1.6; }

/* =====================================================================
   BUTTON HOVER SAFETY NET.
   1) Catalogue solid-fill buttons ("View Full Specifications") fill blue on
      hover, so their text is white.
   2) White outline card buttons ("View Page", "Explore", "View Guide")
      must NEVER go white-on-white: on hover they keep a light surface and
      turn their text BLUE. Hero/CTA secondaries are scoped separately.
   ===================================================================== */
.view-details-btn:hover,
.view-details-btn:hover i,
.view-details-link:hover,
.view-details-link:hover i {
  color: #ffffff !important;
}
.section .btn-secondary:hover,
.section .btn-secondary:hover i,
.section .btn-secondary:hover span,
.card .btn-secondary:hover,
.card .btn-secondary:hover i,
.card .btn-secondary:hover span,
.card-actions .btn-secondary:hover,
.product-table .btn-secondary:hover {
  background: #eef4fb !important;
  color: #0066cc !important;
  border-color: #0066cc !important;
}

/* =====================================================================
   Table wrappers need breathing room below so the next heading/text does
   not sit flush against the table (e.g. case-study CFD modification table).
   ===================================================================== */
.table-responsive,
.table-wrap,
.table-wrapper {
  margin-top: 1rem !important;
  margin-bottom: 2.25rem !important;
}

/* =====================================================================
   UNDERWATER pages — the white industry-tag buttons (.btn-secondary in
   cards, e.g. "Aquaculture", "Reservoir Aeration") stay white on hover
   and turn their font BLUE, rather than filling blue. Higher specificity
   than the global hover safety net so it wins here only.
   ===================================================================== */
body.is-underwater .card .btn-secondary,
body.is-underwater .card-large .btn-secondary {
  background: #ffffff !important;
  color: #0066cc !important;
  border: 1px solid #c7d6e6 !important;
}
body.is-underwater .card .btn-secondary:hover,
body.is-underwater .card-large .btn-secondary:hover,
body.is-underwater .card .btn-secondary:hover i,
body.is-underwater .card-large .btn-secondary:hover i {
  background: #eef4fb !important;
  color: #0052a3 !important;
  border-color: #0066cc !important;
}

/* =====================================================================
   A .calc-box containing a data table was being squeezed into the stacked
   calc-box 2-column grid, so the table overflowed and scrolled. Make any
   calc-box that holds a table span the FULL width, and let the table fit
   the box (smaller font, wrapping cells) so it is fully visible — no
   horizontal scrollbar.
   ===================================================================== */
.calc-box:has(table) {
  grid-column: 1 / -1 !important;
}
.calc-box .table-responsive {
  overflow-x: visible !important;
  margin: 0.75rem 0 0 !important;
}
.calc-box .table-responsive table {
  width: 100% !important;
  min-width: 0 !important;
  font-size: 0.82rem !important;
  table-layout: auto;
}
.calc-box .table-responsive th,
.calc-box .table-responsive td {
  padding: 0.45rem 0.6rem !important;
  white-space: normal !important;
  word-break: normal;
}

/* =====================================================================
   Blue primary buttons must always have white text (never blue-on-blue).
   ===================================================================== */
.btn-primary,
.btn-primary:link,
.btn-primary:visited,
.btn-primary:hover,
.btn-primary:focus,
.btn-primary i {
  color: #ffffff !important;
}

/* =====================================================================
   In the stacked-calc-box auto-grid (a container with 2+ consecutive
   .calc-box children becomes a 2-column grid), a sibling .table-responsive
   was squeezed into one column and clipped. Make any table-responsive (or
   a calc-box holding a table) span the full grid width so the table shows
   in full with no horizontal scrollbar.
   ===================================================================== */
.container:has(> .calc-box + .calc-box) > .table-responsive,
.container:has(> .calc-box + .calc-box) > .calc-box:has(table) {
  grid-column: 1 / -1 !important;
}
.container:has(> .calc-box + .calc-box) > .table-responsive {
  overflow-x: visible !important;
}
.container:has(> .calc-box + .calc-box) > .table-responsive table {
  width: 100% !important;
  min-width: 0 !important;
}

/* =====================================================================
   Customer Hub promo (home page #customer-hub-promo)
   - "Sign in to Customer Hub" (gold) keeps WHITE text on hover.
   - "Request Access" (secondary) shows BLUE text on hover (light fill).
   ===================================================================== */
#customer-hub-promo .btn-gold,
#customer-hub-promo .btn-gold:link,
#customer-hub-promo .btn-gold:visited,
#customer-hub-promo .btn-gold:hover,
#customer-hub-promo .btn-gold:focus,
#customer-hub-promo .btn-gold span,
#customer-hub-promo .btn-gold:hover span {
  color: #ffffff !important;
}
#customer-hub-promo .btn-secondary:hover,
#customer-hub-promo .btn-secondary:hover span,
#customer-hub-promo .btn-secondary:hover i {
  background: #eef4fb !important;
  color: #0066cc !important;
  border-color: #0066cc !important;
}

/* =====================================================================
   HERO FEATURE TILES — keep them consistent when a page gives them long
   descriptions: clamp the text to a few lines and equalise tile heights
   so the hero never looks ragged/cramped (the full detail is on the
   linked page). Applies to all dark photo heroes.
   ===================================================================== */
.hero-features,
.hero .hero-features {
  align-items: stretch;
}
.hero-feature-item {
  display: flex !important;
  flex-direction: column;
}
.hero-feature-item p,
.hero-feature-item p.flex-grow {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-bottom: 0 !important;
}

/* Capability/feature cards whose title is a link → whole card clickable. */
.cards-grid > .card { position: relative; }
.cards-grid > .card > h3 > a { color: #0a2540; text-decoration: none; }
.cards-grid > .card > h3 > a::after { content: ''; position: absolute; inset: 0; }
.cards-grid > .card:hover > h3 > a { color: #0066cc; }

/* Datasheet download button — always white text/icon on the blue button */
a.btn-datasheet,
a.btn-datasheet:link,
a.btn-datasheet:visited,
a.btn-datasheet:hover,
a.btn-datasheet:focus,
.btn-datasheet,
.btn-datasheet i {
  color: #ffffff !important;
}

/* CTA panels are a LIGHT surface in this theme, so their headings/text must be
   dark and visible. A legacy rule sets -webkit-text-fill-color:white on
   .cta-section .section-title (from the old dark CTA), which renders the title
   white-on-light = invisible. Force readable dark text globally. */
.cta-section .section-title,
.cta-section-sludge .section-title {
  color: #0a2540 !important;
  -webkit-text-fill-color: #0a2540 !important;
  background: none !important;
}
.cta-section .section-description,
.cta-section .section-subtitle,
.cta-section-sludge .section-description,
.cta-section-sludge .section-subtitle {
  color: #41566b !important;
  -webkit-text-fill-color: #41566b !important;
}

/* Integration banner — conflicting definitions (light bg vs dark bg + white text)
   left some banners white-on-light = invisible. Force a consistent, readable
   light panel with dark text site-wide. */
.integration-banner {
  background: linear-gradient(135deg, #f0f7ff 0%, #e8f0f8 100%) !important;
  color: #41566b !important;
}
.integration-banner h3,
.integration-banner h3 span {
  color: #0a2540 !important;
  -webkit-text-fill-color: #0a2540 !important;
}
.integration-banner h3 i { color: #1565c0 !important; -webkit-text-fill-color: #1565c0 !important; }
.integration-banner p,
.integration-banner .stat .lbl {
  color: #41566b !important;
  -webkit-text-fill-color: #41566b !important;
}
.integration-banner .stat .num {
  color: #1565c0 !important;
  -webkit-text-fill-color: #1565c0 !important;
  background: none !important;
}

/* =====================================================================
   The gradient sections above are rendered as LIGHT panels by this theme
   (see the .bg-gradient-navy { background: light !important } rule). Any
   content that hard-codes .text-white headings/text inside them would then
   be white-on-light = invisible. Force readable dark text within these
   theme-lightened sections so such pages stay legible. Loaded last, so it
   wins on equal specificity. */
:is(.bg-navy, .bg-dark, .dark-section, .bg-gradient-navy, .bg-gradient-blue,
    .bg-gradient-green, .cta-section-sludge)
  :is(.text-white, .section-title, h1, h2, h3, h4, h5, h6) {
  color: #0a2540 !important;
  -webkit-text-fill-color: #0a2540 !important;
}
:is(.bg-navy, .bg-dark, .dark-section, .bg-gradient-navy, .bg-gradient-blue,
    .bg-gradient-green, .cta-section-sludge)
  :is(p, li, span):not(.section-label):not(.btn):not([class*="btn-"]) {
  color: #41566b !important;
  -webkit-text-fill-color: #41566b !important;
}

/* .cta-visual is a self-contained DARK navy panel (it sets its own navy gradient
   background, which the theme does NOT lighten). The theme's light-CTA rules
   (.cta-section h2/p/a { dark !important }) would otherwise paint dark text on
   that dark panel = invisible. Restore the intended light text within it. */
.cta-visual h1, .cta-visual h2, .cta-visual h3, .cta-visual h4, .cta-visual h5, .cta-visual h6,
.cta-section .cta-visual h1, .cta-section .cta-visual h2, .cta-section .cta-visual h3 {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}
.cta-visual p, .cta-visual li, .cta-visual span,
.cta-section .cta-visual p {
  color: rgba(255, 255, 255, 0.88) !important;
  -webkit-text-fill-color: rgba(255, 255, 255, 0.88) !important;
}
.cta-visual a:not(.btn), .cta-visual .cta-tools a,
.cta-section .cta-visual a:not(.btn), .cta-section .cta-visual .cta-tools a {
  color: var(--accent-gold) !important;
  -webkit-text-fill-color: var(--accent-gold) !important;
}
.cta-visual .cta-icon { color: var(--accent-gold) !important; -webkit-text-fill-color: var(--accent-gold) !important; }

/* The global ".card ul li" rule (specificity 0,1,2) overrides the padding-left
   that .my-1-pl-15-medium li needs, so its absolute gradient bullet (left:0)
   overlapped the first letter of each line. Restore the indent with a higher-
   specificity selector. */
.card ul.my-1-pl-15-medium li,
ul.my-1-pl-15-medium li {
  display: block;
  padding-top: 0.1rem;
  padding-bottom: 0.1rem;
  padding-left: 1.5rem;
}

/* Download / datasheet buttons must read as solid BLUE buttons with WHITE text.
   (.doc-download had a light background with blue text; .pdf-download/.btn-datasheet
   are dark — force white text + icon on all of them, and give the light one a
   solid blue fill so the white text is readable.) */
.doc-download, .pdf-download, .datasheet-download, .btn-datasheet, .download-btn,
.doc-download:link, .doc-download:visited, .pdf-download:link, .pdf-download:visited {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}
.doc-download i, .pdf-download i, .datasheet-download i, .btn-datasheet i, .download-btn i {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}
.doc-download {
  background: var(--primary-blue) !important;
  border-color: var(--primary-blue) !important;
}
.doc-download:hover, .pdf-download:hover, .datasheet-download:hover, .btn-datasheet:hover, .download-btn:hover {
  background: var(--primary-navy) !important;
  color: #ffffff !important;
}

/* =====================================================================
   CORPORATE FLATTENING PASS (sitewide)  [loads last → wins]
   Removes neumorphic carved-in shadows, frosted-glass blur, icon glow,
   gradient title bars and heavy hover motion from container components.
   Result: flat white surface · hairline border · subtle drop shadow ·
   calm 2px hover lift with a blue border highlight.
   ===================================================================== */

/* ---- Card / box / panel surfaces ---------------------------------- */
.card,
.feature-card:not(.hab-phase),
.benefit-card,
.parameter-card,
.standard-card,
.standard-region-card,
.industry-card,
.application-card,
.service-card,
.solution-card,
.software-card,
.resource-card,
.case-study-card,
.product-card,
.product-tile,
.step-card,
.system-cta-card,
.bespoke-solution-card,
.result-card,
.kpi-card,
.stat-box,
.calc-box,
.calculator-panel,
.results-panel,
.calc-container,
.daf-calc-container,
.info-box,
.note-box,
.callout,
.highlight-box,
.key-insight,
.feature-highlight,
.benefit-highlight,
.industry-deep-dive,
.challenge-list,
.compliance-note,
.eq-lib-cat {
  background: #ffffff !important;
  border: 1px solid var(--border-gray, #d1e9e0) !important;
  border-radius: 12px !important;
  box-shadow: 0 4px 14px rgba(10, 37, 64, 0.05) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* Accent boxes keep a coloured left rail but on a flat white surface */
.callout,
.note-box,
.info-box,
.highlight-box,
.key-insight,
.feature-highlight,
.benefit-highlight,
.compliance-note {
  border-left: 4px solid var(--primary-blue, #0066cc) !important;
}

/* ---- Calm, uniform hover ------------------------------------------ */
.card:hover,
.feature-card:not(.hab-phase):hover,
.benefit-card:hover,
.parameter-card:hover,
.standard-card:hover,
.standard-region-card:hover,
.industry-card:hover,
.application-card:hover,
.service-card:hover,
.solution-card:hover,
.software-card:hover,
.resource-card:hover,
.case-study-card:hover,
.product-card:hover,
.product-tile:hover,
.step-card:hover,
.bespoke-solution-card:hover,
.result-card:hover {
  transform: translateY(-3px) !important;
  border-color: var(--primary-blue, #0066cc) !important;
  box-shadow: 0 12px 26px rgba(10, 37, 64, 0.1) !important;
}

/* ---- Kill decorative overlays / glow ------------------------------ */
.feature-card::after,
.benefit-card::after,
.product-tile::after,
.card::after {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.benefit-icon,
.feature-card .icon-circle i,
.feature-card .icon-box i,
.feature-card .card-icon,
.card-icon i {
  text-shadow: none !important;
  filter: none !important;
}

/* ---- Form fields: flat, not carved-in ----------------------------- */
.form-control,
.calc-field input,
.calc-field select,
.daf-calc-field input,
.daf-calc-field select,
.subscribe-banner input,
.subscribe-form input {
  background: #ffffff !important;
  border: 1px solid var(--border-gray, #d1e9e0) !important;
  box-shadow: none !important;
  border-radius: 8px !important;
}
.form-control:focus,
.calc-field input:focus,
.calc-field select:focus,
.daf-calc-field input:focus,
.daf-calc-field select:focus {
  border-color: var(--primary-blue, #0066cc) !important;
  box-shadow: 0 0 0 3px rgba(0, 102, 204, 0.12) !important;
}

/* =====================================================================
   STACKED TEXT-BOX → 2-COLUMN (sitewide)  [loads last]
   Stops long vertical single-column runs of callout/spec boxes. Any
   .container holding 3+ sibling text boxes of the same type lays them
   out 2-up (2×N). Uses :has() — modern browsers; legacy keeps stacking.
   Also stabilises the auto-fit "grid-auto-*" feature grids to >=2 cols.
   ===================================================================== */
@supports selector(:has(*)) {
  .container:has(> .benefit-highlight + .benefit-highlight),
  .container:has(> .feature-highlight + .feature-highlight),
  .container:has(> .solution-box + .solution-box),
  .container:has(> .challenge-box + .challenge-box),
  .container:has(> .info-box + .info-box) {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.25rem;
    align-items: start;
  }
  /* headers / intro paragraphs span both columns */
  .container:has(> .benefit-highlight + .benefit-highlight) > .section-header,
  .container:has(> .feature-highlight + .feature-highlight) > .section-header,
  .container:has(> .solution-box + .solution-box) > .section-header,
  .container:has(> .challenge-box + .challenge-box) > .section-header,
  .container:has(> .info-box + .info-box) > .section-header,
  .container:has(> .benefit-highlight + .benefit-highlight) > h2,
  .container:has(> .feature-highlight + .feature-highlight) > h2,
  .container:has(> .solution-box + .solution-box) > h2,
  .container:has(> .challenge-box + .challenge-box) > h2,
  .container:has(> .benefit-highlight + .benefit-highlight) > p:not([class*="box"]),
  .container:has(> .feature-highlight + .feature-highlight) > p:not([class*="box"]),
  .container:has(> .solution-box + .solution-box) > p:not([class*="box"]),
  .container:has(> .challenge-box + .challenge-box) > p:not([class*="box"]) {
    grid-column: 1 / -1;
  }
}
/* The auto-fit "grid-auto-*" feature grids (e.g. daf-unit, gac-filter)
   must hold at least 2 columns rather than collapsing to one tall column. */
.grid-auto-250,
.grid-auto-260-14,
.grid-auto-280,
.grid-auto-280-15,
.grid-auto-300,
.grid-auto-300-14,
.grid-auto-320 {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}
@media (max-width: 640px) {
  .container:has(> .benefit-highlight + .benefit-highlight),
  .container:has(> .feature-highlight + .feature-highlight),
  .container:has(> .solution-box + .solution-box),
  .container:has(> .challenge-box + .challenge-box),
  .container:has(> .info-box + .info-box),
  .grid-auto-250, .grid-auto-260-14, .grid-auto-280, .grid-auto-280-15,
  .grid-auto-300, .grid-auto-300-14, .grid-auto-320 {
    grid-template-columns: 1fr !important;
  }
}