/*
 * responsive-fixes.css
 * NSC Global — CSS-only fixes for responsive layout, cross-browser compatibility,
 * and animation performance. No structural or content changes.
 * Loaded AFTER Materialize CSS so these overrides take effect cleanly.
 */

/* ══════════════════════════════════════════════════════════
   1. GLOBAL BOX MODEL & OVERFLOW CONTAINMENT
   ══════════════════════════════════════════════════════════ */

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

html {
    overflow-x: hidden;
    width: 100%;
    -webkit-text-size-adjust: 100%; /* Safari: prevent font inflation on rotate */
    text-size-adjust: 100%;
    scroll-behavior: smooth;
}

body {
    overflow-x: hidden;
    width: 100%;
    margin: 0;
    padding: 0;
    min-width: 320px; /* hard floor — never narrower than smallest common phone */
}

/* Replaced content — never overflow their container */
img,
video,
canvas,
svg,
iframe,
embed,
object {
    max-width: 100%;
    height: auto;
    display: block; /* removes bottom whitespace gap (inline default) */
}

/* ══════════════════════════════════════════════════════════
   2. HERO / BANNER CANVAS ANIMATION — RESPONSIVE
   ══════════════════════════════════════════════════════════ */

/*
 * The homepage particle canvas (#hero-canvas) is absolutely positioned
 * inside .hero-wrap which already has position:relative; overflow:hidden.
 * These rules ensure it stretches to fill the parent at every viewport.
 */
#hero-canvas,
.banner-canvas,
.hero-animation {
    position: absolute;
    top: 0;
    left: 0;
    width: 100% !important;
    height: 100% !important;
    pointer-events: none;
}

/* Hero wrapper — clamp min-height so it never collapses on small screens */
.hero-wrap {
    position: relative;
    overflow: hidden;
    min-height: 480px; /* desktop default already set inline; this is the floor */
}

@media (max-width: 992px) {
    .hero-wrap {
        min-height: 420px;
    }
}

@media (max-width: 768px) {
    .hero-wrap {
        min-height: 360px;
        /* reduce vertical padding so hero doesn't swallow the whole screen */
        padding-top: 60px !important;
        padding-bottom: 48px !important;
    }
}

@media (max-width: 480px) {
    .hero-wrap {
        min-height: 300px;
        padding-top: 48px !important;
        padding-bottom: 40px !important;
    }
}

/* Floating hero icons — hide on small screens to avoid overlap with text */
@media (max-width: 768px) {
    .float-icon {
        display: none !important;
    }
}

/* ══════════════════════════════════════════════════════════
   3. DIVISION HERO SECTIONS
   ══════════════════════════════════════════════════════════ */

/* All hero sections that use absolute-positioned backgrounds */
[style*="min-height"][style*="display:flex"] {
    overflow: hidden;
}

/* Inline min-height overrides — make them scale down on mobile */
@media (max-width: 768px) {
    /* Override inline min-height:60vh / 65vh hero sections */
    .container[style*="padding:72px 0"] {
        padding-top: 48px !important;
        padding-bottom: 40px !important;
    }
}

/* ══════════════════════════════════════════════════════════
   4. MATERIALIZE GRID — OVERFLOW & GUTTER FIXES
   ══════════════════════════════════════════════════════════ */

/* Materialize .row has negative left/right margin by default.
   On mobile this causes horizontal scroll when the parent is exactly 100vw. */
.row {
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* Restore internal column padding so content doesn't touch edges */
.col {
    padding-left: 12px;
    padding-right: 12px;
}

@media (max-width: 600px) {
    .col {
        padding-left: 8px;
        padding-right: 8px;
    }
}

/* ══════════════════════════════════════════════════════════
   5. TYPOGRAPHY — FLUID SCALE
   ══════════════════════════════════════════════════════════ */

/* Headings that use large clamp() values should have a safe minimum */
h1 { word-break: break-word; overflow-wrap: break-word; }
h2 { word-break: break-word; overflow-wrap: break-word; }
h3 { word-break: break-word; overflow-wrap: break-word; }

@media (max-width: 600px) {
    /* Reduce inline font-sizes that don't use clamp() */
    .card-title,
    .card .card-title {
        font-size: 1rem !important;
        line-height: 1.4 !important;
    }
}

/* ══════════════════════════════════════════════════════════
   6. TOUCH-FRIENDLY INPUTS & BUTTONS
   ══════════════════════════════════════════════════════════ */

/* 16 px minimum prevents iOS auto-zoom on focus */
input,
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="number"],
input[type="date"],
input[type="search"],
input[type="password"],
select,
textarea {
    font-size: 16px !important;
}

/* Ensure minimum tap target size (WCAG 2.5.5 — 44×44 px) */
.btn,
.btn-large,
a.btn,
button,
.btn-floating {
    min-height: 44px;
    min-width: 44px;
}

/* Range inputs need vendor prefixes for cross-browser thumb styling */
input[type="range"] {
    -webkit-appearance: none;
    appearance: none;
    cursor: pointer;
    width: 100%;
}

input[type="range"]::-webkit-slider-runnable-track {
    height: 4px;
    border-radius: 2px;
    background: #e0e0e0;
}

input[type="range"]::-moz-range-track {
    height: 4px;
    border-radius: 2px;
    background: #e0e0e0;
}

input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--accent, #6200ee);
    margin-top: -8px;
    box-shadow: 0 1px 4px rgba(0,0,0,.25);
}

input[type="range"]::-moz-range-thumb {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: none;
    background: var(--accent, #6200ee);
    box-shadow: 0 1px 4px rgba(0,0,0,.25);
}

/* ══════════════════════════════════════════════════════════
   7. CARD & PANEL OVERFLOW CONTAINMENT
   ══════════════════════════════════════════════════════════ */

.card,
.card-panel {
    /* Prevent inner content (long URLs, pre-blocks) from breaking layout */
    overflow-wrap: break-word;
    word-break: break-word;
}

/* Horizontal scroll inside comparison/data tables only */
.table-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* On small screens, any table that could overflow gets a scroll wrapper behaviour */
@media (max-width: 768px) {
    table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}

/* ══════════════════════════════════════════════════════════
   8. WIZARD STEP PROGRESS (EV + CHEMICAL CONFIGURATORS)
   ══════════════════════════════════════════════════════════ */

/*
 * The step-progress bar uses display:flex with fixed pixel connector widths.
 * On narrow screens it can overflow. These overrides scale it down.
 */
@media (max-width: 480px) {
    /* Step dots — shrink slightly */
    [style*="width:34px"][style*="height:34px"][style*="border-radius:50%"] {
        width: 28px !important;
        height: 28px !important;
        font-size: .75rem !important;
    }

    /* Connectors — shrink */
    [style*="width:36px"][style*="height:2px"] {
        width: 16px !important;
        min-width: 8px !important;
    }

    /* Step labels already hidden by .hide-on-small-only — no change needed */
}

/* ══════════════════════════════════════════════════════════
   9. STICKY PRICE SIDEBAR (EV & CHEM WIZARDS)
   ══════════════════════════════════════════════════════════ */

/*
 * On mobile the price sidebar appears below the wizard steps.
 * Undo sticky positioning so it doesn't overlap content.
 */
@media (max-width: 992px) {
    .card[style*="position:sticky"] {
        position: static !important;
        top: auto !important;
    }
}

/* ══════════════════════════════════════════════════════════
   10. TECH TICKER / SCROLLING MARQUEE
   ══════════════════════════════════════════════════════════ */

/* Prevent the ticker wrapper from causing horizontal scroll */
[style*="animation:ticker"] {
    will-change: transform;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
}

/* Contain the ticker's overflow within its parent strip */
div:has(> [style*="animation:ticker"]) {
    overflow: hidden;
}

/* Fallback for browsers that don't support :has() */
.ticker-container {
    overflow: hidden;
}

/* ══════════════════════════════════════════════════════════
   11. AOS (ANIMATE ON SCROLL) — MOBILE PERFORMANCE
   ══════════════════════════════════════════════════════════ */

/* On small screens, disable AOS transforms to avoid layout jank */
@media (max-width: 480px) {
    [data-aos] {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
}

/* ══════════════════════════════════════════════════════════
   12. ANIMATION PERFORMANCE — GPU HINTS
   ══════════════════════════════════════════════════════════ */

/* Elements that use CSS animation or transition */
.float-icon,
.cap-card,
.ind-card,
.sub-page-card,
.product-card,
.blog-card,
.testi-card {
    will-change: transform;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

/* Animate on Scroll library elements */
[data-aos] {
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

/* ══════════════════════════════════════════════════════════
   13. SAFARI / WEBKIT SPECIFIC FIXES
   ══════════════════════════════════════════════════════════ */

/* Glassmorphism — Safari needs -webkit- prefix */
@supports (-webkit-backdrop-filter: blur(10px)) {
    .glassmorphism {
        -webkit-backdrop-filter: blur(10px);
        backdrop-filter: blur(10px);
    }
}

/* Sticky nav — Safari needs -webkit-sticky */
nav,
.sticky-header,
[style*="position:sticky"] {
    position: -webkit-sticky;
    position: sticky;
}

/* Safari flex gap fallback */
@supports not (gap: 1px) {
    .flex-gap-fallback > * + * {
        margin-left: 12px;
    }
}

/* Safari: gradient text (-webkit-background-clip required) */
.grad-text,
[style*="-webkit-text-fill-color: transparent"],
[style*="-webkit-text-fill-color:transparent"] {
    -webkit-background-clip: text;
    background-clip: text;
}

/* Safari: input border-radius reset */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="search"] {
    -webkit-appearance: none;
    appearance: none;
    border-radius: 8px;
}

/* ══════════════════════════════════════════════════════════
   14. FIREFOX SPECIFIC FIXES
   ══════════════════════════════════════════════════════════ */

/* Firefox: scrollbar width compensation */
@-moz-document url-prefix() {
    html {
        scrollbar-width: thin;
        scrollbar-color: var(--accent, #6200ee) #f5f5f5;
    }
}

/* Firefox: button font inheritance */
button {
    font-family: inherit;
}

/* ══════════════════════════════════════════════════════════
   15. FLOATING HERO ICON ANIMATION — VENDOR PREFIXES
   ══════════════════════════════════════════════════════════ */

@-webkit-keyframes float {
    0%,100% { -webkit-transform: translateY(0) rotate(0deg); transform: translateY(0) rotate(0deg); opacity:.7; }
    33%      { -webkit-transform: translateY(-18px) rotate(5deg); transform: translateY(-18px) rotate(5deg); opacity:.9; }
    66%      { -webkit-transform: translateY(-8px) rotate(-4deg); transform: translateY(-8px) rotate(-4deg); opacity:.8; }
}

@keyframes float {
    0%,100% { transform: translateY(0) rotate(0deg); opacity:.7; }
    33%      { transform: translateY(-18px) rotate(5deg); opacity:.9; }
    66%      { transform: translateY(-8px) rotate(-4deg); opacity:.8; }
}

/* ══════════════════════════════════════════════════════════
   16. AOS FADE-UP — VENDOR PREFIXES
   ══════════════════════════════════════════════════════════ */

@-webkit-keyframes fadeUp {
    from { opacity: 0; -webkit-transform: translateY(24px); transform: translateY(24px); }
    to   { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); }
}

@keyframes fadeUp {
    from { opacity: 0; transform: translateY(24px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ══════════════════════════════════════════════════════════
   17. SCROLLING TICKER ANIMATION — VENDOR PREFIXES
   ══════════════════════════════════════════════════════════ */

@-webkit-keyframes ticker {
    from { -webkit-transform: translateX(0); transform: translateX(0); }
    to   { -webkit-transform: translateX(-50%); transform: translateX(-50%); }
}

@keyframes ticker {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

/* ══════════════════════════════════════════════════════════
   18. STAT COUNTER PULSE — VENDOR PREFIXES
   ══════════════════════════════════════════════════════════ */

@-webkit-keyframes pulse {
    0%,100% { opacity: 1; }
    50%      { opacity: .5; }
}

@keyframes pulse {
    0%,100% { opacity: 1; }
    50%      { opacity: .5; }
}

/* ══════════════════════════════════════════════════════════
   19. FOOTER RESPONSIVENESS
   ══════════════════════════════════════════════════════════ */

/* Footer copyright flex row — wrap on mobile */
@media (max-width: 600px) {
    footer.page-footer .footer-copyright > div {
        flex-direction: column !important;
        gap: 4px !important;
        text-align: center;
    }
}

/* ══════════════════════════════════════════════════════════
   20. WHATSAPP FAB — SAFE POSITION ON MOBILE
   ══════════════════════════════════════════════════════════ */

.whatsapp-fab {
    /* Stay above mobile browser bottom nav bars */
    bottom: max(24px, env(safe-area-inset-bottom, 24px));
    right: max(20px, env(safe-area-inset-right, 20px));
}

/* ══════════════════════════════════════════════════════════
   21. COOKIE BANNER — SAFE AREA ON IPHONE
   ══════════════════════════════════════════════════════════ */

#cookie-banner {
    bottom: max(20px, calc(env(safe-area-inset-bottom, 0px) + 20px));
    left: max(20px, env(safe-area-inset-left, 20px));
    right: max(20px, env(safe-area-inset-right, 20px));
}

/* ══════════════════════════════════════════════════════════
   22. MATERIALIZE DROPDOWN — OVERFLOW FIX ON NARROW VIEWPORTS
   ══════════════════════════════════════════════════════════ */

.dropdown-content {
    max-width: calc(100vw - 32px);
    overflow-y: auto;
    max-height: 70vh;
}

/* ══════════════════════════════════════════════════════════
   23. FILTER CHIPS — WRAP GRACEFULLY ON MOBILE
   ══════════════════════════════════════════════════════════ */

/* Filter chip rows (CCTV, medical category filters) */
[role="group"] {
    flex-wrap: wrap;
    gap: 8px;
}

/* ══════════════════════════════════════════════════════════
   24. PRINT STYLES — HIDE ANIMATIONS & INTERACTIVE ELEMENTS
   ══════════════════════════════════════════════════════════ */

@media print {
    #hero-canvas,
    .float-icon,
    .whatsapp-fab,
    #cookie-banner,
    nav .sidenav-trigger,
    [data-aos] {
        display: none !important;
    }

    * {
        animation: none !important;
        transition: none !important;
    }

    body {
        overflow: visible;
    }
}

/* ══════════════════════════════════════════════════════════
   25. EV CONFIGURATOR — MOBILE FIXES
   ══════════════════════════════════════════════════════════ */

/*
 * Step progress bar: the outer flex container has overflow-x:auto (already)
 * but on very narrow screens the inner flex items still push width.
 * Constrain the connector bars and shrink step dots.
 */
@media (max-width: 480px) {
    /* Target the step progress wrapper on wizard pages */
    div[style*="overflow-x:auto"][style*="padding-bottom:4px"] {
        padding-bottom: 8px !important;
    }

    /* Shrink step-dot circles */
    div[style*="width:34px"][style*="height:34px"][style*="border-radius:50%"] {
        width: 28px !important;
        height: 28px !important;
        font-size: .7rem !important;
    }

    /* Shrink connector bars between steps */
    div[style*="width:36px"][style*="height:2px"][style*="margin:0 6px"] {
        width: 12px !important;
        margin: 0 3px !important;
    }
}

/*
 * Delivery priority grid: repeat(3,1fr) — too tight below 480px.
 * Switch to 1-column stack.
 */
@media (max-width: 480px) {
    div[style*="grid-template-columns:repeat(3,1fr)"] {
        grid-template-columns: 1fr !important;
    }
}

/*
 * Category grid: repeat(auto-fill,minmax(200px,1fr)) is fine on most screens
 * but minmax(200px) can cause overflow on 320px phones.
 * Drop the minimum to 140px.
 */
@media (max-width: 480px) {
    div[style*="minmax(200px,1fr)"] {
        grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)) !important;
    }
    div[style*="minmax(160px,1fr)"] {
        grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)) !important;
    }
}

/*
 * Back/Next button rows use display:flex;gap:12px without flex-wrap.
 * Add wrap so they stack vertically on small screens.
 */
@media (max-width: 400px) {
    div[style*="display:flex"][style*="gap:12px"][style*="margin-top"] {
        flex-wrap: wrap !important;
    }
    div[style*="display:flex"][style*="gap:12px"][style*="margin-top"] .btn,
    div[style*="display:flex"][style*="gap:12px"][style*="margin-top"] button {
        width: 100% !important;
        text-align: center !important;
    }
}

/* ══════════════════════════════════════════════════════════
   26. AI AUTOMATION PAGE — DARK BODY SAFE OVERRIDES
   ══════════════════════════════════════════════════════════ */

/*
 * The AI automation page adds .ai-automation-page to <body> via JS.
 * These rules ensure the Materialize nav and footer don't flash white
 * before the JS class is applied.
 */
body.ai-automation-page {
    background-color: #070b12 !important;
}

body.ai-automation-page nav {
    background-color: #0f1724 !important;
}

body.ai-automation-page .page-footer {
    background-color: #0a0f1a !important;
}

body.ai-automation-page .footer-copyright {
    background-color: #070b12 !important;
}

/* ROI result rows — ensure they don't overflow on mobile */
.roi-result {
    flex-wrap: wrap;
    gap: 6px;
}

@media (max-width: 480px) {
    .roi-result {
        flex-direction: column;
        align-items: flex-start !important;
        gap: 4px;
    }
}

/* AI input fields — full width on all screen sizes */
.ai-input {
    width: 100% !important;
    box-sizing: border-box !important;
}

/* Drone simulator preview box — don't overflow on small screens */
div[style*="background:rgba(96,165,250,.06)"][style*="border-radius:16px"] {
    padding: 20px !important;
}

/* ══════════════════════════════════════════════════════════
   27. SDS PAGE — TABLE RESPONSIVE
   ══════════════════════════════════════════════════════════ */

/* SDS search input full-width on mobile */
#sds-search {
    width: 100% !important;
    box-sizing: border-box !important;
}

/* SDS table wrapper already has overflow-x:auto.
   Ensure no horizontal bleed from the container. */
div[style*="overflow-x:auto"][style*="border-radius:12px"] {
    max-width: 100% !important;
}

/* ══════════════════════════════════════════════════════════
   28. CDSCO COMPLIANCE PAGE — TIMELINE MOBILE
   ══════════════════════════════════════════════════════════ */

/* CDSCO step list: on very narrow screens the step number circle
   + connector line can push content. Shrink the circle. */
@media (max-width: 400px) {
    li > div[style*="width:36px"][style*="height:36px"][style*="border-radius:50%"] {
        width: 28px !important;
        height: 28px !important;
        font-size: .7rem !important;
    }
}

/* ══════════════════════════════════════════════════════════
   29. GENERAL — INLINE FLEX ROWS WITHOUT WRAP
   ══════════════════════════════════════════════════════════ */

/*
 * Many inline-styled flex rows use fixed gap but no flex-wrap.
 * This catch-all adds wrap to flex containers that hold .btn elements,
 * preventing them from overflowing horizontally on small screens.
 */
@media (max-width: 480px) {
    .container div[style*="display:flex"][style*="flex-wrap:wrap"] {
        /* already wrapping — no change */
    }

    /* Hero CTA button groups */
    section[style*="padding:48px 0"] div[style*="display:flex"][style*="gap:12px"],
    section[style*="padding:40px 0"] div[style*="display:flex"][style*="gap:12px"],
    section[style*="padding:72px 0"] div[style*="display:flex"][style*="gap:12px"] {
        flex-wrap: wrap !important;
    }

    /* Full-width buttons inside small flex groups */
    section div[style*="display:flex"][style*="gap:12px"] > .btn,
    section div[style*="display:flex"][style*="gap:12px"] > a.btn {
        flex: 1 1 100% !important;
        text-align: center !important;
        justify-content: center !important;
    }
}

/* ══════════════════════════════════════════════════════════
   30. EV THANK-YOU & CHEM THANK-YOU — SAFE FALLBACK
   ══════════════════════════════════════════════════════════ */

/* Ensure thank-you page stat grids wrap on mobile */
@media (max-width: 480px) {
    div[style*="grid-template-columns:1fr 1fr"] {
        grid-template-columns: 1fr !important;
    }
}

/* ══════════════════════════════════════════════════════════
   31. MEGA MENU — Z-INDEX & RESPONSIVE
   ══════════════════════════════════════════════════════════ */

/* Ensure nav sits above all page content */
nav { z-index: 1500 !important; position: relative; }
.mega-panel { z-index: 2000 !important; }

/* Active mega link highlight */
.active-mega-link {
    background: var(--mega-accent-light, #ede7f6) !important;
    color: var(--mega-accent, #6200ee) !important;
}

/* Mega panel must not overlap on scrolled pages */
@media (min-width: 993px) {
    /* Keep mega panel from showing on touch-only devices */
    @media (hover: none) {
        .mega-panel { display: none !important; }
    }
}

/* On screens narrower than 993px the mega menu is replaced by sidenav — hide entirely */
@media (max-width: 992px) {
    .mega-panel { display: none !important; }
}

/* ══════════════════════════════════════════════════════════
   32. NAV Z-INDEX (from Phase 3 brief)
   ══════════════════════════════════════════════════════════ */

nav,
.nav-wrapper {
    z-index: 1500 !important;
}

/* Materialize dropdown (used by any remaining dropdowns) */
.dropdown-content {
    z-index: 2000 !important;
    max-width: calc(100vw - 32px);
    overflow-y: auto;
    max-height: 70vh;
}

/* Sidenav overlay */
.sidenav-overlay { z-index: 999 !important; }
.sidenav          { z-index: 1400 !important; }

/* ══════════════════════════════════════════════════════════
   33. BREADCRUMB STRIP
   ══════════════════════════════════════════════════════════ */

.nsc-breadcrumb {
    overflow-x: auto;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
}

/* ══════════════════════════════════════════════════════════
   34. CONTACT PAGE — DEPARTMENT SELECT
   ══════════════════════════════════════════════════════════ */

/* Prevent Materialize from initialising department select (data-no-materialize),
   but ensure it still looks correct */
select[data-no-materialize] {
    display: block !important;
    height: auto !important;
    padding: 10px 14px !important;
    border: 1.5px solid #bdbdbd !important;
    border-radius: 8px !important;
    font-size: 16px !important; /* iOS zoom prevention */
    background: #fff !important;
    color: #1a1a1a !important;
    width: 100% !important;
    box-sizing: border-box !important;
    -webkit-appearance: auto !important;
    appearance: auto !important;
}

/* ══════════════════════════════════════════════════════════
   35. HOMEPAGE STATS SECTION
   ══════════════════════════════════════════════════════════ */

/* Stat number — tabular numerals for clean counting animation */
[x-text*="counts."] {
    font-variant-numeric: tabular-nums;
    -webkit-font-feature-settings: "tnum";
    font-feature-settings: "tnum";
}

/* ══════════════════════════════════════════════════════════
   36. COMING-SOON PLACEHOLDER PAGES
   ══════════════════════════════════════════════════════════ */

/* Ensure the info card in coming-soon partial doesn't clip on mobile */
.card-panel[style*="border-left:4px"] {
    overflow-wrap: break-word;
    word-break: break-word;
}

/* ══════════════════════════════════════════════════════════
   37. NAVBAR — ENFORCE SITE-WIDE PURPLE (belt-and-braces)
       Prevents any page-level body class from overriding nav.
   ══════════════════════════════════════════════════════════ */
nav,
nav .nav-wrapper {
    background-color: #6200ee !important;
}

/* ══════════════════════════════════════════════════════════
   38. WIZARD BUTTONS — inline background-color override
       Materialize .btn has a high-specificity default that
       can override inline style="background:#xxx".
       This selector restores inline colour on btn elements.
   ══════════════════════════════════════════════════════════ */
/* Button colour is set via inline style="background:#xxx" shorthand.
   Materialize overrides it with background-color!important.
   We defeat this by letting the inline style win via unset on the
   Materialize override — handled per-button via direct style attribute. */

/* ══════════════════════════════════════════════════════════
   39. UTILITY CLASSES — replaces high-frequency inline styles
   ══════════════════════════════════════════════════════════ */

/* Section padding */
.section-sm   { padding: 40px 0; }
.section-md   { padding: 56px 0; }
.section-lg   { padding: 72px 0; }
.section-hero { padding: 80px 0 60px; }

/* Hero gradient backgrounds (division-specific) */
.hero-grad-default    { background: linear-gradient(135deg,#1a237e,#283593,#1565c0); }
.hero-grad-it         { background: linear-gradient(135deg,#0d47a1,#1565c0,#0288d1); }
.hero-grad-electronics{ background: linear-gradient(135deg,#1b5e20,#2e7d32,#388e3c); }
.hero-grad-chemicals  { background: linear-gradient(135deg,#3e2723,#bf360c,#e64a19); }
.hero-grad-medical    { background: linear-gradient(135deg,#4a0000,#b71c1c,#c62828); }
.hero-grad-purple     { background: linear-gradient(135deg,#1a0050,#3700b3,#1565c0); }

/* Hero wrapper */
.hero-wrap-full {
    position: relative; overflow: hidden;
    min-height: 55vh; display: flex; align-items: center;
    color: #fff;
}
.hero-wrap-full .container { position: relative; z-index: 2; }

/* Division label pill (replaces repeated inline badge style) */
.division-pill {
    display: inline-block;
    background: rgba(255,255,255,.12);
    border: 1px solid rgba(255,255,255,.2);
    border-radius: 999px;
    padding: 5px 16px;
    font-size: .8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    margin-bottom: 20px;
}

/* Dot-grid background overlay pattern */
.dot-overlay::before {
    content: '';
    position: absolute; inset: 0;
    opacity: .07;
    background-image: radial-gradient(circle at 1px 1px,rgba(255,255,255,.6) 1px,transparent 0);
    background-size: 28px 28px;
    pointer-events: none;
}

/* Card accent top border — used by most division product cards */
.card-accent-top    { border-top: 3px solid var(--accent,#6200ee) !important; }
.card-accent-left   { border-left: 4px solid var(--accent,#6200ee) !important; }

/* Section label chip (used above h2 in many sections) */
.section-label {
    display: inline-block;
    font-size: .75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: var(--accent,#6200ee);
    background: var(--accent-light,#ede7f6);
    padding: 4px 14px;
    border-radius: 999px;
    margin-bottom: 14px;
}

/* Certification badge row */
.cert-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px;
}
.cert-badge-item {
    display: flex;
    align-items: center;
    gap: 8px;
    background: #fff;
    border: 1px solid #ffcdd2;
    border-radius: 10px;
    padding: 7px 12px;
}
.cert-dot {
    width: 7px; height: 7px;
    border-radius: 50%;
    background: var(--accent,#c62828);
    flex-shrink: 0;
}

/* Stats 2-column grid (used on medical sidebar) */
.stats-2col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

/* ══════════════════════════════════════════════════════════
   40. MEDICAL FILTER CHIPS — proper Materialize-style buttons
   ══════════════════════════════════════════════════════════ */

/*
 * The medical equipment category filter uses <button class="filter-chip">.
 * This class was referenced but never defined, causing plain browser buttons.
 * Now defined as Materialize-compatible pill buttons with active state.
 */
.filter-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 18px;
    border-radius: 999px;
    font-size: .8125rem;
    font-weight: 600;
    cursor: pointer;
    border: 1.5px solid #bdbdbd;
    background: #fff;
    color: #616161;
    transition: background .15s, color .15s, border-color .15s, box-shadow .15s;
    letter-spacing: .01em;
    white-space: nowrap;
    box-shadow: 0 1px 3px rgba(0,0,0,.08);
    -webkit-tap-highlight-color: transparent;
    position: relative;
    overflow: hidden; /* for ripple */
}
.filter-chip:hover {
    background: #f5f5f5;
    border-color: #9e9e9e;
    box-shadow: 0 2px 6px rgba(0,0,0,.1);
}
.filter-chip.active,
.filter-chip[aria-pressed="true"] {
    background: #c62828;
    color: #fff;
    border-color: #c62828;
    box-shadow: 0 3px 8px rgba(198,40,40,.3);
}
/* Division-colour variants */
.filter-chip.chip-it.active       { background:#185FA5; border-color:#185FA5; }
.filter-chip.chip-electronics.active { background:#0F6E56; border-color:#0F6E56; }
.filter-chip.chip-chemicals.active { background:#854F0B; border-color:#854F0B; }
.filter-chip.chip-medical.active   { background:#c62828; border-color:#c62828; }

/* Container for filter chips — already uses flex but ensure wrap */
.filter-chip-group {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 28px;
}

/* ══════════════════════════════════════════════════════════
   41. CARD GRID LAYOUT — prevent Alpine x-show gaps
   ══════════════════════════════════════════════════════════ */

/*
 * When Alpine.js uses x-show to hide grid items, the hidden elements
 * still occupy space as display:none nodes but the .row negative margin
 * can cause visual gaps. Force consistent behaviour.
 */
.row [x-show] {
    /* Alpine sets display:none — ensure the col wrapper collapses fully */
    transition: opacity .2s ease;
}


/* ══════════════════════════════════════════════════════════
   42. COLOR & TYPOGRAPHY UTILITY CLASSES
       Replaces the most common inline text color/weight styles.
   ══════════════════════════════════════════════════════════ */
.nsc-dark  { color: #1a1a1a !important; }
.nsc-grey  { color: #616161 !important; }
.nsc-muted { color: #9e9e9e !important; }
.nsc-lh    { line-height: 1.65 !important; }
.nsc-accent { color: var(--accent, #6200ee) !important; }

/* Card accent colours (used in place of inline border-top/left) */
.card-top-it          { border-top: 3px solid #185FA5 !important; }
.card-top-electronics { border-top: 3px solid #0F6E56 !important; }
.card-top-chemicals   { border-top: 3px solid #854F0B !important; }
.card-top-medical     { border-top: 3px solid #c62828 !important; }

/* Hoverable transition (augments Materialize .hoverable) */
.hover-lift {
    transition: transform .2s ease, box-shadow .2s ease !important;
}
.hover-lift:hover {
    transform: translateY(-4px) !important;
    box-shadow: 0 10px 28px rgba(0,0,0,.13) !important;
}

/* ══════════════════════════════════════════════════════════
   43. WIZARD BUTTON COLOUR — defeat Materialize !important
       Uses attribute selector with higher specificity so the
       division colour always wins over Materialize's default.
   ══════════════════════════════════════════════════════════ */

/* Chemical quotation wizard — orange-red #e64a19 */
.btn.waves-effect.waves-light[style*="e64a19"],
.btn-large.waves-effect.waves-light[style*="e64a19"] {
    background-color: #e64a19 !important;
}
.btn.waves-effect.waves-light[style*="e64a19"]:hover,
.btn-large.waves-effect.waves-light[style*="e64a19"]:hover {
    background-color: #bf360c !important;
}

/* EV configurator wizard — green #2e7d32 */
.btn.waves-effect.waves-light[style*="2e7d32"],
.btn-large.waves-effect.waves-light[style*="2e7d32"],
.btn-floating.waves-effect.waves-light[style*="2e7d32"] {
    background-color: #2e7d32 !important;
}
.btn.waves-effect.waves-light[style*="2e7d32"]:hover,
.btn-large.waves-effect.waves-light[style*="2e7d32"]:hover {
    background-color: #1b5e20 !important;
}

/* Generic: any .btn with an inline background-color that includes !important —
   make Materialize yield by using the compound class selector */
.btn.waves-light[style],
.btn-large.waves-light[style] {
    /* This class combo is higher specificity than Materialize's .btn alone */
}

/* ══════════════════════════════════════════════════════════
   44. CHEMICAL CATEGORY GRID — 3 equal columns, never orphans
   ══════════════════════════════════════════════════════════ */

.chem-cat-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-bottom: 0;
}

@media (max-width: 600px) {
    .chem-cat-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Packaging grid — 4 items, 2×2 on mobile, 4 across on desktop */
.chem-pkg-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    margin-bottom: 24px;
}

@media (max-width: 600px) {
    .chem-pkg-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ══════════════════════════════════════════════════════════
   45. STEP PROGRESS INDICATOR — visual polish
   ══════════════════════════════════════════════════════════ */

/* Wrapper: never wraps, scrolls horizontally on small screens */
.wizard-steps {
    display: flex;
    align-items: center;
    margin-bottom: 32px;
    overflow-x: auto;
    padding-bottom: 4px;
    -webkit-overflow-scrolling: touch;
    gap: 0;
}

/* Step circle — base (inactive) */
.step-dot {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .8125rem;
    font-weight: 700;
    flex-shrink: 0;
    transition: background .2s, box-shadow .2s;
    background: #e0e0e0;
    color: #9e9e9e;
}

/* Step connector line */
.step-line {
    width: 36px;
    min-width: 20px;
    height: 2px;
    margin: 0 6px;
    flex-shrink: 0;
    background: #e0e0e0;
    transition: background .2s;
}

/* Step label */
.step-label {
    font-size: .8125rem;
    font-weight: 500;
    color: #9e9e9e;
    white-space: nowrap;
    transition: color .2s;
    margin-left: 6px;
    margin-right: 4px;
}

/* ══════════════════════════════════════════════════════════
   46. IT SERVICES SUB-PAGES — Enterprise Redesign
       All layout classes for Cloud/DevOps, RPA, IoT,
       Legacy Modernization pages. Zero inline styles.
   ══════════════════════════════════════════════════════════ */

/* ── Shared page hero ─────────────────────────────────── */
.it-subpage-hero {
    background: linear-gradient(135deg, #0d47a1 0%, #185FA5 60%, #0288d1 100%);
    padding: 72px 0 56px;
    position: relative;
    overflow: hidden;
    color: #fff;
}
.it-subpage-hero::before {
    content: '';
    position: absolute; inset: 0;
    background-image: radial-gradient(circle at 1px 1px, rgba(255,255,255,.5) 1px, transparent 0);
    background-size: 28px 28px;
    opacity: .06;
    pointer-events: none;
}
.it-subpage-hero .container { position: relative; z-index: 2; }

.hero-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(255,255,255,.12);
    border: 1px solid rgba(255,255,255,.22);
    border-radius: 999px;
    padding: 5px 16px;
    font-size: .8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: rgba(255,255,255,.9);
    margin-bottom: 20px;
}
.hero-eyebrow .live-dot {
    width: 7px; height: 7px;
    border-radius: 50%;
    background: #4caf50;
    animation: pulse 2s infinite;
    flex-shrink: 0;
}

.hero-h1 {
    font-size: clamp(1.9rem, 4.5vw, 3rem);
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -.02em;
    color: #fff;
    margin-bottom: 16px;
}
.hero-lead {
    font-size: 1.0625rem;
    color: rgba(255,255,255,.78);
    max-width: 580px;
    line-height: 1.7;
    margin-bottom: 28px;
}

/* ── Section wrappers ─────────────────────────────────── */
.it-section          { padding: 64px 0; }
.it-section-alt      { padding: 64px 0; background: #f8f9fb; }
.it-section-dark     { padding: 64px 0; background: #0f172a; }
.it-section-accent   { padding: 56px 0; background: linear-gradient(135deg, #185FA5, #0288d1); }

/* ── Section heading group ────────────────────────────── */
.section-kicker {
    display: inline-block;
    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: #185FA5;
    background: #e3f2fd;
    padding: 3px 12px;
    border-radius: 999px;
    margin-bottom: 10px;
}
.section-kicker.kicker-light { color: #90caf9; background: rgba(144,202,249,.15); }

.it-h2 {
    font-size: clamp(1.4rem, 2.5vw, 1.875rem);
    font-weight: 800;
    color: #0f172a;
    margin-bottom: 10px;
    letter-spacing: -.01em;
}
.it-h2-light { color: #fff; }
.it-lead { color: #5a6272; line-height: 1.7; max-width: 640px; }
.it-lead-light { color: rgba(255,255,255,.78); }

/* ── Enterprise feature card ──────────────────────────── */
.ent-card {
    background: #fff;
    border-radius: 12px;
    padding: 28px 24px;
    height: 100%;
    box-sizing: border-box;
    border: 1px solid #e8ecf0;
    transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.ent-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 14px 36px rgba(24,95,165,.13);
    border-color: #185FA5;
}
.ent-card-dark {
    background: rgba(255,255,255,.05);
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 12px;
    padding: 28px 24px;
    height: 100%;
    box-sizing: border-box;
    transition: border-color .2s, background .2s;
}
.ent-card-dark:hover { border-color: rgba(2,136,209,.5); background: rgba(2,136,209,.07); }

.card-icon-wrap {
    width: 52px; height: 52px;
    border-radius: 12px;
    background: #e3f2fd;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 16px;
    font-size: 1.6rem;
}
.card-icon-wrap.icon-green  { background: #e8f5e9; }
.card-icon-wrap.icon-purple { background: #ede7f6; }
.card-icon-wrap.icon-amber  { background: #fff8e1; }
.card-icon-wrap.icon-red    { background: #ffebee; }

.ent-card h3, .ent-card-dark h3 {
    font-size: 1rem;
    font-weight: 700;
    color: #0f172a;
    margin-bottom: 6px;
}
.ent-card-dark h3 { color: #e2e8f0; }
.ent-card p, .ent-card-dark p {
    font-size: .875rem;
    color: #5a6272;
    line-height: 1.65;
    margin: 0;
}
.ent-card-dark p { color: rgba(255,255,255,.6); }

/* ── Stat counter block ───────────────────────────────── */
.stat-counter-wrap {
    background: linear-gradient(135deg, #185FA5, #0288d1);
    border-radius: 14px;
    padding: 40px 28px;
    text-align: center;
}
.stat-number {
    font-size: 2.8rem;
    font-weight: 800;
    color: #fff;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}
.stat-label { font-size: .875rem; color: rgba(255,255,255,.75); margin-top: 6px; }

/* ── Case study card ──────────────────────────────────── */
.case-study-card {
    background: #fff;
    border-radius: 14px;
    border: 1px solid #e8ecf0;
    border-left: 5px solid #185FA5;
    padding: 32px 28px;
}
.case-metric {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #e3f2fd;
    color: #185FA5;
    font-size: .8125rem;
    font-weight: 700;
    padding: 5px 14px;
    border-radius: 999px;
    margin-right: 8px;
    margin-bottom: 8px;
}

/* ── Bullet check-list ────────────────────────────────── */
.check-list { list-style: none; padding: 0; margin: 0; }
.check-list li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: .9375rem;
    color: #374151;
    padding: 7px 0;
    border-bottom: 1px solid #f0f0f0;
    line-height: 1.55;
}
.check-list li:last-child { border-bottom: none; }
.check-list .ci {
    font-size: 18px;
    color: #185FA5;
    flex-shrink: 0;
    margin-top: 1px;
}

/* ── IoT Architecture layers ──────────────────────────── */
.iot-layers { display: flex; flex-direction: column; gap: 8px; }
.iot-layer {
    display: flex;
    align-items: center;
    gap: 16px;
    background: #fff;
    border-radius: 10px;
    padding: 18px 22px;
    border: 1px solid #e8ecf0;
    border-left: 4px solid #185FA5;
    transition: box-shadow .2s;
}
.iot-layer:hover { box-shadow: 0 4px 16px rgba(24,95,165,.1); }
.iot-layer-num {
    width: 32px; height: 32px;
    border-radius: 50%;
    background: #185FA5;
    color: #fff;
    font-weight: 700;
    font-size: .875rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.iot-layer-body h4 { font-weight: 700; color: #0f172a; margin-bottom: 2px; font-size: .9375rem; }
.iot-layer-body p  { font-size: .8125rem; color: #5a6272; margin: 0; }
.iot-arrow {
    text-align: center;
    color: #185FA5;
    font-size: 1.25rem;
    opacity: .5;
    margin: -2px 0;
}

/* ── Tech chips ───────────────────────────────────────── */
.tech-chip-wrap { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }
.tech-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 16px;
    border-radius: 999px;
    background: #e3f2fd;
    color: #185FA5;
    font-size: .8125rem;
    font-weight: 600;
    border: 1.5px solid rgba(24,95,165,.2);
    transition: background .15s, border-color .15s;
}
.tech-chip:hover { background: #185FA5; color: #fff; }

/* ── Legacy modernization timeline ───────────────────── */
.mod-timeline { display: flex; flex-direction: column; gap: 0; }
.mod-step {
    display: flex;
    gap: 20px;
    align-items: flex-start;
    padding-bottom: 28px;
    position: relative;
}
.mod-step:not(:last-child)::after {
    content: '';
    position: absolute;
    left: 19px;
    top: 40px;
    bottom: 0;
    width: 2px;
    background: linear-gradient(180deg, #185FA5, #e8ecf0);
}
.mod-step-dot {
    width: 40px; height: 40px;
    border-radius: 50%;
    background: #185FA5;
    color: #fff;
    font-weight: 700;
    font-size: .875rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    z-index: 1;
    box-shadow: 0 0 0 4px #e3f2fd;
}
.mod-step-body { flex: 1; padding-top: 8px; }
.mod-step-body h4 { font-weight: 700; color: #0f172a; margin-bottom: 4px; }
.mod-step-body p  { font-size: .875rem; color: #5a6272; line-height: 1.6; margin: 0; }

/* ── Details/summary accordion ────────────────────────── */
.it-accordion { border: 1px solid #e8ecf0; border-radius: 10px; overflow: hidden; }
.it-accordion details { border-bottom: 1px solid #e8ecf0; }
.it-accordion details:last-child { border-bottom: none; }
.it-accordion summary {
    padding: 16px 20px;
    font-weight: 600;
    color: #0f172a;
    cursor: pointer;
    list-style: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #fff;
    transition: background .15s;
}
.it-accordion summary:hover { background: #f0f7ff; }
.it-accordion summary::after {
    content: '+';
    font-size: 1.25rem;
    color: #185FA5;
    flex-shrink: 0;
}
.it-accordion details[open] summary::after { content: '−'; }
.it-accordion .accordion-body {
    padding: 14px 20px 18px;
    background: #f8f9fb;
    font-size: .9rem;
    color: #5a6272;
    line-height: 1.7;
}

/* ── Enquiry form card (reused from partial, class-based) ─ */
.enquiry-card {
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 2px 16px rgba(0,0,0,.08);
}
.enquiry-card .card-content { padding: 28px; }
.enquiry-card h3 {
    font-size: 1.125rem;
    font-weight: 700;
    color: #0f172a;
    margin-bottom: 20px;
}
.form-label {
    font-size: .875rem;
    font-weight: 600;
    display: block;
    margin-bottom: 6px;
    color: #374151;
}
.form-field-wrap { margin-bottom: 14px; }
.form-submit-note {
    font-size: .75rem;
    color: #9e9e9e;
    text-align: center;
    margin-top: 8px;
}

/* ── ROI / Quote highlight box ────────────────────────── */
.quote-box {
    background: #0f172a;
    border-radius: 12px;
    padding: 32px 28px;
    color: #fff;
}
.quote-text {
    font-size: 1.125rem;
    line-height: 1.7;
    color: rgba(255,255,255,.88);
    font-style: italic;
    margin-bottom: 16px;
}
.quote-source { font-size: .8125rem; color: rgba(255,255,255,.55); }
.quote-metric {
    font-size: 2.5rem;
    font-weight: 800;
    color: #4caf50;
    display: block;
    margin-bottom: 4px;
}

/* ── RPA stats row ────────────────────────────────────── */
.rpa-stats-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin-top: 28px;
}
@media (max-width: 600px) {
    .rpa-stats-row { grid-template-columns: 1fr; }
}

/* ── Why-choose grid (3-col) ──────────────────────────── */
.why-grid { margin-top: 8px; }
.why-icon-circle {
    width: 56px; height: 56px;
    border-radius: 50%;
    background: #e3f2fd;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.6rem;
    margin: 0 auto 14px;
}

/* ── Responsive fixes for sub-pages ──────────────────── */
@media (max-width: 600px) {
    .it-subpage-hero { padding: 48px 0 40px; }
    .it-section, .it-section-alt, .it-section-dark { padding: 40px 0; }
    .iot-layers { gap: 6px; }
}

/* ══════════════════════════════════════════════════════════
   47. UTILITY CLASSES (Brief requirement — explicit list)
   ══════════════════════════════════════════════════════════ */
.mt-1  { margin-top: .25rem; }
.mt-2  { margin-top: .5rem; }
.mt-3  { margin-top: .75rem; }
.mt-4  { margin-top: 1rem; }
.mt-6  { margin-top: 1.5rem; }
.mt-8  { margin-top: 2rem; }

.mb-1  { margin-bottom: .25rem; }
.mb-2  { margin-bottom: .5rem; }
.mb-3  { margin-bottom: .75rem; }
.mb-4  { margin-bottom: 1rem; }
.mb-6  { margin-bottom: 1.5rem; }
.mb-8  { margin-bottom: 2rem; }

.p-2   { padding: .5rem; }
.p-3   { padding: .75rem; }
.p-4   { padding: 1rem; }
.p-6   { padding: 1.5rem; }

.text-center { text-align: center !important; }
.text-right  { text-align: right !important; }
.text-left   { text-align: left !important; }

.bg-light    { background-color: #f5f5f5 !important; }
.bg-white    { background-color: #ffffff !important; }
.bg-dark     { background-color: #0f172a !important; }

.rounded     { border-radius: 8px !important; }
.rounded-lg  { border-radius: 12px !important; }
.rounded-xl  { border-radius: 16px !important; }
.rounded-full{ border-radius: 999px !important; }

.w-full { width: 100% !important; }

/* ── IT sub-page hero CTA button group ───────────────── */
.it-btn-group {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 4px;
}
.it-btn-primary  { background-color: #0288d1 !important; }
.it-btn-ghost    {
    background: rgba(255,255,255,.15) !important;
    border: 2px solid rgba(255,255,255,.4) !important;
    color: #fff !important;
}

/* ══════════════════════════════════════════════════════════
   48. LAYOUT SPACING CLASSES (replaces inline margin/padding
       on Materialize rows, cols, and component wrappers)
   ══════════════════════════════════════════════════════════ */

/* Row variants */
.row-flush  { margin-left: 0 !important; margin-right: 0 !important; }
.row-mt-xs  { margin-top: 12px !important; }
.row-mt-sm  { margin-top: 20px !important; }
.row-mt-md  { margin-top: 28px !important; }
.row-mt-lg  { margin-top: 36px !important; }
.row-mt-xl  { margin-top: 32px !important; }

/* Col spacing */
.col-mb     { margin-bottom: 20px; }
.col-mb-lg  { margin-bottom: 32px; }
.col-mt-xs  { margin-top: 8px; }
.col-mt-sm  { margin-top: 16px; }
.col-mt-md  { margin-top: 24px; }

/* Stat counter variants */
.stat-mt    { margin-top: 14px; }

/* Enterprise card spacing */
.ent-card-mt { margin-top: 14px; }

/* Check-list spacing */
.ul-mt    { margin-top: 16px; }
.ul-mt-sm { margin-top: 12px; }
.ul-mt-xs { margin-top: 8px; }

/* ══════════════════════════════════════════════════════════
   49. ELECTRONICS SUB-PAGES — Enterprise Content Enhancement
   ══════════════════════════════════════════════════════════ */

/* ── Shared electronics hero enhancement strip ─────────── */
.elec-hero-addon {
    background: rgba(0,0,0,.18);
    border-top: 1px solid rgba(255,255,255,.12);
    padding: 20px 0;
}
.elec-hero-tagline {
    font-size: 1.0625rem;
    color: rgba(255,255,255,.88);
    line-height: 1.65;
    max-width: 640px;
}

/* ── Feature / comparison table ───────────────────────── */
.elec-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: 10px; border: 1px solid #e0e0e0; }
.elec-table { width: 100%; border-collapse: collapse; min-width: 480px; font-size: .9rem; }
.elec-table thead tr { background: #f5f5f5; }
.elec-table th { padding: 13px 16px; text-align: left; font-weight: 700; color: #1a1a1a; white-space: nowrap; }
.elec-table td { padding: 12px 16px; border-top: 1px solid #f0f0f0; color: #424242; vertical-align: top; }
.elec-table tbody tr:hover { background: #fafafa; }
.elec-table .elec-table-badge {
    display: inline-block; padding: 2px 10px; border-radius: 999px;
    font-size: .75rem; font-weight: 700;
    background: #e3f2fd; color: #185FA5;
}

/* ── Section with coloured left accent ─────────────────── */
.elec-section-white { padding: 64px 0; background: #fff; }
.elec-section-light { padding: 64px 0; background: #f8f9fb; }
.elec-section-tinted { padding: 56px 0; }
.elec-section-cta { padding: 52px 0; text-align: center; }

/* ── Kicker labels per division colour ─────────────────── */
.kicker-elec-office    { color: #0288d1; background: #e1f5fe; }
.kicker-elec-led       { color: #e65100; background: #fff3e0; }
.kicker-elec-ev        { color: #2e7d32; background: #e8f5e9; }
.kicker-elec-home      { color: #7b1fa2; background: #f3e5f5; }
.kicker-elec-sensor    { color: #37474f; background: #eceff1; }

/* ── EV charger type card ──────────────────────────────── */
.ev-level-card {
    background: #fff;
    border-radius: 12px;
    border: 1px solid #e0e0e0;
    border-top: 4px solid #2e7d32;
    padding: 22px 20px;
    height: 100%;
    box-sizing: border-box;
    transition: box-shadow .2s, transform .2s;
}
.ev-level-card:hover { box-shadow: 0 10px 28px rgba(46,125,50,.13); transform: translateY(-4px); }
.ev-level-badge {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: .72rem;
    font-weight: 700;
    background: #e8f5e9;
    color: #2e7d32;
    margin-bottom: 10px;
}
.ev-level-power { font-size: 1.375rem; font-weight: 800; color: #2e7d32; }
.ev-level-time  { font-size: .8125rem; color: #9e9e9e; }

/* ── Connector chip ─────────────────────────────────────── */
.connector-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 16px;
    border-radius: 999px;
    background: #e8f5e9;
    color: #2e7d32;
    font-size: .8125rem;
    font-weight: 600;
    border: 1.5px solid rgba(46,125,50,.2);
    transition: background .15s;
    margin: 4px;
}
.connector-chip:hover { background: #2e7d32; color: #fff; }

/* ── LED application row card ───────────────────────────── */
.led-app-card {
    background: #fff;
    border-radius: 10px;
    border: 1px solid #e0e0e0;
    border-left: 4px solid #f57c00;
    padding: 18px 20px;
    margin-bottom: 12px;
    display: flex;
    align-items: flex-start;
    gap: 14px;
    transition: box-shadow .2s;
}
.led-app-card:hover { box-shadow: 0 4px 14px rgba(245,124,0,.12); }
.led-app-icon { font-size: 1.75rem; flex-shrink: 0; width: 40px; text-align: center; }
.led-app-badge { display:inline-block; padding:2px 10px; border-radius:999px; font-size:.72rem; font-weight:700; background:#fff3e0; color:#e65100; }

/* ── Smart home category grid ───────────────────────────── */
.smarthome-cat-card {
    background: #fff;
    border-radius: 10px;
    border: 1px solid #e0e0e0;
    border-top: 3px solid #7b1fa2;
    padding: 18px;
    height: 100%;
    box-sizing: border-box;
    transition: transform .2s, box-shadow .2s;
}
.smarthome-cat-card:hover { transform: translateY(-4px); box-shadow: 0 10px 24px rgba(123,31,162,.1); }
.smarthome-cat-num {
    width: 28px; height: 28px; border-radius: 50%;
    background: #7b1fa2; color: #fff;
    font-weight: 700; font-size: .8125rem;
    display: flex; align-items: center; justify-content: center;
    margin-bottom: 10px; flex-shrink: 0;
}

/* ── Smart office benefit stat row ─────────────────────── */
.office-stat-card {
    background: linear-gradient(135deg, #01579b, #0288d1);
    border-radius: 12px;
    padding: 24px;
    text-align: center;
    color: #fff;
}
.office-stat-num  { font-size: 2.25rem; font-weight: 800; color: #fff; line-height: 1; }
.office-stat-lbl  { font-size: .875rem; color: rgba(255,255,255,.75); margin-top: 6px; }

/* ── Industrial sensor category card ────────────────────── */
.sensor-card {
    background: #fff;
    border-radius: 10px;
    border: 1px solid #e0e0e0;
    border-left: 4px solid #37474f;
    padding: 18px 20px;
    height: 100%;
    box-sizing: border-box;
    transition: border-color .2s, box-shadow .2s;
}
.sensor-card:hover { border-color: #0288d1; box-shadow: 0 4px 16px rgba(2,136,209,.1); }
.sensor-card h4    { font-weight: 700; color: #1a1a1a; margin-bottom: 6px; font-size: .9375rem; }
.sensor-card p     { font-size: .8125rem; color: #616161; line-height: 1.6; margin-bottom: 8px; }
.sensor-app-tag    { font-size: .72rem; color: #0288d1; font-weight: 600; }

/* ── Sensor selection steps ─────────────────────────────── */
.sensor-steps { display: flex; flex-direction: column; gap: 0; }
.sensor-step {
    display: flex; gap: 14px; align-items: flex-start;
    padding: 14px 0; border-bottom: 1px solid #f0f0f0;
}
.sensor-step:last-child { border-bottom: none; }
.sensor-step-num {
    width: 30px; height: 30px; border-radius: 50%;
    background: #37474f; color: #fff;
    font-weight: 700; font-size: .8125rem;
    display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.sensor-step p { font-size: .9rem; color: #424242; line-height: 1.55; margin: 0; }

/* ── Note / disclaimer panel ────────────────────────────── */
.elec-note {
    background: #fff9c4;
    border-left: 4px solid #f9a825;
    border-radius: 0 8px 8px 0;
    padding: 14px 18px;
    font-size: .9rem;
    color: #5d4037;
    line-height: 1.6;
    margin: 0;
}
.info-card {
    background-color: #f5f5f5;
    border-left: 4px solid #6200ee;
    padding: 1rem;
    margin: 1rem 0;
    border-radius: 0 8px 8px 0;
}

/* ── Responsive: mobile adjustments ────────────────────── */
@media (max-width: 600px) {
    .elec-section-white,
    .elec-section-light { padding: 40px 0; }
    .ev-level-card { padding: 16px; }
    .led-app-card { flex-direction: column; gap: 8px; }
}

/* ── Additional utility classes (brief requirement) ─────── */
.table-responsive { overflow-x: auto; display: block; width: 100%; }
.font-bold { font-weight: 700 !important; }

/* ── Electronics division hero backgrounds ──────────────── */
.elec-hero-smart-office {
    position: relative; overflow: hidden; color: #fff;
    background: linear-gradient(135deg, #01579b, #0288d1, #0097a7);
}
.elec-hero-leds {
    position: relative; overflow: hidden; color: #fff;
    background: linear-gradient(135deg, #e65100, #f57c00, #ff8f00);
}
.elec-hero-smart-home {
    position: relative; overflow: hidden; color: #fff;
    background: linear-gradient(135deg, #4a148c, #7b1fa2, #9c27b0);
}
.elec-hero-ev {
    position: relative; overflow: hidden; color: #fff;
    background: linear-gradient(135deg, #1b5e20, #2e7d32, #388e3c);
}
.elec-hero-sensors {
    position: relative; overflow: hidden; color: #fff;
    background: linear-gradient(135deg, #263238, #37474f, #455a64);
}

/* ── Electronics card helpers ───────────────────────────── */
.elec-card-icon  { font-size: 2rem; margin-bottom: 10px; }
.elec-card-title { font-size: .9375rem; font-weight: 700; color: #1a1a1a; margin-bottom: 6px; }
.elec-card-desc  { font-size: .8125rem; color: #616161; line-height: 1.6; margin: 0; }

/* ══════════════════════════════════════════════════════════
   53. MEDICAL DIVISION PAGES — Enterprise Enhancement
   ══════════════════════════════════════════════════════════ */
.med-hero { position:relative;overflow:hidden;color:#fff;background:linear-gradient(135deg,#4a0000,#b71c1c,#c62828); }
.kicker-med { color:#c62828;background:#ffebee; }
.kicker-med-dark { color:#ffcdd2;background:rgba(198,40,40,.15); }
.med-stat { background:linear-gradient(135deg,#b71c1c,#c62828);border-radius:12px;padding:22px 18px;text-align:center;color:#fff; }
.med-stat-num { font-size:2rem;font-weight:800;color:#fff;line-height:1; }
.med-stat-lbl { font-size:.8125rem;color:rgba(255,255,255,.75);margin-top:5px; }
.med-div-card { background:#fff;border-radius:12px;border:1px solid #e0e0e0;border-top:4px solid #c62828;padding:24px 20px;height:100%;box-sizing:border-box;transition:transform .2s,box-shadow .2s; }
.med-div-card:hover { transform:translateY(-4px);box-shadow:0 10px 28px rgba(198,40,40,.12); }
.med-div-card h3 { font-weight:700;color:#1a1a1a;margin-bottom:8px; }
.med-div-card p  { font-size:.875rem;color:#616161;line-height:1.6;margin:0; }
.med-prod-card { background:#fff;border-radius:10px;border:1px solid #e0e0e0;border-left:4px solid #c62828;padding:18px 20px;height:100%;box-sizing:border-box;transition:box-shadow .2s; }
.med-prod-card:hover { box-shadow:0 4px 14px rgba(198,40,40,.1); }
.med-prod-card h4 { font-weight:700;color:#1a1a1a;margin-bottom:5px; }
.med-prod-card p  { font-size:.8125rem;color:#616161;line-height:1.6;margin:0; }
.med-cert-chip { display:inline-flex;padding:7px 16px;border-radius:999px;background:#ffebee;color:#c62828;font-size:.8125rem;font-weight:600;border:1.5px solid rgba(198,40,40,.2);margin:4px;transition:background .15s; }
.med-cert-chip:hover { background:#c62828;color:#fff; }
.med-table-wrap { overflow-x:auto;-webkit-overflow-scrolling:touch;border-radius:10px;border:1px solid #e0e0e0; }
.med-table { width:100%;border-collapse:collapse;min-width:400px;font-size:.9rem; }
.med-table thead tr { background:#ffebee; }
.med-table th { padding:13px 16px;text-align:left;font-weight:700;color:#b71c1c; }
.med-table td { padding:12px 16px;border-top:1px solid #fce4ec;color:#424242;vertical-align:top; }
.med-table tbody tr:hover { background:#fff8f8; }
.med-badge { display:inline-block;padding:2px 10px;border-radius:999px;font-size:.75rem;font-weight:700;background:#ffebee;color:#c62828; }
.med-badge-green { background:#e8f5e9;color:#2e7d32; }
.med-service-card { background:#fff;border-radius:12px;border:1px solid #e0e0e0;border-top:4px solid #c62828;padding:22px 20px;height:100%;box-sizing:border-box;text-align:center;transition:box-shadow .2s,transform .2s; }
.med-service-card:hover { box-shadow:0 8px 24px rgba(198,40,40,.12);transform:translateY(-3px); }
.med-service-icon { width:52px;height:52px;border-radius:50%;background:#ffebee;display:flex;align-items:center;justify-content:center;font-size:1.5rem;margin:0 auto 12px; }
.med-service-card h4 { font-weight:700;color:#1a1a1a;margin-bottom:6px; }
.med-service-card p  { font-size:.875rem;color:#616161;line-height:1.6;margin:0; }
.med-reg-item { display:flex;gap:14px;align-items:flex-start;background:#fff;border:1px solid #e0e0e0;border-left:4px solid #c62828;border-radius:0 10px 10px 0;padding:14px 18px;margin-bottom:12px; }
.med-reg-icon { font-size:1.5rem;flex-shrink:0; }
.med-reg-item h4 { font-weight:700;color:#1a1a1a;margin-bottom:3px;font-size:.9375rem; }
.med-reg-item p  { font-size:.8125rem;color:#616161;margin:0;line-height:1.55; }
.med-section-white { padding:64px 0;background:#fff; }
.med-section-light { padding:64px 0;background:#fff8f8; }
.med-section-cta   { padding:52px 0;background:linear-gradient(135deg,#b71c1c,#c62828);text-align:center; }
@media (max-width:600px) { .med-section-white,.med-section-light { padding:40px 0; } }

/* ── Homepage testimonial nav (section 52 CSS) ─────────── */
.testi-card { text-align:center; }
.testi-content { font-size:1.0625rem;color:#1a1a1a;line-height:1.7;margin:16px 0;font-style:italic; }
.testi-name    { font-weight:700;color:#6200ee;margin-bottom:2px; }
.testi-company { font-size:.875rem;color:#9e9e9e; }
.testi-nav { display:flex;align-items:center;justify-content:center;gap:16px;margin-top:24px; }
.testi-btn { background-color:#6200ee!important;flex-shrink:0; }
.testi-dots { display:flex;gap:8px;align-items:center; }
.testi-dot { width:8px;height:8px;border-radius:50%;border:none;background:#e0e0e0;cursor:pointer;padding:0;transition:background .2s,width .2s,height .2s; }
.testi-dot-active { background:#6200ee!important;width:12px!important;height:12px!important; }
.split-col { margin-bottom:40px; }
.split-kicker { display:inline-block;font-size:.75rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:#03dac6;background:rgba(3,218,198,.15);padding:4px 14px;border-radius:999px;margin-bottom:14px; }
.split-heading { font-size:1.75rem;font-weight:700;margin-bottom:14px; }
.split-lead { color:rgba(255,255,255,.72);font-size:.9375rem;margin-bottom:20px;line-height:1.6; }
.split-input-row { display:flex;gap:10px;flex-wrap:wrap;align-items:flex-end; }
.split-input-row .split-field { flex:1;min-width:160px;margin:0; }
.split-field { margin-bottom:14px; }
.white-input { color:#fff!important;border-bottom-color:rgba(255,255,255,.5)!important;box-shadow:none!important; }
.white-input:focus { border-bottom-color:#03dac6!important;box-shadow:0 1px 0 0 #03dac6!important; }
.white-input::placeholder { color:rgba(255,255,255,.4)!important; }
.white-label { color:rgba(255,255,255,.6)!important; }
.input-field .white-input:focus ~ .white-label,
.input-field .white-input.valid ~ .white-label,
.input-field .white-input.active ~ .white-label { color:#03dac6!important; }
.split-field .materialize-textarea.white-input { min-height:80px;resize:none; }
.split-btn-teal { background-color:#03dac6!important;color:#000!important;font-weight:700!important;white-space:nowrap;margin-top:4px; }
.split-btn-teal:hover { background-color:#018786!important;color:#fff!important; }
.split-success { color:#4caf50;font-weight:600;font-size:.9375rem;margin-top:8px; }

/* ── Chem/EV wizard button colour fixes ─────────────────── */
.btn.waves-effect.waves-light[style*="e64a19"],.btn-large.waves-effect.waves-light[style*="e64a19"] { background-color:#e64a19!important; }
.btn.waves-effect.waves-light[style*="2e7d32"],.btn-large.waves-effect.waves-light[style*="2e7d32"],.btn-floating.waves-effect.waves-light[style*="2e7d32"] { background-color:#2e7d32!important; }

/* ── Chemical category/packaging grids ──────────────────── */
.chem-cat-grid { display:grid;grid-template-columns:repeat(3,1fr);gap:12px; }
.chem-pkg-grid { display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:24px; }
@media (max-width:600px) { .chem-cat-grid { grid-template-columns:repeat(2,1fr); } .chem-pkg-grid { grid-template-columns:repeat(2,1fr); } }

/* ── Navbar colour enforcement ───────────────────────────── */
nav, nav .nav-wrapper { background-color:#6200ee!important;z-index:1500!important; }

/* ══════════════════════════════════════════════════════════
   54. CHEMICAL DIVISION HERO GRADIENTS (restored)
   ══════════════════════════════════════════════════════════ */
.chem-hero-industrial {
    position: relative; overflow: hidden; color: #fff;
    background: linear-gradient(135deg, #3e2723, #bf360c, #e64a19);
}
.chem-hero-specialty {
    position: relative; overflow: hidden; color: #fff;
    background: linear-gradient(135deg, #1a237e, #283593, #3949ab);
}
.chem-hero-pharma {
    position: relative; overflow: hidden; color: #fff;
    background: linear-gradient(135deg, #004d40, #00695c, #00897b);
}
.chem-hero-electronic {
    position: relative; overflow: hidden; color: #fff;
    background: linear-gradient(135deg, #4a148c, #6a1b9a, #8e24aa);
}

/* ── Chemical section kickers ───────────────────────────── */
.kicker-chem-industrial { color: #e64a19; background: #fff3e0; }
.kicker-chem-specialty  { color: #3949ab; background: #e8eaf6; }
.kicker-chem-pharma     { color: #00897b; background: #e0f2f1; }
.kicker-chem-electronic { color: #8e24aa; background: #f3e5f5; }
.kicker-chem-sds        { color: #854F0B; background: #fff8e1; }
.kicker-chem-quotation  { color: #e64a19; background: #fff3e0; }

/* ── Chemical table ─────────────────────────────────────── */
.chem-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: 10px; border: 1px solid #e0e0e0; }
.chem-table { width: 100%; border-collapse: collapse; min-width: 400px; font-size: .9rem; }
.chem-table thead tr { background: #f5f5f5; }
.chem-table th { padding: 13px 16px; text-align: left; font-weight: 700; color: #1a1a1a; }
.chem-table td { padding: 12px 16px; border-top: 1px solid #f0f0f0; color: #424242; vertical-align: top; }
.chem-table tbody tr:hover { background: #fafafa; }
.chem-table .chem-badge { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: .75rem; font-weight: 700; background: #fff3e0; color: #e64a19; }

/* ── Quotation process step card ────────────────────────── */
.quote-step-card { background: #fff; border-radius: 12px; border: 1px solid #e0e0e0; border-top: 4px solid #e64a19; padding: 22px 20px; height: 100%; box-sizing: border-box; text-align: center; transition: box-shadow .2s, transform .2s; }
.quote-step-card:hover { box-shadow: 0 8px 24px rgba(230,74,25,.12); transform: translateY(-3px); }
.quote-step-num { width: 40px; height: 40px; border-radius: 50%; background: #e64a19; color: #fff; font-weight: 800; font-size: 1.125rem; display: flex; align-items: center; justify-content: center; margin: 0 auto 12px; }
.quote-step-card h4 { font-weight: 700; color: #1a1a1a; margin-bottom: 8px; }
.quote-step-card p  { font-size: .875rem; color: #616161; line-height: 1.6; margin: 0; }

/* ── Semiconductor process map ──────────────────────────── */
.semi-process { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 16px; }
.semi-step { display: flex; align-items: center; background: #f3e5f5; border: 1px solid rgba(142,36,170,.2); border-radius: 8px; padding: 10px 14px; font-size: .875rem; font-weight: 600; color: #6a1b9a; }
.semi-arrow { color: #9e9e9e; font-size: 1.25rem; flex-shrink: 0; }

/* ── SDS feature card ───────────────────────────────────── */
.sds-feature-card { background: #fff; border-radius: 10px; border: 1px solid #e0e0e0; border-left: 4px solid #854F0B; padding: 18px 20px; height: 100%; box-sizing: border-box; transition: box-shadow .2s; }
.sds-feature-card:hover { box-shadow: 0 4px 14px rgba(133,79,11,.1); }
.sds-feature-card h4 { font-weight: 700; color: #1a1a1a; margin-bottom: 6px; }
.sds-feature-card p  { font-size: .875rem; color: #616161; line-height: 1.6; margin: 0; }

/* ── Pharma therapeutic chip ────────────────────────────── */
.pharma-chip { display: inline-flex; padding: 7px 16px; border-radius: 999px; background: #e0f2f1; color: #00695c; font-size: .8125rem; font-weight: 600; border: 1.5px solid rgba(0,105,92,.2); margin: 4px; transition: background .15s; }
.pharma-chip:hover { background: #00695c; color: #fff; }

/* ── Cybersecurity dark theme ───────────────────────────── */
.cyber-hero { background: linear-gradient(135deg, #0d1117 0%, #1a237e 50%, #0288d1 100%); position: relative; overflow: hidden; color: #fff; }
.cyber-badge { display: inline-flex; align-items: center; gap: 8px; background: rgba(0,255,136,.1); border: 1px solid rgba(0,255,136,.25); border-radius: 999px; padding: 5px 16px; font-size: .8rem; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: #00ff88; margin-bottom: 20px; }
.cyber-dot  { width: 6px; height: 6px; border-radius: 50%; background: #00ff88; animation: pulse 2s infinite; flex-shrink: 0; }
.cyber-glow { color: #00ff88; }
.cyber-card { background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.1); border-radius: 12px; padding: 26px 22px; height: 100%; box-sizing: border-box; transition: border-color .25s, background .25s; }
.cyber-card:hover { border-color: rgba(0,255,136,.35); background: rgba(0,255,136,.04); }
.cyber-card h3 { color: #e2e8f0; font-size: .9375rem; font-weight: 700; margin-bottom: 7px; }
.cyber-card p  { color: rgba(255,255,255,.55); font-size: .8125rem; line-height: 1.65; margin: 0; }
.cyber-icon-wrap { width: 48px; height: 48px; border-radius: 10px; background: rgba(0,255,136,.1); border: 1px solid rgba(0,255,136,.2); display: flex; align-items: center; justify-content: center; font-size: 1.4rem; margin-bottom: 14px; }
.cyber-chip { display: inline-flex; align-items: center; padding: 6px 14px; border-radius: 999px; background: rgba(0,255,136,.08); color: #00ff88; font-size: .8125rem; font-weight: 600; border: 1px solid rgba(0,255,136,.2); margin: 4px; transition: background .15s; }
.cyber-chip:hover { background: rgba(0,255,136,.18); }
.cyber-stat { background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.09); border-radius: 12px; padding: 22px 18px; text-align: center; }
.cyber-stat-num { font-size: 2rem; font-weight: 800; color: #00ff88; line-height: 1; }
.cyber-stat-lbl { font-size: .8125rem; color: rgba(255,255,255,.6); margin-top: 5px; }
.cyber-compliance { display: flex; align-items: flex-start; gap: 12px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.09); border-radius: 10px; padding: 14px 16px; margin-bottom: 10px; }
.cyber-compliance-icon { font-size: 1.5rem; flex-shrink: 0; }
.cyber-compliance h4 { color: #e2e8f0; font-weight: 700; font-size: .9375rem; margin-bottom: 3px; }
.cyber-compliance p  { color: rgba(255,255,255,.55); font-size: .8125rem; margin: 0; line-height: 1.5; }
.cyber-section     { padding: 56px 0; background: #0d1117; }
.cyber-section-alt { padding: 56px 0; background: #111827; }
@media (max-width: 600px) { .cyber-section, .cyber-section-alt { padding: 36px 0; } .semi-process { flex-direction: column; align-items: flex-start; } .semi-arrow { transform: rotate(90deg); } }

/* ── IT sub-page hero backgrounds (restored) ────────────── */
.it-subpage-hero { background: linear-gradient(135deg,#0d47a1,#185FA5,#0288d1); padding: 72px 0 56px; position: relative; overflow: hidden; color: #fff; }
.it-subpage-hero::before { content:''; position:absolute; inset:0; background-image:radial-gradient(circle at 1px 1px,rgba(255,255,255,.5) 1px,transparent 0); background-size:28px 28px; opacity:.06; pointer-events:none; }
.it-subpage-hero .container { position: relative; z-index: 2; }
.section-kicker { display:inline-block; font-size:.72rem; font-weight:700; text-transform:uppercase; letter-spacing:.1em; color:#185FA5; background:#e3f2fd; padding:3px 12px; border-radius:999px; margin-bottom:10px; }
.section-kicker.kicker-light { color:#90caf9; background:rgba(144,202,249,.15); }
.it-h2 { font-size:clamp(1.4rem,2.5vw,1.875rem); font-weight:800; color:#0f172a; margin-bottom:10px; letter-spacing:-.01em; }
.it-h2-light { color:#fff; }
.it-lead { color:#5a6272; line-height:1.7; max-width:640px; }
.it-lead-light { color:rgba(255,255,255,.78); }