/* ===== main.css ===== */
@charset "UTF-8";
/* ============================================
   SOURCE: css/styles.css
   ============================================ */

/* Reynolds & Bauhm - Corporate Stylesheet */

/* ============================================
   CSS VARIABLES
   ============================================ */
:root {
    --primary-navy: #0a2540;
    --primary-blue: #0066cc;
    --primary-light: #e8f4fc;
    --secondary-gray: #5a6c7d;
    --light-gray: #f5f7fa;
    --border-gray: #d1e9e0;
    --text-dark: #1a2b3c;
    --text-medium: #4a5568;
    --text-light: #627282;
    --accent-gold: #c9a227;
    --success-green: #059669;
    --success-light: #d1fae5;
    --warning-orange: #f97316;
    --white: #ffffff;
    /* Aliases used in inline page styles */
    --primary: var(--primary-blue);
    --primary-dark: var(--primary-navy);
    --light-blue: var(--primary-light);
    --bg-light: var(--light-gray);
    --bg-white: var(--white);
    
    --font-primary: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --section-padding: 48px;
    --container-max: 1200px;
    
    /* Z-index scale for consistent layering */
    --z-header: 100;
    --z-overlay: 998;
    --z-nav-mobile: 999;
    --z-menu-toggle: 1000;
    
    --shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
    --shadow-md: 0 4px 6px -1px rgba(0,0,0,0.1);
    --shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.1);
    
    --transition-fast: 0.15s ease;
    --transition-base: 0.25s ease;
}

/* ============================================
   RESET & BASE STYLES
   ============================================ */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
    font-size: 16px;
}

body {
    font-family: var(--font-primary);
    font-size: 16px;
    line-height: 1.6;
    color: var(--text-dark);
    background-color: var(--white);
    -webkit-font-smoothing: antialiased;
    /* scrollbar-gutter removed for better cross-browser compatibility */
}

/* Prevent horizontal scroll without clipping dropdowns */
html, body {
    max-width: 100%;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

a {
    text-decoration: none;
    color: var(--primary-blue);
    transition: color var(--transition-fast);
}

a:hover {
    color: var(--primary-navy);
}

ul, ol {
    list-style: none;
}

/* ============================================
   TYPOGRAPHY
   ============================================ */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-primary);
    font-weight: 600;
    line-height: 1.3;
    color: var(--primary-navy);
    margin-bottom: 1rem;
}

h1 { font-size: 2.5rem; }
h2 { font-size: 2rem; }
h3 { font-size: 1.5rem; }
h4 { font-size: 1.25rem; }

p {
    margin-bottom: 1rem;
    color: var(--text-medium);
}

.lead {
    font-size: 1.25rem;
    color: var(--text-medium);
}

.text-center { text-align: center; }

/* ============================================
   LAYOUT - CONTAINER
   ============================================ */
.container {
    width: 100%;
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 24px;
    box-sizing: border-box;
}

/* ============================================
   HEADER
   ============================================ */
.header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    background: var(--white);
    border-bottom: 1px solid var(--border-gray);
    z-index: var(--z-header);
    height: 60px;
    width: 100%;
    transform: translateZ(0);
    will-change: transform;
    backface-visibility: hidden;
}

.header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 60px;
    width: 100%;
}

.logo {
    display: flex;
    align-items: center;
    height: 100%;
}

.logo img {
    max-height: 44px;
    width: auto;
    object-fit: contain;
}

.logo-text {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--primary-navy);
}

.logo-text span {
    color: var(--primary-blue);
}

/* Navigation */
.nav {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
    margin-left: auto;
}

@media (max-width: 1024px) {
    .nav {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    .nav::-webkit-scrollbar {
        display: none;
    }
}

.nav-item {
    position: relative;
    display: flex;
    align-items: center;
}

.nav-link {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text-dark);
    background: none;
    border: none;
    cursor: pointer;
    border-radius: 6px;
    transition: background-color var(--transition-fast), color var(--transition-fast);
    white-space: nowrap;
}

.nav-link:hover {
    background: var(--light-gray);
    color: var(--primary-navy);
}

.nav-link i {
    font-size: 0.75rem;
}

/* Dropdown Menu */
.dropdown {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    min-width: 260px;
    width: max-content;
    max-width: 340px;
    background: var(--white);
    border: 1px solid var(--border-gray);
    border-radius: 8px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.2), 0 4px 12px rgba(0,0,0,0.1);
    padding: 8px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-5px);
    transition: opacity 0.2s ease, visibility 0.2s ease, transform 0.2s ease;
    z-index: 99999;
}

/* Dropdown arrow pointer */
.dropdown::before {
    content: '';
    position: absolute;
    top: -7px;
    left: 25px;
    width: 14px;
    height: 14px;
    background: var(--white);
    border-left: 1px solid var(--border-gray);
    border-top: 1px solid var(--border-gray);
    transform: rotate(45deg);
    z-index: 1;
}

.nav-item:hover .dropdown,
.nav-item:focus-within .dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* Keep dropdown visible when hovering over it */
.dropdown:hover {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.dropdown-link {
    display: block;
    padding: 10px 16px;
    font-size: 0.875rem;
    color: var(--text-dark);
    border-radius: 6px;
    transition: transform var(--transition-fast), opacity var(--transition-fast), box-shadow var(--transition-fast), color var(--transition-fast), background-color var(--transition-fast), border-color var(--transition-fast), filter var(--transition-fast);
}

.dropdown-link:hover {
    background: var(--light-gray);
    color: var(--primary-navy);
}

/* Mobile Menu Toggle */
.menu-toggle {
    display: none;
    flex-direction: column;
    gap: 5px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 8px;
    position: relative;
    z-index: 1000;
}

.menu-toggle span {
    display: block;
    width: 24px;
    height: 2px;
    background: var(--text-dark);
    transition: transform 0.3s, opacity 0.3s, box-shadow 0.3s, color 0.3s, background-color 0.3s, border-color 0.3s, filter 0.3s ease;
}

/* ============================================
   HERO SECTION
   ============================================ */
.hero {
    padding: 120px 0 80px;
    background: linear-gradient(135deg, var(--primary-navy) 0%, #0d3a5c 100%);
    color: var(--white);
    position: relative;
}

.page-header {
    padding: 90px 0 60px;
    background: linear-gradient(135deg, var(--primary-navy) 0%, #0d3a5c 100%);
    color: var(--white);
}

.page-header h1 {
    color: var(--white);
    font-size: 2.5rem;
    margin-bottom: 1rem;
}

.page-header p {
    color: rgba(255,255,255,0.85);
    font-size: 1.125rem;
    max-width: 700px;
}

.page-header .breadcrumbs a,
.page-header .breadcrumbs span {
    color: rgba(255,255,255,0.7);
}

.page-header .breadcrumbs a:hover {
    color: var(--white);
}

.hero-small {
    padding: 100px 0 60px;
}

.hero-content {
    max-width: 800px;
}

.hero-title {
    font-size: 3rem;
    font-weight: 700;
    color: var(--white);
    margin-bottom: 1.5rem;
    line-height: 1.2;
}

.hero-description {
    font-size: 1.25rem;
    color: rgba(255,255,255,0.85);
    margin-bottom: 2rem;
}

.hero-buttons {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

/* Language Selector in Hero */
.hero-language-selector {
    position: absolute;
    top: 90px;
    right: 40px;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(8px);
    padding: 8px 16px;
    border-radius: 24px;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.hero-language-selector .lang-icon {
    color: rgba(255, 255, 255, 0.8);
    font-size: 0.875rem;
}

.hero-language-selector .lang-options {
    display: flex;
    gap: 0.75rem;
}

.hero-language-selector .lang-option {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.8125rem;
    font-weight: 500;
    cursor: default;
    transition: color 0.2s ease;
}

.hero-language-selector .lang-option:hover {
    color: var(--white);
}

.hero-language-selector .lang-option.active {
    color: var(--white);
    font-weight: 600;
}

.hero-language-selector .lang-divider {
    color: rgba(255, 255, 255, 0.3);
    font-size: 0.75rem;
}


/* Card icons: match index page icon-2x styling (2rem, blue, spaced) */
.card-icon {
    color: var(--primary-blue);
    font-size: 2rem;
    margin-bottom: 1rem;
    display: block;
    line-height: 1;
}
.card-icon i {
    color: var(--primary-blue);
    font-size: inherit;
}

/* Card lists: clean formatting for icon/checkmark lists */
.card ul {
    list-style: none;
    padding: 0;
    margin: 1rem 0 0;
}

.card ul li {
    padding: 0.35rem 0;
    color: var(--text-medium);
    font-size: 0.9375rem;
    display: flex;
    align-items: flex-start;
    gap: 8px;
}

.card ul li i {
    margin-top: 0.2rem;
    flex-shrink: 0;
}

/* Icons inside h3/h4 headings: blue with consistent spacing */
h3 i.fas,
h3 i.far,
h3 i.fab,
h4 i.fas,
h4 i.far,
h4 i.fab {
    color: var(--primary-blue);
    margin-right: 0.5rem;
}

@media (max-width: 768px) {
    .hero-language-selector {
        position: relative;
        top: auto;
        right: auto;
        margin-top: 1.5rem;
        justify-content: flex-start;
        width: fit-content;
    }
}

/* ============================================
   HERO TRUST BADGES
   ============================================ */
.hero-trust-badges {
    display: flex;
    gap: 1.5rem;
    margin-top: 1.5rem;
    flex-wrap: wrap;
}

.trust-badge {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.85rem;
    color: var(--accent-gold);
}

.trust-badge i {
    color: var(--accent-gold);
}

/* ============================================
   BUTTONS
   ============================================ */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 24px;
    font-size: 0.9375rem;
    font-weight: 500;
    border-radius: 6px;
    cursor: pointer;
    transition: transform var(--transition-fast), opacity var(--transition-fast), box-shadow var(--transition-fast), color var(--transition-fast), background-color var(--transition-fast), border-color var(--transition-fast), filter var(--transition-fast);
    border: none;
}

.btn-primary {
    background: var(--primary-blue);
    color: var(--white);
}

.btn-primary:hover {
    background: #0052a3;
    color: var(--white);
    box-shadow: 0 4px 12px rgba(0, 102, 204, 0.25);
}

.btn-secondary {
    background: var(--white);
    color: var(--primary-blue);
    border: 1px solid var(--primary-blue);
    box-shadow: 0 1px 4px rgba(0, 102, 204, 0.08);
}

.btn-secondary:hover {
    background: var(--primary-blue);
    color: var(--white);
    border-color: var(--primary-blue);
    box-shadow: 0 4px 12px rgba(0, 102, 204, 0.25);
}

/* Dark background sections need ghost button style */
.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: transparent;
    color: var(--white);
    border-color: rgba(255,255,255,0.3);
}

.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: rgba(0, 102, 204, 0.15);
    color: var(--white);
    border-color: rgba(0, 102, 204, 0.5);
}

/* ============================================
   SECTIONS
   ============================================ */
.section {
    padding: var(--section-padding) 0;
}

.section-light {
    background: var(--light-gray);
}

.section-header {
    text-align: center;
    max-width: 700px;
    margin: 0 auto 2rem;
}

.section-label {
    display: inline-block;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--primary-blue);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 1rem;
}

.section-title {
    font-size: 2.25rem;
    font-weight: 700;
    color: var(--primary-navy);
    margin-bottom: 1rem;
}

.section-subtitle {
    font-size: 1.125rem;
    color: var(--text-medium);
}

/* ============================================
   CARDS
   ============================================ */
.cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 14px;
    align-items: stretch;
}

/* Wider grid for cards holding dense technical/physics content.
   Default cards-grid (300px min) is too narrow for 400+ char paragraphs.
   This variant gives 480px min on desktop, falls back to single column
   on small screens, and keeps line lengths in the 55-75 char readability sweet spot. */
.cards-grid-physics,
.cards-grid-wide {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(480px, 1fr));
    gap: 1.25rem;
    align-items: stretch;
}
@media (max-width: 540px) {
    .cards-grid-physics,
    .cards-grid-wide {
        grid-template-columns: 1fr;
    }
}
.cards-grid-physics .card,
.cards-grid-wide .card {
    padding: 1.75rem;
}
.cards-grid-physics .card p,
.cards-grid-wide .card p {
    line-height: 1.7;
    max-width: 65ch;
}

.card {
    background: var(--white);
    border: 1px solid var(--border-gray);
    border-radius: 12px;
    padding: 14px;
    transition: transform var(--transition-base), opacity var(--transition-base), box-shadow var(--transition-base), color var(--transition-base), background-color var(--transition-base), border-color var(--transition-base), filter var(--transition-base);
    display: flex;
    flex-direction: column;
    height: 100%;
    justify-content: flex-start;
}

.card .btn,
.feature-card .btn,
.service-card .btn,
.service-strip-card .btn,
.product-card .btn,
.equipment-card .btn,
.capability-card .btn,
.industry-card .btn,
.application-card .btn,
.solution-type-card .btn,
.standard-card .btn,
.related-card .btn,
.tool-card .btn,
.source-card .btn,
.instrument-card .btn,
.step-card .btn,
.tech-card .btn,
.bundle-card .btn,
.location-card .btn,
.process-step .btn,
.service-card-pilot .btn {
    margin-top: auto;
    align-self: flex-start;
}

.card:hover {
    box-shadow: var(--shadow-lg);
    transform: translateY(-2px);
}

.card h3 {
    font-size: 1.25rem;
    margin-bottom: 0.35rem;
    font-weight: 700;
    line-height: 1.3;
    display: flex;
    align-items: flex-end;
}

.card p {
    font-size: 0.9375rem;
    margin-bottom: 1rem;
}

.card .btn {
    margin-top: auto;
}

.card-large {
    padding: 20px;
}

/* ============================================
   STATS
   ============================================ */
.stats-bar {
    background: var(--primary-navy);
    padding: 40px 0;
    color: var(--white);
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 32px;
}

.stat-item {
    text-align: center;
}

.stat-value {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--white);
    margin-bottom: 0.25rem;
}

.stat-label {
    font-size: 0.875rem;
    color: rgba(255,255,255,0.7);
}

.stat-card {
    text-align: center;
    padding: 24px;
}

.stat-number {
    font-size: 3rem;
    font-weight: 700;
    color: var(--primary-blue);
    margin-bottom: 0.5rem;
}

.stat-number-small {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--accent-gold);
}

/* ============================================
   FEATURE LIST
   ============================================ */
.feature-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 16px;
}

.feature-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: var(--white);
    border-radius: 8px;
    border: 1px solid var(--border-gray);
    transition: transform 0.25s ease, opacity 0.25s ease, box-shadow 0.25s ease, color 0.25s ease, background-color 0.25s ease, border-color 0.25s ease, filter 0.25s ease;
    cursor: pointer;
}

.feature-item:hover {
    background: var(--primary-light);
    border-color: var(--primary-blue);
    box-shadow: 0 4px 12px rgba(0, 102, 204, 0.15);
    transform: translateY(-2px);
}

.feature-item i {
    color: var(--success-green);
    font-size: 1.25rem;
}

/* ============================================
   SPECS
   ============================================ */
.specs-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 24px;
}

.spec-card {
    background: var(--white);
    border: 1px solid var(--border-gray);
    border-radius: 8px;
    padding: 20px;
    text-align: center;
}

.spec-label {
    font-size: 0.875rem;
    color: var(--text-light);
    margin-bottom: 0.5rem;
}

.spec-value {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--primary-navy);
}

/* ============================================
   PROCESS STEPS
   ============================================ */
.process-steps {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 32px;
}

.process-step {
    text-align: center;
    padding: 24px;
    display: flex;
    flex-direction: column;
    opacity: 0;
    transform: translateY(30px);
    transition: transform 0.55s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.55s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.55s cubic-bezier(0.4, 0, 0.2, 1), color 0.55s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.55s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.55s cubic-bezier(0.4, 0, 0.2, 1), filter 0.55s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    z-index: 1;
}

.process-step.visible {
    opacity: 1;
    transform: translateY(0);
}

.process-step.visible:nth-child(1) { transition-delay: 0s; }
.process-step.visible:nth-child(2) { transition-delay: 0.12s; }
.process-step.visible:nth-child(3) { transition-delay: 0.24s; }
.process-step.visible:nth-child(4) { transition-delay: 0.36s; }
.process-step.visible:nth-child(5) { transition-delay: 0.48s; }
.process-step.visible:nth-child(6) { transition-delay: 0.6s; }

.process-step .btn {
    margin-top: auto;
}

.process-step h3 {
    font-weight: 700;
    line-height: 1.3;
    min-height: 2.8rem;
    display: flex;
    align-items: flex-end;
    justify-content: center;
}

.step-number {
    width: 56px;
    height: 56px;
    background: linear-gradient(135deg, var(--primary-blue) 0%, #0068b8 100%);
    color: var(--white);
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    font-weight: 700;
    margin: 0 auto 1.25rem;
    box-shadow: 0 4px 16px rgba(0, 82, 155, 0.25);
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.4s cubic-bezier(0.4, 0, 0.2, 1), color 0.4s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.4s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.4s cubic-bezier(0.4, 0, 0.2, 1), filter 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    z-index: 2;
}

.process-step:hover .step-number {
    background: linear-gradient(135deg, var(--accent-gold) 0%, #d4a83a 100%);
    color: var(--primary-navy);
    transform: scale(1.12) rotate(-3deg);
    box-shadow: 0 8px 24px rgba(201, 162, 39, 0.35);
}

/* Horizontal connecting line between steps */
.process-steps {
    position: relative;
}

.process-steps::before {
    content: '';
    position: absolute;
    top: 30px;
    left: calc(10% + 28px);
    right: calc(10% + 28px);
    height: 2px;
    background: linear-gradient(90deg, var(--primary-blue), var(--accent-gold));
    z-index: 0;
    opacity: 0.35;
}

/* ============================================
   PROCESS STEP INTERACTIVE ENHANCEMENTS
   ============================================ */

/* 1. Active step highlighting — hovered step pops, siblings dim */
.process-steps:has(.process-step:hover) .process-step {
    opacity: 0.5;
    filter: grayscale(0.3);
    transition: transform 0.35s ease, opacity 0.35s ease, box-shadow 0.35s ease, color 0.35s ease, background-color 0.35s ease, border-color 0.35s ease, filter 0.35s ease;
}
.process-steps:has(.process-step:hover) .process-step:hover {
    opacity: 1;
    filter: grayscale(0);
    transform: translateY(-8px);
}
.process-step.visible:hover {
    transform: translateY(-8px);
}

/* 2. Pulse animation on step numbers to draw attention */
@keyframes stepPulse {
    0%, 100% { box-shadow: 0 4px 16px rgba(0, 82, 155, 0.25); }
    50% { box-shadow: 0 4px 24px rgba(0, 82, 155, 0.45), 0 0 0 6px rgba(0, 82, 155, 0.08); }
}
.step-number {
    animation: stepPulse 3s ease-in-out infinite;
}
.process-step:nth-child(2) .step-number { animation-delay: 0.4s; }
.process-step:nth-child(3) .step-number { animation-delay: 0.8s; }
.process-step:nth-child(4) .step-number { animation-delay: 1.2s; }
.process-step:nth-child(5) .step-number { animation-delay: 1.6s; }
.process-step:nth-child(6) .step-number { animation-delay: 2.0s; }

/* Pause pulse on hover */
.process-steps:hover .step-number {
    animation-play-state: paused;
}

/* 3. Step card background highlight on hover */
.process-step {
    border-radius: 14px;
    border: 1px solid transparent;
    background: var(--white);
}
.process-step.visible:hover {
    border-color: var(--primary-blue);
    box-shadow: 0 12px 40px rgba(0, 82, 155, 0.12);
}

/* 4. Step connector dot animation */
.process-step::after {
    content: '';
    position: absolute;
    top: 28px;
    left: 50%;
    transform: translateX(-50%) scale(0);
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--accent-gold);
    z-index: 3;
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.process-step.visible:hover::after {
    transform: translateX(-50%) scale(1);
}

/* 5. Step title color transition on hover */
.process-step h3 {
    transition: color 0.3s ease;
}
.process-step.visible:hover h3 {
    color: var(--primary-blue);
}

/* Responsive: hide connecting line on mobile */
@media (max-width: 768px) {
    .process-steps::before { display: none; }
    .step-number {
        width: 48px;
        height: 48px;
        font-size: 1.15rem;
    }
    .process-steps:has(.process-step:hover) .process-step {
        opacity: 1;
        filter: none;
    }
    .process-step::after { display: none; }
}

/* ============================================
   CTA SECTION
   ============================================ */
.cta-section {
    background: 
        radial-gradient(ellipse at 15% 50%, rgba(0, 119, 204, 0.18) 0%, transparent 55%),
        radial-gradient(ellipse at 85% 20%, rgba(201, 162, 39, 0.1) 0%, transparent 45%),
        linear-gradient(135deg, #061726 0%, #0a2540 35%, #0d3b66 70%, #0a4a8a 100%);
    padding: 60px 0;
    color: var(--white);
    position: relative;
    overflow: hidden;
}
.cta-section::before {
    content: '';
    position: absolute;
    top: -60%;
    right: -15%;
    width: 700px;
    height: 700px;
    background: radial-gradient(circle, rgba(255,255,255,0.035) 0%, transparent 70%);
    border-radius: 50%;
    pointer-events: none;
}

.cta-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
    flex-wrap: wrap;
}

.cta-text {
    flex: 1;
    min-width: 300px;
}

.cta-text h2 {
    color: var(--white);
    margin-bottom: 0.5rem;
}

.cta-text p {
    color: rgba(255,255,255,0.8);
    margin-bottom: 0;
}

.cta-buttons {
    display: flex;
    gap: 1rem;
}

/* ============================================
   FOOTER
   ============================================ */
.footer {
    background: var(--primary-navy);
    padding: 60px 0 0;
    color: var(--white);
}

.footer-grid,
.footer-grid-4 {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr 1fr 1fr 1fr;
    gap: 24px;
    margin-bottom: 40px;
}

.footer-brand h3 {
    color: var(--white);
    font-size: 1.5rem;
    margin-bottom: 1rem;
}

.footer-brand p {
    color: rgba(255,255,255,0.7);
    font-size: 0.9375rem;
}

.footer-brand .locations {
    margin-top: 1rem;
    font-weight: 500;
}

.footer-brand .phone {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--white);
}

.footer-column h4 {
    color: var(--white);
    font-size: 1rem;
    margin-bottom: 1rem;
}

.footer-links li {
    margin-bottom: 0.5rem;
}

.footer-links a {
    color: rgba(255,255,255,0.7);
    font-size: 0.9375rem;
}

.footer-links a:hover {
    color: var(--white);
}

.footer-newsletter {
    margin-top: 1.5rem;
}

.footer-newsletter h4 {
    margin-bottom: 0.75rem;
}

.newsletter-form {
    display: flex;
    gap: 8px;
}

.newsletter-form input {
    flex: 1;
    padding: 10px 12px;
    border: 1px solid rgba(255,255,255,0.2);
    border-radius: 6px;
    background: rgba(255,255,255,0.1);
    color: var(--white);
    font-size: 0.875rem;
}

.newsletter-form input::placeholder {
    color: rgba(255,255,255,0.5);
}

.newsletter-form button {
    padding: 10px 16px;
    background: var(--primary-blue);
    color: var(--white);
    border: none;
    border-radius: 6px;
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
}

.footer-bottom {
    border-top: 1px solid rgba(255,255,255,0.1);
    padding: 20px 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
}

.footer-bottom p {
    color: rgba(255,255,255,0.6);
    font-size: 0.875rem;
    margin-bottom: 0;
}

.footer-bottom-links {
    display: flex;
    gap: 24px;
}

.footer-bottom-links a {
    color: rgba(255,255,255,0.6);
    font-size: 0.875rem;
}

.footer-bottom-links a:hover {
    color: var(--white);
}

/* ============================================
   PRODUCT CONTENT
   ============================================ */
.product-content {
    max-width: 800px;
    margin: 0 auto;
}

.product-content h2 {
    margin-bottom: 1.5rem;
}

.product-content p {
    margin-bottom: 1rem;
    line-height: 1.7;
}

/* ============================================
   RESPONSIVE
   ============================================ */
@media (max-width: 1024px) {
    .footer-grid,
    .footer-grid-4 {
        grid-template-columns: repeat(3, 1fr);
        gap: 32px;
    }
}

/* Mobile Menu Overlay - only covers left side, menu is on right */
.mobile-menu-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 320px; /* Don't cover the menu area */
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1;
}

.mobile-menu-overlay.active {
    display: block;
}

@media (max-width: 400px) {
    .mobile-menu-overlay {
        right: 80%; /* Match menu width on small screens */
    }
}

@media (max-width: 768px) {
    /* Footer Mobile Fixes */
    .footer {
        padding: 40px 0 0;
    }
    
    .footer-grid,
    .footer-grid-4 {
        grid-template-columns: repeat(2, 1fr);
        gap: 32px;
        margin-bottom: 32px;
    }
    
    .footer-brand {
        grid-column: auto;
        text-align: center;
    }
    
    .footer-column {
        text-align: center;
    }
    
    .footer-column h4 {
        margin-bottom: 1rem;
        font-size: 1.1rem;
    }
    
    .footer-links li {
        margin-bottom: 0.75rem;
    }
    
    .footer-links a {
        display: inline-block;
        padding: 4px 0;
    }
    
    .footer-newsletter {
        margin-top: 1.5rem;
    }
    
    .newsletter-form {
        flex-direction: column;
        gap: 12px;
        max-width: 300px;
        margin: 0 auto;
    }
    
    .newsletter-form input,
    .newsletter-form button {
        width: 100%;
        text-align: center;
    }
    
    .footer-bottom {
        flex-direction: column;
        text-align: center;
        gap: 16px;
        padding: 20px 0;
    }
    
    .footer-bottom-links {
        flex-wrap: wrap;
        justify-content: center;
        gap: 16px 24px;
    }
    
    /* Mobile Menu - Slide from right */
    .nav {
        display: block;
        position: fixed;
        top: 0;
        right: -100%;
        width: 80%;
        max-width: 320px;
        height: 100vh;
        max-height: 100dvh;
        background: rgb(255, 255, 255) !important;
        flex-direction: column;
        padding: 80px 0 40px 0;
        overflow-y: auto;
        overflow-x: hidden;
        -webkit-overflow-scrolling: touch;
        z-index: 9999 !important;
        transition: right 0.3s ease;
        box-shadow: -5px 0 20px rgba(0,0,0,0.2);
        isolation: isolate;
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
    }
    
    .nav.active {
        right: 0;
        pointer-events: auto !important;
    }
    
    .nav-item {
        width: 100%;
        border-bottom: 1px solid #e2e8f0;
        position: relative;
        display: block;
    }
    
    .nav-link {
        padding: 16px 20px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%;
        text-align: left;
        font-size: 1rem;
        background: transparent;
    }
    
    .nav-link i {
        font-size: 1rem;
        padding: 8px;
        margin: -8px;
        transition: transform 0.2s;
    }
    
    .nav-item.active .nav-link i {
        transform: rotate(180deg);
    }
    
    /* Dropdown - Hidden by default on mobile */
    .dropdown {
        display: none !important;
        position: static;
        background: #f1f5f9;
        border: none;
        border-left: 4px solid var(--primary-blue);
        box-shadow: inset 0 2px 4px rgba(0,0,0,0.05);
        padding: 0;
        min-width: auto;
        width: 100%;
        opacity: 1;
        visibility: visible;
        transform: none;
        z-index: auto;
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.3s ease;
    }
    
    /* Remove dropdown arrow on mobile */
    .dropdown::before {
        display: none !important;
    }
    
    /* Show dropdown when parent nav-item has active class */
    .nav-item.active > .dropdown {
        display: block !important;
        max-height: 600px;
        overflow-y: auto;
        padding: 8px 0;
    }
    
    /* Ensure dropdown links are visible */
    .nav-item.active .dropdown-link {
        display: block;
        opacity: 1;
        visibility: visible;
    }
    
    .dropdown-link {
        padding: 14px 20px 14px 40px;
        border-bottom: 1px solid #e2e8f0;
        display: block;
        width: 100%;
        font-size: 0.9rem;
        color: var(--text-dark);
        background: transparent;
        opacity: 1;
        visibility: visible;
    }
    
    .dropdown-link:hover,
    .dropdown-link:active {
        background: #e2e8f0;
        color: var(--primary-navy);
    }
    
    .dropdown-link:last-child {
        border-bottom: none;
    }
    
    .menu-toggle {
        display: flex;
        z-index: 1000;
    }
    
    .menu-toggle span {
        transition: transform 0.3s, opacity 0.3s, box-shadow 0.3s, color 0.3s, background-color 0.3s, border-color 0.3s, filter 0.3s ease;
    }
    
    .menu-toggle.active span:nth-child(1) {
        transform: rotate(45deg) translate(5px, 5px);
    }
    
    .menu-toggle.active span:nth-child(2) {
        opacity: 0;
    }
    
    .menu-toggle.active span:nth-child(3) {
        transform: rotate(-45deg) translate(5px, -5px);
    }
    
    .hero-title {
        font-size: 2rem;
    }
    
    .section-title {
        font-size: 1.75rem;
    }
    
    .cta-content {
        flex-direction: column;
        text-align: center;
    }
    
    .cards-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .cards-grid:has(.benefit-card) {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ============================================
   ANIMATIONS
   ============================================ */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ============================================
   MOBILE HEADER FIXES - Prevent Overlap
   ============================================ */
@media (max-width: 768px) {
    /* Adjust hero sections for smaller header */
    .hero {
        padding: 100px 0 60px;
    }
    
    .page-header {
        padding: 80px 0 40px;
    }
    
    /* Logo sizing for mobile */
    .logo img {
        max-height: 40px;
        width: auto;
    }
}

/* ============================================
   MOBILE FOOTER - SMALL SCREENS
   ============================================ */
@media (max-width: 480px) {
    .footer {
        padding: 32px 0 0;
    }
    
    .footer-grid,
    .footer-grid-4 {
        gap: 24px;
        margin-bottom: 24px;
    }
    
    .footer-brand h3 {
        font-size: 1.25rem;
    }
    
    .footer-brand p {
        font-size: 0.875rem;
    }
    
    .footer-brand .phone {
        font-size: 1.1rem;
    }
    
    .footer-column h4 {
        font-size: 1rem;
        margin-bottom: 0.75rem;
    }
    
    .footer-links a {
        font-size: 0.875rem;
    }
    
    .footer-newsletter h4 {
        font-size: 0.95rem;
    }
    
    .newsletter-form input,
    .newsletter-form button {
        padding: 12px;
        font-size: 1rem;
    }
    
    .footer-bottom {
        padding: 16px 0;
    }
    
    .footer-bottom p {
        font-size: 0.875rem;
    }
    
    .footer-bottom-links {
        gap: 12px 16px;
    }
    
    .footer-bottom-links a {
        font-size: 0.875rem;
    }
}

/* ============================================
   SMALL MOBILE HEADER FIXES (480px and below)
   ============================================ */
@media (max-width: 480px) {
    .header {
        height: 55px;
    }
    
    .header-inner {
        height: 55px;
    }
    
    /* Mobile menu takes full width on very small screens */
    .nav {
        width: 85%;
        max-width: 280px;
        padding-top: 65px;
    }
    
    .nav-link {
        padding: 14px 16px;
        font-size: 0.95rem;
    }
    
    .dropdown-link {
        padding: 12px 16px 12px 32px;
        font-size: 0.875rem;
    }
}

/* ============================================
   LAYOUT STABILITY - Prevent Shifts
   ============================================ */

/* Prevent horizontal scroll and layout shifts */
html, body {
    width: 100%;
    max-width: 100%;
}

/* Prevent horizontal scroll on body without clipping positioned children (dropdowns, tooltips) */
body {
    overflow-x: hidden;
}

/* Reserve space for scrollbar to prevent jumps */
html {
    overflow-y: auto;
}

/* Ensure header stays stable during load - merged into base .header rule */

/* Logo stability */
.logo {
    flex-shrink: 0;
    min-width: fit-content;
}

.logo img {
    display: block;
    max-width: 100%;
}

/* Menu toggle button stability */
.menu-toggle {
    flex-shrink: 0;
}

/* Dropdown stability - prevent shifting */
.nav-item {
    contain: layout style;
}

.dropdown {
    will-change: opacity, visibility, transform;
    contain: layout style;
}

/* Ensure consistent nav positioning */
.header > .container {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}


/* ============================================
   RELATED TOPICS
   ============================================ */
.topics-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 24px;
}

.topic-card {
    background: var(--white);
    border: 1px solid var(--border-gray);
    border-radius: 12px;
    padding: 2rem;
    text-align: center;
    text-decoration: none;
    transition: transform 0.3s, opacity 0.3s, box-shadow 0.3s, color 0.3s, background-color 0.3s, border-color 0.3s, filter 0.3s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.topic-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 25px rgba(0, 102, 204, 0.15);
    border-color: var(--primary-blue);
}

.topic-card i {
    font-size: 2.5rem;
    color: var(--primary-blue);
    margin-bottom: 1rem;
}

.topic-card h3 {
    color: var(--primary-navy);
    margin-bottom: 0.5rem;
    font-size: 1.125rem;
}

.topic-card p {
    color: var(--text-medium);
    font-size: 0.9375rem;
    margin: 0;
}

@media (max-width: 768px) {
    .topics-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}
/* Industry Tags */
/* Industry Tags - Professional Style */
.industry-tags { 
    display: flex; 
    flex-wrap: wrap; 
    gap: 10px; 
    justify-content: center; 
    margin-top: 2rem; 
}
.industry-tag { 
    padding: 8px 18px; 
    background: #f5f7fa; 
    border: 1px solid #e2e8f0;
    border-radius: 20px; 
    font-size: 0.8125rem; 
    font-weight: 500; 
    color: #4a5568; 
    text-decoration: none; 
    transition: transform 0.2s, opacity 0.2s, box-shadow 0.2s, color 0.2s, background-color 0.2s, border-color 0.2s, filter 0.2s ease; 
    display: inline-block;
    letter-spacing: 0.2px;
}
.industry-tag:hover { 
    background: #edf2f7; 
    border-color: #cbd5e0;
    color: #2d3748;
}

/* Data Table (used on compliance/treatment pages) */
.data-table { width: auto; min-width: 100%; border-collapse: collapse; margin: 0; background: var(--white); font-size: 0.875rem; }
.data-table th { background: var(--primary-navy); color: var(--white); padding: 14px 16px; text-align: left; font-size: 0.875rem; }
.data-table td { padding: 14px 16px; border-bottom: 1px solid var(--border-gray); font-size: 0.875rem; }
.data-table tr:nth-child(even) { background: var(--light-gray); }

/* Standards Table (used on global standards reference) */
.standards-table { width: auto; min-width: 100%; border-collapse: collapse; margin: 0; font-size: 0.875rem; }
.standards-table th { background: var(--primary-navy); color: var(--white); padding: 12px 16px; text-align: left; font-weight: 600; }
.standards-table td { padding: 12px 16px; border-bottom: 1px solid var(--border-gray); vertical-align: top; }
.standards-table tr:nth-child(even) { background: var(--light-gray); }
.standards-table tr:hover { background: #e8f4fc; }

/* Comparison Table */
.comparison-table { width: auto; min-width: 100%; border-collapse: collapse; margin: 0; font-size: 0.875rem; }
.comparison-table th { background: var(--primary-navy); color: var(--white); padding: 12px 16px; text-align: left; font-weight: 600; }
.comparison-table td { padding: 12px 16px; border-bottom: 1px solid var(--border-gray); vertical-align: top; }
.comparison-table td:first-child { text-align: left; font-weight: 500; }
.comparison-table tr:nth-child(even) { background: var(--light-gray); }

/* ============================================
   PROFESSIONAL TABLES WITH FRAMES
   ============================================ */

/* Table Responsive Wrapper - Professional Frame */
.table-responsive { 
    width: 100%; 
    max-width: 100%; 
    overflow-x: auto; 
    -webkit-overflow-scrolling: touch; 
    margin: 1.5rem 0; 
    border-radius: 12px; 
    background: var(--white); 
    border: 1px solid var(--border-gray);
    box-shadow: var(--shadow-md);
    display: block;
}

/* Professional Data Table - ALL TABLE TYPES */
.data-table,
.refinery-table,
.standards-table,
.comparison-table,
.specs-table,
.sensor-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    background: var(--white);
    font-size: 0.875rem;
}


/* Tables inside responsive wrapper need min-width to trigger horizontal scroll */
.table-responsive .data-table,
.table-responsive .refinery-table,
.table-responsive .standards-table,
.table-responsive .comparison-table,
.table-responsive .specs-table,
.table-responsive .sensor-table,
.table-responsive table {
    min-width: 600px;
}

/* Tables NOT in responsive wrapper should fit their container naturally */
.refinery-table:not(.table-responsive .refinery-table),
.data-table:not(.table-responsive .data-table),
.standards-table:not(.table-responsive .standards-table),
.comparison-table:not(.table-responsive .comparison-table),
.specs-table:not(.table-responsive .specs-table),
.sensor-table:not(.table-responsive .sensor-table) {
    min-width: auto;
    width: 100%;
}

/* Table Header - Professional Styling */
.data-table thead,
.refinery-table thead,
.standards-table thead,
.comparison-table thead,
.specs-table thead,
.sensor-table thead {
    background: linear-gradient(135deg, var(--primary-navy) 0%, #1a3a5c 100%);
}

.data-table th,
.refinery-table th,
.standards-table th,
.comparison-table th,
.specs-table th,
.sensor-table th {
    padding: 14px 16px;
    text-align: left;
    font-weight: 600;
    color: var(--white);
    border-bottom: 2px solid var(--primary-blue);
    height: auto;
    line-height: 1.4;
}

.refinery-table th a,
.standards-table th a,
.comparison-table th a,
.specs-table th a,
.sensor-table th a {
    color: var(--white);
    text-decoration: underline;
}

/* Table Body */
.data-table td,
.refinery-table td,
.standards-table td,
.comparison-table td,
.specs-table td,
.sensor-table td {
    padding: 12px 16px;
    border-bottom: 1px solid var(--border-gray);
    vertical-align: top;
}

/* Zebra Striping */
.data-table tbody tr:nth-child(even),
.refinery-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: var(--light-gray);
}

/* Row Hover Effect */
.data-table tbody tr:hover,
.refinery-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: var(--primary-light);
    transition: background 0.2s ease;
}

/* First and Last Column Rounded Corners */
.data-table thead th:first-child,
.refinery-table thead th:first-child,
.standards-table thead th:first-child,
.comparison-table thead th:first-child,
.specs-table thead th:first-child,
.sensor-table thead th:first-child {
    border-top-left-radius: 11px;
}

.data-table thead th:last-child,
.refinery-table thead th:last-child,
.standards-table thead th:last-child,
.comparison-table thead th:last-child,
.specs-table thead th:last-child,
.sensor-table thead th:last-child {
    border-top-right-radius: 11px;
}

/* Last Row Bottom Border */
.data-table tbody tr:last-child td,
.refinery-table tbody tr:last-child td,
.standards-table tbody tr:last-child td,
.comparison-table tbody tr:last-child td,
.specs-table tbody tr:last-child td,
.sensor-table tbody tr:last-child td {
    border-bottom: none;
}

/* Highlight Row */
.data-table tbody tr.highlight,
.refinery-table tbody tr.highlight,
.standards-table tbody tr.highlight,
.comparison-table tbody tr.highlight,
.specs-table tbody tr.highlight,
.sensor-table tbody tr.highlight {
    background: #fff8e1;
    font-weight: 500;
}

/* Table Caption/Title */
.table-title {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--primary-navy);
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid var(--primary-blue);
    display: inline-block;
}

/* Table Footer Note */
.table-note {
    font-size: 0.8125rem;
    color: var(--text-medium);
    margin-top: 1rem;
    padding: 0.75rem;
    background: var(--light-gray);
    border-radius: 8px;
    border-left: 3px solid var(--primary-blue);
}

.table-responsive .data-table,
.table-responsive .standards-table,
.table-responsive .comparison-table { 
    min-width: 600px; 
    width: 100%;
}

/* Catch-all: any table inside responsive wrapper should trigger horizontal scroll */
.table-responsive table {
    min-width: 600px;
}

/* Sensor Table (used in containerized systems) */
.sensor-table { 
    width: 100%; 
    border-collapse: collapse; 
    margin: 0; 
    background: var(--white); 
    font-size: 0.875rem; 
}
.sensor-table th { 
    background: var(--primary-navy); 
    color: var(--white); 
    padding: 12px 16px; 
    text-align: left; 
    font-weight: 600;
    white-space: nowrap;
}
.sensor-table td { 
    padding: 12px 16px; 
    border-bottom: 1px solid var(--border-gray); 
    white-space: nowrap;
}
.sensor-table tr:nth-child(even) { 
    background: var(--light-gray); 
}
.sensor-table tr:hover { 
    background: #e8f4fc; 
}

/* Wrap sensor tables in responsive container */
.table-responsive .sensor-table {
    min-width: 500px;
}

/* Specs Table Container (used on tank pages) */
.specs-table-container,
.dimension-table-container { 
    overflow-x: auto; 
    margin: 2rem 0; 
    border-radius: 12px; 
    background: var(--white); 
    border: 1px solid var(--border-gray);
    box-shadow: var(--shadow-md);
    -webkit-overflow-scrolling: touch;
}

/* Dimension Table (used on storage tanks) */
.dimension-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    background: var(--white);
    font-size: 0.875rem;
    min-width: 500px;
}

.dimension-table thead {
    background: linear-gradient(135deg, var(--primary-navy) 0%, #1a3a5c 100%);
}

.dimension-table th {
    padding: 14px 16px;
    text-align: left;
    font-weight: 600;
    color: var(--white);
    border-bottom: 2px solid var(--primary-blue);
    white-space: nowrap;
}

.dimension-table td {
    padding: 12px 16px;
    border-bottom: 1px solid var(--border-gray);
    vertical-align: top;
}

.dimension-table tbody tr:nth-child(even) {
    background: var(--light-gray);
}

.dimension-table tbody tr:hover {
    background: var(--primary-light);
    transition: background 0.2s ease;
}

.dimension-table thead th:first-child {
    border-top-left-radius: 11px;
}

.dimension-table thead th:last-child {
    border-top-right-radius: 11px;
}

.dimension-table tbody tr:last-child td {
    border-bottom: none;
}

/* Tag Table (used on P&ID pages) */
.tag-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    background: var(--white);
    font-size: 0.875rem;
    min-width: 400px;
}

.tag-table thead {
    background: linear-gradient(135deg, var(--primary-navy) 0%, #1a3a5c 100%);
}

.tag-table th {
    padding: 14px 16px;
    text-align: left;
    font-weight: 600;
    color: var(--white);
    border-bottom: 2px solid var(--primary-blue);
}

.tag-table td {
    padding: 12px 16px;
    border-bottom: 1px solid var(--border-gray);
    vertical-align: top;
}

.tag-table tbody tr:nth-child(even) {
    background: var(--light-gray);
}

.tag-table tbody tr:hover {
    background: var(--primary-light);
    transition: background 0.2s ease;
}

.tag-table thead th:first-child {
    border-top-left-radius: 11px;
}

.tag-table thead th:last-child {
    border-top-right-radius: 11px;
}

.tag-table tbody tr:last-child td {
    border-bottom: none;
}
.specs-table { 
    width: 100%; 
    border-collapse: collapse; 
    background: var(--white); 
    font-size: 0.875rem;
    min-width: 600px;
}
.specs-table th { 
    background: var(--primary-navy); 
    color: var(--white); 
    padding: 14px 16px; 
    text-align: left; 
    font-weight: 600;
    white-space: nowrap;
}
.specs-table td { 
    padding: 12px 16px; 
    border-bottom: 1px solid var(--border-gray); 
}
.specs-table tr:hover { 
    background: var(--light-gray); 
}
.tank-type-header { 
    background: var(--primary-light) !important; 
}
.tank-type-header td { 
    font-weight: 600; 
    color: var(--primary-navy); 
    padding: 16px;
}
.volume-cell { 
    font-weight: 600; 
    color: var(--primary-blue); 
}

@media (max-width: 768px) {
    .table-responsive { 
        margin: 0.75rem 0;
        border-radius: 6px;
    }
    .table-responsive .data-table,
    .table-responsive .refinery-table,
    .table-responsive .standards-table,
    .table-responsive .comparison-table,
    .table-responsive .sensor-table,
    .table-responsive table { 
        min-width: 500px; 
    }
    .table-responsive th, 
    .table-responsive td { 
        padding: 10px 12px; 
        font-size: 0.8125rem; 
        white-space: normal; 
    }
    .sensor-table th,
    .sensor-table td,
    .refinery-table th,
    .refinery-table td,
    .standards-table th,
    .standards-table td,
    .comparison-table th,
    .comparison-table td,
    .data-table th,
    .data-table td {
        padding: 10px 12px;
        font-size: 0.8125rem;
        white-space: normal;
        word-break: break-word;
    }
    
    /* Tables NOT in responsive wrapper must fit their container */
    .refinery-table:not(.table-responsive .refinery-table),
    .data-table:not(.table-responsive .data-table),
    .standards-table:not(.table-responsive .standards-table),
    .comparison-table:not(.table-responsive .comparison-table),
    .specs-table:not(.table-responsive .specs-table),
    .sensor-table:not(.table-responsive .sensor-table) {
        min-width: auto !important;
        width: 100%;
        table-layout: fixed;
    }
    .specs-table-container,
    .dimension-table-container {
        margin: 1rem 0;
        border-radius: 6px;
    }
    .specs-table,
    .dimension-table {
        min-width: 100%;
    }
    .specs-table th,
    .specs-table td,
    .dimension-table th,
    .dimension-table td,
    .tag-table th,
    .tag-table td {
        padding: 10px 12px;
        font-size: 0.8125rem;
        white-space: normal;
    }
    .country-section { 
        padding: 1rem !important; 
        margin: 1rem 0 !important;
        border-radius: 8px;
    }
    
    .country-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }
    
    .country-header h2 {
        font-size: 1.25rem;
    }
    
    .standards-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem;
    }
    
    .standard-card {
        padding: 1rem;
    }
}

@media (max-width: 480px) {
    .table-responsive th, 
    .table-responsive td { 
        padding: 8px 10px; 
        font-size: 0.75rem; 
    }
    .sensor-table th,
    .sensor-table td,
    .refinery-table th,
    .refinery-table td,
    .standards-table th,
    .standards-table td,
    .comparison-table th,
    .comparison-table td,
    .data-table th,
    .data-table td {
        padding: 8px 10px;
        font-size: 0.75rem;
        white-space: normal;
        word-break: break-word;
    }
    
    .table-responsive .comparison-table {
        min-width: 320px;
    }
    .refinery-table:not(.table-responsive .refinery-table),
    .data-table:not(.table-responsive .data-table),
    .standards-table:not(.table-responsive .standards-table),
    .comparison-table:not(.table-responsive .comparison-table),
    .specs-table:not(.table-responsive .specs-table),
    .sensor-table:not(.table-responsive .sensor-table) {
        min-width: auto !important;
        width: 100%;
        table-layout: fixed;
    }
    .specs-table th,
    .specs-table td,
    .dimension-table th,
    .dimension-table td,
    .tag-table th,
    .tag-table td {
        padding: 8px 10px;
        font-size: 0.75rem;
    }
    
    /* Tab buttons smaller on very small screens */
    .tab-button {
        padding: 8px 12px;
        font-size: 0.8125rem;
    }
    
    .comparison-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.75rem;
    }
    
    .comparison-item {
        padding: 0.75rem;
    }
    
    .comparison-item .value {
        font-size: 1.25rem;
    }
    
    .comparison-item .label {
        font-size: 0.75rem;
    }
    
    .country-header h2 {
        font-size: 1.125rem;
    }
}

/* ============================================
   TABS - MOBILE FRIENDLY
   ============================================ */
.tab-container { 
    margin: 2rem 0; 
}

.tab-buttons { 
    display: flex; 
    gap: 0.5rem; 
    margin-bottom: 1rem; 
    flex-wrap: wrap; 
    border-bottom: 2px solid var(--border-gray); 
}

.tab-button { 
    padding: 12px 24px; 
    background: transparent; 
    border: none; 
    cursor: pointer; 
    font-weight: 500; 
    transition: transform 0.3s, opacity 0.3s, box-shadow 0.3s, color 0.3s, background-color 0.3s, border-color 0.3s, filter 0.3s; 
    border-bottom: 3px solid transparent; 
    margin-bottom: -2px; 
    white-space: nowrap;
    font-size: 0.9375rem;
    color: var(--text-medium);
}

.tab-button.active { 
    color: var(--primary-blue); 
    border-bottom-color: var(--primary-blue); 
}

.tab-button:hover { 
    color: var(--primary-blue); 
    background: var(--light-gray);
}

.tab-content { 
    display: none; 
}

.tab-content.active { 
    display: block; 
    animation: fadeIn 0.3s; 
}

@keyframes fadeIn { 
    from { opacity: 0; } 
    to { opacity: 1; } 
}

/* Mobile Tab Styles */
@media (max-width: 768px) {
    .tab-buttons {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        -ms-overflow-style: none;
        padding-bottom: 2px;
        gap: 0.25rem;
    }
    
    .tab-buttons::-webkit-scrollbar {
        display: none;
    }
    
    .tab-button {
        padding: 10px 16px;
        font-size: 0.875rem;
        flex-shrink: 0;
        border-radius: 6px 6px 0 0;
    }
    
    .tab-button.active {
        background: var(--primary-light);
    }
    
    /* Tab scroll indicator */
    .tab-container {
        position: relative;
    }
    
    .tab-container::after {
        content: '';
        position: absolute;
        top: 0;
        right: 0;
        width: 40px;
        height: 46px;
        background: linear-gradient(90deg, transparent, var(--white));
        pointer-events: none;
        display: block;
    }
    
    .section-light .tab-container::after {
        background: linear-gradient(90deg, transparent, var(--light-gray));
    }
    
    /* Tab content tables on mobile */
    .tab-content .table-responsive {
        margin: 0.5rem 0;
        border-radius: 8px;
    }
    
    .tab-content .data-table {
        min-width: 500px;
    }
}

@media (max-width: 480px) {
    .tab-button {
        padding: 8px 12px;
        font-size: 0.8125rem;
    }
    
    .tab-container::after {
        height: 40px;
    }
}

/* ============================================
   ADDITIONAL MOBILE RESPONSIVE FIXES
   ============================================ */

@media (max-width: 768px) {
    /* Hero buttons stack */
    .hero-buttons {
        flex-direction: column;
        gap: 0.75rem;
    }
    
    .hero-buttons .btn {
        width: 100%;
    }
    
    /* CTA section */
    .cta-content {
        flex-direction: column;
        text-align: center;
        gap: 1.5rem;
    }
    
    .cta-buttons {
        flex-direction: column;
        width: 100%;
    }
    
    .cta-buttons .btn {
        width: 100%;
    }
    
    /* Grids to single column */
    .feature-grid,
    .spec-grid,
    .product-grid,
    .related-grid,
    .component-grid,
    .benefit-grid,
    .feature-card-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem;
    }
    
    /* Application grid 2 columns */
    .application-grid,
    .comparison-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem;
    }
    
    /* Timeline vertical */
    .deployment-timeline {
        flex-direction: column;
        align-items: center;
    }
    
    .timeline-step {
        max-width: 100%;
        width: 100%;
    }
    
    /* Cards */
    .card {
        padding: 1.25rem;
    }
    
    /* Section padding */
    .section {
        padding: 50px 0;
    }
    
    .content-section {
        padding: 50px 0;
    }
    
    /* Typography */
    .section-title {
        font-size: 1.625rem;
    }
    
    .section-description {
        font-size: 0.9375rem;
    }
}

@media (max-width: 480px) {
    /* Smaller hero */
    .hero {
        padding: 90px 0 50px;
    }
    
    .hero-title {
        font-size: 1.75rem;
    }
    
    .hero-description {
        font-size: 1rem;
    }
    
    .hero-small {
        padding: 80px 0 40px;
    }
    
    /* Single column grids */
    .application-grid,
    .comparison-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    /* Smaller cards */
    .card {
        padding: 1rem;
    }
    
    /* Section title */
    .section-title {
        font-size: 1.5rem;
    }
    
    /* Container padding */
    .container {
        padding: 0 16px;
    }
    
    /* Buttons */
    .btn {
        padding: 10px 20px;
        font-size: 0.875rem;
    }
}

/* ============================================
   RESPONSIVE GRID SYSTEM - CARDS
   ============================================ */

/* Problem/Solution Cards Grid */
.problem-grid,
.solution-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 1.5rem;
}

/* Metric Grid */
.metric-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 1.5rem;
    margin: 2rem 0;
}

/* Process Flow */
.process-flow {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    justify-content: center;
    margin: 2rem 0;
}

.process-box {
    flex: 1;
    min-width: 140px;
    max-width: 180px;
    background: var(--white);
    border: 2px solid var(--primary-blue);
    border-radius: 12px;
    padding: 1.25rem;
    text-align: center;
    position: relative;
}

.process-box::after {
    content: '→';
    position: absolute;
    right: -18px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1.5rem;
    color: var(--primary-blue);
    font-weight: bold;
}

.process-box:last-child::after {
    display: none;
}

.process-box .number {
    width: 36px;
    height: 36px;
    background: var(--primary-blue);
    color: var(--white);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    margin: 0 auto 0.75rem;
}

/* Problem/Solution Cards */
.problem-card {
    background: linear-gradient(135deg, #fff5f5 0%, var(--white) 100%);
    border: 1px solid #fed7d7;
    border-radius: 12px;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
    display: flex;
    flex-direction: column;
}

.problem-card .btn {
    margin-top: auto;
}

.problem-card h4 {
    color: #c53030;
    margin-bottom: 0.75rem;
    display: flex;
    align-items: center;
    gap: 8px;
}

.problem-card h4 i {
    color: #e53e3e;
}

.solution-card {
    background: linear-gradient(135deg, #f0fff4 0%, var(--white) 100%);
    border: 1px solid #9ae6b4;
    border-radius: 12px;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
    display: flex;
    flex-direction: column;
}

.solution-card .btn {
    margin-top: auto;
}

.solution-card h4 {
    color: #22543d;
    margin-bottom: 0.75rem;
    display: flex;
    align-items: center;
    gap: 8px;
}

.solution-card h4 i {
    color: var(--success-green);
}

/* Standard Card */
.standard-card {
    display: flex;
    flex-direction: column;
}
.standard-card .btn {
    margin-top: auto;
}

/* Inline-only card patterns — ensure flex column + bottom-aligned buttons */
.application-card,
.instrument-card,
.related-card,
.tool-card,
.equipment-card,
.solution-type-card,
.source-card {
    display: flex;
    flex-direction: column;
}
.application-card .btn,
.instrument-card .btn,
.related-card .btn,
.tool-card .btn,
.equipment-card .btn,
.solution-type-card .btn,
.source-card .btn {
    margin-top: auto;
}

/* Metric Box */
.metric-box {
    text-align: center;
    padding: 1.5rem;
    background: var(--light-gray);
    border-radius: 12px;
}

.metric-box .value {
    font-size: 2rem;
    font-weight: 700;
    color: var(--primary-navy);
}

.metric-box .label {
    font-size: 0.875rem;
    color: var(--text-medium);
    margin-top: 0.25rem;
}

/* Mobile Responsive for Grids */
@media (max-width: 768px) {
    .problem-grid,
    .solution-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem;
    }
    
    .metric-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem;
    }
    
    .process-flow {
        flex-direction: column;
        align-items: center;
    }
    
    .process-box {
        max-width: 100%;
        width: 100%;
    }
    
    .process-box::after {
        content: '↓';
        right: 50%;
        top: 100%;
        transform: translateX(50%);
    }
    
    .problem-card,
    .solution-card {
        padding: 1.25rem;
        margin-bottom: 1rem;
    }
    
    .metric-box {
        padding: 1.25rem;
    }
    
    .metric-box .value {
        font-size: 1.5rem;
    }
}

@media (max-width: 480px) {
    .metric-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .problem-card,
    .solution-card {
        padding: 1rem;
    }
    
    .process-box {
        padding: 1rem;
        min-width: auto;
    }
    
    .metric-box .value {
        font-size: 1.25rem;
    }
}

/* ============================================
   BATCH SEO & UX IMPROVEMENTS
   ============================================ */

/* Breadcrumb Section */
.breadcrumb-section {
    background: linear-gradient(135deg, var(--primary-navy) 0%, #0d3a5c 100%);
    border-bottom: none;
    padding: 80px 0 12px;
    margin-bottom: -2px;
}
.breadcrumb-list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    list-style: none;
    margin: 0;
    padding: 0;
    font-size: 0.875rem;
    line-height: 1.5;
}
.breadcrumb-item {
    color: rgba(255,255,255,0.85);
}
.breadcrumb-item a {
    color: rgba(255,255,255,0.9);
    text-decoration: none;
    font-weight: 500;
}
.breadcrumb-item a:hover {
    text-decoration: underline;
    color: #ffffff;
}
.breadcrumb-item.active {
    color: #ffffff;
    font-weight: 600;
}
.breadcrumb-item:not(:last-child)::after {
    content: "/";
    margin-left: 0.5rem;
    color: rgba(255,255,255,0.5);
}

/* Reduce hero padding when breadcrumb sits directly above it */
.breadcrumb-section + .hero,
.breadcrumb-section + .hero-small,
.breadcrumb-section + .page-header,
.breadcrumb-section + .product-hero {
    padding-top: 30px;
}

@media (max-width: 992px) {
    .breadcrumb-section + .hero { padding-top: 25px; }
    .breadcrumb-section + .hero-small { padding-top: 25px; }
    .breadcrumb-section + .page-header { padding-top: 25px; }
    .breadcrumb-section + .product-hero { padding-top: 25px; }
}

@media (max-width: 768px) {
    .breadcrumb-section { padding: 65px 0 10px; }
    .breadcrumb-list { font-size: 0.8125rem; }
    .breadcrumb-section + .hero { padding-top: 25px; }
    .breadcrumb-section + .hero-small { padding-top: 20px; }
    .breadcrumb-section + .page-header { padding-top: 20px; }
    .breadcrumb-section + .product-hero { padding-top: 20px; }
}


/* ============================================== */
/* === BIOLOGICAL TREATMENT INTERACTIVE STYLES === */
/* ============================================== */
/* Note: .hero-features base styles are in enhancements.css */
/* The following are page-specific enhancements for biological-treatment.html */

        .hero-feature-item i {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 64px;
            height: 64px;
            background: rgba(201,162,39,0.12);
            border-radius: 50%;
            overflow: hidden;
            animation: iconFloat 3s ease-in-out infinite;
        }
        .hero-feature-item:hover i {
            background: rgba(201,162,39,0.25);
            transform: scale(1.15) rotate(-5deg);
            box-shadow: 0 8px 24px rgba(201,162,39,0.3);
        }
        .hero-feature-item:nth-child(2) i { animation-delay: 0.5s; }
        .hero-feature-item:nth-child(3) i { animation-delay: 1s; }
        .hero-feature-item:nth-child(4) i { animation-delay: 1.5s; }
        @keyframes iconFloat {
            0%, 100% { transform: translateY(0); }
            50% { transform: translateY(-6px); }
        }
        .hero-feature-item:hover h4 { color: var(--accent-gold); transition: color 0.3s ease; }
        .tech-card {
            background: var(--white);
            border: 1px solid var(--border-gray);
            border-radius: 12px;
            padding: 2rem;
            margin-bottom: 2rem;
        }
        .tech-card h3 {
            color: var(--primary-navy);
            margin-bottom: 0.5rem;
            display: flex;
            align-items: center;
            gap: 12px;
        }
        .tech-card h3 i {
            color: var(--primary-blue);
        }
        .product-code {
            display: inline-block;
            background: var(--primary-light);
            color: var(--primary-blue);
            padding: 4px 12px;
            border-radius: 4px;
            font-size: 0.875rem;
            font-weight: 600;
            margin-bottom: 1rem;
        }
        .process-diagram {
            background: var(--light-gray);
            border-radius: 12px;
            padding: 2rem;
            margin: 1.5rem 0;
        }
        .process-stages {
            display: flex;
            flex-wrap: wrap;
            gap: 1rem;
            justify-content: center;
        }
        .stage {
            flex: 1;
            min-width: 140px;
            max-width: 180px;
            background: var(--white);
            padding: 1.25rem;
            border-radius: 8px;
            text-align: center;
            border: 2px solid var(--border-gray);
            cursor: pointer;
            transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), color 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), background-color 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), border-color 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), filter 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
        }
        .stage.active {
            border-color: var(--primary-blue);
            background: var(--primary-light);
        }
        .stage:hover {
            transform: translateY(-6px) scale(1.05);
            box-shadow: 0 8px 24px rgba(0,102,204,0.12);
            border-color: var(--primary-blue);
        }
        .stage:hover i {
            transform: scale(1.2);
            color: var(--primary-blue);
        }
        .stage.active i {
            animation: stagePulse 2s ease-in-out infinite;
            color: var(--white);
        }
        .stage i {
            font-size: 1.75rem;
            color: var(--primary-blue);
            margin-bottom: 0.75rem;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 56px;
            height: 56px;
            border-radius: 50%; overflow: hidden;
            background: rgba(0,102,204,0.06);
            transition: transform 0.4s ease, opacity 0.4s ease, box-shadow 0.4s ease, color 0.4s ease, background-color 0.4s ease, border-color 0.4s ease, filter 0.4s ease;
        }
        .stage.active i {
            background: var(--primary-blue);
            box-shadow: 0 4px 16px rgba(0,102,204,0.3);
        }
        @keyframes stagePulse {
            0%, 100% { box-shadow: 0 4px 16px rgba(0,102,204,0.3); }
            50% { box-shadow: 0 4px 24px rgba(0,102,204,0.5); }
        }
        .stage:hover h4 { color: var(--primary-blue); transition: color 0.3s ease; }
        .stage h4 {
            color: var(--primary-navy);
            font-size: 0.9375rem;
            margin-bottom: 0.25rem;
        }
        .stage p {
            font-size: 0.8125rem;
            color: var(--text-medium);
        }
        .check {
            color: var(--success-green);
        }
        .dash {
            color: var(--text-light);
        }
        .stats-row {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
            gap: 1rem;
            margin-top: 1.5rem;
        }
        .stat-box {
            text-align: center;
            padding: 1.25rem;
            background: var(--light-gray);
            border-radius: 8px;
        }
        .stat-box .value {
            font-size: 1.75rem;
            font-weight: 700;
            color: var(--primary-navy);
        }
        .stat-box .label {
            font-size: 0.875rem;
            color: var(--text-medium);
            overflow-wrap: break-word;
            word-break: break-word;
            hyphens: auto;
        }
        /* === Stat Box Visual Enhancement === merged with base above */
        .stat-box {
            position: relative;
            overflow: hidden;
        }
        @media (max-width: 768px) {
            .stats-row {
                grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
            }
            .stat-box {
                padding: 1rem;
            }
            .stat-box .value {
                font-size: 1.5rem;
            }
            .stage {
                min-width: 100px;
                padding: 1rem;
                flex: 1 1 100%;
                max-width: none;
            }
        }
        /* === Hero Background === */
        /* === Scroll Reveal === */
        [data-animate] {
            opacity: 0;
            transform: translateY(24px);
            transition: opacity 0.6s ease-out, transform 0.6s ease-out;
        }
        [data-animate].visible {
            opacity: 1;
            transform: translateY(0);
        }
        
        /* Override the global fadeIn animation to prevent conflict */
        [data-animate] {
            animation: none !important;
        }

        /* === Interactive Process Flow === */
        .process-flow-viz {
            position: relative;
            padding: 2rem 0;
        }
        .process-pipeline {
            position: relative;
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            gap: 0;
            max-width: 1100px;
            margin: 0 auto;
        }
        /* Pipeline connecting line */
        .pipeline-track {
            position: absolute;
            top: 40px;
            left: 60px;
            right: 60px;
            height: 6px;
            background: linear-gradient(90deg, var(--border-gray) 0%, var(--border-gray) 100%);
            border-radius: 3px;
            z-index: 0;
            overflow: hidden;
        }
        .pipeline-flow {
            position: absolute;
            top: 0;
            left: -40%;
            width: 40%;
            height: 100%;
            background: linear-gradient(90deg, transparent, var(--primary-blue), var(--primary-blue), transparent);
            border-radius: 3px;
            animation: flowMove 3s linear infinite;
        }
        @keyframes flowMove {
            0% { left: -40%; }
            100% { left: 100%; }
        }
        /* Flow particles along pipeline */
        .flow-particles {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 100%;
            z-index: 1;
        }
        .flow-particle {
            position: absolute;
            width: 8px;
            height: 8px;
            background: var(--primary-blue);
            border-radius: 50%;
            top: -1px;
            opacity: 0;
            box-shadow: 0 0 8px rgba(0,102,204,0.5);
            animation: particleFlow 3s linear infinite;
        }
        .flow-particle:nth-child(1) { animation-delay: 0s; }
        .flow-particle:nth-child(2) { animation-delay: 0.6s; }
        .flow-particle:nth-child(3) { animation-delay: 1.2s; }
        .flow-particle:nth-child(4) { animation-delay: 1.8s; }
        .flow-particle:nth-child(5) { animation-delay: 2.4s; }
        @keyframes particleFlow {
            0% { left: 0%; opacity: 0; transform: scale(0.5); }
            10% { opacity: 1; transform: scale(1); }
            90% { opacity: 1; transform: scale(1); }
            100% { left: 100%; opacity: 0; transform: scale(0.5); }
        }

        /* Process Stage Node */
        .process-node {
            position: relative;
            z-index: 2;
            display: flex;
            flex-direction: column;
            align-items: center;
            cursor: pointer;
            flex: 1;
            max-width: 160px;
            transition: transform 0.4s ease, opacity 0.4s ease, box-shadow 0.4s ease, color 0.4s ease, background-color 0.4s ease, border-color 0.4s ease, filter 0.4s ease;
        }
        .process-node:hover {
            transform: translateY(-8px);
        }
        .node-circle {
            width: 80px;
            height: 80px;
            border-radius: 50%;
            background: var(--white);
            border: 4px solid var(--border-gray);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.75rem;
            color: var(--primary-blue);
            transition: transform 0.4s ease, opacity 0.4s ease, box-shadow 0.4s ease, color 0.4s ease, background-color 0.4s ease, border-color 0.4s ease, filter 0.4s ease;
            position: relative;
            box-shadow: 0 4px 12px rgba(0,0,0,0.08);
        }
        .process-node:hover .node-circle {
            border-color: var(--primary-blue);
            box-shadow: 0 8px 24px rgba(0,102,204,0.2);
            transform: scale(1.08);
        }
        .process-node.active .node-circle {
            border-color: var(--primary-blue);
            background: linear-gradient(135deg, var(--primary-blue) 0%, #0052a3 100%);
            color: var(--white);
            box-shadow: 0 8px 28px rgba(0,102,204,0.3);
            animation: nodePulse 2s ease-in-out infinite;
        }
        @keyframes nodePulse {
            0%, 100% { box-shadow: 0 8px 28px rgba(0,102,204,0.3); }
            50% { box-shadow: 0 8px 32px rgba(0,102,204,0.5); }
        }
        .node-label {
            margin-top: 1rem;
            text-align: center;
        }
        .node-label h4 {
            font-size: 0.95rem;
            font-weight: 600;
            color: var(--primary-navy);
            margin-bottom: 0.25rem;
            transition: color 0.3s ease;
        }
        .process-node:hover .node-label h4 {
            color: var(--primary-blue);
        }
        .node-label p {
            font-size: 0.875rem;
            margin: 0;
        }
        .node-step-num {
            position: absolute;
            top: -8px;
            right: -8px;
            width: 28px;
            height: 28px;
            border-radius: 50%;
            background: var(--accent-gold);
            color: var(--white);
            font-size: 0.75rem;
            font-weight: 700;
            display: flex;
            align-items: center;
            justify-content: center;
            border: 2px solid var(--white);
        }

        /* Detail Panel */
        .process-detail-panel {
            max-width: 900px;
            margin: 2rem auto 0;
            background: var(--white);
            border: 1px solid var(--border-gray);
            border-radius: 12px;
            padding: 2rem;
            box-shadow: 0 4px 16px rgba(0,0,0,0.06);
            transition: transform 0.4s ease, opacity 0.4s ease, box-shadow 0.4s ease, color 0.4s ease, background-color 0.4s ease, border-color 0.4s ease, filter 0.4s ease;
            min-height: 160px;
        }
        .process-detail-panel .detail-title {
            font-size: 1.25rem;
            font-weight: 600;
            color: var(--primary-navy);
            margin-bottom: 0.75rem;
            display: flex;
            align-items: center;
            gap: 0.75rem;
            flex-wrap: wrap;
        }
        .process-detail-panel .detail-title i {
            color: var(--primary-blue);
            font-size: 1.5rem;
        }
        .process-detail-panel .detail-body {
            color: var(--text-medium);
            line-height: 1.7;
            font-size: 0.95rem;
        }
        .process-detail-panel .detail-tags {
            display: flex;
            flex-wrap: wrap;
            gap: 0.5rem;
            margin-top: 1rem;
        }
        .process-detail-panel .detail-tags span {
            background: var(--light-gray);
            padding: 0.35rem 0.75rem;
            border-radius: 4px;
            font-size: 0.875rem;
            font-weight: 500;
        }

        /* Auto-play controls */
        .process-controls {
            text-align: center;
            margin-top: 1.5rem;
        }
        .process-controls button {
            background: var(--white);
            border: 1px solid var(--border-gray);
            padding: 0.5rem 1.25rem;
            border-radius: 6px;
            font-size: 0.85rem;
            color: var(--text-medium);
            cursor: pointer;
            transition: transform 0.2s, opacity 0.2s, box-shadow 0.2s, color 0.2s, background-color 0.2s, border-color 0.2s, filter 0.2s ease;
            display: inline-flex;
            align-items: center;
            gap: 0.5rem;
        }
        .process-controls button:hover {
            border-color: var(--primary-blue);
            color: var(--primary-blue);
        }
        .process-controls button.active {
            background: var(--primary-blue);
            color: var(--white);
            border-color: var(--primary-blue);
        }

        /* Responsive */
        @media (max-width: 768px) {
            .process-pipeline {
                flex-direction: column;
                align-items: center;
                gap: 1.5rem;
            }
            .pipeline-track {
                display: none;
            }
            .process-node {
                flex-direction: row;
                max-width: 100%;
                width: 100%;
                gap: 1rem;
                text-align: left;
            }
            .node-circle {
                width: 60px;
                height: 60px;
                font-size: 1.25rem;
                flex-shrink: 0;
            }
            .node-label {
                margin-top: 0;
                text-align: left;
            }
        }

        /* === Card Hover Enhancement === */
        /* Note: .card transition is already defined in base rule */
        .tech-card {
            transition: transform 0.3s, opacity 0.3s, box-shadow 0.3s, color 0.3s, background-color 0.3s, border-color 0.3s, filter 0.3s ease;
        }
        .tech-card:hover {
            box-shadow: 0 8px 28px rgba(0,0,0,0.08);
        }
        .card:hover {
            box-shadow: 0 8px 24px rgba(0,102,204,0.1);
            transform: translateY(-4px);
        }
        .comparison-table tbody tr {
            transition: background 0.2s ease;
        }
        .comparison-table tbody tr:hover {
            background: #eef2f7 !important;
        }

        /* === Industry Tag Hover === */
        .industry-tag {
            transition: transform 0.2s, opacity 0.2s, box-shadow 0.2s, color 0.2s, background-color 0.2s, border-color 0.2s, filter 0.2s ease;
        }
        .industry-tag:hover {
            background: var(--primary-blue);
            color: var(--white);
            border-color: var(--primary-blue);
        }

        /* === Feature Card Icon Enhancement === */
        .feature-card .icon-circle {
            width: 56px;
            height: 56px;
            font-size: 1.5rem;
            transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), color 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), background-color 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), border-color 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), filter 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
        }
        .feature-card:hover .icon-circle {
            transform: scale(1.15) rotate(-5deg);
            box-shadow: 0 8px 24px rgba(0,102,204,0.2);
        }
        .feature-card {
            transition: transform 0.3s, opacity 0.3s, box-shadow 0.3s, color 0.3s, background-color 0.3s, border-color 0.3s, filter 0.3s ease;
        }
        .feature-card:hover {
            transform: translateY(-6px);
            box-shadow: 0 12px 32px rgba(0,0,0,0.08);
        }
        .feature-card h4 {
            transition: color 0.3s ease;
        }
        .feature-card:hover h4 {
            color: var(--primary-blue);
        }

        /* === Compliance Card Icon Enhancement === */
        .card .icon-2x {
            font-size: 2.5rem;
            color: var(--primary-blue);
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 72px;
            height: 72px;
            background: linear-gradient(135deg, rgba(0,102,204,0.08) 0%, rgba(0,102,204,0.03) 100%);
            border-radius: 16px;
            margin-bottom: 1rem;
            transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), color 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), background-color 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), border-color 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), filter 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
        }
        .card:hover .icon-2x {
            transform: scale(1.12) rotate(-5deg);
            background: linear-gradient(135deg, rgba(0,102,204,0.15) 0%, rgba(0,102,204,0.06) 100%);
            box-shadow: 0 8px 24px rgba(0,102,204,0.12);
        }
        .card:hover h3 {
            color: var(--primary-blue);
            transition: color 0.3s ease;
        }

        /* === Stat Box Visual Enhancement === merged with base above */
        /* Merged into base .stat-box above */
        .stat-box::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 3px;
            background: linear-gradient(90deg, var(--primary-blue), var(--accent-gold));
            opacity: 0;
            transition: opacity 0.3s ease;
        }
        .stat-box:hover::before {
            opacity: 1;
        }
        .stat-box .value {
            background: linear-gradient(135deg, var(--primary-navy) 0%, var(--primary-blue) 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            transition: transform 0.3s, opacity 0.3s, box-shadow 0.3s, color 0.3s, background-color 0.3s, border-color 0.3s, filter 0.3s ease;
        }
        .stat-box:hover .value {
            transform: scale(1.05);
        }

        /* === Related Equipment Card Icons === */
        .rel-eq-card {
            text-align: center;
            padding-top: 2.5rem;
        }
        .rel-eq-card .eq-icon {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 64px;
            height: 64px;
            background: linear-gradient(135deg, rgba(0,102,204,0.08) 0%, rgba(0,102,204,0.03) 100%);
            border-radius: 16px;
            font-size: 1.75rem;
            color: var(--primary-blue);
            margin-bottom: 1rem;
            transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), color 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), background-color 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), border-color 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), filter 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
        }
        .rel-eq-card:hover .eq-icon {
            transform: scale(1.12) rotate(-5deg);
            background: linear-gradient(135deg, rgba(0,102,204,0.15) 0%, rgba(0,102,204,0.06) 100%);
            box-shadow: 0 8px 24px rgba(0,102,204,0.12);
        }

        .carrier-visual {
            display: flex;
            align-items: center;
            gap: 2rem;
            flex-wrap: wrap;
            justify-content: center;
            margin: 1.5rem 0;
        }
        .carrier-item {
            text-align: center;
            padding: 1.5rem;
            background: var(--light-gray);
            border-radius: 12px;
            min-width: 120px;
        }
        .carrier-item {
            transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), color 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), background-color 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), border-color 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), filter 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
            border: 2px solid transparent;
            cursor: pointer;
        }
        .carrier-item:hover {
            transform: translateY(-8px) scale(1.05);
            border-color: var(--primary-blue);
            box-shadow: 0 12px 32px rgba(0,102,204,0.15);
        }
        .carrier-item:hover i {
            transform: scale(1.2) rotate(10deg);
        }
        .carrier-item i {
            font-size: 2.5rem;
            color: var(--primary-blue);
            margin-bottom: 0.75rem;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 72px;
            height: 72px;
            background: linear-gradient(135deg, rgba(0,102,204,0.08) 0%, rgba(0,102,204,0.03) 100%);
            border-radius: 16px; overflow: hidden;
            transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), color 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), background-color 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), border-color 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), filter 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
        }
        .carrier-item h4 { transition: color 0.3s ease; }
        .carrier-item:hover h4 { color: var(--primary-blue); }


/* ============================================== */
/* Front page hero background */
section.hero-bg {
    background: linear-gradient(135deg, rgba(13,46,78,0.88) 0%, rgba(13,46,78,0.72) 100%), url('/images/backgro.jpg');
    background-size: cover;
    background-position: center;
    position: relative;
}

section.hero-bg::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(180deg, rgba(13,46,78,0.3) 0%, rgba(13,46,78,0.5) 60%, rgba(13,46,78,0.7) 100%);
    pointer-events: none;
    z-index: 0;
}

section.hero-bg > .container {
    position: relative;
    z-index: 1;
}

/* Common Utility Classes (Inline Style Cleanup) */
.flex-col { display: flex; flex-direction: column; }
.flex-row { display: flex; flex-direction: row; }
.flex-center { display: flex; align-items: center; justify-content: center; }
.flex-align-center { display: flex; align-items: center; }
.card-header-flex { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.flex-grow { flex-grow: 1; }
.flex-1 { flex: 1; }

.ml-1 { margin-left: 1rem; }
.mr-1 { margin-right: 1rem; }
.text-center-auto { max-width: 900px; margin-left: auto; margin-right: auto; }
.text-center-narrow { max-width: 800px; margin-left: auto; margin-right: auto; }
.text-sm { font-size: 0.875rem; }
.text-xs { font-size: 0.75rem; }
.text-medium { color: var(--text-medium); }
.text-light { color: var(--text-light); }
.text-blue { color: var(--primary-blue); }
.text-navy { color: var(--primary-navy); }
.text-green { color: var(--success-green); }
.text-small { font-size: 0.875rem; }
.lead-constrained { max-width: 900px; margin: 0 auto 2.5rem; }
.bg-white { background: var(--white); }
.bg-light { background: var(--light-gray); }
.rounded-8 { border-radius: 8px; }
.rounded-12 { border-radius: 12px; }
.border-subtle { border: 1px solid var(--border-gray); }
.p-1 { padding: 1rem; }
.p-1-5 { padding: 1.5rem; }
.gap-12 { gap: 12px; }
.gap-16 { gap: 16px; }
.icon-2x { font-size: 2rem; color: var(--primary-blue); margin-bottom: 1rem; }
.icon-1-5x { font-size: 1.5rem; color: var(--primary-blue); }

/* ==== UTILITY CLASSES — COMPACT DISPLAY CONTROL ==== */
.pt-0 { padding-top: 0 !important; }
.pb-0 { padding-bottom: 0 !important; }
.pl-0 { padding-left: 0 !important; }
.pr-0 { padding-right: 0 !important; }
.p-0 { padding: 0 !important; }
.pt-1 { padding-top: 1rem !important; }
.pt-2 { padding-top: 2rem !important; }
.pb-1 { padding-bottom: 1rem !important; }
.pb-2 { padding-bottom: 2rem !important; }
.py-1 { padding-top: 1rem !important; padding-bottom: 1rem !important; }
.py-2 { padding-top: 2rem !important; padding-bottom: 2rem !important; }

.section-sm { padding: 2.5rem 0; }
.section-lg { padding: 80px 0; }
.section-cta { padding: 100px 0; text-align: center; }

.bg-navy { background: var(--primary-navy); color: var(--white); }
.bg-gradient-navy { background: linear-gradient(135deg, #0a2540 0%, #0d3a5c 100%); color: var(--white); }
.bg-gradient-green { background: linear-gradient(135deg, #065f46 0%, #047857 100%); color: var(--white); }
.bg-gradient-light-1 { background: linear-gradient(180deg, #f8fafc 0%, #f0f4f8 100%); }
.bg-gradient-light-2 { background: linear-gradient(180deg, #f0f4f8 0%, #e8eef4 100%); }

.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
@media (max-width: 480px) { .grid-2 { grid-template-columns: 1fr; } .grid-3 { grid-template-columns: 1fr; } }
.grid-auto-200 { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1.5rem; }
.grid-auto-220 { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1rem; }
.grid-auto-240 { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 20px; }
.grid-auto-250 { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1.5rem; }
.grid-auto-300 { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1.5rem; }
.grid-auto-320 { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 1.5rem; }
.grid-auto-280 { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1rem; }
.grid-auto-400 { display: grid; grid-template-columns: repeat(auto-fit, minmax(400px, 1fr)); gap: 3rem; align-items: start; }
.grid-auto-150 { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1.5rem; }
.grid-auto-160 { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 1rem; }
.grid-auto-280-15 { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.5rem; }
.grid-auto-300-14 { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 14px; }
.grid-auto-260-14 { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; }
.grid-2-1 { display: grid; grid-template-columns: 2fr 1fr; gap: 1rem; align-items: center; }
.border-top-subtle { border-top: 1px solid var(--border-gray) !important; }
.border-left-blue { border-left: 4px solid var(--primary-blue) !important; }
.flex-400 { flex: 0 0 400px; max-width: 100%; }
.min-w-300 { min-width: 300px; }
@media (max-width: 480px) { .flex-400 { flex: 1 1 100%; min-width: 0; } .min-w-300 { min-width: 0; } }
.bg-light-rounded { background: var(--light-gray); padding: 2rem; border-radius: 8px; text-align: center; }
.mb-1-center { margin-bottom: 1rem; text-align: center; }
.lead-auto { max-width: 900px; margin: 0 auto 1.5rem; }
.lead-narrow { max-width: 800px; margin: 0 auto 1.5rem; }
.btn-group-center { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem; margin-bottom: 1rem; }

.flex-wrap-center { display: flex; justify-content: center; flex-wrap: wrap; gap: 1rem; }

@media (max-width: 768px) {
    .grid-2 { grid-template-columns: repeat(2, 1fr); }
    .grid-3 { grid-template-columns: repeat(2, 1fr); }
    .grid-auto-200 { grid-template-columns: repeat(2, 1fr); }
    .grid-auto-220 { grid-template-columns: repeat(2, 1fr); }
    .grid-auto-240 { grid-template-columns: repeat(2, 1fr); }
    .grid-auto-250 { grid-template-columns: repeat(2, 1fr); }
    .grid-auto-300 { grid-template-columns: repeat(2, 1fr); }
    .grid-auto-320 { grid-template-columns: repeat(2, 1fr); }
    .grid-auto-400 { grid-template-columns: repeat(2, 1fr); }
    .grid-2-1 { grid-template-columns: repeat(2, 1fr); }
}

.link-inherit { color: inherit; text-decoration: none; }

/* ============================================
   HOMEPAGE RESTRUCTURE STYLES
   Four Pillar Architecture: Industries → Equipment → Services → Resources
   ============================================ */

/* Section header with inline link */
.section-header-flex {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 3rem;
}
.section-header-flex .section-title {
    margin-bottom: 0;
}
.section-header-flex .view-all-link {
    font-size: 0.9375rem;
    font-weight: 500;
    color: var(--primary-blue);
    white-space: nowrap;
}
.section-header-flex .view-all-link:hover {
    color: var(--primary-navy);
}
.section-header-flex .view-all-link i {
    font-size: 0.75rem;
    margin-left: 4px;
    transition: transform 0.2s ease;
}
.section-header-flex .view-all-link:hover i {
    transform: translateX(3px);
}

/* Industry Cards — structured image + content layout */
.industry-cards-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
}
@media (max-width: 1024px) { .industry-cards-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; } }
@media (max-width: 480px) { .industry-cards-grid { grid-template-columns: 1fr; } }
.industry-card {
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    background: #fff;
    text-decoration: none;
    transition: transform 0.3s, opacity 0.3s, box-shadow 0.3s, color 0.3s, background-color 0.3s, border-color 0.3s, filter 0.3s ease;
    border: 1px solid var(--border-gray);
}
.industry-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
    border-color: var(--accent-gold);
}
.industry-card-image {
    height: 200px;
    background-size: cover;
    background-position: center;
}
.industry-card-body {
    padding: 1.4rem 1.5rem;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}
.industry-card h3 {
    color: var(--primary-navy);
    font-size: 1.125rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
}
.industry-card p {
    color: var(--text-medium);
    font-size: 0.875rem;
    margin-bottom: 1rem;
    line-height: 1.5;
}
.industry-card .learn-more {
    color: var(--primary-blue);
    font-size: 0.875rem;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: transform 0.25s ease, opacity 0.25s ease, box-shadow 0.25s ease, color 0.25s ease, background-color 0.25s ease, border-color 0.25s ease, filter 0.25s ease;
    margin-top: auto;
}
.industry-card:hover .learn-more {
    gap: 10px;
    color: var(--accent-gold);
}
.industry-card .icon-circle-sm {
    margin-bottom: 0.8rem;
    align-self: flex-start;
}
.industry-card .icon-circle-sm i {
    color: var(--primary-blue);
}
.industry-card.outline-card {
    background: var(--white);
    border: 2px dashed var(--border-gray);
}
.industry-card.outline-card:hover {
    border-color: var(--primary-blue);
    background: var(--primary-light);
}

/* Industry Cards — photo overlay variant (white text over image) */
.industry-card.industry-card--overlay {
    position: relative;
    min-height: 280px;
    justify-content: flex-end;
    background: none;
    border: 1px solid transparent;
    padding: 0;
}
.industry-card.industry-card--overlay .industry-card-image {
    position: absolute;
    inset: 0;
    height: 100%;
    z-index: 0;
}
.industry-card.industry-card--overlay::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(10,37,64,0.94) 0%, rgba(10,37,64,0.65) 45%, rgba(10,37,64,0.25) 100%);
    z-index: 1;
    transition: background 0.35s ease;
}
.industry-card.industry-card--overlay:hover::before {
    background: linear-gradient(to top, rgba(10,37,64,0.96) 0%, rgba(10,37,64,0.75) 45%, rgba(10,37,64,0.35) 100%);
}
.industry-card.industry-card--overlay .industry-card-body {
    position: relative;
    z-index: 2;
    padding: 1.5rem;
    background: none;
}
.industry-card.industry-card--overlay h3 {
    color: var(--white);
    font-size: 1.125rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
}
.industry-card.industry-card--overlay p {
    color: rgba(255,255,255,0.82);
    font-size: 0.875rem;
    margin-bottom: 1rem;
    line-height: 1.5;
}
.industry-card.industry-card--overlay .learn-more {
    color: var(--primary-blue);
    font-size: 0.875rem;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: transform 0.25s ease, opacity 0.25s ease, box-shadow 0.25s ease, color 0.25s ease, background-color 0.25s ease, border-color 0.25s ease, filter 0.25s ease;
    margin-top: auto;
}
.industry-card.industry-card--overlay:hover .learn-more {
    gap: 10px;
    color: var(--accent-gold);
}
.industry-card.industry-card--overlay .icon-circle-sm {
    background: linear-gradient(135deg, #c9a227 0%, #e6c660 100%);
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 0.8rem;
    transition: transform 0.3s, opacity 0.3s, box-shadow 0.3s, color 0.3s, background-color 0.3s, border-color 0.3s, filter 0.3s ease;
    align-self: flex-start;
    box-shadow: 0 4px 12px rgba(201,162,39,0.3);
}
.industry-card.industry-card--overlay .icon-circle-sm i {
    color: var(--primary-blue);
    font-size: 1.1rem;
}
.industry-card.industry-card--overlay:hover .icon-circle-sm {
    transform: scale(1.12) rotate(-4deg);
    box-shadow: 0 8px 24px rgba(201,162,39,0.45);
}
.industry-card.industry-card--overlay:hover {
    border: 1px solid var(--accent-gold);
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
}

/* Equipment Category Cards — treatment stage organized */
.equipment-categories-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}
.equipment-category-card {
    background: var(--white);
    border: 1px solid var(--border-gray);
    border-radius: 12px;
    padding: 28px;
    transition: transform 0.3s, opacity 0.3s, box-shadow 0.3s, color 0.3s, background-color 0.3s, border-color 0.3s, filter 0.3s ease;
    border-top: 4px solid var(--success-green);
    display: flex;
    flex-direction: column;
}
.equipment-category-card:hover {
    box-shadow: 0 12px 24px rgba(0,0,0,0.08);
    transform: translateY(-4px);
    border-color: var(--primary-blue);
}
.equipment-category-card h3 {
    font-size: 1.125rem;
    color: var(--primary-navy);
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    gap: 10px;
}
.equipment-category-card h3 i {
    color: var(--primary-blue);
    font-size: 1.25rem;
}
.equipment-category-card ul {
    list-style: none;
    padding: 0;
    margin: 0 0 1.25rem;
}
.equipment-category-card ul li {
    padding: 0.35rem 0;
    color: var(--text-medium);
    font-size: 0.9375rem;
    position: relative;
    padding-left: 1rem;
}
.equipment-category-card ul li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.85rem;
    width: 5px;
    height: 5px;
    background: var(--primary-blue);
    border-radius: 50%;
}
.equipment-category-card .explore-link {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--primary-blue);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: auto;
}
.equipment-category-card .explore-link:hover {
    color: var(--primary-navy);
}
.equipment-category-card.flagship {
    border-top-color: var(--primary-blue);
}
.equipment-category-card.flagship .flagship-badge {
    display: inline-block;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    background: var(--primary-blue);
    color: var(--white);
    padding: 3px 8px;
    border-radius: 4px;
    margin-left: auto;
}
.equipment-category-card.catalog-card {
    border-top-color: var(--accent-gold);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}
.equipment-category-card.catalog-card i {
    font-size: 2.5rem;
    color: var(--primary-blue);
    margin-bottom: 1rem;
}
.equipment-category-card.catalog-card h3 {
    justify-content: center;
}

/* Services Layout — 3 top + 2 bottom */
.services-grid-top {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin-bottom: 24px;
}
.services-grid-bottom {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
    max-width: 800px;
    margin: 0 auto;
}
.service-card {
    background: var(--white);
    border: 1px solid var(--border-gray);
    border-radius: 12px;
    padding: 32px;
    text-align: center;
    transition: transform 0.3s, opacity 0.3s, box-shadow 0.3s, color 0.3s, background-color 0.3s, border-color 0.3s, filter 0.3s ease;
}
.service-card:hover {
    box-shadow: var(--shadow-lg);
    transform: translateY(-3px);
    border-color: var(--primary-blue);
}
.service-card i {
    font-size: 2.5rem;
    color: var(--primary-blue);
    margin-bottom: 1rem;
    display: block;
}
.service-card h3 {
    font-size: 1.125rem;
    margin-bottom: 0.75rem;
}
.service-card p {
    font-size: 0.9375rem;
    color: var(--text-medium);
    margin-bottom: 1.25rem;
    line-height: 1.6;
}
.service-card .learn-more {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--primary-blue);
}
.service-card .learn-more:hover {
    color: var(--primary-navy);
}

/* Feature Card Grid — replaces inline benefit-grid/benefit-item pattern */
.feature-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.5rem;
    margin-top: 1.5rem;
}
.feature-card {
    background: var(--white);
    border: 1px solid var(--border-gray);
    border-radius: 12px;
    padding: 1.5rem;
    transition: transform .3s ease, opacity .3s ease, box-shadow .3s ease, color .3s ease, background-color .3s ease, border-color .3s ease, filter .3s ease;
    display: flex;
    flex-direction: column;
}
.feature-card:hover {
    box-shadow: var(--shadow-md);
    border-color: var(--primary-blue);
    transform: translateY(-4px);
}
/* Subpage-card look: plain large blue icon, no circle badge. Applied to the
   trio-style feature cards (feature-card with an .icon-circle) sitewide. */
.feature-card .icon-circle {
    width: auto;
    height: auto;
    background: none;
    border-radius: 0;
    display: block;
    margin-bottom: 1rem;
    line-height: 1;
}
.feature-card .icon-circle i {
    font-size: 2rem;
    color: var(--primary-blue);
    display: block;
}
.feature-card h4 {
    color: var(--primary-navy);
    font-size: 1.1rem;
    margin-bottom: .5rem;
    font-weight: 700;
    line-height: 1.3;
}
.feature-card p {
    color: var(--text-medium);
    font-size: .9rem;
    margin-bottom: 1rem;
    line-height: 1.5;
}
.feature-card p a {
    color: var(--primary-blue);
    font-weight: 600;
}

/* Case Study Section */
.case-study-section {
    background: var(--light-gray);
}
.case-study-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 48px;
    align-items: center;
}
.case-study-media {
    border-radius: 12px;
    overflow: hidden;
    background: var(--primary-navy);
    min-height: 320px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.case-study-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.case-study-content h3 {
    font-size: 1.75rem;
    margin-bottom: 1rem;
}
.case-study-content p {
    font-size: 1.0625rem;
    line-height: 1.7;
    margin-bottom: 1.5rem;
}
.case-study-stats {
    list-style: none;
    padding: 0;
    margin: 0 0 1.5rem;
}
.case-study-stats li {
    padding: 0.5rem 0;
    color: var(--text-medium);
    display: flex;
    align-items: flex-start;
    gap: 10px;
}
.case-study-stats li i {
    color: var(--success-green);
    margin-top: 0.25rem;
    flex-shrink: 0;
}
.case-study-stats li strong {
    color: var(--primary-navy);
}
.case-study-buttons {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

/* Resources Section */
.resources-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin-bottom: 2.5rem;
}
.resource-card {
    background: var(--white);
    border: 1px solid var(--border-gray);
    border-radius: 12px;
    padding: 28px;
    transition: transform 0.3s, opacity 0.3s, box-shadow 0.3s, color 0.3s, background-color 0.3s, border-color 0.3s, filter 0.3s ease;
    display: flex;
    flex-direction: column;
}
.resource-card:hover {
    box-shadow: var(--shadow-lg);
    transform: translateY(-3px);
    border-color: var(--primary-blue);
}
.resource-card i {
    font-size: 2rem;
    color: var(--primary-blue);
    margin-bottom: 1rem;
}
.resource-card .resource-type {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--text-light);
    margin-bottom: 0.5rem;
}
.resource-card h3 {
    font-size: 1.125rem;
    margin-bottom: 0.75rem;
}
.resource-card p {
    font-size: 0.9375rem;
    color: var(--text-medium);
    margin-bottom: 1.25rem;
}
.resource-card .resource-link {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--primary-blue);
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.resource-card .resource-link:hover {
    color: var(--primary-navy);
}

.resource-card .btn {
    margin-top: auto;
}

/* Email subscribe banner */
.subscribe-banner {
    background: linear-gradient(135deg, var(--primary-navy) 0%, #0d3a5c 100%);
    border-radius: 12px;
    padding: 40px;
    color: var(--white);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
    flex-wrap: wrap;
}
.subscribe-banner h3 {
    color: var(--white);
    font-size: 1.25rem;
    margin-bottom: 0.5rem;
}
.subscribe-banner p {
    color: rgba(255,255,255,0.8);
    margin-bottom: 0;
    font-size: 0.9375rem;
}
.subscribe-form {
    display: flex;
    gap: 10px;
    min-width: 320px;
}
.subscribe-form input {
    flex: 1;
    padding: 12px 16px;
    border: 1px solid rgba(255,255,255,0.2);
    border-radius: 6px;
    background: rgba(255,255,255,0.1);
    color: var(--white);
    font-size: 0.9375rem;
}
.subscribe-form input::placeholder {
    color: rgba(255,255,255,0.5);
}
.subscribe-form button {
    padding: 12px 24px;
    background: var(--primary-blue);
    color: var(--white);
    border: none;
    border-radius: 6px;
    font-size: 0.9375rem;
    font-weight: 500;
    cursor: pointer;
    white-space: nowrap;
}
.subscribe-form button:hover {
    background: #0052a3;
}

/* Compliance & Certifications */
.compliance-section {
    padding: 64px 0;
    background: linear-gradient(135deg, var(--primary-navy) 0%, #0d3b66 50%, var(--primary-blue) 100%);
    position: relative;
    overflow: hidden;
}
.compliance-section::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -20%;
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, rgba(255,255,255,0.04) 0%, transparent 70%);
    border-radius: 50%;
}
.compliance-section .container {
    position: relative;
    z-index: 2;
}
.compliance-section .section-header .section-title,
.compliance-section .section-header .section-label {
    color: var(--white);
}
.compliance-section .compliance-note {
    color: rgba(255,255,255,0.7);
}
.compliance-grid {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 32px;
    flex-wrap: wrap;
}
.compliance-badge {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 18px 22px;
    border-radius: 10px;
    background: var(--white);
    min-width: 110px;
    transition: transform 0.3s, opacity 0.3s, box-shadow 0.3s, color 0.3s, background-color 0.3s, border-color 0.3s, filter 0.3s ease;
    filter: grayscale(0);
    opacity: 1;
    box-shadow: 0 4px 16px rgba(0,0,0,0.12);
}
.compliance-badge:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 28px rgba(0,0,0,0.18);
    background: #f0f4f8;
}
.compliance-badge .badge-code {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--primary-navy);
    line-height: 1.2;
}
.compliance-badge .badge-name {
    font-size: 0.75rem;
    color: var(--text-light);
    margin-top: 4px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.compliance-note {
    text-align: center;
    margin-top: 1.5rem;
    font-size: 0.9375rem;
    color: var(--text-medium);
}

/* Scoped override: compliance badges used inside cards as inline tags */
.card .compliance-badge {
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    min-width: auto;
    filter: none;
    opacity: 1;
    background: var(--primary-light);
    color: var(--primary-navy);
    font-size: 0.875rem;
    font-weight: 500;
    border-radius: 6px;
    margin: 0 4px 6px 0;
    border: 1px solid rgba(0,102,204,0.15);
    cursor: default;
}
.card .compliance-badge:hover {
    background: #d6e8f7;
    filter: none;
    opacity: 1;
}
.card .compliance-badge a {
    color: var(--primary-navy);
    text-decoration: none;
    font-weight: 500;
}
.card .compliance-badge a:hover {
    color: var(--primary-blue);
}
.card .compliance-badge i {
    color: var(--success-green) !important;
    font-size: 0.75rem;
    margin-right: 0 !important;
}

/* Updated Footer — 6 columns matching nav pillars */
/* .footer-grid-4 is now aliased to .footer-grid above */

/* Exit-Intent Modal */
.exit-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.55);
    backdrop-filter: blur(4px);
    z-index: 9999;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}
.exit-modal-overlay.active {
    display: flex;
}
.exit-modal {
    background: var(--white);
    border-radius: 20px;
    padding: 2.5rem 2rem;
    max-width: 520px;
    width: 100%;
    box-shadow: 0 20px 60px rgba(0,0,0,0.25);
    position: relative;
    text-align: center;
    animation: exitModalIn .35s ease;
}
@keyframes exitModalIn {
    from { opacity: 0; transform: translateY(30px) scale(0.95); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}
.exit-modal-close {
    position: absolute;
    top: 16px;
    right: 20px;
    background: none;
    border: none;
    font-size: 1.75rem;
    color: var(--text-light);
    cursor: pointer;
    line-height: 1;
    padding: 0;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    transition: transform .2s ease, opacity .2s ease, box-shadow .2s ease, color .2s ease, background-color .2s ease, border-color .2s ease, filter .2s ease;
}
.exit-modal-close:hover {
    background: var(--light-gray);
    color: var(--primary-navy);
}
.exit-modal-icon {
    width: 64px;
    height: 64px;
    background: var(--primary-light);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.25rem;
}
.exit-modal-icon i {
    font-size: 1.75rem;
    color: var(--primary-blue);
}
.exit-modal h3 {
    color: var(--primary-navy);
    font-size: 1.5rem;
    margin-bottom: .5rem;
}
.exit-modal p {
    color: var(--text-medium);
    font-size: 1rem;
    margin-bottom: 1.5rem;
    line-height: 1.5;
}
.exit-modal-links {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin-bottom: 1.25rem;
}
.exit-modal-link {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .5rem;
    padding: 1.25rem 1rem;
    background: var(--light-gray);
    border-radius: 12px;
    text-decoration: none;
    color: var(--primary-navy);
    font-weight: 600;
    font-size: .9375rem;
    transition: transform .2s ease, opacity .2s ease, box-shadow .2s ease, color .2s ease, background-color .2s ease, border-color .2s ease, filter .2s ease;
    border: 2px solid transparent;
}
.exit-modal-link:hover {
    background: var(--primary-light);
    border-color: var(--primary-blue);
    transform: translateY(-2px);
}
.exit-modal-link i {
    font-size: 1.5rem;
    color: var(--primary-blue);
}
.exit-modal-dismiss {
    background: none;
    border: none;
    color: var(--text-light);
    font-size: .875rem;
    cursor: pointer;
    text-decoration: underline;
    padding: .5rem;
}
.exit-modal-dismiss:hover {
    color: var(--text-medium);
}
.footer-social {
    display: flex;
    gap: 16px;
    margin-top: 1rem;
}
.footer-social a {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(255,255,255,0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255,255,255,0.7);
    transition: transform 0.2s, opacity 0.2s, box-shadow 0.2s, color 0.2s, background-color 0.2s, border-color 0.2s, filter 0.2s ease;
}
.footer-social a:hover {
    background: var(--primary-blue);
    color: var(--white);
}

/* Ensure all icons are blue by default */
.icon-blue,
.card i.icon-2x,
.equipment-category-card h3 i,
.service-card i,
.resource-card i,
.industry-card i,
.compliance-badge i {
    color: var(--primary-blue);
}

/* Icon exceptions where different color makes sense */
.icon-green { color: var(--success-green) !important; }
.icon-gold { color: var(--accent-gold) !important; }
.icon-white { color: var(--white) !important; }

/* Responsive for new components */
@media (max-width: 1024px) {
    .industry-cards-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .equipment-categories-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .services-grid-top {
        grid-template-columns: repeat(2, 1fr);
    }
    .services-grid-bottom {
        grid-template-columns: repeat(2, 1fr);
        max-width: 100%;
    }
    .case-study-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 32px;
    }
    .resources-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    /* .footer-grid-4 responsive handled in .footer-grid rules above */
}

@media (max-width: 768px) {
    .section-header-flex {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }
    .industry-cards-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .industry-card-image {
        height: 160px;
    }
    .equipment-categories-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .services-grid-top,
    .services-grid-bottom {
        grid-template-columns: repeat(2, 1fr);
    }
    .resources-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .subscribe-banner {
        flex-direction: column;
        text-align: center;
        padding: 28px 24px;
    }
    .subscribe-form {
        min-width: 100%;
        flex-direction: column;
    }
    .subscribe-form input,
    .subscribe-form button {
        width: 100%;
    }
    .compliance-grid {
        gap: 16px;
    }
    .compliance-badge {
        min-width: 80px;
        padding: 12px 14px;
    }
    /* .footer-grid-4 responsive handled in .footer-grid rules above */
    .case-study-media {
        min-height: 240px;
        order: -1;
    }
    .case-study-buttons {
        flex-direction: column;
    }
    .case-study-buttons .btn {
        width: 100%;
    }
    .exit-modal {
        padding: 2rem 1.25rem;
        border-radius: 16px;
    }
    .exit-modal h3 {
        font-size: 1.25rem;
    }
    .exit-modal-links {
        grid-template-columns: repeat(2, 1fr);
    }
    .exit-modal-link {
        padding: 1rem;
        flex-direction: row;
        justify-content: center;
    }
}

/* Industry deep-dive sections (for /industries page) */
.industry-deep-dive {
    padding: 48px 0;
    border-bottom: 1px solid var(--border-gray);
}
.industry-deep-dive:last-child {
    border-bottom: none;
}
.industry-deep-dive h2 {
    font-size: 1.5rem;
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    gap: 10px;
}
.industry-deep-dive h2 i {
    color: var(--primary-blue);
}
.industry-deep-dive .challenge-list {
    background: var(--light-gray);
    border-radius: 8px;
    padding: 20px;
    margin: 1rem 0;
}
.industry-deep-dive .challenge-list h4 {
    font-size: 0.9375rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-light);
    margin-bottom: 0.75rem;
}
.industry-deep-dive .challenge-list ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
.industry-deep-dive .challenge-list ul li {
    padding: 0.35rem 0;
    color: var(--text-medium);
    font-size: 0.9375rem;
    display: flex;
    align-items: flex-start;
    gap: 8px;
}
.industry-deep-dive .challenge-list ul li i {
    color: var(--primary-blue);
    margin-top: 0.2rem;
    font-size: 0.875rem;
}
.industry-deep-dive .key-equipment {
    margin-top: 1.25rem;
}
.industry-deep-dive .key-equipment h4 {
    font-size: 0.9375rem;
    margin-bottom: 0.5rem;
}
.industry-deep-dive .key-equipment p {
    font-size: 0.9375rem;
    color: var(--text-medium);
}
.industry-deep-dive .compliance-note {
    margin-top: 1rem;
    padding: 12px 16px;
    background: var(--primary-light);
    border-radius: 8px;
    border-left: 3px solid var(--primary-blue);
    font-size: 0.875rem;
    color: var(--text-medium);
}

/* Industries at a glance table (filterable grid) */
.industries-glance-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 16px;
}
.industry-glance-card {
    background: var(--white);
    border: 1px solid var(--border-gray);
    border-radius: 8px;
    padding: 20px;
    transition: transform 0.2s, opacity 0.2s, box-shadow 0.2s, color 0.2s, background-color 0.2s, border-color 0.2s, filter 0.2s ease;
    text-decoration: none;
    display: block;
}
.industry-glance-card:hover {
    border-color: var(--primary-blue);
    box-shadow: var(--shadow-md);
}
.industry-glance-card h4 {
    font-size: 1rem;
    margin-bottom: 0.25rem;
    color: var(--primary-navy);
}
.industry-glance-card p {
    font-size: 0.875rem;
    color: var(--text-light);
    margin: 0;
}
.industry-glance-card.core {
    border-left: 4px solid var(--primary-blue);
}
.industry-glance-card.tier2 {
    border-left: 4px solid var(--success-green);
}

/* ============================================
   ROI CALCULATOR STYLES
   ============================================ */

.calculator-section {
    padding: 60px 0;
}

.calculator-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 48px;
    align-items: start;
}

.calculator-panel {
    background: var(--white);
    border: 1px solid var(--border-gray);
    border-radius: 12px;
    padding: 32px;
}

.calculator-panel h3 {
    font-size: 1.25rem;
    margin-bottom: 1.5rem;
    display: flex;
    align-items: center;
    gap: 10px;
}

.calculator-panel h3 i {
    color: var(--primary-blue);
}

.form-group {
    margin-bottom: 20px;
}

.form-group label {
    display: block;
    font-size: 0.9375rem;
    font-weight: 500;
    color: var(--primary-navy);
    margin-bottom: 6px;
}

.form-group .hint {
    font-size: 0.8125rem;
    color: var(--text-light);
    margin-bottom: 6px;
}

.form-control {
    width: 100%;
    padding: 12px 16px;
    border: 1px solid var(--border-gray);
    border-radius: 8px;
    font-size: 0.9375rem;
    font-family: var(--font-primary);
    color: var(--text-dark);
    background: var(--white);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.form-control:focus {
    border-color: var(--primary-blue);
    outline: none;
    box-shadow: 0 0 0 3px rgba(0, 102, 204, 0.1);
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.results-panel {
    background: linear-gradient(135deg, var(--primary-navy) 0%, #0d3a5c 100%);
    border-radius: 12px;
    padding: 32px;
    color: var(--white);
    position: sticky;
    top: 90px;
}

.results-panel h3 {
    color: var(--white);
    font-size: 1.25rem;
    margin-bottom: 1.5rem;
    display: flex;
    align-items: center;
    gap: 10px;
}

.results-panel h3 i {
    color: var(--accent-gold);
}

.result-item {
    padding: 14px 0;
    border-bottom: 1px solid rgba(255,255,255,0.1);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.result-item:last-child {
    border-bottom: none;
}

.result-label {
    font-size: 0.9375rem;
    color: rgba(255,255,255,0.8);
}

.result-value {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--white);
    text-align: right;
}

.result-value.highlight {
    color: var(--accent-gold);
    font-size: 1.375rem;
}

.result-value.positive {
    color: #34d399;
}

.result-divider {
    height: 1px;
    background: rgba(255,255,255,0.2);
    margin: 8px 0;
}

.payback-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--accent-gold);
    color: var(--primary-navy);
    padding: 10px 20px;
    border-radius: 8px;
    font-weight: 600;
    font-size: 1rem;
    margin-top: 8px;
}

.chart-bar {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 10px 0;
}

.chart-label {
    font-size: 0.8125rem;
    color: rgba(255,255,255,0.7);
    min-width: 120px;
    text-align: right;
}

.chart-track {
    flex: 1;
    height: 24px;
    background: rgba(255,255,255,0.1);
    border-radius: 4px;
    overflow: hidden;
}

.chart-fill {
    height: 100%;
    border-radius: 4px;
    transition: width 0.5s ease;
}

.chart-fill.savings { background: #34d399; }
.chart-fill.cost { background: #f87171; }
.chart-fill.neutral { background: #60a5fa; }

.chart-value {
    font-size: 0.8125rem;
    color: var(--white);
    min-width: 70px;
    text-align: right;
    font-weight: 500;
}

.calculator-actions {
    margin-top: 24px;
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.btn-outline-light {
    background: transparent;
    color: var(--white);
    border: 1px solid rgba(255,255,255,0.3);
    padding: 10px 20px;
    border-radius: 6px;
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: transform 0.2s, opacity 0.2s, box-shadow 0.2s, color 0.2s, background-color 0.2s, border-color 0.2s, filter 0.2s ease;
}

.btn-outline-light:hover {
    background: rgba(255,255,255,0.1);
    border-color: rgba(255,255,255,0.5);
}

.calculator-intro {
    max-width: 800px;
    margin: 0 auto 3rem;
    text-align: center;
}

.calculator-intro p {
    font-size: 1.0625rem;
    color: var(--text-medium);
    line-height: 1.7;
}

.assumptions-box {
    background: var(--light-gray);
    border-radius: 8px;
    padding: 16px 20px;
    margin-top: 20px;
}

.assumptions-box h4 {
    font-size: 0.875rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-light);
    margin-bottom: 0.5rem;
}

.assumptions-box ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.assumptions-box ul li {
    font-size: 0.875rem;
    color: var(--text-medium);
    padding: 3px 0;
}

.unit-toggle {
    display: inline-flex;
    background: var(--light-gray);
    border-radius: 6px;
    padding: 3px;
    margin-bottom: 1rem;
}

.unit-toggle button {
    padding: 6px 14px;
    border: none;
    background: transparent;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--text-medium);
    cursor: pointer;
    border-radius: 4px;
    transition: transform 0.2s, opacity 0.2s, box-shadow 0.2s, color 0.2s, background-color 0.2s, border-color 0.2s, filter 0.2s ease;
}

.unit-toggle button.active {
    background: var(--white);
    color: var(--primary-navy);
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

@media (max-width: 1024px) {
    .calculator-layout {
        grid-template-columns: repeat(2, 1fr);
    }
    .results-panel {
        position: static;
    }
}

@media (max-width: 768px) {
    .form-row {
        grid-template-columns: repeat(2, 1fr);
    }
    .calculator-panel {
        padding: 24px;
    }
    .results-panel {
        padding: 24px;
    }
    .chart-label {
        min-width: 90px;
    }
}

/* ====== CARD VARIANTS — COMPACT DISPLAY CONTROL ====== */
.card-bordered {
    background: var(--white);
    border: 1px solid var(--border-gray);
    border-radius: var(--radius-lg);
    padding: 1rem;
    transition: var(--transition-smooth);
}
.card-bordered:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
}

.card-shadow {
    background: var(--white);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    transition: var(--transition-smooth);
}
.card-shadow:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
}

.card-gradient-header {
    padding: 1rem;
    color: var(--white);
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}
.card-gradient-header h3 {
    color: var(--white);
    margin-bottom: 0.5rem;
    font-size: 1.15rem;
}
.card-gradient-header p {
    opacity: 0.9;
    font-size: 0.875rem;
    margin: 0;
}

.card-body-padded {
    padding: 1rem;
}

.card-checklist {
    list-style: none;
    padding: 0;
    margin: 0 0 1rem 0;
    font-size: 0.875rem;
    color: var(--text-medium);
}
.card-checklist li {
    padding: 0.4rem 0;
    display: flex;
    align-items: center;
    gap: 8px;
}
.card-checklist i {
    color: var(--success-green);
}

.card-footer-note {
    padding-top: 1rem;
    border-top: 1px solid var(--border-gray);
    font-size: 0.8125rem;
    color: var(--text-medium);
}

.value-highlight {
    margin-top: auto;
    font-size: 0.8125rem;
    color: var(--success-green);
    font-weight: 600;
}

.border-left-blue { border-left: 4px solid var(--primary-blue) !important; }
.border-left-green { border-left: 4px solid var(--success-green) !important; }
.border-left-orange { border-left: 4px solid #ff9800 !important; }
.border-left-purple { border-left: 4px solid #9c27b0 !important; }

.bg-gradient-blue { background: linear-gradient(135deg, #1565c0 0%, #42a5f5 100%); }
.bg-gradient-green { background: linear-gradient(135deg, #2e7d32 0%, #66bb6a 100%); }
.bg-gradient-orange { background: linear-gradient(135deg, #e65100 0%, #ff9800 100%); }
.bg-gradient-purple { background: linear-gradient(135deg, #6a1b9a 0%, #ab47bc 100%); }
.bg-gradient-teal { background: linear-gradient(135deg, #00695c 0%, #26a69a 100%); }
.bg-gradient-red { background: linear-gradient(135deg, #c62828 0%, #ef5350 100%); }

/* Trust badges bar */
.trust-bar { background: #fff; border-top: 1px solid #e8ecf1; border-bottom: 1px solid #e8ecf1; padding: 1.75rem 0; }
.trust-grid { display: flex; justify-content: center; align-items: center; gap: 2.5rem; flex-wrap: wrap; }
.trust-item { display: flex; align-items: center; gap: 0.5rem; color: var(--text-medium); font-size: 0.85rem; font-weight: 500; }
.trust-item i { color: var(--primary-blue); font-size: 1rem; }
@media (max-width: 768px) { .trust-grid { gap: 1rem; } .trust-item { font-size: 0.875rem; } }

/* Feature highlight box */
.feature-highlight {
    background: var(--primary-light);
    border-left: 4px solid var(--primary-blue);
    padding: 1rem;
    border-radius: 0 12px 12px 0;
    margin: 1.5rem 0;
}

/* Method card (numbered/recovery methods) */
.method-card {
    background: var(--white);
    border: 1px solid var(--border-gray);
    border-radius: 8px;
    padding: 1rem;
    margin-bottom: 1rem;
}

/* Reuse card (water reuse applications) */
.reuse-card {
    background: var(--white);
    border: 1px solid var(--border-gray);
    border-radius: 8px;
    padding: 1rem;
    margin-bottom: 1rem;
}

/* Exchanger card (heat exchanger info) */
.exchanger-card {
    background: var(--white);
    border: 1px solid var(--border-gray);
    border-radius: 8px;
    padding: 1rem;
    margin-bottom: 1rem;
}

/* pH source card variants */
.ph-source-card {
    border-radius: 12px;
    padding: 1rem;
    border-left: 4px solid;
}
.ph-source-orange {
    background: linear-gradient(135deg, #fff3e0 0%, #ffe0b2 100%);
    border-left-color: #ff9800;
}
.ph-source-blue {
    background: linear-gradient(135deg, #e3f2fd 0%, #bbdefb 100%);
    border-left-color: #2196f3;
}
.ph-source-pink {
    background: linear-gradient(135deg, #fce4ec 0%, #f8bbd9 100%);
    border-left-color: #e91e63;
}

/* Temperature card variants */
.temp-card {
    border-radius: 12px;
    padding: 1rem;
    border-left: 4px solid;
}
.temp-red {
    background: linear-gradient(135deg, #ffebee 0%, #ffcdd2 100%);
    border-left-color: #f44336;
}
.temp-green {
    background: linear-gradient(135deg, #e8f5e9 0%, #c8e6c9 100%);
    border-left-color: #4caf50;
}
.temp-blue {
    background: linear-gradient(135deg, #e3f2fd 0%, #bbdefb 100%);
    border-left-color: #2196f3;
}

/* ============================================
   UNIFIED BUTTON SPACING IN CONTAINERS
   Ensures buttons never touch text or borders
   ============================================ */

/* Base: all buttons inside content containers get minimum top spacing */
.card .btn,
.feature-card .btn,
.process-step .btn,
.service-strip-card .btn,
.standard-card .btn,
.solution-card .btn,
.application-card .btn,
.instrument-card .btn,
.related-card .btn,
.tool-card .btn,
.equipment-card .btn,
.solution-type-card .btn,
.source-card .btn,
.industry-card .btn,
.tech-card .btn,
.feature-highlight .btn,
.note-box .btn,
.method-card .btn,
.reuse-card .btn,
.exchanger-card .btn,
.ph-source-card .btn,
.temp-card .btn,
.spec-card .btn,
.config-card .btn,
.benefit-card .btn,
.equipment-tag .btn {
    margin-top: 1rem;
}

/* Flex containers: push button to bottom when extra space exists */
.card .btn,
.feature-card .btn,
.process-step .btn,
.service-strip-card .btn,
.standard-card .btn,
.solution-card .btn,
.application-card .btn,
.industry-card .btn,
.service-card-pilot .btn,
.solution-type-card .btn {
    margin-top: auto;
    align-self: flex-start;
}

/* Utility override: explicit margin-top when needed */
.mt-1 { margin-top: 1rem; }
.mt-2 { margin-top: 2rem; }
.mt-1-5 { margin-top: 1.5rem !important; }
.mt-3 { margin-top: 3rem; }
.mb-1 { margin-bottom: 1rem; }
.mb-2 { margin-bottom: 2rem; }
.my-1 { margin-top: 1rem; margin-bottom: 1rem; }
.mb-05 { margin-bottom: 0.5rem; }

/* ============================================
   CSS UNIFICATION & TEXT READABILITY NORMALIZATION
   Ensures consistent display and readable text
   across all pages and components.
   Load last so these override any conflicting
   rules above while maintaining design intent.
   ============================================ */

/* ---- TEXT READABILITY: Minimum standards ---- */
/* Ensure no body/UI text drops below 14px (0.875rem) */
p, li, td, th, label, input, textarea, select, button,
.card p, .feature-card p, .service-card p, .product-card p,
.tech-card p, .solution-type-card p, .standard-card p,
.equipment-card p, .capability-card p, .step-card p,
.process-step p, .feature-item p, .service-strip-card p {
    font-size: max(0.875rem, inherit);
}

/* Ensure minimum line-height for readable paragraphs */
p, .card p, .feature-card p, .service-card p,
.tech-card p, .note-box p, .feature-highlight p,
.method-card p, .reuse-card p, .process-step p {
    line-height: max(1.5, inherit);
}

/* Headings: minimum line-height for clarity */
h1, h2, h3, h4, h5, h6,
.card h3, .feature-card h3, .feature-card h4,
.service-card h3, .tech-card h3, .process-step h3 {
    line-height: max(1.3, inherit);
}

/* ---- CONSISTENT CARD PADDING ---- */
/* Normalize padding across card variants for visual rhythm */
.card, .feature-card, .service-card, .product-card,
.equipment-card, .tech-card, .step-card, .tool-card,
.standard-card, .solution-type-card, .service-card-pilot {
    padding: max(1.25rem, var(--card-padding, 1.25rem));
}

/* ---- CONSISTENT BORDER RADIUS ---- */
/* Use CSS variable radius scale consistently */
.card, .feature-card, .service-card, .product-card,
.equipment-card, .tech-card, .step-card,
.standard-card, .solution-type-card, .service-card-pilot,
.feature-highlight, .note-box, .method-card, .reuse-card {
    border-radius: var(--radius-md, 12px);
}

/* ---- BUTTON SPACING UNIFICATION ---- */
/* All buttons inside content containers get minimum top spacing */
.card .btn, .feature-card .btn, .service-card .btn,
.product-card .btn, .equipment-card .btn, .tech-card .btn,
.step-card .btn, .tool-card .btn, .standard-card .btn,
.solution-type-card .btn, .service-card-pilot .btn,
.process-step .btn, .service-strip-card .btn,
.feature-highlight .btn, .note-box .btn, .method-card .btn,
.reuse-card .btn, .exchanger-card .btn, .ph-source-card .btn,
.temp-card .btn, .spec-card .btn, .config-card .btn {
    margin-top: 1rem;
}

/* Flex containers: push button to bottom */
.card .btn, .feature-card .btn, .process-step .btn,
.service-strip-card .btn, .standard-card .btn,
.solution-card .btn, .application-card .btn,
.industry-card .btn, .service-card-pilot .btn,
.solution-type-card .btn {
    margin-top: auto;
}

/* ---- CONSISTENT HOVER TRANSFORMS ---- */
/* Vertical lift only — no lateral shifts for UX consistency */
.card:hover, .feature-card:hover, .service-card:hover,
.product-card:hover, .equipment-card:hover, .tech-card:hover,
.step-card:hover, .tool-card:hover, .standard-card:hover,
.solution-type-card:hover, .service-card-pilot:hover,
.process-step:hover, .service-strip-card:hover,
.feature-item:hover, .benefit-item:hover {
    transform: translateY(var(--hover-lift, -4px));
}

/* Remove any conflicting horizontal transforms */
.component-card:hover,
.feature-item:hover {
    transform: translateY(-4px);
}

/* ---- CONSISTENT TRANSITIONS ---- */
/* Smooth transitions on all interactive elements */
.card, .feature-card, .service-card, .product-card,
.equipment-card, .tech-card, .step-card, .tool-card,
.btn, .btn-primary, .btn-secondary, .industry-tag,
.nav-link, .dropdown-link, .footer-links a {
    transition: transform 0.3s, opacity 0.3s, box-shadow 0.3s, color 0.3s, background-color 0.3s, border-color 0.3s, filter 0.3s ease;
}

/* ---- COLOR CONTRAST SAFEGUARDS ---- */
/* Ensure text on light backgrounds is dark enough */
.card p, .feature-card p, .service-card p,
.note-box p, .feature-highlight p, .method-card p,
.reuse-card p, .spec-card p, .config-card p {
    color: var(--text-medium);
}

/* Ensure headings are sufficiently dark */
.card h3, .feature-card h3, .feature-card h4,
.service-card h3, .tech-card h3, .step-card h3,
.standard-card h3, .solution-type-card h3 {
    color: var(--primary-navy);
}

/* ---- FOCUS STATES FOR ACCESSIBILITY ---- */
a:focus-visible, button:focus-visible, .btn:focus-visible,
.nav-link:focus-visible, .dropdown-link:focus-visible {
    outline: 2px solid var(--primary-blue);
    outline-offset: 2px;
}

/* ---- TOUCH TARGET SIZING (mobile accessibility) ---- */
/* WCAG 2.5.5 / Apple HIG / Material Design require min 44x44 CSS px tap targets.
   Apply on coarse pointers (touch screens) only, so mouse users keep tight desktop layouts. */
@media (pointer: coarse) {
    .nav-link, .dropdown-link, .footer-links a,
    .footer-bottom-links a, .footer-social a,
    .industry-tag, .nav-pill, .learn-more,
    .resource-link, .explore-link, .view-details-link,
    .btn, .btn-primary, .btn-secondary, .btn-gold,
    .menu-toggle, .lang-option, .trust-badge {
        min-height: 44px;
        min-width: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
    /* Block-level link variants need block layout, not inline-flex */
    .dropdown-link, .footer-links a, .nav-link {
        display: flex;
        align-items: center;
    }
    /* Footer social icons */
    .footer-social a {
        padding: 10px;
    }
    /* Footer-links use small font; ensure adequate vertical padding */
    .footer-links a {
        padding: 6px 0;
    }
    /* Industry tag pills need horizontal padding for 44px target */
    .industry-tag {
        padding: 10px 14px;
    }
}

/* ---- REDUCED MOTION (vestibular accessibility) ---- */
/* Honour the OS-level "reduce motion" preference */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ---- DARK-CARD READABILITY FIX ----
   Global h1-h6 { color: var(--primary-navy) } and p { color: var(--text-medium) }
   beat inherited color, so headings/paragraphs inside dark-background containers
   become unreadable (dark text on dark background). Explicit selectors + !important
   guarantee override regardless of :is() support and rule ordering. Covers
   process-overview cards on textile-*, pharmaceutical, research-facility pages. */
[style*="background:linear-gradient"][style*="color:#fff"] h1,
[style*="background:linear-gradient"][style*="color:#fff"] h2,
[style*="background:linear-gradient"][style*="color:#fff"] h3,
[style*="background:linear-gradient"][style*="color:#fff"] h4,
[style*="background:linear-gradient"][style*="color:#fff"] h5,
[style*="background:linear-gradient"][style*="color:#fff"] h6,
[style*="background: linear-gradient"][style*="color:#fff"] h1,
[style*="background: linear-gradient"][style*="color:#fff"] h2,
[style*="background: linear-gradient"][style*="color:#fff"] h3,
[style*="background: linear-gradient"][style*="color:#fff"] h4,
[style*="background: linear-gradient"][style*="color:#fff"] h5,
[style*="background: linear-gradient"][style*="color:#fff"] h6,
[style*="background:linear-gradient"][style*="color: #fff"] h1,
[style*="background:linear-gradient"][style*="color: #fff"] h2,
[style*="background:linear-gradient"][style*="color: #fff"] h3,
[style*="background:linear-gradient"][style*="color: #fff"] h4,
[style*="background:linear-gradient"][style*="color: #fff"] h5,
[style*="background:linear-gradient"][style*="color: #fff"] h6,
[style*="background:linear-gradient"][style*="color:white"] h1,
[style*="background:linear-gradient"][style*="color:white"] h2,
[style*="background:linear-gradient"][style*="color:white"] h3,
[style*="background:linear-gradient"][style*="color:white"] h4,
[style*="background:linear-gradient"][style*="color:white"] h5,
[style*="background:linear-gradient"][style*="color:white"] h6 {
    color: #fff !important;
}
[style*="background:linear-gradient"][style*="color:#fff"] p,
[style*="background: linear-gradient"][style*="color:#fff"] p,
[style*="background:linear-gradient"][style*="color: #fff"] p,
[style*="background:linear-gradient"][style*="color:white"] p {
    color: rgba(255,255,255,0.92) !important;
}
[style*="background:linear-gradient"][style*="color:#fff"] a:not(.btn),
[style*="background: linear-gradient"][style*="color:#fff"] a:not(.btn),
[style*="background:linear-gradient"][style*="color: #fff"] a:not(.btn),
[style*="background:linear-gradient"][style*="color:white"] a:not([class*="btn"]) {
    color: var(--accent-gold) !important;
}

/* ---- DARK CARD UTILITY CLASS (for new pages — preferred over inline styles) ---- */
.card-dark {
    background: linear-gradient(135deg, var(--primary-navy) 0%, #1e3a5f 100%);
    color: #fff;
    padding: 1.5rem;
    border-radius: 10px;
    transition: transform var(--transition-base), box-shadow var(--transition-base);
}
.card-dark:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
}
.card-dark h1, .card-dark h2, .card-dark h3,
.card-dark h4, .card-dark h5, .card-dark h6 {
    color: #fff !important;
}
.card-dark p {
    color: rgba(255, 255, 255, 0.9) !important;
}
.card-dark .num-badge,
.card-dark .step-circle {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--accent-gold);
    color: var(--primary-navy);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    margin-bottom: 0.75rem;
}
.card-dark a {
    color: var(--accent-gold);
    text-decoration: underline;
}
.card-dark a:hover {
    color: #fff;
}

/* ---- SCROLLBAR STYLING (subtle) ---- */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}
::-webkit-scrollbar-track {
    background: var(--light-gray);
}
::-webkit-scrollbar-thumb {
    background: var(--border-gray);
    border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
    background: var(--text-light);
}

/* ============================================
   COMPACT UTILITY CLASSES
   Replace common inline style patterns
   ============================================ */

/* Flex row with center alignment and gap */
.flex-row-center {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

/* Card header row: icon + title */
.card-header-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}

/* Card footer divider */
.card-footer-divider {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border-gray);
}

/* Tag container */
.tag-flex {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 1rem 0;
}

/* Inline icon spacing */
.icon-prefix {
    margin-right: 0.5rem;
}
.icon-suffix {
    margin-left: 0.5rem;
}

/* Gradient text */
.gradient-text {
    background: linear-gradient(135deg, var(--primary-navy) 0%, var(--primary-blue) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Glass effect for overlays */
.glass {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.15);
}

/* Subtle shadow container */
.shadow-subtle {
    box-shadow: 0 1px 3px rgba(10, 37, 64, 0.06);
}

/* Hover lift effect */
.hover-lift {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.hover-lift:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
}

/* Text truncation */
.truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Multi-line text clamp */
.line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.line-clamp-3 {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Aspect ratio containers */
.aspect-16-9 {
    aspect-ratio: 16 / 9;
}
.aspect-4-3 {
    aspect-ratio: 4 / 3;
}
.aspect-1-1 {
    aspect-ratio: 1 / 1;
}

/* Object fit */
.img-cover {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.img-contain {
    width: 100%;
    height: 100%;
    object-fit: contain;
}


/* ============================================== */
/* UTILITY CLASSES - Extracted from inline styles */
/* ============================================== */

/* Spacing */
.mr-8 { margin-right: 8px; }
.mt-12 { margin-top: 12px; }
.mt-1 { margin-top: 1rem; }
.ml-125 { margin-left: 1.25rem; }
.ml-15 { margin-left: 1.5rem; }
.mb-1 { margin-bottom: 1rem; }

/* Padding */
.py-3 { padding: 0.3rem 0; }
.py-4 { padding: 0.4rem 0; }
.py-35 { padding: 0.35rem 0; }
.p-816 { padding: 8px 10px; }
.p-12 { padding: 16px; }
.p-0501 { padding: 0.5rem 1rem; }
.p-04075 { padding: 0.4rem 0.75rem; }
.p-6-12 { padding: 6px 12px; }

/* Text sizing */
.text-sm { font-size: 0.875rem; }
.text-xs { font-size: 0.8125rem; }
.text-lg { font-size: 1.15rem; }
.text-3xl { font-size: 3rem; }

/* Text colors */
.text-primary-blue { color: var(--primary-blue); }
.text-medium { color: var(--text-medium); }
.text-navy { color: var(--primary-navy); }
.text-success { color: var(--success-green); }

/* Layout */
.flex-shrink-0 { flex-shrink: 0; }
.flex-start { display: flex; align-items: flex-start; gap: 8px; }
.inline-block { display: inline-block; }
.text-center { text-align: center; }

/* Width/Height */
.min-w-250 { min-width: 250px; }
.max-w-900 { max-width: 900px; margin-left: auto; margin-right: auto; }

/* Borders */
.border-bottom-soft { border-bottom: 1px solid var(--border-gray); }

/* Backgrounds */
.bg-white { background: var(--white); }
.bg-primary-light { background: var(--primary-light); }
.bg-light-gray { background: var(--light-gray); }
.bg-gradient-light { background: linear-gradient(135deg, var(--primary-light) 0%, #e8f0f8 100%); }

/* Icon boxes */
.icon-box {
    width: 52px;
    height: 52px;
    border-radius: 12px;
    background: linear-gradient(135deg, var(--primary-light) 0%, #e8f0f8 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1rem;
}

.icon-lg {
    font-size: 3rem;
    color: var(--primary-blue);
}

.icon-check {
    color: var(--success-green);
    margin-right: 8px;
}

.icon-check-sm {
    color: var(--success-green);
    margin-top: 0.25rem;
}

/* Components */
.tag-pill {
    background: var(--white);
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 0.8125rem;
    color: var(--primary-navy);
    font-weight: 500;
}

.highlight-box {
    background: var(--primary-light);
    padding: 0.5rem 1rem;
    border-radius: 8px;
}

.badge-soft {
    background: var(--light-gray);
    padding: 0.4rem 0.75rem;
    border-radius: 4px;
    font-size: 0.8125rem;
    color: var(--text-medium);
}

.link-small {
    font-size: 0.8125rem;
    color: var(--primary-blue);
    margin-top: 6px;
    display: inline-block;
}

.note-text {
    margin-top: 1rem;
    font-size: 0.875rem;
    margin-left: 1.25rem;
}

.indented-text {
    margin-left: 1.5rem;
    font-size: 0.875rem;
}

.table-cell {
    padding: 8px 10px;
    border-bottom: 1px solid var(--border-gray);
    text-align: center;
}

.text-muted-sm {
    font-size: 0.875rem;
    color: var(--text-medium);
    margin-bottom: 1rem;
}

.flex-item {
    padding: 0.35rem 0;
    color: var(--text-medium);
    display: flex;
    align-items: flex-start;
    gap: 8px;
}

.container-sm {
    max-width: 900px;
    margin: 0 auto;
}

.grid-auto {
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

.section-heading-box {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--primary-navy);
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid var(--primary-light);
}

.list-clean {
    list-style: none;
    padding: 0;
    margin-top: 1rem;
    font-size: 0.9375rem;
    color: var(--text-medium);
}


/* ============================================== */
/* MORE UTILITY CLASSES - Batch 2 */
/* ============================================== */

.justify-start { justify-content: flex-start; }

.py-25-sm { padding: 0.25rem 0; font-size: 0.875rem; color: var(--text-medium); }
.pl-15-medium { padding-left: 1.5rem; color: var(--text-medium); }

.code-block {
    font-family: monospace;
    background: var(--white);
    padding: 0.75rem;
    border-radius: 6px;
}

.m-05 { margin: 0.5rem; }
.py-05-border { padding: 0.5rem 0; border-bottom: 1px solid var(--border-gray); }

.icon-2xl { font-size: 2rem; color: var(--primary-blue); }
.icon-2xl-success { font-size: 2rem; color: var(--success-green); margin-bottom: 1rem; }

.icon-check-xs { color: var(--success-green); margin-right: 6px; font-size: 0.75rem; }

.mt-16-border { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--border-gray); }
.mt-3-mb-075 { margin-top: 3rem; margin-bottom: 0.75rem; }
.mt-3-mb-1 { margin-top: 3rem; margin-bottom: 1rem; }
.mt-3-only { margin-top: 3rem; }

.stat-box {
    background: var(--primary-light);
    padding: 1rem;
    border-radius: 8px;
    text-align: center;
}

.text-navy-mb { color: var(--primary-navy); margin-bottom: 0.75rem; }
.text-navy-mb-12 { color: var(--primary-navy); margin-bottom: 12px; }
.text-medium-mb-16 { color: var(--text-medium); margin-bottom: 16px; }

.mb-8 { margin-bottom: 8px; }
.mb-0 { margin-bottom: 0; }
.m-0 { margin: 0; }

.flex-start-20 {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    flex-wrap: wrap;
}

.flex-wrap-10 {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 16px;
}

.text-center { text-align: center; }
.text-left { text-align: left; }

.p-10-border { padding: 10px; border: 1px solid var(--border-gray); }
.p-10-center { padding: 10px; text-align: center; }

.text-body {
    margin-top: 1rem;
    color: var(--text-body);
    line-height: 1.7;
}

.m-05-0-0-15 { margin: 0.5rem 0 0 1.5rem; color: var(--text-medium); }

.w-full { width: 100%; }

.text-xs-medium-mb { font-size: 0.8125rem; color: var(--text-medium); margin-bottom: 0.5rem; }

.py-2 { padding: 0.2rem 0; }
.py-4-border { padding: 0.4rem 0; border-bottom: 1px solid var(--border-gray); }

.p-75 { padding: 0.75rem; }

.list-clean-short {
    list-style: none;
    padding: 0;
    margin-top: 1rem;
}

.color-inherit { color: inherit; }

.mr-6-blue { margin-right: 6px; color: var(--primary-blue); }
.mr-6 { margin-right: 6px; }


/* ============================================
   IMPORTED FROM v114 — Additional Styles
   ============================================ */

.btn-gold {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.875rem 2rem;
    font-size: 1rem;
    font-weight: 600;
    border-radius: 8px;
    text-decoration: none;
    cursor: pointer;
    transition: transform 0.3s, opacity 0.3s, box-shadow 0.3s, color 0.3s, background-color 0.3s, border-color 0.3s, filter 0.3s ease;
    background: linear-gradient(135deg, #c9a227 0%, #d4a83a 100%);
    color: #0a2540;
    border: none;
    box-shadow: 0 2px 8px rgba(201, 162, 39, 0.3);
}
.btn-gold:hover {
    background: linear-gradient(135deg, #d4a83a 0%, #e0b84a 100%);
    color: #0a2540;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(201, 162, 39, 0.4);
}

/* ============================================
   BUTTON DOWNLOAD
   ============================================ */
.btn-download {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 12px 24px;
    background: var(--primary-blue);
    color: var(--white);
    border-radius: 6px;
    text-decoration: none;
    font-weight: 500;
    transition: transform 0.2s, opacity 0.2s, box-shadow 0.2s, color 0.2s, background-color 0.2s, border-color 0.2s, filter 0.2s;
}
.btn-download:hover {
    background: #0052a3;
}
#datasheet .btn-download {
    width: 100%;
    justify-content: center;
    box-sizing: border-box;
}

/* ============================================
   SECTION IMAGE
   ============================================ */
.section-image {
    max-width: 1000px;
    margin: 0 auto 2.5rem;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 8px 30px rgba(0,0,0,0.12);
}
.section-image img {
    width: 100%;
    height: auto;
    display: block;
}

/* ============================================
   CALCULATOR HERO PADDING STANDARD
   ============================================ */
.calc-page-hero,
.calc-hero {
    padding: 100px 0 60px;
}
@media (max-width: 768px) {
    .calc-page-hero,
    .calc-hero {
        padding: 90px 0 50px;
    }
}
@media (max-width: 480px) {
    .calc-page-hero,
    .calc-hero {
        padding: 80px 0 40px;
    }
}

/* ============================================
   HERO FEATURES STANDARD — width consistency
   ============================================ */
.hero-features {
    display: grid;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 14px !important;
    margin-top: 2.5rem;
    max-width: 800px;
}
@media (max-width: 768px) { .hero-features { grid-template-columns: repeat(2, 1fr) !important; } }
@media (max-width: 480px) { .hero-features { grid-template-columns: 1fr !important; } }

/* ============================================
   HERO CONTENT STANDARD — pages without .hero-content wrapper
   Constrain width and style to match .hero-content pages
   ============================================ */
.product-hero .container > h1.hero-title,
.product-hero .container > p,
.product-hero .container > .hero-buttons,
.product-hero .container > .hero-features,
.tech-hero .container > h1.hero-title,
.tech-hero .container > p,
.tech-hero .container > .hero-buttons,
.tech-hero .container > .hero-features,
.case-study-hero .container > h1.hero-title,
.case-study-hero .container > p,
.case-study-hero .container > .hero-buttons,
.case-study-hero .container > .hero-features,
.calc-page-hero .container > h1.hero-title,
.calc-page-hero .container > p,
.calc-page-hero .container > .hero-buttons,
.calc-page-hero .container > .hero-features,
.demo-hero .container > h1.hero-title,
.demo-hero .container > p,
.demo-hero .container > .hero-buttons,
.demo-hero .container > .hero-features {
    max-width: 800px;
}

.product-hero .container > p,
.tech-hero .container > p,
.case-study-hero .container > p,
.calc-page-hero .container > p,
.demo-hero .container > p {
    font-size: 1.25rem;
    color: rgba(255,255,255,0.85);
    margin-bottom: 2rem;
}
.hero-feature-item {
    background: rgba(255,255,255,0.1);
    border-radius: 12px;
    padding: 14px !important;
    text-align: center;
    transition: transform 0.3s, opacity 0.3s, box-shadow 0.3s, color 0.3s, background-color 0.3s, border-color 0.3s, filter 0.3s ease;
    border: none !important;
}
.hero-feature-item:hover {
    background: rgba(255,255,255,0.15);
    transform: translateY(-4px);
}
.hero-feature-item i {
    font-size: 2rem;
    color: var(--accent-gold);
    margin-bottom: 12px;
}
.hero-feature-item h4 {
    color: var(--white);
    font-size: 1rem;
    margin-bottom: 4px;
}
.hero-feature-item p {
    color: rgba(255,255,255,0.7);
    font-size: 0.875rem;
    margin: 0;
}
@media (max-width: 768px) {
    .hero-features {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

/* ============================================
   SOURCE: css/inline-utility-classes.css
   ============================================ */

/* ============================================== */
/* UTILITY CLASSES - Batch 3 (Systematic Coverage) */
/* ============================================== */

/* Margin utilities */
.m-0 { margin: 0; }
.mb-0 { margin-bottom: 0; }
.mb-6 { margin-bottom: 6px; }
.mb-05 { margin-bottom: 0.5rem; }
.mb-075 { margin-bottom: 0.75rem; }
.mb-1 { margin-bottom: 1rem; }
.mb-2 { margin-bottom: 2rem; }
.mt-05 { margin-top: 0.5rem; }
.mt-075 { margin-top: 0.75rem; }
.mt-1 { margin-top: 1rem; }
.mt-15 { margin-top: 1.5rem; }
.mt-16 { margin-top: 16px; }
.mt-25 { margin-top: 2.5rem; }
.mt-3 { margin-top: 3rem; }
.mt-4 { margin-top: 4rem; }
.ml-05 { margin-left: 0.5rem; }
.ml-125 { margin-left: 1.25rem; }
.mr-05 { margin-right: 0.5rem; }
.mr-12 { margin-right: 12px; }
.my-025 { margin: 0.25rem 0; }
.my-05 { margin: 0.5rem 0; }
.my-1 { margin: 1rem 0; }
.my-15 { margin: 1.5rem 0; }
.mx-auto { margin-left: auto; margin-right: auto; }

/* Padding utilities */
.p-0 { padding: 0; }
.p-1 { padding: 1rem; }
.p-8 { padding: 8px; }
.p-10 { padding: 10px; }
.p-12 { padding: 12px; }
.p-16 { padding: 16px; }
.p-8-10 { padding: 8px 10px; }
.p-12-16 { padding: 12px 16px; }
.p-12-24 { padding: 12px 24px; }
.py-05 { padding: 0.5rem 0; }
.py-4 { padding: 0.4rem 0; }
.py-8 { padding: 8px 0; }
.pl-125 { padding-left: 1.25rem; }
.pl-15 { padding-left: 1.5rem; }

/* Text alignment */
.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }

/* Color utilities */
.text-blue { color: var(--primary-blue); }
.text-navy { color: var(--primary-navy); }
.text-medium { color: var(--text-medium); }
.text-light { color: var(--text-light); }
.text-dark { color: var(--text-dark); }
.text-green { color: var(--success-green); }
.text-green-h { color: #059669; }
.text-gold { color: #8a6d1c; }
.text-white-90 { color: rgba(255,255,255,0.9); }
.text-red { color: #dc3545; }
.text-inherit { color: inherit; }

/* Font size utilities */
.text-7 { font-size: 0.7rem; }
.text-xs { font-size: 0.75rem; }
.text-8125 { font-size: 0.8125rem; }
.text-sm { font-size: 0.875rem; }
.text-9375 { font-size: 0.9375rem; }
.text-base { font-size: 1rem; }
.text-lg { font-size: 1.15rem; }
.text-xl { font-size: 1.25rem; }
.text-135 { font-size: 1.35rem; }
.text-175 { font-size: 1.75rem; }

/* Font weight */
.fw-500 { font-weight: 500; }
.fw-600 { font-weight: 600; }
.fw-700 { font-weight: 700; }

/* Width & display */
.w-full { width: 100%; }
.w-140 { width: 140px; }
.block { display: block; }
.inline-block { display: inline-block; }
.flex { display: flex; }
.flex-col { flex-direction: column; }
.flex-wrap { flex-wrap: wrap; }
.flex-start { align-items: flex-start; }
.justify-center { justify-content: center; }

/* Border utilities */
.bl-4-blue { border-left: 4px solid var(--primary-blue); }
.bl-4-green { border-left: 4px solid var(--success-green); }
.bl-4-red { border-left: 4px solid #ff6b6b; }

/* List utilities */
.list-none { list-style: none; padding: 0; }
.list-none-m-0 { list-style: none; padding: 0; margin: 0; }
.list-disc { list-style: disc; }

/* Background & badges */
.bg-white { background: var(--white); }
.bg-light { background: var(--light-gray); }
.bg-navy { background: var(--primary-navy); }
.bg-primary-light { background: var(--primary-light); }
.badge-green {
    background: var(--success-green);
    color: white;
    padding: 4px 12px;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 600;
    display: inline-block;
}
.badge-light-blue {
    background: var(--primary-light);
    color: var(--primary-blue);
    padding: 4px 12px;
    border-radius: 4px;
    font-size: 0.75rem;
}

/* Card utilities */
.card-white {
    background: var(--white);
    padding: 1rem;
    border-radius: 8px;
}
.card-gray {
    padding: 1rem;
    background: var(--light-gray);
    border-radius: 8px;
    text-align: center;
}
.card-row {
    min-width: auto;
    max-width: 100%;
    padding: 1rem;
    flex-direction: row;
    text-align: left;
    gap: 0.75rem;
}

/* Icon boxes */
.icon-40 {
    width: 40px;
    height: 40px;
    font-size: 1rem;
    margin: 0;
}
.icon-48 {
    width: 48px;
    height: 48px;
    background: var(--primary-blue);
    color: var(--white);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
}
.icon-box-green {
    width: 52px;
    height: 52px;
    border-radius: 12px;
    background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* Container widths */
.container-xs { max-width: 800px; margin: 0 auto; }
.container-sm { max-width: 900px; margin: 0 auto; }
.container-sm-mb-1 { max-width: 900px; margin: 0 auto 1rem; }
.container-sm-mb-15 { max-width: 900px; margin: 0 auto 1.5rem; }
.container-sm-mb-25 { max-width: 900px; margin: 0 auto 2.5rem; }

/* Table cell utilities */
.table-cell {
    padding: 8px 10px;
    border-bottom: 1px solid var(--border-gray);
    text-align: center;
}
.table-cell-right {
    padding: 8px 10px;
    border-bottom: 1px solid var(--border-gray);
    text-align: right;
}
.p-8-border-center {
    padding: 8px;
    border-bottom: 1px solid var(--border-gray);
    text-align: center;
}

/* Link utilities */
.no-decoration { text-decoration: none; }
.underline { text-decoration: underline; }
.no-decoration-inherit { text-decoration: none; color: inherit; }
.underline-inherit { color: inherit; text-decoration: underline; }

/* State utilities */
.disabled { opacity: 0.5; cursor: not-allowed; }

/* Flex layouts */
.flex-wrap-gap {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}
.flex-start-wrap {
    display: flex;
    align-items: flex-start;
    gap: 1.5rem;
    flex-wrap: wrap;
}
.flex-start-20 {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    flex-wrap: wrap;
}
.flex-col-bl-blue {
    display: flex;
    flex-direction: column;
    border-left: 4px solid var(--primary-blue);
}
.flex-col-bl-green {
    display: flex;
    flex-direction: column;
    border-left: 4px solid var(--success-green);
}
.flex-col-bl-red {
    display: flex;
    flex-direction: column;
    border-left: 4px solid #ff6b6b;
}

/* Combined margin+color utilities */
.mb-05-medium { margin-bottom: 0.5rem; color: var(--text-medium); }
.mb-075-navy { margin-bottom: 0.75rem; color: var(--primary-navy); }
.mb-1-medium { margin-bottom: 1rem; color: var(--text-medium); }
.mt-05-medium { margin-top: 0.5rem; color: var(--text-medium); }
.mt-1-medium { margin-top: 1rem; color: var(--text-medium); }
.mt-1-pl-15 { margin-top: 1rem; padding-left: 1.5rem; }
.mt-1-pl-15-medium { margin-top: 1rem; padding-left: 1.5rem; color: var(--text-medium); }
.mt-1-pl-125-disc { margin-top: 1rem; padding-left: 1.25rem; list-style: disc; font-size: 0.875rem; color: var(--text-medium); }
.mt-15-medium { margin-top: 1.5rem; color: var(--text-medium); }
.mt-15-navy { margin-top: 1.5rem; color: var(--primary-navy); }
.mt-15-text-sm-medium { margin-top: 1.5rem; font-size: 0.875rem; color: var(--text-medium); }
.mt-15-text-sm-light { margin-top: 1.5rem; font-size: 0.875rem; color: var(--text-light); }
.mt-075-text-sm-light { margin-top: 0.75rem; font-size: 0.875rem; color: var(--text-light); }
.mt-1-text-sm-medium { margin-top: 1rem; font-size: 0.875rem; color: var(--text-medium); }
.mt-1-w-full-center { margin-top: 1rem; width: 100%; display: inline-block; text-align: center; }
.my-1-pl-15-medium { margin: 1rem 0; padding-left: 1.5rem; color: var(--text-medium); }
.navy-margin-15 { color: var(--primary-navy); margin: 1.5rem 0 1rem; }
.m-0-medium { margin: 0; color: var(--text-medium); }

/* Combined text+margin */
.text-sm-ml-125 { font-size: 0.875rem; margin-left: 1.25rem; }
.text-sm-mt-025 { font-size: 0.875rem; margin-top: 0.25rem; }
.text-sm-mt-05 { font-size: 0.875rem; margin-top: 0.5rem; }
.text-base-medium-mb-1 { font-size: 0.9375rem; color: var(--text-medium); margin-bottom: 1rem; }
.text-175-fw-700-navy { font-size: 1.75rem; font-weight: 700; color: var(--primary-navy); }

/* Icon color combinations */
.mr-05-blue { margin-right: 0.5rem; color: var(--primary-blue); }
.mr-05-green { margin-right: 0.5rem; color: var(--success-green); }
.mr-12-blue { margin-right: 12px; color: var(--primary-blue); }
.green-fw-700 { color: var(--success-green); font-weight: 700; }
.green-fw-600 { color: var(--success-green); font-weight: 600; }
.red-fw-700 { color: #dc3545; font-weight: 700; }

/* Min width utilities */
.min-w-150-center {
    min-width: 150px;
    text-align: center;
    padding: 1rem;
    background: var(--light-gray);
    border-radius: 8px;
}

/* Border bottom variants */
.py-05-border-dark { padding: 0.5rem 0; border-bottom: 1px solid rgba(0,0,0,0.1); }

/* Background color text combos */
.bg-navy-white { background: var(--primary-navy); color: white; }

/* Block label */
.block-mb-05-fw-500 { display: block; margin-bottom: 0.5rem; font-weight: 500; color: var(--text-dark); }

/* Text underline inherit */
.text-underline-inherit { color: inherit; text-decoration: underline; }

/* Radius utilities */
.radius-8 { border-radius: 8px; }

/* Flex gap utilities */
.gap-075 { gap: 0.75rem; }
.gap-10 { gap: 10px; }
.gap-15 { gap: 1.5rem; }
.gap-20 { gap: 20px; }

/* Shrink */
.shrink-0 { flex-shrink: 0; }

/* Centered containers */
.center-auto { margin: 0 auto; }

/* List utilities with margins */
.list-none-mb-1 { list-style: none; padding: 0; margin: 0 0 1rem 0; }
.list-none-sm-medium { list-style: none; padding: 0; margin: 0; font-size: 0.875rem; color: var(--text-medium); }

/* Padded border variants */
.p-10-left { padding: 10px; text-align: left; }
.p-10-left-border { padding: 10px; text-align: left; border: 1px solid var(--border-gray); }
.p-10-center { padding: 10px; text-align: center; }

/* My variants */
.my-025-text-sm { margin: 0.25rem 0; font-size: 0.875rem; }

/* Pl + margin combinations */
.pl-15-medium-mt-1 { padding-left: 1.5rem; color: var(--text-medium); margin-top: 1rem; }

/* Text medium margin combinations */
.text-medium-m-0 { color: var(--text-medium); margin: 0; }

/* Display flex combos */
.flex-center {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Hero and section spacing */
.mt-1-center { margin-top: 1rem; text-align: center; }
.mt-15-center { margin-top: 1.5rem; text-align: center; }

/* Image */
.img-center { display: block; margin: 0 auto; }

/* Font size + color combos */
.text-xs-medium { font-size: 0.75rem; color: var(--text-medium); }
.text-xs-light { font-size: 0.75rem; color: var(--text-light); }
.text-xs-green { font-size: 0.75rem; color: var(--success-green); }
.text-6875-medium { font-size: 0.6875rem; color: var(--text-medium); }
.text-light-sm { color: var(--text-light); font-size: 0.875rem; }
.text-sm-medium { font-size: 0.875rem; color: var(--text-medium); }

/* Additional margin + padding combos */
.m-05 { margin: 0.5rem; }
.p-75 { padding: 0.75rem; }

/* Text primary blue */
.text-primary-blue { color: var(--primary-blue); }

/* Transparent background text */
.text-transparent { color: transparent; }

/* Batch 4 additions */
.hidden { display: none; }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-auto-180 { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.grid-auto-200 { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.gap-1 { gap: 1rem; }
.gap-05 { gap: 0.5rem; }
.gap-15 { gap: 1.5rem; }
.flex-1 { flex: 1; }
.min-w-140 { min-width: 140px; }
.min-w-150 { min-width: 150px; }
.max-w-280 { max-width: 280px; }
.w-20 { width: 20px; }
.h-auto { height: auto; }
.mt-auto { margin-top: auto; }
.mt-025 { margin-top: 0.25rem; }
.mt-2 { margin-top: 2rem; }
.mt-075 { margin-top: 0.75rem; }
.mb-025 { margin-bottom: 0.25rem; }
.mb-125 { margin-bottom: 1.25rem; }
.mb-15 { margin-bottom: 1.5rem; }
.pt-1 { padding-top: 1rem; }
.pt-15 { padding-top: 1.5rem; }
.p-15 { padding: 1.5rem; }
.p-2 { padding: 2rem; }
.p-8 { padding: 8px; }
.p-25-50 { padding: 0.25rem 0.5rem; }
.p-25-75 { padding: 0.25rem 0.75rem; }
.p-375-875 { padding: 0.375rem 0.875rem; }
.py-3 { padding: 0.3rem 0; }
.lh-16 { line-height: 1.6; }
.lh-17 { line-height: 1.7; }
.self-start { align-self: flex-start; }
.shrink-0 { flex-shrink: 0; }
.flex-center { display: flex; align-items: center; justify-content: center; }
.inline-flex { display: inline-flex; }
.space-between { justify-content: space-between; }
.text-center { text-align: center; }
.text-right { text-align: right; }
.text-left { text-align: left; }
.italic { font-style: italic; }
.text-3 { font-size: 3rem; }
.text-25 { font-size: 2.5rem; }
.text-2 { font-size: 2rem; }
.text-15 { font-size: 1.5rem; }
.text-1125 { font-size: 1.125rem; }
.text-85 { font-size: 0.85rem; }
.text-xs { font-size: 0.75rem; }
.text-8125 { font-size: 0.8125rem; }
.text-sm { font-size: 0.875rem; }
.text-9375 { font-size: 0.9375rem; }
.text-base { font-size: 1rem; }
.fw-500 { font-weight: 500; }
.fw-600 { font-weight: 600; }
.fw-700 { font-weight: 700; }
.radius-4 { border-radius: 4px; }
.radius-6 { border-radius: 6px; }
.radius-8 { border-radius: 8px; }
.radius-12 { border-radius: 12px; }
.radius-20 { border-radius: 20px; }
.radius-right-8 { border-radius: 0 8px 8px 0; }
.border-gray { border: 1px solid var(--border-gray); }
.border-bottom-gray { border-bottom: 1px solid var(--border-gray); }
.border-bottom-light { border-bottom: 1px solid rgba(0,0,0,0.05); }
.bl-3-green { border-left: 3px solid var(--success-green); }
.bl-4-red-dark { border-left: 4px solid #e74c3c; }
.bl-4-purple { border-left: 4px solid #8e44ad; }
.bl-4-gold { border-left: 4px solid var(--accent-gold); }
.no-decoration { text-decoration: none; }
.underline { text-decoration: underline; }
.bg-white { background: var(--white); }
.bg-light { background: var(--light-gray); }
.bg-primary-light { background: var(--primary-light); }
.bg-blue-light { background: #e8f0fe; }
.bg-warm-yellow { background: #fffbeb; }
.bg-mint { background: #f0f9f4; }
.bg-light-green { background: #e8f5e9; }
.bg-gradient-green { background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%); }
.bg-white-10 { background: rgba(255,255,255,0.1); }
.bg-white-20 { background: rgba(255,255,255,0.2); }
.text-white { color: white; }
.text-white-90 { color: rgba(255,255,255,0.9); }
.text-blue { color: var(--primary-blue); }
.text-navy { color: var(--primary-navy); }
.text-medium { color: var(--text-medium); }
.text-light { color: var(--text-light); }
.text-dark { color: var(--text-dark); }
.text-green { color: var(--success-green); }
.text-green-h { color: #059669; }
.text-gold { color: #8a6d1c; }
.text-red { color: #ef4444; }
.text-red-dark { color: #dc3545; }
.text-orange { color: #ff9800; }
.text-purple { color: #9c27b0; }
.text-dark-green { color: #2e7d32; }
.text-inherit { color: inherit; }
.shadow-sm { box-shadow: 0 4px 15px rgba(0,0,0,0.1); }
.shadow-md { box-shadow: 0 4px 15px rgba(0,0,0,0.15); }
.center-auto { margin: 0 auto; }
.font-mono { font-family: monospace; }
.icon-45-blue {
    width: 45px; height: 45px; background: var(--primary-blue); color: white;
    border-radius: 50%; display: flex; align-items: center; justify-content: center;
    font-size: 1.25rem; font-weight: 600;
}
.icon-50-blue {
    width: 50px; height: 50px; background: var(--primary-blue); color: white;
    border-radius: 50%; display: flex; align-items: center; justify-content: center;
    font-size: 1.25rem; font-weight: 600;
}
.container-xs { max-width: 800px; margin: 0 auto; }
.container-xs-mb-1 { max-width: 800px; margin: 0 auto 1rem; }
.container-xs-mb-15 { max-width: 800px; margin: 0 auto 1.5rem; }
.container-sm { max-width: 900px; margin: 0 auto; }
.container-sm-mb-1 { max-width: 900px; margin: 0 auto 1rem; }
.container-sm-mb-15 { max-width: 900px; margin: 0 auto 1.5rem; }
.container-sm-mb-25 { max-width: 900px; margin: 0 auto 2.5rem; }
.container-sm-mt-2 { max-width: 900px; margin: 2rem auto 0; }

/* Batch 5 additions */
.inline-block { display: inline-block; }
.block { display: block; }
.gap-025 { gap: 0.25rem; }
.gap-075 { gap: 0.75rem; }
.mr-1 { margin-right: 1rem; }
.mr-3 { margin-right: 3px; }
.mr-4 { margin-right: 4px; }
.mr-10 { margin-right: 10px; }
.ml-4 { margin-left: 4px; }
.ml-8 { margin-left: 8px; }
.mb-0 { margin-bottom: 0; }
.mb-15 { margin-bottom: 1.5rem; }
.my-2 { margin: 2rem 0; }
.my-15-1 { margin: 1.5rem 0 1rem; }
.mt-15 { margin-top: 1.5rem; }
.p-75-1 { padding: 0.75rem 1rem; }
.p-12-16 { padding: 12px 16px; }
.pb-05 { padding-bottom: 0.5rem; }
.pl-12 { padding-left: 1.2rem; }
.pl-15 { padding-left: 1.5rem; }
.text-9 { font-size: 0.9rem; }
.text-105 { font-size: 1.05rem; }
.text-1125 { font-size: 1.125rem; }
.text-125 { font-size: 1.25rem; }
.text-13 { font-size: 1.3rem; }
.text-15 { font-size: 1.5rem; }
.text-25 { font-size: 2.5rem; }
.text-3 { font-size: 3rem; }
.opacity-90 { opacity: 0.9; }
.icon-40-blue {
    width: 40px; height: 40px; background: var(--primary-blue); color: white;
    border-radius: 50%; display: flex; align-items: center; justify-content: center;
    font-size: 1rem; font-weight: 600;
}
.icon-48-blue {
    width: 48px; height: 48px; border-radius: 12px;
    background: linear-gradient(135deg, var(--primary-light) 0%, #e8f0f8 100%);
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.text-amber { color: #f0ad4e; }
.text-amber-dark { color: #856404; }
.text-orange-dark { color: #e65100; }
.text-sky { color: #2196f3; }
.text-cyan { color: #00bcd4; }
.text-green-dark { color: #388e3c; }
.bg-orange-light { background: #fff3e0; }
.bg-warm-light { background: #fff8e1; }
.border-slate { border: 1px solid #e2e8f0; }
.border-bottom-gray { border-bottom: 1px solid var(--border-gray); }
.container-xs-mt-2 { max-width: 800px; margin: 2rem auto 0; }
.container-sm-mt-15 { max-width: 900px; margin: 1.5rem auto 0; }

/* Batch 6 */
.gap-05 { gap: 0.5rem; }
.gap-3 { gap: 3rem; }
.ml-075 { margin-left: 0.75rem; }
.mt-025 { margin-top: 0.25rem; }
.mt-05 { margin-top: 0.5rem; }
.mb-125 { margin-bottom: 1.25rem; }
.my-15-075 { margin: 1.5rem 0 0.75rem; }
.pt-2 { padding-top: 2rem; }
.p-1-2 { padding: 1rem 2rem; }
.p-4-12 { padding: 4px 12px; }
.p-15-4 { padding: 0.15rem 0.4rem; }
.min-w-200 { min-width: 200px; }
.container-700 { max-width: 700px; margin: 0 auto; }
.text-7 { font-size: 0.7rem; }
.lh-18 { line-height: 1.8; }
.opacity-1 { opacity: 1; }
.transform-none { transform: none; }
.resize-vertical { resize: vertical; }
.cursor-pointer { cursor: pointer; }
.bg-gradient-navy { background: linear-gradient(135deg, var(--primary-navy) 0%, var(--primary-blue) 100%); }
.bg-purple-light { background: #f3e5f5; }
.text-green-light { color: #4caf50; }
.text-purple-dark { color: #7b1fa2; }
.text-white-70 { color: rgba(255,255,255,0.7); }
.text-yellow { color: #ffeb3b; }
.text-red-bright { color: #f44336; }
.text-orange-deep { color: #bf360c; }
.text-deep-orange { color: #ff5722; }
.grid-auto-220 { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }

/* Batch 7 */
.bg-red-light { background: #ffebee; }
.bg-sky-light { background: #e3f2fd; }
.bg-orange-light { background: #fff3e0; }
.text-blue-medium { color: #1565c0; }
.text-navy-deep { color: #0d47a1; }
.text-sky { color: #2196f3; }
.icon-50 { width: 50px; height: 50px; border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.icon-60 { width: 60px; height: 60px; border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.bg-gradient-light { background: linear-gradient(135deg, var(--primary-light) 0%, var(--white) 100%); }
.border-none { border: none; }
.border-top-blue { border-top: 1px solid var(--primary-blue); }
.border-top-gray { border-top: 1px solid var(--border-gray); }
.opacity-30 { opacity: 0.3; }
.container-sm-mt-25 { max-width: 900px; margin: 2.5rem auto 0; }

/* Batch 8 */
.p-6-14 { padding: 6px 14px; }
.fw-600 { font-weight: 600; }
.fw-700 { font-weight: 700; }
.transition-all { transition: all 0.2s; }
.transition-border { transition: border-color 0.3s; }
.grid-auto-160 { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
.text-95 { font-size: 0.95rem; }
.bg-gradient-blue { background: linear-gradient(135deg, #00529B, #003d75); }
.bg-gradient-teal { background: linear-gradient(135deg, #0A7B83, #065a60); }
.bg-gradient-green { background: linear-gradient(135deg, #2a9d6f, #1e7a56); }
.bg-gradient-purple { background: linear-gradient(135deg, #6B4C9A, #4e3772); }
.bg-gradient-gold { background: linear-gradient(135deg, #C9A227, #a88820); }
.bg-brand-blue { background: #00529B; }
.bg-teal-light { background: #e0f2f1; }
.text-teal-dark { color: #00695c; }
.divider-gold { background: #e8b44c; border: 1px dashed #e8b44c; height: 0; }
.flag-us { width: 48px; height: 32px; background: linear-gradient(180deg, #ef2b2d 33%, #fff 33%, #fff 66%, #002868 66%); border-radius: 4px; }
.flag-se { width: 48px; height: 32px; background: linear-gradient(90deg, #006aa7 30%, #fecc00 30%, #fecc00 40%, #006aa7 40%); border-radius: 4px; }
.flag-dk { width: 48px; height: 32px; background: linear-gradient(180deg, #c60c30 50%, #fff 50%); border-radius: 4px; position: relative; }
.flag-dk-cross-v { position: absolute; top: 0; left: 0; width: 35%; height: 100%; background: #c60c30; }
.flag-dk-cross-h { position: absolute; top: 42%; left: 0; width: 100%; height: 16%; background: #fff; }
.flag-dk-cross-v2 { position: absolute; top: 0; left: 30%; width: 10%; height: 100%; background: #fff; }
.flag-nl-base { width: 48px; height: 32px; background: #fff; border-radius: 4px; position: relative; }
.flag-nl { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(180deg, #fff 33%, #003580 33%, #003580 66%, #fff 66%); }
.flag-nl-cross { position: absolute; top: 0; left: 30%; width: 15%; height: 100%; background: #003580; }
.flag-no-base { width: 48px; height: 32px; background: #02529c; border-radius: 4px; position: relative; }
.flag-no { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(180deg, #02529c 40%, #fff 40%, #fff 60%, #02529c 60%); }
.flag-no-cross { position: absolute; top: 0; left: 28%; width: 12%; height: 100%; background: #fff; }

/* Batch 9 */
.visibility-hidden { visibility: hidden; }
.bg-gradient-sky { background: linear-gradient(135deg, #f0f7ff 0%, var(--white) 100%); }
.text-gray-55 { color: #555; }
.text-gray-47 { color: #4b5563; }
.text-red-dark { color: #c62828; }
.border-top-3-blue { border-top: 3px solid var(--primary-blue); }
.border-top-3-gold { border-top: 3px solid var(--accent-gold); }
.border-top-3-green { border-top: 3px solid #28a745; }
.icon-48-blue-sm { width: 48px; height: 48px; background: var(--primary-blue); border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.icon-48-gold { width: 48px; height: 48px; background: var(--accent-gold); border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.icon-48-green { width: 48px; height: 48px; background: #28a745; border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.bg-gold { background: #c9a227; }
.gap-125 { gap: 1.25rem; }
.opacity-70 { opacity: 0.7; }
.max-w-200 { max-width: 200px; }
.max-w-380 { max-width: 380px; }
.my-3-15 { margin: 3rem 0 1.5rem; }
.flex-grow { flex-grow: 1; }

/* Batch 10 */


/* ============================================
   MOBILE OPTIMIZATIONS
   ============================================ */

/* Touch target minimum 48px */
@media (max-width: 768px) {
    a, button, .btn, .nav-link, .dropdown-link, .industry-tag, .view-all-link, .learn-more, .explore-link {
        min-height: 44px;
        min-width: 44px;
    }

    /* Form inputs larger on mobile */
    input, select, textarea {
        font-size: 16px !important; /* Prevents iOS zoom */
        min-height: 48px;
    }

    /* Better tap highlighting */
    a, button {
        -webkit-tap-highlight-color: rgba(0, 102, 204, 0.1);
    }

    /* Smooth scrolling */
    html {
        scroll-behavior: smooth;
        -webkit-overflow-scrolling: touch;
    }

    /* Prevent text size adjustment on orientation change */
    html {
        -webkit-text-size-adjust: 100%;
        -ms-text-size-adjust: 100%;
    }

    /* Hero adjustments for very small screens */
    @media (max-width: 480px) {
        .hero-title {
            font-size: 1.75rem;
        }
        .section-title {
            font-size: 1.5rem;
        }
        .hero-description {
            font-size: 1rem;
        }
        .btn {
            width: 100%;
            justify-content: center;
        }
        .hero-buttons {
            flex-direction: column;
            width: 100%;
        }
        .hero-buttons .btn {
            width: 100%;
        }
    }

    /* Hero features on mobile */
    .hero-features {
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem;
    }

    .hero-feature-item {
        padding: 1rem;
    }

    /* Industry cards on mobile */
    .industry-cards-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    /* Equipment cards on mobile */
    .equipment-categories-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    /* Service cards on mobile */
    .services-grid-top {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    /* Process steps on mobile */
    .process-steps {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    /* Specs grid on mobile */
    .specs-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    /* Trust grid on mobile */
    .trust-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    /* Cards grid on mobile */
    .cards-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    /* Grid layouts on mobile */
    .grid-2, .grid-3, .grid-4 {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    /* Breadcrumb on mobile */
    .breadcrumb-list {
        flex-wrap: wrap;
        gap: 0.25rem;
    }

    /* Section padding adjustments */
    .section {
        padding: 40px 0;
    }

    .hero {
        padding: 100px 0 40px;
    }

    .hero.hero-small {
        padding: 100px 0 30px;
    }

    /* Language selector on mobile */
    .hero-language-selector {
        position: relative;
        top: auto;
        right: auto;
        margin-top: 1rem;
        margin-left: 0;
        justify-content: flex-start;
    }

    /* Container padding on mobile */
    .container {
        padding: 0 16px;
    }

    /* Footer grid on mobile */
    .footer-grid, .footer-grid-4 {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    /* Industry tags on mobile */
    .industry-tags {
        gap: 0.5rem;
    }

    .industry-tag {
        padding: 6px 12px;
        font-size: 0.8125rem;
    }

    /* CTA section on mobile */
    .cta-content {
        flex-direction: column;
        text-align: center;
        gap: 1.5rem;
    }

    .cta-content .btn {
        width: 100%;
    }

    /* Table cells on mobile */
    .data-table th,
    .data-table td,
    .standards-table th,
    .standards-table td,
    .comparison-table th,
    .comparison-table td {
        padding: 10px 12px;
        font-size: 0.8125rem;
    }

    /* Step number sizing */
    .step-number {
        width: 44px;
        height: 44px;
        font-size: 1.1rem;
    }

    /* Feature items */
    .feature-item {
        padding: 1rem;
    }

    /* Icon boxes */
    .icon-box-green, .icon-box {
        width: 44px;
        height: 44px;
    }

    /* Reduce motion for users who prefer it */
    @media (prefers-reduced-motion: reduce) {
        .process-step,
        .step-number,
        .hero-feature-item,
        .feature-item {
            animation: none !important;
            transition: none !important;
        }
    }
}

/* Small phone adjustments */
@media (max-width: 400px) {
    .hero-title {
        font-size: 1.5rem;
    }

    .section-title {
        font-size: 1.35rem;
    }

    .hero-features {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    .specs-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    .trust-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

/* Theme color for mobile browsers */
meta[name="theme-color"] {
    content: var(--primary-navy);
}

/* ============================================
   INLINE STYLE REPLACEMENT UTILITIES
   ============================================ */

/* Flex row layouts */
.flex-row-gap { display: flex; gap: 1rem; }
.flex-row-gap-start { display: flex; gap: 1rem; align-items: flex-start; }
.flex-row-gap-wrap { display: flex; gap: 1rem; flex-wrap: wrap; }
.flex-col-gap { display: flex; flex-direction: column; gap: 1rem; }
.flex-center-gap { display: flex; align-items: center; gap: 1rem; }

/* Text constrainers */
.text-constrain { max-width: 860px; margin-left: auto; margin-right: auto; }
.text-constrain-sm { max-width: 800px; margin-left: auto; margin-right: auto; }
.text-constrain-md { max-width: 900px; margin-left: auto; margin-right: auto; }

/* Background gradients */
.bg-gradient-navy-dark { background: linear-gradient(135deg, #0a2540 0%, #1a3a5c 100%); }

/* Step badge circle (numbered icon) */
.step-badge-circle {
    width: 32px;
    height: 32px;
    min-width: 32px;
    background: var(--primary-blue);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.875rem;
}

/* Info box styles */
.info-box-blue {
    background: #e3f2fd;
    border-left: 4px solid var(--primary-blue);
    padding: 1rem;
    border-radius: 0 8px 8px 0;
}

/* Margin utilities */
.mt-2-5 { margin-top: 2.5rem; }

/* Card flex layouts */
.card-flex-col { display: flex; flex-direction: column; height: 100%; }
.card-flex-header { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }

/* Button group layouts */
.btn-group-flex { display: flex; gap: 1rem; flex-wrap: wrap; }

/* Icon circle variations */
.icon-circle-48 {
    width: 48px;
    height: 48px;
    background: var(--primary-light);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1rem;
}
.icon-circle-50 {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1rem;
}



/* ============================================
   SOURCE: css/enhancements.css
   ============================================ */

/* ============================================
   REYNOLDS & BAUHM — VISUAL ENHANCEMENTS v2
   Modern card designs, gradients, shadows,
   animations, and improved formatting
   Load AFTER styles.css
   ============================================ */

/* ============================================
   ENHANCED CSS VARIABLES (Overrides)
   ============================================ */
:root {
    /* Enhanced Shadows */
    --shadow-sm: 0 1px 3px rgba(10, 37, 64, 0.06);
    --shadow-md: 0 4px 12px rgba(10, 37, 64, 0.08);
    --shadow-lg: 0 12px 32px rgba(10, 37, 64, 0.12);
    --shadow-xl: 0 20px 48px rgba(10, 37, 64, 0.16);
    --shadow-glow: 0 0 24px rgba(0, 102, 204, 0.15);
    --shadow-gold: 0 8px 24px rgba(201, 162, 39, 0.25);

    /* Enhanced Color Extensions */
    --primary-blue-rgb: 0, 102, 204;
    --accent-gold-rgb: 201, 162, 39;
    --gradient-blue: linear-gradient(135deg, #0066cc 0%, #0052a3 100%);
    --gradient-navy: linear-gradient(135deg, #0a2540 0%, #0d3a5c 100%);
    --gradient-gold: linear-gradient(135deg, #c9a227 0%, #d4a83a 100%);
    --gradient-card-top: linear-gradient(90deg, var(--primary-blue), var(--accent-gold));
    --gradient-light: linear-gradient(135deg, #f0f7ff 0%, #e8f4fc 50%, #f5f7fa 100%);
    --gradient-white: linear-gradient(180deg, #ffffff 0%, #fafbfc 100%);

    /* Border Radius Scale */
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 20px;

    /* Transitions */
    --transition-smooth: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-bounce: all 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ============================================
   ENHANCED SECTION HEADERS
   ============================================ */
.section-header {
    margin-bottom: 2.5rem;
    position: relative;
}

.section-header::after {
    content: '';
    display: block;
    width: 60px;
    height: 4px;
    background: var(--gradient-blue);
    border-radius: 2px;
    margin: 1rem auto 0;
}

.section-label {
    background: linear-gradient(135deg, var(--primary-light) 0%, #e8f0f8 100%);
    color: var(--primary-blue);
    padding: 6px 16px;
    border-radius: 20px;
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    border: 1px solid rgba(0, 102, 204, 0.15);
    margin-bottom: 1.25rem;
}

.section-title {
    font-size: 2.25rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.2;
    margin-bottom: 0.75rem;
    background: linear-gradient(135deg, var(--primary-navy) 0%, #1a3a5c 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.section-subtitle {
    font-size: 1.125rem;
    color: var(--text-medium);
    max-width: 640px;
    margin: 0 auto;
    line-height: 1.6;
}

/* Dark section headers override */
.section-light .section-title,
.cta-section .section-title {
    -webkit-text-fill-color: var(--primary-navy);
    background: none;
}

.cta-section .section-title {
    -webkit-text-fill-color: var(--white);
}

/* ============================================
   ENHANCED CARDS — Primary Card System
   ============================================ */
.card {
    background: var(--white);
    border: none;
    border-radius: var(--radius-lg);
    padding: 1.5rem;
    box-shadow: var(--shadow-sm);
    transition: var(--transition-smooth);
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    height: 100%;
}

/* Gradient top border accent */
.card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--gradient-card-top);
    opacity: 0;
    transition: opacity 0.35s ease;
}

.card:hover::before {
    opacity: 1;
}

.card:hover {
    box-shadow: var(--shadow-xl);
    transform: translateY(-6px);
    border-color: transparent;
}

/* Card icon container enhancement.
   The bare first-child form is restricted to wrappers that contain ONLY an
   icon (`:has(> i)` with no other element children) so genuine content boxes
   such as `.calc-box` — which legitimately sit as the first/only div in some
   cards — are not crushed into a 52px badge with their text clipped inside. */
.card > div:first-child:not(.btn):not(p):has(> i):not(:has(> :not(i))),
.card .card-icon:first-child {
    width: 52px;
    height: 52px;
    min-width: 52px;
    border-radius: var(--radius-md);
    background: linear-gradient(135deg, var(--primary-light) 0%, #e8f0f8 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 0.75rem;
    margin-left: auto;
    margin-right: auto;
    box-shadow: 0 2px 8px rgba(0, 102, 204, 0.1);
    transition: var(--transition-bounce);
    overflow: hidden;
    box-sizing: border-box;
}

.card:hover > div:first-child:not(.btn):not(p):has(> i):not(:has(> :not(i))),
.card:hover .card-icon:first-child {
    transform: scale(1.08) rotate(-2deg);
    box-shadow: 0 4px 16px rgba(0, 102, 204, 0.2);
}

.card > div:first-child:not(.btn):not(p):has(> i):not(:has(> :not(i))) i,
.card .card-icon i {
    font-size: 1.35rem;
    color: var(--primary-blue);
}

.card h3 {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--primary-navy);
    margin-bottom: 0.5rem;
    line-height: 1.3;
    text-align: center;
}

.card p {
    font-size: 0.9375rem;
    color: var(--text-medium);
    line-height: 1.65;
    margin-bottom: 1rem;
}

/* ============================================
   CARDS GRID ENHANCEMENT
   ============================================ */
.cards-grid {
    gap: 1.25rem;
}

/* ============================================
   FEATURE CARD GRID ENHANCEMENT
   ============================================ */
.feature-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 1.25rem;
    align-items: stretch;
}

.feature-card {
    background: var(--white);
    border: 1px solid var(--border-gray);
    border-radius: var(--radius-lg);
    padding: 1.5rem;
    transition: var(--transition-smooth);
    position: relative;
    overflow: hidden;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.feature-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 100%;
    background: var(--gradient-blue);
    opacity: 0;
    transition: opacity 0.35s ease;
}

.feature-card:hover::before {
    opacity: 1;
}

.feature-card:hover {
    box-shadow: var(--shadow-lg);
    transform: translateY(-4px);
    border-color: rgba(0, 102, 204, 0.2);
}

.feature-card .icon-circle,
.feature-card .feature-icon {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--primary-light) 0%, #e8f0f8 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1rem;
    box-shadow: 0 2px 8px rgba(0, 102, 204, 0.1);
    transition: var(--transition-bounce);
}

.feature-card:hover .icon-circle,
.feature-card:hover .feature-icon {
    transform: scale(1.1);
    box-shadow: 0 4px 16px rgba(0, 102, 204, 0.2);
}

.feature-card .icon-circle i,
.feature-card .feature-icon i {
    font-size: 1.4rem;
    color: var(--primary-blue);
}

.feature-card h3,
.feature-card h4 {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--primary-navy);
    margin-bottom: 0.5rem;
}

.feature-card p {
    font-size: 0.9375rem;
    color: var(--text-medium);
    line-height: 1.6;
    margin-bottom: 1rem;
}

/* ============================================
   SERVICE CARD ENHANCEMENT
   ============================================ */
.service-card {
    background: var(--white);
    border: 1px solid var(--border-gray);
    border-radius: var(--radius-lg);
    padding: 1.5rem;
    transition: var(--transition-smooth);
    position: relative;
    overflow: hidden;
}

.service-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--gradient-blue);
    opacity: 0;
    transition: opacity 0.35s ease;
}

.service-card:hover::before {
    opacity: 1;
}

.service-card:hover {
    box-shadow: var(--shadow-xl);
    transform: translateY(-4px);
    border-color: rgba(0, 102, 204, 0.15);
}

.service-card h3 {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--primary-navy);
    margin-bottom: 0.75rem;
    display: flex;
    align-items: center;
    gap: 10px;
}

.service-card h3 i {
    color: var(--primary-blue);
    font-size: 1.3rem;
}

.service-card p {
    color: var(--text-medium);
    line-height: 1.65;
    margin-bottom: 1rem;
}

.service-list li {
    padding: 0.5rem 0;
    font-size: 0.875rem;
    border-bottom: 1px solid rgba(209, 233, 224, 0.5);
    transition: transform 0.2s, opacity 0.2s, box-shadow 0.2s, color 0.2s, background-color 0.2s, border-color 0.2s, filter 0.2s ease;
}

.service-list li:hover {
    padding-left: 4px;
    color: var(--primary-navy);
}

/* ============================================
   PRODUCT CARD ENHANCEMENT
   ============================================ */
.product-card {
    background: var(--white);
    border: 1px solid var(--border-gray);
    border-radius: var(--radius-lg);
    padding: 1.5rem;
    transition: var(--transition-smooth);
    position: relative;
    overflow: hidden;
}

.product-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 100%;
    background: var(--gradient-blue);
    opacity: 0.6;
    transition: opacity 0.35s ease;
}

.product-card:hover::before {
    opacity: 1;
    width: 5px;
}

.product-card:hover {
    box-shadow: var(--shadow-lg);
    transform: translateY(-3px);
    border-color: rgba(0, 102, 204, 0.2);
}

/* ============================================
   UPGRADE TYPE CARD ENHANCEMENT
   ============================================ */
.upgrade-type-card {
    background: var(--white);
    border: 1px solid var(--border-gray);
    border-radius: var(--radius-lg);
    padding: 1.75rem;
    transition: var(--transition-smooth);
    position: relative;
    overflow: hidden;
}

.upgrade-type-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--primary-blue), var(--accent-gold));
    opacity: 0;
    transition: opacity 0.35s ease;
}

.upgrade-type-card:hover::before {
    opacity: 1;
}

.upgrade-type-card:hover {
    box-shadow: var(--shadow-xl);
    transform: translateY(-5px);
}

.upgrade-type-card .card-icon {
    width: 56px;
    height: 56px;
    border-radius: var(--radius-md);
    background: linear-gradient(135deg, var(--primary-light) 0%, #e8f0f8 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1rem;
    box-shadow: 0 2px 8px rgba(0, 102, 204, 0.1);
    transition: var(--transition-bounce);
}

.upgrade-type-card:hover .card-icon {
    transform: scale(1.1) rotate(-3deg);
}

.upgrade-type-card .card-icon i {
    font-size: 1.3rem;
    color: var(--primary-blue);
}

/* ============================================
   TOPIC CARD ENHANCEMENT
   ============================================ */
.topic-card {
    background: var(--white);
    border: 1px solid var(--border-gray);
    border-radius: var(--radius-lg);
    padding: 2rem;
    text-align: center;
    transition: var(--transition-smooth);
    position: relative;
    overflow: hidden;
}

.topic-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--gradient-card-top);
    opacity: 0;
    transition: opacity 0.35s ease;
}

.topic-card:hover::before {
    opacity: 1;
}

.topic-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-xl);
    border-color: rgba(0, 102, 204, 0.2);
}

.topic-card i {
    font-size: 2.5rem;
    color: var(--primary-blue);
    margin-bottom: 1rem;
    transition: var(--transition-bounce);
}

.topic-card:hover i {
    transform: scale(1.15);
}

/* ============================================
   REDUNDANCY CARD ENHANCEMENT
   ============================================ */
.redundancy-card {
    background: var(--white);
    border: 1px solid var(--border-gray);
    border-radius: var(--radius-lg);
    padding: 1.5rem;
    transition: var(--transition-smooth);
    position: relative;
    overflow: hidden;
}

.redundancy-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: linear-gradient(90deg, #e74c3c, #c0392b);
    opacity: 0;
    transition: opacity 0.35s ease;
}

.redundancy-card:hover::before {
    opacity: 0.6;
}

.redundancy-card:hover {
    box-shadow: var(--shadow-lg);
    transform: translateY(-3px);
}

/* ============================================
   COMPONENT CARD ENHANCEMENT
   ============================================ */
.component-card {
    background: var(--white);
    border: 1px solid var(--border-gray);
    border-radius: var(--radius-lg);
    padding: 1.5rem;
    transition: var(--transition-smooth);
    position: relative;
    overflow: hidden;
}

.component-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 100%;
    background: var(--gradient-blue);
    opacity: 0;
    transition: opacity 0.35s ease;
}

.component-card:hover::before {
    opacity: 1;
}

.component-card:hover {
    box-shadow: var(--shadow-lg);
    transform: translateX(4px);
}

/* ============================================
   BENEFIT ITEM ENHANCEMENT
   ============================================ */
.benefit-item {
    background: var(--white);
    border: 1px solid var(--border-gray);
    border-radius: var(--radius-md);
    padding: 1.25rem;
    transition: var(--transition-smooth);
}

.benefit-item:hover {
    border-color: rgba(0, 102, 204, 0.3);
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
}

.benefit-item i {
    color: var(--success-green);
    font-size: 1.25rem;
    transition: var(--transition-bounce);
}

.benefit-item:hover i {
    transform: scale(1.2);
}

/* ============================================
   SPEC CARD ENHANCEMENT
   ============================================ */
.spec-card {
    background: var(--white);
    border: 1px solid var(--border-gray);
    border-radius: var(--radius-md);
    padding: 1.5rem;
    text-align: center;
    transition: var(--transition-smooth);
    position: relative;
    overflow: hidden;
}

.spec-card::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--gradient-blue);
    opacity: 0;
    transition: opacity 0.35s ease;
}

.spec-card:hover::before {
    opacity: 1;
}

.spec-card:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-3px);
}

.spec-value {
    font-size: 1.5rem;
    font-weight: 700;
    background: linear-gradient(135deg, var(--primary-navy) 0%, var(--primary-blue) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* ============================================
   ENHANCED BUTTONS
   ============================================ */
.btn {
    border-radius: var(--radius-md);
    font-weight: 600;
    letter-spacing: 0.2px;
    transition: var(--transition-smooth);
    position: relative;
    overflow: hidden;
}

.btn::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    transition: width 0.4s ease, height 0.4s ease;
}

.btn:active::after {
    width: 200px;
    height: 200px;
}

.btn-primary {
    background: var(--gradient-blue);
    border: none;
    box-shadow: 0 4px 12px rgba(0, 102, 204, 0.25);
}

.btn-primary:hover {
    background: linear-gradient(135deg, #0052a3 0%, #004080 100%);
    box-shadow: 0 6px 20px rgba(0, 102, 204, 0.35);
    transform: translateY(-2px);
}

.btn-secondary {
    background: var(--white);
    border: 1.5px solid var(--primary-blue);
    color: var(--primary-blue);
    box-shadow: 0 1px 4px rgba(0, 102, 204, 0.08);
}

.btn-secondary:hover {
    background: var(--primary-blue);
    border-color: var(--primary-blue);
    color: var(--white);
    box-shadow: 0 4px 12px rgba(0, 102, 204, 0.25);
    transform: translateY(-2px);
}

/* Ghost buttons on dark backgrounds */
.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: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(4px);
    color: var(--white);
}

.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: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.5);
    transform: translateY(-2px);
}

/* ============================================
   ENHANCED CTA SECTION
   ============================================ */
.cta-section {
    background: var(--gradient-navy);
    padding: 80px 0;
    position: relative;
    overflow: hidden;
}

.cta-section::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -10%;
    width: 500px;
    height: 500px;
    background: radial-gradient(circle, rgba(0, 102, 204, 0.15) 0%, transparent 70%);
    border-radius: 50%;
}

.cta-section::after {
    content: '';
    position: absolute;
    bottom: -30%;
    left: -5%;
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, rgba(201, 162, 39, 0.1) 0%, transparent 70%);
    border-radius: 50%;
}

.cta-content {
    position: relative;
    z-index: 1;
}

.cta-text h2 {
    font-size: 2.5rem;
    font-weight: 700;
    letter-spacing: -0.02em;
}

/* ============================================
   ENHANCED HERO SECTIONS
   ============================================ */
.hero {
    background: var(--gradient-navy);
    position: relative;
    overflow: hidden;
}

.hero::before {
    content: '';
    position: absolute;
    top: -20%;
    right: -10%;
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, rgba(0, 102, 204, 0.12) 0%, transparent 60%);
    border-radius: 50%;
    pointer-events: none;
}

.hero::after {
    content: '';
    position: absolute;
    bottom: -30%;
    left: -5%;
    width: 500px;
    height: 500px;
    background: radial-gradient(circle, rgba(201, 162, 39, 0.08) 0%, transparent 60%);
    border-radius: 50%;
    pointer-events: none;
}

.hero .container {
    position: relative;
    z-index: 1;
}

.page-header {
    background: var(--gradient-navy);
    position: relative;
    overflow: hidden;
}

.page-header::before {
    content: '';
    position: absolute;
    top: -30%;
    right: -5%;
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, rgba(0, 102, 204, 0.1) 0%, transparent 60%);
    border-radius: 50%;
    pointer-events: none;
}

.page-header .container {
    position: relative;
    z-index: 1;
}

.hero-title {
    text-shadow: 0 2px 20px rgba(0, 0, 0, 0.15);
    letter-spacing: -0.03em;
}

/* ============================================
   ENHANCED FOOTER
   ============================================ */
.footer {
    background: linear-gradient(180deg, #0a2540 0%, #081e33 100%);
    position: relative;
    overflow: hidden;
}

.footer::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(0, 102, 204, 0.4), transparent);
}

.footer-brand h3 {
    font-size: 1.5rem;
    font-weight: 700;
}

.footer-column h4 {
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: 0.5px;
    margin-bottom: 1.25rem;
    position: relative;
    padding-bottom: 0.5rem;
}

.footer-column h4::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 30px;
    height: 2px;
    background: var(--primary-blue);
    border-radius: 1px;
}

.footer-links a {
    transition: var(--transition-smooth);
    padding: 2px 0;
}

.footer-links a:hover {
    padding-left: 0;
}

.footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    margin-top: 2rem;
}

/* ============================================
   ENHANCED PROCESS STEPS
   ============================================ */
.process-step {
    background: var(--white);
    border: 1px solid var(--border-gray);
    border-radius: var(--radius-lg);
    padding: 1.5rem;
    box-shadow: var(--shadow-sm);
}

.process-step:hover {
    box-shadow: var(--shadow-lg);
}

/* ============================================
   ENHANCED FEATURE ITEMS
   ============================================ */
.feature-item {
    background: var(--white);
    border: 1px solid var(--border-gray);
    border-radius: var(--radius-md);
    padding: 14px 18px;
    transition: var(--transition-smooth);
}

.feature-item:hover {
    background: linear-gradient(135deg, var(--primary-light) 0%, #f0f7ff 100%);
    border-color: var(--primary-blue);
    box-shadow: 0 4px 16px rgba(0, 102, 204, 0.12);
    transform: translateY(-4px);
}

.feature-item i {
    color: var(--success-green);
    transition: var(--transition-bounce);
}

.feature-item:hover i {
    transform: scale(1.2);
    color: var(--primary-blue);
}

/* ============================================
   ENHANCED INDUSTRY TAGS
   ============================================ */
.industry-tag {
    background: var(--white);
    border: 1.5px solid var(--border-gray);
    border-radius: 24px;
    padding: 8px 20px;
    font-weight: 500;
    font-size: 0.8125rem;
    transition: var(--transition-smooth);
    box-shadow: var(--shadow-sm);
}

.industry-tag:hover {
    background: var(--gradient-blue);
    color: var(--white);
    border-color: var(--primary-blue);
    box-shadow: 0 4px 12px rgba(0, 102, 204, 0.25);
    transform: translateY(-2px);
}

/* ============================================
   ENHANCED ANIMATIONS
   ============================================ */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeInScale {
    from {
        opacity: 0;
        transform: scale(0.95);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

[data-animate] {
    opacity: 0;
    animation: fadeInUp 0.6s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

[data-animate-delay="1"] { animation-delay: 0.08s; }
[data-animate-delay="2"] { animation-delay: 0.16s; }
[data-animate-delay="3"] { animation-delay: 0.24s; }
[data-animate-delay="4"] { animation-delay: 0.32s; }
[data-animate-delay="5"] { animation-delay: 0.40s; }
[data-animate-delay="6"] { animation-delay: 0.48s; }

/* ============================================
   ENHANCED SECTION SPACING
   ============================================ */
/* Note: .section padding is overridden to 36px below in the bloat fix section */

.section-light {
    background: linear-gradient(180deg, #f5f7fa 0%, #eef1f5 100%);
}

/* ============================================
   ENHANCED TABLES
   ============================================ */
.table-responsive {
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    border: 1px solid var(--border-gray);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.data-table th,
.refinery-table th,
.standards-table th,
.comparison-table th,
.specs-table th,
.sensor-table th {
    background: linear-gradient(135deg, var(--primary-navy) 0%, #1a3a5c 100%);
    font-weight: 600;
    letter-spacing: 0.3px;
}

.data-table tbody tr:hover,
.refinery-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: linear-gradient(90deg, var(--primary-light), #f0f7ff);
}

/* ============================================
   ENHANCED STAT ITEMS
   ============================================ */
.stat-item {
    position: relative;
    padding: 1rem;
}

.stat-value {
    font-size: 1.75rem;
    font-weight: 700;
    background: linear-gradient(135deg, var(--white) 0%, #e8f4fc 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.stat-number {
    font-size: 3.5rem;
    font-weight: 800;
    background: linear-gradient(135deg, var(--primary-blue) 0%, #0052a3 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* ============================================
   ENHANCED BREADCRUMB
   ============================================ */
.breadcrumb-section {
    background: linear-gradient(180deg, #f8fafc 0%, var(--white) 100%);
    border-bottom: 1px solid var(--border-gray);
}

/* ============================================
   ENHANCED NOTE / INFO BOXES
   ============================================ */
.note-box {
    background: linear-gradient(135deg, #f0f7ff 0%, #e8f4fc 100%);
    border-left: 4px solid var(--primary-blue);
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
    padding: 1.25rem 1.5rem;
    box-shadow: var(--shadow-sm);
}

/* ============================================
   ENHANCED HERO FEATURE ITEMS
   ============================================ */
.hero-feature-item {
    background: rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--radius-md);
    padding: 1.25rem;
    transition: var(--transition-smooth);
}

.hero-feature-item:hover {
    background: rgba(255, 255, 255, 0.14);
    transform: translateY(-4px);
}

/* ============================================
   ENHANCED COMPLIANCE TAGS
   ============================================ */
.compliance-tag {
    display: inline-block;
    padding: 6px 14px;
    background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%);
    color: var(--success-green);
    font-size: 0.8125rem;
    font-weight: 600;
    border-radius: 20px;
    border: 1px solid rgba(5, 150, 105, 0.2);
}

/* ============================================
   ENHANCED STEP CARDS
   ============================================ */
.step-card {
    background: var(--white);
    border: 1px solid var(--border-gray);
    border-radius: var(--radius-lg);
    padding: 1.5rem;
    box-shadow: var(--shadow-sm);
    transition: var(--transition-smooth);
}

.step-card:hover {
    box-shadow: var(--shadow-md);
    border-color: rgba(0, 102, 204, 0.2);
}

/* ============================================
   ENHANCED EQUIPMENT CARDS
   ============================================ */
.equipment-card {
    background: var(--white);
    border: 1px solid var(--border-gray);
    border-radius: var(--radius-lg);
    padding: 1.25rem;
    transition: var(--transition-smooth);
    text-align: center;
}

.equipment-card:hover {
    box-shadow: var(--shadow-lg);
    transform: translateY(-4px);
    border-color: rgba(0, 102, 204, 0.2);
}

.equipment-card i {
    font-size: 1.5rem;
    color: var(--primary-blue);
    margin-bottom: 0.5rem;
    transition: var(--transition-bounce);
}

.equipment-card:hover i {
    transform: scale(1.2);
}

/* ============================================
   ENHANCED PARAMETER CARDS
   ============================================ */
.parameter-card {
    background: var(--white);
    border: 1px solid var(--border-gray);
    border-radius: var(--radius-md);
    padding: 1rem;
    transition: var(--transition-smooth);
}

.parameter-card:hover {
    box-shadow: var(--shadow-md);
    border-color: rgba(0, 102, 204, 0.2);
}

/* ============================================
   ENHANCED BENEFIT CARD (DARK BG)
   ============================================ */
.benefit-card {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: var(--radius-lg);
    padding: 1.5rem;
    transition: var(--transition-smooth);
}

.benefit-card:hover {
    background: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.25);
    transform: translateY(-4px);
}

.benefit-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    background: rgba(201, 162, 39, 0.12);
    border-radius: 50%;
    margin-bottom: 1rem;
    transition: var(--transition-smooth);
}

.benefit-icon i {
    font-size: 1.15rem;
    color: var(--accent-gold);
}

.benefit-card:hover .benefit-icon {
    background: rgba(201, 162, 39, 0.25);
    transform: scale(1.1);
}

/* ============================================
   ENHANCED SUBPAGE LINKS
   ============================================ */
.subpage-link {
    background: var(--white);
    border: 1.5px solid var(--border-gray);
    border-radius: var(--radius-lg);
    padding: 1.25rem;
    transition: var(--transition-smooth);
    display: flex;
    align-items: center;
    gap: 1rem;
    text-decoration: none;
    color: inherit;
}

.subpage-link:hover {
    box-shadow: var(--shadow-lg);
    transform: translateY(-4px);
    border-color: var(--primary-blue);
}

.subpage-link .icon {
    width: 56px;
    height: 56px;
    background: linear-gradient(135deg, var(--primary-light) 0%, #e8f0f8 100%);
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: var(--transition-bounce);
}

.subpage-link:hover .icon {
    transform: scale(1.08);
    box-shadow: 0 4px 12px rgba(0, 102, 204, 0.15);
}

/* ============================================
   ENHANCED SOLUTION TYPE CARDS
   ============================================ */
.solution-type-card {
    background: var(--white);
    border: 1px solid var(--border-gray);
    border-radius: var(--radius-lg);
    padding: 1.5rem;
    transition: var(--transition-smooth);
}

.solution-type-card:hover {
    box-shadow: var(--shadow-lg);
    transform: translateY(-4px);
    border-color: rgba(0, 102, 204, 0.2);
}

/* ============================================
   ENHANCED FOOTER SOCIAL ICONS
   ============================================ */
.footer-social a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.12);
    transition: var(--transition-smooth);
}

.footer-social a:hover {
    background: var(--primary-blue);
    border-color: var(--primary-blue);
    transform: translateY(-3px);
    box-shadow: 0 4px 12px rgba(0, 102, 204, 0.3);
}

/* ============================================
   ENHANCED NAVIGATION
   ============================================ */
.nav-link {
    border-radius: 8px;
    transition: var(--transition-smooth);
}

.nav-link:hover {
    background: linear-gradient(135deg, var(--primary-light) 0%, #e8f0f8 100%);
    color: var(--primary-navy);
}

.dropdown-link {
    border-radius: 8px;
    transition: var(--transition-smooth);
}

.dropdown-link:hover {
    background: linear-gradient(135deg, var(--primary-light) 0%, #e8f0f8 100%);
}

/* ============================================
   ENHANCED LOGO
   ============================================ */
.logo {
    transition: var(--transition-smooth);
}

.logo:hover {
    transform: scale(1.02);
}

/* ============================================
   RESPONSIVE ENHANCEMENTS
   ============================================ */
@media (max-width: 768px) {
    .section-title {
        font-size: 1.75rem;
    }

    .section-header {
        margin-bottom: 1.75rem;
    }

    .section-header::after {
        width: 40px;
        height: 3px;
    }

    .cta-section {
        padding: 56px 0;
    }

    .cta-text h2 {
        font-size: 1.875rem;
    }

    .card,
    .feature-card,
    .service-card,
    .product-card,
    .upgrade-type-card {
        padding: 1.25rem;
    }

    .card:hover,
    .feature-card:hover,
    .service-card:hover,
    .product-card:hover,
    .upgrade-type-card:hover {
        transform: translateY(-3px);
    }

    .hero::before,
    .hero::after,
    .page-header::before,
    .cta-section::before,
    .cta-section::after {
        display: none;
    }
}

/* ============================================
   PILOT-SPECIFIC COMPONENTS (moved from inline)
   ============================================ */

/* Service Card Pilot */
.service-card-pilot {
    background: var(--white);
    border: 1px solid var(--border-gray);
    border-radius: var(--radius-lg);
    padding: 1.25rem;
    transition: var(--transition-smooth);
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: hidden;
}

.service-card-pilot::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--gradient-card-top);
    opacity: 0;
    transition: opacity 0.35s ease;
}

.service-card-pilot:hover::before { opacity: 1; }

.service-card-pilot:hover {
    box-shadow: var(--shadow-xl);
    transform: translateY(-5px);
}

.service-card-pilot .icon {
    width: 52px;
    height: 52px;
    background: linear-gradient(135deg, var(--primary-light) 0%, var(--white) 100%);
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 0.75rem;
    box-shadow: 0 2px 8px rgba(0, 102, 204, 0.1);
}

.service-card-pilot .icon i {
    font-size: 1.35rem;
    color: var(--primary-blue);
}

.service-card-pilot h3 {
    color: var(--primary-navy);
    margin-bottom: 0.75rem;
    font-size: 1.15rem;
    font-weight: 700;
}

.service-card-pilot ul {
    list-style: none;
    padding: 0;
    margin: 0.75rem 0 0;
}

.service-card-pilot ul li {
    padding: 0.35rem 0;
    color: var(--text-medium);
    font-size: 0.9375rem;
    display: flex;
    align-items: center;
    gap: 8px;
}

.service-card-pilot ul li i {
    color: var(--success-green);
    font-size: 0.875rem;
}

/* Parameter Card */
.parameter-card {
    background: linear-gradient(135deg, rgba(255,255,255,0.95) 0%, rgba(240,248,255,0.95) 100%);
    border: 1px solid var(--border-gray);
    border-radius: var(--radius-lg);
    padding: 1rem;
    display: flex;
    align-items: center;
    gap: 1.25rem;
    transition: var(--transition-smooth);
    box-shadow: var(--shadow-sm);
}

.parameter-card:hover {
    background: linear-gradient(135deg, rgba(255,255,255,1) 0%, rgba(230,245,255,1) 100%);
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
    border-color: var(--accent-gold);
}

.parameter-card i {
    font-size: 1.5rem;
    color: var(--primary-blue);
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    background: linear-gradient(135deg, var(--primary-light) 0%, #e6f2ff 100%);
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
}

.parameter-card span {
    font-weight: 500;
    color: var(--primary-navy);
}

.parameter-card small {
    color: var(--text-medium);
}

.parameter-card a {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    color: var(--primary-blue);
    font-weight: 600;
    text-decoration: none;
    background: var(--primary-light);
    padding: 0.4rem 0.85rem;
    border-radius: 8px;
    font-size: 0.875rem;
    transition: transform 0.2s, opacity 0.2s, box-shadow 0.2s, color 0.2s, background-color 0.2s, border-color 0.2s, filter 0.2s ease;
}

.parameter-card a:hover {
    background: var(--primary-blue);
    color: var(--white);
}

/* Equipment Card */
.equipment-card {
    background: var(--white);
    border: 1px solid var(--border-gray);
    border-radius: var(--radius-lg);
    padding: 1rem;
    text-align: center;
    transition: var(--transition-smooth);
}

.equipment-card:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-4px);
    border-color: rgba(0, 102, 204, 0.2);
}

.equipment-card i {
    font-size: 1.5rem;
    color: var(--primary-blue);
    margin-bottom: 0.5rem;
}

.equipment-card h4 {
    color: var(--primary-navy);
    margin-bottom: 0.5rem;
    font-size: 1.1rem;
    font-weight: 600;
}

.equipment-card p {
    color: var(--primary-blue);
    font-size: 0.875rem;
    font-weight: 500;
    margin: 0;
}

/* Benefit Highlight */
.benefit-highlight {
    background: linear-gradient(135deg, var(--primary-light) 0%, var(--white) 100%);
    border-left: 4px solid var(--primary-blue);
    padding: 1.25rem;
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
    margin-bottom: 1rem;
    box-shadow: var(--shadow-sm);
}

.benefit-highlight h4 {
    color: var(--primary-navy);
    margin-bottom: 0.5rem;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 1.1rem;
    font-weight: 600;
}

.benefit-highlight h4 i {
    color: var(--primary-blue);
}

.benefit-highlight p {
    color: var(--text-medium);
    font-size: 0.9375rem;
    margin: 0;
}

/* Subpage Link */
.subpage-link {
    display: flex;
    align-items: center;
    gap: 1rem;
    background: var(--white);
    border: 1px solid var(--border-gray);
    border-radius: var(--radius-lg);
    padding: 1.25rem;
    text-decoration: none;
    color: inherit;
    transition: var(--transition-smooth);
}

.subpage-link:hover {
    box-shadow: var(--shadow-lg);
    transform: translateY(-4px);
    border-color: var(--primary-blue);
}

.subpage-link .icon {
    width: 52px;
    height: 52px;
    background: linear-gradient(135deg, var(--primary-light) 0%, var(--white) 100%);
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 2px 8px rgba(0, 102, 204, 0.1);
}

.subpage-link .icon i {
    font-size: 1.35rem;
    color: var(--primary-blue);
}

.subpage-link .content {
    flex: 1;
}

.subpage-link .content h4 {
    color: var(--primary-navy);
    margin-bottom: 0.25rem;
    font-weight: 600;
}

.subpage-link .content p {
    color: var(--text-medium);
    font-size: 0.9375rem;
    margin: 0;
}

.subpage-link .arrow {
    color: var(--primary-blue);
    font-size: 1.25rem;
    flex-shrink: 0;
}

/* Solution Type Card */
.solution-type-card {
    background: var(--white);
    border: 1px solid var(--border-gray);
    border-radius: var(--radius-lg);
    padding: 1.25rem;
    transition: var(--transition-smooth);
    position: relative;
    overflow: hidden;
}

.solution-type-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--gradient-card-top);
    opacity: 0;
    transition: opacity 0.35s ease;
}

.solution-type-card:hover::before { opacity: 1; }

.solution-type-card:hover {
    box-shadow: var(--shadow-lg);
    transform: translateY(-4px);
}

.solution-type-card h3 {
    color: var(--primary-navy);
    margin-bottom: 0.75rem;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 1.15rem;
    font-weight: 700;
}

.solution-type-card h3 i {
    color: var(--primary-blue);
}

.solution-type-card ul {
    list-style: none;
    padding: 0;
    margin: 0.75rem 0 0;
}

.solution-type-card ul li {
    padding: 0.35rem 0;
    color: var(--text-medium);
    font-size: 0.9375rem;
    display: flex;
    align-items: center;
    gap: 8px;
}

.solution-type-card ul li i {
    color: var(--primary-blue);
    font-size: 0.875rem;
}

/* ============================================
   REDUCED SECTION PADDING (fix bloat)
   Was 48px top + 48px bottom = 96px per section.
   With 12 sections that's 1152px of pure padding.
   Reduced to 36px each = 72px per section = 864px total.
   ============================================ */
.section {
    padding: 36px 0;
}

/* ============================================
   FIX CARD GRID STRETCHING
   ============================================ */

/* Note: Equal-height card fixes have been moved to the
   CONTAINER FIXES section at the end of this file.
   The previous height:auto rules were breaking equal
   heights in grid layouts. */

/* ============================================
   HERO FEATURES (moved from inline)
   ============================================ */
.hero-features {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
    margin-top: 2.5rem;
}
@media (max-width: 768px) { .hero-features { grid-template-columns: repeat(2, 1fr); gap: 16px; } }
@media (max-width: 480px) { .hero-features { grid-template-columns: 1fr; } }

.hero-feature-item {
    background: rgba(255,255,255,0.1);
    border-radius: var(--radius-md);
    padding: 14px;
    backdrop-filter: blur(4px);
    border: 1px solid rgba(255,255,255,0.1);
    transition: var(--transition-smooth);
    text-align: center;
    color: inherit;
    cursor: pointer;
    text-decoration: none;
}

.hero-feature-item:hover {
    background: rgba(255,255,255,0.18);
    transform: translateY(-4px);
}

.hero-feature-item i {
    font-size: 2rem;
    color: var(--accent-gold);
    margin-bottom: 12px;
}

.hero-feature-item h4 {
    color: var(--white);
    font-size: 1rem;
    margin-bottom: 4px;
    font-weight: 600;
}

.hero-feature-item p {
    color: rgba(255,255,255,0.7);
    font-size: 0.875rem;
    margin: 0;
}

@media (max-width: 768px) {
    .hero-features {
        grid-template-columns: repeat(2, 1fr);
    }

    .service-card-pilot,
    .parameter-card,
    .equipment-card,
    .subpage-link,
    .solution-type-card {
        padding: 1rem;
    }

}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}
/* ============================================
   CONTAINER FIXES - Equal Heights, Equal Widths,
   Button Alignment, Icon Containment
   ============================================ */

/* --------------------------------------------
   1. GRID SYSTEM (missing from global CSS)
   -------------------------------------------- */
.grid {
    display: grid;
    gap: 1.5rem;
    align-items: stretch;
}
.grid-2 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
    align-items: stretch;
}
.grid-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
    align-items: stretch;
}
.grid-4 {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
    align-items: stretch;
}

@media (max-width: 1024px) {
    .grid-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
    .grid-2 { grid-template-columns: repeat(2, 1fr); }
    .grid-3 { grid-template-columns: repeat(2, 1fr); }
    .grid-4 { grid-template-columns: repeat(2, 1fr); }
}

/* --------------------------------------------
   2. FEATURES GRID (used across many pages)
   -------------------------------------------- */
.features-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 1.25rem;
    align-items: stretch;
}
.features-grid .feature-item {
    background: var(--white);
    border: 1px solid var(--border-gray);
    border-radius: 12px;
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    height: 100%;
    transition: transform 0.3s, opacity 0.3s, box-shadow 0.3s, color 0.3s, background-color 0.3s, border-color 0.3s, filter 0.3s ease;
}
.features-grid .feature-item:hover {
    box-shadow: var(--shadow-md);
    border-color: var(--primary-blue);
    transform: translateY(-2px);
}
.features-grid .feature-icon {
    width: 52px;
    height: 52px;
    border-radius: 12px;
    background: linear-gradient(135deg, var(--primary-light) 0%, #e8f0f8 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1rem;
    flex-shrink: 0;
    overflow: hidden;
}
.features-grid .feature-icon i {
    font-size: 1.35rem;
    color: var(--primary-blue);
}
.features-grid .feature-content {
    flex: 1;
    display: flex;
    flex-direction: column;
}
.features-grid .feature-content h4 {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--primary-navy);
    margin-bottom: 0.5rem;
    line-height: 1.3;
}
.features-grid .feature-content p {
    font-size: 0.9375rem;
    color: var(--text-medium);
    margin-bottom: 1rem;
    line-height: 1.6;
    flex-grow: 1;
}
.features-grid .feature-content .btn {
    margin-top: auto;
    align-self: flex-start;
}

/* --------------------------------------------
   3. CARD EQUAL HEIGHT FIX
   Override enhancements.css height:auto that
   breaks equal-height cards in grids
   -------------------------------------------- */
.cards-grid,
.feature-card-grid,
.features-grid,
.grid,
.grid-2,
.grid-3,
.grid-4 {
    align-items: stretch !important;
}

.cards-grid > *,
.card-grid > *,
.feature-card-grid > *,
.features-grid > *,
.grid > *,
.grid-2 > *,
.grid-3 > *,
.grid-4 > * {
    min-width: 0;
}

.cards-grid .card,
.card-grid .card,
.feature-card-grid .feature-card,
.grid .card,
.grid-2 .card,
.grid-3 .card,
.grid-4 .card {
    height: 100% !important;
    min-height: 100%;
    display: flex;
    flex-direction: column;
}

/* Card grid - matches cards-grid for pages using singular class */
.card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 14px;
    align-items: stretch;
}

/* --------------------------------------------
   4. ICON CONTAINMENT FIXES
   Ensure icons never overflow their containers
   -------------------------------------------- */

/* Hero feature items - contain scaled icons */
.hero-feature-item {
    overflow: hidden;
    box-sizing: border-box;
}
.hero-feature-item i {
    /* Font Awesome handles its own display; parent container centers it */
}

/* Icon circles must never shrink or overflow */
.icon-circle-sm,
.icon-circle-xs,
.feature-card .icon-circle,
.feature-card .feature-icon,
.card-icon,
.upgrade-type-card .card-icon {
    box-sizing: border-box;
    max-width: 100%;
    max-height: 100%;
    overflow: hidden;
    flex-shrink: 0;
}
.icon-circle-sm i,
.icon-circle-xs i,
.feature-card .icon-circle i,
.feature-card .feature-icon i,
.card-icon i,
.upgrade-type-card .card-icon i {
    /* Let Font Awesome handle display; parent flex container centers the icon */
}

/* Category header icon containment */
.category-header .icon-circle-xs {
    flex-shrink: 0;
}

/* Card header row - icon + title row layout (applications.html industry cards) */
.card-header-row {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    margin-bottom: 0.875rem;
}
.card-header-row .icon-circle-sm {
    flex-shrink: 0;
}

/* Titles must remain independent block elements, not flex-affected */
.industry-card h3,
.feature-card h3,
.card h3 {
    display: block;
}

/* Service strip cards */
.service-strip-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100%;
}
.service-strip-card i {
    box-sizing: border-box;
    flex-shrink: 0;
}
.service-strip-card .btn-sm {
    margin-top: auto;
}

/* Process steps — natural height (no stretch) */
.process-steps {
    align-items: flex-start;
}
.process-step {
    display: flex;
    flex-direction: column;
}

/* Topics grid equal width/height */
.topics-grid {
    align-items: stretch;
}
.topic-card {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
}
.topic-card i {
    flex-shrink: 0;
}

/* Equipment cards */
.equipment-card {
    display: flex;
    flex-direction: column;
    height: 100%;
}
.equipment-card i {
    flex-shrink: 0;
}

/* Stats grid equal height */
.stats-grid {
    align-items: stretch;
}
.stat-item {
    height: 100%;
}

/* Specs grid */
.specs-grid {
    align-items: stretch;
}
.spec-card {
    height: 100%;
}

/* Related grid */
.related-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 1.25rem;
    align-items: stretch;
}

/* Benefit row */
.benefit-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1rem;
    align-items: stretch;
}
.benefit-row .benefit-item {
    height: 100%;
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 1rem;
    background: linear-gradient(135deg, #f8fafc 0%, #f0f4f8 100%);
    border-radius: var(--radius-md);
    border: 1px solid #e8ecf1;
    transition: var(--transition-smooth);
}
.benefit-row .benefit-item:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-md);
    border-color: var(--primary-blue);
}
.benefit-row .benefit-item i {
    font-size: 1.1rem;
    color: var(--primary-blue);
    margin-top: 0.15rem;
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    background: var(--primary-light);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.benefit-row .benefit-item h4 {
    font-size: 0.92rem;
    color: var(--primary-navy);
    margin: 0 0 0.2rem;
    font-weight: 700;
}
.benefit-row .benefit-item p {
    font-size: 0.82rem;
    color: var(--text-medium);
    margin: 0;
    line-height: 1.5;
}

/* Challenge cards */
.challenge-cards {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* Timeline steps */
.process-timeline {
    align-items: stretch;
}

/* Mobile fixes for grids */
@media (max-width: 768px) {
    .features-grid,
    .related-grid,
    .benefit-row {
        grid-template-columns: repeat(2, 1fr);
    }
    .pid-cross-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
    .pid-cross-link { padding: 12px; }
    .pid-cross-link .icon-wrap { width: 34px; height: 34px; }
    .standards-grid { grid-template-columns: repeat(2, 1fr); }
    .refinery-table { font-size: 0.8125rem; }
    .refinery-table th, .refinery-table td { padding: 0.625rem 0.75rem; }
    .card,
    .industry-card,
    .feature-card,
    .service-strip-card {
        height: auto !important;
    }
}


/* ============================================
   RESTORED COMPONENT STYLES (from lost inline blocks)
   These components previously relied on inline
   <style> blocks that were lost during bulk
   British English conversion.
   ============================================ */

/* --------------------------------------------
   1. CHALLENGE CARDS
   -------------------------------------------- */

/* Simple challenge cards (brewery, dairy, industry pages) */
.challenge-card:has(.challenge-icon) {
    background: var(--white);
    border: 1px solid var(--border-gray);
    border-radius: var(--radius-lg);
    padding: 1.5rem;
    text-align: center;
    transition: var(--transition-smooth);
    height: 100%;
    display: flex;
    flex-direction: column;
}
.challenge-card:has(.challenge-icon):hover {
    box-shadow: var(--shadow-lg);
    transform: translateY(-4px);
    border-color: rgba(0, 102, 204, 0.2);
}
.challenge-card .challenge-icon {
    width: 56px;
    height: 56px;
    background: linear-gradient(135deg, var(--primary-light) 0%, #e8f0f8 100%);
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1rem;
    box-shadow: 0 2px 8px rgba(0, 102, 204, 0.1);
    flex-shrink: 0;
}
.challenge-card .challenge-icon i {
    font-size: 1.5rem;
    color: var(--primary-blue);
}
.challenge-card:has(.challenge-icon) h3 {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--primary-navy);
    margin-bottom: 0.75rem;
}
.challenge-card:has(.challenge-icon) p {
    color: var(--text-medium);
    font-size: 0.9375rem;
    margin: 0;
    line-height: 1.6;
    flex-grow: 1;
}

/* Accordion challenge cards (services-overview.html) */
.challenge-card:has(.challenge-card-header) {
    background: var(--white);
    border: 1px solid var(--border-gray);
    border-radius: var(--radius-lg);
    overflow: hidden;
    transition: var(--transition-smooth);
    cursor: pointer;
}
.challenge-card:has(.challenge-card-header):hover {
    box-shadow: var(--shadow-md);
    border-color: rgba(0, 102, 204, 0.2);
}
.challenge-card-header {
    display: grid;
    grid-template-columns: 1.5fr 1.5fr 1fr;
    gap: 1rem;
    align-items: center;
    padding: 1rem 1.25rem;
    font-size: 0.9375rem;
    font-weight: 500;
    border-left: 4px solid var(--primary-blue);
}
.challenge-card-header.challenge-amber { border-left-color: #f59e0b; }
.challenge-card-header.challenge-green { border-left-color: var(--success-green); }
.challenge-card-header.challenge-red { border-left-color: #ef4444; }
.cc-challenge {
    color: var(--primary-navy);
    font-weight: 600;
}
.cc-solution {
    color: var(--text-medium);
}
.cc-delivered {
    color: var(--primary-blue);
    font-weight: 600;
    text-align: right;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.5rem;
}
.challenge-card-toggle {
    transition: transform 0.3s ease;
    font-size: 0.875rem;
    color: var(--text-light);
}
.challenge-card.open .challenge-card-toggle {
    transform: rotate(180deg);
}
.challenge-card-body {
    max-height: 0;
    overflow: hidden;
    padding: 0 1.25rem;
    font-size: 0.9375rem;
    color: var(--text-medium);
    line-height: 1.65;
    transition: max-height 0.35s ease, padding 0.35s ease;
    border-left: 4px solid transparent;
}
.challenge-card.open .challenge-card-body {
    max-height: 400px;
    padding: 1rem 1.25rem;
}

@media (max-width: 768px) {
    .challenge-card-header {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.5rem;
        padding: 0.875rem 1rem;
    }
    .cc-delivered {
        text-align: left;
        justify-content: flex-start;
    }
    .challenge-card-toggle {
        margin-left: auto;
    }
    .challenge-card.open .challenge-card-body {
        padding: 0.875rem 1rem;
    }
    .challenge-card:has(.challenge-icon) {
        padding: 1.25rem;
    }
}

/* --------------------------------------------
   2. ENGAGEMENT TABS & PANELS
   -------------------------------------------- */
.engagement-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
}
.engagement-tab {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.25rem;
    background: var(--white);
    border: 1.5px solid var(--border-gray);
    border-radius: var(--radius-md);
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--text-medium);
    cursor: pointer;
    transition: var(--transition-smooth);
    white-space: nowrap;
}
.engagement-tab:hover {
    border-color: var(--primary-blue);
    color: var(--primary-blue);
    background: var(--primary-light);
}
.engagement-tab.active {
    background: var(--gradient-blue);
    border-color: var(--primary-blue);
    color: var(--white);
    box-shadow: 0 4px 12px rgba(0, 102, 204, 0.25);
}
.engagement-tab i {
    font-size: 1rem;
}
.engagement-panels {
    background: var(--white);
    border: 1px solid var(--border-gray);
    border-radius: var(--radius-lg);
    padding: 1.5rem;
    box-shadow: var(--shadow-sm);
}
.engagement-panel {
    display: none;
}
.engagement-panel.active {
    display: block;
    animation: fadeInUp 0.4s ease;
}
.engagement-panel-inner {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}
.ep-desc {
    font-size: 1rem;
    color: var(--text-medium);
    line-height: 1.7;
}
.ep-meta {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    background: linear-gradient(135deg, var(--primary-light) 0%, #f0f7ff 100%);
    border-radius: var(--radius-md);
    padding: 1rem;
}
.ep-meta-item label {
    display: block;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--primary-blue);
    margin-bottom: 0.25rem;
}
.ep-meta-item span {
    font-size: 0.9375rem;
    color: var(--primary-navy);
    font-weight: 500;
}
.ep-visual-label {
    font-size: 0.8125rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--text-light);
    margin-bottom: 0.75rem;
}
.ep-steps {
    display: flex;
    align-items: stretch;
    gap: 0.5rem;
    flex-wrap: wrap;
}
.ep-step {
    flex: 1;
    min-width: 120px;
    background: var(--white);
    border: 1px solid var(--border-gray);
    border-radius: var(--radius-md);
    padding: 1rem;
    text-align: center;
    transition: var(--transition-smooth);
}
.ep-step:hover {
    border-color: var(--primary-blue);
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
}
.ep-step-icon {
    width: 44px;
    height: 44px;
    background: linear-gradient(135deg, var(--primary-light) 0%, #e8f0f8 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 0.5rem;
}
.ep-step-icon i {
    font-size: 1rem;
    color: var(--primary-blue);
}
.ep-step-title {
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--primary-navy);
    margin-bottom: 0.25rem;
}
.ep-step-desc {
    font-size: 0.8125rem;
    color: var(--text-medium);
}
.ep-step-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-light);
    font-size: 0.875rem;
    align-self: center;
    padding: 0 0.25rem;
}

@media (max-width: 768px) {
    .engagement-tabs {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 0.5rem;
    }
    .engagement-tab {
        flex-shrink: 0;
        padding: 0.625rem 1rem;
        font-size: 0.875rem;
    }
    .ep-meta {
        grid-template-columns: repeat(2, 1fr);
    }
    .ep-steps {
        flex-direction: column;
    }
    .ep-step-arrow {
        transform: rotate(90deg);
        padding: 0.25rem 0;
    }
    .engagement-panels {
        padding: 1rem;
    }
}

/* --------------------------------------------
   3. BUNDLE CARDS
   -------------------------------------------- */
.bundle-card {
    background: var(--white);
    border: 1px solid var(--border-gray);
    border-radius: var(--radius-lg);
    padding: 1.5rem;
    transition: var(--transition-smooth);
    height: 100%;
    display: flex;
    flex-direction: column;
}
.bundle-card:hover {
    box-shadow: var(--shadow-xl);
    transform: translateY(-5px);
    border-color: rgba(0, 102, 204, 0.2);
}
.bundle-card h4 {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--primary-navy);
    margin-bottom: 0.75rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.bundle-card h4 i {
    color: var(--primary-blue);
    font-size: 1.25rem;
}
.bundle-card p {
    color: var(--text-medium);
    font-size: 0.9375rem;
    line-height: 1.65;
    margin-bottom: 1rem;
}
.bundle-card ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
.bundle-card ul li {
    padding: 0.4rem 0;
    font-size: 0.9375rem;
    color: var(--text-medium);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.bundle-card ul li i {
    color: var(--success-green);
    font-size: 0.875rem;
}

/* --------------------------------------------
   4. LOCATION CARDS
   -------------------------------------------- */
.location-card {
    background: var(--white);
    border: 1px solid var(--border-gray);
    border-radius: var(--radius-lg);
    padding: 1.5rem;
    text-align: center;
    transition: var(--transition-smooth);
    height: 100%;
}
.location-card:hover {
    box-shadow: var(--shadow-lg);
    transform: translateY(-4px);
    border-color: rgba(0, 102, 204, 0.2);
}
.location-card i {
    font-size: 2rem;
    color: var(--primary-blue);
    margin-bottom: 0.75rem;
    display: inline-block;
}
.location-card h4 {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--primary-navy);
    margin-bottom: 0.5rem;
}
.location-card p {
    font-size: 0.9375rem;
    color: var(--text-medium);
    line-height: 1.6;
    margin: 0;
}

/* --------------------------------------------
   5. STATS
   -------------------------------------------- */
.stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 1.5rem;
    margin-top: 1.5rem;
}
.stat {
    text-align: center;
}
.stat .num {
    font-size: 2.5rem;
    font-weight: 800;
    background: linear-gradient(135deg, var(--primary-blue) 0%, #0052a3 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    line-height: 1.1;
    margin-bottom: 0.25rem;
}
.stat .lbl {
    font-size: 0.875rem;
    color: var(--text-medium);
    font-weight: 500;
}

/* --------------------------------------------
   6. INTEGRATION BANNER
   -------------------------------------------- */
.integration-banner {
    background: linear-gradient(135deg, var(--primary-light) 0%, #e8f0f8 100%);
    border: 1px solid rgba(0, 102, 204, 0.15);
    border-radius: var(--radius-lg);
    padding: 2rem;
    position: relative;
    overflow: hidden;
}
.integration-banner::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: var(--gradient-card-top);
}
.integration-banner h3 {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--primary-navy);
    margin-bottom: 0.75rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.integration-banner h3 i {
    color: var(--primary-blue);
}
.integration-banner p {
    color: var(--text-medium);
    line-height: 1.7;
    margin-bottom: 1.5rem;
    max-width: 800px;
}
.integration-banner .stats {
    margin-top: 1rem;
}
.integration-banner .stat .num {
    font-size: 2rem;
}

/* --------------------------------------------
   7. STICKY MOBILE CTA
   -------------------------------------------- */
.sticky-mobile-cta {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--white);
    border-top: 1px solid var(--border-gray);
    padding: 0.75rem 1rem;
    gap: 0.75rem;
    z-index: 1000;
    box-shadow: 0 -4px 16px rgba(10, 37, 64, 0.1);
}
.sticky-mobile-cta .btn {
    flex: 1;
    text-align: center;
    justify-content: center;
}

@media (max-width: 768px) {
    .sticky-mobile-cta {
        display: flex;
    }
    body {
        padding-bottom: 72px;
    }
}

/* --------------------------------------------
   8. CAPABILITY CARDS
   -------------------------------------------- */
.capability-card {
    background: var(--white);
    border: 1px solid var(--border-gray);
    border-radius: var(--radius-lg);
    padding: 1.5rem;
    transition: var(--transition-smooth);
    height: 100%;
    display: flex;
    flex-direction: column;
}
.capability-card:hover {
    box-shadow: var(--shadow-lg);
    transform: translateY(-4px);
    border-color: rgba(0, 102, 204, 0.2);
}
.capability-card .capability-icon {
    width: 52px;
    height: 52px;
    background: linear-gradient(135deg, var(--primary-light) 0%, #e8f0f8 100%);
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 0.75rem;
    box-shadow: 0 2px 8px rgba(0, 102, 204, 0.1);
    flex-shrink: 0;
}
.capability-card .capability-icon i {
    font-size: 1.35rem;
    color: var(--primary-blue);
}
.capability-card h3 {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--primary-navy);
    margin-bottom: 0.75rem;
}
.capability-card h3 a {
    color: inherit;
    text-decoration: none;
}
.capability-card h3 a:hover {
    color: var(--primary-blue);
}
.capability-card p {
    font-size: 0.9375rem;
    color: var(--text-medium);
    line-height: 1.65;
    margin: 0;
    flex-grow: 1;
}
.capability-card .btn {
    margin-top: auto;
    align-self: flex-start;
}

/* When combined with .card, let .card handle base styling */
.card.capability-card {
    padding: 1.5rem;
}
.card.capability-card .capability-icon {
    display: none; /* card already has icon via ::before or .card-icon */
}

/* --------------------------------------------
   9. SCHEDULE / TIMELINE COMPONENT
   -------------------------------------------- */

.deployment-timeline {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: 1.5rem;
    position: relative;
    padding-top: 1rem;
}

/* Horizontal connector line — desktop */
.deployment-timeline::before {
    content: '';
    position: absolute;
    top: 2.75rem;
    left: 10%;
    right: 10%;
    height: 2px;
    background: linear-gradient(90deg,
        transparent 0%,
        var(--border-gray) 8%,
        var(--border-gray) 92%,
        transparent 100%
    );
    z-index: 0;
    opacity: 0.5;
}

.timeline-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    flex: 1;
    min-width: 140px;
    max-width: 200px;
    position: relative;
    z-index: 1;
    padding: 0.5rem;
}

.timeline-step .tl-icon {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--white);
    border: 2px solid var(--border-gray);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 0.875rem;
    box-shadow: var(--shadow-sm);
    transition: transform 0.3s, opacity 0.3s, box-shadow 0.3s, color 0.3s, background-color 0.3s, border-color 0.3s, filter 0.3s ease;
    position: relative;
    flex-shrink: 0;
}

.timeline-step .tl-icon i {
    font-size: 1.1rem;
    color: var(--primary-blue);
    transition: transform 0.3s, opacity 0.3s, box-shadow 0.3s, color 0.3s, background-color 0.3s, border-color 0.3s, filter 0.3s ease;
}

.timeline-step:hover .tl-icon {
    background: var(--primary-blue);
    border-color: var(--primary-blue);
    transform: scale(1.1);
    box-shadow: var(--shadow-md);
}

.timeline-step:hover .tl-icon i {
    color: var(--white);
}

.timeline-step .tl-title {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--primary-navy);
    margin-bottom: 0.375rem;
    text-align: center;
}

.timeline-step .tl-desc {
    font-size: 0.875rem;
    color: var(--text-medium);
    line-height: 1.5;
    text-align: center;
    margin: 0;
}

/* Mobile: vertical timeline */
@media (max-width: 768px) {
    .deployment-timeline {
        flex-direction: column;
        align-items: flex-start;
        gap: 0;
        padding-top: 0;
        padding-left: 1.75rem;
    }

    .deployment-timeline::before {
        top: 0.75rem;
        bottom: 0.75rem;
        left: 1.5rem;
        right: auto;
        width: 2px;
        height: auto;
        background: linear-gradient(180deg,
            transparent 0%,
            var(--border-gray) 5%,
            var(--border-gray) 95%,
            transparent 100%
        );
    }

    .timeline-step {
        flex-direction: row;
        align-items: flex-start;
        text-align: left;
        gap: 1rem;
        max-width: 100%;
        width: 100%;
        padding: 0.75rem 0;
    }

    .timeline-step .tl-icon {
        flex-shrink: 0;
        margin-bottom: 0;
        width: 42px;
        height: 42px;
    }

    .timeline-step .tl-icon i {
        font-size: 1rem;
    }

    .timeline-step .tl-title {
        text-align: left;
        margin-bottom: 0.25rem;
    }

    .timeline-step .tl-desc {
        text-align: left;
    }
}

/* --------------------------------------------
   10. TOOL COMPONENTS (food-processing.html)
   -------------------------------------------- */
.tool-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 1.5rem;
    align-items: stretch;
}
.tool-card {
    background: var(--white);
    border: 1px solid var(--border-gray);
    border-radius: var(--radius-lg);
    padding: 1.5rem;
    transition: var(--transition-smooth);
    height: 100%;
    display: flex;
    flex-direction: column;
}
.tool-card:hover {
    box-shadow: var(--shadow-lg);
    border-color: rgba(0, 102, 204, 0.2);
}
.tool-card h3 {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--primary-navy);
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.tool-form {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-bottom: 1rem;
}
.tool-form label {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--primary-navy);
}
.tool-form input,
.tool-form select {
    padding: 0.625rem 0.875rem;
    border: 1.5px solid var(--border-gray);
    border-radius: var(--radius-md);
    font-size: 0.9375rem;
    color: var(--text-dark);
    background: var(--white);
    transition: border-color 0.2s ease;
}
.tool-form input:focus,
.tool-form select:focus {
    outline: none;
    border-color: var(--primary-blue);
    box-shadow: 0 0 0 3px rgba(0, 102, 204, 0.1);
}
.tool-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.75rem 1.5rem;
    background: var(--gradient-blue);
    color: var(--white);
    border: none;
    border-radius: var(--radius-md);
    font-size: 0.9375rem;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition-smooth);
    box-shadow: 0 4px 12px rgba(0, 102, 204, 0.25);
    margin-top: 0.5rem;
}
.tool-btn:hover {
    background: linear-gradient(135deg, #0052a3 0%, #004080 100%);
    box-shadow: 0 6px 20px rgba(0, 102, 204, 0.35);
    transform: translateY(-2px);
}
.tool-result {
    background: linear-gradient(135deg, var(--primary-light) 0%, #f0f7ff 100%);
    border: 1px solid rgba(0, 102, 204, 0.15);
    border-radius: var(--radius-md);
    padding: 1rem;
    font-size: 0.9375rem;
    color: var(--primary-navy);
    min-height: 48px;
    display: flex;
    align-items: center;
}
.tool-result:empty::before {
    content: 'Results will appear here...';
    color: var(--text-light);
    font-style: italic;
}

@media (max-width: 768px) {
    .tool-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .tool-card {
        padding: 1.25rem;
    }
}


/* ============================================
   PROFESSIONAL CONTENT GRID LAYOUT
   Transforms dense text-center lead paragraphs
   into a readable card-grid format
   ============================================ */

.lead-intro {
    font-size: 1.125rem;
    line-height: 1.75;
    color: var(--text-medium);
    max-width: 880px;
    margin: 0 auto 2rem;
    text-align: center;
}

.lead-intro strong {
    color: var(--primary-navy);
}

.content-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
    margin-top: 0.5rem;
}

.content-grid > p,
.content-grid > div {
    background: var(--white);
    border: 1px solid var(--border-gray);
    border-radius: var(--radius-lg);
    padding: 1.5rem;
    border-left: 4px solid var(--primary-blue);
    box-shadow: var(--shadow-sm);
    transition: var(--transition-smooth);
    text-align: left;
    color: var(--text-medium);
    line-height: 1.7;
    margin: 0;
    font-size: 0.9375rem;
    position: relative;
    overflow: hidden;
}

.content-grid > p::before,
.content-grid > div::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--gradient-card-top);
    opacity: 0;
    transition: opacity 0.35s ease;
}

.content-grid > p:hover::before,
.content-grid > div:hover::before {
    opacity: 1;
}

.content-grid > p:hover,
.content-grid > div:hover {
    box-shadow: var(--shadow-lg);
    transform: translateY(-4px);
    border-color: rgba(0, 102, 204, 0.2);
}

.content-grid > p strong,
.content-grid > div strong {
    color: var(--primary-navy);
}

/* Single orphan in last row spans full width */
.content-grid > p:last-child:nth-child(odd):not(:first-child),
.content-grid > div:last-child:nth-child(odd):not(:first-child) {
    grid-column: 1 / -1;
    max-width: 100%;
}

@media (max-width: 768px) {
    .content-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem;
    }
    .content-grid > p,
    .content-grid > div {
        padding: 1.25rem;
    }
    .lead-intro {
        font-size: 1rem;
        margin-bottom: 1.5rem;
    }
}

/* Icon circle for calc-box headings (from applications.html) */
.icon-circle-sm {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: linear-gradient(135deg, var(--primary-light) 0%, #e8f0f8 100%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: transform 0.3s ease;
    overflow: hidden;
    margin-bottom: 0.5rem;
    align-self: center;
}
.icon-circle-sm i {
    font-size: 1.1rem;
    color: var(--primary-blue);
}

/* ============================================
   UNIFIED DESIGN SYSTEM — Glassmorphism, Pill Labels, Centered Cards
   Matches reynoldsbauhm.com/test reference design
   ============================================ */

/* --- Pill Section Labels --- */
.pill-label {
    display: inline-block;
    padding: 6px 18px;
    background: rgba(0, 102, 204, 0.08);
    border: 1px solid rgba(0, 102, 204, 0.15);
    border-radius: 100px;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--primary-blue);
    margin-bottom: 1rem;
}

/* --- Glassmorphism Cards (Hero overlay cards) --- */
.glass-card {
    background: rgba(255, 255, 255, 0.06);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: var(--radius-md);
    padding: 1.1rem 0.75rem;
    text-align: center;
    transition: var(--transition-smooth);
}

.glass-card:hover {
    background: rgba(255, 255, 255, 0.10);
    transform: translateY(-4px);
    border-color: rgba(255, 255, 255, 0.20);
}

.glass-card .glass-icon {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: rgba(201, 162, 39, 0.18);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 0.6rem;
    font-size: 1.2rem;
    color: var(--accent-gold);
    transition: var(--transition-smooth);
}

.glass-card:hover .glass-icon {
    background: rgba(201, 162, 39, 0.30);
    transform: scale(1.08);
}

.glass-card h4 {
    color: var(--white);
    font-size: 0.88rem;
    font-weight: 600;
    margin-bottom: 0.2rem;
}

.glass-card p {
    color: rgba(255, 255, 255, 0.55);
    font-size: 0.72rem;
    line-height: 1.4;
    margin: 0;
}

/* Glassmorphism grid inside hero */
.hero-glass-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.75rem;
    margin-top: 0.25rem;
}

@media (max-width: 768px) {
    .hero-glass-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.6rem;
        margin-top: 2rem;
    }
    .glass-card {
        padding: 0.9rem 0.5rem;
    }
    .glass-card .glass-icon {
        width: 40px;
        height: 40px;
        font-size: 1rem;
    }
}

/* --- Centered Feature/Service Cards --- */
.service-card-v2 {
    background: var(--white);
    border: 1px solid rgba(0, 0, 0, 0.06);
    border-radius: 16px;
    padding: 2.5rem 2rem;
    text-align: center;
    transition: transform 0.35s ease, opacity 0.35s ease, box-shadow 0.35s ease, color 0.35s ease, background-color 0.35s ease, border-color 0.35s ease, filter 0.35s ease;
    position: relative;
    overflow: hidden;
}

.service-card-v2:hover {
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.08);
    transform: translateY(-4px);
    border-color: rgba(0, 102, 204, 0.15);
}

.service-card-v2 .card-icon {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(0, 102, 204, 0.08) 0%, rgba(0, 102, 204, 0.03) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.25rem;
    font-size: 1.5rem;
    color: var(--primary-blue);
    transition: transform 0.35s ease, opacity 0.35s ease, box-shadow 0.35s ease, color 0.35s ease, background-color 0.35s ease, border-color 0.35s ease, filter 0.35s ease;
}

.service-card-v2:hover .card-icon {
    background: linear-gradient(135deg, var(--primary-blue) 0%, #0052a3 100%);
    color: var(--white);
    transform: scale(1.05);
}

.service-card-v2 h3 {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--dark-navy);
    margin-bottom: 0.75rem;
}

.service-card-v2 p {
    font-size: 0.9375rem;
    color: var(--text-medium);
    line-height: 1.65;
    margin-bottom: 1.25rem;
}

.service-card-v2 .card-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--primary-blue);
    font-weight: 600;
    font-size: 0.9rem;
    text-decoration: none;
    transition: gap 0.3s ease;
}

.service-card-v2 .card-link:hover {
    gap: 12px;
    color: var(--primary-navy);
}

.service-card-v2 .card-link i {
    font-size: 1rem;
    transition: transform 0.3s ease;
}

.service-card-v2 .card-link:hover i {
    transform: translateX(4px);
}

.service-card-v2 .card-arrow {
    display: block;
    margin-top: 1rem;
    font-size: 1.5rem;
    color: var(--primary-blue);
    transition: transform 0.35s ease;
}

.service-card-v2:hover .card-arrow {
    transform: translateX(6px);
}

/* --- Spec Table V2 (clean reference style) --- */
.spec-table-v2 {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    background: var(--white);
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid rgba(0, 0, 0, 0.06);
    font-size: 0.9375rem;
}

.spec-table-v2 thead th {
    background: var(--dark-navy);
    color: var(--white);
    font-weight: 600;
    padding: 14px 20px;
    text-align: left;
    font-size: 0.875rem;
    letter-spacing: 0.5px;
}

.spec-table-v2 tbody tr {
    transition: background 0.2s ease;
}

.spec-table-v2 tbody tr:nth-child(even) {
    background: rgba(0, 102, 204, 0.02);
}

.spec-table-v2 tbody tr:hover {
    background: rgba(0, 102, 204, 0.05);
}

.spec-table-v2 tbody td {
    padding: 12px 20px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.04);
    color: var(--text-dark);
}

.spec-table-v2 tbody td:first-child {
    font-weight: 600;
    color: var(--dark-navy);
    width: 40%;
}

/* --- Applications Grid V2 --- */
.app-grid-v2 {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 1.25rem;
}

.app-item-v2 {
    background: var(--white);
    border: 1px solid rgba(0, 0, 0, 0.06);
    border-radius: 14px;
    padding: 2rem 1rem;
    text-align: center;
    transition: transform 0.35s ease, opacity 0.35s ease, box-shadow 0.35s ease, color 0.35s ease, background-color 0.35s ease, border-color 0.35s ease, filter 0.35s ease;
}

.app-item-v2:hover {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
    transform: translateY(-3px);
    border-color: rgba(0, 102, 204, 0.2);
}

.app-item-v2 i {
    font-size: 2rem;
    color: var(--primary-blue);
    margin-bottom: 0.75rem;
    display: block;
    transition: transform 0.35s ease;
}

.app-item-v2:hover i {
    transform: scale(1.1);
}

.app-item-v2 p {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--dark-navy);
    margin: 0;
}

/* --- Section spacing improvements --- */
.section-xl { padding: 80px 0; }
.section-lg { padding: 64px 0; }

@media (max-width: 768px) {
    .section-xl { padding: 48px 0; }
    .section-lg { padding: 40px 0; }
}

/* Utility classes */
.text-center { text-align: center; }
.text-right { text-align: right; }
.text-left { text-align: left; }
.text-muted { color: var(--text-medium); }
.text-dark { color: var(--text-dark); }
.text-white { color: var(--white); }
.bg-white { background: var(--white); }
.bg-light { background: var(--light-gray); }
.d-block { display: block; }
.d-inline-block { display: inline-block; }
.d-none { display: none; }
.d-flex { display: flex; }
.justify-content-center { justify-content: center; }
.justify-content-between { justify-content: space-between; }
.align-items-center { align-items: center; }
.flex-wrap { flex-wrap: wrap; }
.m-0 { margin: 0; }
.mt-0 { margin-top: 0; }
.mb-0 { margin-bottom: 0; }
.ml-auto { margin-left: auto; }
.mr-auto { margin-right: auto; }
.mx-auto { margin-left: auto; margin-right: auto; }
.p-0 { padding: 0; }
.w-100 { width: 100%; }
.h-100 { height: 100%; }
.position-relative { position: relative; }
.overflow-hidden { overflow: hidden; }
.rounded { border-radius: var(--radius-md); }
.border { border: 1px solid var(--border-gray); }
.border-0 { border: 0; }
.shadow-none { box-shadow: none; }

/* --- Feature Cards Grid (new equipment pages) --- */
.feature-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.5rem;
}
@media (max-width: 768px) {
    .feature-cards {
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem;
    }
}
@media (max-width: 480px) {
    .feature-cards {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.75rem;
    }
}

/* --- Table Responsive --- */
.table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* --- Card Link Arrow --- */
.card-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--primary-blue);
    font-weight: 600;
    font-size: 0.9rem;
    text-decoration: none;
    transition: gap 0.3s ease;
}
.card-link:hover {
    gap: 12px;
    color: var(--primary-navy);
}
.card-link i {
    font-size: 1rem;
    transition: transform 0.3s ease;
}
.card-link:hover i {
    transform: translateX(4px);
}
/* ============================================
   BUTTON SPACING & CONTAINER FIXES
   ============================================ */

/* Card actions — flex row for buttons inside cards */
.card-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: auto;
    align-items: center;
    padding-top: 0.5rem;
}

/* Text link styled to align with buttons in card-actions */
.btn-text {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--primary-blue);
    font-weight: 500;
    font-size: 0.875rem;
    text-decoration: none;
    padding: 6px 4px;
    transition: gap 0.25s ease, color 0.25s ease;
}

/* ============================================
   INDUSTRY / APPLICATION CARDS
   Base styles now in styles.css
   ============================================ */

/* Equipment tags inside industry cards */
.equipment-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin-bottom: 0.75rem;
}

.eq-tag {
    font-size: 0.72rem;
    background: linear-gradient(135deg, #f0f7ff 0%, #e8f0f8 100%);
    color: var(--primary-blue);
    padding: 0.25rem 0.65rem;
    border-radius: 20px;
    font-weight: 600;
    border: 1px solid rgba(0, 82, 155, 0.1);
    letter-spacing: 0.3px;
}
.btn-text:hover {
    gap: 10px;
    color: var(--primary-navy);
    text-decoration: underline;
}

/* Small button consistent sizing */
.btn-sm {
    padding: 8px 16px !important;
    font-size: 0.8125rem !important;
}

/* Feature content — ensure adequate spacing above buttons and learn-more links */
.feature-content .btn,
.feature-content .btn-sm {
    margin-top: 0.75rem !important;
}
.feature-content .learn-more {
    margin-top: 0.75rem !important;
    display: inline-flex !important;
    align-items: center;
    gap: 4px;
}

/* Process step buttons — spacing handled in styles.css */

/* Button spacing in text-center containers (replaces inline margin-left) */
.text-center > .btn + .btn,
.text-center > .btn + .btn-text,
.text-center > .btn-text + .btn {
    margin-left: 0.75rem;
}

/* ============================================
   UNDEFINED CLASS FALLBACKS
   ============================================ */

/* Section background variants */
.section-alt {
    background: linear-gradient(135deg, #f0f4f8 0%, #e8ecf1 100%);
}
.section-gray {
    background: var(--light-gray);
}

/* Content layout helpers */
.content-layout {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 2rem;
    align-items: start;
}
.content-main {
    min-width: 0;
}
.content-sidebar {
    min-width: 0;
}
.content-text {
    max-width: 70ch;
}
.content-media {
    border-radius: var(--radius-md);
    overflow: hidden;
}
.content-media img {
    width: 100%;
    height: auto;
    display: block;
}

/* 3-column card grid */
.cards-grid-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
    align-items: stretch;
}
@media (max-width: 992px) {
    .cards-grid-3 { grid-template-columns: repeat(2, 1fr); }
    .content-layout { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
    .cards-grid-3 { grid-template-columns: repeat(2, 1fr); }
}

/* Image card */
.image-card {
    border-radius: var(--radius-md);
    overflow: hidden;
    background: var(--white);
    border: 1px solid var(--border-gray);
}
.image-card img {
    width: 100%;
    height: auto;
    display: block;
}

/* Breadcrumb helpers (containerized pages) */
.breadcrumb-separator {
    color: var(--text-light);
    margin: 0 0.5rem;
}
.breadcrumb-current {
    color: var(--text-medium);
    font-weight: 500;
}

/* Page header helpers (containerized pages) */
.page-title {
    font-size: 2rem;
    font-weight: 700;
    color: var(--primary-navy);
    margin-bottom: 0.5rem;
}
.page-description {
    font-size: 1rem;
    color: var(--text-medium);
    max-width: 800px;
    line-height: 1.6;
}

/* Card list (oil & gas pages) */
.card-list {
    list-style: none;
    padding: 0;
    margin: 0;
}
.card-list li {
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--border-gray);
    display: flex;
    align-items: center;
    gap: 0.75rem;
}
.card-list li:last-child {
    border-bottom: none;
}

/* Info box (oil & gas pages) */
.info-box {
    background: linear-gradient(135deg, #f0f7ff 0%, var(--white) 100%);
    border-left: 4px solid var(--primary-blue);
    padding: 1.25rem;
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
    margin: 1rem 0;
}
.info-box h4 {
    color: var(--primary-navy);
    margin-bottom: 0.5rem;
    font-size: 1rem;
}
.info-box p {
    color: var(--text-medium);
    margin: 0;
    font-size: 0.9375rem;
}

/* Card image (case studies, oil & gas) */
.card-image {
    border-radius: var(--radius-md) var(--radius-md) 0 0;
    overflow: hidden;
    aspect-ratio: 16 / 9;
}
.card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Button large variant */
.btn-large {
    padding: 14px 32px;
    font-size: 1rem;
}

/* ============================================
   REMAINING UNDEFINED CLASS FALLBACKS
   ============================================ */

/* Dairy / industry cards (shared pattern) */
.cheese-card,
.icecream-card,
.fluid-card,
.powder-card,
.stream-card,
.cooling-card,
.reuse-card,
.consideration-card,
.butter-card,
.ph-source-card,
.recovery-card,
.case-study-card,
.temp-card,
.exchanger-card,
.neutralization-card,
.content-card,
.process-option {
    background: var(--white);
    border: 1px solid var(--border-gray);
    border-radius: 12px;
    padding: 1rem;
}

/* Contact form */
.contact-form-container {
    max-width: 800px;
    margin: 0 auto;
}
.contact-form {
    display: grid;
    gap: 1.25rem;
}
.form-actions {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    margin-top: 1rem;
}

/* Treatment / recovery layouts */
.treatment-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 1.5rem;
}
.train-steps,
.treatment-train {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.recovery-value,
.recovery-methods {
    background: var(--white);
    border-radius: var(--radius-md);
    padding: 1.25rem;
    border: 1px solid var(--border-gray);
}

/* SCADA / calculator */
.scada-info {
    background: var(--primary-light);
    border-radius: var(--radius-md);
    padding: 1rem;
    border-left: 4px solid var(--primary-blue);
}
.daf-calc-advanced {
    background: var(--white);
    border: 1px solid var(--border-gray);
    border-radius: 12px;
    padding: 1.5rem;
}
.step-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: var(--primary-blue);
    color: var(--white);
    border-radius: 50%;
    font-size: 0.875rem;
    font-weight: 600;
}

/* Single-use grids */
.timeline-wrapper,
.control-grid,
.temp-grid,
.neutralization-grid,
.considerations-grid,
.cooling-grid,
.recovery-types,
.streams-grid,
.recovery-grid,
.fluid-grid,
.butter-grid,
.cheese-grid,
.powder-grid,
.icecream-grid,
.challenges-grid,
.case-studies-grid,
.ph-sources-grid,
.equipment-table-wrapper {
    display: grid;
    gap: 1.5rem;
}
.timeline-line {
    width: 2px;
    background: var(--border-gray);
}

/* Info / content blocks */
.recovery-info,
.greek-info,
.greek-solutions,
.greek-content,
.whey-info,
.whey-process,
.whey-content,
.condensate-info,
.condensate-content,
.reuse-options,
.treatment-info,
.info-image,
.info-section,
.info-content,
.content-block,
.hero-bio,
.hero-guide,
.caption {
    display: block;
}
.info-image img,
.hero-bio img,
.hero-guide img {
    max-width: 100%;
    height: auto;
    border-radius: var(--radius-md);
}
.caption {
    font-size: 0.875rem;
    color: var(--text-light);
    margin-top: 0.5rem;
}

/* ============================================
   COST CHART — Key Performance Targets
   ============================================ */
.cost-chart {
    background: var(--white);
    border: 1px solid var(--border-gray);
    border-radius: var(--radius-lg);
    padding: 1.5rem;
    box-shadow: var(--shadow-sm);
}
.cost-chart-title {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--primary-navy);
    margin-bottom: 1rem;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.chart-legend {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 0.75rem;
}
.cost-chart .stat-box {
    background: var(--light-gray);
    border-radius: var(--radius-md);
    padding: 1rem;
    text-align: center;
}
.cost-chart .stat-number {
    font-size: 2rem;
    font-weight: 800;
    background: linear-gradient(135deg, var(--primary-navy) 0%, var(--primary-blue) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 0.25rem;
    line-height: 1.2;
}
.cost-chart .stat-label {
    font-size: 0.8rem;
    color: var(--text-medium);
    line-height: 1.4;
}
@media (max-width: 768px) {
    .chart-legend {
        grid-template-columns: repeat(2, 1fr);
    }
    .cost-chart .stat-number {
        font-size: 1.6rem;
    }
}

/* ==== CASE STUDY CONTENT BLOCKS ==== */
.compliance-block {
    background: var(--white);
    border-left: 4px solid var(--primary-blue);
    border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
    padding: 1.5rem 1.75rem;
    margin: 2rem 0;
    box-shadow: var(--shadow-sm);
}
.compliance-block .block-title {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--primary-navy);
    margin-bottom: 0.75rem;
    display: flex;
    align-items: center;
    gap: 10px;
}
.compliance-block .block-title i {
    color: var(--primary-blue);
    font-size: 1.125rem;
}
.compliance-block p {
    color: var(--text-medium);
    line-height: 1.7;
    margin: 0;
}

.learning-block {
    background: var(--white);
    border-left: 4px solid var(--accent-gold);
    border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
    padding: 1.5rem 1.75rem;
    margin: 2rem 0;
    box-shadow: var(--shadow-sm);
}
.learning-block .block-title {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--primary-navy);
    margin-bottom: 0.75rem;
    display: flex;
    align-items: center;
    gap: 10px;
}
.learning-block .block-title i {
    color: var(--accent-gold);
    font-size: 1.125rem;
}
.learning-block p {
    color: var(--text-medium);
    line-height: 1.7;
    margin: 0;
}

@media (max-width: 768px) {
    .compliance-block,
    .learning-block {
        padding: 1.25rem;
        margin: 1.5rem 0;
    }
}

/* --------------------------------------------
   CASE STUDY LIBRARY COMPONENTS
   -------------------------------------------- */

/* Case Card */
.case-card {
    display: flex;
    flex-direction: column;
    background: var(--white);
    border: 1px solid var(--border-gray);
    border-radius: var(--radius-lg);
    overflow: hidden;
    transition: transform 0.3s, opacity 0.3s, box-shadow 0.3s, color 0.3s, background-color 0.3s, border-color 0.3s, filter 0.3s ease;
    text-decoration: none;
    height: 100%;
}
.case-card:hover {
    box-shadow: var(--shadow-lg);
    transform: translateY(-4px);
    border-color: var(--primary-blue);
}
.case-card-image {
    height: 200px;
    background-size: cover;
    background-position: center;
    position: relative;
}
.case-card-image::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(10, 37, 64, 0.85) 0%, rgba(10, 37, 64, 0.3) 60%, transparent 100%);
}
.case-card-image .case-tag {
    position: absolute;
    bottom: 16px;
    left: 16px;
    z-index: 2;
    color: var(--white);
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    background: var(--primary-blue);
    padding: 4px 12px;
    border-radius: 4px;
}
.case-card-body {
    padding: 1.25rem;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}
.case-card-body h3 {
    font-size: 1.25rem;
    margin-bottom: 0.75rem;
    color: var(--primary-navy);
}
.case-card-body p {
    font-size: 0.9375rem;
    color: var(--text-medium);
    margin-bottom: 1.25rem;
    flex-grow: 1;
    line-height: 1.6;
}
.case-metrics {
    display: flex;
    gap: 12px;
    margin-bottom: 1rem;
    flex-wrap: wrap;
}
.case-metric {
    background: var(--light-gray);
    border-radius: var(--radius-md);
    padding: 8px 14px;
    text-align: center;
    flex: 1;
    min-width: 70px;
}
.case-metric-value {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--primary-navy);
    line-height: 1.2;
}
.case-metric-label {
    font-size: 0.6875rem;
    color: var(--text-light);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.case-card-body .resource-link {
    font-size: 0.9375rem;
    font-weight: 500;
    color: var(--primary-blue);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: auto;
}
.case-card-body .resource-link:hover {
    color: var(--primary-navy);
}

/* Filter Bar */
.filter-bar {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: center;
    margin-bottom: 1.5rem;
}
.filter-btn {
    padding: 10px 20px;
    border: 1px solid var(--border-gray);
    background: var(--white);
    border-radius: 24px;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text-medium);
    cursor: pointer;
    transition: transform 0.2s, opacity 0.2s, box-shadow 0.2s, color 0.2s, background-color 0.2s, border-color 0.2s, filter 0.2s ease;
    font-family: inherit;
}
.filter-btn:hover,
.filter-btn.active {
    background: var(--primary-blue);
    color: var(--white);
    border-color: var(--primary-blue);
}

@media (max-width: 768px) {
    .case-metrics {
        gap: 8px;
    }
    .case-metric {
        padding: 6px 10px;
        min-width: 60px;
    }
    .case-metric-value {
        font-size: 1rem;
    }
    .filter-bar {
        gap: 8px;
    }
    .filter-btn {
        padding: 8px 14px;
        font-size: 0.8125rem;
    }
}

/* --------------------------------------------
   EXAMPLE APPLICATION COMPONENTS
   -------------------------------------------- */

/* Hero badges */
.hero-badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 14px;
    background: rgba(0, 112, 216, 0.15);
    border: 1px solid rgba(0, 112, 216, 0.30);
    border-radius: var(--radius-full);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--accent-gold);
    margin-bottom: 0.75rem;
}
.hero-label {
    display: inline-flex;
    align-items: center;
    padding: 4px 14px;
    background: rgba(0, 102, 204, 0.12);
    border: 1px solid rgba(0, 102, 204, 0.25);
    border-radius: var(--radius-full);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--primary-blue);
    margin-bottom: 0.75rem;
    margin-left: 0.5rem;
}

/* Two-column split layout */
.two-col-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    align-items: start;
}

/* Application / Example Card */
/* ============================================
   APPLICATION CARDS — Professional Design
   ============================================ */
.app-card {
    background: var(--white);
    border: 1px solid var(--border-gray);
    border-left: 3px solid var(--primary-blue);
    border-radius: var(--radius-lg);
    padding: 1.5rem;
    text-decoration: none;
    color: inherit;
    display: block;
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.35s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.35s cubic-bezier(0.4, 0, 0.2, 1), color 0.35s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.35s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.35s cubic-bezier(0.4, 0, 0.2, 1), filter 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 2px 8px rgba(0, 102, 204, 0.06);
    height: 100%;
    position: relative;
    overflow: hidden;
}
.app-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 3px;
    height: 100%;
    background: linear-gradient(180deg, var(--primary-blue) 0%, var(--primary-light) 100%);
    border-radius: 3px 0 0 3px;
    transition: width 0.35s ease;
}
.app-card:hover {
    box-shadow: 0 12px 32px rgba(0, 102, 204, 0.12);
    border-color: rgba(0, 102, 204, 0.15);
    border-left-color: var(--primary-blue);
    transform: translateY(-5px);
}
.app-card:hover::before {
    width: 4px;
}
.app-card .card-icon {
    width: 52px;
    height: 52px;
    border-radius: 14px;
    background: linear-gradient(135deg, rgba(0, 102, 204, 0.12) 0%, rgba(0, 102, 204, 0.04) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1rem;
    font-size: 1.25rem;
    color: var(--primary-blue);
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.35s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.35s cubic-bezier(0.4, 0, 0.2, 1), color 0.35s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.35s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.35s cubic-bezier(0.4, 0, 0.2, 1), filter 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    z-index: 1;
}
.app-card:hover .card-icon {
    background: linear-gradient(135deg, var(--primary-blue) 0%, #0052a3 100%);
    color: var(--white);
    transform: scale(1.08);
    border-radius: 14px;
    box-shadow: 0 4px 12px rgba(0, 102, 204, 0.25);
}
.app-card .icon-wrap {
    width: 52px;
    height: 52px;
    border-radius: 14px;
    background: linear-gradient(135deg, rgba(0, 102, 204, 0.12) 0%, rgba(0, 102, 204, 0.04) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1rem;
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.35s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.35s cubic-bezier(0.4, 0, 0.2, 1), color 0.35s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.35s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.35s cubic-bezier(0.4, 0, 0.2, 1), filter 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    z-index: 1;
}
.app-card .icon-wrap i {
    font-size: 1.25rem;
    color: var(--primary-blue);
    transition: color 0.35s ease;
}
.app-card:hover .icon-wrap {
    background: linear-gradient(135deg, var(--primary-blue) 0%, #0052a3 100%);
    transform: scale(1.08);
    border-radius: 14px;
    box-shadow: 0 4px 12px rgba(0, 102, 204, 0.25);
}
.app-card:hover .icon-wrap i {
    color: var(--white);
}
.app-card h3 {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--primary-navy);
    margin-bottom: 0.75rem;
    line-height: 1.3;
    transition: color 0.3s ease;
    position: relative;
    z-index: 1;
}
.app-card:hover h3 {
    color: var(--primary-blue);
}
.app-card p {
    font-size: 0.9375rem;
    color: var(--text-medium);
    line-height: 1.6;
    margin-bottom: 1rem;
    position: relative;
    z-index: 1;
}
.app-card .tag {
    margin-bottom: 0.35rem;
    position: relative;
    z-index: 1;
}
.app-card .tag-gold {
    background: rgba(255, 193, 7, 0.12);
    color: #b8860b;
    border-color: rgba(255, 193, 7, 0.2);
}

/* Inline tags / badges */
.tag {
    display: inline-flex;
    padding: 3px 10px;
    background: rgba(0, 102, 204, 0.08);
    border-radius: var(--radius-full);
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--primary-blue);
    border: 1px solid rgba(0, 102, 204, 0.12);
    margin-right: 6px;
    margin-bottom: 6px;
}
.tag-gold {
    background: rgba(255, 193, 7, 0.12);
    color: #b8860b;
    border-color: rgba(255, 193, 7, 0.2);
}
.tag-green {
    background: rgba(46, 125, 50, 0.08);
    color: #2e7d32;
    border-color: rgba(46, 125, 50, 0.15);
}
.tag-orange {
    background: rgba(230, 81, 0, 0.08);
    color: #e65100;
    border-color: rgba(230, 81, 0, 0.15);
}
.tag-purple {
    background: rgba(123, 31, 162, 0.08);
    color: #7b1fa2;
    border-color: rgba(123, 31, 162, 0.15);
}
.tag-blue {
    background: rgba(21, 101, 192, 0.08);
    color: #1565c0;
    border-color: rgba(21, 101, 192, 0.15);
}
.tag-amber {
    background: rgba(245, 127, 23, 0.08);
    color: #f57f17;
    border-color: rgba(245, 127, 23, 0.15);
}

/* Icon prefix inside card headings */
.card h3 .icon-prefix,
.card h4 .icon-prefix,
.feature-card h3 .icon-prefix,
.feature-card h4 .icon-prefix {
    color: var(--primary-blue);
    margin-right: 8px;
}
.icon-prefix {
    color: var(--primary-blue);
    margin-right: 8px;
}
.icon-prefix-lg {
    margin-right: 10px;
}

/* Dropdown divider */
.dropdown-divider,
.divider-dropdown {
    border-top: 1px solid var(--border-gray);
    margin: 6px 0;
}

/* Small arrow icon */
.arrow-sm {
    font-size: 0.7rem;
    margin-left: 4px;
}

/* Button block display */
.btn-block {
    display: block;
}

/* Text primary utility */
.text-primary {
    color: var(--primary-blue);
}
.text-gold {
    color: #8a6d1c;
}
.mr-8 {
    margin-right: 8px;
}
.mb-75 {
    margin-bottom: 0.75rem;
}
.mb-1 {
    margin-bottom: 1rem;
}
.mt-75 {
    margin-top: 0.75rem;
}

.mt-075 {
    margin-top: 0.75rem;
}
.card-link-wrap {
    text-decoration: none;
    color: inherit;
    display: block;
}
.table-th {
    padding: 8px 10px;
    border-bottom: 1px solid var(--border-gray);
    text-align: center;
}
.table-td {
    padding: 8px 10px;
    border-bottom: 1px solid var(--border-gray);
}

/* Process flow grid (overrides flex in styles.css) */
.process-flow {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 1rem;
}

/* Process step card */
.process-step-card {
    background: var(--white);
    border: 1px solid var(--border-gray);
    border-top: 3px solid var(--primary-blue);
    border-radius: var(--radius-lg);
    padding: 1.5rem 1.25rem;
    text-align: center;
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.35s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.35s cubic-bezier(0.4, 0, 0.2, 1), color 0.35s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.35s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.35s cubic-bezier(0.4, 0, 0.2, 1), filter 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    box-shadow: 0 2px 8px rgba(0, 102, 204, 0.06);
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.process-step-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--primary-blue), var(--primary-light));
    opacity: 0.8;
    transition: opacity 0.3s ease;
}
.process-step-card:hover {
    box-shadow: 0 12px 32px rgba(0, 102, 204, 0.12);
    border-color: rgba(0, 102, 204, 0.15);
    transform: translateY(-5px);
}
.process-step-card:hover::before {
    opacity: 1;
}
.process-step-card .step-number {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--primary-blue) 0%, #0052a3 100%);
    color: var(--white);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.875rem;
    margin: 0 auto 1rem;
    box-shadow: 0 3px 10px rgba(0, 102, 204, 0.2);
    position: relative;
    z-index: 1;
}
.process-step-card h4 {
    font-size: 1rem;
    font-weight: 700;
    color: var(--primary-navy);
    margin-bottom: 0.5rem;
}
.process-step-card h4 a {
    color: inherit;
    text-decoration: none;
}
.process-step-card h4 a:hover {
    color: var(--primary-blue);
}
.process-step-card p {
    font-size: 0.875rem;
    color: var(--text-medium);
    line-height: 1.5;
    margin: 0;
}

/* Equipment card (lightweight variant) */
.equipment-card {
    background: var(--white);
    border: 1px solid var(--border-gray);
    border-radius: var(--radius-lg);
    padding: 1.5rem;
    transition: transform 0.3s, opacity 0.3s, box-shadow 0.3s, color 0.3s, background-color 0.3s, border-color 0.3s, filter 0.3s ease;
    position: relative;
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    height: 100%;
    display: flex;
    flex-direction: column;
}
.equipment-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--gradient-card-top);
    opacity: 0.5;
    transition: opacity 0.3s ease;
}
.equipment-card:hover::before {
    opacity: 1;
}
.equipment-card:hover {
    box-shadow: var(--shadow-lg);
    border-color: rgba(0, 102, 204, 0.2);
    transform: translateY(-3px);
}
.equipment-card .card-icon {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(0, 102, 204, 0.1) 0%, rgba(0, 102, 204, 0.04) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 0.75rem;
    font-size: 1.3rem;
    color: var(--primary-blue);
    transition: transform 0.3s, opacity 0.3s, box-shadow 0.3s, color 0.3s, background-color 0.3s, border-color 0.3s, filter 0.3s ease;
}
.equipment-card:hover .card-icon {
    /* Keep the badge LIGHT on hover (no dark flip) — just a soft tint + lift. */
    background: linear-gradient(135deg, rgba(0, 102, 204, 0.18) 0%, rgba(0, 102, 204, 0.08) 100%) !important;
    color: var(--primary-blue);
    transform: scale(1.06);
}
.equipment-card h3 {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--primary-navy);
    margin-bottom: 0.5rem;
}
.equipment-card p {
    font-size: 0.875rem;
    color: var(--text-medium);
    line-height: 1.55;
    margin-bottom: 0.75rem;
    flex-grow: 1;
}
.equipment-card .cta-link {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--primary-blue);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: auto;
}
.equipment-card .cta-link:hover {
    color: var(--primary-navy);
}

/* Mobile */
@media (max-width: 768px) {
    .two-col-split {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.5rem;
    }
    .hero-label {
        margin-left: 0;
        margin-top: 0.5rem;
    }
    .process-flow {
        grid-template-columns: repeat(2, 1fr);
    }
    .app-card {
        padding: 1.25rem;
    }
}

/* ============================================
   EXAMPLE APPLICATION CARDS (pH pages)
   Professional thin-blue-frame container
   ============================================ */
.example-app-card {
    background: var(--white);
    border: 1.5px solid var(--primary-blue);
    border-radius: var(--radius-lg);
    padding: 1.5rem;
    text-decoration: none;
    color: inherit;
    display: block;
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.35s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.35s cubic-bezier(0.4, 0, 0.2, 1), color 0.35s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.35s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.35s cubic-bezier(0.4, 0, 0.2, 1), filter 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 2px 8px rgba(0, 102, 204, 0.08);
    height: 100%;
    position: relative;
    overflow: hidden;
}

.example-app-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--primary-blue), var(--primary-light));
}

.example-app-card:hover {
    box-shadow: 0 12px 32px rgba(0, 102, 204, 0.15);
    border-color: var(--primary-blue);
    transform: translateY(-5px);
}

.example-app-card .icon-wrap {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: linear-gradient(135deg, var(--primary-light) 0%, #e8f0f8 100%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1rem;
    color: var(--primary-blue);
    font-size: 1.25rem;
    transition: transform 0.3s ease;
}

.example-app-card:hover .icon-wrap {
    transform: scale(1.08);
}

.service-card-sludge .icon-wrap {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: linear-gradient(135deg, rgba(0, 102, 204, 0.12) 0%, rgba(0, 102, 204, 0.04) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 0.75rem;
    transition: transform 0.35s ease, opacity 0.35s ease, box-shadow 0.35s ease, color 0.35s ease, background-color 0.35s ease, border-color 0.35s ease, filter 0.35s ease;
}
.service-card-sludge .icon-wrap i {
    font-size: 1.15rem;
    color: var(--primary-blue);
}
.service-card-sludge:hover .icon-wrap {
    background: linear-gradient(135deg, var(--primary-blue) 0%, #0052a3 100%);
    transform: scale(1.05);
}
.service-card-sludge:hover .icon-wrap i {
    color: var(--white);
}

.example-app-card h4 {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--primary-navy);
    margin-bottom: 0.5rem;
}

.example-app-card p {
    font-size: 0.875rem;
    color: var(--text-medium);
    line-height: 1.6;
    margin: 0;
}

/* --------------------------------------------
   ADDITIONAL CLASSES FOR IMPORTED PAGES
   -------------------------------------------- */

/* Equipment card sludge (legacy name, matches live site) */
.equipment-card-sludge {
    background: var(--white);
    border: 1px solid var(--border-gray);
    border-radius: var(--radius-lg);
    padding: 1.5rem;
    transition: transform 0.3s, opacity 0.3s, box-shadow 0.3s, color 0.3s, background-color 0.3s, border-color 0.3s, filter 0.3s ease;
    position: relative;
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    height: 100%;
    display: flex;
    flex-direction: column;
}
.equipment-card-sludge::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--gradient-card-top);
    opacity: 0.5;
    transition: opacity 0.3s ease;
}
.equipment-card-sludge:hover::before {
    opacity: 1;
}
.equipment-card-sludge:hover {
    box-shadow: var(--shadow-lg);
    border-color: rgba(0, 102, 204, 0.2);
    transform: translateY(-3px);
}
.equipment-card-sludge h3 {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--primary-navy);
    margin-bottom: 0.5rem;
}
.equipment-card-sludge p {
    font-size: 0.875rem;
    color: var(--text-medium);
    line-height: 1.55;
    margin-bottom: 0.75rem;
    flex-grow: 1;
}
.equipment-card-sludge .cta-link {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--primary-blue);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: auto;
}
.equipment-card-sludge .cta-link:hover {
    color: var(--primary-navy);
}

/* Icon circle */
.icon-circle {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(0, 102, 204, 0.1) 0%, rgba(0, 102, 204, 0.04) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 0.75rem;
    font-size: 1.3rem;
    color: var(--primary-blue);
    transition: transform 0.3s, opacity 0.3s, box-shadow 0.3s, color 0.3s, background-color 0.3s, border-color 0.3s, filter 0.3s ease;
    flex-shrink: 0;
}
.equipment-card-sludge:hover .icon-circle,
.card:hover .icon-circle {
    background: linear-gradient(135deg, var(--primary-blue) 0%, #0052a3 100%);
    color: var(--white);
    transform: scale(1.06);
}

/* Icon left blue */
.icon-left-blue {
    margin-right: 8px;
    color: var(--primary-blue);
}

/* Icon right */
.icon-right {
    margin-left: 4px;
    font-size: 0.7rem;
    display: inline-block;
}

/* Text gray utility */
.text-gray {
    color: var(--text-medium);
}

/* CTA section sludge variant */
.cta-section-sludge {
    background: linear-gradient(135deg, var(--primary-navy) 0%, #0d3a5c 100%);
    padding: 48px 0;
    color: var(--white);
    text-align: center;
}
.cta-section-sludge h2 {
    font-size: 1.8rem;
    font-weight: 700;
    margin-bottom: 0.75rem;
    color: var(--white);
}
.cta-section-sludge p {
    font-size: 1rem;
    color: rgba(255,255,255,0.7);
    margin-bottom: 1.5rem;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}
.cta-section-sludge .btn {
    margin: 0 0.5rem;
}

@media (max-width: 768px) {
    .cta-section-sludge {
        padding: 36px 0;
    }
    .cta-section-sludge h2 {
        font-size: 1.4rem;
    }
}

/* --------------------------------------------
   PROFESSIONAL RESULTS SHOWCASE
   -------------------------------------------- */

.results-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 1.25rem;
    margin-top: 1.5rem;
}

.result-card {
    background: var(--white);
    border: 1px solid var(--border-gray);
    border-radius: var(--radius-lg);
    padding: 1.5rem 1rem;
    text-align: center;
    box-shadow: var(--shadow-sm);
    transition: transform 0.3s, opacity 0.3s, box-shadow 0.3s, color 0.3s, background-color 0.3s, border-color 0.3s, filter 0.3s ease;
    position: relative;
    overflow: hidden;
}

.result-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--gradient-card-top);
    opacity: 0.6;
    transition: opacity 0.3s ease;
}

.result-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
    border-color: rgba(0, 102, 204, 0.2);
}

.result-card:hover::before {
    opacity: 1;
}

.result-card .result-value {
    font-size: 1.75rem;
    font-weight: 800;
    line-height: 1.2;
    margin-bottom: 0.375rem;
    background: linear-gradient(135deg, var(--primary-navy) 0%, var(--primary-blue) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.result-card .result-label {
    font-size: 0.8125rem;
    color: var(--text-medium);
    line-height: 1.4;
}

/* Before / After comparison cards */
.before-after-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
    margin-top: 2rem;
}

.before-after-card {
    background: var(--white);
    border: 1px solid var(--border-gray);
    border-radius: var(--radius-lg);
    padding: 1.5rem;
    box-shadow: var(--shadow-sm);
}

.before-after-card.before {
    border-top: 4px solid #ef4444;
}

.before-after-card.after {
    border-top: 4px solid var(--success-green);
}

.before-after-card h4 {
    font-size: 1rem;
    font-weight: 700;
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    gap: 8px;
}

.before-after-card.before h4 {
    color: #ef4444;
}

.before-after-card.after h4 {
    color: var(--success-green);
}

.before-after-card ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.before-after-card li {
    padding: 0.5rem 0;
    color: var(--text-medium);
    font-size: 0.9375rem;
    border-bottom: 1px solid var(--border-gray);
}

.before-after-card li:last-child {
    border-bottom: none;
}

.before-after-card li strong {
    color: var(--primary-navy);
}

/* Results summary banner */
/* ============================================
   PID SERVICES COMPONENTS
   ============================================ */

/* Cross-link navigation bar */
.pid-cross-bar {
    background: linear-gradient(135deg, var(--primary-blue) 0%, #0a3a6d 100%);
    padding: 1rem 0;
}
.pid-cross-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 16px;
}
.pid-cross-link {
    background: var(--white);
    border-radius: var(--radius-md);
    padding: 14px 16px;
    text-decoration: none;
    color: var(--primary-navy);
    display: flex;
    align-items: center;
    gap: 12px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.08);
    transition: var(--transition-smooth);
}
.pid-cross-link:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 22px rgba(0,0,0,0.18);
}
.pid-cross-link .icon-wrap {
    width: 38px;
    height: 38px;
    background: var(--primary-light);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.pid-cross-link .icon-wrap i {
    font-size: 0.95rem;
    color: var(--primary-blue);
}
.pid-cross-link .text {
    line-height: 1.25;
}
.pid-cross-link strong {
    display: block;
    font-weight: 600;
    font-size: 0.9rem;
}
.pid-cross-link .text span {
    display: block;
    font-size: 0.78rem;
    color: var(--text-medium);
    margin-top: 2px;
}
.pid-cross-link.active {
    outline: 2px solid var(--accent-gold);
    outline-offset: -2px;
}

/* Standards grid */
.standards-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.75rem;
}
.standards-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.85rem 1rem;
    background: var(--white);
    border-radius: 8px;
    border: 1px solid var(--border-gray);
    transition: var(--transition-smooth);
}
.standards-item:hover {
    border-color: var(--primary-blue);
    box-shadow: 0 4px 12px rgba(0,0,0,0.06);
}
.standards-item i {
    font-size: 1rem;
    color: var(--accent-gold);
    flex-shrink: 0;
}
.standards-item span {
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--primary-navy);
}

/* Refinery table */
.refinery-table {
    border-collapse: collapse;
    width: 100%;
    font-size: 0.9rem;
}
.refinery-table thead th {
    background: var(--primary-navy);
    color: var(--white);
    padding: 0.875rem 1rem;
    text-align: left;
    font-weight: 600;
    position: sticky;
    top: 0;
    z-index: 10;
}
.refinery-table tbody tr:nth-child(even) {
    background: #f8fafc;
}
.refinery-table td {
    padding: 0.875rem 1rem;
    border-bottom: 1px solid var(--border-gray);
    vertical-align: top;
}

/* Abbr tooltip */
.abbr {
    border-bottom: 1px dotted var(--primary-blue);
    cursor: help;
    position: relative;
}
.abbr:hover::after {
    content: attr(data-tip);
    position: absolute;
    bottom: 120%;
    left: 50%;
    transform: translateX(-50%);
    background: var(--primary-navy);
    color: var(--white);
    padding: 0.5rem 0.75rem;
    border-radius: 6px;
    font-size: 0.8rem;
    white-space: nowrap;
    z-index: 20;
    pointer-events: none;
}

/* HAZOP cards (mobile) */
.hazop-card {
    background: var(--white);
    border: 1px solid var(--border-gray);
    border-radius: var(--radius-md);
    padding: 1rem;
    margin-bottom: 0.75rem;
}
.hazop-card label {
    font-size: 0.75rem;
    text-transform: uppercase;
    color: var(--text-light);
    font-weight: 600;
    display: block;
    margin-bottom: 0.25rem;
}
.hazop-card p {
    margin: 0 0 0.5rem;
    font-size: 0.9rem;
    color: var(--text-medium);
}
.hazop-tag {
    display: inline-block;
    background: var(--primary-light);
    color: var(--primary-navy);
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 600;
    margin-right: 0.25rem;
}

.results-summary {
    background: linear-gradient(135deg, var(--primary-navy) 0%, var(--primary-blue) 100%);
    border-radius: var(--radius-lg);
    padding: 1.5rem 2rem;
    color: var(--white);
    margin-top: 2rem;
    display: flex;
    justify-content: space-around;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
}

.results-summary .summary-item {
    text-align: center;
}

.results-summary .summary-value {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--white);
    line-height: 1.2;
}

.results-summary .summary-label {
    font-size: 0.75rem;
    color: rgba(255,255,255,0.7);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-top: 0.25rem;
}

@media (max-width: 768px) {
    .results-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem;
    }
    .result-card {
        padding: 1.25rem 0.75rem;
    }
    .result-card .result-value {
        font-size: 1.5rem;
    }
    .before-after-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .results-summary {
        padding: 1.25rem;
    }
    .pid-cross-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
    .pid-cross-link { padding: 12px; }
    .pid-cross-link .icon-wrap { width: 34px; height: 34px; }
    .standards-grid { grid-template-columns: repeat(2, 1fr); }
    .refinery-table { font-size: 0.8125rem; }
    .refinery-table th, .refinery-table td { padding: 0.625rem 0.75rem; }
    
    /* Mobile: App Cards */
    .app-card {
        padding: 1.25rem;
        border-left-width: 3px;
    }
    .app-card .card-icon {
        width: 44px;
        height: 44px;
        font-size: 1.1rem;
    }
    .app-card h3 {
        font-size: 1.05rem;
    }
    
    /* Mobile: Process Step Cards */
    .process-step-card {
        padding: 1.25rem;
    }
    .process-step-card .step-number {
        width: 36px;
        height: 36px;
        font-size: 0.8125rem;
    }
    
    /* Mobile: Cards Grid */
    .cards-grid .card {
        padding: 1.25rem;
    }
    
    /* Mobile: Equipment Cards */
    .equipment-card-sludge {
        padding: 1.25rem;
    }
}

/* ============================================
   ENHANCED CARD STYLES — Related Equipment
   Professional left-border card design
   ============================================ */
.cards-grid .card {
    background: var(--white);
    border: 1px solid var(--border-gray);
    border-left: 3px solid var(--primary-blue);
    border-radius: var(--radius-lg);
    padding: 1.5rem;
    box-shadow: 0 2px 8px rgba(0, 102, 204, 0.06);
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.35s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.35s cubic-bezier(0.4, 0, 0.2, 1), color 0.35s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.35s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.35s cubic-bezier(0.4, 0, 0.2, 1), filter 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}
.cards-grid .card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 3px;
    height: 100%;
    background: linear-gradient(180deg, var(--primary-blue) 0%, var(--primary-light) 100%);
    border-radius: 3px 0 0 3px;
}
.cards-grid .card:hover {
    box-shadow: 0 12px 32px rgba(0, 102, 204, 0.12);
    border-color: rgba(0, 102, 204, 0.15);
    transform: translateY(-5px);
}
.cards-grid .card:hover::before {
    width: 4px;
}
.cards-grid .card h3 {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--primary-navy);
    margin-bottom: 0.75rem;
    transition: color 0.3s ease;
}
.cards-grid .card:hover h3 {
    color: var(--primary-blue);
}
.cards-grid .card h3 .icon-left-blue {
    color: var(--primary-blue);
    margin-right: 0.5rem;
    transition: transform 0.3s ease;
}
.cards-grid .card:hover h3 .icon-left-blue {
    transform: scale(1.1);
}
.cards-grid .card p {
    font-size: 0.875rem;
    color: var(--text-medium);
    line-height: 1.6;
    margin-bottom: 1rem;
}

/* ============================================
   EQUIPMENT CARD SLUDGE — Enhanced
   ============================================ */
.equipment-card-sludge {
    background: var(--white);
    border: 1px solid var(--border-gray);
    border-left: 3px solid var(--primary-blue);
    border-radius: var(--radius-lg);
    padding: 1.5rem;
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.35s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.35s cubic-bezier(0.4, 0, 0.2, 1), color 0.35s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.35s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.35s cubic-bezier(0.4, 0, 0.2, 1), filter 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 102, 204, 0.06);
    height: 100%;
    display: flex;
    flex-direction: column;
}
.equipment-card-sludge::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 3px;
    height: 100%;
    background: linear-gradient(180deg, var(--primary-blue) 0%, var(--primary-light) 100%);
    border-radius: 3px 0 0 3px;
    transition: width 0.3s ease;
}
.equipment-card-sludge:hover::before {
    width: 4px;
}
.equipment-card-sludge:hover {
    box-shadow: 0 12px 32px rgba(0, 102, 204, 0.12);
    border-color: rgba(0, 102, 204, 0.15);
    transform: translateY(-5px);
}
.equipment-card-sludge .icon-circle {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: linear-gradient(135deg, rgba(0, 102, 204, 0.12) 0%, rgba(0, 102, 204, 0.04) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1rem;
    font-size: 1.2rem;
    color: var(--primary-blue);
    transition: transform 0.35s ease, opacity 0.35s ease, box-shadow 0.35s ease, color 0.35s ease, background-color 0.35s ease, border-color 0.35s ease, filter 0.35s ease;
    flex-shrink: 0;
    position: relative;
    z-index: 1;
}
.equipment-card-sludge:hover .icon-circle {
    background: linear-gradient(135deg, var(--primary-blue) 0%, #0052a3 100%);
    color: var(--white);
    transform: scale(1.08);
    box-shadow: 0 4px 12px rgba(0, 102, 204, 0.25);
}
.equipment-card-sludge h3 {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--primary-navy);
    margin-bottom: 0.5rem;
    transition: color 0.3s ease;
    position: relative;
    z-index: 1;
}
.equipment-card-sludge:hover h3 {
    color: var(--primary-blue);
}
.equipment-card-sludge p {
    font-size: 0.875rem;
    color: var(--text-medium);
    line-height: 1.6;
    margin-bottom: 1rem;
    flex-grow: 1;
    position: relative;
    z-index: 1;
}
.equipment-card-sludge .cta-link {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-weight: 600;
    font-size: 0.875rem;
    color: var(--primary-blue);
    text-decoration: none;
    transition: gap 0.3s ease;
}
.equipment-card-sludge .cta-link:hover {
    gap: 0.6rem;
}
.equipment-card-sludge .cta-link .icon-right {
    font-size: 0.75rem;
    transition: transform 0.3s ease;
}
.equipment-card-sludge .cta-link:hover .icon-right {
    transform: translateX(3px);
}
/* ============================================
   PRODUCT PAGE STYLES — Extracted from inline
   ============================================ */

/* ---- Hero Features (Product Page) ---- */
.hero-features {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
    margin-top: 2.5rem;
}
@media (max-width: 768px) { .hero-features { grid-template-columns: repeat(2, 1fr); gap: 16px; } }
@media (max-width: 480px) { .hero-features { grid-template-columns: 1fr; } }
.hero-feature-item {
    background: rgba(255,255,255,0.1);
    border-radius: 12px;
    padding: 14px;
    text-align: center;
    transition: transform 0.3s, opacity 0.3s, box-shadow 0.3s, color 0.3s, background-color 0.3s, border-color 0.3s, filter 0.3s ease;
}
.hero-feature-item:hover {
    background: rgba(255,255,255,0.15);
    transform: translateY(-4px);
}
.hero-feature-item i {
    font-size: 2rem;
    color: var(--accent-gold);
    margin-bottom: 12px;
}
.hero-feature-item h4 {
    color: var(--white);
    font-size: 1rem;
    margin-bottom: 4px;
}
.hero-feature-item p {
    color: rgba(255,255,255,0.7);
    font-size: 0.875rem;
    margin: 0;
}
@media (max-width: 768px) {
    .hero-features {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ---- Product Card ---- */
.product-card {
    background: var(--white);
    border: 1px solid var(--border-gray);
    border-left: 3px solid var(--primary-blue);
    border-radius: 12px;
    padding: 1.5rem;
    margin-bottom: 1rem;
    position: relative;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 102, 204, 0.06);
    transition: transform 0.35s ease, opacity 0.35s ease, box-shadow 0.35s ease, color 0.35s ease, background-color 0.35s ease, border-color 0.35s ease, filter 0.35s ease;
}
.product-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 3px;
    height: 100%;
    background: linear-gradient(180deg, var(--primary-blue) 0%, var(--primary-light) 100%);
    border-radius: 3px 0 0 3px;
}
.product-card:hover {
    box-shadow: 0 12px 32px rgba(0, 102, 204, 0.12);
    border-color: rgba(0, 102, 204, 0.15);
    transform: translateY(-3px);
}
.product-card h3 {
    color: var(--primary-navy);
    margin-bottom: 0.5rem;
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 1.25rem;
    font-weight: 700;
    position: relative;
    z-index: 1;
}
.product-card h3 i {
    color: var(--primary-blue);
    font-size: 1.25rem;
}
.product-card .product-code {
    display: inline-block;
    background: var(--primary-light);
    color: var(--primary-blue);
    padding: 4px 12px;
    border-radius: 4px;
    font-size: 0.875rem;
    font-weight: 600;
    margin-bottom: 1rem;
    position: relative;
    z-index: 1;
}
.product-card p {
    position: relative;
    z-index: 1;
}
.product-card h3 span {
    flex: 1;
    text-align: center;
}

/* ---- Mechanism Visual (Process Steps) ---- */
.mechanism-visual {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    flex-wrap: wrap;
    margin: 1.5rem 0;
    padding: 1.5rem;
    background: var(--light-gray);
    border-radius: 12px;
}
.mechanism-step {
    text-align: center;
    padding: 1.25rem 1rem;
    background: var(--white);
    border-radius: 12px;
    min-width: 120px;
    flex: 1;
    max-width: 180px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
    transition: transform 0.3s, opacity 0.3s, box-shadow 0.3s, color 0.3s, background-color 0.3s, border-color 0.3s, filter 0.3s ease;
}
.mechanism-step:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0,0,0,0.08);
}
.mechanism-step i {
    font-size: 2rem;
    color: var(--primary-blue);
    margin-bottom: 0.5rem;
    display: block;
}
.mechanism-step h4 {
    color: var(--primary-navy);
    font-size: 1rem;
    margin-bottom: 0.25rem;
}
.mechanism-step p {
    font-size: 0.8125rem;
    color: var(--text-medium);
    margin: 0;
}
.mechanism-arrow {
    font-size: 1.5rem;
    color: var(--primary-blue);
    flex-shrink: 0;
}
@media (max-width: 768px) {
    .mechanism-visual {
        gap: 0.75rem;
        padding: 1rem;
    }
    .mechanism-step {
        min-width: 100px;
        max-width: 140px;
        padding: 1rem 0.75rem;
    }
    .mechanism-step i {
        font-size: 1.5rem;
    }
    .mechanism-arrow {
        font-size: 1.25rem;
        transform: rotate(90deg);
    }
}

/* ---- Stats Row ---- */
.stats-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 1rem;
    margin-top: 1.5rem;
}
.stat-box {
    text-align: center;
    padding: 1.25rem;
    background: var(--light-gray);
    border-radius: 8px;
    transition: transform 0.3s, opacity 0.3s, box-shadow 0.3s, color 0.3s, background-color 0.3s, border-color 0.3s, filter 0.3s ease;
}
.stat-box:hover {
    background: var(--white);
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}
.stat-box .value {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--primary-navy);
}
.stat-box .label {
    font-size: 0.875rem;
    color: var(--text-medium);
}

/* ---- Feature Card Grid ---- */
.feature-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1.5rem;
    margin-top: 1.5rem;
}
.feature-card {
    background: var(--white);
    border: 1px solid var(--border-gray);
    border-radius: 12px;
    padding: 1.5rem;
    text-align: center;
    transition: transform 0.35s ease, opacity 0.35s ease, box-shadow 0.35s ease, color 0.35s ease, background-color 0.35s ease, border-color 0.35s ease, filter 0.35s ease;
}
.feature-card:hover {
    box-shadow: 0 8px 24px rgba(0,0,0,0.08);
    transform: translateY(-4px);
    border-color: var(--primary-blue);
}
.feature-card .icon-circle {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--primary-light) 0%, #e8f0f8 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1rem;
    font-size: 1.25rem;
    color: var(--primary-blue);
    transition: transform 0.3s, opacity 0.3s, box-shadow 0.3s, color 0.3s, background-color 0.3s, border-color 0.3s, filter 0.3s ease;
}
.feature-card:hover .icon-circle {
    background: linear-gradient(135deg, var(--primary-blue) 0%, #0052a3 100%);
    color: var(--white);
    transform: scale(1.08);
}
.feature-card h4 {
    color: var(--primary-navy);
    margin-bottom: 0.5rem;
    font-size: 1.05rem;
}
.feature-card p {
    font-size: 0.875rem;
    color: var(--text-medium);
    line-height: 1.6;
    margin: 0;
}

/* ---- Application Grid & Cards ---- */
.application-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.5rem;
    margin-top: 2rem;
}

.application-card {
    background: var(--white);
    border: 1px solid var(--border-gray);
    border-radius: 12px;
    padding: 1.75rem;
    transition: transform 0.35s ease, opacity 0.35s ease, box-shadow 0.35s ease, color 0.35s ease, background-color 0.35s ease, border-color 0.35s ease, filter 0.35s ease;
    text-decoration: none;
    color: inherit;
    display: flex;
    flex-direction: column;
}

.application-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 32px rgba(0, 102, 204, 0.12);
    border-color: var(--primary-blue);
}

.application-card i {
    width: 52px;
    height: 52px;
    border-radius: 12px;
    background: linear-gradient(135deg, var(--primary-light) 0%, #e8f0f8 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1rem;
    font-size: 1.25rem;
    color: var(--primary-blue);
    transition: transform 0.3s, opacity 0.3s, box-shadow 0.3s, color 0.3s, background-color 0.3s, border-color 0.3s, filter 0.3s ease;
}

.application-card:hover i {
    background: linear-gradient(135deg, var(--primary-blue) 0%, #0052a3 100%);
    color: var(--white);
    transform: scale(1.08);
}

.application-card h4 {
    color: var(--primary-navy);
    font-size: 1.1rem;
    margin-bottom: 0.5rem;
    font-weight: 600;
}

.application-card p {
    color: var(--text-medium);
    font-size: 0.9375rem;
    line-height: 1.6;
    margin: 0;
}

.product-card-gac {
    background: var(--white);
    border: 1px solid var(--border-gray);
    border-radius: 12px;
    padding: 1rem;
    margin-bottom: 0.75rem;
    transition: all 0.3s ease;
}
.product-card-gac:hover {
    box-shadow: var(--shadow-lg);
    transform: translateY(-4px);
}
.product-code-gac {
    display: inline-block;
    background: var(--primary-light);
    color: var(--primary-blue);
    padding: 6px 16px;
    border-radius: 4px;
    font-size: 0.875rem;
    font-weight: 600;
    margin-bottom: 1rem;
}
.product-card-gac h3 {
    color: var(--primary-navy);
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    gap: 12px;
}
.product-card-gac h3 i {
    color: var(--primary-blue);
}
.carbon-type-card {
    background: var(--white);
    border: 1px solid var(--border-gray);
    border-radius: 12px;
    overflow: hidden;
    transition: transform 0.3s ease, opacity 0.3s ease, box-shadow 0.3s ease;
}
.carbon-type-card:hover {
    box-shadow: var(--shadow-lg);
    transform: translateY(-4px);
}
.carbon-type-header {
    background: linear-gradient(135deg, var(--primary-blue) 0%, var(--primary-navy) 100%);
    color: var(--white);
    padding: 1rem;
}
.carbon-type-header i {
    font-size: 2rem;
    margin-bottom: 0.75rem;
    display: block;
}
.carbon-type-header h3 {
    color: var(--white);
    margin: 0;
    font-size: 1.25rem;
}
.carbon-type-body {
    padding: 1rem;
}
.carbon-type-body ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
.carbon-type-body ul li {
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--border-gray);
    color: var(--text-medium);
    font-size: 0.9375rem;
    display: flex;
    align-items: center;
    gap: 10px;
}
.carbon-type-body ul li:last-child {
    border-bottom: none;
}
.carbon-type-body ul li i {
    color: var(--primary-blue);
    font-size: 0.875rem;
}
.contaminant-card {
    background: var(--white);
    border: 1px solid var(--border-gray);
    border-radius: 12px;
    padding: 1rem;
    text-align: center;
    transition: all 0.3s ease, opacity 0.3s ease, box-shadow 0.3s ease;
}
.contaminant-card:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-4px);
}
.contaminant-card i {
    font-size: 2rem;
    color: var(--primary-blue);
    margin-bottom: 1rem;
}
.contaminant-card h4 {
    color: var(--primary-navy);
    margin-bottom: 0.5rem;
}
.contaminant-card .removal-rate {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--success-green);
}
.contaminant-card p {
    color: var(--text-medium);
    font-size: 0.875rem;
    margin-top: 0.5rem;
}
.performance-metric {
    text-align: center;
    padding: 1rem;
    background: var(--white);
    border-radius: 12px;
    border: 1px solid var(--border-gray);
}
.performance-metric .value {
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--primary-blue);
}
.performance-metric .label {
    color: var(--text-medium);
    font-size: 0.9375rem;
    margin-top: 0.5rem;
}

/* ---- Feature List ---- */
.feature-list {
    list-style: none;
    padding: 0;
    margin: 1rem 0;
}
.feature-list li {
    padding: 0.5rem 0;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    color: var(--text-medium);
    font-size: 0.9375rem;
}
.feature-list li i {
    color: var(--success-green);
    flex-shrink: 0;
}

/* ---- Comparison Table ---- */
.comparison-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 1.5rem;
    background: var(--white);
    border-radius: 8px;
    overflow: hidden;
}
.comparison-table th,
.comparison-table td {
    padding: 1rem 1.25rem;
    text-align: left;
    border-bottom: 1px solid var(--border-gray);
}
.comparison-table th {
    background: var(--light-gray);
    font-weight: 600;
    color: var(--primary-navy);
}
.comparison-table tr:last-child td {
    border-bottom: none;
}
.comparison-table .highlight {
    background: #ecfdf5;
    color: var(--success-green);
    font-weight: 600;
}

/* ---- View Details Link ---- */
.view-details-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--primary-blue);
    font-weight: 600;
    text-decoration: none;
    margin-top: 1.5rem;
    padding: 0.75rem 1.25rem;
    border: 2px solid var(--primary-blue);
    border-radius: 6px;
    transition: transform 0.3s, opacity 0.3s, box-shadow 0.3s, color 0.3s, background-color 0.3s, border-color 0.3s, filter 0.3s ease;
    position: relative;
    z-index: 1;
}
.view-details-link:hover {
    background: var(--primary-blue);
    color: var(--white);
}
.view-details-link i {
    font-size: 0.875rem;
}

/* ---- Product Variants Grid ---- */
.product-variants-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
    margin-top: 1.5rem;
}
.product-variant {
    background: var(--white);
    border: 1px solid var(--border-gray);
    border-left: 3px solid var(--primary-blue);
    border-radius: 12px;
    padding: 1.5rem;
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.35s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.35s cubic-bezier(0.4, 0, 0.2, 1), color 0.35s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.35s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.35s cubic-bezier(0.4, 0, 0.2, 1), filter 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 102, 204, 0.06);
}
.product-variant::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 3px;
    height: 100%;
    background: linear-gradient(180deg, var(--primary-blue) 0%, var(--primary-light) 100%);
    border-radius: 3px 0 0 3px;
}
.product-variant:hover {
    box-shadow: 0 12px 32px rgba(0, 102, 204, 0.12);
    border-color: rgba(0, 102, 204, 0.15);
    transform: translateY(-5px);
}
.product-variant::before {
    transition: width 0.3s ease;
}
.product-variant:hover::before {
    width: 4px;
}
.product-variant .product-code {
    display: inline-block;
    background: var(--primary-light);
    color: var(--primary-blue);
    padding: 4px 12px;
    border-radius: 4px;
    font-size: 0.875rem;
    font-weight: 600;
    margin-bottom: 1rem;
    position: relative;
    z-index: 1;
}
.product-variant h3 {
    color: var(--primary-navy);
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 1.15rem;
    font-weight: 700;
    position: relative;
    z-index: 1;
}
.product-variant h3 i {
    color: var(--primary-blue);
    font-size: 1.25rem;
    transition: transform 0.3s ease;
}
.product-variant:hover h3 i {
    transform: scale(1.15);
}
.product-variant h4 {
    color: var(--primary-navy);
    margin: 1rem 0 0.5rem;
    font-size: 1rem;
    font-weight: 600;
    position: relative;
    z-index: 1;
}
.product-variant p {
    color: var(--text-medium);
    font-size: 0.9375rem;
    line-height: 1.6;
    margin-bottom: 0.5rem;
    position: relative;
    z-index: 1;
}
.product-variant ul {
    list-style: none;
    padding: 0;
    margin: 0;
    font-size: 0.875rem;
    color: var(--text-medium);
    position: relative;
    z-index: 1;
}
.product-variant ul li {
    padding: 0.25rem 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.product-variant ul li::before {
    content: '\2022';
    color: var(--primary-blue);
    font-weight: bold;
}
@media (max-width: 768px) {
    .product-variants-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ---- Card Grid (for Cost Savings etc) ---- */
.card-grid-2 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
    margin-top: 1.5rem;
}
.card-grid-4 {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
    margin-top: 1.5rem;
}
@media (max-width: 768px) {
    .card-grid-2 {
        grid-template-columns: repeat(2, 1fr);
    }
    .card-grid-4 {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (max-width: 480px) {
    .card-grid-4 {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ---- Icon Sizes ---- */
.icon-2x {
    font-size: 2.5rem;
    color: var(--primary-blue);
    margin-bottom: 1rem;
    display: block;
}
.icon-lg {
    font-size: 3rem;
    color: var(--primary-blue);
}

/* ---- Single Column Grid ---- */
.single-column-grid {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    max-width: 800px;
    margin: 0 auto;
}
.single-column-grid .card {
    text-align: left;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 1.5rem;
    padding: 1.5rem;
}
.single-column-grid .card .card-icon {
    flex-shrink: 0;
    margin: 0;
    width: 52px;
    height: 52px;
    min-width: 52px;
}
.single-column-grid .card h3 {
    text-align: left;
    margin-bottom: 0.5rem;
    font-size: 1.1rem;
}
.single-column-grid .card p {
    text-align: left;
    margin-bottom: 0;
}
@media (max-width: 480px) {
    .single-column-grid .card {
        padding: 1.25rem;
        gap: 1rem;
    }
    .single-column-grid .card .card-icon {
        width: 44px;
        height: 44px;
        min-width: 44px;
    }
}

/* ---- Process Steps (Alternative) ---- */
.process-steps {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 1.5rem;
    justify-content: center;
}
.process-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 1rem;
    flex: 1;
    min-width: 200px;
    max-width: 260px;
    background: var(--white);
    border: 1px solid var(--border-gray);
    border-radius: 12px;
    padding: 1rem;
    transition: transform 0.35s ease, opacity 0.35s ease, box-shadow 0.35s ease, color 0.35s ease, background-color 0.35s ease, border-color 0.35s ease, filter 0.35s ease;
}
.process-step .step-number {
    width: 56px;
    height: 56px;
    background: linear-gradient(135deg, var(--primary-blue) 0%, #0068b8 100%);
    color: var(--white);
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 1.3rem;
    box-shadow: 0 4px 16px rgba(0,82,155,0.25);
}
.process-step h3, .process-step h4 {
    color: var(--primary-navy);
    margin-bottom: 0.5rem;
    font-size: 1.125rem;
}
.process-step p {
    font-size: 0.9375rem;
    color: var(--text-medium);
    line-height: 1.6;
    margin: 0;
}
.process-step:hover {
    transform: translateY(-8px);
    box-shadow: 0 16px 48px rgba(0,0,0,0.12);
    border-color: var(--primary-blue);
}
.process-step:hover .step-number {
    background: linear-gradient(135deg, var(--accent-gold) 0%, #d4a83a 100%);
    color: var(--primary-navy);
    transform: scale(1.12) rotate(-3deg);
}
@media (max-width: 768px) {
    .process-step {
        max-width: 100%;
        width: 100%;
    }
}

/* ---- Applications Grid ---- */
.applications-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    margin-top: 1.5rem;
}
.application-item {
    background: var(--white);
    padding: 1rem;
    border-radius: 8px;
    text-align: center;
    border: 1px solid var(--border-gray);
    text-decoration: none;
    color: inherit;
    display: flex;
    flex-direction: column;
    align-items: center;
    transition: transform 0.3s, opacity 0.3s, box-shadow 0.3s, color 0.3s, background-color 0.3s, border-color 0.3s, filter 0.3s ease;
    cursor: pointer;
}
.application-item:hover {
    background: var(--primary-light);
    border-color: var(--primary-blue);
    box-shadow: 0 8px 25px rgba(0, 102, 204, 0.15);
    transform: translateY(-4px);
}
.application-item h4 {
    color: var(--primary-navy);
    margin: 0;
    transition: transform 0.3s, opacity 0.3s, box-shadow 0.3s, color 0.3s, background-color 0.3s, border-color 0.3s, filter 0.3s ease;
}
.application-item:hover h4 {
    color: var(--primary-blue);
}
.application-item i {
    font-size: 2rem;
    color: var(--primary-blue);
    margin-bottom: 0.75rem;
    transition: transform 0.3s, opacity 0.3s, box-shadow 0.3s, color 0.3s, background-color 0.3s, border-color 0.3s, filter 0.3s ease;
}
.application-item:hover i {
    color: var(--primary-blue);
    transform: scale(1.1);
}

/* Support .card elements inside .applications-grid too */
.applications-grid > .card {
    background: var(--white);
    padding: 1.5rem;
    border-radius: 8px;
    text-align: center;
    border: 1px solid var(--border-gray);
    display: flex;
    flex-direction: column;
    align-items: center;
    transition: transform 0.3s, opacity 0.3s, box-shadow 0.3s, color 0.3s, background-color 0.3s, border-color 0.3s, filter 0.3s ease;
    cursor: pointer;
}
.applications-grid > .card:hover {
    background: var(--primary-light);
    border-color: var(--primary-blue);
    box-shadow: 0 8px 25px rgba(0, 102, 204, 0.15);
    transform: translateY(-4px);
}
.applications-grid > .card h3 {
    color: var(--primary-navy);
    margin: 0 0 0.75rem 0;
    font-size: 1.1rem;
    transition: transform 0.3s, opacity 0.3s, box-shadow 0.3s, color 0.3s, background-color 0.3s, border-color 0.3s, filter 0.3s ease;
}
.applications-grid > .card:hover h3 {
    color: var(--primary-blue);
}
.applications-grid > .card h3 a {
    color: inherit;
    text-decoration: none;
}
.applications-grid > .card p {
    font-size: 0.9375rem;
    color: var(--text-medium);
    line-height: 1.6;
    margin: 0 0 1rem 0;
    flex-grow: 1;
}
.applications-grid > .card .btn {
    margin-top: auto;
}
@media (max-width: 768px) {
    .applications-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ---- SCADA Badge & Highlight ---- */
.scada-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: linear-gradient(135deg, var(--primary-navy) 0%, #1a365d 100%);
    color: var(--white);
    padding: 0.5rem 1rem;
    border-radius: 6px;
    font-size: 0.8125rem;
    font-weight: 500;
    text-decoration: none;
    transition: transform 0.3s, opacity 0.3s, box-shadow 0.3s, color 0.3s, background-color 0.3s, border-color 0.3s, filter 0.3s ease;
    margin-left: 1rem;
}
.scada-badge:hover {
    background: linear-gradient(135deg, var(--primary-blue) 0%, #0052a3 100%);
    transform: translateY(-1px);
}
.scada-highlight {
    background: linear-gradient(135deg, #f0f7ff 0%, #e8f4fc 100%);
    border: 2px solid var(--primary-blue);
    border-radius: 12px;
    padding: 1rem;
    margin: 2rem 0;
    display: flex;
    align-items: center;
    gap: 1rem;
    transition: transform 0.3s, opacity 0.3s, box-shadow 0.3s, color 0.3s, background-color 0.3s, border-color 0.3s, filter 0.3s ease;
}
.scada-highlight:hover {
    box-shadow: 0 8px 25px rgba(0, 102, 204, 0.15);
    transform: translateY(-2px);
}
.scada-highlight-icon {
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, #0052a3 0%, var(--primary-blue) 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.scada-highlight-icon i {
    font-size: 1.5rem;
    color: var(--white);
}
.scada-highlight-content h4 {
    color: var(--primary-navy);
    margin: 0 0 0.5rem 0;
    font-size: 1.1rem;
}
.scada-highlight-content p {
    color: var(--text-medium);
    margin: 0 0 0.75rem 0;
    font-size: 0.95rem;
    line-height: 1.5;
}
.scada-highlight-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--primary-blue);
    font-weight: 600;
    text-decoration: none;
    font-size: 0.9rem;
    transition: transform 0.3s, opacity 0.3s, box-shadow 0.3s, color 0.3s, background-color 0.3s, border-color 0.3s, filter 0.3s ease;
}
.scada-highlight-link:hover {
    gap: 0.75rem;
}

/* ---- Image Containers ---- */
.product-overview-with-image {
    display: flex;
    flex-wrap: wrap;
    gap: 3rem;
    align-items: flex-start;
}
.product-image-container {
    flex: 0 0 400px;
    max-width: 100%;
}
.product-image-container img {
    width: 100%;
    height: auto;
    border-radius: 12px;
    box-shadow: var(--shadow-lg);
}
@media (max-width: 768px) {
    .product-image-container {
        flex: 1 1 100%;
    }
}


/* ============================================
   IMPORTED FROM v114 — Additional Component Styles
   ============================================ */

.industry-card-image {
    height: 200px;
    background-size: cover;
    background-position: center;
    position: relative;
}

.industry-card-body {
    padding: 1.4rem 1.5rem;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

.industry-card.outline-card .industry-card-image {
    background: linear-gradient(135deg, #f0f7ff 0%, #e8f0f8 100%);
    display: flex;
    align-items: center;
    justify-content: center;
}

.industry-card.outline-card .industry-card-image i {
    font-size: 2.5rem;
    color: var(--primary-blue);
}

.equipment-card .card-icon i {
    /* .equipment-card .card-icon has a pale-blue badge background, so a white
       glyph was barely visible. Use the brand blue for clear contrast. */
    color: var(--primary-blue) !important;
    font-size: inherit;
}
.equipment-card:hover .card-icon i {
    color: var(--primary-blue) !important; /* stays blue on the light badge */
}

.product-card:hover .card-icon {
    /* Keep the badge LIGHT on hover (no dark flip) — just a soft tint + lift. */
    background: linear-gradient(135deg, #dbeafe 0%, #cfe4fb 100%) !important;
    color: var(--primary-blue);
    transform: scale(1.06);
}

.product-card .card-icon i {
    /* The .product-card .card-icon badge has a LIGHT gradient background,
       so a white glyph was invisible. Use the brand blue for contrast. */
    color: var(--primary-blue) !important;
    font-size: inherit;
}
.product-card:hover .card-icon i {
    color: var(--primary-blue) !important; /* stays blue on the light badge */
}

.tech-card:hover .card-icon {
    background: linear-gradient(135deg, var(--primary-blue) 0%, #0052a3 100%);
    color: var(--white);
    transform: scale(1.06);
}

.tech-card .card-icon i {
    color: var(--white);
    font-size: inherit;
}

.service-card:hover .card-icon {
    background: linear-gradient(135deg, var(--primary-blue) 0%, #0052a3 100%);
    color: var(--white);
    transform: scale(1.06);
}

.service-card .card-icon i {
    color: var(--white);
    font-size: inherit;
}

.solution-card:hover .card-icon {
    background: linear-gradient(135deg, var(--primary-blue) 0%, #0052a3 100%);
    color: var(--white);
    transform: scale(1.06);
}

.solution-card .card-icon i {
    color: var(--white);
    font-size: inherit;
}

.process-card:hover .card-icon {
    background: linear-gradient(135deg, var(--primary-blue) 0%, #0052a3 100%);
    color: var(--white);
    transform: scale(1.06);
}

.process-card .card-icon i {
    color: var(--white);
    font-size: inherit;
}

.capability-card:hover .card-icon {
    background: linear-gradient(135deg, var(--primary-blue) 0%, #0052a3 100%);
    color: var(--white);
    transform: scale(1.06);
}

.capability-card .card-icon i {
    color: var(--white);
    font-size: inherit;
}

.system-card:hover .card-icon {
    background: linear-gradient(135deg, var(--primary-blue) 0%, #0052a3 100%);
    color: var(--white);
    transform: scale(1.06);
}

.system-card .card-icon i {
    color: var(--white);
    font-size: inherit;
}

.card .process-step.card-row strong {
    color: var(--primary-navy);
    font-weight: 600;
}

.card .process-step, .card .process-step.card-row {
        flex-direction: row !important;
        max-width: none !important;
        width: 100% !important;
    }

.system-cta-card {
    background: var(--white);
    border: 1px solid var(--border-gray);
    border-radius: 12px;
    padding: 2rem 2.5rem;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1.5rem;
    box-shadow: 0 4px 16px rgba(10,37,64,0.06);
}

.system-cta-card .cta-content {
    flex: 1;
    min-width: 280px;
}

.system-cta-card .cta-content h3 {
    color: var(--primary-navy);
    margin-bottom: 0.75rem;
    font-size: 1.25rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.system-cta-card .cta-content h3 i {
    color: var(--primary-blue);
    font-size: 1.5rem;
}

.system-cta-card .cta-content p {
    color: var(--text-medium);
    margin: 0;
    font-size: 0.9375rem;
    line-height: 1.65;
}

.system-cta-card .cta-buttons {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    min-width: 220px;
    max-width: 280px;
    flex-shrink: 0;
}

.system-cta-card .cta-buttons .btn {
    width: 100%;
    text-align: center;
    justify-content: center;
    max-width: 260px;
}

@media (max-width: 768px) {
    .system-cta-card {
        padding: 1.5rem;
    }

    .system-cta-card .cta-buttons {
        width: 100%;
    }

    .system-cta-card .cta-buttons .btn {
        max-width: none;
    }
}

.design-step-card {
    background: var(--white);
    border: 1px solid var(--border-gray);
    border-radius: 10px;
    padding: 1.5rem;
    transition: transform 0.3s, opacity 0.3s, box-shadow 0.3s, color 0.3s, background-color 0.3s, border-color 0.3s, filter 0.3s ease;
    position: relative;
    overflow: hidden;
}

.design-step-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 100%;
    background: linear-gradient(180deg, var(--primary-blue) 0%, var(--primary-navy) 100%);
}

.design-step-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(10,37,64,0.1);
    border-color: var(--primary-blue);
}

.design-step-card .step-number {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--primary-blue) 0%, #0052a3 100%);
    color: var(--white);
    font-weight: 700;
    font-size: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1rem;
    flex-shrink: 0;
}

.design-step-card h4 {
    color: var(--primary-navy);
    font-size: 1.05rem;
    margin-bottom: 0.5rem;
    font-weight: 600;
}

.design-step-card p {
    color: var(--text-medium);
    font-size: 0.875rem;
    line-height: 1.6;
    margin: 0;
}

.design-steps-grid {
        grid-template-columns: repeat(2, 1fr);
    }


/* ============================================
   V125 ADDITIONS — Card rows, industry cards, tech tags
   ============================================ */
.card-row {
    display: flex;
    flex-direction: row !important;
    align-items: flex-start !important;
    text-align: left !important;
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 0.5rem 0 !important;
    margin-bottom: 0 !important;
    gap: 0.75rem;
    flex: none !important;
    min-width: auto !important;
    max-width: none !important;
    width: 100%;
    box-shadow: none !important;
    position: relative;
    transition: none;
    cursor: default;
}
.card-row > div:last-child {
    flex: 1;
    font-size: 0.875rem;
    color: var(--text-medium);
    line-height: 1.5;
}
.card-row:hover {
    transform: none !important;
    box-shadow: none !important;
    border-color: transparent !important;
}
.card-description {
    flex-grow: 1;
}
.btn-row {
    margin-top: auto;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
}
.button-group {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: auto;
    align-items: center;
}
.icon-40 {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px;
    border-radius: 50% !important;
    font-size: 0.875rem !important;
    font-weight: 700;
    background: var(--primary-blue) !important;
    color: var(--white) !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    margin: 0 !important;
    flex-shrink: 0;
    animation: none !important;
    box-shadow: none !important;
    line-height: 1;
}
.industry-card {
    display: flex;
    flex-direction: column;
    position: relative;
    border: 1px solid #e8ecf1;
    border-radius: 14px;
    background: #fff;
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.35s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.35s cubic-bezier(0.4, 0, 0.2, 1), color 0.35s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.35s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.35s cubic-bezier(0.4, 0, 0.2, 1), filter 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: hidden;
}
.industry-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.1);
    border-color: #d0d8e2;
}
.tech-tags {
    flex-grow: 0;
}

/* ============================================
   GLOBAL MOBILE FIXES (480px and below)
   Prevents horizontal overflow across all pages
   ============================================ */
@media (max-width: 480px) {
    /* Force all auto-fit grids to single column */
    .grid-auto-200,
    .grid-auto-220,
    .grid-auto-240,
    .grid-auto-250,
    .grid-auto-300,
    .grid-auto-320,
    .grid-auto-400,
    .grid-2,
    .grid-3,
    .grid-2-1,
    .cards-grid,
    .applications-grid,
    .recovery-grid,
    .features-grid,
    .standards-grid,
    .comparison-grid,
    .feature-card-grid,
    .solution-grid,
    .metric-grid,
    .topics-grid,
    .industry-cards-grid,
    .equipment-categories-grid,
    .services-grid-top,
    .services-grid-bottom,
    .case-study-grid,
    .resources-grid,
    .calculator-layout,
    .form-row,
    .card-grid-4,
    .feature-cards,
    .application-grid {
        grid-template-columns: 1fr !important;
    }

    /* Override inline grid styles with repeat(3+) or fixed multi-column layouts */
    [style*="grid-template-columns: repeat(3"],
    [style*="grid-template-columns:repeat(3"],
    [style*="grid-template-columns: repeat(4"],
    [style*="grid-template-columns:repeat(4"] {
        grid-template-columns: 1fr !important;
    }

    /* Ensure tables don't push page wide */
    .table-responsive .refinery-table,
    .table-responsive .data-table,
    .table-responsive .standards-table,
    .table-responsive .comparison-table,
    .table-responsive .specs-table,
    .table-responsive .sensor-table,
    .table-responsive table {
        min-width: 280px !important;
    }

    /* Reduce table padding on very small screens */
    .table-responsive th,
    .table-responsive td {
        padding: 6px 8px;
        font-size: 0.75rem;
        white-space: normal;
        word-break: break-word;
    }

    /* Ensure all cards and containers wrap text */
    .card,
    .content-card,
    .recovery-card,
    .application-card,
    .feature-item,
    .section-description,
    .hero-description,
    .lead,
    p {
        overflow-wrap: break-word;
        word-break: break-word;
    }

    /* Reduce card padding */
    .card,
    .content-card,
    .recovery-card {
        padding: 0.875rem;
    }

    /* Compact hero feature items */
    .hero-features {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px;
    }
    .hero-feature-item {
        padding: 10px;
    }
    .hero-feature-item i {
        font-size: 1.5rem;
        margin-bottom: 8px;
    }
    .hero-feature-item h4 {
        font-size: 0.875rem;
    }
    .hero-feature-item p {
        font-size: 0.75rem;
    }

    /* Ensure images don't overflow */
    img {
        max-width: 100%;
        height: auto;
    }

    /* Prevent inline-style boxes from overflowing */
    div[style*="margin-top"],
    div[style*="padding"] {
        max-width: 100%;
        box-sizing: border-box;
    }
}

/* Orphaned class coverage — added 2026-04-27 */
.text-large {
    font-size: 1.125rem;
    line-height: 1.7;
    color: var(--text-secondary);
}
.items-start {
    align-items: flex-start !important;
}
.footer-logo {
    display: inline-block;
    margin-bottom: 0.75rem;
}

/* v130 import: process-step card styling */
/* Remove hover effects from nested steps */
.card .process-step:hover,
.card .process-step.card-row:hover {
    transform: none !important;
    box-shadow: none !important;
    border-color: transparent !important;
}

/* Small step numbers inside cards */
.card .process-step .step-number,
.card .process-step.card-row .step-number,
.card .process-step .step-number.icon-40,
.card .process-step.card-row .step-number.icon-40 {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px;
    border-radius: 50% !important;
    font-size: 0.875rem !important;
    font-weight: 700;
    background: var(--primary-blue) !important;
    color: var(--white) !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    margin: 0 !important;
    flex-shrink: 0;
    animation: none !important;
    box-shadow: none !important;
    line-height: 1;
}

/* Remove ::after pseudo-element from nested steps */
.card .process-step::after,
.card .process-step.card-row::after {
    display: none !important;
}

/* Hover state for step numbers inside cards */
.card .process-step:hover .step-number,
.card .process-step.card-row:hover .step-number {
    background: var(--accent-gold) !important;
    color: var(--primary-navy) !important;
    transform: none !important;
    box-shadow: none !important;
}


/* ============================================
   SOURCE: css/single-column-grid.css
   ============================================ */

/* ============================================
   SINGLE-COLUMN GRID CARDS
   Cards with icon above title, full-width text
   ============================================ */
.single-column-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
    max-width: 800px;
    margin: 0 auto;
}

.single-column-grid .card {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 1.25rem;
    padding: 1.5rem;
    text-align: left;
}

.single-column-grid .card .card-icon {
    flex-shrink: 0;
    margin: 0;
    width: 52px;
    height: 52px;
    min-width: 52px;
}

.single-column-grid .card h3 {
    text-align: left;
    margin-bottom: 0.5rem;
    font-size: 1.1rem;
}

.single-column-grid .card p {
    text-align: left;
    margin-bottom: 0;
}

/* Card content wrapper for icon + text side by side */
.single-column-grid .card > div:has(> h3) {
    flex: 1;
}

/* Responsive */
@media (max-width: 480px) {
    .single-column-grid .card {
        padding: 1.25rem;
        gap: 1rem;
    }
    .single-column-grid .card .card-icon {
        width: 44px;
        height: 44px;
        min-width: 44px;
    }
    .single-column-grid .card h3 {
        font-size: 1rem;
    }
}



/* ============================================
   SOURCE: css/product-pages.css
   ============================================ */

/* ============================================
   PRODUCT PAGE STYLES — Extracted from inline
   ============================================ */

/* ---- Hero Features (Product Page) ---- */
.hero-features {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
    margin-top: 2.5rem;
}
@media (max-width: 768px) { .hero-features { grid-template-columns: repeat(2, 1fr); gap: 16px; } }
@media (max-width: 480px) { .hero-features { grid-template-columns: 1fr; } }
.hero-feature-item {
    background: rgba(255,255,255,0.1);
    border-radius: 12px;
    padding: 14px;
    text-align: center;
    transition: transform 0.3s, opacity 0.3s, box-shadow 0.3s, color 0.3s, background-color 0.3s, border-color 0.3s, filter 0.3s ease;
}
.hero-feature-item:hover {
    background: rgba(255,255,255,0.15);
    transform: translateY(-4px);
}
.hero-feature-item i {
    font-size: 2rem;
    color: var(--accent-gold);
    margin-bottom: 12px;
}
.hero-feature-item h4 {
    color: var(--white);
    font-size: 1rem;
    margin-bottom: 4px;
}
.hero-feature-item p {
    color: rgba(255,255,255,0.7);
    font-size: 0.875rem;
    margin: 0;
}
@media (max-width: 768px) {
    .hero-features {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ---- Product Card ---- */
.product-card {
    background: var(--white);
    border: 1px solid var(--border-gray);
    border-left: 3px solid var(--primary-blue);
    border-radius: 12px;
    padding: 1.5rem;
    margin-bottom: 1rem;
    position: relative;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 102, 204, 0.06);
    transition: transform 0.35s ease, opacity 0.35s ease, box-shadow 0.35s ease, color 0.35s ease, background-color 0.35s ease, border-color 0.35s ease, filter 0.35s ease;
}
.product-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 3px;
    height: 100%;
    background: linear-gradient(180deg, var(--primary-blue) 0%, var(--primary-light) 100%);
    border-radius: 3px 0 0 3px;
}
.product-card:hover {
    box-shadow: 0 12px 32px rgba(0, 102, 204, 0.12);
    border-color: rgba(0, 102, 204, 0.15);
    transform: translateY(-3px);
}
.product-card h3 {
    color: var(--primary-navy);
    margin-bottom: 0.5rem;
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 1.25rem;
    font-weight: 700;
    position: relative;
    z-index: 1;
}
.product-card h3 i {
    color: var(--primary-blue);
    font-size: 1.25rem;
}
.product-card .product-code {
    display: inline-block;
    background: var(--primary-light);
    color: var(--primary-blue);
    padding: 4px 12px;
    border-radius: 4px;
    font-size: 0.875rem;
    font-weight: 600;
    margin-bottom: 1rem;
    position: relative;
    z-index: 1;
}
.product-card p {
    position: relative;
    z-index: 1;
}
.product-card h3 span {
    flex: 1;
    text-align: center;
}

/* ---- Mechanism Visual (Process Steps) ---- */
.mechanism-visual {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    flex-wrap: wrap;
    margin: 1.5rem 0;
    padding: 1.5rem;
    background: var(--light-gray);
    border-radius: 12px;
}
.mechanism-step {
    text-align: center;
    padding: 1.25rem 1rem;
    background: var(--white);
    border-radius: 12px;
    min-width: 120px;
    flex: 1;
    max-width: 180px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
    transition: transform 0.3s, opacity 0.3s, box-shadow 0.3s, color 0.3s, background-color 0.3s, border-color 0.3s, filter 0.3s ease;
}
.mechanism-step:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0,0,0,0.08);
}
.mechanism-step i {
    font-size: 2rem;
    color: var(--primary-blue);
    margin-bottom: 0.5rem;
    display: block;
}
.mechanism-step h4 {
    color: var(--primary-navy);
    font-size: 1rem;
    margin-bottom: 0.25rem;
}
.mechanism-step p {
    font-size: 0.8125rem;
    color: var(--text-medium);
    margin: 0;
}
.mechanism-arrow {
    font-size: 1.5rem;
    color: var(--primary-blue);
    flex-shrink: 0;
}
@media (max-width: 768px) {
    .mechanism-visual {
        gap: 0.75rem;
        padding: 1rem;
    }
    .mechanism-step {
        min-width: 100px;
        max-width: 140px;
        padding: 1rem 0.75rem;
    }
    .mechanism-step i {
        font-size: 1.5rem;
    }
    .mechanism-arrow {
        font-size: 1.25rem;
        transform: rotate(90deg);
    }
}

/* ---- Stats Row ---- */
.stats-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 1rem;
    margin-top: 1.5rem;
}
.stat-box {
    text-align: center;
    padding: 1.25rem;
    background: var(--light-gray);
    border-radius: 8px;
    transition: transform 0.3s, opacity 0.3s, box-shadow 0.3s, color 0.3s, background-color 0.3s, border-color 0.3s, filter 0.3s ease;
}
.stat-box:hover {
    background: var(--white);
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}
.stat-box .value {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--primary-navy);
}
.stat-box .label {
    font-size: 0.875rem;
    color: var(--text-medium);
}

/* ---- Feature Card Grid ---- */
.feature-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1.5rem;
    margin-top: 1.5rem;
}
.feature-card {
    background: var(--white);
    border: 1px solid var(--border-gray);
    border-radius: 12px;
    padding: 1.5rem;
    text-align: center;
    transition: transform 0.35s ease, opacity 0.35s ease, box-shadow 0.35s ease, color 0.35s ease, background-color 0.35s ease, border-color 0.35s ease, filter 0.35s ease;
}
.feature-card:hover {
    box-shadow: 0 8px 24px rgba(0,0,0,0.08);
    transform: translateY(-4px);
    border-color: var(--primary-blue);
}
.feature-card .icon-circle {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--primary-light) 0%, #e8f0f8 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1rem;
    font-size: 1.25rem;
    color: var(--primary-blue);
    transition: transform 0.3s, opacity 0.3s, box-shadow 0.3s, color 0.3s, background-color 0.3s, border-color 0.3s, filter 0.3s ease;
}
.feature-card:hover .icon-circle {
    background: linear-gradient(135deg, var(--primary-blue) 0%, #0052a3 100%);
    color: var(--white);
    transform: scale(1.08);
}
.feature-card h4 {
    color: var(--primary-navy);
    margin-bottom: 0.5rem;
    font-size: 1.05rem;
}
.feature-card p {
    font-size: 0.875rem;
    color: var(--text-medium);
    line-height: 1.6;
    margin: 0;
}

/* ---- Feature List ---- */
.feature-list {
    list-style: none;
    padding: 0;
    margin: 1rem 0;
}
.feature-list li {
    padding: 0.5rem 0;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    color: var(--text-medium);
    font-size: 0.9375rem;
}
.feature-list li i {
    color: var(--success-green);
    flex-shrink: 0;
}

/* ---- Comparison Table ---- */
.comparison-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 1.5rem;
    background: var(--white);
    border-radius: 8px;
    overflow: hidden;
}
.comparison-table th,
.comparison-table td {
    padding: 1rem 1.25rem;
    text-align: left;
    border-bottom: 1px solid var(--border-gray);
}
.comparison-table th {
    background: var(--light-gray);
    font-weight: 600;
    color: var(--primary-navy);
}
.comparison-table tr:last-child td {
    border-bottom: none;
}
.comparison-table .highlight {
    background: #ecfdf5;
    color: var(--success-green);
    font-weight: 600;
}

/* ---- View Details Link ---- */
.view-details-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--primary-blue);
    font-weight: 600;
    text-decoration: none;
    margin-top: 1.5rem;
    padding: 0.75rem 1.25rem;
    border: 2px solid var(--primary-blue);
    border-radius: 6px;
    transition: transform 0.3s, opacity 0.3s, box-shadow 0.3s, color 0.3s, background-color 0.3s, border-color 0.3s, filter 0.3s ease;
    position: relative;
    z-index: 1;
}
.view-details-link:hover {
    background: var(--primary-blue);
    color: var(--white);
}
.view-details-link i {
    font-size: 0.875rem;
}

/* ---- Product Variants Grid ---- */
.product-variants-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
    margin-top: 1.5rem;
}
.product-variant {
    background: var(--white);
    border: 1px solid var(--border-gray);
    border-left: 3px solid var(--primary-blue);
    border-radius: 12px;
    padding: 1.5rem;
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.35s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.35s cubic-bezier(0.4, 0, 0.2, 1), color 0.35s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.35s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.35s cubic-bezier(0.4, 0, 0.2, 1), filter 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 102, 204, 0.06);
}
.product-variant::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 3px;
    height: 100%;
    background: linear-gradient(180deg, var(--primary-blue) 0%, var(--primary-light) 100%);
    border-radius: 3px 0 0 3px;
}
.product-variant:hover {
    box-shadow: 0 12px 32px rgba(0, 102, 204, 0.12);
    border-color: rgba(0, 102, 204, 0.15);
    transform: translateY(-5px);
}
.product-variant::before {
    transition: width 0.3s ease;
}
.product-variant:hover::before {
    width: 4px;
}
.product-variant .product-code {
    display: inline-block;
    background: var(--primary-light);
    color: var(--primary-blue);
    padding: 4px 12px;
    border-radius: 4px;
    font-size: 0.875rem;
    font-weight: 600;
    margin-bottom: 1rem;
    position: relative;
    z-index: 1;
}
.product-variant h3 {
    color: var(--primary-navy);
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 1.15rem;
    font-weight: 700;
    position: relative;
    z-index: 1;
}
.product-variant h3 i {
    color: var(--primary-blue);
    font-size: 1.25rem;
    transition: transform 0.3s ease;
}
.product-variant:hover h3 i {
    transform: scale(1.15);
}
.product-variant h4 {
    color: var(--primary-navy);
    margin: 1rem 0 0.5rem;
    font-size: 1rem;
    font-weight: 600;
    position: relative;
    z-index: 1;
}
.product-variant p {
    color: var(--text-medium);
    font-size: 0.9375rem;
    line-height: 1.6;
    margin-bottom: 0.5rem;
    position: relative;
    z-index: 1;
}
.product-variant ul {
    list-style: none;
    padding: 0;
    margin: 0;
    font-size: 0.875rem;
    color: var(--text-medium);
    position: relative;
    z-index: 1;
}
.product-variant ul li {
    padding: 0.25rem 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.product-variant ul li::before {
    content: '\2022';
    color: var(--primary-blue);
    font-weight: bold;
}
@media (max-width: 768px) {
    .product-variants-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ---- Card Grid (for Cost Savings etc) ---- */
.card-grid-2 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
    margin-top: 1.5rem;
}
.card-grid-4 {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
    margin-top: 1.5rem;
}
@media (max-width: 768px) {
    .card-grid-2 {
        grid-template-columns: repeat(2, 1fr);
    }
    .card-grid-4 {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (max-width: 480px) {
    .card-grid-4 {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ---- Icon Sizes ---- */
.icon-2x {
    font-size: 2.5rem;
    color: var(--primary-blue);
    margin-bottom: 1rem;
    display: block;
}
.icon-lg {
    font-size: 3rem;
    color: var(--primary-blue);
}

/* ---- Single Column Grid ---- */
.single-column-grid {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    max-width: 800px;
    margin: 0 auto;
}
.single-column-grid .card {
    text-align: left;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 1.5rem;
    padding: 1.5rem;
}
.single-column-grid .card .card-icon {
    flex-shrink: 0;
    margin: 0;
    width: 52px;
    height: 52px;
    min-width: 52px;
}
.single-column-grid .card h3 {
    text-align: left;
    margin-bottom: 0.5rem;
    font-size: 1.1rem;
}
.single-column-grid .card p {
    text-align: left;
    margin-bottom: 0;
}
@media (max-width: 480px) {
    .single-column-grid .card {
        padding: 1.25rem;
        gap: 1rem;
    }
    .single-column-grid .card .card-icon {
        width: 44px;
        height: 44px;
        min-width: 44px;
    }
}

/* ---- Process Steps (Alternative) ---- */
.process-steps {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 1.5rem;
    justify-content: center;
}
.process-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 1rem;
    flex: 1;
    min-width: 200px;
    max-width: 260px;
    background: var(--white);
    border: 1px solid var(--border-gray);
    border-radius: 12px;
    padding: 1rem;
    transition: transform 0.35s ease, opacity 0.35s ease, box-shadow 0.35s ease, color 0.35s ease, background-color 0.35s ease, border-color 0.35s ease, filter 0.35s ease;
}
.process-step .step-number {
    width: 56px;
    height: 56px;
    background: linear-gradient(135deg, var(--primary-blue) 0%, #0068b8 100%);
    color: var(--white);
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 1.3rem;
    box-shadow: 0 4px 16px rgba(0,82,155,0.25);
}
.process-step h3, .process-step h4 {
    color: var(--primary-navy);
    margin-bottom: 0.5rem;
    font-size: 1.125rem;
}
.process-step p {
    font-size: 0.9375rem;
    color: var(--text-medium);
    line-height: 1.6;
    margin: 0;
}
.process-step:hover {
    transform: translateY(-8px);
    box-shadow: 0 16px 48px rgba(0,0,0,0.12);
    border-color: var(--primary-blue);
}
.process-step:hover .step-number {
    background: linear-gradient(135deg, var(--accent-gold) 0%, #d4a83a 100%);
    color: var(--primary-navy);
    transform: scale(1.12) rotate(-3deg);
}
@media (max-width: 768px) {
    .process-step {
        max-width: 100%;
        width: 100%;
    }
}

/* ---- Applications Grid ---- */
.applications-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    margin-top: 1.5rem;
}
.application-item {
    background: var(--white);
    padding: 1rem;
    border-radius: 8px;
    text-align: center;
    border: 1px solid var(--border-gray);
    text-decoration: none;
    color: inherit;
    display: flex;
    flex-direction: column;
    align-items: center;
    transition: transform 0.3s, opacity 0.3s, box-shadow 0.3s, color 0.3s, background-color 0.3s, border-color 0.3s, filter 0.3s ease;
    cursor: pointer;
}
.application-item:hover {
    background: var(--primary-light);
    border-color: var(--primary-blue);
    box-shadow: 0 8px 25px rgba(0, 102, 204, 0.15);
    transform: translateY(-4px);
}
.application-item h4 {
    color: var(--primary-navy);
    margin: 0;
    transition: transform 0.3s, opacity 0.3s, box-shadow 0.3s, color 0.3s, background-color 0.3s, border-color 0.3s, filter 0.3s ease;
}
.application-item:hover h4 {
    color: var(--primary-blue);
}
.application-item i {
    font-size: 2rem;
    color: var(--primary-blue);
    margin-bottom: 0.75rem;
    transition: transform 0.3s, opacity 0.3s, box-shadow 0.3s, color 0.3s, background-color 0.3s, border-color 0.3s, filter 0.3s ease;
}
.application-item:hover i {
    color: var(--primary-blue);
    transform: scale(1.1);
}
@media (max-width: 768px) {
    .applications-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ---- SCADA Badge & Highlight ---- */
.scada-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: linear-gradient(135deg, var(--primary-navy) 0%, #1a365d 100%);
    color: var(--white);
    padding: 0.5rem 1rem;
    border-radius: 6px;
    font-size: 0.8125rem;
    font-weight: 500;
    text-decoration: none;
    transition: transform 0.3s, opacity 0.3s, box-shadow 0.3s, color 0.3s, background-color 0.3s, border-color 0.3s, filter 0.3s ease;
    margin-left: 1rem;
}
.scada-badge:hover {
    background: linear-gradient(135deg, var(--primary-blue) 0%, #0052a3 100%);
    transform: translateY(-1px);
}
.scada-highlight {
    background: linear-gradient(135deg, #f0f7ff 0%, #e8f4fc 100%);
    border: 2px solid var(--primary-blue);
    border-radius: 12px;
    padding: 1rem;
    margin: 2rem 0;
    display: flex;
    align-items: center;
    gap: 1rem;
    transition: transform 0.3s, opacity 0.3s, box-shadow 0.3s, color 0.3s, background-color 0.3s, border-color 0.3s, filter 0.3s ease;
}
.scada-highlight:hover {
    box-shadow: 0 8px 25px rgba(0, 102, 204, 0.15);
    transform: translateY(-2px);
}
.scada-highlight-icon {
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, #0052a3 0%, var(--primary-blue) 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.scada-highlight-icon i {
    font-size: 1.5rem;
    color: var(--white);
}
.scada-highlight-content h4 {
    color: var(--primary-navy);
    margin: 0 0 0.5rem 0;
    font-size: 1.1rem;
}
.scada-highlight-content p {
    color: var(--text-medium);
    margin: 0 0 0.75rem 0;
    font-size: 0.95rem;
    line-height: 1.5;
}
.scada-highlight-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--primary-blue);
    font-weight: 600;
    text-decoration: none;
    font-size: 0.9rem;
    transition: transform 0.3s, opacity 0.3s, box-shadow 0.3s, color 0.3s, background-color 0.3s, border-color 0.3s, filter 0.3s ease;
}
.scada-highlight-link:hover {
    gap: 0.75rem;
}

/* ---- Image Containers ---- */
.product-overview-with-image {
    display: flex;
    flex-wrap: wrap;
    gap: 3rem;
    align-items: flex-start;
}
.product-overview-with-image > * {
    min-width: 0;
}
.product-image-container {
    flex: 0 0 400px;
    max-width: 100%;
}
.product-image-container img {
    width: 100%;
    height: auto;
    border-radius: 12px;
    box-shadow: var(--shadow-lg);
}
@media (max-width: 768px) {
    .product-image-container {
        flex: 1 1 100%;
    }
}


/* ============================================
   CONTAINERIZED SYSTEMS PAGE — Professional Layout
   ============================================ */

/* ---- System CTA Banner ---- */
.system-cta {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    align-items: center;
    background: linear-gradient(135deg, #f0f7ff 0%, #e8f4fc 50%, #f5f7fa 100%);
    border: 1px solid var(--border-gray);
    border-radius: 12px;
    padding: 1.5rem 2rem;
    margin: 1.5rem 0;
    box-shadow: 0 2px 8px rgba(0, 102, 204, 0.06);
    transition: transform 0.35s ease, opacity 0.35s ease, box-shadow 0.35s ease, color 0.35s ease, background-color 0.35s ease, border-color 0.35s ease, filter 0.35s ease;
}
.system-cta:hover {
    box-shadow: 0 8px 24px rgba(0, 102, 204, 0.1);
    transform: translateY(-2px);
}
.system-cta h3 {
    color: var(--primary-navy);
    margin-bottom: 0.5rem;
    font-size: 1.25rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}
.system-cta h3 i {
    color: var(--primary-blue);
    font-size: 1.25rem;
}
.system-cta p {
    color: var(--text-medium);
    margin: 0;
    font-size: 0.9375rem;
    line-height: 1.6;
}
.system-cta > div:first-child {
    flex: 1;
    min-width: 280px;
}
.system-cta > div:last-child {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    min-width: 200px;
}

/* ---- Cross-sell Bar ---- */
.cross-sell {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    padding: 0.875rem 1.25rem;
    margin-top: 1rem;
    background: var(--light-gray);
    border-radius: 8px;
    font-size: 0.875rem;
    color: var(--text-medium);
}
.cross-sell a {
    color: var(--primary-blue);
    font-weight: 600;
    text-decoration: none;
    transition: color 0.2s ease;
}
.cross-sell a:hover {
    color: var(--primary-navy);
    text-decoration: underline;
}
.cross-sell-divider {
    color: var(--border-gray);
    font-weight: 400;
    margin: 0 0.15rem;
    user-select: none;
}

/* ---- Product Card Icon ---- */
.product-card .card-icon {
    width: 56px;
    height: 56px;
    border-radius: 14px;
    background: linear-gradient(135deg, var(--primary-light) 0%, #e8f0f8 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1rem;
    font-size: 1.5rem;
    color: var(--primary-blue);
    transition: transform 0.3s, opacity 0.3s, box-shadow 0.3s, color 0.3s, background-color 0.3s, border-color 0.3s, filter 0.3s ease;
}
.product-card:hover .card-icon {
    /* Light hover tint (no dark flip) — keeps the blue glyph visible. */
    background: linear-gradient(135deg, #dbeafe 0%, #cfe4fb 100%);
    color: var(--primary-blue);
    transform: scale(1.08);
}

/* ---- Spec Grid ---- */
.spec-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
    margin: 1.5rem 0;
}
@media (max-width: 768px) { .spec-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .spec-grid { grid-template-columns: 1fr; } }
.spec-box {
    text-align: center;
    padding: 1.25rem 1rem;
    background: var(--light-gray);
    border-radius: 10px;
    transition: transform 0.3s, opacity 0.3s, box-shadow 0.3s, color 0.3s, background-color 0.3s, border-color 0.3s, filter 0.3s ease;
}
.spec-box:hover {
    background: var(--white);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
}
.spec-box .value {
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--primary-navy);
    line-height: 1.2;
}
.spec-box .label {
    font-size: 0.8rem;
    color: var(--text-medium);
    margin-top: 0.35rem;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}
@media (max-width: 768px) {
    .spec-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (max-width: 480px) {
    .spec-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ---- Container Dimensions Block ---- */
.container-dims {
    background: var(--white);
    border: 1px solid var(--border-gray);
    border-radius: 10px;
    padding: 1.25rem 1.5rem;
    margin: 1.5rem 0;
}
.container-dims h5 {
    color: var(--primary-navy);
    font-size: 0.95rem;
    font-weight: 600;
    margin-bottom: 0.75rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.container-dims p {
    font-size: 0.875rem;
    color: var(--text-medium);
    line-height: 1.6;
    margin: 0.4rem 0;
}
.container-dims p strong {
    color: var(--primary-navy);
}

/* ---- Component Section (Pumps & Ancillaries) ---- */
.component-section {
    margin: 1.5rem 0 0;
    padding-top: 1.5rem;
    border-top: 1px solid var(--border-gray);
}
.component-section h4 {
    color: var(--primary-navy);
    font-size: 1.05rem;
    font-weight: 600;
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.component-section h4 span {
    flex: 1;
}

/* ---- Component Grid ---- */
.component-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1rem;
}
.component-card {
    background: var(--white);
    border: 1px solid var(--border-gray);
    border-radius: 10px;
    padding: 1.25rem;
    position: relative;
    overflow: hidden;
    transition: transform 0.3s, opacity 0.3s, box-shadow 0.3s, color 0.3s, background-color 0.3s, border-color 0.3s, filter 0.3s ease;
}
.component-card:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
    transform: translateY(-2px);
}
.component-card h5 {
    color: var(--primary-navy);
    font-size: 0.95rem;
    font-weight: 600;
    margin-bottom: 0.75rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--border-gray);
}
.component-card ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
.component-card ul li {
    font-size: 0.8125rem;
    color: var(--text-medium);
    line-height: 1.5;
    padding: 0.25rem 0;
    display: flex;
    align-items: flex-start;
    gap: 0.4rem;
}
.component-card ul li i {
    color: var(--success-green);
    font-size: 0.75rem;
    margin-top: 0.25rem;
    flex-shrink: 0;
}
@media (max-width: 768px) {
    .component-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (max-width: 480px) {
    .component-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ---- Product Card Colour Variants ---- */
.product-card--blue   { border-left-color: var(--primary-blue); }
.product-card--green  { border-left-color: var(--success-green); }
.product-card--purple { border-left-color: #8B5CF6; }
.product-card--amber  { border-left-color: #F59E0B; }
.product-card--navy   { border-left-color: var(--primary-navy); }
.product-card--orange { border-left-color: var(--warning-orange); }

.product-card--blue::before   { background: linear-gradient(180deg, var(--primary-blue) 0%, var(--primary-light) 100%); }
.product-card--green::before  { background: linear-gradient(180deg, var(--success-green) 0%, #d1fae5 100%); }
.product-card--purple::before { background: linear-gradient(180deg, #8B5CF6 0%, #ede9fe 100%); }
.product-card--amber::before  { background: linear-gradient(180deg, #F59E0B 0%, #fef3c7 100%); }
.product-card--navy::before   { background: linear-gradient(180deg, var(--primary-navy) 0%, #cbd5e1 100%); }
.product-card--orange::before { background: linear-gradient(180deg, var(--warning-orange) 0%, #ffedd5 100%); }

.product-card--green:hover  { border-color: rgba(16, 185, 129, 0.25); box-shadow: 0 12px 32px rgba(16, 185, 129, 0.1); }
.product-card--purple:hover { border-color: rgba(139, 92, 246, 0.25); box-shadow: 0 12px 32px rgba(139, 92, 246, 0.1); }
.product-card--amber:hover  { border-color: rgba(245, 158, 11, 0.25); box-shadow: 0 12px 32px rgba(245, 158, 11, 0.1); }
.product-card--navy:hover   { border-color: rgba(10, 37, 64, 0.25); box-shadow: 0 12px 32px rgba(10, 37, 64, 0.1); }
.product-card--orange:hover { border-color: rgba(249, 115, 22, 0.25); box-shadow: 0 12px 32px rgba(249, 115, 22, 0.1); }


/* ============================================
   PROCESS CATALOGUE — Containerized Wastewater
   ============================================ */

/* ---- Process Catalogue Card Grid ---- */
.process-catalogue-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.25rem;
    margin-top: 2rem;
}
.process-catalogue-card {
    background: var(--white);
    border: 1px solid var(--border-gray);
    border-radius: 12px;
    padding: 1.5rem;
    position: relative;
    overflow: hidden;
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.35s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.35s cubic-bezier(0.4, 0, 0.2, 1), color 0.35s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.35s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.35s cubic-bezier(0.4, 0, 0.2, 1), filter 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 2px 8px rgba(0, 102, 204, 0.06);
    display: flex;
    flex-direction: column;
}
.process-catalogue-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 100%;
    background: linear-gradient(180deg, var(--primary-blue) 0%, var(--primary-light) 100%);
    border-radius: 4px 0 0 4px;
}
.process-catalogue-card:hover {
    box-shadow: 0 12px 32px rgba(0, 102, 204, 0.12);
    transform: translateY(-4px);
    border-color: rgba(0, 102, 204, 0.15);
}
.process-catalogue-card .card-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: linear-gradient(135deg, var(--primary-light) 0%, #e8f0f8 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1rem;
    font-size: 1.25rem;
    color: var(--primary-blue);
    transition: transform 0.3s, opacity 0.3s, box-shadow 0.3s, color 0.3s, background-color 0.3s, border-color 0.3s, filter 0.3s ease;
    flex-shrink: 0;
}
.process-catalogue-card:hover .card-icon {
    background: linear-gradient(135deg, var(--primary-blue) 0%, #0052a3 100%);
    color: var(--white);
    transform: scale(1.08);
}
.process-catalogue-card h3 {
    color: var(--primary-navy);
    font-size: 1.05rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
    line-height: 1.3;
}
.process-catalogue-card p {
    color: var(--text-medium);
    font-size: 0.875rem;
    line-height: 1.6;
    margin-bottom: 1rem;
    flex: 1;
}
.process-catalogue-card .card-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1rem;
}
.process-catalogue-card .card-meta span {
    font-size: 0.75rem;
    padding: 0.25rem 0.6rem;
    background: var(--light-gray);
    border-radius: 4px;
    color: var(--text-medium);
    font-weight: 500;
}
.process-catalogue-card .card-link {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    color: var(--primary-blue);
    font-weight: 600;
    font-size: 0.875rem;
    text-decoration: none;
    transition: gap 0.2s ease;
    margin-top: auto;
}
.process-catalogue-card .card-link:hover {
    gap: 0.6rem;
    color: var(--primary-navy);
}

/* Colour variants */
.process-catalogue-card--green::before  { background: linear-gradient(180deg, var(--success-green) 0%, #d1fae5 100%); }
.process-catalogue-card--purple::before { background: linear-gradient(180deg, #8B5CF6 0%, #ede9fe 100%); }
.process-catalogue-card--amber::before  { background: linear-gradient(180deg, #F59E0B 0%, #fef3c7 100%); }
.process-catalogue-card--navy::before   { background: linear-gradient(180deg, var(--primary-navy) 0%, #cbd5e1 100%); }
.process-catalogue-card--orange::before { background: linear-gradient(180deg, var(--warning-orange) 0%, #ffedd5 100%); }
.process-catalogue-card--red::before    { background: linear-gradient(180deg, #ef4444 0%, #fee2e2 100%); }
.process-catalogue-card--teal::before   { background: linear-gradient(180deg, #14b8a6 0%, #ccfbf1 100%); }

.process-catalogue-card--green:hover  { border-color: rgba(16, 185, 129, 0.25); box-shadow: 0 12px 32px rgba(16, 185, 129, 0.1); }
.process-catalogue-card--purple:hover { border-color: rgba(139, 92, 246, 0.25); box-shadow: 0 12px 32px rgba(139, 92, 246, 0.1); }
.process-catalogue-card--amber:hover  { border-color: rgba(245, 158, 11, 0.25); box-shadow: 0 12px 32px rgba(245, 158, 11, 0.1); }
.process-catalogue-card--navy:hover   { border-color: rgba(10, 37, 64, 0.25); box-shadow: 0 12px 32px rgba(10, 37, 64, 0.1); }
.process-catalogue-card--orange:hover { border-color: rgba(249, 115, 22, 0.25); box-shadow: 0 12px 32px rgba(249, 115, 22, 0.1); }
.process-catalogue-card--red:hover    { border-color: rgba(239, 68, 68, 0.25); box-shadow: 0 12px 32px rgba(239, 68, 68, 0.1); }
.process-catalogue-card--teal:hover   { border-color: rgba(20, 184, 166, 0.25); box-shadow: 0 12px 32px rgba(20, 184, 166, 0.1); }

/* Card icon colour variants */
.process-catalogue-card--green .card-icon  { color: var(--success-green); background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%); }
.process-catalogue-card--purple .card-icon { color: #8B5CF6; background: linear-gradient(135deg, #f5f3ff 0%, #ede9fe 100%); }
.process-catalogue-card--amber .card-icon  { color: #F59E0B; background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%); }
.process-catalogue-card--navy .card-icon   { color: var(--primary-blue); background: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 100%); }
.process-catalogue-card--orange .card-icon { color: var(--warning-orange); background: linear-gradient(135deg, #fff7ed 0%, #ffedd5 100%); }
.process-catalogue-card--red .card-icon    { color: #ef4444; background: linear-gradient(135deg, #fef2f2 0%, #fee2e2 100%); }
.process-catalogue-card--teal .card-icon   { color: #14b8a6; background: linear-gradient(135deg, #f0fdfa 0%, #ccfbf1 100%); }

.process-catalogue-card--green:hover .card-icon  { background: linear-gradient(135deg, var(--success-green) 0%, #059669 100%); color: var(--white); }
.process-catalogue-card--purple:hover .card-icon { background: linear-gradient(135deg, #8B5CF6 0%, #7c3aed 100%); color: var(--white); }
.process-catalogue-card--amber:hover .card-icon  { background: linear-gradient(135deg, #F59E0B 0%, #d97706 100%); color: var(--white); }
.process-catalogue-card--navy:hover .card-icon   { background: linear-gradient(135deg, #0052a3 0%, #1e293b 100%); color: var(--white); }
.process-catalogue-card--orange:hover .card-icon { background: linear-gradient(135deg, var(--warning-orange) 0%, #ea580c 100%); color: var(--white); }
.process-catalogue-card--red:hover .card-icon    { background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%); color: var(--white); }
.process-catalogue-card--teal:hover .card-icon   { background: linear-gradient(135deg, #14b8a6 0%, #0d9488 100%); color: var(--white); }

@media (max-width: 768px) {
    .process-catalogue-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ---- Section Label Variants ---- */
.section-label--gold {
    background: rgba(255,255,255,0.1) !important;
    color: var(--accent-gold) !important;
    border-color: rgba(201,162,39,0.3) !important;
}
.section-label--green {
    background: rgba(255,255,255,0.1) !important;
    color: #6ee7b7 !important;
    border-color: rgba(110,231,183,0.3) !important;
}

/* ---- Table Footer Highlight ---- */
.data-table tfoot {
    background: linear-gradient(135deg, var(--primary-light) 0%, #f0f7ff 100%);
    font-weight: 700;
}
.data-table tfoot td {
    border-bottom: none;
}

/* ---- Info / Highlight Box ---- */
.info-box {
    margin-top: 2rem;
    padding: 1.5rem;
    background: linear-gradient(135deg, #f0f7ff 0%, #e8f4fc 100%);
    border-radius: var(--radius-lg, 12px);
    border: 1px solid rgba(0,102,204,0.1);
}

/* ---- Feature List Plain ---- */
.feature-list-plain {
    list-style: none;
    padding: 0;
    margin: 0;
    font-size: 0.9375rem;
    color: var(--text-medium);
    line-height: 1.7;
}
.feature-list-plain li {
    padding: 0.35rem 0;
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
}
.feature-list-plain li i {
    color: var(--success-green);
    margin-top: 0.3rem;
    flex-shrink: 0;
}

/* ---- Process Train Section Enhancements ---- */
.process-train-section {
    position: relative;
}
.process-train-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: linear-gradient(90deg, var(--primary-blue) 0%, var(--primary-light) 100%);
}
.process-train-section.non-biological::before {
    background: linear-gradient(90deg, var(--primary-blue) 0%, var(--accent-gold) 100%);
}
.process-train-section.biological::before {
    background: linear-gradient(90deg, var(--success-green) 0%, #6ee7b7 100%);
}

/* ---- Text Utility Helpers ---- */
.text-9375 { font-size: 0.9375rem; }
.mr-8 { margin-right: 8px; }


/* ============================================
   PROCESS FLOW DIAGRAM — Subpage Enhancement
   ============================================ */

.process-flow-diagram {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin: 2rem 0;
    padding: 1.5rem;
    background: linear-gradient(135deg, #f8fafc 0%, #f0f4f8 100%);
    border-radius: 12px;
    border: 1px solid var(--border-gray);
}
.process-flow-step {
    text-align: center;
    padding: 1rem 1.25rem;
    background: var(--white);
    border-radius: 10px;
    min-width: 100px;
    max-width: 160px;
    flex: 1;
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
    transition: transform 0.3s, opacity 0.3s, box-shadow 0.3s, color 0.3s, background-color 0.3s, border-color 0.3s, filter 0.3s ease;
    position: relative;
}
.process-flow-step:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(0,0,0,0.08);
}
.process-flow-step i {
    font-size: 1.5rem;
    color: var(--primary-blue);
    margin-bottom: 0.5rem;
    display: block;
}
.process-flow-step h5 {
    color: var(--primary-navy);
    font-size: 0.875rem;
    font-weight: 600;
    margin-bottom: 0.25rem;
}
.process-flow-step p {
    font-size: 0.75rem;
    color: var(--text-medium);
    margin: 0;
    line-height: 1.4;
}
.process-flow-arrow {
    font-size: 1.25rem;
    color: var(--primary-blue);
    flex-shrink: 0;
    opacity: 0.5;
}
@media (max-width: 768px) {
    .process-flow-diagram {
        gap: 0.75rem;
        padding: 1rem;
    }
    .process-flow-step {
        min-width: 80px;
        max-width: 120px;
        padding: 0.875rem 0.75rem;
    }
    .process-flow-step i {
        font-size: 1.25rem;
    }
    .process-flow-arrow {
        transform: rotate(90deg);
        margin: 0.25rem 0;
    }
}

/* ---- Related Options Grid ---- */
.related-options-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1.25rem;
    margin-top: 1.5rem;
}
.related-option-card {
    background: var(--white);
    border: 1px solid var(--border-gray);
    border-radius: 10px;
    padding: 1.25rem;
    text-decoration: none;
    color: inherit;
    transition: transform 0.3s, opacity 0.3s, box-shadow 0.3s, color 0.3s, background-color 0.3s, border-color 0.3s, filter 0.3s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}
.related-option-card:hover {
    box-shadow: 0 8px 24px rgba(0,0,0,0.08);
    transform: translateY(-4px);
    border-color: var(--primary-blue);
}
.related-option-card i {
    font-size: 1.5rem;
    color: var(--primary-blue);
    margin-bottom: 0.75rem;
    transition: transform 0.3s, opacity 0.3s, box-shadow 0.3s, color 0.3s, background-color 0.3s, border-color 0.3s, filter 0.3s ease;
}
.related-option-card:hover i {
    transform: scale(1.1);
    color: var(--primary-blue);
}
.related-option-card h4 {
    color: var(--primary-navy);
    font-size: 0.95rem;
    font-weight: 600;
    margin-bottom: 0.35rem;
}
.related-option-card p {
    font-size: 0.8125rem;
    color: var(--text-medium);
    margin: 0;
    line-height: 1.5;
}

/* ---- Application Tags ---- */
.application-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 1rem 0;
}
.application-tag {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.4rem 0.8rem;
    background: var(--light-gray);
    border-radius: 6px;
    font-size: 0.8125rem;
    color: var(--text-medium);
    font-weight: 500;
    transition: transform 0.2s, opacity 0.2s, box-shadow 0.2s, color 0.2s, background-color 0.2s, border-color 0.2s, filter 0.2s ease;
}
.application-tag:hover {
    background: var(--primary-light);
    color: var(--primary-blue);
}
.application-tag i {
    font-size: 0.75rem;
    color: var(--primary-blue);
}


/* ============================================
   MISSING CLASSES — Containerized Systems Page
   ============================================ */

/* ---- Button Variants ---- */
.btn-solid {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 20px;
    font-size: 0.875rem;
    font-weight: 600;
    border-radius: 6px;
    background: var(--primary-blue);
    color: var(--white);
    text-decoration: none;
    border: none;
    cursor: pointer;
    transition: transform 0.3s, opacity 0.3s, box-shadow 0.3s, color 0.3s, background-color 0.3s, border-color 0.3s, filter 0.3s ease;
}
.btn-solid:hover {
    background: var(--primary-navy);
    color: var(--white);
    box-shadow: 0 4px 12px rgba(0, 102, 204, 0.25);
    transform: translateY(-1px);
}

.btn-ghost {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 20px;
    font-size: 0.875rem;
    font-weight: 600;
    border-radius: 6px;
    background: transparent;
    color: var(--primary-blue);
    text-decoration: none;
    border: 1px solid var(--primary-blue);
    cursor: pointer;
    transition: transform 0.3s, opacity 0.3s, box-shadow 0.3s, color 0.3s, background-color 0.3s, border-color 0.3s, filter 0.3s ease;
}
.btn-ghost:hover {
    background: var(--primary-blue);
    color: var(--white);
    box-shadow: 0 4px 12px rgba(0, 102, 204, 0.15);
    transform: translateY(-1px);
}

/* ---- CTA Buttons Inline ---- */
.cta-buttons-inline {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    align-items: center;
}

/* ---- Timeline Day Badge ---- */
.timeline-step .day {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--primary-blue) 0%, #0052a3 100%);
    color: var(--white);
    font-size: 1.25rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 0.75rem;
    box-shadow: 0 4px 12px rgba(0, 102, 204, 0.2);
}
.timeline-step:hover .day {
    transform: scale(1.1);
    box-shadow: 0 6px 16px rgba(0, 102, 204, 0.3);
}
@media (max-width: 768px) {
    .timeline-step .day {
        width: 42px;
        height: 42px;
        font-size: 1.1rem;
        margin-bottom: 0;
        flex-shrink: 0;
    }
}

/* ---- Control Panel Spec ---- */
.control-panel-spec {
    background: var(--white);
    border: 1px solid var(--border-gray);
    border-radius: 10px;
    padding: 1.25rem 1.5rem;
    margin-top: 1rem;
}
.control-panel-spec h5 {
    color: var(--primary-navy);
    font-size: 0.95rem;
    font-weight: 600;
    margin-bottom: 0.75rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--border-gray);
}
.control-panel-spec ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
.control-panel-spec ul li {
    font-size: 0.8125rem;
    color: var(--text-medium);
    line-height: 1.5;
    padding: 0.25rem 0;
    display: flex;
    align-items: flex-start;
    gap: 0.4rem;
}
.control-panel-spec ul li i {
    color: var(--primary-blue);
    font-size: 0.75rem;
    margin-top: 0.25rem;
    flex-shrink: 0;
}
.control-panel-spec ul li strong {
    color: var(--primary-navy);
}

/* ---- Jump Navigation ---- */
.jump-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    justify-content: center;
    padding: 1rem;
    margin: 1rem 0 2rem;
    background: var(--light-gray);
    border-radius: 10px;
}
.jump-nav a {
    display: inline-flex;
    align-items: center;
    padding: 0.5rem 1rem;
    background: var(--white);
    border: 1px solid var(--border-gray);
    border-radius: 6px;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--text-medium);
    text-decoration: none;
    transition: transform 0.2s, opacity 0.2s, box-shadow 0.2s, color 0.2s, background-color 0.2s, border-color 0.2s, filter 0.2s ease;
}
.jump-nav a:hover {
    background: var(--primary-blue);
    color: var(--white);
    border-color: var(--primary-blue);
    box-shadow: 0 4px 12px rgba(0, 102, 204, 0.15);
    transform: translateY(-1px);
}
@media (max-width: 768px) {
    .jump-nav {
        gap: 0.4rem;
        padding: 0.75rem;
    }
    .jump-nav a {
        padding: 0.4rem 0.75rem;
        font-size: 0.75rem;
    }
}


/* ============================================
   SPEC BAND CARDS — Horizontal Container Layout
   Replaces dense data tables with card grids
   ============================================ */

.spec-band-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 1.25rem;
    margin-top: 1.5rem;
}
.spec-band-card {
    background: var(--white);
    border: 1px solid var(--border-gray);
    border-radius: 12px;
    padding: 1.5rem;
    position: relative;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 102, 204, 0.06);
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.35s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.35s cubic-bezier(0.4, 0, 0.2, 1), color 0.35s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.35s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.35s cubic-bezier(0.4, 0, 0.2, 1), filter 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    flex-direction: column;
}
.spec-band-card:hover {
    box-shadow: 0 12px 32px rgba(0, 102, 204, 0.12);
    transform: translateY(-4px);
    border-color: rgba(0, 102, 204, 0.15);
}
.spec-band-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: linear-gradient(90deg, var(--primary-blue) 0%, var(--primary-light) 100%);
}
.spec-band-header {
    margin-bottom: 1rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--border-gray);
}
.spec-band-header h4 {
    color: var(--primary-navy);
    font-size: 1.05rem;
    font-weight: 700;
    margin-bottom: 0.25rem;
    line-height: 1.3;
}
.spec-band-header .spec-band-tag {
    display: inline-block;
    font-size: 0.75rem;
    padding: 0.2rem 0.6rem;
    background: var(--primary-light);
    color: var(--primary-blue);
    border-radius: 4px;
    font-weight: 600;
}
.spec-band-list {
    list-style: none;
    padding: 0;
    margin: 0;
    flex: 1;
}
.spec-band-item {
    padding: 0.6rem 0;
    border-bottom: 1px solid #f0f0f0;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}
.spec-band-item:last-child {
    border-bottom: none;
}
.spec-band-label {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-medium);
    text-transform: uppercase;
    letter-spacing: 0.3px;
}
.spec-band-value {
    font-size: 0.875rem;
    color: var(--primary-navy);
    line-height: 1.5;
}
.spec-band-value strong {
    color: var(--primary-navy);
    font-weight: 600;
}

/* Colour accent variants */
.spec-band-card--green::before  { background: linear-gradient(90deg, var(--success-green) 0%, #d1fae5 100%); }
.spec-band-card--purple::before { background: linear-gradient(90deg, #8B5CF6 0%, #ede9fe 100%); }
.spec-band-card--amber::before  { background: linear-gradient(90deg, #F59E0B 0%, #fef3c7 100%); }
.spec-band-card--navy::before   { background: linear-gradient(90deg, var(--primary-navy) 0%, #cbd5e1 100%); }
.spec-band-card--orange::before { background: linear-gradient(90deg, var(--warning-orange) 0%, #ffedd5 100%); }
.spec-band-card--red::before    { background: linear-gradient(90deg, #ef4444 0%, #fee2e2 100%); }
.spec-band-card--teal::before   { background: linear-gradient(90deg, #14b8a6 0%, #ccfbf1 100%); }

/* Horizontal scroll variant for 4+ cards */
.spec-band-scroll {
    display: flex;
    gap: 1.25rem;
    overflow-x: auto;
    padding-bottom: 0.5rem;
    margin-top: 1.5rem;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
}
.spec-band-scroll .spec-band-card {
    min-width: 280px;
    max-width: 320px;
    flex: 0 0 auto;
    scroll-snap-align: start;
}
.spec-band-scroll::-webkit-scrollbar {
    height: 6px;
}
.spec-band-scroll::-webkit-scrollbar-track {
    background: var(--light-gray);
    border-radius: 3px;
}
.spec-band-scroll::-webkit-scrollbar-thumb {
    background: var(--primary-blue);
    border-radius: 3px;
}

/* Stat summary cards (compact, number-focused) */
.stat-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 1rem;
    margin-top: 1rem;
}
.stat-card {
    background: var(--white);
    border: 1px solid var(--border-gray);
    border-radius: 10px;
    padding: 1rem;
    text-align: center;
    position: relative;
    overflow: hidden;
    box-shadow: 0 2px 6px rgba(0, 102, 204, 0.05);
}
.stat-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: linear-gradient(90deg, var(--primary-blue) 0%, var(--primary-light) 100%);
}
.stat-card-header {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-medium);
    margin-bottom: 0.5rem;
    padding-bottom: 0.4rem;
    border-bottom: 1px solid var(--border-gray);
}
.stat-card-value {
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--primary-blue);
    line-height: 1.2;
}
.stat-card-value--dark {
    color: var(--primary-navy);
}

@media (max-width: 768px) {
    .spec-band-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .spec-band-scroll {
        gap: 1rem;
    }
    .spec-band-scroll .spec-band-card {
        min-width: 260px;
        max-width: 280px;
    }
    .stat-card-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}


/* ============================================
   SENSOR CARDS — Instrumentation Grid
   Replaces sensor tables with compact cards
   ============================================ */

.sensor-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
    margin-top: 1rem;
}
.sensor-card {
    background: var(--white);
    border: 1px solid var(--border-gray);
    border-radius: 10px;
    padding: 1rem;
    position: relative;
    overflow: hidden;
    box-shadow: 0 2px 6px rgba(0, 102, 204, 0.05);
    transition: transform 0.3s, opacity 0.3s, box-shadow 0.3s, color 0.3s, background-color 0.3s, border-color 0.3s, filter 0.3s ease;
}
.sensor-card:hover {
    box-shadow: 0 8px 24px rgba(0, 102, 204, 0.1);
    transform: translateY(-2px);
    border-color: rgba(0, 102, 204, 0.15);
}
.sensor-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: linear-gradient(90deg, var(--primary-blue) 0%, var(--primary-light) 100%);
}
.sensor-card-header {
    margin-bottom: 0.75rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--border-gray);
}
.sensor-card-header h5 {
    color: var(--primary-navy);
    font-size: 0.9rem;
    font-weight: 600;
    margin: 0;
    line-height: 1.3;
}
.sensor-card-list {
    list-style: none;
    padding: 0;
    margin: 0;
}
.sensor-card-item {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: 0.35rem 0;
    border-bottom: 1px solid #f0f0f0;
    font-size: 0.8rem;
}
.sensor-card-item:last-child {
    border-bottom: none;
}
.sensor-card-label {
    font-weight: 600;
    color: var(--text-medium);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}
.sensor-card-value {
    color: var(--primary-navy);
    text-align: right;
    flex-shrink: 0;
    margin-left: 0.5rem;
}

@media (max-width: 768px) {
    .sensor-card-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (max-width: 480px) {
    .sensor-card-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}



/* ============================================
   SOURCE: css/pid-pages.css
   ============================================ */

/* ============================================
   PID PAGES — Combined Inline Styles
   Extracted from all pid-*.html files
   ============================================ */

/* Block 1 */
.hero-features { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-top: 2.5rem; }
 .hero-feature-item { background: rgba(255,255,255,0.1); border-radius: 12px; padding: 14px; text-align: center; transition: transform 0.3s, opacity 0.3s, box-shadow 0.3s, color 0.3s, background-color 0.3s, border-color 0.3s, filter 0.3s ease; }
 .hero-feature-item:hover { background: rgba(255,255,255,0.15); transform: translateY(-4px); }
 .hero-feature-item i { font-size: 2rem; color: var(--accent-gold); margin-bottom: 12px; }
 .hero-feature-item h4 { color: var(--white); font-size: 1rem; margin-bottom: 4px; }
 .hero-feature-item p { color: rgba(255,255,255,0.7); font-size: 0.875rem; margin: 0; }
 @media (max-width: 992px) { .hero-features { grid-template-columns: repeat(2, 1fr); } }
 @media (max-width: 768px) { .hero-features { grid-template-columns: repeat(2, 1fr); gap: 16px; } .hero-feature-item { padding: 14px; } }
 @media (max-width: 480px) { .hero-features { grid-template-columns: 1fr; } }
 .stats-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 1.5rem; }
 .stat-box { background: var(--white); border: 1px solid var(--border-gray); border-radius: 12px; padding: 1rem; text-align: center; }
 .stat-box h4 { font-size: 1.5rem; color: var(--primary-navy); margin-bottom: 0.5rem; }
 .stat-box p { font-size: 0.9375rem; color: var(--text-medium); margin: 0; }
 @media (max-width: 992px) { .stats-row { grid-template-columns: repeat(2, 1fr); } }
 @media (max-width: 768px) { .stats-row { grid-template-columns: repeat(2, 1fr); } }
 @media (max-width: 480px) { .stats-row { grid-template-columns: 1fr; } }
 .table-responsive { overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: 8px; border: 1px solid var(--border-gray); }
 .table-responsive::-webkit-scrollbar { height: 8px; }
 .table-responsive::-webkit-scrollbar-track { background: var(--light-gray); }
 .table-responsive::-webkit-scrollbar-thumb { background: var(--border-gray); border-radius: 4px; }
 .table-responsive::-webkit-scrollbar-thumb:hover { background: var(--text-medium); }
 .specs-table { width: 100%; border-collapse: collapse; font-size: 0.9375rem; table-layout: auto; }
 .specs-table th { background: var(--primary-navy); color: var(--white); padding: 14px 16px; text-align: left; }
 .specs-table td { padding: 12px 16px; border-bottom: 1px solid var(--border-gray); word-wrap: break-word; overflow-wrap: break-word; min-width: 100px; }
 .specs-table th:first-child, .specs-table td:first-child { min-width: 120px; }
 .specs-table tr:nth-child(even) { background: var(--light-gray); }
 @media (max-width: 768px) { .specs-table { font-size: 0.875rem; } .specs-table th, .specs-table td { padding: 10px 12px; } }
 .pid-cross-bar { background: linear-gradient(135deg, var(--primary-blue) 0%, #0a3a6d 100%); padding: 1rem 0; }
 .pid-cross-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; }
 .pid-cross-link { background: #ffffff; border-radius: 10px; padding: 14px 16px; text-decoration: none; color: var(--primary-navy); display: flex; align-items: center; gap: 12px; box-shadow: 0 2px 6px rgba(0,0,0,0.08); transition: transform 0.25s ease, opacity 0.25s ease, box-shadow 0.25s ease, color 0.25s ease, background-color 0.25s ease, border-color 0.25s ease, filter 0.25s ease; }
 .pid-cross-link:hover { transform: translateY(-3px); box-shadow: 0 10px 22px rgba(0,0,0,0.18); }
 .pid-cross-link .icon-wrap { width: 38px; height: 38px; background: var(--primary-light); border-radius: 8px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
 .pid-cross-link .icon-wrap i { font-size: 0.95rem; color: var(--primary-blue); }
 .pid-cross-link .text { line-height: 1.25; }
 .pid-cross-link strong { display: block; font-weight: 600; font-size: 0.9rem; }
 .pid-cross-link span { display: block; font-size: 0.78rem; color: var(--text-medium); margin-top: 2px; }
 .pid-cross-link.active { outline: 2px solid var(--accent-gold); outline-offset: -2px; }
 @media (max-width: 768px) { .pid-cross-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; } .pid-cross-link { padding: 12px 12px; } .pid-cross-link .icon-wrap { width: 34px; height: 34px; } }

/* Block 2 */
.refinery-table { width: 100%; border-collapse: collapse; background: var(--white); border-radius: 8px; overflow: hidden; box-shadow: var(--shadow-sm); margin-top: 1.5rem; }
 .refinery-table th { background: var(--primary-navy); color: var(--white); padding: 14px 16px; text-align: left; font-weight: 600; font-size: 0.875rem; }
 .refinery-table td { padding: 12px 16px; border-bottom: 1px solid var(--border-gray); font-size: 0.875rem; }
 .refinery-table tr:last-child td { border-bottom: none; }
 .refinery-table tr:hover { background: var(--light-gray); }
 .table-responsive { overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: 8px; border: 1px solid var(--border-gray); margin-bottom: 0.75rem; }
 .benefit-highlight { background: linear-gradient(135deg, var(--primary-light) 0%, var(--white) 100%); border-left: 4px solid var(--primary-blue); padding: 1.25rem; border-radius: 0 8px 8px 0; margin-bottom: 1rem; }
 .benefit-highlight h4 { color: var(--primary-navy); margin-bottom: 0.5rem; display: flex; align-items: center; gap: 10px;}
 .benefit-highlight p { color: var(--text-medium); font-size: 0.9375rem; margin: 0; }
 .benefit-highlight h4 span { flex: 1; text-align: center; }

/* Block 3 */
.grid { display: grid; gap: 1.5rem; }
 .grid-2 { grid-template-columns: repeat(2, 1fr); }
 @media (max-width: 480px) { .grid-2 { grid-template-columns: 1fr; } }
 .benefit-highlight {
 background: linear-gradient(135deg, var(--primary-light) 0%, var(--white) 100%);
 border-left: 4px solid var(--primary-blue);
 padding: 1.25rem;
 border-radius: 0 8px 8px 0;
 margin-bottom: 1rem;
 }
 .benefit-highlight h4 {
 color: var(--primary-navy);
 margin-bottom: 0.5rem;
 display: flex;
 align-items: center;
 gap: 10px;}
 .benefit-highlight p {
 color: var(--text-medium);
 font-size: 0.9375rem;
 margin: 0;
 }
 .refinery-table { width: 100%; border-collapse: collapse; background: var(--white); border-radius: 8px; overflow: hidden; box-shadow: var(--shadow-sm); margin-top: 1.5rem; }
 .refinery-table th { background: var(--primary-navy); color: var(--white); padding: 14px 16px; text-align: left; font-weight: 600; font-size: 0.875rem; }
 .refinery-table td { padding: 12px 16px; border-bottom: 1px solid var(--border-gray); font-size: 0.875rem; }
 .refinery-table tr:last-child td { border-bottom: none; }
 .refinery-table tr:hover { background: var(--light-gray); }
 .table-responsive { overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: 8px; border: 1px solid var(--border-gray); }
 .table-responsive::-webkit-scrollbar { height: 8px; }
 .table-responsive::-webkit-scrollbar-track { background: var(--light-gray); }
 .table-responsive::-webkit-scrollbar-thumb { background: var(--border-gray); border-radius: 4px; }
 .instrument-tag {
 display: inline-block;
 background: var(--primary-light);
 color: var(--primary-blue);
 padding: 2px 8px;
 border-radius: 4px;
 font-size: 0.75rem;
 font-weight: 600;
 font-family: monospace;
 }
 .process-flow-step {
 display: flex;
 align-items: flex-start;
 gap: 1rem;
 padding: 1rem 0;
 border-bottom: 1px solid var(--border-gray);
 }
 .process-flow-step:last-child { border-bottom: none; }
 .step-number {
 width: 36px;
 height: 36px;
 background: var(--primary-blue);
 color: var(--white);
 border-radius: 50%;
 display: flex;
 align-items: center;
 justify-content: center;
 font-weight: 700;
 flex-shrink: 0;
 }
 .step-content h4 { color: var(--primary-navy); margin-bottom: 0.25rem; }
 .step-content p { color: var(--text-medium); font-size: 0.9375rem; margin: 0; }
 .stats-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 1.5rem; }
 .stat-box { background: var(--white); border: 1px solid var(--border-gray); border-radius: 12px; padding: 1rem; text-align: center; }
 .stat-box h4 { font-size: 1.5rem; color: var(--primary-navy); margin-bottom: 0.5rem; }
 .stat-box p { font-size: 0.9375rem; color: var(--text-medium); margin: 0; }
 @media (max-width: 992px) { .stats-row { grid-template-columns: repeat(2, 1fr); } }
 @media (max-width: 768px) { .stats-row { grid-template-columns: repeat(2, 1fr); } }
 @media (max-width: 480px) { .stats-row { grid-template-columns: 1fr; } }
 .related-card {
 background: var(--white);
 border: 1px solid var(--border-gray);
 border-radius: 12px;
 padding: 1rem;
 text-decoration: none;
 color: var(--primary-navy);
 display: flex;
 align-items: center;
 gap: 1rem;
 transition: transform 0.25s ease, opacity 0.25s ease, box-shadow 0.25s ease, color 0.25s ease, background-color 0.25s ease, border-color 0.25s ease, filter 0.25s ease;
 }
 .related-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
 .related-card .icon-wrap {
 width: 48px;
 height: 48px;
 background: var(--primary-light);
 border-radius: 10px;
 display: flex;
 align-items: center;
 justify-content: center;
 flex-shrink: 0;
 }
 .related-card .icon-wrap i { font-size: 1.25rem; color: var(--primary-blue); }
 .related-card strong { display: block; font-weight: 600; }
 .related-card span { display: block; font-size: 0.875rem; color: var(--text-medium); margin-top: 2px; }
 .process-flow-step h4 span { flex: 1; text-align: center; }

/* Block 4 */
.design-card {
 background: var(--white);
 border: 1px solid var(--border-gray);
 border-radius: 12px;
 padding: 1rem;
 margin-bottom: 0.75rem;
 }
 .design-card h3 {
 color: var(--primary-navy);
 margin-bottom: 1rem;
 display: flex;
 align-items: center;
 gap: 12px;}
 .design-card h3 i {
 color: var(--primary-blue);
 }
 
 .process-step {
 display: flex;
 gap: 1.5rem;
 margin-bottom: 1rem;
 }
 .process-step .step-number {
 width: 48px;
 height: 48px;
 background: var(--primary-blue);
 color: var(--white);
 border-radius: 50%;
 display: flex;
 align-items: center;
 justify-content: center;
 font-size: 1.25rem;
 font-weight: 700;
 flex-shrink: 0;
 }
 .process-step .content h4 {
 color: var(--primary-navy);
 margin-bottom: 0.5rem;
 }
 .process-step .content p {
 color: var(--text-medium);
 }
 
 .unit-card {
 background: var(--white);
 border: 1px solid var(--border-gray);
 border-radius: 12px;
 padding: 1rem; }
 .unit-card h4 {
 color: var(--primary-navy);
 margin-bottom: 0.75rem;
 }
 .unit-card .icon {
 font-size: 2rem;
 color: var(--primary-blue);
 margin-bottom: 1rem;
 }
 
 .example-box {
 background: linear-gradient(135deg, var(--primary-light) 0%, var(--white) 100%);
 border-left: 4px solid var(--primary-blue);
 padding: 1rem;
 border-radius: 0 8px 8px 0;
 margin: 1rem 0;
 }
 .example-box h4 {
 color: var(--primary-navy);
 margin-bottom: 0.75rem;
 }
 .hero-features {
 display: grid;
 grid-template-columns: repeat(4, 1fr);
 gap: 14px;
 margin-top: 2.5rem;
 }
 @media (max-width: 768px) { .hero-features { grid-template-columns: repeat(2, 1fr); } }
 @media (max-width: 480px) { .hero-features { grid-template-columns: 1fr; } }
 .hero-feature-item {
 background: rgba(255,255,255,0.1);
 border-radius: 12px;
 padding: 14px;
 text-align: center;
 transition: transform 0.3s, opacity 0.3s, box-shadow 0.3s, color 0.3s, background-color 0.3s, border-color 0.3s, filter 0.3s ease;
 }
 .hero-feature-item:hover {
 background: rgba(255,255,255,0.15);
 transform: translateY(-4px);
 }
 .hero-feature-item i {
 font-size: 2rem;
 color: var(--accent-gold);
 margin-bottom: 12px;
 }
 .hero-feature-item h4 {
 color: var(--white);
 font-size: 1rem;
 margin-bottom: 4px;
 }
 .hero-feature-item p {
 color: rgba(255,255,255,0.7);
 font-size: 0.875rem;
 margin: 0;
 }
 @media (max-width: 992px) {
 .hero-features { grid-template-columns: repeat(2, 1fr); }
 }
 @media (max-width: 768px) {
 .hero-features { grid-template-columns: repeat(2, 1fr); gap: 16px; }
 .hero-feature-item { padding: 14px; }
 }
 .design-card h3 span { flex: 1; text-align: center; }

/* Block 5 */
.stats-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 1.5rem; }
 .stat-box { background: var(--white); border: 1px solid var(--border-gray); border-radius: 12px; padding: 1rem; text-align: center; }
 .stat-box h4 { font-size: 1.5rem; color: var(--primary-navy); margin-bottom: 0.5rem; }
 .stat-box p { font-size: 0.9375rem; color: var(--text-medium); margin: 0; }
 @media (max-width: 992px) { .stats-row { grid-template-columns: repeat(2, 1fr); } }
 @media (max-width: 768px) { .stats-row { grid-template-columns: repeat(2, 1fr); } }
 @media (max-width: 480px) { .stats-row { grid-template-columns: 1fr; } }

/* Block 6 */
.pid-cross-bar { background: linear-gradient(135deg, var(--primary-blue) 0%, #0a3a6d 100%); padding: 1rem 0; }
 .pid-cross-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; }
 .pid-cross-link { background: #ffffff; border-radius: 10px; padding: 14px 16px; text-decoration: none; color: var(--primary-navy); display: flex; align-items: center; gap: 12px; box-shadow: 0 2px 6px rgba(0,0,0,0.08); transition: transform 0.25s ease, opacity 0.25s ease, box-shadow 0.25s ease, color 0.25s ease, background-color 0.25s ease, border-color 0.25s ease, filter 0.25s ease; }
 .pid-cross-link:hover { transform: translateY(-3px); box-shadow: 0 10px 22px rgba(0,0,0,0.18); }
 .pid-cross-link .icon-wrap { width: 38px; height: 38px; background: var(--primary-light); border-radius: 8px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
 .pid-cross-link .icon-wrap i { font-size: 0.95rem; color: var(--primary-blue); }
 .pid-cross-link .text { line-height: 1.25; }
 .pid-cross-link strong { display: block; font-weight: 600; font-size: 0.9rem; }
 .pid-cross-link span { display: block; font-size: 0.78rem; color: var(--text-medium); margin-top: 2px; }
 .pid-cross-link.active { outline: 2px solid var(--accent-gold); outline-offset: -2px; }
 @media (max-width: 768px) { .pid-cross-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; } .pid-cross-link { padding: 12px 12px; } .pid-cross-link .icon-wrap { width: 34px; height: 34px; } }

/* Block 7 */
.flow-diagram-wrap { background: var(--white); border: 1px solid var(--border-gray); border-radius: 16px; padding: 1rem; }
 .flow-row { display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap; margin-bottom: 0.75rem; }
 .flow-box { background: linear-gradient(135deg, var(--primary-light) 0%, var(--white) 100%); border: 2px solid var(--primary-blue); border-radius: 10px; padding: 14px 18px; text-align: center; min-width: 120px; }
 .flow-box h5 { margin: 0 0 4px; font-size: 0.9rem; color: var(--primary-navy); }
 .flow-box p { margin: 0; font-size: 0.75rem; color: var(--text-medium); }
 .flow-arrow { font-size: 1.25rem; color: var(--primary-blue); }
 .anno-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1rem; margin-top: 1.5rem; }
 .anno-card { background: var(--light-gray); border-radius: 10px; padding: 1rem; }
 .anno-card h6 { margin: 0 0 6px; font-size: 0.85rem; color: var(--primary-navy); }
 .anno-card p { margin: 0; font-size: 0.8rem; color: var(--text-medium); }
 .pid-detail { display: inline-flex; align-items: center; gap: 6px; background: #e8f4ff; border: 1px dashed var(--primary-blue); border-radius: 6px; padding: 2px 8px; font-size: 0.7rem; color: var(--primary-navy); margin-top: 6px; }
 @media (max-width: 768px) { .flow-row { gap: 8px; } .flow-box { min-width: 100px; padding: 10px 12px; } }

/* Block 8 */
.ww-flow-wrap { background: var(--white); border: 1px solid var(--border-gray); border-radius: 16px; padding: 1rem; }
 .ww-main-row { display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap; margin-bottom: 1.25rem; }
 .ww-box { background: linear-gradient(135deg, #eef6ff 0%, #ffffff 100%); border: 2px solid var(--primary-blue); border-radius: 10px; padding: 12px 16px; text-align: center; min-width: 110px; }
 .ww-box h5 { margin: 0 0 3px; font-size: 0.85rem; color: var(--primary-navy); }
 .ww-box p { margin: 0; font-size: 0.7rem; color: var(--text-medium); }
 .ww-arrow { font-size: 1.1rem; color: var(--primary-blue); }
 .ww-branch { display: flex; align-items: flex-start; justify-content: center; gap: 8px; flex-wrap: wrap; margin: 1rem 0; }
 .ww-branch-box { background: #fff8e7; border: 2px solid #f5a623; border-radius: 10px; padding: 10px 14px; text-align: center; min-width: 110px; }
 .ww-branch-box h5 { margin: 0 0 3px; font-size: 0.8rem; color: var(--primary-navy); }
 .ww-branch-box p { margin: 0; font-size: 0.68rem; color: var(--text-medium); }
 .ww-branch-arrow { font-size: 1.1rem; color: #f5a623; margin-top: 14px; }
 .ww-return-arrow { display: inline-flex; align-items: center; gap: 4px; background: #e8f8f0; border: 1px solid #27ae60; color: #1e8449; border-radius: 6px; padding: 2px 8px; font-size: 0.7rem; margin-top: 4px; }
 .ww-detail { display: inline-flex; align-items: center; gap: 5px; background: #e8f4ff; border: 1px dashed var(--primary-blue); border-radius: 6px; padding: 2px 7px; font-size: 0.68rem; color: var(--primary-navy); margin-top: 5px; }
 .ww-anno-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1rem; margin-top: 1.5rem; }
 .ww-anno-card { background: var(--light-gray); border-radius: 10px; padding: 1rem; }
 .ww-anno-card h6 { margin: 0 0 6px; font-size: 0.85rem; color: var(--primary-navy); }
 .ww-anno-card p { margin: 0; font-size: 0.8rem; color: var(--text-medium); }
 @media (max-width: 768px) { .ww-main-row { gap: 6px; } .ww-box { min-width: 90px; padding: 10px 10px; } .ww-branch-box { min-width: 90px; padding: 8px 10px; } }

/* Block 9 */
.safety-card {
 background: var(--white);
 border: 1px solid var(--border-gray);
 border-radius: 12px;
 padding: 1rem;
 margin-bottom: 0.75rem;
 }
 .safety-card h3 {
 color: var(--primary-navy);
 margin-bottom: 1rem;
 display: flex;
 align-items: center;
 gap: 12px;}
 .safety-card h3 i {
 color: var(--primary-blue);
 }
 
 .guide-word {
 background: var(--light-gray);
 border-radius: 8px;
 padding: 1rem;
 margin-bottom: 0.75rem;
 }
 .guide-word strong {
 color: var(--primary-navy);
 }
 
 .method-card {
 background: var(--white);
 border: 1px solid var(--border-gray);
 border-radius: 12px;
 padding: 1rem; }
 .method-card h4 {
 color: var(--primary-navy);
 margin-bottom: 1rem;
 }
 .hero-features {
 display: grid;
 grid-template-columns: repeat(4, 1fr);
 gap: 14px;
 margin-top: 2.5rem;
 }
 .hero-feature-item {
 background: rgba(255,255,255,0.1);
 border-radius: 12px;
 padding: 14px;
 text-align: center;
 transition: transform 0.3s, opacity 0.3s, box-shadow 0.3s, color 0.3s, background-color 0.3s, border-color 0.3s, filter 0.3s ease;
 }
 .hero-feature-item:hover {
 background: rgba(255,255,255,0.15);
 transform: translateY(-4px);
 }
 .hero-feature-item i {
 font-size: 2rem;
 color: var(--accent-gold);
 margin-bottom: 12px;
 }
 .hero-feature-item h4 {
 color: var(--white);
 font-size: 1rem;
 margin-bottom: 4px;
 }
 .hero-feature-item p {
 color: rgba(255,255,255,0.7);
 font-size: 0.875rem;
 margin: 0;
 }
 @media (max-width: 992px) {
 .hero-features { grid-template-columns: repeat(2, 1fr); }
 }
 @media (max-width: 768px) {
 .hero-features { grid-template-columns: repeat(2, 1fr); gap: 16px; }
 .hero-feature-item { padding: 14px; }
 }

/* Block 10 */
.instrument-card {
 background: var(--white);
 border: 1px solid var(--border-gray);
 border-radius: 12px;
 padding: 1rem; }
 .instrument-card h4 {
 color: var(--primary-navy);
 margin-bottom: 0.75rem;
 display: flex;
 align-items: center;
 gap: 10px;}
 .instrument-card h4 i {
 color: var(--primary-blue);
 }
 
 .control-card {
 background: var(--white);
 border: 1px solid var(--border-gray);
 border-radius: 12px;
 padding: 1rem;
 margin-bottom: 0.75rem;
 }
 .control-card h3 {
 color: var(--primary-navy);
 margin-bottom: 1rem;
 display: flex;
 align-items: center;
 gap: 12px;}
 .control-card h3 i {
 color: var(--primary-blue);
 }
 
 .table-responsive { overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: 8px; border: 1px solid var(--border-gray); }
 .table-responsive::-webkit-scrollbar { height: 8px; }
 .table-responsive::-webkit-scrollbar-track { background: var(--light-gray); }
 .table-responsive::-webkit-scrollbar-thumb { background: var(--border-gray); border-radius: 4px; }
 .table-responsive::-webkit-scrollbar-thumb:hover { background: var(--text-medium); }
 .loop-table { width: 100%; border-collapse: collapse; margin-top: 1rem; table-layout: auto; }
 .loop-table th, .loop-table td { padding: 0.875rem 1rem; text-align: left; border-bottom: 1px solid var(--border-gray); word-wrap: break-word; overflow-wrap: break-word; min-width: 100px; }
 .loop-table th:first-child, .loop-table td:first-child { min-width: 120px; }
 .loop-table th { background: var(--light-gray); color: var(--primary-navy); font-weight: 600; }
 .io-table { width: 100%; border-collapse: collapse; margin-top: 1rem; font-size: 0.85rem; table-layout: auto; }
 .io-table th, .io-table td { padding: 0.6rem 0.75rem; text-align: left; border-bottom: 1px solid var(--border-gray); word-wrap: break-word; overflow-wrap: break-word; min-width: 90px; }
 .io-table th:first-child, .io-table td:first-child { min-width: 100px; }
 .io-table th { background: var(--light-gray); color: var(--primary-navy); font-weight: 600; }
 @media (max-width: 768px) { .loop-table { font-size: 0.875rem; } .loop-table th, .loop-table td { padding: 0.75rem 0.875rem; } .io-table { font-size: 0.8125rem; } .io-table th, .io-table td { padding: 0.5rem 0.625rem; } }
 .hero-features {
 display: grid;
 grid-template-columns: repeat(4, 1fr);
 gap: 14px;
 margin-top: 2.5rem;
 }
 .hero-feature-item {
 background: rgba(255,255,255,0.1);
 border-radius: 12px;
 padding: 14px;
 text-align: center;
 transition: transform 0.3s, opacity 0.3s, box-shadow 0.3s, color 0.3s, background-color 0.3s, border-color 0.3s, filter 0.3s ease;
 }
 .hero-feature-item:hover {
 background: rgba(255,255,255,0.15);
 transform: translateY(-4px);
 }
 .hero-feature-item i {
 font-size: 2rem;
 color: var(--accent-gold);
 margin-bottom: 12px;
 }
 .hero-feature-item h4 {
 color: var(--white);
 font-size: 1rem;
 margin-bottom: 4px;
 }
 .hero-feature-item p {
 color: rgba(255,255,255,0.7);
 font-size: 0.875rem;
 margin: 0;
 }
 @media (max-width: 992px) {
 .hero-features { grid-template-columns: repeat(2, 1fr); }
 }
 @media (max-width: 768px) {
 .hero-features { grid-template-columns: repeat(2, 1fr); gap: 16px; }
 .hero-feature-item { padding: 14px; }
 }

/* Block 11 */
.loop-example-wrap { background: var(--white); border: 1px solid var(--border-gray); border-radius: 16px; padding: 1rem; margin-bottom: 1rem; }
 .loop-title { font-size: 1.1rem; color: var(--primary-navy); margin-bottom: 1.25rem; display: flex; align-items: center; gap: 10px; }
 .loop-title i { color: var(--primary-blue); }
 .loop-flow { display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap; margin-bottom: 1.25rem; }
 .loop-box { background: linear-gradient(135deg, #eef6ff 0%, #ffffff 100%); border: 2px solid var(--primary-blue); border-radius: 10px; padding: 12px 16px; text-align: center; min-width: 110px; }
 .loop-box h6 { margin: 0 0 3px; font-size: 0.85rem; color: var(--primary-navy); }
 .loop-box p { margin: 0; font-size: 0.7rem; color: var(--text-medium); }
 .loop-arrow { font-size: 1.2rem; color: var(--primary-blue); }
 .loop-signal { display: inline-flex; align-items: center; gap: 4px; background: #f3f0ff; border: 1px dashed #7c3aed; border-radius: 6px; padding: 2px 8px; font-size: 0.7rem; color: #5b21b6; margin-top: 5px; }
 .loop-anno-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1rem; }
 .loop-anno-card { background: var(--light-gray); border-radius: 10px; padding: 1rem; }
 .loop-anno-card h6 { margin: 0 0 6px; font-size: 0.85rem; color: var(--primary-navy); }
 .loop-anno-card p { margin: 0; font-size: 0.8rem; color: var(--text-medium); }
 .io-table { width: 100%; border-collapse: collapse; margin-top: 1rem; font-size: 0.85rem; }
 .io-table th, .io-table td { padding: 0.6rem 0.75rem; text-align: left; border-bottom: 1px solid var(--border-gray); }
 .io-table th { background: var(--light-gray); color: var(--primary-navy); font-weight: 600; }
 @media (max-width: 768px) { .loop-flow { gap: 6px; } .loop-box { min-width: 90px; padding: 10px 12px; } }

/* Block 12 */
.process-step {
 background: var(--white);
 border: 1px solid var(--border-gray);
 border-radius: 12px;
 padding: 1rem;
 text-align: center;
 transition: transform 0.3s, opacity 0.3s, box-shadow 0.3s, color 0.3s, background-color 0.3s, border-color 0.3s, filter 0.3s ease;
 }
 .process-step:hover {
 box-shadow: var(--shadow-md);
 transform: translateY(-4px);
 }
 .process-step .step-number {
 width: 48px;
 height: 48px;
 background: var(--primary-blue);
 color: var(--white);
 border-radius: 50%;
 display: flex;
 align-items: center;
 justify-content: center;
 font-size: 1.25rem;
 font-weight: 700;
 margin: 0 auto 1rem;
 }
 .process-step h4 {
 color: var(--primary-navy);
 margin-bottom: 0.5rem;
 }
 .process-step p {
 color: var(--text-medium);
 font-size: 0.9375rem;
 }
 
 
 .process-step { transition: transform 0.35s ease, opacity 0.35s ease, box-shadow 0.35s ease, color 0.35s ease, background-color 0.35s ease, border-color 0.35s ease, filter 0.35s ease; cursor: default; }
 .process-step:hover { transform: translateY(-8px); box-shadow: 0 16px 48px rgba(0,0,0,0.12); border-color: var(--primary-blue); }
 .process-step .step-number { border-radius: 14px !important; background: linear-gradient(135deg, var(--primary-blue) 0%, #0068b8 100%) !important; font-size: 1.3rem !important; box-shadow: 0 4px 16px rgba(0,82,155,0.25) !important; animation: stepPulse 3s ease-in-out infinite; }
 .process-step:hover .step-number { background: linear-gradient(135deg, var(--accent-gold) 0%, #d4a83a 100%) !important; color: var(--primary-navy) !important; transform: scale(1.12) rotate(-3deg); box-shadow: 0 8px 24px rgba(201,162,39,0.35) !important; }
 .process-step h3 { transition: color 0.3s ease; }
 .process-step:hover h3 { color: var(--primary-blue); }
 .process-step::after { content: ''; position: absolute; top: 28px; left: 50%; transform: translateX(-50%) scale(0); width: 8px; height: 8px; border-radius: 50%; background: var(--accent-gold); z-index: 3; transition: transform 0.4s cubic-bezier(0.4,0,0.2,1); }
 .process-step:hover::after { transform: translateX(-50%) scale(1); }
 @keyframes stepPulse { 0%,100% { box-shadow: 0 4px 16px rgba(0,82,155,0.25); } 50% { box-shadow: 0 4px 24px rgba(0,82,155,0.45), 0 0 0 6px rgba(0,82,155,0.08); } }
 .process-steps:hover .step-number { animation-play-state: paused; }
.hero-features {
 display: grid;
 grid-template-columns: repeat(4, 1fr);
 gap: 14px;
 margin-top: 2.5rem;
 }
 .hero-feature-item {
 background: rgba(255,255,255,0.1);
 border-radius: 12px;
 padding: 14px;
 text-align: center;
 transition: transform 0.3s, opacity 0.3s, box-shadow 0.3s, color 0.3s, background-color 0.3s, border-color 0.3s, filter 0.3s ease;
 }
 .hero-feature-item:hover {
 background: rgba(255,255,255,0.15);
 transform: translateY(-4px);
 }
 .hero-feature-item i {
 font-size: 2rem;
 color: var(--accent-gold);
 margin-bottom: 12px;
 }
 .hero-feature-item h4 {
 color: var(--white);
 font-size: 1rem;
 margin-bottom: 4px;
 }
 .hero-feature-item p {
 color: rgba(255,255,255,0.7);
 font-size: 0.875rem;
 margin: 0;
 }
 @media (max-width: 992px) {
 .hero-features { grid-template-columns: repeat(2, 1fr); }
 }
 @media (max-width: 768px) {
 .hero-features { grid-template-columns: repeat(2, 1fr); gap: 16px; }
 .hero-feature-item { padding: 14px; }
 }

 /* Table improvements */
 .refinery-table { border-collapse: collapse; width: 100%; font-size: .9rem; }
 .refinery-table thead th { background: var(--primary-navy); color: var(--white); padding: .875rem 1rem; text-align: left; font-weight: 600; position: sticky; top: 0; z-index: 10; }
 .refinery-table tbody tr:nth-child(even) { background: #f8fafc; }
 .refinery-table tbody tr:hover { background: #eef2f7; }
 .refinery-table td { padding: .875rem 1rem; border-bottom: 1px solid var(--border-gray); vertical-align: top; }
 .abbr { border-bottom: 1px dotted var(--primary-blue); cursor: help; position: relative; }
 .abbr:hover::after {
 content: attr(data-tip); position: absolute; bottom: 120%; left: 50%; transform: translateX(-50%);
 background: var(--primary-navy); color: var(--white); padding: .5rem .75rem; border-radius: 6px;
 font-size: .8rem; white-space: nowrap; z-index: 20; pointer-events: none;
 }
 /* HAZOP cards for mobile */
 @media (max-width: 768px) {
 .hazop-card { background: var(--white); border: 1px solid var(--border-gray); border-radius: 10px; padding: 1rem; margin-bottom: .75rem; }
 .hazop-card label { font-size: .75rem; text-transform: uppercase; color: var(--text-light); font-weight: 600; display: block; margin-bottom: .25rem; }
 .hazop-card p { margin: 0 0 .5rem; font-size: .9rem; color: var(--text-medium); }
 .hazop-card .hazop-tag { display: inline-block; background: var(--primary-light); color: var(--primary-navy); padding: .25rem .5rem; border-radius: 4px; font-size: .75rem; font-weight: 600; }
 }

/* Block 13 */
#pid-nav a:hover { background:var(--light-gray); color:var(--primary-navy); }
 @media (max-width:768px) { #pid-nav .container { overflow-x:auto; flex-wrap:nowrap; -webkit-overflow-scrolling:touch; justify-content:flex-start; } }

/* Block 14 */
.standards-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: .75rem; }
 .standards-item { display: flex; align-items: center; gap: .75rem; padding: .85rem 1rem; background: var(--white); border-radius: 8px; border: 1px solid var(--border-gray); transition: transform .25s ease, opacity .25s ease, box-shadow .25s ease, color .25s ease, background-color .25s ease, border-color .25s ease, filter .25s ease; }
 .standards-item:hover { border-color: var(--primary-blue); box-shadow: 0 4px 12px rgba(0,0,0,0.06); }
 .standards-item i { font-size: 1rem; color: var(--accent-gold); flex-shrink: 0; }
 .standards-item span { font-size: .88rem; font-weight: 600; color: var(--primary-navy); }
 @media (max-width: 768px) { .standards-grid { grid-template-columns: repeat(2, 1fr); } }

/* Block 15 */
.benefit-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
 .benefit-item { display: flex; align-items: flex-start; gap: .75rem; padding: 1rem; background: linear-gradient(135deg, #f8fafc 0%, #f0f4f8 100%); border-radius: 10px; border: 1px solid #e8ecf1; transition: transform .25s ease, opacity .25s ease, box-shadow .25s ease, color .25s ease, background-color .25s ease, border-color .25s ease, filter .25s ease; }
 .benefit-item:hover { transform: translateY(-3px); box-shadow: 0 8px 24px rgba(0,0,0,0.08); border-color: var(--primary-blue); }
 .benefit-item i { font-size: 1.1rem; color: var(--primary-blue); margin-top: .15rem; flex-shrink: 0; width: 32px; height: 32px; background: var(--primary-light); border-radius: 8px; display: flex; align-items: center; justify-content: center;
    overflow: hidden; }
 .benefit-item h4 { font-size: .92rem; color: var(--primary-navy); margin: 0 0 .2rem; font-weight: 700; }
 .benefit-item p { font-size: .82rem; color: var(--text-medium); margin: 0; line-height: 1.5; }
 @media (max-width: 768px) { .benefit-row { grid-template-columns: repeat(2, 1fr); } }

/* Block 16 */
.symbol-category {
 background: var(--white);
 border: 1px solid var(--border-gray);
 border-radius: 12px;
 padding: 1rem;
 margin-bottom: 0.75rem;
 }
 .symbol-category h3 {
 color: var(--primary-navy);
 margin-bottom: 1rem;
 display: flex;
 align-items: center;
 gap: 12px;}
 .symbol-category h3 i {
 color: var(--primary-blue);
 }
 
 .symbol-grid {
 display: grid;
 grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
 gap: 1rem;
 margin-top: 1rem;
 }
 .symbol-item {
 background: var(--light-gray);
 border-radius: 8px;
 padding: 1rem;
 text-align: center;
 }
 .symbol-item .symbol {
 font-size: 2rem;
 color: var(--primary-blue);
 margin-bottom: 0.5rem;
 }
 .symbol-item .name {
 font-size: 0.875rem;
 color: var(--text-medium);
 }
 
 .standard-card {
 background: var(--white);
 border: 1px solid var(--border-gray);
 border-radius: 12px;
 padding: 1rem; }
 .standard-card h4 {
 color: var(--primary-navy);
 margin-bottom: 1rem;
 }
 .standard-card ul {
 list-style: none;
 padding: 0;
 margin: 0;
 }
 .standard-card ul li {
 padding: 0.4rem 0;
 color: var(--text-medium);
 font-size: 0.9375rem;
 display: flex;
 align-items: center;
 gap: 8px;
 }
 .standard-card ul li i {
 color: var(--success-green);
 font-size: 0.75rem;
 }
 
 .table-responsive { overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: 8px; border: 1px solid var(--border-gray); }
 .table-responsive::-webkit-scrollbar { height: 8px; }
 .table-responsive::-webkit-scrollbar-track { background: var(--light-gray); }
 .table-responsive::-webkit-scrollbar-thumb { background: var(--border-gray); border-radius: 4px; }
 .table-responsive::-webkit-scrollbar-thumb:hover { background: var(--text-medium); }
 .tag-table { width: 100%; border-collapse: collapse; margin-top: 1rem; table-layout: auto; }
 .tag-table th, .tag-table td { padding: 0.875rem 1rem; text-align: left; border-bottom: 1px solid var(--border-gray); word-wrap: break-word; overflow-wrap: break-word; min-width: 90px; }
 .tag-table th:first-child, .tag-table td:first-child { min-width: 100px; }
 .tag-table th { background: var(--light-gray); color: var(--primary-navy); font-weight: 600; }
 @media (max-width: 768px) { .tag-table { font-size: 0.875rem; } .tag-table th, .tag-table td { padding: 0.75rem 0.875rem; } }
 
 .example-box {
 background: linear-gradient(135deg, var(--primary-light) 0%, var(--white) 100%);
 border-left: 4px solid var(--primary-blue);
 padding: 1rem;
 border-radius: 0 8px 8px 0;
 margin: 1rem 0;
 }
 .example-box h4 {
 color: var(--primary-navy);
 margin-bottom: 0.75rem;
 }
 .hero-features {
 display: grid;
 grid-template-columns: repeat(4, 1fr);
 gap: 14px;
 margin-top: 2.5rem;
 }
 .hero-feature-item {
 background: rgba(255,255,255,0.1);
 border-radius: 12px;
 padding: 14px;
 text-align: center;
 transition: transform 0.3s, opacity 0.3s, box-shadow 0.3s, color 0.3s, background-color 0.3s, border-color 0.3s, filter 0.3s ease;
 }
 .hero-feature-item:hover {
 background: rgba(255,255,255,0.15);
 transform: translateY(-4px);
 }
 .hero-feature-item i {
 font-size: 2rem;
 color: var(--accent-gold);
 margin-bottom: 12px;
 }
 .hero-feature-item h4 {
 color: var(--white);
 font-size: 1rem;
 margin-bottom: 4px;
 }
 .hero-feature-item p {
 color: rgba(255,255,255,0.7);
 font-size: 0.875rem;
 margin: 0;
 }
 @media (max-width: 992px) {
 .hero-features { grid-template-columns: repeat(2, 1fr); }
 }
 @media (max-width: 768px) {
 .hero-features { grid-template-columns: repeat(2, 1fr); gap: 16px; }
 .hero-feature-item { padding: 14px; }
 }




/* ============================================
   CARD LINK WRAPPER — clickable application/industry cards
   Wrap .card in <a class="card-link" href="...">
   ============================================ */
.card-link {
    display: block;
    text-decoration: none;
    color: inherit;
}

.card-link:hover .card {
    border-color: var(--accent-gold) !important;
    border-left-color: var(--accent-gold) !important;
    box-shadow: 0 4px 20px rgba(201, 162, 39, 0.15) !important;
    transform: translateY(-4px);
}

.card-link:hover .card h3 {
    color: var(--accent-gold) !important;
}

.card-link:hover .card::before {
    background: var(--accent-gold) !important;
}


/* ============================================================
   DAIRY & GLOBAL PAGE — TIGHTER CONTAINER SPACING FIXES
   ============================================================ */

/* 1. FIX: feature-icon inside horizontal feature-item layouts
   margin-bottom was meant for vertical stacks, not flex rows.
   This removes the wasted vertical offset and adds proper
   horizontal spacing between icon and text. */
.feature-item .feature-icon {
    margin-bottom: 0;
    margin-right: 12px;
    flex-shrink: 0;
}

/* 2. Tighter app-card padding — reduces empty space around
   short content (icon + heading + 1-2 sentence paragraph). */
.app-card {
    padding: 1.25rem;
}

/* 3. Tighter feature-item padding — more compact horizontal bars. */
.feature-item {
    padding: 10px 14px;
}

/* 4. Tighter process-flow step containers — short text like
   "Fat & solids removal" no longer floats in oversized boxes. */
.min-w-150-center {
    padding: 0.75rem;
}

/* 5. Slightly tighter bordered card padding. */
.card-bordered {
    padding: 0.875rem;
}

/* 6. Reduce content-grid gap — less whitespace between columns. */
.content-grid {
    gap: 1.25rem;
}

/* 7. Compact card variant for short-content grids (e.g. Related Pages).
   Use class="card card-compact" on individual cards or the grid parent. */
.card-compact,
.cards-grid .card-compact {
    padding: 12px;
}

/* 8. Optional: prevent card stretching in grids that use this class.
   Apply class="cards-grid cards-grid-start" to the grid parent
   when cards have wildly different content lengths. */
.cards-grid-start {
    align-items: start;
}
.cards-grid-start .card {
    height: auto;
}


/* ============================================================
   DAIRY & TREATMENT PAGES — HORIZONTAL ROW CARDS
   ============================================================ */

/* Container forces single-column stack of horizontal cards */
.cards-grid.treatment-row {
    grid-template-columns: 1fr;
    gap: 12px;
}

/* Horizontal card: icon left, content right, single row layout */
.treatment-row .card {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: auto 1fr auto;
    gap: 4px 16px;
    padding: 14px 18px;
    text-align: left;
    align-items: start;
}

/* Icon spans all rows on the left */
.treatment-row .card .card-icon {
    grid-column: 1;
    grid-row: 1 / -1;
    margin-bottom: 0;
    align-self: start;
}

/* Heading top-right */
.treatment-row .card > h3,
.treatment-row .card > h3 > a {
    grid-column: 2;
    grid-row: 1;
    margin: 0;
    font-size: 1.1rem;
    text-align: left;
    color: var(--primary-navy);
    text-decoration: none;
}

/* Paragraph middle-right */
.treatment-row .card > p {
    grid-column: 2;
    grid-row: 2;
    margin: 0;
    text-align: left;
    flex-grow: 0;
}

/* Button / badge bottom-right */
.treatment-row .card > .btn,
.treatment-row .card > a.btn,
.treatment-row .card > div:not(.card-icon) {
    grid-column: 2;
    grid-row: 3;
    margin-top: 4px;
    justify-self: start;
}

/* Mobile: revert to vertical stacked layout */
@media (max-width: 768px) {
    .treatment-row .card {
        grid-template-columns: 1fr;
        grid-template-rows: auto auto 1fr auto;
        gap: 8px;
    }
    .treatment-row .card .card-icon {
        grid-column: 1;
        grid-row: 1;
        justify-self: start;
    }
    .treatment-row .card > h3 {
        grid-column: 1;
        grid-row: 2;
    }
    .treatment-row .card > p {
        grid-column: 1;
        grid-row: 3;
    }
    .treatment-row .card > .btn,
    .treatment-row .card > a.btn,
    .treatment-row .card > div:not(.card-icon) {
        grid-column: 1;
        grid-row: 4;
    }
}


/* ============================================================
   CONTENT-GRID TREATMENT ROW + APP-CARD HORIZONTAL
   ============================================================ */

/* Support .content-grid.treatment-row (used on fluid-milk, food pages) */
.content-grid.treatment-row,
.content-grid.grid-3.treatment-row {
    grid-template-columns: 1fr;
    gap: 12px;
}

/* Horizontal app-card: icon left, content right */
.treatment-row .app-card {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: auto 1fr;
    gap: 4px 16px;
    padding: 14px 18px;
    text-align: left;
    align-items: start;
}

.treatment-row .app-card .icon-wrap {
    grid-column: 1;
    grid-row: 1 / -1;
    margin-bottom: 0;
    margin-right: 0;
    align-self: start;
}

.treatment-row .app-card > h4 {
    grid-column: 2;
    grid-row: 1;
    margin: 0;
    font-size: 1.1rem;
    text-align: left;
    color: var(--primary-navy);
}

.treatment-row .app-card > p {
    grid-column: 2;
    grid-row: 2;
    margin: 0;
    text-align: left;
}

/* Mobile: revert app-cards to vertical */
@media (max-width: 768px) {
    .treatment-row .app-card {
        grid-template-columns: 1fr;
        grid-template-rows: auto auto 1fr;
        gap: 8px;
    }
    .treatment-row .app-card .icon-wrap {
        grid-column: 1;
        grid-row: 1;
        justify-self: start;
    }
    .treatment-row .app-card > h4 {
        grid-column: 1;
        grid-row: 2;
    }
    .treatment-row .app-card > p {
        grid-column: 1;
        grid-row: 3;
    }
}

/* ============================================
   TABLE WRAP — compact bordered tables
   (no horizontal scroll; fits grid cards)
   ============================================ */
.table-wrap {
    border-radius: 8px;
    border: 1px solid var(--border-gray);
    overflow: hidden;
}
.table-wrap .refinery-table,
.table-wrap .data-table,
.table-wrap .standards-table,
.table-wrap .comparison-table,
.table-wrap .specs-table,
.table-wrap .sensor-table {
    min-width: auto;
    width: 100%;
}
/* ============================================
   EQUIPMENT LIST — Containerized Systems
   ============================================ */
.equipment-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1rem;
    margin: 1.5rem 0;
}
.equipment-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: var(--light-gray);
    border-radius: 8px;
    border-left: 3px solid var(--primary-blue);
}
.equipment-item i {
    color: var(--primary-blue);
    font-size: 1.1rem;
}
@media (max-width: 768px) {
    .equipment-list {
        grid-template-columns: 1fr;
    }
}
/* LIST GRID — icon + text checklist grids */
.list-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
    margin: 1.5rem 0;
}
.list-grid-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 1rem 1.25rem;
    background: linear-gradient(135deg, var(--primary-light) 0%, var(--white) 100%);
    border-left: 3px solid var(--primary-blue);
    border-radius: 0 8px 8px 0;
    font-size: 0.9375rem;
    color: var(--text-medium);
    line-height: 1.5;
}
.list-grid-item i {
    color: var(--primary-blue);
    font-size: 1.1rem;
    margin-top: 2px;
    flex-shrink: 0;
}
.list-grid-item span {
    flex: 1;
}
@media (max-width: 768px) {
    .list-grid {
        grid-template-columns: 1fr;
    }
}

/* ============================================
   AUTO-GRID FOR STACKED .calc-box SIBLINGS
   ----------------------------------------------
   When a .container has 2+ consecutive .calc-box
   children (no other grid wrapper), lay them out
   as a responsive grid so they sit side-by-side
   instead of stacking as one tall vertical column.
   Uses :has() — modern browsers only. Older
   browsers keep the existing vertical layout.
   ============================================ */
@supports selector(:has(*)) {
  .container:has(> .calc-box + .calc-box):not(:has(> .cards-grid)):not(:has(> .proposal-grid)):not(:has(> .proposals-grid)):not(:has(> .feature-card-grid)):not(:has(> .features-grid)) {
    display: grid;
    /* Fixed TWO columns for a clean, corporate 2-up layout (2×2, 2×3 …) */
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
    align-items: start;
  }
  @media (max-width: 760px) {
    .container:has(> .calc-box + .calc-box):not(:has(> .cards-grid)):not(:has(> .proposal-grid)):not(:has(> .proposals-grid)):not(:has(> .feature-card-grid)):not(:has(> .features-grid)) {
      grid-template-columns: 1fr;
    }
  }
  /* Section header and free-flowing intro paragraphs span the full width */
  .container:has(> .calc-box + .calc-box):not(:has(> .cards-grid)):not(:has(> .proposal-grid)):not(:has(> .proposals-grid)):not(:has(> .feature-card-grid)):not(:has(> .features-grid)) > .section-header,
  .container:has(> .calc-box + .calc-box):not(:has(> .cards-grid)):not(:has(> .proposal-grid)):not(:has(> .proposals-grid)):not(:has(> .feature-card-grid)):not(:has(> .features-grid)) > p,
  .container:has(> .calc-box + .calc-box):not(:has(> .cards-grid)):not(:has(> .proposal-grid)):not(:has(> .proposals-grid)):not(:has(> .feature-card-grid)):not(:has(> .features-grid)) > h2,
  .container:has(> .calc-box + .calc-box):not(:has(> .cards-grid)):not(:has(> .proposal-grid)):not(:has(> .proposals-grid)):not(:has(> .feature-card-grid)):not(:has(> .features-grid)) > h3,
  .container:has(> .calc-box + .calc-box):not(:has(> .cards-grid)):not(:has(> .proposal-grid)):not(:has(> .proposals-grid)):not(:has(> .feature-card-grid)):not(:has(> .features-grid)) > div.text-center,
  .container:has(> .calc-box + .calc-box):not(:has(> .cards-grid)):not(:has(> .proposal-grid)):not(:has(> .proposals-grid)):not(:has(> .feature-card-grid)):not(:has(> .features-grid)) > div.btn-group-center {
    grid-column: 1 / -1;
  }
}

/* ============================================
   ENHANCED PROPOSAL CARD DESIGN
   ----------------------------------------------
   Polished card styling for .calc-box elements
   used in "Actual Proposals" sections. Combined
   with the auto-grid rule above, they render as
   premium proposal cards with consistent visual
   hierarchy and zero horizontal overflow.
   Applies in three scopes:
   - .container with 2+ direct calc-box children
   - .proposals-grid > .calc-box (explicit wrapper)
   - .case-studies-grid > .case-study
   ============================================ */
@supports selector(:has(*)) {
  .proposals-grid > .calc-box,
  .container:has(> .calc-box + .calc-box) > .calc-box {
    background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    padding: 0 1.25rem 1.25rem;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.05);
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
    overflow: hidden;
    min-width: 0;
    word-wrap: break-word;
    overflow-wrap: break-word;
    display: flex;
    flex-direction: column;
  }
  .proposals-grid > .calc-box:hover,
  .container:has(> .calc-box + .calc-box) > .calc-box:hover {
    transform: translateY(-4px);
    box-shadow: 0 14px 32px rgba(15, 23, 42, 0.10), 0 2px 6px rgba(15, 23, 42, 0.06);
    border-color: var(--primary-blue);
  }
  /* Header pill that gives each proposal a strong title bar */
  .proposals-grid > .calc-box > h3,
  .container:has(> .calc-box + .calc-box) > .calc-box > h3 {
    background: linear-gradient(135deg, var(--primary-navy) 0%, #0d3a5c 100%);
    color: #ffffff;
    margin: 0 -1.25rem 1rem -1.25rem;
    padding: 0.875rem 1.25rem;
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    display: flex;
    align-items: center;
    gap: 0.625rem;
    line-height: 1.3;
    word-wrap: break-word;
    overflow-wrap: break-word;
  }
  .proposals-grid > .calc-box > h3 i,
  .proposals-grid > .calc-box > h3 .icon-prefix,
  .proposals-grid > .calc-box > h3 .fas,
  .proposals-grid > .calc-box > h3 .far,
  .container:has(> .calc-box + .calc-box) > .calc-box > h3 i,
  .container:has(> .calc-box + .calc-box) > .calc-box > h3 .icon-prefix,
  .container:has(> .calc-box + .calc-box) > .calc-box > h3 .fas,
  .container:has(> .calc-box + .calc-box) > .calc-box > h3 .far {
    color: var(--accent-gold);
    font-size: 1.125rem;
    flex-shrink: 0;
  }
  /* Heading text inside h3 if wrapped in span */
  .proposals-grid > .calc-box > h3 span,
  .container:has(> .calc-box + .calc-box) > .calc-box > h3 span {
    flex: 1 1 auto;
    min-width: 0;
  }
  /* Field rows: each <li> or direct <div> becomes a bordered row */
  .proposals-grid > .calc-box ul,
  .container:has(> .calc-box + .calc-box) > .calc-box ul {
    list-style: none;
    padding: 0;
    margin: 0;
  }
  .proposals-grid > .calc-box ul li,
  .container:has(> .calc-box + .calc-box) > .calc-box ul li {
    padding: 0.55rem 0;
    border-bottom: 1px solid rgba(226, 232, 240, 0.7);
    font-size: 0.875rem;
    line-height: 1.55;
    word-wrap: break-word;
    overflow-wrap: break-word;
  }
  .proposals-grid > .calc-box ul li:last-child,
  .container:has(> .calc-box + .calc-box) > .calc-box ul li:last-child {
    border-bottom: none;
  }
  .proposals-grid > .calc-box ul li strong,
  .container:has(> .calc-box + .calc-box) > .calc-box ul li strong {
    color: var(--primary-navy);
    font-weight: 600;
  }
  /* Direct div fields (grid-auto-* layouts inside) */
  .proposals-grid > .calc-box > div,
  .proposals-grid > .calc-box .grid-auto-220 > div,
  .proposals-grid > .calc-box .grid-auto-250 > div,
  .container:has(> .calc-box + .calc-box) > .calc-box > div,
  .container:has(> .calc-box + .calc-box) > .calc-box .grid-auto-220 > div,
  .container:has(> .calc-box + .calc-box) > .calc-box .grid-auto-250 > div {
    word-wrap: break-word;
    overflow-wrap: break-word;
    min-width: 0;
  }
  .proposals-grid > .calc-box .grid-auto-220,
  .proposals-grid > .calc-box .grid-auto-250,
  .container:has(> .calc-box + .calc-box) > .calc-box .grid-auto-220,
  .container:has(> .calc-box + .calc-box) > .calc-box .grid-auto-250 {
    gap: 0.5rem;
  }
  /* Paragraphs inside proposal card */
  .proposals-grid > .calc-box p,
  .container:has(> .calc-box + .calc-box) > .calc-box p {
    margin: 0.625rem 0 0;
    font-size: 0.875rem;
    line-height: 1.55;
    word-wrap: break-word;
    overflow-wrap: break-word;
  }
  /* Long URLs / link text should wrap, not push the card wide */
  .proposals-grid > .calc-box a,
  .container:has(> .calc-box + .calc-box) > .calc-box a {
    word-break: break-word;
    color: var(--primary-blue);
  }
  /* Card-icon (where present) sits to the right of the title bar */
  .proposals-grid > .calc-box .card-icon,
  .container:has(> .calc-box + .calc-box) > .calc-box .card-icon {
    display: none;
  }
}

/* Hide pricing-only elements inside proposal cards */
.proposals-grid > .calc-box .price-tag,
.proposals-grid > .calc-box .price,
.container:has(> .calc-box + .calc-box) > .calc-box .price-tag,
.container:has(> .calc-box + .calc-box) > .calc-box .price {
  display: none !important;
}

/* Underwater Plantrooms - footer gold-highlight link */
.footer-links li a.link-gold {
  color: var(--accent-gold) !important;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}
.footer-links li a.link-gold::before {
  content: "\f773"; /* fa-water (subsea) */
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  font-size: 0.85em;
}
.footer-links li a.link-gold:hover {
  color: #ffd663 !important;
  text-decoration: underline;
}

/* Underwater Plantrooms - footer-bottom inline link (next to copyright) */
.footer-bottom .footer-uw-sep { color: rgba(255,255,255,0.35); margin: 0 0.25rem; }
.footer-bottom .footer-uw-link {
  color: var(--accent-gold);
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  text-decoration: none;
}
.footer-bottom .footer-uw-link i { font-size: 0.85em; }
.footer-bottom .footer-uw-link:hover {
  color: #ffd663;
  text-decoration: underline;
}

/* Disable dark-circle hover effect on icon containers
   Cards should only show frame hover (translateY + box-shadow), not the icon-circle filling with dark blue.
   Overrides the dark-fill rules at lines 11657, 12215 and 12499. */
.feature-card:hover .icon-circle,
.feature-card:hover .feature-icon,
.equipment-card-sludge:hover .icon-circle,
.card:hover .icon-circle {
  background: linear-gradient(135deg, rgba(0, 102, 204, 0.1) 0%, rgba(0, 102, 204, 0.04) 100%) !important;
  color: var(--primary-blue) !important;
  transform: none !important;
  box-shadow: 0 2px 8px rgba(0, 102, 204, 0.08) !important;
}

/* Base padding for product-hero so equipment pages without inline overrides
   don't have content hidden behind the fixed header. */
.product-hero {
  padding: 120px 0 60px;
  color: var(--white);
}
.product-hero h1,
.product-hero .hero-title {
  color: var(--white);
}
.product-hero p {
  color: rgba(255, 255, 255, 0.85);
}
.product-hero .product-code {
  display: inline-block;
  background: rgba(255, 255, 255, 0.12);
  color: var(--accent-gold);
  padding: 6px 14px;
  border-radius: 20px;
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.5px;
  margin-bottom: 1rem;
}
.product-hero .hero-features {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-top: 2.5rem;
}
@media (max-width: 768px) {
  .product-hero { padding: 90px 0 40px; }
  .product-hero .hero-features { grid-template-columns: repeat(2, 1fr); }
}

/* ============================================
   PROCESS-STEPS-GRID LAYOUT FIX
   Overrides the global .process-step rules that
   force max-width:260px / flex-direction:column,
   restoring the intended horizontal numbered-step
   layout used inside .process-steps-grid.
   ============================================ */
.process-steps-grid .process-step {
    flex-direction: row;
    max-width: none;
    width: 100%;
    text-align: left;
    flex: none;
    background: transparent;
    box-shadow: none;
    border-radius: 0;
    border: none;
    border-bottom: 1px solid var(--border-gray);
    padding: 1rem 0;
    align-items: flex-start;
    transform: none;
    opacity: 1;
}
.process-steps-grid .process-step:last-child {
    border-bottom: none;
}
.process-steps-grid .process-step:hover {
    transform: none;
    box-shadow: none;
    border-color: transparent;
    background: transparent;
}

/* ============================================
   RESPONSIVE FIXES
   Added to prevent overflow on narrow screens
   ============================================ */

/* Override inline 2-column grids on very narrow screens */
@media (max-width: 480px) {
    [style*="grid-template-columns:"][style*="1fr 1fr"] {
        grid-template-columns: 1fr !important;
    }
}

/* Compact tables on mobile */
@media (max-width: 768px) {
    .section table {
        font-size: 0.875rem;
    }
    .section table th,
    .section table td {
        padding: 8px 10px;
        word-break: break-word;
    }
}

/* Hide process-box arrows on mobile to prevent overflow */
@media (max-width: 768px) {
    .process-box::after {
        display: none;
    }
}

/* Asymmetric grid collapses to single column on mobile */
@media (max-width: 480px) {
    .grid-2-1 {
        grid-template-columns: 1fr;
    }
}

/* ============================================
   INLINE STYLE REPLACEMENT UTILITIES
   ============================================ */
.absolute { position: absolute; }
.align-middle { vertical-align: middle; }
.clear-both { clear: both; }
.cursor-default { cursor: default; }
.cursor-pointer { cursor: pointer; }
.d-block { display: block; }
.d-flex { display: flex; }
.d-grid { display: grid; }
.d-inline-flex { display: inline-flex; }
.float-left { float: left; }
.float-right { float: right; }
.font-bold { font-weight: 700; }
.font-medium { font-weight: 500; }
.img-rounded-lg-shadow { width: 100%; border-radius: 12px; box-shadow: 0 12px 32px rgba(0,0,0,0.12); display: block; }
.img-rounded-shadow { width: 100%; max-width: 500px; border-radius: 8px; box-shadow: 0 4px 16px rgba(0,0,0,0.1); display: block; }
.info-highlight-box { background: linear-gradient(135deg,#f0f7ff 0%,#fff 100%); border: 1px solid #e2e8f0; border-radius: 12px; padding: 1.25rem; text-align: center; border-left: 4px solid #00529b; }
.items-start { align-items: flex-start; }
.items-start { align-items: start; }
.max-w-600 { max-width: 600px; }
.max-w-800 { max-width: 800px; } .mb-3 { margin-bottom: 3rem; }
.max-w-900 { max-width: 900px; }
.ml-auto { margin-left: auto; }
.mr-5px { margin-right: 5px; }
.mr-8px { margin-right: 8px; }
.mt-3px { margin-top: 3px; }
.opacity-90 { opacity: 0.9; }
.p-15 { padding: 1.5rem; }
.relative { position: relative; }
.rounded-10 { border-radius: 10px; }
.rounded-6 { border-radius: 6px; }
.section-gradient-dark { background: linear-gradient(135deg,#0a2540,#1e3a5f); color: #fff; padding: 3rem 0; }
.section-padding-lg { padding: 4rem 0; }
.section-padding-md { padding: 3rem 0; }
.stat-number { font-size: 1.75rem; font-weight: 700; color: #00529b; }
.step-num-circle { width: 32px; height: 32px; min-width: 32px; background: var(--primary-blue); color: white; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 0.875rem; }
.tag-badge { display: inline-flex; align-items: center; padding: 5px 14px; border-radius: 20px; background: var(--light-gray); border: 1px solid var(--border-gray); font-size: 0.8125rem; color: var(--text-medium); }
.text-accent-gold { color: var(--accent-gold); }
.text-blue { color: #4a90d9; }
.text-body-lg { font-size: 1.0625rem; line-height: 1.7; margin: 0; }
.text-brown { color: #795548; }
.text-caption { font-size: 0.8125rem; color: #64748b; margin-top: 0.375rem; font-weight: 500; }
.text-coral { color: #ff7043; }
.text-gray-555 { color: #555; }
.text-gray-600 { color: #7f8c8d; }
.text-lime { color: #8bc34a; }
.text-navy { color: #00529b; }
.text-orange { color: #e67e22; }
.text-purple { color: #9b59b6; }
.text-white-85 { color: rgba(255,255,255,0.85); }
.text-xl { font-size: 1.25rem; } .font-semibold { font-weight: 600; }
.transition-transform-opacity { transition: transform 0.3s ease, opacity 0.3s ease; }
.z-100 { z-index: 100; }
.z-1000 { z-index: 1000; }

/* ============================================
   INLINE STYLE REPLACEMENT UTILITIES - BATCH 2
   ============================================ */
.bg-gradient-blue { background: linear-gradient(135deg,#4a90d9,#357abd); }
.bg-gradient-brown { background: linear-gradient(135deg,#795548,#5d4037); }
.bg-gradient-orange { background: linear-gradient(135deg,#e67e22,#d35400); }
.bg-gradient-purple { background: linear-gradient(135deg,#9b59b6,#8e44ad); }
.bg-white-08 { background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.15); }
.gap-075 { gap: 0.75rem; }
.highlight-card { background: #fff; padding: 1.5rem; border-radius: 10px; border-left: 4px solid #c9a227; box-shadow: 0 4px 12px rgba(0,0,0,0.06); }
.link-reset { text-decoration: none; color: inherit; cursor: pointer; }
.max-w-860 { max-width: 860px; }
.mt-0 { margin-top: 0; }
.mt-02 { margin-top: 0.2rem; }
.photo-placeholder { min-height: 320px; display: flex; flex-direction: column; justify-content: center; align-items: center; background: linear-gradient(135deg,#f8fafc 0%,#edf2f7 100%); border: 2px dashed #cbd5e1; border-radius: 12px; }
.pl-12 { padding-left: 1.2rem; }
.shadow-lg { box-shadow: 0 12px 32px rgba(0,0,0,0.12); }
.text-15 { font-size: 1.5rem; }
.text-3 { font-size: 3rem; } .text-gray-400 { color: #94a3b8; }
.text-amber { color: #ffa726; }
.text-cyan { color: #00bcd4; }
.text-gray-500 { color: #64748b; }
.text-red { color: #c0392b; }
.text-white-80 { color: rgba(255,255,255,0.8); }

/* ============================================
   INLINE STYLE REPLACEMENT UTILITIES - BATCH 3
   ============================================ */
.bg-gradient-cyan { background: linear-gradient(135deg,#00bcd4,#00acc1); }
.bg-gradient-lime { background: linear-gradient(135deg,#8bc34a,#689f38); }
.cert-badge { position: absolute; bottom: -12px; left: 50%; transform: translateX(-50%); background: linear-gradient(135deg,#00529b 0%,#003d73 100%); color: #fff; padding: 8px 20px; border-radius: 6px; font-size: 0.8125rem; font-weight: 600; box-shadow: 0 4px 12px rgba(0,82,155,0.3); white-space: nowrap; }
.gap-0625 { gap: 0.625rem; } .p-0625 { padding: 0.625rem; } .bg-light-gray { background: #f8fafc; }
.info-box-left { padding: 1.25rem 1.5rem; border-left: 4px solid var(--primary-blue); background: #f4f8fc; }
.italic { font-style: italic; }
.leading-loose { line-height: 1.8; }
.leading-normal { line-height: 1.5; }
.leading-relaxed { line-height: 1.7; } .text-sm { font-size: 0.9rem; }
.my-2 { margin-top: 2rem; margin-bottom: 2rem; }
.p-025 { padding: 0.25rem; }
.p-125 { padding: 1.25rem; }
.photo-placeholder { min-height: 320px; display: flex; flex-direction: column; justify-content: center; align-items: center; background: linear-gradient(135deg,#f8fafc 0%,#edf2f7 100%); border: 2px dashed #cbd5e1; border-radius: 12px; }
.text-2 { font-size: 2rem; } .leading-none { line-height: 1; }

/* ============================================
   ENTERPRISE UI COMPACT SPACING OVERRIDES
   Reduces excessive whitespace for professional
   enterprise-grade information density.
   ============================================ */

/* Compact hero sections - 84px top clears 60px fixed header + 24px gap */
.hero {
    padding: 84px 0 48px;
}
.hero-small {
    padding: 80px 0 40px;
}
.page-header {
    padding: 80px 0 40px;
}
.page-header h1 {
    font-size: 2rem;
    margin-bottom: 0.5rem;
}
.page-header p {
    font-size: 1rem;
    max-width: 600px;
}

/* Compact section variants */
.section-lg,
.section-xl {
    padding: 48px 0;
}
.section-cta {
    padding: 48px 0;
}
.section-sm {
    padding: 32px 0;
}

/* Compact CTA section */
.cta-section {
    padding: 48px 0;
}
.cta-section-sludge {
    padding: 36px 0;
}

/* Compact cards and components */
.card {
    padding: 16px;
}
.card-large {
    padding: 20px;
}
.feature-item {
    padding: 12px 14px;
}
.process-step {
    padding: 16px;
}
.info-box,
.info-box-blue {
    padding: 14px;
}
.info-box-left {
    padding: 14px 16px;
}

/* Compact grids and gaps */
.cards-grid,
.features-grid,
.process-boxes,
.trust-grid {
    gap: 16px;
}
.cards-grid-wide {
    gap: 16px;
}
.grid-auto-400 {
    gap: 1.5rem;
}

/* Compact product hero */
.product-hero {
    padding: 80px 0 40px;
}

/* Compact hero title */
.hero-title {
    font-size: 2.25rem;
}
.hero-description {
    font-size: 1rem;
    max-width: 600px;
}

/* Remove excessive min-heights on cards */
.industry-card-image {
    min-height: 120px;
}
.industry-card--overlay {
    min-height: 220px;
}
.case-study-media {
    min-height: 200px;
}

/* Compact section header spacing */
.section-header {
    margin-bottom: 1.5rem;
}
.section-title {
    margin-bottom: 0.5rem;
}
.section-subtitle {
    margin-bottom: 0;
}

/* Compact tab buttons */
.tab-button {
    padding: 10px 16px;
}

/* Compact engagement tabs */
.engagement-tab {
    padding: 10px 14px;
}

/* Compact stat cards */
.stat-card-value,
.stat-card-value--dark {
    font-size: 1.75rem;
}

/* Compact related-card */
.related-card {
    padding: 12px 14px;
}

/* Compact spec boxes */
.spec-box {
    padding: 12px;
}

/* Mobile adjustments for enterprise density */
@media (max-width: 768px) {
    .hero {
        padding: 72px 0 40px;
    }
    .hero-small {
        padding: 68px 0 32px;
    }
    .page-header {
        padding: 68px 0 32px;
    }
    .hero-title {
        font-size: 1.75rem;
    }
    .section-lg,
    .section-xl {
        padding: 36px 0;
    }
    .section-cta {
        padding: 36px 0;
    }
    .cta-section {
        padding: 36px 0;
    }
    .product-hero {
        padding: 48px 0 24px;
    }
}

@media (max-width: 480px) {
    .hero {
        padding: 64px 0 32px;
    }
    .hero-small {
        padding: 60px 0 24px;
    }
    .page-header {
        padding: 60px 0 24px;
    }
    .hero-title {
        font-size: 1.5rem;
    }
    .section-lg,
    .section-xl {
        padding: 28px 0;
    }
    .section-cta {
        padding: 28px 0;
    }
    .cta-section {
        padding: 28px 0;
    }
}

/* Enterprise compact overrides for page-specific heroes */
.tech-hero {
    padding: 80px 0 40px !important;
}
.case-study-hero {
    padding: 80px 0 40px !important;
}
.case-study-hero h1 {
    font-size: 2rem;
}

@media (max-width: 768px) {
    .tech-hero {
        padding: 68px 0 32px !important;
    }
    .case-study-hero {
        padding: 68px 0 32px !important;
    }
}

/* ============================================
   ENTERPRISE HERO PADDING OVERRIDE (Phase 2)
   Uses !important to defeat page-local <style>
   blocks that load after main.css in <head>.
   ============================================ */

/* Base: compact all hero variants - top clears 60px fixed header */
.hero,
.hero-small,
.page-header,
.hero-section,
.tech-hero,
.case-study-hero,
.product-hero {
    padding-top: 84px !important;
    padding-bottom: 48px !important;
}

/* Compact sections */
.section,
.section-lg,
.section-xl,
.section-cta,
.cta-section,
.cta-section-sludge {
    padding-top: 48px !important;
    padding-bottom: 48px !important;
}

/* Tablet */
@media (max-width: 768px) {
    .hero,
    .hero-small,
    .page-header,
    .hero-section,
    .tech-hero,
    .case-study-hero,
    .product-hero {
        padding-top: 72px !important;
        padding-bottom: 40px !important;
    }
    .section,
    .section-lg,
    .section-xl,
    .section-cta,
    .cta-section,
    .cta-section-sludge {
        padding-top: 36px !important;
        padding-bottom: 36px !important;
    }
}

/* Mobile */
@media (max-width: 480px) {
    .hero,
    .hero-small,
    .page-header,
    .hero-section,
    .tech-hero,
    .case-study-hero,
    .product-hero {
        padding-top: 64px !important;
        padding-bottom: 32px !important;
    }
    .section,
    .section-lg,
    .section-xl,
    .section-cta,
    .cta-section,
    .cta-section-sludge {
        padding-top: 28px !important;
        padding-bottom: 28px !important;
    }
}

/* ============================================
   UNIFIED COMPONENT LIBRARY
   Standardized versions of patterns previously
   duplicated across 693 page-specific <style>
   blocks. Loaded last for maximum specificity.
   ============================================ */

/* ---- Callout / Info Boxes ---- */
.callout-box,
.info-callout {
    background: #f0f7ff;
    border: 1px solid #bfdbfe;
    border-left: 4px solid var(--primary-blue);
    border-radius: 0 10px 10px 0;
    padding: 1.1rem 1.5rem;
    margin: 1.5rem 0;
}
.callout-box--compact {
    padding: 1rem 1.25rem;
}
.warn-box,
.callout-box--warn {
    background: #fff8e1;
    border: 1px solid #f0d97a;
    border-left: 4px solid var(--accent-gold);
    border-radius: 0 10px 10px 0;
    padding: 1rem 1.4rem;
    font-size: 0.875rem;
    margin: 1.25rem 0;
}
.success-box,
.callout-box--success {
    background: #e8f5e9;
    border: 1px solid #a5d6a7;
    border-left: 4px solid var(--success-green);
    border-radius: 0 10px 10px 0;
    padding: 1rem 1.4rem;
    margin: 1.25rem 0;
}
.note-box,
.info-box-left {
    background: var(--primary-light);
    border-left: 4px solid var(--primary-blue);
    padding: 1rem 1.25rem;
    margin: 1.5rem 0;
    border-radius: 0 8px 8px 0;
}
.feature-highlight {
    background: var(--primary-light);
    border-left: 4px solid var(--primary-blue);
    padding: 1rem 1.5rem;
    border-radius: 0 8px 8px 0;
    margin: 1.5rem 0;
}

/* ---- Process Steps ---- */
.process-step--card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    flex: 1;
    min-width: 200px;
    max-width: 260px;
    background: var(--white);
    border: 1px solid var(--border-gray);
    border-radius: 12px;
    padding: 1rem;
}
.process-step--row {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
    padding: 1rem 0;
    border-bottom: 1px solid var(--border-gray);
    flex-direction: row;
    max-width: none;
    width: 100%;
    text-align: left;
    flex: none;
    background: transparent;
    box-shadow: none;
    border-radius: 0;
    border: none;
}
.process-steps-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    column-gap: 2rem;
}
@media (max-width: 768px) {
    .process-steps-grid {
        grid-template-columns: 1fr;
    }
}

/* ---- Cards ---- */
.comparison-card {
    background: var(--white);
    border: 2px solid var(--border-gray);
    border-radius: 12px;
    padding: 1.25rem;
}
.comparison-card--compact {
    padding: 1rem;
}
.spec-card {
    background: var(--white);
    border: 1px solid var(--border-gray);
    border-radius: 12px;
    padding: 1.25rem;
}
.spec-card--compact {
    padding: 14px;
}
.config-card {
    background: var(--white);
    border: 1px solid var(--border-gray);
    border-radius: 12px;
    padding: 14px;
}
.process-app-card {
    background: var(--white);
    border: 1px solid var(--border-gray);
    border-radius: 8px;
    padding: 14px;
    text-align: center;
}
.related-card {
    background: var(--white);
    border: 1px solid var(--border-gray);
    border-radius: 8px;
    padding: 14px;
    transition: transform 0.2s, opacity 0.2s, box-shadow 0.2s, color 0.2s, background-color 0.2s, border-color 0.2s, filter 0.2s;
}
.related-card:hover {
    box-shadow: var(--shadow-sm);
}
.stat-box {
    background: var(--white);
    border: 1px solid var(--border-gray);
    border-radius: 12px;
    padding: 1.25rem;
    text-align: center;
}
.spec-box {
    background: var(--white);
    border: 1px solid var(--border-gray);
    border-radius: 10px;
    padding: 1.1rem 1.25rem;
}
.ts-block {
    background: var(--white);
    border: 1px solid var(--border-gray);
    border-left: 4px solid var(--accent-gold);
    border-radius: 10px;
    padding: 1.25rem 1.5rem;
    margin: 1rem 0;
}
.sol,
.solution-block {
    background: #f0f7ff;
    border-radius: 8px;
    padding: 0.85rem 1.15rem;
    margin-top: 0.6rem;
    border-left: 3px solid var(--primary-blue);
}
.adv-block,
.advantage-block {
    background: var(--white);
    border: 1px solid var(--border-gray);
    border-left: 4px solid #2a9d8f;
    border-radius: 10px;
    padding: 1.25rem 1.5rem;
    margin: 1rem 0;
}
.calc-box {
    background: var(--primary-light);
    border: 1px solid var(--primary-blue);
    border-radius: 8px;
    padding: 1rem;
    margin: 1rem 0;
}

/* ---- Badges & Pills ---- */
.badge,
.badge-light {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: rgba(255,255,255,0.15);
    padding: 0.375rem 1rem;
    border-radius: 20px;
    font-size: 0.85rem;
}
.compliance-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: var(--light-gray);
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--text-medium);
    margin: 4px;
}
.nav-pill {
    padding: 8px 16px;
    background: var(--light-gray);
    border-radius: 20px;
    font-size: 0.875rem;
    color: var(--text-medium);
    text-decoration: none;
    transition: transform 0.2s, opacity 0.2s, box-shadow 0.2s, color 0.2s, background-color 0.2s, border-color 0.2s, filter 0.2s;
}
.nav-pill:hover {
    background: var(--border-gray);
    color: var(--text-dark);
}

/* ---- Layout Helpers ---- */
.embed-section {
    background: var(--light-gray);
    border-radius: 12px;
    padding: 1rem;
    margin: 2rem 0;
}
.dimension-list,
.spec-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

/* ---- Charts / Visuals ---- */
.cost-chart {
    background: var(--white);
    border: 1px solid var(--border-gray);
    border-radius: 8px;
    padding: 14px;
}
.cost-chart-title {
    font-size: 0.875rem;
    font-weight: 600;
    color: #1e293b;
    margin-bottom: 1rem;
    text-align: center;
}
.cost-chart-bar {
    display: flex;
    height: 40px;
    border-radius: 6px;
    overflow: hidden;
}

/* ---- Hero Internal Elements ---- */
.hero-label {
    display: inline-block;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--accent-gold);
    margin-bottom: 1rem;
}
.hero-desc {
    font-size: 1.1rem;
    color: rgba(255,255,255,0.8);
    max-width: 650px;
    margin-bottom: 1rem;
    line-height: 1.6;
}

/* ---- Utility ---- */
.performance-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--success-light);
    color: var(--success-green);
    padding: 8px 16px;
    border-radius: 20px;
    font-weight: 600;
    margin: 1rem 0;
}
.view-details-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--primary-blue);
    font-weight: 600;
    text-decoration: none;
    margin-top: 1.5rem;
    padding: 0.75rem 1.25rem;
    border: 2px solid var(--primary-blue);
    border-radius: 6px;
    transition: transform 0.3s, opacity 0.3s, box-shadow 0.3s, color 0.3s, background-color 0.3s, border-color 0.3s, filter 0.3s;
}
.view-details-link:hover {
    background: var(--primary-blue);
    color: var(--white);
}
.step-num {
    min-width: 36px;
    height: 36px;
    background: var(--primary-blue);
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.95rem;
    flex-shrink: 0;
}
.removal-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
    margin-top: 1.5rem;
}
.removal-item {
    background: var(--light-gray);
    padding: 1rem;
    border-radius: 8px;
    text-align: center;
}
.product-code {
    display: inline-block;
    background: var(--primary-light);
    color: var(--primary-blue);
    padding: 4px 12px;
    border-radius: 4px;
    font-size: 0.875rem;
    font-weight: 600;
    margin-bottom: 1rem;
}
.recommended {
    border-color: var(--primary-blue);
    position: relative;
}

/* ============================================
   HERO VISUAL UNIFICATION
   Ensures all hero variants render consistently
   with white text on navy gradient, matching
   the index.html reference design.
   ============================================ */

/* Force white text in all hero contexts */
.hero,
.hero-small,
.page-header,
.hero-section,
.tech-hero,
.case-study-hero,
.product-hero {
    color: var(--white) !important;
}

.hero h1,
.hero-small h1,
.page-header h1,
.hero-section h1,
.tech-hero h1,
.case-study-hero h1,
.product-hero h1,
.hero-title {
    color: var(--white) !important;
}

.hero p,
.hero-small p,
.page-header p,
.hero-section p,
.tech-hero p,
.case-study-hero p,
.product-hero p,
.hero-description {
    color: rgba(255,255,255,0.85) !important;
}

/* Trust badges in heroes */
.hero .trust-badge,
.hero-small .trust-badge,
.page-header .trust-badge,
.tech-hero .trust-badge,
.case-study-hero .trust-badge {
    background: rgba(255,255,255,0.12) !important;
    border: 1px solid rgba(255,255,255,0.2) !important;
    color: var(--accent-gold) !important;
}

.hero .trust-badge i,
.hero-small .trust-badge i,
.page-header .trust-badge i,
.tech-hero .trust-badge i,
.case-study-hero .trust-badge i {
    color: var(--accent-gold) !important;
}

/* Hero feature items unified */
.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 {
    background: rgba(255,255,255,0.1) !important;
    border: 1px solid rgba(255,255,255,0.1) !important;
    border-radius: 12px !important;
}

.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 {
    background: rgba(255,255,255,0.18) !important;
    transform: translateY(-4px) !important;
}

.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 {
    color: var(--accent-gold) !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 {
    color: var(--white) !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 {
    color: rgba(255,255,255,0.7) !important;
}

/* Buttons in hero context */
.hero .btn-secondary,
.hero-small .btn-secondary,
.page-header .btn-secondary,
.tech-hero .btn-secondary,
.case-study-hero .btn-secondary {
    background: transparent !important;
    color: var(--white) !important;
    border-color: rgba(255,255,255,0.4) !important;
}

.hero .btn-secondary:hover,
.hero-small .btn-secondary:hover,
.page-header .btn-secondary:hover,
.tech-hero .btn-secondary:hover,
.case-study-hero .btn-secondary:hover {
    background: rgba(255,255,255,0.1) !important;
    border-color: rgba(255,255,255,0.6) !important;
}

/* Force navy gradient background on all hero variants */
.hero,
.hero-small,
.page-header,
.hero-section,
.tech-hero,
.product-hero {
    background: linear-gradient(135deg, var(--primary-navy) 0%, #0d3a5c 100%) !important;
}

/* Preserve case-study background images but ensure navy overlay */
.case-study-hero {
    background-color: var(--primary-navy) !important;
}

/* Remove any white-background hero overrides */
.hero::before,
.hero::after,
.hero-small::before,
.hero-small::after,
.page-header::before,
.page-header::after,
.tech-hero::before,
.tech-hero::after,
.case-study-hero::before,
.case-study-hero::after,
.product-hero::before,
.product-hero::after {
    display: block !important;
}

/* ============================================
   HERO TEXT STANDARDIZATION
   Forces consistent font size, alignment, and
   max-width across all hero variants to match
   the index.html reference design.
   ============================================ */

/* Standardize hero titles */
.hero h1,
.hero-small h1,
.page-header h1,
.hero-section h1,
.tech-hero h1,
.case-study-hero h1,
.product-hero h1,
.hero-title {
    font-size: 2.25rem !important;
    line-height: 1.2 !important;
    text-align: left !important;
    margin-bottom: 1rem !important;
    max-width: 900px !important;
}

/* Standardize hero descriptions */
.hero p,
.hero-small p,
.page-header p,
.hero-section p,
.tech-hero p,
.case-study-hero p,
.product-hero p,
.hero-description {
    font-size: 1rem !important;
    line-height: 1.6 !important;
    text-align: left !important;
    max-width: 720px !important;
}

/* Force left alignment on all hero containers */
.hero,
.hero-small,
.page-header,
.hero-section,
.tech-hero,
.case-study-hero,
.product-hero {
    text-align: left !important;
}

/* Tablet */
@media (max-width: 768px) {
    .hero h1,
    .hero-small h1,
    .page-header h1,
    .hero-section h1,
    .tech-hero h1,
    .case-study-hero h1,
    .product-hero h1,
    .hero-title {
        font-size: 1.875rem !important;
    }
}

/* Mobile */
@media (max-width: 480px) {
    .hero h1,
    .hero-small h1,
    .page-header h1,
    .hero-section h1,
    .tech-hero h1,
    .case-study-hero h1,
    .product-hero h1,
    .hero-title {
        font-size: 1.625rem !important;
    }
}

/* Remove auto-center margins on page-header paragraphs */
.page-header p {
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* Ensure hero buttons are left-aligned */
.hero .hero-buttons,
.hero-small .hero-buttons,
.page-header .hero-buttons,
.tech-hero .hero-buttons,
.case-study-hero .hero-buttons {
    justify-content: flex-start !important;
}

/* ============================================
   ENTERPRISE SPACING UNIFICATION
   Forces consistent, efficient spacing across
   all 765 pages. Eliminates wasteful padding
   and maximizes information density.
   ============================================ */

/* ---- Sections: 48px vertical standard ---- */
.section,
.section-lg,
.section-xl,
.section-cta,
.cta-section,
.cta-section-sludge,
.section-light,
.section-padding-lg,
.section-padding-md {
    padding-top: 48px !important;
    padding-bottom: 48px !important;
}

/* ---- Section headers: tight rhythm ---- */
.section-header {
    margin-bottom: 1.5rem !important;
    text-align: center !important;
}
.section-label {
    margin-bottom: 0.5rem !important;
    font-size: 0.75rem !important;
    letter-spacing: 0.08em !important;
}
.section-title {
    margin-bottom: 0.5rem !important;
    font-size: 1.75rem !important;
    line-height: 1.25 !important;
}
.section-subtitle {
    margin-bottom: 0 !important;
    font-size: 1rem !important;
    line-height: 1.5 !important;
}

/* ---- Cards: 16px standard ---- */
.card,
.comparison-card,
.spec-card,
.config-card,
.process-app-card,
.related-card,
.stat-box,
.spec-box,
.sol,
.adv-block {
    padding: 16px !important;
}
.card-large,
.system-cta-card {
    padding: 24px !important;
}

/* ---- Grids: 16px standard gap ---- */
.grid-2,
.grid-3,
.grid-4,
.grid-2-1,
.grid-auto-200,
.grid-auto-220,
.grid-auto-240,
.grid-auto-250,
.grid-auto-280,
.grid-auto-300,
.grid-auto-320,
.grid-auto-400,
.grid-auto-150,
.grid-auto-160,
.cards-grid,
.features-grid,
.process-boxes,
.trust-grid,
.content-grid,
.challenge-grid,
.solutions-grid,
.industry-grid,
.equipment-grid {
    gap: 16px !important;
}

/* Large layouts get slightly more breathing room */
.grid-auto-400 {
    gap: 24px !important;
}

/* ---- Hero features: compact ---- */
.hero-features {
    gap: 12px !important;
    margin-top: 1.5rem !important;
}
.hero-feature-item {
    padding: 12px !important;
}

/* ---- Container: mobile-first padding ---- */
body .container {
    padding-left: 16px;
    padding-right: 16px;
}
@media (min-width: 768px) {
    body .container {
        padding-left: 24px;
        padding-right: 24px;
    }
}

/* ---- Feature items: compact ---- */
.feature-item {
    padding: 12px 14px !important;
}

/* ---- Info boxes: compact ---- */
.info-box,
.info-box-blue,
.info-box-left,
.callout-box,
.warn-box,
.note-box,
.feature-highlight {
    padding: 12px 14px !important;
    margin: 1rem 0 !important;
}

/* ---- Tab buttons: compact ---- */
.tab-button,
.engagement-tab {
    padding: 8px 14px !important;
}

/* ---- Stat cards: compact ---- */
.stat-card-value,
.stat-card-value--dark {
    font-size: 1.5rem !important;
}

/* ---- Process steps: compact ---- */
.process-step {
    padding: 12px !important;
}

/* ---- Cost chart / calc boxes ---- */
.cost-chart,
.calc-box,
.embed-section {
    padding: 12px !important;
}

/* ---- Badges & pills: tight ---- */
.badge,
.badge-light,
.compliance-badge {
    padding: 4px 10px !important;
}
.nav-pill {
    padding: 6px 14px !important;
}

/* ---- Hero buttons: tight gap ---- */
.hero-buttons {
    gap: 12px !important;
    margin-bottom: 1rem !important;
}

/* ---- Trust badges: tight ---- */
.hero-trust-badges {
    gap: 8px !important;
    margin-top: 1rem !important;
    margin-bottom: 1rem !important;
}

/* ---- Breadcrumbs: tight ---- */
.breadcrumb-list,
.breadcrumbs {
    margin-bottom: 0.75rem !important;
}

/* ---- CTA sections: no extra padding ---- */
.cta-section-sludge {
    padding-top: 36px !important;
    padding-bottom: 36px !important;
}

/* ---- Mobile: further density ---- */
@media (max-width: 768px) {
    .section,
    .section-lg,
    .section-xl,
    .section-cta,
    .cta-section,
    .cta-section-sludge {
        padding-top: 36px !important;
        padding-bottom: 36px !important;
    }
    .section-title {
        font-size: 1.5rem !important;
    }
    .section-subtitle {
        font-size: 0.9375rem !important;
    }
    .card,
    .comparison-card,
    .spec-card {
        padding: 14px !important;
    }
    .grid-2,
    .grid-3,
    .grid-4 {
        gap: 12px !important;
    }
    .hero-features {
        gap: 10px !important;
    }
    .hero-feature-item {
        padding: 10px !important;
    }
}

@media (max-width: 480px) {
    .section,
    .section-lg,
    .section-xl,
    .section-cta,
    .cta-section,
    .cta-section-sludge {
        padding-top: 28px !important;
        padding-bottom: 28px !important;
    }
    .section-header {
        margin-bottom: 1rem !important;
    }
    .section-title {
        font-size: 1.375rem !important;
    }
    .card {
        padding: 12px !important;
    }
    body .container {
        padding-left: 12px;
        padding-right: 12px;
    }
}

/* ============================================
   PROFESSIONAL ENTERPRISE DESIGN SYSTEM
   Comprehensive override that unifies all
   765 pages under a single, clean visual
   language. Loaded last for maximum priority.
   ============================================ */

/* ---- Design Tokens ---- */
:root {
    --e-navy: #0a2540;
    --e-navy-light: #0d3a5c;
    --e-blue: #00529b;
    --e-blue-light: #0066cc;
    --e-gold: #c9a227;
    --e-gold-dark: #a3760a;
    --e-white: #ffffff;
    --e-surface: #f8fafc;
    --e-surface-hover: #f1f5f9;
    --e-border: #e2e8f0;
    --e-border-light: #f1f5f9;
    --e-text: #1e293b;
    --e-text-secondary: #475569;
    --e-text-muted: #64748b;
    --e-text-light: #94a3b8;
    --e-success: #16a34a;
    --e-warning: #d97706;
    --e-error: #dc2626;
    --e-radius-sm: 6px;
    --e-radius-md: 8px;
    --e-radius-lg: 12px;
    --e-shadow-sm: 0 1px 2px rgba(0,0,0,0.04);
    --e-shadow-md: 0 2px 8px rgba(0,0,0,0.06);
    --e-shadow-lg: 0 4px 16px rgba(0,0,0,0.08);
    --e-header-h: 60px;
    --e-space-xs: 4px;
    --e-space-sm: 8px;
    --e-space-md: 16px;
    --e-space-lg: 24px;
    --e-space-xl: 32px;
    --e-space-2xl: 48px;
}

/* ---- Base Typography ---- */
body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
    font-size: 15px !important;
    line-height: 1.6 !important;
    color: var(--e-text) !important;
    background: var(--e-white) !important;
    -webkit-font-smoothing: antialiased !important;
}

h1, h2, h3, h4, h5, h6 {
    font-weight: 700 !important;
    line-height: 1.25 !important;
    color: var(--e-navy) !important;
    margin-top: 0 !important;
}

h1 { font-size: 2rem !important; margin-bottom: 0.75rem !important; }
h2 { font-size: 1.75rem !important; margin-bottom: 0.625rem !important; }
h3 { font-size: 1.375rem !important; margin-bottom: 0.5rem !important; }
h4 { font-size: 1.125rem !important; margin-bottom: 0.5rem !important; }
h5 { font-size: 1rem !important; margin-bottom: 0.375rem !important; }
h6 { font-size: 0.875rem !important; margin-bottom: 0.375rem !important; text-transform: uppercase !important; letter-spacing: 0.05em !important; }

p {
    font-size: 0.9375rem !important;
    line-height: 1.65 !important;
    margin-bottom: 0.75rem !important;
    color: var(--e-text-secondary) !important;
}

p:last-child { margin-bottom: 0 !important; }

a {
    color: var(--e-blue) !important;
    text-decoration: none !important;
    transition: color 0.15s ease !important;
}
a:hover { color: var(--e-blue-light) !important; }

strong, b { font-weight: 600 !important; color: var(--e-text) !important; }

ul, ol {
    padding-left: 1.25rem !important;
    margin-bottom: 0.75rem !important;
}
li {
    margin-bottom: 0.25rem !important;
    font-size: 0.9375rem !important;
    line-height: 1.6 !important;
}

/* ---- Layout ---- */
.container {
    max-width: 1200px !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
}
@media (min-width: 768px) {
    .container { padding-left: 24px !important; padding-right: 24px !important; }
}

/* ---- Header ---- */
.header {
    height: var(--e-header-h) !important;
    background: var(--e-white) !important;
    border-bottom: 1px solid var(--e-border) !important;
    box-shadow: var(--e-shadow-sm) !important;
}

.header-inner { height: var(--e-header-h) !important; }

/* ---- Navigation ---- */
.nav-link {
    font-size: 0.875rem !important;
    font-weight: 500 !important;
    color: var(--e-text-secondary) !important;
    padding: 0.5rem 0.75rem !important;
    border-radius: var(--e-radius-sm) !important;
}
.nav-link:hover, .nav-link.active {
    color: var(--e-blue) !important;
    background: var(--e-surface) !important;
}

.dropdown-menu {
    border: 1px solid var(--e-border) !important;
    border-radius: var(--e-radius-md) !important;
    box-shadow: var(--e-shadow-lg) !important;
    padding: 0.5rem !important;
}
.dropdown-link {
    font-size: 0.875rem !important;
    padding: 0.5rem 0.75rem !important;
    border-radius: var(--e-radius-sm) !important;
    color: var(--e-text-secondary) !important;
}
.dropdown-link:hover {
    background: var(--e-surface) !important;
    color: var(--e-navy) !important;
}

/* ---- Heroes (all variants) ---- */
.hero, .hero-small, .page-header, .hero-section,
.tech-hero, .case-study-hero, .product-hero {
    background: linear-gradient(135deg, var(--e-navy) 0%, var(--e-navy-light) 100%) !important;
    color: var(--e-white) !important;
    padding-top: calc(var(--e-header-h) + 24px) !important;
    padding-bottom: 40px !important;
    position: relative !important;
    overflow: hidden !important;
}

.hero::before, .hero-small::before, .page-header::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    background: radial-gradient(ellipse at top right, rgba(201,162,39,0.08) 0%, transparent 50%) !important;
    pointer-events: none !important;
}

.hero h1, .hero-small h1, .page-header h1,
.tech-hero h1, .case-study-hero h1, .product-hero h1,
.hero-title {
    font-size: 2rem !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    color: var(--e-white) !important;
    margin-bottom: 0.75rem !important;
    max-width: 900px !important;
}

.hero p, .hero-small p, .page-header p,
.tech-hero p, .case-study-hero p, .product-hero p,
.hero-description {
    font-size: 1rem !important;
    line-height: 1.6 !important;
    color: rgba(255,255,255,0.85) !important;
    margin-bottom: 1rem !important;
    max-width: 680px !important;
}

.hero-buttons, .page-header .hero-buttons {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 12px !important;
    margin-bottom: 1rem !important;
}

.hero-trust-badges {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    margin-top: 0.75rem !important;
    margin-bottom: 0.75rem !important;
}

.trust-badge {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    background: rgba(255,255,255,0.12) !important;
    border: 1px solid rgba(255,255,255,0.2) !important;
    color: var(--e-gold) !important;
    padding: 4px 12px !important;
    border-radius: 999px !important;
    font-size: 0.8125rem !important;
    font-weight: 500 !important;
}
.trust-badge i { color: var(--e-gold) !important; }

/* Hero features grid */
.hero-features {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 12px !important;
    margin-top: 1.5rem !important;
}
@media (max-width: 768px) {
    .hero-features { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 480px) {
    .hero-features { grid-template-columns: 1fr !important; }
}

.hero-feature-item {
    background: rgba(255,255,255,0.1) !important;
    border: 1px solid rgba(255,255,255,0.15) !important;
    border-radius: var(--e-radius-lg) !important;
    padding: 14px !important;
    text-align: center !important;
    transition: transform 0.2s ease, background 0.2s ease !important;
    cursor: pointer !important;
    text-decoration: none !important;
}
.hero-feature-item:hover {
    background: rgba(255,255,255,0.18) !important;
    transform: translateY(-3px) !important;
}
.hero-feature-item i {
    font-size: 1.75rem !important;
    color: var(--e-gold) !important;
    margin-bottom: 8px !important;
}
.hero-feature-item h4 {
    font-size: 0.9375rem !important;
    font-weight: 600 !important;
    color: var(--e-white) !important;
    margin-bottom: 4px !important;
}
.hero-feature-item p {
    font-size: 0.8125rem !important;
    color: rgba(255,255,255,0.7) !important;
    margin: 0 !important;
    line-height: 1.5 !important;
}

/* ---- Sections ---- */
.section, .section-lg, .section-xl, .section-cta,
.cta-section, .cta-section-sludge, .section-light {
    padding-top: 48px !important;
    padding-bottom: 48px !important;
}

.section-header {
    text-align: center !important;
    margin-bottom: 1.5rem !important;
}

/* ============================================
   PROFESSIONAL ENTERPRISE DESIGN SYSTEM
   Comprehensive override that unifies all
   765 pages under a single, clean visual
   language. Loaded last for maximum priority.
   ============================================ */

/* ---- Design Tokens ---- */
:root {
    --e-navy: #0a2540;
    --e-navy-light: #0d3a5c;
    --e-blue: #00529b;
    --e-blue-light: #0066cc;
    --e-gold: #c9a227;
    --e-gold-dark: #a3760a;
    --e-white: #ffffff;
    --e-surface: #f8fafc;
    --e-surface-hover: #f1f5f9;
    --e-border: #e2e8f0;
    --e-border-light: #f1f5f9;
    --e-text: #1e293b;
    --e-text-secondary: #475569;
    --e-text-muted: #64748b;
    --e-text-light: #94a3b8;
    --e-success: #16a34a;
    --e-warning: #d97706;
    --e-error: #dc2626;
    --e-radius-sm: 6px;
    --e-radius-md: 8px;
    --e-radius-lg: 12px;
    --e-shadow-sm: 0 1px 2px rgba(0,0,0,0.04);
    --e-shadow-md: 0 2px 8px rgba(0,0,0,0.06);
    --e-shadow-lg: 0 4px 16px rgba(0,0,0,0.08);
    --e-header-h: 60px;
    --e-space-xs: 4px;
    --e-space-sm: 8px;
    --e-space-md: 16px;
    --e-space-lg: 24px;
    --e-space-xl: 32px;
    --e-space-2xl: 48px;
}

/* ---- Base Typography ---- */
body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
    font-size: 15px !important;
    line-height: 1.6 !important;
    color: var(--e-text) !important;
    background: var(--e-white) !important;
    -webkit-font-smoothing: antialiased !important;
}

h1, h2, h3, h4, h5, h6 {
    font-weight: 700 !important;
    line-height: 1.25 !important;
    color: var(--e-navy) !important;
    margin-top: 0 !important;
}

h1 { font-size: 2rem !important; margin-bottom: 0.75rem !important; }
h2 { font-size: 1.75rem !important; margin-bottom: 0.625rem !important; }
h3 { font-size: 1.375rem !important; margin-bottom: 0.5rem !important; }
h4 { font-size: 1.125rem !important; margin-bottom: 0.5rem !important; }
h5 { font-size: 1rem !important; margin-bottom: 0.375rem !important; text-transform: uppercase !important; letter-spacing: 0.05em !important; }
h6 { font-size: 0.875rem !important; margin-bottom: 0.375rem !important; text-transform: uppercase !important; letter-spacing: 0.05em !important; }

p {
    font-size: 0.9375rem !important;
    line-height: 1.65 !important;
    margin-bottom: 0.75rem !important;
    color: var(--e-text-secondary) !important;
}

p:last-child { margin-bottom: 0 !important; }

a {
    color: var(--e-blue) !important;
    text-decoration: none !important;
    transition: color 0.15s ease !important;
}
a:hover { color: var(--e-blue-light) !important; }

strong, b { font-weight: 600 !important; color: var(--e-text) !important; }

ul, ol {
    padding-left: 1.25rem !important;
    margin-bottom: 0.75rem !important;
}
li {
    margin-bottom: 0.25rem !important;
    font-size: 0.9375rem !important;
    line-height: 1.6 !important;
}

/* ---- Layout ---- */
.container {
    max-width: 1200px !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
}
@media (min-width: 768px) {
    .container { padding-left: 24px !important; padding-right: 24px !important; }
}

/* ---- Header ---- */
.header {
    height: var(--e-header-h) !important;
    background: var(--e-white) !important;
    border-bottom: 1px solid var(--e-border) !important;
    box-shadow: var(--e-shadow-sm) !important;
}

.header-inner { height: var(--e-header-h) !important; }

/* ---- Navigation ---- */
.nav-link {
    font-size: 0.875rem !important;
    font-weight: 500 !important;
    color: var(--e-text-secondary) !important;
    padding: 0.5rem 0.75rem !important;
    border-radius: var(--e-radius-sm) !important;
}
.nav-link:hover, .nav-link.active {
    color: var(--e-blue) !important;
    background: var(--e-surface) !important;
}

.dropdown-menu {
    border: 1px solid var(--e-border) !important;
    border-radius: var(--e-radius-md) !important;
    box-shadow: var(--e-shadow-lg) !important;
    padding: 0.5rem !important;
}
.dropdown-link {
    font-size: 0.875rem !important;
    padding: 0.5rem 0.75rem !important;
    border-radius: var(--e-radius-sm) !important;
    color: var(--e-text-secondary) !important;
}
.dropdown-link:hover {
    background: var(--e-surface) !important;
    color: var(--e-navy) !important;
}

/* ---- Heroes (all variants) ---- */
.hero, .hero-small, .page-header, .hero-section,
.tech-hero, .case-study-hero, .product-hero {
    background: linear-gradient(135deg, var(--e-navy) 0%, var(--e-navy-light) 100%) !important;
    color: var(--e-white) !important;
    padding-top: calc(var(--e-header-h) + 24px) !important;
    padding-bottom: 40px !important;
    position: relative !important;
    overflow: hidden !important;
}

.hero::before, .hero-small::before, .page-header::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    background: radial-gradient(ellipse at top right, rgba(201,162,39,0.08) 0%, transparent 50%) !important;
    pointer-events: none !important;
}

.hero h1, .hero-small h1, .page-header h1,
.tech-hero h1, .case-study-hero h1, .product-hero h1,
.hero-title {
    font-size: 2rem !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    color: var(--e-white) !important;
    margin-bottom: 0.75rem !important;
    max-width: 900px !important;
}

.hero p, .hero-small p, .page-header p,
.tech-hero p, .case-study-hero p, .product-hero p,
.hero-description {
    font-size: 1rem !important;
    line-height: 1.6 !important;
    color: rgba(255,255,255,0.85) !important;
    margin-bottom: 1rem !important;
    max-width: 680px !important;
}

.hero-buttons, .page-header .hero-buttons {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 12px !important;
    margin-bottom: 1rem !important;
}

.hero-trust-badges {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    margin-top: 0.75rem !important;
    margin-bottom: 0.75rem !important;
}

.trust-badge {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    background: rgba(255,255,255,0.12) !important;
    border: 1px solid rgba(255,255,255,0.2) !important;
    color: var(--e-gold) !important;
    padding: 4px 12px !important;
    border-radius: 999px !important;
    font-size: 0.8125rem !important;
    font-weight: 500 !important;
}
.trust-badge i { color: var(--e-gold) !important; }

/* Hero features grid */
.hero-features {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 12px !important;
    margin-top: 1.5rem !important;
}
@media (max-width: 768px) {
    .hero-features { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 480px) {
    .hero-features { grid-template-columns: 1fr !important; }
}

.hero-feature-item {
    background: rgba(255,255,255,0.1) !important;
    border: 1px solid rgba(255,255,255,0.15) !important;
    border-radius: var(--e-radius-lg) !important;
    padding: 14px !important;
    text-align: center !important;
    transition: transform 0.2s ease, background 0.2s ease !important;
    cursor: pointer !important;
    text-decoration: none !important;
}
.hero-feature-item:hover {
    background: rgba(255,255,255,0.18) !important;
    transform: translateY(-3px) !important;
}
.hero-feature-item i {
    font-size: 1.75rem !important;
    color: var(--e-gold) !important;
    margin-bottom: 8px !important;
}
.hero-feature-item h4 {
    font-size: 0.9375rem !important;
    font-weight: 600 !important;
    color: var(--e-white) !important;
    margin-bottom: 4px !important;
}
.hero-feature-item p {
    font-size: 0.8125rem !important;
    color: rgba(255,255,255,0.7) !important;
    margin: 0 !important;
    line-height: 1.5 !important;
}

/* ---- Sections ---- */
.section, .section-lg, .section-xl, .section-cta,
.cta-section, .cta-section-sludge, .section-light {
    padding-top: 48px !important;
    padding-bottom: 48px !important;
}

.section-header {
    text-align: center !important;
    margin-bottom: 1.5rem !important;
    max-width: 720px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}
.section-label {
    display: inline-block !important;
    font-size: 0.75rem !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.08em !important;
    color: var(--e-blue) !important;
    margin-bottom: 0.5rem !important;
}
.section-title {
    font-size: 1.75rem !important;
    font-weight: 700 !important;
    color: var(--e-navy) !important;
    margin-bottom: 0.5rem !important;
    line-height: 1.25 !important;
}
.section-subtitle {
    font-size: 1rem !important;
    color: var(--e-text-muted) !important;
    margin-bottom: 0 !important;
    line-height: 1.5 !important;
}

/* ---- Cards ---- */
.card, .comparison-card, .spec-card, .config-card,
.process-app-card, .related-card, .stat-box, .spec-box,
.sol, .adv-block, .solution-block, .challenge-card,
.equipment-card, .industry-card, .service-card {
    background: var(--e-white) !important;
    border: 1px solid var(--e-border) !important;
    border-radius: var(--e-radius-lg) !important;
    padding: 16px !important;
    box-shadow: var(--e-shadow-md) !important;
    transition: box-shadow 0.2s ease, transform 0.2s ease, border-color 0.2s ease !important;
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
}
.card:hover, .comparison-card:hover, .spec-card:hover,
.related-card:hover, .industry-card:hover, .service-card:hover {
    box-shadow: var(--e-shadow-lg) !important;
    border-color: #cbd5e1 !important;
    transform: translateY(-2px) !important;
}

.card h3, .card h4, .comparison-card h3, .spec-card h3,
.industry-card h3, .service-card h3 {
    font-size: 1.125rem !important;
    font-weight: 600 !important;
    color: var(--e-navy) !important;
    margin-bottom: 0.5rem !important;
}

.card p, .comparison-card p, .spec-card p,
.industry-card p, .service-card p {
    font-size: 0.9375rem !important;
    line-height: 1.6 !important;
    color: var(--e-text-secondary) !important;
    margin-bottom: 0.75rem !important;
    flex-grow: 1 !important;
}

.card-icon, .feature-icon, .icon-circle {
    width: 40px !important;
    height: 40px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: var(--e-surface) !important;
    border-radius: var(--e-radius-md) !important;
    margin-bottom: 12px !important;
    font-size: 1rem !important;
    color: var(--e-blue) !important;
}

.card-large, .system-cta-card {
    padding: 24px !important;
}

/* ---- Buttons ---- */
.btn, button, input[type="submit"], input[type="button"] {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    font-size: 0.9375rem !important;
    font-weight: 500 !important;
    padding: 10px 20px !important;
    border-radius: var(--e-radius-md) !important;
    border: 1px solid transparent !important;
    cursor: pointer !important;
    transition: all 0.15s ease !important;
    line-height: 1.4 !important;
    text-decoration: none !important;
}

.btn-primary, button[type="submit"] {
    background: var(--e-navy) !important;
    color: var(--e-white) !important;
    border-color: var(--e-navy) !important;
}
.btn-primary:hover {
    background: var(--e-navy-light) !important;
    border-color: var(--e-navy-light) !important;
    transform: translateY(-1px) !important;
    box-shadow: var(--e-shadow-md) !important;
}

.btn-secondary {
    background: var(--e-blue-light) !important; /* #0066cc brand blue */
    color: var(--e-white) !important;
    border-color: var(--e-blue-light) !important;
}
.btn-secondary:hover {
    background: var(--e-blue) !important; /* #00529b */
    border-color: var(--e-blue) !important;
    color: var(--e-white) !important;
}
/* ...but secondary buttons that were WHITE on a dark hero/CTA background stay white
   so they remain visible — "leave white to stay white". (case-study heroes excluded;
   they are handled as transparent below.) */
.hero .btn-secondary, .product-hero .btn-secondary, .tech-hero .btn-secondary,
.calc-page-hero .btn-secondary, .demo-hero .btn-secondary, .page-header .btn-secondary,
.cta-section .btn-secondary, .cta-section-sludge .btn-secondary {
    background: var(--e-white) !important;
    color: var(--e-navy) !important;
    border-color: var(--e-white) !important;
}
.hero .btn-secondary:hover, .product-hero .btn-secondary:hover, .tech-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, .cta-section-sludge .btn-secondary:hover {
    background: #eef2f7 !important;
    color: var(--e-navy) !important;
    border-color: #eef2f7 !important;
}
/* ...and secondary buttons that were TRANSPARENT outlines (case-study heroes) stay
   transparent — "transparent to stay transparent". Placed last so it always wins. */
.case-study-hero .btn-secondary {
    background: transparent !important;
    color: var(--e-white) !important;
    border-color: rgba(255,255,255,0.4) !important;
}
.case-study-hero .btn-secondary:hover {
    background: rgba(255,255,255,0.1) !important;
    color: var(--e-white) !important;
    border-color: rgba(255,255,255,0.6) !important;
}

.btn-gold {
    background: var(--e-gold) !important;
    color: var(--e-white) !important;
    border-color: var(--e-gold) !important;
}
.btn-gold:hover {
    background: var(--e-gold-dark) !important;
    border-color: var(--e-gold-dark) !important;
}

/* Download buttons: keep white text on the blue/navy background. The global
   a{color:!important} above otherwise forces the link blue → invisible. */
.btn-download {
    background: var(--e-navy) !important;
    color: var(--e-white) !important;
    border-color: var(--e-navy) !important;
}
.btn-download:hover {
    background: var(--e-navy-light) !important;
    border-color: var(--e-navy-light) !important;
}
.btn-download i { color: var(--e-white) !important; }
/* Download links that carry their own dark inline background (e.g. .pdf-download
   with background:var(--primary-navy)) — restore the intended white text/icon. */
.pdf-download[style*="background"],
.doc-download[style*="background"],
.datasheet-download[style*="background"] {
    color: var(--e-white) !important;
}
.pdf-download[style*="background"] i,
.doc-download[style*="background"] i,
.datasheet-download[style*="background"] i {
    color: var(--e-white) !important;
}

.btn-sm {
    padding: 6px 14px !important;
    font-size: 0.875rem !important;
}

.btn-outline-light {
    background: transparent !important;
    color: var(--e-white) !important;
    border-color: rgba(255,255,255,0.4) !important;
}
.btn-outline-light:hover {
    background: rgba(255,255,255,0.1) !important;
    border-color: rgba(255,255,255,0.6) !important;
}

/* ---- Grids ---- */
.grid-2, .grid-3, .grid-4, .grid-2-1,
.cards-grid, .features-grid, .process-boxes,
.trust-grid, .content-grid, .challenge-grid,
.solutions-grid, .industry-grid, .equipment-grid,
.comparison-grid, .stats-row {
    gap: 16px !important;
}

.grid-auto-200, .grid-auto-220, .grid-auto-240,
.grid-auto-250, .grid-auto-280, .grid-auto-300,
.grid-auto-320, .grid-auto-150, .grid-auto-160,
.grid-auto-280-15, .grid-auto-300-14, .grid-auto-260-14 {
    gap: 16px !important;
}

.grid-auto-400 { gap: 24px !important; }

/* ---- Tables ---- */
table, .refinery-table, .data-table {
    width: 100% !important;
    border-collapse: collapse !important;
    font-size: 0.875rem !important;
    border: 1px solid var(--e-border) !important;
    border-radius: var(--e-radius-md) !important;
    overflow: hidden !important;
}

table thead, .refinery-table thead {
    background: var(--e-navy) !important;
    color: var(--e-white) !important;
}

table th, .refinery-table th {
    padding: 10px 14px !important;
    font-weight: 600 !important;
    text-align: left !important;
    font-size: 0.8125rem !important;
    text-transform: uppercase !important;
    letter-spacing: 0.04em !important;
}

table td, .refinery-table td {
    padding: 10px 14px !important;
    border-bottom: 1px solid var(--e-border) !important;
    color: var(--e-text-secondary) !important;
}

table tbody tr:hover, .refinery-table tbody tr:hover {
    background: var(--e-surface) !important;
}

/* ---- Forms ---- */
input, textarea, select {
    font-family: inherit !important;
    font-size: 0.9375rem !important;
    padding: 10px 14px !important;
    border: 1px solid var(--e-border) !important;
    border-radius: var(--e-radius-md) !important;
    background: var(--e-white) !important;
    color: var(--e-text) !important;
    transition: border-color 0.15s ease, box-shadow 0.15s ease !important;
    line-height: 1.4 !important;
}
input:focus, textarea:focus, select:focus {
    outline: none !important;
    border-color: var(--e-blue) !important;
    box-shadow: 0 0 0 3px rgba(0,82,155,0.1) !important;
}
input::placeholder, textarea::placeholder {
    color: var(--e-text-light) !important;
}

/* ---- Badges & Pills ---- */
.badge, .badge-light, .compliance-badge,
.project-tags span, .flagship-badge {
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    font-size: 0.75rem !important;
    font-weight: 500 !important;
    padding: 4px 10px !important;
    border-radius: 999px !important;
    background: var(--e-surface) !important;
    color: var(--e-text-secondary) !important;
    border: 1px solid var(--e-border) !important;
}

.badge-light-blue, .badge-blue {
    background: #e0f2fe !important;
    color: var(--e-blue) !important;
    border-color: #bae6fd !important;
}
.badge-light-green, .badge-green {
    background: #dcfce7 !important;
    color: var(--e-success) !important;
    border-color: #bbf7d0 !important;
}

/* ---- Callouts / Info Boxes ---- */
.callout-box, .info-callout, .note-box,
.feature-highlight, .info-box, .info-box-blue {
    background: #eff6ff !important;
    border: 1px solid #dbeafe !important;
    border-left: 3px solid var(--e-blue) !important;
    border-radius: var(--e-radius-md) !important;
    padding: 12px 16px !important;
    margin: 12px 0 !important;
    font-size: 0.9375rem !important;
}
.warn-box, .callout-box--warn {
    background: #fffbeb !important;
    border: 1px solid #fef3c7 !important;
    border-left: 3px solid var(--e-warning) !important;
    border-radius: var(--e-radius-md) !important;
    padding: 12px 16px !important;
    margin: 12px 0 !important;
}
.success-box, .callout-box--success {
    background: #f0fdf4 !important;
    border: 1px solid #bbf7d0 !important;
    border-left: 3px solid var(--e-success) !important;
    border-radius: var(--e-radius-md) !important;
    padding: 12px 16px !important;
    margin: 12px 0 !important;
}

/* ---- Breadcrumbs ---- */
.breadcrumbs, .breadcrumb-list {
    font-size: 0.8125rem !important;
    color: rgba(255,255,255,0.7) !important;
    margin-bottom: 0.75rem !important;
}
.breadcrumbs a, .breadcrumb-list a {
    color: rgba(255,255,255,0.8) !important;
}
.breadcrumbs a:hover, .breadcrumb-list a:hover {
    color: var(--e-white) !important;
}

/* ---- Utility Spacing ---- */
.mt-1 { margin-top: 8px !important; }
.mt-2 { margin-top: 16px !important; }
.mt-3 { margin-top: 24px !important; }
.mb-1 { margin-bottom: 8px !important; }
.mb-2 { margin-bottom: 16px !important; }
.mb-3 { margin-bottom: 24px !important; }

/* Equal-height cards: the action button is pushed to the bottom so buttons line up
   horizontally across a row. Needs !important to beat the .mt-1 utility above, which
   card buttons often also carry (e.g. "View DAF Systems" in .solution-card). */
.card .btn, .feature-card .btn, .process-step .btn, .standard-card .btn,
.solution-card .btn, .application-card .btn, .industry-card .btn,
.service-card-pilot .btn, .solution-type-card .btn, .tool-card .btn,
.tech-card .btn, .related-card .btn, .equipment-card .btn, .source-card .btn,
.method-card .btn, .reuse-card .btn, .spec-card .btn, .config-card .btn,
.benefit-card .btn, .instrument-card .btn {
    margin-top: auto !important;
    align-self: flex-start;
}

/* ---- Mobile Enterprise Density ---- */
@media (max-width: 768px) {
    .hero, .hero-small, .page-header, .hero-section,
    .tech-hero, .case-study-hero, .product-hero {
        padding-top: calc(var(--e-header-h) + 16px) !important;
        padding-bottom: 32px !important;
    }
    .hero h1, .hero-small h1, .page-header h1,
    .hero-title { font-size: 1.625rem !important; }
    .hero p, .hero-description { font-size: 0.9375rem !important; }

    .section, .section-lg, .section-xl, .section-cta,
    .cta-section, .cta-section-sludge {
        padding-top: 36px !important;
        padding-bottom: 36px !important;
    }
    .section-title { font-size: 1.5rem !important; }

    .grid-2, .grid-3, .grid-4,
    .cards-grid, .features-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 14px !important;
    }

    .card, .comparison-card, .spec-card {
        padding: 14px !important;
    }

    .hero-features { grid-template-columns: repeat(2, 1fr) !important; }
}

@media (max-width: 480px) {
    .hero, .hero-small, .page-header, .hero-section,
    .tech-hero, .case-study-hero, .product-hero {
        padding-top: calc(var(--e-header-h) + 8px) !important;
        padding-bottom: 24px !important;
    }
    .hero h1, .hero-title { font-size: 1.5rem !important; }
    .section-title { font-size: 1.375rem !important; }
    .hero-features { grid-template-columns: 1fr !important; }

    .container { padding-left: 12px !important; padding-right: 12px !important; }

    .btn { padding: 8px 16px !important; font-size: 0.875rem !important; }

    .card { padding: 12px !important; }
}

/* ============================================
   CARD CONTENT DENSITY FIXES
   Prevent empty white space in sparse cards
   ============================================ */
.cards-grid .card,
.related-grid .card,
.features-grid .card {
    min-height: 180px !important;
}
.cards-grid .card p,
.related-grid .card p,
.features-grid .card p {
    min-height: 3em !important;
    line-height: 1.6 !important;
}

/* Force multi-column on related grids — never single column vertical stack on desktop */
.related-grid,
.feature-grid,
.component-grid,
.benefit-grid {
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)) !important;
}
@media (min-width: 769px) {
    .related-grid:has(> :nth-child(2)),
    .feature-grid:has(> :nth-child(2)),
    .cards-grid:has(> :nth-child(2)) {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    .related-grid:has(> :nth-child(3)),
    .feature-grid:has(> :nth-child(3)),
    .cards-grid:has(> :nth-child(3)) {
        grid-template-columns: repeat(3, 1fr) !important;
    }
    .related-grid:has(> :nth-child(4)),
    .feature-grid:has(> :nth-child(4)),
    .cards-grid:has(> :nth-child(4)) {
        grid-template-columns: repeat(4, 1fr) !important;
    }
    .cards-grid.grid-3,
    .cards-grid:has(.service-card-pilot) {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}
@media (max-width: 768px) {
    .related-grid,
    .feature-grid,
    .component-grid,
    .benefit-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 14px !important;
    }
}


/* ============================================
   FOOTER WHITE TEXT OVERRIDE
   Forces all footer text to pure white
   ============================================ */
.footer,
.footer h1, .footer h2, .footer h3, .footer h4, .footer h5, .footer h6,
.footer p, .footer span, .footer div, .footer li, .footer a,
.footer strong, .footer b, .footer em, .footer i, .footer u,
.footer label, .footer small, .footer time, .footer mark,
.footer .phone, .footer .locations,
.footer-brand p, .footer-brand .phone, .footer-brand .locations,
.footer-column h4, .footer-column p,
.footer-links a, .footer-links li, .footer-links span,
.footer-links li a.link-gold, .footer-links li a.link-gold:hover,
.footer-bottom p, .footer-bottom a, .footer-bottom span,
.footer-bottom-links a,
.footer-social a, .footer-social a:hover,
.footer-newsletter h4, .footer-newsletter p,
.footer-bottom .footer-uw-sep,
.footer-bottom .footer-uw-link,
.footer-bottom .footer-uw-link:hover,
.footer * {
    color: #ffffff !important;
}

/* ============================================
   DARK BACKGROUND TEXT COLOR FIXES
   Ensures all text is white on dark backgrounds
   ============================================ */
.cta-section,
.cta-section-sludge,
.bg-navy,
.bg-gradient-navy,
.bg-gradient-green,
.bg-dark,
.bg-primary-navy {
    color: #ffffff !important;
}

.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,
.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 {
    color: #ffffff !important;
}

/* Links on dark backgrounds: white by default, blue on hover */
.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([class*="btn"]) {
    color: #ffffff !important;
    text-decoration: underline !important;
}

.cta-section a:not([class*="btn"]):hover,
.cta-section-sludge a:not([class*="btn"]):hover,
.bg-navy a:not([class*="btn"]):hover,
.bg-gradient-navy a:not([class*="btn"]):hover,
.bg-gradient-green a:not([class*="btn"]):hover {
    color: #0066cc !important;
}

/* Industry tags: blue on hover */
.industry-tag:hover {
    color: #00529b !important;
}

/* ============================================
   GLOBAL ROUNDED CORNER + THIN FRAME
   All container elements receive consistent
   12px radius and 1px subtle border
   ============================================ */

/* Light-background containers */
.feature-item,
.feature-card,
.process-step,
.application-card,
.service-mega-card,
.topic-card,
.solution-card,
.standard-card,
.tech-card,
.calc-card,
.capability-card,
.case-card,
.result-card,
.card-white,
.card-gray,
.info-box,
.info-box-blue,
.info-box-left,
.callout-box,
.warn-box,
.success-box,
.note-box,
.info-highlight-box,
.calc-box,
.app-card,
.process-step-card,
.card-grid,
.metric-box,
.case-stat-item,
.list-grid-item,
.table-wrap,
.challenge-card {
    border-radius: 12px !important;
    border: 1px solid var(--e-border) !important;
}

/* Info boxes with colored left border: convert to full subtle border + radius */
.info-box,
.info-box-blue,
.info-box-left,
.note-box,
.callout-box--warn,
.callout-box--success {
    border-left: 1px solid var(--e-border) !important;
    border-radius: 12px !important;
}

/* Cards that might be missing radius/border */
.card-large,
.card-actions {
    border-radius: 12px !important;
    border: 1px solid var(--e-border) !important;
}

/* Process steps specific */
.process-step {
    background: var(--e-white) !important;
    border: 1px solid var(--e-border) !important;
    border-radius: 12px !important;
}

/* Feature items inside grids */
.feature-item {
    background: var(--e-white) !important;
    border: 1px solid var(--e-border) !important;
    border-radius: 12px !important;
}

/* Hero feature items on dark backgrounds: keep subtle border + radius */
.hero-feature-item {
    border-radius: 12px !important;
    border: 1px solid rgba(255,255,255,0.15) !important;
}

/* Card hover enhancement */
.feature-item:hover,
.feature-card:hover,
.process-step:hover,
.application-card:hover,
.card-white:hover,
.card-gray:hover,
.info-box:hover,
.callout-box:hover {
    border-color: #cbd5e1 !important;
}

/* Additional containers */
.equipment-item,
.equipment-list .equipment-item,
.application-item {
    border-radius: 12px !important;
    border: 1px solid var(--e-border) !important;
}

/* ============================================
   NO SINGLE-COLUMN GRIDS — ALL BREAKPOINTS
   Cards always sit side-by-side, minimum 2 cols
   ============================================ */

/* Default: auto-fit distributes columns proportionally
   based on container width and card content */
.cards-grid,
.features-grid,
.cards-grid-wide,
.cards-grid-physics,
.related-grid,
.feature-grid,
.component-grid,
.benefit-grid,
.process-boxes,
.trust-grid,
.content-grid,
.challenge-grid,
.solutions-grid,
.industry-grid,
.equipment-grid,
.comparison-grid,
.stats-row,
.industry-cards-grid,
.equipment-categories-grid,
.services-grid-top,
.services-grid-bottom,
.case-study-grid,
.resources-grid,
.feature-card-grid,
.treatment-row,
.butter-grid,
.fluid-grid,
.streams-grid,
.whey-content,
.grid-auto-200, .grid-auto-220, .grid-auto-240, .grid-auto-250,
.grid-auto-260, .grid-auto-280, .grid-auto-300, .grid-auto-320,
.grid-auto-150, .grid-auto-160, .grid-auto-400,
.grid-auto-280-15, .grid-auto-300-14, .grid-auto-260-14 {
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)) !important;
}

/* Explicit column grids keep exact counts on desktop */
.grid-2 { grid-template-columns: repeat(2, 1fr) !important; }
.grid-3 { grid-template-columns: repeat(3, 1fr) !important; }
.grid-4 { grid-template-columns: repeat(4, 1fr) !important; }
.cards-grid.grid-3 { grid-template-columns: repeat(3, 1fr); }

/* Tablet: 2 columns minimum, never collapse to 1 */
@media (max-width: 768px) {
    .cards-grid,
    .features-grid,
    .cards-grid-wide,
    .cards-grid-physics,
    .related-grid,
    .feature-grid,
    .component-grid,
    .benefit-grid,
    .process-boxes,
    .trust-grid,
    .content-grid,
    .challenge-grid,
    .solutions-grid,
    .industry-grid,
    .equipment-grid,
    .comparison-grid,
    .stats-row,
    .industry-cards-grid,
    .equipment-categories-grid,
    .services-grid-top,
    .services-grid-bottom,
    .case-study-grid,
    .resources-grid,
    .feature-card-grid,
    .treatment-row,
    .butter-grid,
    .fluid-grid,
    .streams-grid,
    .whey-content,
    .grid-auto-200, .grid-auto-220, .grid-auto-240, .grid-auto-250,
    .grid-auto-260, .grid-auto-280, .grid-auto-300, .grid-auto-320,
    .grid-auto-150, .grid-auto-160, .grid-auto-400,
    .grid-auto-280-15, .grid-auto-300-14, .grid-auto-260-14,
    .grid-3, .grid-4 {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    .grid-2 { grid-template-columns: repeat(2, 1fr) !important; }
    .hero-features { grid-template-columns: repeat(2, 1fr) !important; }
}

/* Mobile: still 2 columns side-by-side, cards shrink proportionally */
@media (max-width: 480px) {
    .cards-grid,
    .features-grid,
    .cards-grid-wide,
    .cards-grid-physics,
    .related-grid,
    .feature-grid,
    .component-grid,
    .benefit-grid,
    .process-boxes,
    .trust-grid,
    .content-grid,
    .challenge-grid,
    .solutions-grid,
    .industry-grid,
    .equipment-grid,
    .comparison-grid,
    .stats-row,
    .industry-cards-grid,
    .equipment-categories-grid,
    .services-grid-top,
    .services-grid-bottom,
    .case-study-grid,
    .resources-grid,
    .feature-card-grid,
    .treatment-row,
    .butter-grid,
    .fluid-grid,
    .streams-grid,
    .whey-content,
    .grid-auto-200, .grid-auto-220, .grid-auto-240, .grid-auto-250,
    .grid-auto-260, .grid-auto-280, .grid-auto-300, .grid-auto-320,
    .grid-auto-150, .grid-auto-160, .grid-auto-400,
    .grid-auto-280-15, .grid-auto-300-14, .grid-auto-260-14,
    .grid-2, .grid-3, .grid-4,
    .hero-features,
    .spec-grid,
    .stats-row {
        grid-template-columns: repeat(2, minmax(140px, 1fr)) !important;
    }
}

/* ---- Species Cards (Australian Cyanobacteria) ---- */
.species-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
    gap: 1.5rem;
    margin-top: 2rem;
}

.species-card {
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid var(--e-border);
    border-radius: var(--e-radius-lg);
    padding: 0;
    overflow: hidden;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.species-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--e-shadow-lg);
}

.species-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 1.25rem 1.5rem 0.75rem;
    background: linear-gradient(135deg, var(--e-surface) 0%, #fff 100%);
    border-bottom: 1px solid var(--e-border-light);
}

.species-header h3 {
    margin: 0;
    font-size: 1.15rem;
    font-weight: 600;
    color: var(--e-navy);
    line-height: 1.3;
}

.species-header h3 em {
    font-style: italic;
    color: var(--e-blue);
}

.species-icon {
    width: 44px;
    height: 44px;
    min-width: 44px;
    background: var(--e-blue);
    color: #fff;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
}

.species-meta {
    padding: 0.75rem 1.5rem;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.species-meta .badge {
    font-size: 0.8125rem;
    font-weight: 500;
    padding: 5px 12px;
    border-radius: 20px;
    border: 1px solid transparent;
}

.badge-danger {
    background: #fef2f2 !important;
    color: var(--e-error) !important;
    border-color: #fecaca !important;
}

.badge-warn {
    background: #fffbeb !important;
    color: var(--e-warning) !important;
    border-color: #fde68a !important;
}

.badge-info {
    background: #eff6ff !important;
    color: var(--e-blue) !important;
    border-color: #bfdbfe !important;
}

.adwg-callout {
    margin: 0 1.5rem 0.75rem;
    padding: 10px 14px;
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
    border-radius: var(--e-radius-md);
    font-size: 0.875rem;
    color: var(--e-text);
    line-height: 1.5;
}

.adwg-callout .adwg-label {
    display: inline-block;
    font-weight: 600;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--e-success);
    margin-right: 6px;
}

.species-body {
    padding: 0.75rem 1.5rem;
    flex-grow: 1;
}

.species-body p {
    margin: 0;
    font-size: 0.9375rem;
    line-height: 1.7;
    color: var(--e-text-secondary);
}

.species-body p .section-label {
    color: var(--e-navy);
    font-weight: 600;
    font-size: 0.8125rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.sensitivity-meter {
    padding: 1rem 1.5rem 1.25rem;
    background: var(--e-surface);
    border-top: 1px solid var(--e-border-light);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 12px;
}

.sensitivity-label {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--e-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.sensitivity-value {
    font-size: 0.875rem;
    font-weight: 700;
    margin-left: auto;
}

.sensitivity-bar {
    width: 100%;
    height: 6px;
    background: var(--e-border);
    border-radius: 3px;
    overflow: hidden;
    margin-top: 4px;
}

.sensitivity-fill {
    height: 100%;
    border-radius: 3px;
    transition: width 0.6s ease;
}

.sensitivity-very-high .sensitivity-value { color: var(--e-error); }
.sensitivity-very-high .sensitivity-fill { width: 100%; background: var(--e-error); }

.sensitivity-high .sensitivity-value { color: #ea580c; }
.sensitivity-high .sensitivity-fill { width: 80%; background: #ea580c; }

.sensitivity-moderate-high .sensitivity-value { color: var(--e-warning); }
.sensitivity-moderate-high .sensitivity-fill { width: 60%; background: var(--e-warning); }

.sensitivity-moderate .sensitivity-value { color: var(--e-blue); }
.sensitivity-moderate .sensitivity-fill { width: 40%; background: var(--e-blue); }

.sensitivity-low .sensitivity-value { color: var(--e-success); }
.sensitivity-low .sensitivity-fill { width: 20%; background: var(--e-success); }

@media (max-width: 768px) {
    .species-grid {
        grid-template-columns: 1fr;
    }
    .species-header h3 {
        font-size: 1.05rem;
    }
    .species-icon {
        width: 38px;
        height: 38px;
        min-width: 38px;
        font-size: 1rem;
    }
}

/* ---- Inline-style replacements (utility classes) ---- */

/* Text alignment + margin combos */
.text-center-mt-1_5 { text-align: center; margin-top: 1.5rem; }
.text-center-mt-2 { text-align: center; margin-top: 2rem; }
.text-center-mt-2_5 { text-align: center; margin-top: 2.5rem; }
.text-center-mt-3 { text-align: center; margin-top: 3rem; }
.text-center-mb-1 { text-align: center; margin-bottom: 1rem; }

/* Monospace / code */
.font-mono { font-family: monospace; }
.font-sans-normal { font-family: sans-serif; font-style: normal; }

/* Max-width centered */
.mw-780-auto { max-width: 780px; margin-left: auto; margin-right: auto; }
.mw-800-auto { max-width: 800px; margin-left: auto; margin-right: auto; }
.mw-880-auto { max-width: 880px; margin: 0 auto; }
.mw-900-auto { max-width: 900px; margin-left: auto; margin-right: auto; }
.mw-900-auto-mt-1_5 { max-width: 900px; margin-left: auto; margin-right: auto; margin-top: 1.5rem; }
.mw-900-auto-mt-2 { max-width: 900px; margin: 2rem auto 0; }

/* Font size + line-height */
.text-1_05-lh-1_8 { font-size: 1.05rem; line-height: 1.8; }
.text-1_05-lh-1_7 { font-size: 1.05rem; line-height: 1.7; }
.text-0_9375 { font-size: 0.9375rem; }
.text-0_9375-mt-1 { font-size: 0.9375rem; margin-top: 1rem; }
.text-0_9 { font-size: 0.9rem; }

/* Flex layouts */
.flex-center-gap-0_5 { display: flex; align-items: center; gap: 0.5rem; }
.flex-center-gap-0_625 { display: flex; align-items: center; gap: 0.625rem; }
.flex-center-gap-0_75 { display: flex; align-items: center; gap: 0.75rem; }
.flex-center-gap-1 { display: flex; align-items: center; gap: 1rem; }
.flex-center-gap-1_5 { display: flex; align-items: center; gap: 1.5rem; }

.flex-wrap-gap-0_6 { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.flex-wrap-gap-0_875 { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 0.875rem; }
.flex-wrap-gap-1 { display: flex; flex-wrap: wrap; gap: 1rem; }

/* Margin utilities */
.mt-0_75 { margin-top: 0.75rem; }
.mt-0_5 { margin-top: 0.5rem; }
.mb-0_75 { margin-bottom: 0.75rem; }
.mb-0_25 { margin-bottom: 0.25rem; }
.ml-2 { margin-left: 2rem; }
.ml-auto { margin-left: auto; }

/* Padding */
.p-1rem { padding: 1rem; }
.p-2rem { padding: 2rem; }
.p-2_5-0 { padding: 2.5rem 0; }
.pl-1_25 { padding-left: 1.25rem; }
.py-0_4-px-0_5 { padding: 0.4rem 0.5rem; }

/* Width / display */
.w-100-m-0 { width: 100%; margin: 0; }

/* Background + color combos */
.bg-error-light { background: #ffebee; color: #c62828; }
.bg-success-light { background: #e8f5e9; color: #2e7d32; }
.bg-warn-light { background: #fff8e1; font-weight: 600; }
.bg-info-light { background: #f0f7ff; border-left: 4px solid var(--primary-blue); }

/* Grid */
.grid-auto-260 { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.grid-auto-320 { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
.grid-3-900 { display: grid; grid-template-columns: repeat(3, 1fr); max-width: 900px; margin: 24px auto 0; }

/* Inline-flex button-like */
.inline-flex-center-gap-0_5-p-0_625-1_5 { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.625rem 1.5rem; }
.inline-flex-center-gap-0_625-p-0_625-1_5-0_75 { display: inline-flex; align-items: center; gap: 0.625rem; padding: 0.625rem 1.5rem 0.625rem 0.75rem; }

/* Shadows / filters */
.drop-shadow-sm { filter: drop-shadow(0 1px 2px rgba(0,0,0,0.25)); }

/* Specific color combos */
.text-navy-fw-600 { font-weight: 600; color: var(--primary-navy); }
.text-navy-fw-600-mb-0 { font-weight: 600; color: var(--primary-navy); margin-bottom: 0; }
.text-medium-0_9375 { font-size: 0.9375rem; color: var(--text-medium); }
.text-medium-1_05-lh-1_7 { font-size: 1.05rem; color: var(--text-medium); line-height: 1.7; }

/* White text on dark */
.text-white-85-mw-650 { color: rgba(255,255,255,0.85); max-width: 650px; margin: 0 auto 1.5rem; }

/* Min widths */
.min-w-180 { min-width: 180px; }

/* Box styling */
.box-no-shadow { box-shadow: none; }
.border-gray-1 { border: 1px solid var(--border-gray); }

/* Positioning */
.pos-rel-top-0-right-0-ml-auto-mb-0_75-w-fit { position: relative; top: 0; right: 0; margin-left: auto; margin-bottom: 0.75rem; width: fit-content; }

/* Gradient backgrounds */
.bg-gradient-blue-light { background: linear-gradient(135deg, #f0f7ff 0%, #e8f0f8 100%); }
.bg-gradient-surface { background: linear-gradient(180deg, #f8fafc 0%, #f0f4f8 100%); }
.bg-gradient-surface-darker { background: linear-gradient(180deg, #f0f4f8 0%, #e8eef4 100%); }
.bg-gradient-surface-flat { background: #f5f7fa; }
.bg-gradient-blue { background: linear-gradient(135deg, #1565c0 0%, #42a5f5 100%); }

/* Icon sizing */
.icon-1_5-blue { font-size: 1.5rem; color: var(--primary-blue); }
.icon-2_5-blue { font-size: 2.5rem; color: var(--primary-blue); }
.icon-1_75-white { font-size: 1.75rem; color: var(--white); }

/* Text alignment */
.text-left-mw-100-mb-2 { text-align: left; max-width: 100%; margin: 0 0 2rem; }

/* Card-like padding */
.p-2rem-rounded-12 { padding: 2rem; border-radius: 12px; }
.p-1rem-flex-col-h-100 { padding: 1rem; display: flex; flex-direction: column; height: 100%; }

/* Specific margin combos */
.m-0_75-0-box-none-border { margin: 0.75rem 0; box-shadow: none; border: 1px solid var(--border-gray); }

/* List reset */
.list-reset { list-style: none; padding: 0; }

/* Padding + margin combos */
.p-0_5-0-text-success-fw-600 { padding: 0.5rem 0; color: var(--success-green); font-weight: 600; }

/* Container max-width reset */
.mw-100-m-0 { max-width: 100%; margin: 0; }

/* Specific paddings for buttons */
.p-0_625-1_5-mh-52 { padding: 0.625rem 1.5rem; min-height: 52px; }
.p-0_625-1_5-0_75-mh-52 { padding: 0.625rem 1.5rem 0.625rem 0.75rem; min-height: 52px; }

/* Table */
.table-100-sm-m-0 { width: 100%; font-size: 0.875rem; margin: 0; }

/* Subpage card */
.subpage-card-inline {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  padding: 1rem;
  color: inherit;
  background: linear-gradient(135deg, #f0f7ff 0%, #e6f0ff 100%);
  border: 2px solid var(--primary-blue);
}

/* Icon circle 64 */
.icon-circle-64 {
  flex-shrink: 0;
  width: 64px;
  height: 64px;
  background: linear-gradient(135deg, var(--primary-blue) 0%, var(--primary-navy) 100%);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Specific margin/ padding */
.mt-0_5-text-sm { margin-top: 0.5rem; font-size: 0.875rem; }

/* Flex center justify center */
.flex-center-justify-center {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* White-space and text */
.text-center-mt-1 { text-align: center; margin-top: 1rem; }
.text-center-mt-1_5 { text-align: center; margin-top: 1.5rem; }
.text-center-mt-2 { text-align: center; margin-top: 2rem; }
.text-center-mt-2_5 { text-align: center; margin-top: 2.5rem; }
.text-center-mt-3 { text-align: center; margin-top: 3rem; }
/* ===== Classes added for containerized-systems.html inline style removal ===== */
.grid-2-gap-25-start-mb-25 { gap: 2.5rem; align-items: start; margin-bottom: 2.5rem; }
.section-image-reset { max-width: 100%; margin: 0; }
.img-rounded-12-shadow-sm { border-radius: 12px; box-shadow: 0 8px 30px rgba(0,0,0,0.12); }
.text-medium-mb-125-lh-17 { color: var(--text-medium); margin-bottom: 1.25rem; line-height: 1.7; }
.list-none-m-0-p-0-flex-col-gap-075 { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.75rem; }
.bg-gradient-daf { background: linear-gradient(135deg, #1ABC9C, #16A085); }
.bg-gradient-filter { background: linear-gradient(135deg, #27AE60, #1E8449); }
.border-left-violet { border-left: 4px solid #8B5CF6 !important; }
.border-left-amber { border-left: 4px solid #F59E0B !important; }
.border-left-navy { border-left: 4px solid var(--primary-navy) !important; }
.border-left-warning { border-left: 4px solid var(--warning-orange) !important; }


/* === Classes added for containerized-option-d-mbr.html inline style replacements === */
.text-mbr-mem { color: #5C6BC0; }
.bg-gradient-mbr-mem { background: linear-gradient(135deg,#5C6BC0,#3F51B5); }
.bg-gradient-mbr-aero { background: linear-gradient(135deg,#FF7043,#F4511E); }


/* ============================================
   INDEX.HTML INLINE STYLE EXTRACTIONS
   ============================================ */
.section-header-left { text-align: left; max-width: 100%; margin: 0 0 2rem; }
.img-error-placeholder { padding: 40px; }
.img-error-icon { font-size: 3rem; margin-bottom: 1rem; opacity: 0.5; }

.trust-badge > p { margin: 0; }
.eic-leg > p { margin: 0; }

/* ---- More utility classes for inline style replacements ---- */

.text-blue-1_25 { color: var(--primary-blue); font-size: 1.25rem; }
.card-white { background: var(--white); border: 1px solid var(--border-gray); border-radius: 12px; padding: 1.5rem; }
.badge-blue-sm { display: inline-block; padding: 4px 12px; background: var(--primary-light); color: var(--primary-blue); border-radius: 4px; font-size: 0.75rem; font-weight: 600; }
.grid-auto-200 { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem; }
.flex-wrap-gap-1-baseline { display: flex; flex-wrap: wrap; gap: 1rem; align-items: baseline; }
.p-2rem-rounded-12-border-gray { padding: 2rem; border-radius: 12px; border: 1px solid var(--border-gray); }
.mr-8-text-blue { margin-right: 8px; color: var(--primary-blue); }
.mw-500 { max-width: 500px; }
.mh-none { max-height: none; }
.mw-320 { max-width: 320px; }
.rounded-12-mt-0_5 { border-radius: 12px; margin-top: 0.5rem; }

/* Position absolute patterns */
.pos-abs-top-24-left-0-right-0-h-4 { position: absolute; top: 24px; left: 0; right: 0; height: 4px; }
.pos-rel-z-1 { position: relative; z-index: 1; }
.pos-abs-top-n12-right-16 { position: absolute; top: -12px; right: 16px; }

/* Border top */
.border-top-green-4 { border-top: 4px solid #28a745; }
.border-top-gold-4 { border-top: 4px solid var(--accent-gold); }
.border-top-blue-4 { border-top: 4px solid var(--primary-blue); }

/* Small font */
.text-0_7-rem { font-size: 0.7rem; }
.text-0_7-block { font-size: 0.7rem; display: block; font-weight: 400; opacity: 0.85; }

/* Inline block badges */
.badge-orange-sm { display: inline-block; background: #fff3e0; color: #e65100; padding: 0.15rem 0.5rem; border-radius: 4px; font-size: 0.75rem; font-weight: 600; }
.badge-blue-sm-2 { display: inline-block; background: #e3f2fd; color: #1565c0; padding: 0.15rem 0.5rem; border-radius: 4px; font-size: 0.75rem; font-weight: 600; }

/* Padding */
.p-0_5-0 { padding: 0.5rem 0; }
.p-0_4-0 { padding: 0.4rem 0; }
.p-0_3-0 { padding: 0.3rem 0; }

/* Services overview patterns */
.text-1_15-mw-700 { font-size: 1.15rem; max-width: 700px; }
.pt-1_5 { padding-top: 1.5rem; }
.bg-navy-gradient { padding: 1.5rem 0; background: linear-gradient(135deg, var(--primary-navy) 0%, #0d3a5c 100%); }
.bg-info-box { background: #f0f7ff; border-left: 4px solid var(--primary-blue); padding: 1rem 1.25rem; border-radius: 0 8px 8px 0; }
.align-start-gap-1_5 { align-items: start; gap: 1.5rem; }
.text-medium-lh-1_8-mb-0_75 { color: var(--text-medium); line-height: 1.8; margin-bottom: 0.75rem; }
.text-navy-m-1_5-0-1 { color: var(--primary-navy); margin: 1.5rem 0 1rem; }
.bg-gold-navy { background: var(--accent-gold); color: var(--primary-navy); border: none; }
.border-white-40 { border-color: rgba(255,255,255,0.4); color: var(--white); }

/* DAF unit patterns */
.mr-8-text-gold { margin-right: 8px; color: #c9a227; }
.text-1_0625-lh-1_7-medium-m-0 { font-size: 1.0625rem; line-height: 1.7; color: var(--text-medium); margin: 0; }
.grid-3-gap-1-mt-0_5 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin-top: 0.5rem; }
.grid-2-gap-0_75-mt-0_5 { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; margin-top: 0.5rem; }

/* Dairy patterns */
.text-orange-mb-1 { color: #e65100; margin-bottom: 1rem; }
.list-reset-0_875-orange { list-style: none; padding: 0; margin: 0; font-size: 0.875rem; color: #bf360c; }
.text-pink-mb-1 { color: #880e4f; margin-bottom: 1rem; }
.list-reset-0_875-pink { list-style: none; padding: 0; margin: 0; font-size: 0.875rem; color: #ad1457; }
.bg-navy-white { background: var(--primary-navy); padding: 1rem; color: white; }
.bg-blue-light-0_8125 { padding: 0.75rem; background: #e3f2fd; border-radius: 8px; font-size: 0.8125rem; }
.bg-green-white { background: var(--success-green); padding: 1rem; color: white; }
.bg-green-light-0_8125 { padding: 0.75rem; background: #e8f5e9; border-radius: 8px; font-size: 0.8125rem; }
.bg-red-light-8 { padding: 1rem; background: #ffebee; border-radius: 8px; }
.text-red-mb-0_5 { color: #c62828; margin-bottom: 0.5rem; }
.bg-amber-light-8 { padding: 1rem; background: #fff3e0; border-radius: 8px; }
.text-green-0_8125 { font-size: 0.8125rem; color: #388e3c; }
.text-green-0_8125-mb-0_5 { font-size: 0.8125rem; color: #388e3c; margin-bottom: 0.5rem; }
.text-red-mb-1 { color: #b71c1c; margin-bottom: 1rem; }
.list-reset-0_875-red { list-style: none; padding: 0; margin: 0; font-size: 0.875rem; color: #c62828; }
.text-green-dark-mb-1 { color: #1b5e20; margin-bottom: 1rem; }
.list-reset-0_875-green { list-style: none; padding: 0; margin: 0; font-size: 0.875rem; color: #2e7d32; }
.p-8-10-center-red { padding: 8px 10px; text-align: center; color: #c62828; }
.list-reset-0_875-green-2 { list-style: none; padding: 0; margin: 0; font-size: 0.875rem; color: #388e3c; }

/* Documentation patterns */
.flex-wrap-gap-3 { display: flex; flex-wrap: wrap; align-items: center; gap: 3rem; }
.flex-0-0-350 { flex: 0 0 350px; text-align: center; }
.text-white-70-0_75-italic { color: rgba(255,255,255,0.7); font-size: 0.75rem; margin-top: 0.75rem; font-style: italic; }
.text-medium-mw-600 { color: var(--text-medium); max-width: 600px; margin: 0 auto 1rem; }

/* Desalination patterns */
.mt-2-lh-1_7 { margin-top: 2rem; line-height: 1.7; }
.border-left-red-4 { border-left: 4px solid #e74c3c; }
.border-left-purple-4 { border-left: 4px solid #8e44ad; }
.border-left-gold-4 { border-left: 4px solid var(--accent-gold); }
.border-left-green-4 { border-left: 4px solid var(--success-green); }

/* Food patterns */
.mw-800-mt-2_5 { max-width: 800px; margin: 2.5rem auto 0; }
.lh-1_7-center-mb-0_75 { line-height: 1.7; text-align: center; margin-bottom: 0.75rem; }
.lh-1_7-mb-0_75 { line-height: 1.7; margin-bottom: 0.75rem; }
.lh-1_8-mb-1-pl-1_25 { line-height: 1.8; margin-bottom: 1rem; padding-left: 1.25rem; }
.lh-1_7-center { line-height: 1.7; text-align: center; }

/* More patterns */
.text-white-80-mw-600-auto { color: rgba(255,255,255,0.8); max-width: 600px; margin: 0 auto; }
.bg-white-10-gold { background: rgba(255,255,255,0.1); color: var(--accent-gold); }
.bg-white-10-mint { background: rgba(255,255,255,0.1); color: #6ee7b7; }
.text-center-medium-mt-1 { text-align: center; color: var(--text-medium); margin-top: 1rem; }
.bg-gradient-primary { background: linear-gradient(135deg, var(--primary-light) 0%, var(--primary-blue) 100%); }
.mw-900-mb-1 { max-width: 900px; margin-bottom: 1rem; }
.p-3-2-bg-gradient { text-align: center; padding: 3rem 2rem; }
.flex-gap-1-center-wrap { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }
.text-0_85-light-mt-0_5 { font-size: 0.85rem; color: var(--text-light); margin-top: 0.5rem; }
.text-center-light-0_8 { text-align: center; color: var(--text-light); font-size: 0.8rem; }
.mt-1_5-light-0_8 { margin-top: 1.5rem; color: var(--text-light); font-size: 0.8rem; }
.text-medium-m-0-0_9375 { color: var(--text-medium); font-size: 0.9375rem; margin: 0; }
.mw-800-mt-2-bg-info { max-width: 800px; margin: 2rem auto 0; background: #f0f7ff; }
.mt-1_5-p-1-bg-white { margin-top: 1.5rem; padding: 1rem; background: var(--white); }
.mt-2-p-1_25-info { margin-top: 2rem; padding: 1.25rem 1.5rem; border-left: 4px solid var(--primary-blue); }
.text-1_5-green-mb-1 { font-size: 1.5rem; color: var(--success-green); margin-bottom: 1rem; }
.text-0_75-light-mt-0_5 { font-size: 0.75rem; color: var(--text-light); margin-top: 0.5rem; }
.text-0_9375-lh-1_7-medium { font-size: 0.9375rem; line-height: 1.7; color: var(--text-medium); }
.inline-block-0_875-600 { display: inline-block; font-size: 0.875rem; font-weight: 600; }
.grid-1-2-gap-2 { display: grid; grid-template-columns: 1fr 2fr; gap: 2rem; align-items: start; }
.bg-blue-light-8 { background: #e3f2fd; border-left: 4px solid var(--primary-blue); }
.text-1_25-purple { font-size: 1.25rem; color: #9c27b0; }
.bg-blue-light-0_8125-2 { padding: 0.75rem; background: #e3f2fd; border-radius: 8px; font-size: 0.8125rem; }
.text-1_25-green { font-size: 1.25rem; color: #4caf50; }
.bg-amber-info { background: #fff3e0; border-left: 4px solid #ff9800; padding: 1rem; }
.text-red-mr-8 { color: #e74c3c; margin-right: 8px; }
.mt-1-lh-1_7 { margin-top: 1rem; line-height: 1.7; }
.mt-1_5-lh-1_7 { margin-top: 1.5rem; line-height: 1.7; }
.mt-0_5-pl-1_5 { margin-top: 0.5rem; padding-left: 1.5rem; }
.mt-1-medium { margin-top: 1rem; color: var(--text-medium); }
.bg-light-gray-p-1 { background: var(--light-gray); padding: 1rem; border-radius: 8px; }
.ml-1_5-mb-1-lh-1_8 { margin-left: 1.5rem; margin-bottom: 1rem; line-height: 1.8; }
.border-none-top-blue { border: none; border-top: 1px solid var(--primary-blue); margin: 1.5rem 0; }
.m-0_5-0-lh-1_7 { margin: 0.5rem 0 0; line-height: 1.7; }
.bg-white-8-p-1_25 { background: var(--white); border-radius: 8px; padding: 1.25rem; }
.mb-0_75-pl-1_25-lh-1_7 { margin-bottom: 0.75rem; padding-left: 1.25rem; line-height: 1.7; }
.mt-1-text-sm-light { margin-top: 1rem; font-size: 0.875rem; color: var(--text-light); }
.mb-1-text-sm-light { margin-bottom: 1rem; font-size: 0.875rem; color: var(--text-light); }
.mt-2-text-sm-light { margin-top: 2rem; font-size: 0.875rem; color: var(--text-light); }
.text-1_15-mt-2_5-mb-1 { font-size: 1.15rem; margin: 2.5rem 0 1rem; }
.mb-1_5 { margin-bottom: 1.5rem; }
.font-inherit { font-family: inherit; }
.bg-white-p-1_5 { background: var(--white); padding: 1.5rem; }
.text-1_5 { font-size: 1.5rem; }
.text-white-80-mw-700 { color: rgba(255,255,255,0.8); max-width: 700px; }
.font-mono-left-mt-1 { font-family: monospace; text-align: left; margin-top: 1rem; }
.inline-flex-center-gap-0_35 { display: inline-flex; align-items: center; gap: 0.35rem; }
.m-0-0-0_9375 { margin: 0; color: var(--text-medium); font-size: 0.9375rem; }


/* ============================================
   INDEX.HTML MISSING CLASS FIXES
   ============================================ */
.mt-2_25 { margin-top: 2.25rem; }
.btn-gold-custom { gap: 0.625rem; box-shadow: 0 6px 16px rgba(201,162,39,0.28); }

/* ---- Auto-generated utility classes for inline style replacements ---- */
.u-accent-gold-591030 { color: var(--accent-gold); margin-right: 8px }
/* removed: invalid auto-generated selector (unparseable, unreferenced) */
.u-bg-light-gray-fs1\.1r-mt1r-pad-br-tac-826eec { background: var(--light-gray); padding: 1rem; border-radius: 8px; margin-top: 1rem; text-align: center; font-family: monospace; font-size: 1.1rem }
.u-bg-primary-light-mb1r-pad-br-61f71f { background: var(--primary-light); border: 1px solid var(--primary-blue); border-radius: 8px; padding: 1rem; margin-bottom: 1rem }
/* removed: invalid auto-generated selector (unparseable, unreferenced) */
.u-bg-white-mb1r-pad-br-c5d591 { font-family: monospace; background: var(--white); padding: 1rem; border-radius: 6px; margin-bottom: 1rem }
.u-bg-white-mt1\.25r-pad-br-e3e32d { background: var(--white); border-radius: 8px; padding: 1.25rem; margin-top: 1.25rem; border-left: 4px solid var(--primary-blue) }
.u-bg-white-mt1\.5r-pad-br-a4e1a9 { margin-top: 1.5rem; padding: 1rem; background: var(--white); border-radius: 8px; border-left: 3px solid var(--accent-gold) }
.u-bg-white-mt2r-pad-br-753c4a { background: var(--white); border-radius: 12px; padding: 1rem; margin-top: 2rem; border: 1px solid var(--border-gray) }
.u-bg-white-pad-87e734 { background:var(--white); padding:1.5rem }
.u-bg-white-pad-b5a809 { position:sticky;top:70px;z-index:90;background:var(--white);border-bottom:1px solid var(--border-gray);padding:.75rem 0 }
.u-bg-white-pad-br-36a937 { background: var(--white); border-radius: 8px; padding: 1.25rem; border-left: 4px solid var(--success-green) }
.u-bg-white-pad-br-72c80a { background: var(--white); border-radius: 8px; padding: 1.25rem; border: 1px solid var(--border-gray) }
.u-bg-white-pad-br-86181a { font-family: monospace; background: var(--white); padding: 1rem; border-radius: 6px; margin: 1rem 0 }
.u-bg-white-pad-br-98839b { background:var(--white);border:1px solid var(--border-gray);border-left:4px solid #2a9d8f;border-radius:10px;padding:1.15rem 1.4rem;margin:1rem 0; }
.u-bg-white-pad-br-bfc0f2 { background: var(--white); border-left: 4px solid var(--primary-blue); padding: 1rem; border-radius: 0 6px 6px 0 }
.u-bg2a9d6f-45b66e { background:#2a9d6f;border:1px dashed #2a9d6f;height:0 }
.u-bge3f2fd-fs0\.75r-pad-br-4f3835 { padding: 0.75rem; background: #e3f2fd; border-radius: 8px; font-size: 0.75rem }
.u-bge3f2fd-pad-br-93e977 { background: #e3f2fd; border-left: 4px solid var(--primary-blue); padding: 1rem; border-radius: 0 8px 8px 0 }
.u-bge3f2fd-pad-br-fae42d { background: #e3f2fd; border-left: 4px solid var(--primary-blue); padding: 1rem 1.5rem; border-radius: 0 8px 8px 0 }
.u-bge8f5e9-fs0\.8125r-mt1r-pad-br-4f241a { margin-top: 1rem; padding: 0.75rem; background: #e8f5e9; border-radius: 8px; font-size: 0.8125rem }
.u-bge8f5e9-pad-br-b30c3e { padding: 1rem; background: #e8f5e9; border-radius: 8px }
.u-bgf4f8fc-mt1\.5r-pad-7162ed { margin-top:1.5rem;padding:1rem 1.25rem;border-left:4px solid var(--primary-blue);background:#f4f8fc }
.u-bgf4f8fc-mt2r-pad-64ba65 { margin-top:2rem;padding:1.25rem 1.5rem;border-left:4px solid var(--primary-blue);background:#f4f8fc }
.u-bgfff3e0-pad-br-21ca9b { background: #fff3e0; border-left: 4px solid #ff9800; padding: 1rem; border-radius: 0 8px 8px 0 }
.u-bgfff8e1-fs0\.8125r-mt1r-pad-br-2ad29b { margin-top: 1rem; padding: 0.75rem; background: #fff8e1; border-radius: 8px; font-size: 0.8125rem }
.u-block-br-a8305e { width: 100%;border-radius: 12px; box-shadow: 0 20px 60px rgba(0,0,0,0.15); display: block }
.u-block-fs\.7r-78099e { font-size:.7rem;display:block;font-weight:400;opacity:.85 }
.u-block-mw-50a6ca { max-width:100%;display:block }
.u-br-mw-7ff210 { width: 100%; max-width: 350px;border-radius: 8px; box-shadow: 0 4px 20px rgba(0,0,0,0.3) }
.u-c0055a5-fe6a0f { color: #0055a5; }
.u-c0055a5-fs0\.75r-6cf610 { font-size: 0.75rem; color: #0055a5; text-decoration: none; }
.u-c0055a5-fs0\.875r-mb4p-196459 { font-weight: 500; color: #0055a5; margin-bottom: 4px; font-size: 0.875rem; }
.u-c1565c0-fs2\.5r-mb1r-752290 { font-size:2.5rem;color:#1565c0;margin-bottom:1rem }
.u-c16a34a-deccf9 { color:#16a34a }
.u-c2ECC71-7961eb { color:#2ECC71 }
.u-c2a9d8f-555885 { color:#2a9d8f;margin-right:0.5rem }
.u-c2e7d32-fs2\.5r-mb1r-d41d55 { font-size:2.5rem;color:#2e7d32;margin-bottom:1rem }
.u-c34495e-da384b { color: #34495e }
.u-c4caf50-fs1\.25r-65ee60 { font-size: 1.25rem; color: #4caf50 }
.u-c607D8B-4b588e { color:#607D8B }
.u-c64748b-fs0\.75r-mb4p-3a8e24 { font-size: 0.75rem; color: #64748b; margin-bottom: 4px; }
/* removed: invalid auto-generated selector (unparseable, unreferenced) */
.u-c8d6e63-522e15 { color: #8d6e63; margin-right: 8px }
.u-c9c27b0-fs1\.25r-207794 { font-size: 1.25rem; color: #9c27b0 }
.u-cbf360c-fs0\.8125r-pad-001ed7 { list-style: none; padding: 0; margin: 0; font-size: 0.8125rem; color: #bf360c }
.u-cc62828-fs2\.5r-mb1r-f9f8d5 { font-size:2.5rem;color:#c62828;margin-bottom:1rem }
.u-cc9a227-a824bf { margin-right: 8px; color: #c9a227 }
.u-cdc2626-bc8099 { color:#dc2626 }
.u-ce74c3c-ad2f91 { color: #e74c3c }
.u-ce74c3c-ed9f8a { color: #e74c3c; margin-right: 8px }
.u-cf39c12-0b77d1 { color: #f39c12 }
.u-cf57c00-b21064 { color: #f57c00 }
.u-cf57f17-bgfff8e1-fs\.7r-pad-br-7f814a { font-size:.7rem;background:#fff8e1;color:#f57f17;padding:.15rem .4rem;border-radius:4px;margin-left:.5rem;font-weight:600 }
.u-cf9a825-fs2\.5r-mb1r-c05361 { font-size:2.5rem;color:#f9a825;margin-bottom:1rem }
.u-cff6b6b-7ba63b { color: #ff6b6b }
.u-cfff-6a0e68 { color: #fff; text-shadow: 0 0 2px #333; margin-right: 8px }
.u-flex-4fc296 { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap }
.u-fs\.875r-372994 { font-size:.875rem;line-height:2;padding-left:1.2rem;margin:0 }
.u-fs0\.8125r-pad-8ce0ef { list-style: none; padding: 0; margin: 0; font-size: 0.8125rem }
.u-fs0\.9375r-pad-cc4db6 { list-style: none; padding: 0; font-size: 0.9375rem; line-height: 1.8 }
.u-fs0\.95r-f9bacb { font-size:0.95rem;line-height:1.7; }
.u-fs0\.95r-mw-18da9d { font-size:0.95rem;line-height:1.7;max-width:800px;margin:0 auto 1.5rem; }
.u-fs0\.9r-a6ec3d { margin:0;font-size:0.9rem }
.u-fs1\.05r-tac-fb34e4 { text-align: center; font-family: monospace; font-size: 1.05rem }
.u-fs1\.0625r-mb1r-f8ff35 { font-size:1.0625rem;line-height:1.7; margin-bottom:1rem }
.u-fs1\.15r-bb29d1 { font-size:1.15rem;margin:2.5rem 0 1rem; }
.u-fs1\.15r-mw-db417d { font-size:1.15rem;max-width:700px; }
.u-fs1\.5r-343cb8 { font-size:1.5rem }
.u-fs1r-mb1r-38420d { font-family: monospace; font-size: 1rem; margin-bottom: 1rem }
.u-grad-10b6c5 { background: linear-gradient(135deg, var(--primary-light) 0%, #f0f7ff 100%); font-weight: 700 }
.u-grad-60fb66 { background:linear-gradient(135deg,#FF7043,#F4511E) }
.u-grad-a3597d { background:linear-gradient(135deg,#FFA726,#FB8C00) }
.u-grad-br-0d096f { position:absolute;top:24px;left:0;right:0;height:4px;background:linear-gradient(90deg,var(--primary-blue),var(--accent-gold));border-radius:2px;z-index:0 }
.u-grad-ecec4b { background:linear-gradient(135deg,#7F8C8D,#616A6B) }
.u-grad-pad-4588a8 { padding:1.5rem 0;background:linear-gradient(135deg, var(--primary-navy) 0%, #0d3a5c 100%); }
.u-grad-pad-br-01fa78 { background: linear-gradient(135deg, var(--primary-navy) 0%, #0d3a5c 100%); border-radius: 12px; padding: 16px }
.u-grad-pad-br-tac-9d7a38 { text-align:center;padding:3rem 2rem;background:linear-gradient(135deg,#f0f7ff 0%,#e8f4fd 100%);border-radius:16px;border:2px solid var(--primary-blue) }
.u-grid-655bd5 { display:grid;grid-template-columns:1fr 2fr;gap:2rem;align-items:start }
.u-grid-a165d7 { display:grid;grid-template-columns:repeat(4,1fr);gap:1rem }
.u-grid-mt1\.5r-3fb345 { display:grid;grid-template-columns:repeat(auto-fit,minmax(360px,1fr));gap:1.5rem;margin-top:1.5rem;align-items:start }
.u-inline-block-bgf5a623-2fb807 { display: inline-block; width: 80px; height: 2px; background: #f5a623; vertical-align: middle; margin-right: 8px }
.u-inline-block-bgf5a623-349f0e { display: inline-block; width: 80px; height: 2px; background: #f5a623; vertical-align: middle; margin-left: 8px }
.u-inline-block-c1565c0-bge3f2fd-fs\.8r-pad--a41158 { display:inline-block;background:#e3f2fd;color:#1565c0;padding:.15rem .5rem;border-radius:4px;font-size:.8rem;font-weight:600 }
.u-inline-block-ce65100-bgfff3e0-fs\.8r-pad--191e46 { display:inline-block;background:#fff3e0;color:#e65100;padding:.15rem .5rem;border-radius:4px;font-size:.8rem;font-weight:600 }
.u-inline-block-primary-blue-fs0\.875r-mb0\.2-28fef3 { display:inline-block;font-size:0.875rem;font-weight:600;color:var(--primary-blue);text-transform:uppercase;letter-spacing:0.05em;margin-bottom:0.25rem }
.u-inline-flex-primary-blue-fs0\.8125r-1a74b8 { display: inline-flex; align-items: center; gap: 0.35rem; color: var(--primary-blue); font-size: 0.8125rem; font-weight: 500; text-decoration: none }
.u-inline-flex-primary-blue-fs0\.8125r-mt0\.5-f75aef { display: inline-flex; align-items: center; gap: 0.35rem; color: var(--primary-blue); font-size: 0.8125rem; font-weight: 500; text-decoration: none; margin-top: 0.5rem }
.u-inline-flex-white-bg-primary-navy-pad-br-89d978 { display: inline-flex; align-items: center; gap: 0.5rem; background: var(--primary-navy); color: var(--white); padding: 0.75rem 1.25rem; border-radius: 8px; text-decoration: none; font-weight: 500; margin-left: 1rem }
.u-mb0\.5r-706bed { gap: 0.75rem; margin-bottom: 0.5rem }
.u-mb0\.75r-81ac77 { margin-bottom: 0.75rem; padding-left: 1.25rem; line-height: 1.8 }
.u-mb0\.75r-mw-056515 { margin-bottom: 0.75rem; line-height: 1.7; max-width: 900px }
.u-mb1\.5r-2da5d6 { margin-bottom:1.5rem; }
.u-mt0\.75r-5067ba { margin-top: 0.75rem; padding-left: 1.25rem; list-style: disc }
.u-mt1\.5r-c91260 { margin-top: 1.5rem; padding-left: 1.5rem; list-style: disc }
.u-mt1\.5r-mb1r-3ae63a { margin-top: 1.5rem; margin-bottom: 1rem }
.u-mt12p-a8325c { margin-top: 12px; padding-top: 12px; border-top: 1px solid #e2e8f0; }
.u-mt24p-5e029f { margin-top: 24px }
.u-mt3r-008fb5 { margin-top: 3rem; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) }
.u-mw-2bbd24 { max-width: 800px; margin-left: auto; margin-right: auto }
.u-mw-4c22b1 { max-width:800px; margin: 0 auto 1rem }
.u-mw-tac-e15612 { max-width: 900px; margin: 0 auto 1rem; text-align: center }
.u-mw-tac-f30fca { max-width: 900px; margin: 0 auto 1.5rem; text-align: center }
.u-mw-tal-0cfdaa { text-align:left; max-width:100%; margin:0 0 2rem }
.u-pad-10bc1b { padding: .4rem 0 }
.u-pad-26fe05 { padding: .5rem 0 }
.u-pad-ec4264 { padding: .3rem 0 }
.u-primary-blue-9a9385 { color: var(--primary-blue); text-decoration: none; font-weight: 500 }
.u-primary-blue-fs1r-fe8b8f { color:var(--primary-blue);margin-right:8px;font-size:1rem; }
.u-primary-navy-bg-accent-gold-8b30a4 { background:var(--accent-gold);color:var(--primary-navy);border:none; }
.u-primary-navy-bg-accent-gold-fs\.75r-pad-b-f11183 { position:absolute;top:-12px;right:16px;background:var(--accent-gold);color:var(--primary-navy);font-size:.75rem;font-weight:700;padding:.25rem .6rem;border-radius:4px }
.u-primary-navy-d2353c { margin: 2rem 0 0.75rem; color: var(--primary-navy) }
.u-primary-navy-fs1\.05r-b2239e { color:var(--primary-navy);margin:0 0 0.4rem;font-size:1.05rem; }
.u-primary-navy-mt2r-ddc800 { margin-top:2rem;color:var(--primary-navy) }
.u-primary-navy-mt2r-mb1r-b691a7 { margin-top: 2rem; margin-bottom: 1rem; color: var(--primary-navy) }
.u-primary-navy-tac-c390e9 { text-align: center; margin: 3rem 0 2rem; color: var(--primary-navy) }
.u-rgba-mb0\.75r-tac-939155 { text-align: center; color: rgba(255,255,255,0.8); margin-bottom: 0.75rem }
.u-rgba-mw-1d6472 { color: rgba(255,255,255,0.8); max-width: 600px; margin: 0 auto 1.5rem }
.u-style-1386d5 { margin:0 }
.u-style-2551c3 { border-left: 4px solid #8e44ad }
.u-style-25f940 { border-left: 4px solid var(--accent-gold) }
.u-style-339f0a { border: none; border-top: 1px solid var(--primary-blue); margin: 1rem 0; opacity: 0.3 }
.u-style-3f0f17 { border-top:4px solid var(--accent-gold); position:relative }
.u-style-58f21c { border-top:4px solid var(--primary-blue) }
.u-style-6c1eb2 { margin: 2rem 0 1rem }
.u-style-73fa63 { border-top:4px solid #28a745 }
.u-style-7593c3 { align-items:start; gap:1.5rem }
.u-style-7cc279 { font-family:inherit; }
.u-style-7dafbd { width: 48px }
.u-style-7db497 { border-left: 4px solid var(--success-green) }
.u-style-879382 { border-top: 3px solid var(--primary-blue) }
.u-style-94f23b { position:relative;z-index:1;grid-template-columns:repeat(auto-fit,minmax(280px,1fr)) }
.u-style-9b7031 { padding-top:1.5rem; }
.u-style-9d167b { border-top: 3px solid var(--accent-gold) }
.u-style-af3406 { margin-left:1rem }
.u-style-c6b624 { border-left: 4px solid #e74c3c }
.u-style-d1f473 { grid-template-columns: repeat(2, 1fr) }
.u-style-d7a512 { width: 60px }
.u-style-f6f742 { padding-left:1.5rem }
.u-success-green-8faa08 { color: var(--success-green) }
.u-success-green-fs1\.5r-mb0\.5r-5e86a8 { font-size: 1.5rem; color: var(--success-green); margin-bottom: 0.5rem }
.u-tac-55843f { margin:2rem 0 1rem; text-align:center }
.u-tar-28bbfa { text-align: right }
.u-text-dark-fs0\.95r-6a4d11 { margin:0;font-size:0.95rem;line-height:1.6;color:var(--text-dark) }
.u-text-light-fs0\.875r-mt1\.5r-c4b980 { margin-top: 1.5rem; color: var(--text-light); font-size: 0.875rem }
.u-text-light-fs0\.875r-mt1r-tac-62569a { text-align: center; color: var(--text-light); font-size: 0.875rem; margin-top: 1rem; font-style: italic }
.u-text-light-fs0\.875r-mt2r-mw-14eff5 { margin-top: 2rem; font-size: 0.875rem; color: var(--text-light); max-width: 800px; margin-left: auto; margin-right: auto }
.u-text-medium-bg-white-fs\.85r-pad-br-ac87dc { font-family: monospace; font-size: .85rem; background: var(--white); padding: 1rem; border-radius: 8px; border: 1px solid var(--border-gray); line-height: 1.8; color: var(--text-medium) }
.u-text-medium-bgf0f7ff-fs\.9r-pad-br-88de63 { background:#f0f7ff; border-left:4px solid var(--primary-blue); padding:1rem 1.25rem; border-radius:0 8px 8px 0; margin:1.5rem 0; font-size:.9rem; color:var(--text-medium) }
.u-text-medium-bgf0f7ff-fs0\.9r-pad-br-mw-d014bf { max-width: 800px; margin: 2rem auto 0; background: #f0f7ff; border-left: 4px solid var(--primary-blue); padding: 1rem 1.25rem; border-radius: 0 8px 8px 0; font-size: 0.9rem; color: var(--text-medium) }
.u-text-medium-e603a7 { color: var(--text-medium); margin: 0; line-height: 1.7 }
.u-text-medium-fs\.8r-mt\.5r-45365b { font-size:.8rem;color:var(--text-medium);margin-top:.5rem; }
.u-text-medium-fs0\.75r-tac-5f515e { text-align: center; margin: 1rem 0; font-size: 0.75rem; color: var(--text-medium) }
.u-text-medium-fs0\.8125r-mt1r-a194c6 { font-size: 0.8125rem; color: var(--text-medium); margin-top: 1rem }
.u-text-medium-fs0\.85r-7c9b80 { font-size:0.85rem;color:var(--text-medium); }
.u-text-medium-fs0\.85r-mt0\.5r-19a573 { font-size:0.85rem; color:var(--text-medium); margin-top:0.5rem; font-style:italic }
.u-text-medium-fs0\.9375r-mb0-1e1118 { font-size:0.9375rem;line-height:1.7;color:var(--text-medium);margin-bottom:0 }
.u-text-medium-fs0\.9375r-mt1r-aadfb7 { font-size: 0.9375rem; color: var(--text-medium); margin-top: 1rem }
.u-text-medium-fs0\.9375r-mt1r-tac-eaa108 { text-align: center; color: var(--text-medium); margin-top: 1rem; font-size: 0.9375rem }
.u-text-medium-mb0\.75r-9b1f53 { margin-bottom: 0.75rem; padding-left: 1.5rem; color: var(--text-medium); line-height: 1.7 }
.u-text-medium-mb1r-88a776 { margin-bottom: 1rem; color: var(--text-medium) }
.u-text-medium-mw-c33093 { max-width: 900px; margin: 0 auto 1rem; color: var(--text-medium) }
.u-text-medium-mw-tac-0aacfe { text-align: center; max-width: 800px; margin: 0 auto 1rem; color: var(--text-medium) }
.u-text-medium-mw-tac-3651ae { text-align: center; max-width: 600px; margin: 0 auto 1rem; color: var(--text-medium) }
.u-text-medium-mw-tac-46e051 { max-width: 900px; margin: 2rem auto; text-align: center; color: var(--text-medium) }
.u-text-medium-tac-4618c1 { text-align: center; color: var(--text-medium) }
.u-white-030356 { border-color:rgba(255,255,255,0.4);color:var(--white); }
.u-white-bg-success-green-496af6 { background: var(--success-green); color: white }
.u-white-grad-pad-632fd0 { background: linear-gradient(135deg, #ef6c00 0%, #ffb74d 100%); padding: 1rem; color: white }
/* ============================================
   SUPER-EXAMPLE.HTML INLINE-STYLE REPLACEMENTS
   ============================================ */

.code-navy-bold { color: var(--primary-navy); font-weight: 600; }

.card-bordered-flex { display: flex; flex-direction: column; height: 100%; }

.card-shadow-flex { display: flex; flex-direction: column; height: 100%; }

.min-h-220 { min-height: 220px; }

.tech-icon { width: 48px; height: 48px; background: var(--primary-light); border-radius: 12px; display: flex; align-items: center; justify-content: center; margin-bottom: 1rem; }

.icon-1-25x { font-size: 1.25rem; color: var(--primary-blue); }

.flex-align-center-gap-8 { display: flex; align-items: center; gap: 8px; }

.step-number-40 { width: 40px; height: 40px; background: var(--primary-blue); color: white; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 700; margin-bottom: 1rem; }

.resource-tag { display: inline-block; padding: 4px 12px; background: var(--primary-light); color: var(--primary-blue); border-radius: 4px; font-size: 0.75rem; font-weight: 500; margin-bottom: 0.75rem; }

.align-baseline { align-items: baseline; }

.max-w-none { max-width: none; }

.max-w-500 { max-width: 500px; }

.max-h-none { max-height: none; }

.max-w-320 { max-width: 320px; }

/* ---- Auto-generated utility classes for inline style replacements ---- */
.u-accent-gold-591030 { color: var(--accent-gold); margin-right: 8px }
/* removed: invalid auto-generated selector (unparseable, unreferenced) */
/* removed: invalid auto-generated selector (unparseable, unreferenced) */
.u-bg-white-pad-87e734 { background:var(--white); padding:1.5rem }
.u-bg-white-pad-br-98839b { background:var(--white);border:1px solid var(--border-gray);border-left:4px solid #2a9d8f;border-radius:10px;padding:1.15rem 1.4rem;margin:1rem 0; }
.u-bg2a9d6f-45b66e { background:#2a9d6f;border:1px dashed #2a9d6f;height:0 }
.u-bge3f2fd-pad-br-fae42d { background: #e3f2fd; border-left: 4px solid var(--primary-blue); padding: 1rem 1.5rem; border-radius: 0 8px 8px 0 }
.u-bgf4f8fc-mt1\.5r-pad-7162ed { margin-top:1.5rem;padding:1rem 1.25rem;border-left:4px solid var(--primary-blue);background:#f4f8fc }
.u-bgf4f8fc-mt2r-pad-64ba65 { margin-top:2rem;padding:1.25rem 1.5rem;border-left:4px solid var(--primary-blue);background:#f4f8fc }
.u-c1565c0-fs2\.5r-mb1r-752290 { font-size:2.5rem;color:#1565c0;margin-bottom:1rem }
.u-c16a34a-deccf9 { color:#16a34a }
.u-c2ECC71-7961eb { color:#2ECC71 }
.u-c2a9d8f-555885 { color:#2a9d8f;margin-right:0.5rem }
.u-c2e7d32-fs2\.5r-mb1r-d41d55 { font-size:2.5rem;color:#2e7d32;margin-bottom:1rem }
.u-c34495e-da384b { color: #34495e }
.u-c4caf50-fs1\.25r-65ee60 { font-size: 1.25rem; color: #4caf50 }
.u-c607D8B-4b588e { color:#607D8B }
/* removed: invalid auto-generated selector (unparseable, unreferenced) */
.u-c8d6e63-522e15 { color: #8d6e63; margin-right: 8px }
.u-c9c27b0-fs1\.25r-207794 { font-size: 1.25rem; color: #9c27b0 }
.u-cc62828-fs2\.5r-mb1r-f9f8d5 { font-size:2.5rem;color:#c62828;margin-bottom:1rem }
.u-cc9a227-a824bf { margin-right: 8px; color: #c9a227 }
.u-cdc2626-bc8099 { color:#dc2626 }
.u-ce74c3c-ad2f91 { color: #e74c3c }
.u-ce74c3c-ed9f8a { color: #e74c3c; margin-right: 8px }
.u-cf39c12-0b77d1 { color: #f39c12 }
.u-cf57c00-b21064 { color: #f57c00 }
.u-cf9a825-fs2\.5r-mb1r-c05361 { font-size:2.5rem;color:#f9a825;margin-bottom:1rem }
.u-cff6b6b-7ba63b { color: #ff6b6b }
.u-cfff-6a0e68 { color: #fff; text-shadow: 0 0 2px #333; margin-right: 8px }
.u-fs1\.05r-tac-fb34e4 { text-align: center; font-family: monospace; font-size: 1.05rem }
.u-fs1\.15r-bb29d1 { font-size:1.15rem;margin:2.5rem 0 1rem; }
.u-fs1\.15r-mw-db417d { font-size:1.15rem;max-width:700px; }
.u-fs1\.5r-343cb8 { font-size:1.5rem }
.u-grad-60fb66 { background:linear-gradient(135deg,#FF7043,#F4511E) }
.u-grad-a3597d { background:linear-gradient(135deg,#FFA726,#FB8C00) }
.u-grad-br-0d096f { position:absolute;top:24px;left:0;right:0;height:4px;background:linear-gradient(90deg,var(--primary-blue),var(--accent-gold));border-radius:2px;z-index:0 }
.u-grad-ecec4b { background:linear-gradient(135deg,#7F8C8D,#616A6B) }
.u-grad-pad-4588a8 { padding:1.5rem 0;background:linear-gradient(135deg, var(--primary-navy) 0%, #0d3a5c 100%); }
.u-grad-pad-br-01fa78 { background: linear-gradient(135deg, var(--primary-navy) 0%, #0d3a5c 100%); border-radius: 12px; padding: 16px }
.u-grid-655bd5 { display:grid;grid-template-columns:1fr 2fr;gap:2rem;align-items:start }
.u-grid-mt1\.5r-3fb345 { display:grid;grid-template-columns:repeat(auto-fit,minmax(360px,1fr));gap:1.5rem;margin-top:1.5rem;align-items:start }
.u-inline-block-primary-blue-fs0\.875r-mb0\.2-28fef3 { display:inline-block;font-size:0.875rem;font-weight:600;color:var(--primary-blue);text-transform:uppercase;letter-spacing:0.05em;margin-bottom:0.25rem }
.u-inline-flex-white-bg-primary-navy-pad-br-89d978 { display: inline-flex; align-items: center; gap: 0.5rem; background: var(--primary-navy); color: var(--white); padding: 0.75rem 1.25rem; border-radius: 8px; text-decoration: none; font-weight: 500; margin-left: 1rem }
.u-mb0\.5r-706bed { gap: 0.75rem; margin-bottom: 0.5rem }
.u-mb1\.5r-2da5d6 { margin-bottom:1.5rem; }
.u-mt24p-5e029f { margin-top: 24px }
.u-mt3r-008fb5 { margin-top: 3rem; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) }
.u-mw-2bbd24 { max-width: 800px; margin-left: auto; margin-right: auto }
.u-mw-4c22b1 { max-width:800px; margin: 0 auto 1rem }
.u-mw-tal-0cfdaa { text-align:left; max-width:100%; margin:0 0 2rem }
.u-primary-blue-fs1r-fe8b8f { color:var(--primary-blue);margin-right:8px;font-size:1rem; }
.u-primary-navy-bg-accent-gold-8b30a4 { background:var(--accent-gold);color:var(--primary-navy);border:none; }
.u-style-2551c3 { border-left: 4px solid #8e44ad }
.u-style-25f940 { border-left: 4px solid var(--accent-gold) }
.u-style-3f0f17 { border-top:4px solid var(--accent-gold); position:relative }
.u-style-58f21c { border-top:4px solid var(--primary-blue) }
.u-style-73fa63 { border-top:4px solid #28a745 }
.u-style-7593c3 { align-items:start; gap:1.5rem }
.u-style-7cc279 { font-family:inherit; }
.u-style-7db497 { border-left: 4px solid var(--success-green) }
.u-style-879382 { border-top: 3px solid var(--primary-blue) }
.u-style-94f23b { position:relative;z-index:1;grid-template-columns:repeat(auto-fit,minmax(280px,1fr)) }
.u-style-9b7031 { padding-top:1.5rem; }
.u-style-9d167b { border-top: 3px solid var(--accent-gold) }
.u-style-af3406 { margin-left:1rem }
.u-style-c6b624 { border-left: 4px solid #e74c3c }
.u-style-d1f473 { grid-template-columns: repeat(2, 1fr) }
.u-success-green-8faa08 { color: var(--success-green) }
.u-text-light-fs0\.875r-mt2r-mw-14eff5 { margin-top: 2rem; font-size: 0.875rem; color: var(--text-light); max-width: 800px; margin-left: auto; margin-right: auto }
.u-text-medium-bgf0f7ff-fs\.9r-pad-br-88de63 { background:#f0f7ff; border-left:4px solid var(--primary-blue); padding:1rem 1.25rem; border-radius:0 8px 8px 0; margin:1.5rem 0; font-size:.9rem; color:var(--text-medium) }
.u-text-medium-bgf0f7ff-fs0\.9r-pad-br-mw-d014bf { max-width: 800px; margin: 2rem auto 0; background: #f0f7ff; border-left: 4px solid var(--primary-blue); padding: 1rem 1.25rem; border-radius: 0 8px 8px 0; font-size: 0.9rem; color: var(--text-medium) }
.u-text-medium-fs0\.85r-7c9b80 { font-size:0.85rem;color:var(--text-medium); }
.u-text-medium-fs0\.85r-mt0\.5r-19a573 { font-size:0.85rem; color:var(--text-medium); margin-top:0.5rem; font-style:italic }
.u-text-medium-mw-tac-46e051 { max-width: 900px; margin: 2rem auto; text-align: center; color: var(--text-medium) }
.u-white-030356 { border-color:rgba(255,255,255,0.4);color:var(--white); }
/* ===== Inline-to-CSS conversion classes ===== */

/* Icon circles with specific backgrounds */
.icon-circle-green { width: 48px; height: 48px; background: #28a745; color: #fff; border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.icon-circle-gold { width: 48px; height: 48px; background: var(--accent-gold); color: var(--primary-navy); border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.icon-circle-blue { width: 48px; height: 48px; background: var(--primary-blue); color: #fff; border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.icon-circle-success { width: 45px; height: 45px; background: var(--success-green); color: white; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 0.5rem; font-weight: 700; }
.icon-circle-success-lg { width: 50px; height: 50px; background: var(--success-green); color: white; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 0.5rem; font-weight: 700; }

/* Challenge / consideration card icon wrappers */
.challenge-icon-wrap { width: 50px; height: 50px; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin-bottom: 1rem; }
.challenge-icon-wrap-purple { background: #f3e5f5; }
.challenge-icon-wrap-green { background: #e8f5e9; }

/* Info / highlight boxes */
.info-box-gradient { background: linear-gradient(135deg, #f0f7ff 0%, #fff 100%); border: 1px solid #e2e8f0; border-radius: 12px; padding: 1.25rem 0.75rem; text-align: center; border-left: 4px solid #00529b; }
.info-box-gradient-blue { background: linear-gradient(135deg, #f0f7ff 0%, #e8f0f8 100%); border-radius: 12px; padding: 2rem; border-left: 4px solid var(--primary-blue); margin-bottom: 1.5rem; }
.info-box-blue-light { margin-top: 2rem; padding: 1.5rem; background: linear-gradient(135deg, #f0f7ff 0%, #e8f4fc 100%); border-radius: var(--radius-lg); border: 1px solid rgba(0,102,204,0.1); }

/* Step badges */
.step-badge-blue-lg { width: 48px; height: 48px; background: var(--primary-blue); color: #fff; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 700; margin-bottom: 1rem; }
.step-badge-gold-lg { width: 48px; height: 48px; background: var(--accent-gold); color: var(--primary-navy); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 700; margin-bottom: 1rem; }
.step-badge-green-lg { width: 48px; height: 48px; background: #28a745; color: #fff; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 700; margin-bottom: 1rem; }

/* Subpage card icon */
.subpage-card-icon { flex-shrink: 0; width: 64px; height: 64px; background: linear-gradient(135deg, var(--primary-blue) 0%, var(--primary-navy) 100%); border-radius: 12px; display: flex; align-items: center; justify-content: center; }

/* Hero overlay gradient */
.hero-overlay-dark { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(180deg, rgba(10,37,64,0.7) 0%, rgba(10,37,64,0.5) 50%, rgba(10,37,64,0.8) 100%); }

/* Map markers */
.map-marker-blue { width: 20px; height: 20px; background: #0055a5; border-radius: 50%; border: 3px solid white; box-shadow: 0 2px 5px rgba(0,0,0,0.3); }
.map-marker-red { width: 20px; height: 20px; background: #dc2626; border-radius: 50%; border: 3px solid white; box-shadow: 0 2px 5px rgba(0,0,0,0.3); }

/* Norwegian flag (enhanced) */
.flag-no-enhanced { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(180deg, #02529c 40%, #fff 40%, #fff 50%, #dc1e35 50%, #dc1e35 60%, #fff 60%, #fff 70%, #02529c 70%); }

/* Flow diagram overlay positioning */
.flow-overlay { position: absolute; display: block; text-decoration: none; transition: all 0.3s ease; }

/* Image responsive */
.img-responsive { max-width: 100%; height: auto; }

/* Floating label (used in daf-unit.html) */
.floating-label { position: absolute; bottom: -16px; left: 50%; transform: translateX(-50%); background: linear-gradient(135deg, #00529b 0%, #003d73 100%); color: #fff; padding: 10px 28px; border-radius: 8px; font-size: 0.875rem; font-weight: 600; box-shadow: 0 8px 24px rgba(0,82,155,0.35); white-space: nowrap; }

/* ============================================
   PAGE INTRO BAND — short "what this page shows & why"
   Reusable lead band placed directly under a hero.
   ============================================ */
.page-intro-band {
    background: linear-gradient(160deg, #ffffff 0%, #eef5fc 100%);
    border-bottom: 1px solid var(--border-gray);
}
.page-intro-band .container {
    max-width: 1000px;
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 1.25rem 1.5rem;
    align-items: center;
    padding-top: 2.25rem;
    padding-bottom: 2.25rem;
}
.page-intro-band .intro-mark {
    flex: none;
    width: 58px;
    height: 58px;
    border-radius: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    color: var(--primary-blue);
    background: linear-gradient(160deg, #eaf3fc 0%, #d6e9fb 100%);
    border: 1px solid #cfe2f5;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.7);
}
.page-intro-band .intro-body { min-width: 0; }
.page-intro-band .intro-body h2 {
    margin: 0 0 .4rem;
    font-size: 1.2rem;
    color: var(--primary-navy);
}
.page-intro-band .intro-body p {
    margin: 0;
    font-size: 1rem;
    line-height: 1.65;
    color: var(--text-medium);
}
.page-intro-band .intro-body p + p { margin-top: .6rem; }
.page-intro-band .intro-body strong { color: var(--primary-navy); }
@media (max-width: 600px) {
    .page-intro-band .container { grid-template-columns: 1fr; }
    .page-intro-band .intro-mark { width: 48px; height: 48px; font-size: 1.25rem; }
}

/* ============================================
   SITWIDE: White text on all blue/navy backgrounds
   ============================================ */

/* Base containers with blue/navy backgrounds */
[class*="bg-navy"],
[class*="bg-gradient-navy"],
[class*="bg-gradient-blue"],
[class*="bg-brand-blue"],
[class*="bg-primary-navy"],
[class*="bg-dark"],
.dimension-highlight,
[data-bg="navy"],
[data-bg="blue"] {
    color: #ffffff !important;
}

/* All common text children */
[class*="bg-navy"] h1, [class*="bg-navy"] h2, [class*="bg-navy"] h3, [class*="bg-navy"] h4, [class*="bg-navy"] h5, [class*="bg-navy"] h6,
[class*="bg-navy"] p, [class*="bg-navy"] span, [class*="bg-navy"] li, [class*="bg-navy"] label, [class*="bg-navy"] small,
[class*="bg-gradient-navy"] h1, [class*="bg-gradient-navy"] h2, [class*="bg-gradient-navy"] h3, [class*="bg-gradient-navy"] h4, [class*="bg-gradient-navy"] h5, [class*="bg-gradient-navy"] h6,
[class*="bg-gradient-navy"] p, [class*="bg-gradient-navy"] span, [class*="bg-gradient-navy"] li, [class*="bg-gradient-navy"] label, [class*="bg-gradient-navy"] small,
[class*="bg-gradient-blue"] h1, [class*="bg-gradient-blue"] h2, [class*="bg-gradient-blue"] h3, [class*="bg-gradient-blue"] h4, [class*="bg-gradient-blue"] h5, [class*="bg-gradient-blue"] h6,
[class*="bg-gradient-blue"] p, [class*="bg-gradient-blue"] span, [class*="bg-gradient-blue"] li, [class*="bg-gradient-blue"] label, [class*="bg-gradient-blue"] small,
[class*="bg-brand-blue"] h1, [class*="bg-brand-blue"] h2, [class*="bg-brand-blue"] h3, [class*="bg-brand-blue"] h4, [class*="bg-brand-blue"] h5, [class*="bg-brand-blue"] h6,
[class*="bg-brand-blue"] p, [class*="bg-brand-blue"] span, [class*="bg-brand-blue"] li, [class*="bg-brand-blue"] label, [class*="bg-brand-blue"] small,
[class*="bg-primary-navy"] h1, [class*="bg-primary-navy"] h2, [class*="bg-primary-navy"] h3, [class*="bg-primary-navy"] h4, [class*="bg-primary-navy"] h5, [class*="bg-primary-navy"] h6,
[class*="bg-primary-navy"] p, [class*="bg-primary-navy"] span, [class*="bg-primary-navy"] li, [class*="bg-primary-navy"] label, [class*="bg-primary-navy"] small,
[class*="bg-dark"] h1, [class*="bg-dark"] h2, [class*="bg-dark"] h3, [class*="bg-dark"] h4, [class*="bg-dark"] h5, [class*="bg-dark"] h6,
[class*="bg-dark"] p, [class*="bg-dark"] span, [class*="bg-dark"] li, [class*="bg-dark"] label, [class*="bg-dark"] small,
.dimension-highlight h1, .dimension-highlight h2, .dimension-highlight h3, .dimension-highlight h4, .dimension-highlight h5, .dimension-highlight h6,
.dimension-highlight p, .dimension-highlight span, .dimension-highlight li, .dimension-highlight label, .dimension-highlight small,
[data-bg="navy"] h1, [data-bg="navy"] h2, [data-bg="navy"] h3, [data-bg="navy"] h4, [data-bg="navy"] h5, [data-bg="navy"] h6,
[data-bg="navy"] p, [data-bg="navy"] span, [data-bg="navy"] li, [data-bg="navy"] label, [data-bg="navy"] small,
[data-bg="blue"] h1, [data-bg="blue"] h2, [data-bg="blue"] h3, [data-bg="blue"] h4, [data-bg="blue"] h5, [data-bg="blue"] h6,
[data-bg="blue"] p, [data-bg="blue"] span, [data-bg="blue"] li, [data-bg="blue"] label, [data-bg="blue"] small {
    color: #ffffff !important;
}

/* Icons inside blue backgrounds */
[class*="bg-navy"] i.fas, [class*="bg-navy"] i.fab, [class*="bg-navy"] i.far,
[class*="bg-gradient-navy"] i.fas, [class*="bg-gradient-navy"] i.fab, [class*="bg-gradient-navy"] i.far,
[class*="bg-gradient-blue"] i.fas, [class*="bg-gradient-blue"] i.fab, [class*="bg-gradient-blue"] i.far,
[class*="bg-brand-blue"] i.fas, [class*="bg-brand-blue"] i.fab, [class*="bg-brand-blue"] i.far,
[class*="bg-primary-navy"] i.fas, [class*="bg-primary-navy"] i.fab, [class*="bg-primary-navy"] i.far,
[class*="bg-dark"] i.fas, [class*="bg-dark"] i.fab, [class*="bg-dark"] i.far,
.dimension-highlight i.fas, .dimension-highlight i.fab, .dimension-highlight i.far,
[data-bg="navy"] i.fas, [data-bg="navy"] i.fab, [data-bg="navy"] i.far,
[data-bg="blue"] i.fas, [data-bg="blue"] i.fab, [data-bg="blue"] i.far {
    color: #ffffff !important;
}

/* ===== theme-light.css ===== */
/* =====================================================================
   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-card .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;
}

/* Inline "Full Compliance Available" badge in a country/section header.
   The global .cert-badge rules (absolute-positioned 80x80 blue square) are
   meant for .cert-card only; here the badge must stay a neat in-flow pill. */
.country-header .cert-badge {
  position: static !important;
  transform: none !important;
  top: auto !important; bottom: auto !important; left: auto !important; right: auto !important;
  width: auto !important;
  height: auto !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.45rem !important;
  padding: 0.4rem 0.85rem !important;
  border-radius: 20px !important;
  white-space: nowrap !important;
  text-align: left !important;
  font-size: 0.78rem !important;
  font-weight: 600 !important;
  line-height: 1.2 !important;
  background: #e8f3ec !important;
  color: #0a2540 !important;
  box-shadow: none !important;
}
.country-header .cert-badge i {
  color: #1a8f4c !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,
.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,
.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;
  }
}

/* ===== layout-2col.css ===== */
/* =====================================================================
   2-COLUMN LAYOUT DISCIPLINE  (sitewide, tune here)
   Goal: no content area renders as a lone single full-width column.
   - Existing card grids are kept multi-column and never collapse to 1.
   - A section that holds only a standalone run of prose flows into two
     readable columns (the "lots of text → adjust" case).
   - Section headings/intros span both columns so they read normally.
   All of this is layered on top of main.css and is desktop-only; on phones
   everything stacks to a single column for readability.
   ===================================================================== */

/* =====================================================================
   GUARANTEED SPACING between containers — horizontal AND vertical, every
   breakpoint. No two cards/containers should ever touch. Sitewide; tune the
   one value here to change all gaps at once. (No !important, so a section that
   deliberately sets a different gap utility can still override it.)
   ===================================================================== */
.cards-grid,
.card-grid,
.content-grid,
.feature-card-grid,
.features-grid,
.grid,
[class*='grid-'],
.industry-cards-grid,
.equipment-categories-grid,
.services-grid-top,
.services-grid-bottom,
.resources-grid,
.stats-grid,
.stat-grid,
.metrics-grid,
.proposals-grid,
.symbol-grid,
.two-col-split {
  gap: 24px;
}

@media (min-width: 920px) {
  /* 1) Grids must present at least two columns on desktop ------------- */
  .cards-grid,
  .content-grid,
  .grid,
  .grid-2,
  .features-grid,
  .resources-grid,
  .services-grid-top,
  .services-grid-bottom,
  .equipment-categories-grid,
  .industry-cards-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    display: grid;
  }
  .grid-3,
  .content-grid.grid-3,
  .grid.grid-3,
  .cards-grid.grid-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .grid-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  /* Auto-fit grids: guarantee a sensible minimum track so they pair up. */
  .cards-grid.grid-auto,
  .grid-auto-250 {
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  }

  /* 1b) BARE CARDS WITH NO GRID WRAPPER --------------------------------
     Many templated sections drop .card blocks straight into .container with
     no grid, so they stack as full-width rows. Wherever a container holds two
     or more such cards, lay them out in a responsive multi-column grid; the
     section header / intro / lone non-card blocks span the full width. */
  .section .container:has(> .card ~ .card),
  .section .container:has(> .feature-card ~ .feature-card),
  .section .container:has(> .product-card ~ .product-card),
  .section .container:has(> .service-card ~ .service-card),
  .section .container:has(> .resource-card ~ .resource-card),
  .section .container:has(> .method-card ~ .method-card),
  .section .container:has(> .feature-item ~ .feature-item) {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
    gap: 28px;
    align-items: stretch;
  }
  /* Non-card direct children (headers, intros, buttons) span the full row. */
  .section .container:has(> .card ~ .card) > :not(.card),
  .section .container:has(> .feature-card ~ .feature-card) > :not(.feature-card),
  .section .container:has(> .product-card ~ .product-card) > :not(.product-card),
  .section .container:has(> .service-card ~ .service-card) > :not(.service-card),
  .section .container:has(> .resource-card ~ .resource-card) > :not(.resource-card),
  .section .container:has(> .method-card ~ .method-card) > :not(.method-card),
  .section .container:has(> .feature-item ~ .feature-item) > :not(.feature-item) {
    grid-column: 1 / -1;
  }

  /* 2) Standalone prose sections → two readable columns --------------- */
  /* Target a .container that holds consecutive paragraphs and is NOT a
     grid/flex layout or a media/diagram/form section. */
  .section .container:has(> p + p):not(:has(.cards-grid)):not(:has(.grid)):not(:has(.content-grid)):not(:has(.grid-2)):not(:has(.grid-3)):not(:has(.eic-wrapper)):not(:has(form)):not(:has(table)):not(:has(img)) {
    column-count: 2;
    column-gap: 48px;
  }
  /* Keep each block intact and let headers/intros span the full width. */
  .section .container:has(> p + p) > * {
    break-inside: avoid;
  }
  .section .container:has(> p + p) > h1,
  .section .container:has(> p + p) > h2,
  .section .container:has(> p + p) > h3,
  .section .container:has(> p + p) > .section-header,
  .section .container:has(> p + p) > .section-header-flex,
  .section .container:has(> p + p) > .lead,
  .section .container:has(> p + p) > .view-all-link,
  .section .container:has(> p + p) > .btn,
  .section .container:has(> p + p) > .case-study-buttons {
    column-span: all;
  }

  /* 3) A section that contains a single lone card/CTA gets centred and
        capped so it never stretches edge-to-edge as one block. */
  .section .container > .card:only-child,
  .section .container > .system-cta-card:only-child {
    max-width: 920px;
    margin-left: auto;
    margin-right: auto;
  }
}

/* =====================================================================
   VERTICAL BREATHING ROOM  (sitewide, tune here)
   No container should butt up against the next one. The main offender is a
   compact hero that carries feature tiles: its bottom padding is too small,
   so the tiles crowd the following section. Give every such hero comfortable
   bottom room, on every breakpoint.
   ===================================================================== */
.hero:has(.hero-features),
.hero-small:has(.hero-features),
.hero-bg:has(.hero-features),
.product-hero:has(.hero-features),
.tech-hero:has(.hero-features),
.case-study-hero:has(.hero-features) {
  padding-bottom: 72px !important;
}

/* The feature grid itself keeps a little space below it as a second guard. */
.hero-features {
  margin-bottom: 0.5rem;
}

/* Uniform vertical rhythm so sections/containers never touch the next area.
   (pb-0 / pt-0 utility sections keep their intentional seamless joins because
   those selectors are more specific.) */
.section,
.cta-section,
.compliance-section,
.case-study-section,
.process-section,
section[class*='section'] {
  padding-top: clamp(40px, 4.5vw, 64px);
  padding-bottom: clamp(40px, 4.5vw, 64px);
}
.section > .container > .cards-grid,
.section > .container > .content-grid,
.section > .container > .features-grid {
  margin-bottom: 4px;
}

/* The footer must never butt up against the content above it, on any page
   (e.g. privacy-policy where it was touching the industry tags). */
.footer {
  margin-top: 56px !important;
}
#main-content > :last-child {
  margin-bottom: 0;
}


/* ===== app.css ===== */
/* App-level helpers — keeps anything React-specific out of the component CSS. */

.route-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 60vh;
  color: #6b7d8f;
  font-size: 1rem;
}

/* The content wrapper is a transparent pass-through so the preserved page
   sections keep their own full-bleed layout. */
.page-content {
  display: block;
}

/* =====================================================================
   INDEX-PAGE WATER BACKGROUND (test)
   The index page gets a fixed water background. A light-blue gradient is the
   fallback so it works before you add the photo. To use your water image,
   save it to app/public/images/water-bg.jpg (the gradient sits under it).
   On the index, the coloured strips/sections go slightly transparent so the
   water shows through subtly.
   ===================================================================== */
body.is-home {
  background-color: #eef5fc;
  background-image:
    linear-gradient(180deg, rgba(255, 255, 255, 0.6) 0%, rgba(232, 242, 253, 0.35) 45%, rgba(207, 227, 246, 0.5) 100%),
    url('/images/water-bg.jpg');
  background-size: cover, cover;
  background-position: center top, center top;
  background-repeat: no-repeat, no-repeat;
  background-attachment: fixed, fixed;
}
/* Let sections breathe over the water: light sections become slightly
   translucent on the index only. */
body.is-home .section-light,
body.is-home .section {
  background-color: rgba(255, 255, 255, 0.72) !important;
}
body.is-home section.hero-bg {
  /* keep the hero photo, but allow it as-is */
}
/* Coloured strips (feature-card title bars) — slightly transparent over the
   water background, but only slightly. */
body.is-home .feature-card {
  background: rgba(255, 255, 255, 0.78) !important;
}
body.is-home .feature-card :is(h3, h4) {
  opacity: 0.9;
}

/* =====================================================================
   INDEX-ONLY rotating line-art diagram background on the 3rd section.
   Text-free black graphics (diagram.svg) slowly rotating behind the content.
   ===================================================================== */
body.is-home #main-content > div > section:nth-child(3) {
  position: relative;
  overflow: hidden;
}
body.is-home #main-content > div > section:nth-child(3) > * {
  position: relative;
  z-index: 1;
}
body.is-home #main-content > div > section:nth-child(3)::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 150vmax;
  height: 150vmax;
  transform: translate(-50%, -50%);
  background: url('/images/diagram.svg') center / contain no-repeat;
  opacity: 0.06;
  pointer-events: none;
  z-index: 0;
  animation: rbDiagramSpin 120s linear infinite;
}
@keyframes rbDiagramSpin {
  from { transform: translate(-50%, -50%) rotate(0deg); }
  to { transform: translate(-50%, -50%) rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
  body.is-home #main-content > div > section:nth-child(3)::before {
    animation: none;
  }
}

/* =====================================================================
   METRO & TUNNELLING case study — isometric urban-diagram backdrop.
   The main content section sits over a faint, large watermark of the
   Västerås-style travel-centre diagram. A soft white veil keeps the text
   crisp. To activate, save the image to:
       app/public/images/metro-tunnelling-bg.jpg
   Until then a light blue-grey gradient stands in.
   ===================================================================== */
/* The 3rd <section> is the area below the main overview (#1 hero, #2 overview,
   #3 "Related Case Studies"). It carries the diagram backdrop. */
body.is-metro-tunnel #main-content > div > section:nth-of-type(3) {
  position: relative;
  background-color: #f4f8fc !important;
  background-image:
    linear-gradient(180deg, rgba(255, 255, 255, 0.9) 0%, rgba(244, 248, 252, 0.82) 100%),
    url('/images/metro-tunnelling-bg.jpg') !important;
  background-size: cover, cover !important;
  background-position: center, center !important;
  background-repeat: no-repeat, no-repeat !important;
}
/* Keep the section's own content above the backdrop. */
body.is-metro-tunnel #main-content > div > section:nth-of-type(3) > * {
  position: relative;
  z-index: 1;
}

/* =====================================================================
   CONTACT PAGE — "Our Global Presence" world-map backdrop on the white
   content area (the first section after the hero). Save the pasted graphic
   to: app/public/images/global-presence-bg.jpg
   A soft white veil keeps the contact details/form readable on top.
   ===================================================================== */
body.is-contact #main-content > div > section:nth-of-type(2) {
  position: relative;
  background-color: #f6f9fc;
  background-image:
    linear-gradient(180deg, rgba(255, 255, 255, 0.88) 0%, rgba(246, 249, 252, 0.8) 100%),
    url('/images/global-presence-bg.jpg');
  background-size: cover, cover;
  background-position: center, center;
  background-repeat: no-repeat, no-repeat;
}
body.is-contact #main-content > div > section:nth-of-type(2) > * {
  position: relative;
  z-index: 1;
}

/* Shared "Industries We Serve" pill band above the footer (every page). */
.industries-band {
  padding: 36px 0 40px;
  /* Neutral flat surface so the carved-in tags read correctly. */
  background: #e9eef4;
  border-top: 1px solid #dce6f0;
  text-align: center;
}
.industries-band-title {
  color: #0a2540;
  font-size: 1.375rem;
  margin: 0 0 1.1rem;
}

/* Enforce canonical 3-column layout for explicit card grids using .cards-grid.grid-3. */
@media (min-width: 920px) {
  .cards-grid.grid-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* ===== Multilingual Styles ===== */

/* Translation banner */
.translation-banner {
    background: #fef3c7;
    border-bottom: 1px solid #f59e0b;
    padding: 12px 0;
    font-size: 14px;
    color: #92400e;
}
.translation-banner i {
    margin-right: 8px;
}
.translation-banner p {
    margin: 0;
}

/* Language switcher */
.lang-switcher .nav-link {
    font-size: 13px;
    padding: 8px 12px;
    border-radius: 6px;
    background: rgba(255,255,255,0.1);
}
.lang-switcher .dropdown-link {
    font-size: 13px;
}
.lang-dropdown {
    min-width: 160px;
}
.lang-dropdown.show {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateY(0) !important;
}

/* RTL Support */
.is-rtl {
    direction: rtl;
    text-align: right;
}
.is-rtl .header-inner {
    flex-direction: row-reverse;
}
.is-rtl .nav {
    flex-direction: row-reverse;
}
.is-rtl .footer-grid-4 {
    direction: rtl;
}
.is-rtl .translation-banner i {
    margin-right: 0;
    margin-left: 8px;
}
.is-rtl .lang-switcher {
    margin-right: auto;
    margin-left: 0;
}

/* Mobile: language switcher */
@media (max-width: 1024px) {
    .lang-switcher {
        margin-top: 10px;
        border-top: 1px solid rgba(255,255,255,0.1);
        padding-top: 10px;
    }
}

/* ===== engbasis.css ===== */
/* ============================================================================
   Engineering-basis / "what it does" description blocks (calculator & tool pages)
   ONE subtle frame around the whole descriptive text that sits OUTSIDE the
   interactive calculator. Activated by the .rb-eb class on the <section>.
   (No per-bullet or per-part framing — a single nicely framed description.)
   ========================================================================== */
.rb-eb{padding:2.4rem 0}
.rb-eb .container{max-width:1000px}
.rb-eb .section-header{margin-bottom:1.2rem !important}
.rb-eb .section-label{color:#00529b}
.rb-eb h2.section-title{font-size:1.5rem;line-height:1.25}

/* single frame around the whole description */
.rb-eb .container > div:last-child{
  max-width:900px;margin:0 auto !important;
  background:#fff;border:1px solid #e2e8f0;border-radius:14px;
  padding:24px 28px !important;
  box-shadow:0 1px 2px rgba(10,37,64,.05),0 10px 30px rgba(10,37,64,.06)}
@media(max-width:600px){.rb-eb .container > div:last-child{padding:18px 18px !important}}

/* headings inside the frame */
.rb-eb h3{font-size:1.05rem !important;color:#0a2540 !important;font-weight:700;
  margin:1.6rem 0 .6rem !important;display:flex;align-items:center;gap:8px}
.rb-eb h3::before{content:"";flex:0 0 auto;width:4px;height:18px;background:#00529b;border-radius:3px}

/* normal text + simple bullet list (NOT cards) */
.rb-eb p{line-height:1.72;color:#28384a}
.rb-eb ul{margin:.3rem 0 0 !important;padding-left:1.2rem !important;
  display:block !important;grid-template-columns:none !important}
.rb-eb ul li{margin:0 0 .5rem;line-height:1.6;color:#28384a;
  background:none !important;border:0 !important;border-radius:0 !important;
  padding:0 !important;box-shadow:none !important;list-style:disc !important}
.rb-eb ul li b,.rb-eb ul li strong{color:#0a2540}

/* closing rigor / disclaimer line — subtle, not boxed */
.rb-eb .container > div:last-child > p:last-of-type{
  margin-top:1.3rem !important;padding-top:1rem;border-top:1px solid #eef2f7;
  font-size:13px;color:#52647a;font-style:italic}