@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-white) !important;
    color: var(--e-navy) !important;
    border-color: var(--e-border) !important;
}
.btn-secondary:hover {
    background: var(--e-surface) !important;
    border-color: #cbd5e1 !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;
}

.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; }

/* ---- 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;
}