/* =========================================================
   Kuncham Controls — Glassmorphism surface layer
   ---------------------------------------------------------
   Surface treatment ONLY. No layout, spacing, type, copy or
   behaviour is changed here; this file re-skins backgrounds,
   borders, shadows and blur on existing components.

   Loaded LAST (after kc-ui.css / kc-performance.css and, on the
   engineering pages, after their own sheets).  Remove the <link>
   to kc-glass.css to return to the previous look.

   Sections
     0. Tokens
     1. Ambient backdrop (what the glass refracts)
     2. Transparent page sections
     3. Header, mega-menu, mobile menu
     4. Home hero slider
     5. Cards & panels (light glass)
     6. Dark glass (tile bodies, bands, CTA, footer)
     7. Buttons, chips, tabs, form fields
     8. Product page (side menu, accordion, slider, resources)
     9. Modals, support panel, floating buttons
    10. Engineering tools / calculators
    11. Fallbacks (no backdrop-filter, contrast, motion, print)
   12. Polish (finishing touches)
   ========================================================= */

/* ---------------------------------------------------------
   0. TOKENS
   --------------------------------------------------------- */
:root {
    --kcg-blur: 24px;
    --kcg-blur-lg: 32px;
    --kcg-sat: 180%;

    /* fine frosted-glass grain (tiny inline SVG noise, no network request) */
    --kcg-noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .30  0 0 0 0 .38  0 0 0 0 .48  0 0 0 .7 -.30'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    /* diagonal specular streak: light catches the top-left of a glass pane */
    --kcg-sheen: linear-gradient(118deg, rgba(255,255,255,.62) 0%, rgba(255,255,255,.20) 30%, rgba(255,255,255,0) 58%);

    /* light glass: sheen + grain + body */
    --kcg-fill:      var(--kcg-sheen), var(--kcg-noise), linear-gradient(160deg, rgba(255,255,255,.56) 0%, rgba(255,255,255,.28) 100%);
    --kcg-fill-soft: var(--kcg-sheen), var(--kcg-noise), linear-gradient(160deg, rgba(255,255,255,.44) 0%, rgba(255,255,255,.20) 100%);
    --kcg-flat:      rgba(255,255,255,.46);
    --kcg-flat-soft: rgba(255,255,255,.30);
    --kcg-hairline:  rgba(255,255,255,.75);
    /* glass thickness: bright top-left rim, soft bottom-right rim, inner glow */
    --kcg-edge:
        inset 1.5px 1.5px 0 rgba(255,255,255,.95),
        inset -1px -1px 0 rgba(255,255,255,.38),
        inset 0 0 0 1px rgba(255,255,255,.30),
        inset 0 0 26px rgba(255,255,255,.40);
    /* layered, cool-toned depth shadow */
    --kcg-lift:      0 1px 2px rgba(20,38,58,.06), 0 10px 26px rgba(20,38,58,.10), 0 34px 60px -14px rgba(20,38,58,.16);
    --kcg-lift-lg:   0 2px 4px rgba(20,38,58,.07), 0 16px 38px rgba(20,38,58,.14), 0 44px 80px -16px rgba(20,38,58,.22);

    /* tinted / dark glass */
    --kcg-dark:      var(--kcg-noise), linear-gradient(150deg, rgba(24,106,170,.82) 0%, rgba(9,52,88,.92) 100%);
    --kcg-dark-deep: var(--kcg-noise), linear-gradient(160deg, rgba(14,44,68,.92) 0%, rgba(8,26,40,.95) 100%);
    --kcg-dark-edge: inset 1.5px 1.5px 0 rgba(255,255,255,.34), inset -1px -1px 0 rgba(255,255,255,.08), inset 0 0 0 1px rgba(255,255,255,.12), inset 0 0 30px rgba(255,255,255,.06);
    --kcg-shine:     radial-gradient(120% 90% at 0% 0%, rgba(255,255,255,.26) 0%, rgba(255,255,255,0) 55%);

    /* brand accent glass (primary buttons, active chips) */
    --kcg-accent:    linear-gradient(180deg, rgba(255,255,255,.22) 0%, rgba(255,255,255,0) 46%), linear-gradient(160deg, rgba(30,128,196,.95) 0%, rgba(12,72,123,.97) 100%);
    --kcg-accent-hi: linear-gradient(180deg, rgba(255,255,255,.28) 0%, rgba(255,255,255,0) 46%), linear-gradient(160deg, rgba(48,150,216,.98) 0%, rgba(14,84,142,.98) 100%);
    --kcg-accent-edge: inset 0 0 0 1px rgba(255,255,255,.30), inset 0 1.5px 0 rgba(255,255,255,.55), inset 0 -8px 14px rgba(0,30,60,.18);
}

/* ---------------------------------------------------------
   1. AMBIENT BACKDROP
   Fixed to the viewport so cards drift over soft colour
   fields as the page scrolls; the blur below them reads as
   frosted glass.
   --------------------------------------------------------- */
html { background: #e4e9ef !important; }
body { background: transparent !important; }

body::before,
body::after {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
}
/* quiet, single-hue (cool slate) backdrop */
body::before {
    z-index: -2;
    background:
        radial-gradient(64vmax 50vmax at 2% 0%,   rgba(84,110,142,.20), rgba(84,110,142,0) 70%),
        radial-gradient(60vmax 48vmax at 100% 100%, rgba(84,116,140,.17), rgba(84,116,140,0) 70%),
        linear-gradient(160deg, #eaeef3 0%, #e1e7ee 48%, #e9edf2 100%);
}
/* soft slate + pale discs and a light diagonal band: neutral shapes for the glass to blur */
body::after {
    z-index: -1;
    background:
        linear-gradient(115deg, rgba(255,255,255,0) 30%, rgba(255,255,255,.42) 44%, rgba(255,255,255,0) 58%),
        radial-gradient(circle at 12% 30%, rgba(96,124,158,.26) 0, rgba(96,124,158,.19) 7vmax, rgba(96,124,158,0) 12vmax),
        radial-gradient(circle at 88% 22%, rgba(255,255,255,.75) 0, rgba(255,255,255,.55) 6vmax, rgba(255,255,255,0) 11vmax),
        radial-gradient(circle at 70% 76%, rgba(84,112,146,.22) 0, rgba(84,112,146,.15) 7vmax, rgba(84,112,146,0) 12vmax),
        radial-gradient(circle at 26% 84%, rgba(255,255,255,.65) 0, rgba(255,255,255,.45) 5vmax, rgba(255,255,255,0) 9vmax);
}

/* ---------------------------------------------------------
   2. PAGE SECTIONS — let the backdrop show through
   (flat #fff / #f5f5f5 / #f4f7f9 bands become transparent)
   --------------------------------------------------------- */
section.kc-band,
section.p-0:not(.bg-base-color):not(.kc-home-slider),
section.sm-pb-20px,
section.bg-very-light-gray,
section.kc-section-tight,
.kc-home-tools,
.kc-product-section,
.kc-product-section--muted,
.kc-catalog-section,
.kc-catalog-section--muted,
.kc-catalog-page,
.kc-contact-main,
.kc-about-values,
.kc-about-intro,
.kc-about-global,
.kc-gallery-page,
.kc-hub-tools,
.kc-tool-workspace,
.kc-tool-guide,
.kc-tool-reference,
.kc-tool-more,
.kc-tool-related,
.kc-tool-switch,
.kc-breadcrumb-bar,
.kc-tools-hero,
.kc-tool-hero,
.kc-transmitter-overview,
.kc-product-main,
.kc-product-resources,
.kc-hub-section {
    background: transparent !important;
    background-image: none !important;
}
section.kc-catalog-hero {
    background: transparent !important;
}
/* NB: photographic hero sections (.kc-corp-hero, .kc-catalog-hero) are
   deliberately NOT in the list above and keep their images. */

.kc-breadcrumb,
.kc-tools-breadcrumb,
nav.kc-breadcrumb {
    background: var(--kcg-flat-soft) !important;
    -webkit-backdrop-filter: blur(12px) saturate(150%);
    backdrop-filter: blur(12px) saturate(150%);
    border-bottom: 1px solid var(--kcg-hairline) !important;
}

/* Images shipped with an opaque white background (client logos, the dotted
   world map) blend into the glass instead of sitting in white boxes. */
.client-box img,
.clients-style-04 img,
.kc-section-tight img.position-absolute {
    mix-blend-mode: multiply;
}
.clients-style-04 .col,
.clients-style-04 .col.border-end {
    border-color: rgba(255,255,255,.70) !important;
}

/* ---------------------------------------------------------
   3. HEADER / MEGA MENU / MOBILE MENU
   --------------------------------------------------------- */
.header-top-bar,
.header-top-bar.top-bar-dark,
.header-top-bar.bg-dark-gray {
    background: linear-gradient(100deg, rgba(14,40,60,.80) 0%, rgba(18,58,88,.68) 100%) !important;
    -webkit-backdrop-filter: blur(var(--kcg-blur)) saturate(150%);
    backdrop-filter: blur(var(--kcg-blur)) saturate(150%);
    box-shadow: inset 0 -1px 0 rgba(255,255,255,.12);
}

header.header-with-topbar .navbar.navbar-expand-lg,
header.header-with-topbar .navbar.header-light,
header.header-with-topbar .navbar.bg-white,
header.header-with-topbar.sticky .navbar,
header.header-with-topbar.sticky.sticky-active .navbar {
    background:
        linear-gradient(115deg, rgba(255,255,255,.90) 0%, rgba(250,253,255,.84) 55%, rgba(232,244,252,.88) 100%) !important;
    -webkit-backdrop-filter: blur(var(--kcg-blur-lg)) saturate(185%);
    backdrop-filter: blur(var(--kcg-blur-lg)) saturate(185%);
    border-bottom: 1px solid rgba(255,255,255,.75) !important;
    box-shadow: 0 10px 32px rgba(14,79,127,.13), inset 0 1px 0 rgba(255,255,255,.85) !important;
}

/* Products mega-menu + sub-menus: deep glass. It lives inside the
   blurred header, so it carries its own opacity instead of relying on
   a second nested blur. */
.kc-products-panel {
    background: linear-gradient(155deg, rgba(16,58,92,.985) 0%, rgba(9,36,58,.99) 100%) !important;
    box-shadow: 0 24px 60px rgba(6,26,44,.38), inset 0 0 0 1px rgba(255,255,255,.14), inset 0 1px 0 rgba(255,255,255,.25) !important;
    border-radius: 12px;
}
.kc-product-submenu { background: rgba(255,255,255,.07) !important; }

@media (max-width: 991.98px) {
    #navbarNav,
    .navbar-collapse#navbarNav,
    #navbarNav.collapse.show,
    #navbarNav.collapsing {
        background: linear-gradient(160deg, rgba(214,231,244,.97) 0%, rgba(186,213,234,.96) 100%) !important;
        box-shadow: 0 22px 34px -8px rgba(10,40,66,.38), 0 6px 14px rgba(10,40,66,.16), inset 0 1px 0 rgba(255,255,255,.9) !important;
    }
}

/* ---------------------------------------------------------
   4. HOME HERO SLIDER
   --------------------------------------------------------- */
/* No backdrop-filter on the slider frame: its overflow-clipped swiper is a
   separate compositing layer and the blur rendered as a visible band. */
.kc-home-slider {
    background: var(--kcg-fill-soft) !important;
    box-shadow: var(--kcg-edge), var(--kcg-lift-lg) !important;
}
.kc-home-slider .swiper,
.kc-home-slide,
.kc-home-slider .swiper-slide,
.kc-home-slider-shell {
    background: transparent !important;
}
.kc-home-slide__copy {
    background:
        var(--kcg-shine),
        var(--kcg-dark) !important;
    box-shadow: var(--kcg-dark-edge);
}
.kc-home-slide__background {
    background-color: rgba(255,255,255,.35) !important;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.55);
}
.kc-home-slide__halo {
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.18), 0 0 40px rgba(120,190,240,.20);
}
.kc-home-slider__pagination,
.kc-home-slider__pagination.swiper-pagination-clickable {
    background: rgba(255,255,255,.22) !important;
    -webkit-backdrop-filter: blur(12px) saturate(170%);
    backdrop-filter: blur(12px) saturate(170%);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.45), 0 6px 18px rgba(8,44,74,.22) !important;
}

/* ---------------------------------------------------------
   5. CARDS & PANELS — LIGHT GLASS
   Outer surface gets the blur. Anything nested inside another
   blurred surface only gets a translucent fill (a nested
   backdrop-filter would only see its parent, not the page).
   --------------------------------------------------------- */
.kc-tile,
.kc-product-card,
.kc-transmitter-card,
.kc-variant-card,
.kc-home-tool,
div.card.border-0.border-radius-20px,
.kc-resource-card,
.kc-value-card,
.kc-contact-form-card,
.kc-product-gallery-card,
.kc-contact-channel,
.kc-location-card,
.kc-related-tools,
.kc-hub-spec-grid,
.kc-hub-faq__list,
.kc-about-global__visual,
.kc-tool-reference__formula,
.kc-tool-reference__examples,
.kc-tool-query-box,
.kc-tool-launcher,
.kc-catalog-preview,
.kc-wiz {
    background: var(--kcg-fill) !important;
    border-color: var(--kcg-hairline) !important;
    -webkit-backdrop-filter: blur(var(--kcg-blur)) saturate(var(--kcg-sat));
    backdrop-filter: blur(var(--kcg-blur)) saturate(var(--kcg-sat));
    box-shadow: var(--kcg-edge), var(--kcg-lift) !important;
}
.kc-tile:hover,
.kc-product-card:hover,
.kc-variant-card:hover,
.kc-home-tool:hover,
.kc-value-card:hover,
.kc-product-gallery-card:hover,
.kc-contact-channel:hover,
.kc-tool-launcher:hover {
    box-shadow: var(--kcg-edge), var(--kcg-lift-lg) !important;
}

/* image wells inside cards */
.kc-tile__media,
.kc-product-card__image,
.kc-variant-card__image,
.kc-product-gallery-card__media,
.kc-slider,
.kc-slider__viewport,
.kc-slide {
    background: linear-gradient(160deg, rgba(255,255,255,.62) 0%, rgba(255,255,255,.22) 100%) !important;
}
/* product photos sit directly on the glass well (their grey fill removed) */
.kc-tile__media img,
.kc-product-card__image img,
.kc-variant-card__image img,
.kc-slide img,
.kc-product-gallery-card__media img {
    background: transparent !important;
}
.kc-slider {
    border-color: var(--kcg-hairline) !important;
    -webkit-backdrop-filter: blur(var(--kcg-blur)) saturate(var(--kcg-sat));
    backdrop-filter: blur(var(--kcg-blur)) saturate(var(--kcg-sat));
    box-shadow: var(--kcg-edge), var(--kcg-lift) !important;
}
.kc-slider figcaption,
.kc-slider__caption {
    background: rgba(255,255,255,.55) !important;
}

/* small light rows/items nested in glass: fill only, no blur */
.kc-related-tool-card,
.kc-hub-spec-grid dd,
.kc-hub-spec-grid dt,
.kc-tool-formula,
.kc-about-global__note,
.kc-variant-card__model,
.kc-home-tools__selector,
.kc-hub-application-grid > *,
.kc-hub-highlight-grid > *,
.kc-hub-why-grid > *,
.kc-hub-steps > * {
    background: var(--kcg-flat) !important;
    border-color: var(--kcg-hairline) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.85);
}
.kc-hub-spec-grid dt { background: rgba(255,255,255,.34) !important; }
.kc-related-tool-card:hover,
.kc-home-tools__selector:hover { background: rgba(255,255,255,.72) !important; }

/* value-card & contact icons: soft tinted glass chips */
.kc-value-card__icon,
.kc-contact-channel__icon,
.kc-resource-card__icon,
.kc-tool-launcher__icon {
    background: linear-gradient(150deg, rgba(255,255,255,.80), rgba(200,225,244,.55)) !important;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.75), 0 4px 12px rgba(14,79,127,.12);
}

/* ---------------------------------------------------------
   6. DARK GLASS
   --------------------------------------------------------- */
/* card bodies that used a solid navy fill */
.kc-tile__body,
.kc-transmitter-card__link,
a.kc-transmitter-card__link {
    background:
        var(--kcg-shine),
        var(--kcg-dark) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.28) !important;
}
.kc-transmitter-card__link:hover,
a.kc-transmitter-card__link:hover {
    background: var(--kcg-shine), var(--kcg-accent-hi) !important;
}

/* "Save your time…" strip */
section.p-0.bg-base-color,
section.bg-base-color {
    background:
        var(--kcg-shine),
        linear-gradient(100deg, rgba(20,104,168,.86) 0%, rgba(12,72,123,.88) 100%) !important;
    -webkit-backdrop-filter: blur(var(--kcg-blur)) saturate(150%);
    backdrop-filter: blur(var(--kcg-blur)) saturate(150%);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.30), inset 0 -1px 0 rgba(255,255,255,.10);
}

/* pre-footer call-to-action band */
.kc-footer-cta {
    background:
        var(--kcg-shine),
        linear-gradient(100deg, rgba(14,74,124,.90) 0%, rgba(10,50,86,.92) 55%, rgba(16,92,148,.88) 100%) !important;
    -webkit-backdrop-filter: blur(var(--kcg-blur)) saturate(150%);
    backdrop-filter: blur(var(--kcg-blur)) saturate(150%);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.28);
}

/* footer */
.kc-site-footer {
    background:
        radial-gradient(60% 50% at 12% 0%, rgba(56,150,222,.22), rgba(56,150,222,0) 70%),
        var(--kcg-dark-deep) !important;
    -webkit-backdrop-filter: blur(var(--kcg-blur-lg)) saturate(150%);
    backdrop-filter: blur(var(--kcg-blur-lg)) saturate(150%);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.14);
}
.kc-footer-location {
    background: linear-gradient(150deg, rgba(255,255,255,.10), rgba(255,255,255,.03)) !important;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.14), inset 0 1px 0 rgba(255,255,255,.22);
}
.kc-footer-social a,
.kc-footer-contact a[class*="icon"],
.kc-footer-contact [class*="icon"] {
    background-color: rgba(255,255,255,.08);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.16);
}

/* ---------------------------------------------------------
   7. BUTTONS, CHIPS, TABS, FORM FIELDS
   --------------------------------------------------------- */
/* primary */
.btn.btn-base-color,
.btn-base-color,
.kc-corp-button--primary,
.kc-catalog-button--primary,
button.kc-corp-button--primary,
.kc-variant-spec-trigger,
.kc-gallery-filter.is-active,
.kc-hub-tabs button.is-active,
.kc-tool-switch .is-current,
span.is-current {
    background: var(--kcg-accent) !important;
    border-color: rgba(255,255,255,.30) !important;
    box-shadow: var(--kcg-accent-edge), 0 10px 24px rgba(14,79,127,.28) !important;
}
.btn.btn-base-color:hover,
.kc-corp-button--primary:hover,
.kc-catalog-button--primary:hover,
.kc-variant-spec-trigger:hover {
    background: var(--kcg-accent-hi) !important;
}
/* dark */
.btn.btn-dark-gray,
.btn-dark-gray {
    background: linear-gradient(160deg, rgba(38,62,80,.92) 0%, rgba(20,34,46,.94) 100%) !important;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.16), inset 0 1px 0 rgba(255,255,255,.28), 0 10px 24px rgba(12,30,44,.26) !important;
}
/* light buttons that sit on dark bands / photo heroes stay near-white */
.kc-footer-button--light,
.kc-corp-button--light {
    background: linear-gradient(160deg, rgba(255,255,255,.96), rgba(232,243,251,.90)) !important;
    border-color: rgba(255,255,255,.90) !important;
    box-shadow: inset 0 1px 0 #fff, 0 8px 20px rgba(6,26,44,.28) !important;
}
.kc-footer-button--light:hover,
.kc-corp-button--light:hover { background: #fff !important; }
/* light / secondary / ghost */
.kc-catalog-button--secondary,
.kc-tool-hero__all,
.kc-gallery-filter,
.kc-hub-tabs button,
.kc-variant-quote-trigger,
.kc-tool-switch a,
.kc-home-tools__actions a,
.kc-tool-more a {
    background: rgba(255,255,255,.58) !important;
    -webkit-backdrop-filter: blur(12px) saturate(170%);
    backdrop-filter: blur(12px) saturate(170%);
    border-color: rgba(255,255,255,.80) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.95), 0 6px 16px rgba(14,79,127,.10) !important;
}
.kc-catalog-button--secondary:hover,
.kc-tool-hero__all:hover,
.kc-gallery-filter:hover,
.kc-hub-tabs button:hover,
.kc-variant-quote-trigger:hover,
.kc-tool-switch a:hover {
    background: rgba(255,255,255,.86) !important;
}
.kc-footer-button--outline,
.kc-corp-button--ghost {
    background: rgba(255,255,255,.10) !important;
    -webkit-backdrop-filter: blur(12px) saturate(160%);
    backdrop-filter: blur(12px) saturate(160%);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.34), inset 0 1px 0 rgba(255,255,255,.40);
}

/* sticky sub-navs */
.kc-catalog-jump,
.kc-hub-tabs {
    background: rgba(246,250,254,.58) !important;
    -webkit-backdrop-filter: blur(var(--kcg-blur)) saturate(180%);
    backdrop-filter: blur(var(--kcg-blur)) saturate(180%);
    box-shadow: inset 0 -1px 0 rgba(255,255,255,.75), 0 8px 24px rgba(14,79,127,.08) !important;
}

/* pills */
.kc-product-section span[class*="pill"],
.kc-hero-badge,
.kc-tool-hero__badge {
    background: rgba(255,255,255,.62) !important;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.8);
}
.kc-tool-hero__badge {
    background: var(--kcg-accent) !important;
    box-shadow: var(--kcg-accent-edge), 0 10px 22px rgba(14,79,127,.26) !important;
}

/* form fields: frosted wells */
.form-control,
.kc-contact-field__control,
.kc-contact-form input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
.kc-contact-form textarea,
.kc-contact-form select,
.kc-support-panel input,
.kc-support-panel textarea,
.kc-support-panel select {
    background: rgba(255,255,255,.46) !important;
    border-color: rgba(255,255,255,.80) !important;
    box-shadow: inset 0 2px 6px rgba(14,79,127,.07), inset 0 1px 0 rgba(255,255,255,.70);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
}
.form-control:focus,
.kc-contact-field__control:focus,
.kc-contact-form input:focus,
.kc-contact-form textarea:focus,
.kc-contact-form select:focus,
.kc-support-panel input:focus,
.kc-support-panel textarea:focus {
    background: rgba(255,255,255,.80) !important;
    border-color: rgba(30,128,196,.70) !important;
    box-shadow: 0 0 0 3px rgba(30,128,196,.20), inset 0 1px 0 rgba(255,255,255,.9);
}

/* ---------------------------------------------------------
   8. PRODUCT PAGE
   --------------------------------------------------------- */
/* left product menu */
.kc-side .bg-very-light-gray,
.kc-side > div,
div.bg-very-light-gray.border-radius-6px {
    background: var(--kcg-fill) !important;
    -webkit-backdrop-filter: blur(var(--kcg-blur)) saturate(var(--kcg-sat));
    backdrop-filter: blur(var(--kcg-blur)) saturate(var(--kcg-sat));
    box-shadow: var(--kcg-edge), var(--kcg-lift) !important;
    border-radius: 14px;
}
.kc-side .bg-base-color { background: var(--kcg-accent) !important; }

/* accordion rows */
.kc-product-accordion__item,
details.kc-product-accordion__item {
    background: var(--kcg-flat-soft) !important;
    box-shadow: inset 0 -1px 0 rgba(255,255,255,.75);
}
.kc-product-accordion__item[open] {
    background: var(--kcg-fill-soft) !important;
}
.kc-product-accordion__icon {
    background: rgba(255,255,255,.66) !important;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.85), 0 3px 10px rgba(14,79,127,.10);
}
/* open item keeps its filled (dark) icon so the white "×" stays visible */
.kc-product-accordion__item[open] .kc-product-accordion__icon {
    background: linear-gradient(160deg, rgba(38,62,80,.94), rgba(20,34,46,.96)) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.28), 0 4px 12px rgba(12,30,44,.26);
}

/* related-tools / resources ribbon (flow switch page) */
.kc-related-tools { border-radius: 14px; }
.kc-resource-card__links a,
.kc-resource-card__links button {
    background: rgba(255,255,255,.60) !important;
    border-color: rgba(255,255,255,.85) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.95);
}

/* transmitter overview hero (category page) */
header.kc-transmitter-overview__hero,
.kc-transmitter-overview__hero {
    background:
        var(--kcg-shine),
        var(--kcg-fill) !important;
    -webkit-backdrop-filter: blur(var(--kcg-blur-lg)) saturate(var(--kcg-sat));
    backdrop-filter: blur(var(--kcg-blur-lg)) saturate(var(--kcg-sat));
    box-shadow: var(--kcg-edge), var(--kcg-lift-lg) !important;
}
.kc-transmitter-overview__meta span,
.kc-transmitter-overview a[class=""],
.kc-model-badge {
    background: rgba(255,255,255,.62) !important;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.85);
}

/* catalogue hero preview cards stay legible over the photo */
.kc-catalog-preview {
    background: var(--kcg-fill) !important;
}

/* gallery */
.kc-product-gallery-card__caption {
    background: rgba(255,255,255,.40) !important;
}

/* ---------------------------------------------------------
   9. MODALS, SUPPORT PANEL, FLOATING BUTTONS
   --------------------------------------------------------- */
.kc-variant-modal__backdrop {
    background: rgba(10,34,54,.34) !important;
    -webkit-backdrop-filter: blur(10px) saturate(140%);
    backdrop-filter: blur(10px) saturate(140%);
}
.kc-variant-modal__dialog,
.kc-dialog,
.kc-support-panel {
    background:
        var(--kcg-shine),
        linear-gradient(150deg, rgba(255,255,255,.93) 0%, rgba(240,248,253,.88) 100%) !important;
    border-color: rgba(255,255,255,.85) !important;
    -webkit-backdrop-filter: blur(var(--kcg-blur-lg)) saturate(var(--kcg-sat));
    backdrop-filter: blur(var(--kcg-blur-lg)) saturate(var(--kcg-sat));
    box-shadow: var(--kcg-edge), 0 30px 80px rgba(8,36,60,.34) !important;
}
.kc-support-panel__head {
    background: linear-gradient(150deg, rgba(22,104,166,.86), rgba(9,52,88,.92)) !important;
    box-shadow: inset 0 -1px 0 rgba(255,255,255,.14);
}
.kc-support-fab,
.kc-whatsapp-button {
    box-shadow: inset 0 1px 0 rgba(255,255,255,.45), 0 12px 28px rgba(8,44,74,.30) !important;
}
.kc-support-fab {
    background: var(--kcg-shine), linear-gradient(155deg, rgba(22,104,166,.92), rgba(9,52,88,.96)) !important;
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
}

/* ---------------------------------------------------------
   10. ENGINEERING TOOLS
   --------------------------------------------------------- */
.kc-toolkit-frame-wrap,
.kc-seo-toolkit .kc-toolkit-frame-wrap {
    background: var(--kcg-fill-soft) !important;
    border-color: var(--kcg-hairline) !important;
    -webkit-backdrop-filter: blur(var(--kcg-blur-lg)) saturate(var(--kcg-sat));
    backdrop-filter: blur(var(--kcg-blur-lg)) saturate(var(--kcg-sat));
    box-shadow: var(--kcg-edge), var(--kcg-lift-lg) !important;
}
.kc-toolkit-frame-wrap--hub {
    background: transparent !important;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    box-shadow: none !important;
}
.kc-toolkit-loading { background: rgba(255,255,255,.55) !important; }

.kc-wiz {
    background: var(--kcg-fill) !important;
}
.kc-wiz-opt {
    background: rgba(255,255,255,.52) !important;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.80), inset 0 1px 0 rgba(255,255,255,.95);
}
.kc-wiz-opt:hover,
.kc-wiz-opt.is-active,
.kc-wiz-opt.is-selected {
    background: rgba(255,255,255,.86) !important;
}

/* ---------------------------------------------------------
   12. POLISH — finishing touches across the site
   --------------------------------------------------------- */
::selection { background: rgba(30,110,190,.26); color: #10202c; }
html { scrollbar-color: rgba(60,110,190,.45) transparent; }
::-webkit-scrollbar-thumb { background: rgba(60,110,190,.40); border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: rgba(60,110,190,.62); }

/* consistent, visible keyboard focus */
a:focus-visible, button:focus-visible, summary:focus-visible,
[role="button"]:focus-visible, [tabindex]:focus-visible {
    outline: 2px solid rgba(30,110,200,.90);
    outline-offset: 3px;
}

/* header navigation: glass pill on hover / current page */
@media (min-width: 992px) {
    header.header-with-topbar .navbar-nav > .nav-item > .nav-link {
        border-radius: 10px;
        transition: background-color .2s ease, box-shadow .2s ease, color .2s ease;
    }
    header.header-with-topbar .navbar-nav > .nav-item > .nav-link:hover,
    header.header-with-topbar .navbar-nav > .nav-item > .nav-link.active,
    header.header-with-topbar .navbar-nav > .nav-item.show > .nav-link {
        background-color: rgba(255,255,255,.66);
        box-shadow: inset 0 0 0 1px rgba(255,255,255,.90), 0 6px 16px rgba(14,79,127,.12);
    }
}

/* left product menu: hover + current row read as glass pills */
.kc-side__list a { border-radius: 8px; transition: background-color .2s ease; }
.kc-side__list a:hover { background: rgba(255,255,255,.62); }

/* iridescent glass edge on hover for the main cards */
.kc-tile:hover,
.kc-product-card:hover,
.kc-variant-card:hover,
.kc-home-tool:hover,
.kc-value-card:hover,
.kc-product-gallery-card:hover,
.kc-contact-channel:hover,
.kc-tool-launcher:hover {
    box-shadow:
        inset 0 0 0 1px rgba(255,255,255,.85),
        inset 0 1px 0 #fff,
        0 22px 56px rgba(14,79,127,.20),
        0 4px 12px rgba(14,79,127,.10) !important;
}

/* icon chips: brand-blue to indigo glass */
.kc-location-card__icon,
.kc-home-tool__icon,
.kc-tool-hero__icon {
    background: var(--kcg-accent) !important;
    box-shadow: var(--kcg-accent-edge), 0 8px 18px rgba(14,79,127,.26);
}

/* section eyebrows on light glass: a touch deeper for contrast */
.kc-contact-main .kc-section-kicker,
.kc-contact-form-card .kc-section-kicker,
.kc-about-values .kc-section-kicker,
.kc-catalog-section .kc-section-kicker,
.kc-product-section .kc-section-kicker {
    color: #1a5fa0 !important;
}

/* hairline dividers become light-catching glass edges */
.kc-hub-faq__list > *,
.kc-product-accordion__item { border-color: rgba(255,255,255,.75) !important; }

/* headline + body colours stay brand ink; muted text a little firmer over colour */
.kc-product-section p, .kc-catalog-section p, .kc-contact-main p,
.kc-about-values p { text-shadow: 0 1px 0 rgba(255,255,255,.35); }

/* button press feedback */
.btn:active, .kc-corp-button:active, .kc-catalog-button:active { transform: translateY(1px); }

/* footer + top bar gain the same indigo depth */
.header-top-bar,
.header-top-bar.top-bar-dark,
.header-top-bar.bg-dark-gray {
    background: linear-gradient(100deg, rgba(14,40,60,.82) 0%, rgba(18,58,88,.70) 100%) !important;
}
.kc-site-footer {
    background:
        radial-gradient(60% 50% at 12% 0%, rgba(56,150,222,.22), rgba(56,150,222,0) 70%),
        var(--kcg-dark-deep) !important;
}

/* image wells: out-rank the scoped grey fills used on catalogue pages */
body .kc-product-card a.kc-product-card__image,
body .kc-catalog-page .kc-product-card__image,
body .kc-transmitter-card .kc-product-card__image,
body .kc-variant-card .kc-variant-card__image,
body .kc-tile .kc-tile__media {
    background: linear-gradient(160deg, rgba(255,255,255,.62) 0%, rgba(255,255,255,.22) 100%) !important;
}

/* product accordion (Key / Technical specifications, Applications):
   the rows are glass panels now, so text gets proper inner breathing room */
.kc-product-accordion__summary { padding: 19px 24px; }
.kc-product-accordion__content { padding: 0 24px 24px; }
@media (max-width: 767px) {
    .kc-product-accordion__summary { padding: 16px 16px; }
    .kc-product-accordion__content { padding: 0 16px 20px; }
}

/* gallery: the eyebrow above "Product Gallery" was hidden under the fixed
   header in V81 — give the heading block room so it shows */
.kc-gallery-page__header { padding-top: 36px; }

/* product accordion reads as ONE glass card instead of loose rows */
.kc-product-accordion {
    background: var(--kcg-fill) !important;
    border-radius: 16px;
    overflow: hidden;
    -webkit-backdrop-filter: blur(var(--kcg-blur)) saturate(var(--kcg-sat));
    backdrop-filter: blur(var(--kcg-blur)) saturate(var(--kcg-sat));
    box-shadow: var(--kcg-edge), var(--kcg-lift) !important;
    border-top-color: transparent !important;
}
.kc-product-accordion__item,
details.kc-product-accordion__item,
.kc-product-accordion__item[open] {
    background: transparent !important;
    box-shadow: none !important;
    border-bottom-color: rgba(14,79,127,.10) !important;
}
.kc-product-accordion__item:last-child { border-bottom-color: transparent !important; }
.kc-product-accordion__summary:hover { background: rgba(255,255,255,.35); }

/* resources band: soften the hard full-width edges */
.kc-product-resources {
    border-top-color: rgba(255,255,255,.7) !important;
    border-bottom-color: rgba(255,255,255,.7) !important;
}

/* About page: the "15+" badge number was breaking onto three lines */
figcaption > strong { white-space: nowrap; flex-shrink: 0; word-break: keep-all; overflow-wrap: normal; }

/* ---------------------------------------------------------
   13. REALISM PASS — thicker, more physical glass
   --------------------------------------------------------- */
/* header: a proper frosted pane with a lit lower edge */
header.header-with-topbar .navbar.navbar-expand-lg,
header.header-with-topbar .navbar.header-light,
header.header-with-topbar .navbar.bg-white,
header.header-with-topbar.sticky .navbar,
header.header-with-topbar.sticky.sticky-active .navbar {
    background:
        var(--kcg-sheen),
        linear-gradient(180deg, rgba(255,255,255,.88) 0%, rgba(244,248,252,.80) 100%) !important;
    box-shadow:
        inset 0 1.5px 0 rgba(255,255,255,.95),
        inset 0 -1px 0 rgba(20,38,58,.06),
        0 1px 2px rgba(20,38,58,.06),
        0 14px 34px rgba(20,38,58,.12) !important;
}

/* dark panes get the same physical rim + a darker lower lip */
.kc-tile__body,
.kc-home-slide__copy,
.kc-footer-cta,
section.bg-base-color {
    box-shadow: var(--kcg-dark-edge) !important;
}

/* value cards (About): white glyphs need a real chip; numbers become embossed, readable */
.kc-value-card__icon {
    background: var(--kcg-accent) !important;
    color: #fff !important;
    box-shadow: var(--kcg-accent-edge), 0 8px 18px rgba(14,79,127,.28) !important;
}
.kc-value-card__number {
    color: rgba(14,85,131,.20) !important;
    text-shadow: 0 1.5px 0 rgba(255,255,255,.95), 0 -1px 0 rgba(14,85,131,.10);
}

/* eyebrows that sit on light glass need real contrast; dark bands keep their light tint */
.kc-section-kicker { color: #1a5fa0; }
.kc-corp-hero .kc-section-kicker,
.kc-catalog-hero .kc-section-kicker,
.kc-footer-cta .kc-section-kicker,
.kc-site-footer .kc-section-kicker { color: #9ed0f2; }
.kc-site-footer [class*="copyright"], .kc-site-footer [class*="bottom"], .kc-site-footer [class*="legal"] { color: #c3d0da; }

/* pointer-following specular light (js/kc-glass.js adds .kcg-lit to the hovered pane) */
html .kcg-lit.kcg-lit.kcg-lit {
    background:
        radial-gradient(340px circle at var(--kcg-gx, 50%) var(--kcg-gy, 0%), rgba(255,255,255,.70), rgba(255,255,255,0) 62%),
        var(--kcg-fill) !important;
}

/* ---------------------------------------------------------
   11. FALLBACKS
   --------------------------------------------------------- */
@media (max-width: 767.98px) {
    :root { --kcg-blur: 14px; --kcg-blur-lg: 18px; }
    body::before {
        background:
            radial-gradient(90vmax 60vmax at 0% 0%,     rgba(84,110,142,.18), rgba(84,110,142,0) 70%),
            radial-gradient(90vmax 60vmax at 100% 100%, rgba(84,116,140,.15), rgba(84,116,140,0) 70%),
            linear-gradient(160deg, #eaeef3 0%, #e1e7ee 55%, #e9edf2 100%);
    }
    body::after { opacity: .8; }
}

/* browsers without backdrop-filter: make surfaces more opaque so text stays readable */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    :root {
        --kcg-fill:      linear-gradient(140deg, rgba(255,255,255,.94), rgba(244,249,253,.90));
        --kcg-fill-soft: linear-gradient(140deg, rgba(255,255,255,.90), rgba(244,249,253,.84));
        --kcg-flat:      rgba(255,255,255,.86);
        --kcg-flat-soft: rgba(255,255,255,.74);
    }
    header.header-with-topbar .navbar.navbar-expand-lg,
    header.header-with-topbar .navbar.header-light,
    header.header-with-topbar .navbar.bg-white {
        background: rgba(250,253,255,.96) !important;
    }
    .header-top-bar,
    .header-top-bar.top-bar-dark { background: #1b262c !important; }
    .kc-site-footer { background: #111f27 !important; }
    .kc-variant-modal__dialog,
    .kc-dialog,
    .kc-support-panel { background: rgba(255,255,255,.98) !important; }
}

/* users who ask for more contrast / less transparency */
@media (prefers-contrast: more), (prefers-reduced-transparency: reduce) {
    :root {
        --kcg-fill:      linear-gradient(140deg, rgba(255,255,255,.96), rgba(246,250,254,.94));
        --kcg-fill-soft: linear-gradient(140deg, rgba(255,255,255,.94), rgba(246,250,254,.90));
        --kcg-flat:      rgba(255,255,255,.90);
        --kcg-flat-soft: rgba(255,255,255,.80);
    }
    .kc-tile__body,
    .kc-home-slide__copy { background: #0c487b !important; }
    .kc-site-footer { background: #111f27 !important; }
}

@media print {
    html, body { background: #fff !important; }
    body::before, body::after { display: none !important; }
    * { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
}