.elementor-kit-3{--e-global-color-primary:#2BB8E0;--e-global-color-secondary:#0B0F14;--e-global-color-text:#0B0F14;--e-global-color-accent:#F4A02C;--e-global-color-tv-primary-dk:#1B8FB5;--e-global-color-tv-primary-dp:#12688A;--e-global-color-tv-gold:#F4A02C;--e-global-color-tv-ink-soft:#1F2937;--e-global-color-tv-surface:#F5F8FA;--e-global-color-tv-surface-cy:#E8F6FC;--e-global-color-tv-muted:#4B5563;--e-global-color-tv-border:#E5EAEF;--e-global-typography-primary-font-family:"Inter";--e-global-typography-primary-font-weight:800;--e-global-typography-secondary-font-family:"Inter";--e-global-typography-secondary-font-weight:600;--e-global-typography-text-font-family:"Inter";--e-global-typography-text-font-weight:400;--e-global-typography-accent-font-family:"Inter";--e-global-typography-accent-font-weight:500;color:#0B0F14;font-family:"Inter", Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;font-size:18px;font-weight:400;line-height:1.65em;}.elementor-kit-3 button,.elementor-kit-3 input[type="button"],.elementor-kit-3 input[type="submit"],.elementor-kit-3 .elementor-button{background-color:#2BB8E0;font-family:"Inter", Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;font-size:15px;font-weight:600;color:#FFFFFF;border-radius:10px 10px 10px 10px;}.elementor-kit-3 button:hover,.elementor-kit-3 button:focus,.elementor-kit-3 input[type="button"]:hover,.elementor-kit-3 input[type="button"]:focus,.elementor-kit-3 input[type="submit"]:hover,.elementor-kit-3 input[type="submit"]:focus,.elementor-kit-3 .elementor-button:hover,.elementor-kit-3 .elementor-button:focus{background-color:#12688A;color:#FFFFFF;}.elementor-kit-3 e-page-transition{background-color:#FFBC7D;}.elementor-kit-3 a{color:#1B8FB5;}.elementor-kit-3 a:hover{color:#2BB8E0;}.elementor-kit-3 h1{color:#0B0F14;font-family:"Inter", Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;font-weight:800;line-height:1.1em;}.elementor-kit-3 h2{color:#0B0F14;font-family:"Inter", Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;font-weight:800;line-height:1.15em;}.elementor-kit-3 h3{color:#0B0F14;font-family:"Inter", Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;font-weight:700;line-height:1.2em;}.elementor-kit-3 h4{color:#0B0F14;font-family:"Inter", Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;font-weight:700;}.elementor-kit-3 h5{color:#0B0F14;font-family:"Inter", Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;font-weight:700;}.elementor-kit-3 h6{color:#0B0F14;font-family:"Inter", Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;font-weight:800;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1240px;}.e-con{--container-max-width:1240px;}.elementor-widget:not(:last-child){--kit-widget-spacing:20px;}.elementor-element{--widgets-spacing:20px 20px;--widgets-spacing-row:20px;--widgets-spacing-column:20px;}{}h1.entry-title{display:var(--page-title-display);}.site-header .site-branding{flex-direction:column;align-items:stretch;}.site-header{padding-inline-end:0px;padding-inline-start:0px;}.site-footer .site-branding{flex-direction:column;align-items:stretch;}@media(max-width:1024px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-kit-3{font-size:16px;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}/* Start custom CSS *//* ===============================================================
   TruVue Windows, global polish
   =============================================================== */
html { scroll-behavior: smooth; }
body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
body, body .elementor { font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
::selection { background: rgba(43,184,224,0.25); color: #0B0F14; }

/* Image safety, never bust layout */
.elementor-widget-image img { max-width: 100% !important; height: auto !important; display: block; }
.elementor-widget-image a   { display: inline-block; max-width: 100%; }

h1.elementor-heading-title { letter-spacing: -1.5px !important; }
h2.elementor-heading-title { letter-spacing: -0.8px !important; }

/* Generous section rhythm */
section.elementor-section, .elementor-section.elementor-section-boxed { padding-top: clamp(64px, 8vw, 110px); padding-bottom: clamp(64px, 8vw, 110px); }

/* ===============================================================
   Header, sticky white bar, flat 3-child flex layout.
   Elementor wraps every "boxed" container in .e-con-inner, which is the
   ACTUAL flex container. So all the flex rules target both the outer
   element (where Elementor injects --display/--flex-* vars) AND the
   .e-con-inner (where the children live). Previous version targeted only
   #truvue-header > * and missed the real children entirely.
   =============================================================== */
#truvue-header {
    position: sticky; top: 0; z-index: 50;
    backdrop-filter: saturate(180%) blur(8px);
    background: rgba(255,255,255,0.94) !important;
    border-bottom: 1px solid #E5EAEF;
    min-height: 64px;
}
#truvue-header,
#truvue-header > .e-con-inner {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;     /* kill Elementor's mobile wrap default */
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 20px;
}
#truvue-header > .e-con-inner {
    width: 100%;
    max-width: none;
    padding: 0;
}
/* Direct flex children: logo widget, nav-menu widget, CTA button */
#truvue-header > .e-con-inner > .elementor-element {
    flex: 0 0 auto !important;
    align-self: center !important;
    width: auto !important;
    max-width: none !important;
    min-width: 0;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}
/* Nav grows to fill the middle space */
#truvue-header > .e-con-inner > .elementor-widget-nav-menu {
    flex: 1 1 auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 0;
}
/* CTA pinned to the right */
#truvue-header > .e-con-inner > .tv-header-cta { margin-left: auto; }

/* Logo, the source asset is ~397×370 (nearly square, stacked wordmark).
   Without a height cap the natural 160×149 render blows the header up
   to ~175px tall; with too tight a cap the wordmark becomes unreadable.
   80px is the comfortable middle, wordmark is legible, header ends up
   ~104px tall on desktop. */
#truvue-header .tv-header-logo img {
    max-height: 80px !important;
    width: auto !important;
    max-width: 200px !important;
    height: auto !important;
    object-fit: contain !important;
}

/* Desktop nav, one row, no wrap */
.elementor-widget.tv-nav-nowrap .elementor-nav-menu,
.elementor-widget.tv-nav-nowrap .elementor-nav-menu > ul {
    flex-wrap: nowrap !important;
    white-space: nowrap;
}
.elementor-widget.tv-nav-nowrap .elementor-nav-menu .elementor-item { white-space: nowrap; }

/* ----- Mobile / tablet header (≤ 1024px) ----- */
@media (max-width: 1024px) {
    #truvue-header,
    #truvue-header > .e-con-inner {
        flex-wrap: nowrap !important;
        align-items: center !important;
        gap: 12px !important;
    }
    /* Visual order on mobile: logo · CTA · burger (rightmost).
       DOM order stays logo / nav / CTA; CSS order re-arranges. */
    #truvue-header > .e-con-inner > .tv-header-logo { order: 1; }
    #truvue-header > .e-con-inner > .tv-header-cta  { order: 2; margin-left: auto !important; }
    #truvue-header > .e-con-inner > .elementor-widget-nav-menu {
        order: 3;
        flex: 0 0 auto !important;
        margin-left: 0 !important;
        /* Dropdown anchors to the header (position:sticky creates the
           positioning context); force static on the widget so the
           dropdown escapes to the header edges. */
        position: static !important;
    }

    #truvue-header .elementor-menu-toggle {
        display: inline-flex !important;
        align-items: center !important; justify-content: center !important;
        width: 44px !important; height: 44px !important;
        padding: 0 !important; margin: 0 !important;
        border: 1px solid #E5EAEF !important; border-radius: 12px !important;
        background: #FFFFFF !important; color: #0B0F14 !important;
        transition: all .18s ease !important; cursor: pointer;
        flex: 0 0 44px !important;
    }
    #truvue-header .elementor-menu-toggle:hover,
    #truvue-header .elementor-menu-toggle:focus-visible {
        background: #E8F6FC !important; border-color: #B6E4F2 !important; color: #12688A !important;
    }
    #truvue-header .elementor-menu-toggle i,
    #truvue-header .elementor-menu-toggle svg {
        font-size: 22px !important; width: 22px !important; height: 22px !important;
        fill: currentColor !important; color: inherit !important;
    }
    #truvue-header .elementor-menu-toggle.elementor-active {
        background: #0B0F14 !important; border-color: #0B0F14 !important; color: #FFFFFF !important;
    }

    /* Dropdown overlay, anchored to header, full-width below it */
    #truvue-header .elementor-nav-menu--dropdown {
        position: absolute !important;
        top: 100% !important; left: 0 !important; right: 0 !important;
        width: auto !important; max-width: none !important;
        margin: 0 !important; padding: 10px !important;
        background: #FFFFFF !important;
        border-top: 1px solid #E5EAEF !important;
        border-bottom: 1px solid #E5EAEF !important;
        box-shadow: 0 24px 60px rgba(14,17,22,0.16) !important;
        z-index: 49 !important;
        max-height: calc(100vh - 76px); overflow-y: auto;
        display: block !important;
    }
    #truvue-header .elementor-nav-menu--dropdown ul,
    #truvue-header .elementor-nav-menu--dropdown li {
        background: transparent !important;
        list-style: none !important;
        padding: 0 !important;
        margin: 0 !important;
    }
    #truvue-header .elementor-nav-menu--dropdown .elementor-item {
        display: flex !important; align-items: center; justify-content: space-between;
        padding: 16px 18px !important;
        font-size: 17px !important; font-weight: 600 !important;
        line-height: 1.3 !important;
        color: #0B0F14 !important; background: transparent !important;
        border-radius: 10px !important; text-decoration: none !important;
        transition: all .15s ease !important; border: 0 !important;
    }
    #truvue-header .elementor-nav-menu--dropdown .elementor-item:hover,
    #truvue-header .elementor-nav-menu--dropdown .elementor-item:focus,
    #truvue-header .elementor-nav-menu--dropdown .elementor-item.elementor-item-active {
        background: #E8F6FC !important; color: #12688A !important;
    }
    #truvue-header .elementor-nav-menu--dropdown li:not(:last-child)::after {
        content: ""; display: block; height: 1px; margin: 0 18px; background: #F3F4F6;
    }

    #truvue-header .tv-header-logo img { max-height: 56px !important; max-width: 160px !important; }
    #truvue-header .tv-header-cta.elementor-button {
        padding: 10px 14px !important; font-size: 13px !important; letter-spacing: 0 !important;
        border-radius: 10px !important;
    }
    .elementor-widget-button.tv-header-cta .elementor-button {
        padding: 10px 14px !important; font-size: 13px !important; border-radius: 10px !important;
    }
}
@media (max-width: 540px) {
    #truvue-header > .e-con-inner {
        padding-left: 14px !important; padding-right: 14px !important;
        gap: 8px !important;
    }
    #truvue-header .tv-header-logo img { max-height: 44px !important; max-width: 130px !important; }
    .elementor-widget-button.tv-header-cta .elementor-button {
        padding: 7px 11px !important; font-size: 11.5px !important; letter-spacing: 0 !important;
        border-radius: 10px !important;
        border-width: 1px !important;
    }
    /* Drop the arrow icon at narrow widths so the button stays compact */
    .elementor-widget-button.tv-header-cta .elementor-button .elementor-button-icon,
    .elementor-widget-button.tv-header-cta .elementor-button svg { display: none !important; }
}
@media (max-width: 400px) {
    #truvue-header .tv-header-logo img { max-height: 40px !important; max-width: 112px !important; }
    .elementor-widget-button.tv-header-cta .elementor-button {
        padding: 6px 10px !important; font-size: 11px !important;
    }
}
@media (max-width: 340px) {
    /* Only at truly ultra-narrow widths do we drop the CTA, logo + burger only */
    #truvue-header > .e-con-inner > .elementor-widget-button.tv-header-cta { display: none !important; }
    #truvue-header .tv-header-logo img { max-height: 38px !important; max-width: 108px !important; }
    #truvue-header .elementor-menu-toggle { width: 40px !important; height: 40px !important; flex: 0 0 40px !important; }
}

/* ===============================================================
   Buttons, smooth lift, outline-light variant for dark sections
   =============================================================== */
.elementor-button { transition: all 220ms ease; letter-spacing: 0.2px; }
.elementor-button:hover { transform: translateY(-1px); box-shadow: 0 10px 30px rgba(43,184,224,0.30); }

/* ===============================================================
   Hero, radial gradient wash, grid mask, dual-column adaptive
   =============================================================== */
.tv-hero-bg {
    position: relative; overflow: hidden;
    background:
        radial-gradient(60% 60% at 20% 10%, rgba(43,184,224,0.14) 0%, rgba(43,184,224,0) 60%),
        radial-gradient(50% 50% at 90% 20%, rgba(27,143,181,0.12) 0%, rgba(27,143,181,0) 60%),
        radial-gradient(70% 60% at 50% 100%, rgba(18,104,138,0.06) 0%, rgba(18,104,138,0) 60%),
        #FFFFFF;
}
.tv-hero-bg::before {
    content: "";
    position: absolute; inset: 0;
    background-image:
        linear-gradient(rgba(14,17,22,0.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(14,17,22,0.04) 1px, transparent 1px);
    background-size: 48px 48px;
    mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, #000 30%, transparent 75%);
    -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, #000 30%, transparent 75%);
    pointer-events: none; z-index: 0;
}
.tv-hero-bg > * { position: relative; z-index: 1; }

.tv-hero-operation { filter: drop-shadow(0 18px 40px rgba(14,17,22,0.12)); }
/* Let the hero's inner boxed area stretch wider than the default 1240px kit
   container so the operation image has real estate to grow. Capped at 1520px
   so it doesn't stretch awkwardly on ultra-wide screens. */
.tv-hero-bg > .e-con-inner {
    max-width: 1520px !important;
    width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
}
.tv-hero-col-art .elementor-widget-image { width: 100%; }
.tv-hero-col-art .tv-hero-operation img {
    max-width: 960px !important;
    width: 100% !important;
    height: auto !important;
}

/* Mobile hero column override, force stack */
@media (max-width: 1024px) {
    .tv-hero-col { --width: 100% !important; width: 100% !important; max-width: 100% !important; flex: 0 0 100% !important; }
    .tv-hero-col-copy { order: 1; }
    .tv-hero-col-art  { order: 2; }
}

/* Hero meta chips */
.tv-hero-meta {
    list-style: none; margin: 0; padding: 0;
    display: flex; flex-wrap: wrap; gap: 8px 14px;
    font-size: 14px; color: #4B5563;
}
.tv-hero-meta li { display: inline-flex; align-items: center; gap: 8px; }
.tv-hero-meta i  { color: #1B8FB5; font-size: 14px; }

/* ===============================================================
   Key-features band, icon tiles
   =============================================================== */
.tv-key-feat { transition: all .25s ease; }
.tv-key-feat:hover { transform: translateY(-2px); border-color: #B6E4F2 !important; box-shadow: 0 14px 36px rgba(14,17,22,0.06); }
.tv-key-feat:hover .tv-key-feat-ico {
    transform: scale(1.06);
    box-shadow: 0 14px 36px rgba(27,143,181,0.34);
}
.tv-key-feat-ico {
    width: 58px; height: 58px; border-radius: 14px;
    background: linear-gradient(135deg, #2BB8E0 0%, #1B8FB5 100%);
    color: #FFFFFF; display: inline-flex; align-items: center; justify-content: center;
    box-shadow: 0 10px 28px rgba(27,143,181,0.25);
    transition: transform .25s ease, box-shadow .25s ease;
}
.tv-key-feat-ico i { font-size: 22px; }
.tv-key-feat-ico svg { width: 30px; height: 30px; display: block; }

/* ===============================================================
   Why cards + Feature cards
   =============================================================== */
.tv-why-card, .tv-sec-card, .tv-feature-card {
    transition: all .28s ease;
}
.tv-why-card:hover, .tv-sec-card:hover, .tv-feature-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 22px 60px rgba(14,17,22,0.08);
    border-color: #B6E4F2 !important;
}
.tv-why-ico, .tv-sec-ico {
    width: 48px; height: 48px; border-radius: 12px;
    background: rgba(43,184,224,0.14); color: #12688A;
    display: inline-flex; align-items: center; justify-content: center;
}
.tv-why-ico i, .tv-sec-ico i { font-size: 20px; }
/* Inline-SVG icon chip, shared style for security + why-choose cards */
.tv-sec-ico--svg, .tv-why-ico--svg {
    width: 64px; height: 64px; border-radius: 16px;
    background: linear-gradient(135deg, #E8F6FC 0%, #B6E4F2 100%);
    color: #12688A;
    box-shadow: 0 6px 18px rgba(27,143,181,0.12), inset 0 -1px 0 rgba(14,17,22,0.04);
    transition: transform .25s ease, box-shadow .25s ease, background .25s ease, color .25s ease;
    display: inline-flex; align-items: center; justify-content: center;
}
.tv-sec-ico--svg svg, .tv-why-ico--svg svg { width: 34px; height: 34px; }
.tv-sec-card:hover .tv-sec-ico--svg,
.tv-why-card:hover .tv-why-ico--svg {
    background: linear-gradient(135deg, #2BB8E0 0%, #12688A 100%);
    color: #FFFFFF;
    box-shadow: 0 14px 30px rgba(27,143,181,0.28);
    transform: scale(1.04);
}

.tv-why-big-ico {
    width: 220px; height: 220px; border-radius: 32px;
    background: linear-gradient(135deg, #E8F6FC 0%, #B6E4F2 100%);
    color: #12688A;
    display: inline-flex; align-items: center; justify-content: center;
    margin: 0 auto;
    box-shadow: inset 0 -2px 0 rgba(14,17,22,0.06);
}
.tv-why-big-ico i { font-size: 110px; opacity: .85; }
@media (max-width: 1024px) {
    .tv-why-big-ico { width: 160px; height: 160px; }
    .tv-why-big-ico i { font-size: 78px; }
}

/* Operation step numbers on tilt-turn page */
.tv-op-step-num {
    display: inline-flex; align-items: center; justify-content: center;
    width: 42px; height: 42px; border-radius: 50%;
    background: linear-gradient(135deg, #2BB8E0 0%, #12688A 100%);
    color: #FFFFFF; font-weight: 800; font-size: 18px;
    box-shadow: 0 10px 24px rgba(27,143,181,0.35);
}

/* ===============================================================
   Gallery tiles, fixed aspect ratio, object-fit cover so mixed image sizes
   still look grid-right. Hover scales the image only (not the whole widget
   box), so empty "canvas" around the image can never appear.
   =============================================================== */
.tv-gallery-tile {
    overflow: hidden;
    border-radius: 14px;
    cursor: zoom-in;
    transition: box-shadow .28s ease, transform .28s ease;
    box-shadow: 0 8px 24px rgba(14,17,22,0.08);
    /* Make the widget itself the size of the grid cell so the image can fill */
    width: 100%;
    align-self: stretch;
}
.tv-gallery-tile .elementor-widget-container,
.tv-gallery-tile .elementor-image,
.tv-gallery-tile a {
    height: 100%;
    width: 100%;
    display: block;
    margin: 0 !important;
    padding: 0 !important;
}
/* Fixed 4:3 aspect ratio box, every tile becomes same shape */
.tv-gallery-tile a {
    aspect-ratio: 4 / 3;
    overflow: hidden;
    position: relative;
}
.tv-gallery-tile img {
    position: absolute;
    inset: 0;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center center !important;
    display: block;
    transition: transform .5s ease;
    border-radius: 0 !important;
}
.tv-gallery-tile:hover {
    transform: translateY(-3px);
    box-shadow: 0 24px 60px rgba(14,17,22,0.16);
}
.tv-gallery-tile:hover img { transform: scale(1.06); }
/* Override Elementor's default image-widget alignment so every tile sits
   flush against the grid cell, no left-alignment inside a wider box. */
.tv-gallery-tile.elementor-widget-image { text-align: center; }
/* Ensure the grid children stretch to equal heights */
.tv-gallery-grid > .elementor-element,
.tv-gallery-grid > * { align-self: stretch; }

/* Key-feat + why grids equal rows */
.tv-key-feat-grid, .tv-why-grid {
    align-items: stretch;
}

/* ===============================================================
   Handles, swatches with hover enlarge + textures
   =============================================================== */
.tv-handle-card { transition: all .28s ease; }
.tv-handle-card:hover { transform: translateY(-3px); box-shadow: 0 28px 70px rgba(14,17,22,0.12) !important; border-color: #B6E4F2 !important; }
.tv-handle-card img { filter: drop-shadow(0 10px 24px rgba(14,17,22,0.12)); }

.tv-handle-colors-lbl {
    font-size: 12px; font-weight: 700; letter-spacing: 1.6px; text-transform: uppercase;
    color: #12688A; margin-top: 8px;
}

/* Swatch list */
ul.tv-swatches {
    list-style: none; margin: 0; padding: 0;
    display: flex; flex-wrap: wrap; gap: 14px 16px;
}
.tv-sw {
    appearance: none; border: 0; background: transparent; padding: 0; cursor: pointer;
    display: inline-flex; flex-direction: column; align-items: center; gap: 6px;
    transition: transform .25s cubic-bezier(.2,.8,.2,1);
}
.tv-sw:hover, .tv-sw:focus-visible { transform: translateY(-2px) scale(1.08); outline: none; }
.tv-sw:hover .tv-sw-dot, .tv-sw:focus-visible .tv-sw-dot,
.tv-sw:active .tv-sw-dot {
    transform: scale(1.8);
    box-shadow: 0 18px 32px rgba(14,17,22,0.22), 0 0 0 3px rgba(43,184,224,0.25);
    z-index: 4;
}
.tv-sw:hover .tv-sw-name, .tv-sw:focus-visible .tv-sw-name,
.tv-sw:active .tv-sw-name { color: #12688A; }

.tv-sw-dot {
    /* --sw is inherited from the parent button's inline style=""; no default
       declared here, otherwise it would shadow the inherited value and every
       swatch would fall back to the #ccc literal below. */
    display: block; width: 56px; height: 56px; border-radius: 12px;
    background: var(--sw, #ccc);
    box-shadow: 0 6px 14px rgba(14,17,22,0.14), inset 0 0 0 1px rgba(14,17,22,0.06);
    transition: transform .28s cubic-bezier(.2,.8,.2,1), box-shadow .28s ease;
    position: relative; overflow: hidden;
}
.tv-sw--bordered .tv-sw-dot { box-shadow: 0 6px 14px rgba(14,17,22,0.14), inset 0 0 0 1px rgba(14,17,22,0.22); }
.tv-sw-name {
    font-size: 13px; font-weight: 600; color: #0B0F14;
    width: 100%; max-width: 130px;
    text-align: center; line-height: 1.3;
    word-break: normal;
    overflow-wrap: break-word;
    hyphens: auto;
    transition: color .2s ease;
}
@media (max-width: 640px) {
    .tv-sw-dot  { width: 48px; height: 48px; border-radius: 11px; }
    .tv-sw-name { font-size: 12px; max-width: 108px; }
}

/* Texture overlays ------------------------------------------------*/
.tv-sw--metallic .tv-sw-dot,
.tv-sw-lg.tv-sw--metallic {
    background:
        linear-gradient(135deg, rgba(255,255,255,0.45) 0%, rgba(255,255,255,0) 35%, rgba(0,0,0,0.22) 65%, rgba(0,0,0,0.35) 100%),
        var(--sw);
}
.tv-sw--brass .tv-sw-dot,
.tv-sw-lg.tv-sw--brass {
    background:
        linear-gradient(135deg, #E6CC82 0%, #B79956 40%, #7D6636 100%);
}
.tv-sw--brushed .tv-sw-dot,
.tv-sw-lg.tv-sw--brushed {
    background:
        repeating-linear-gradient(90deg,
            rgba(255,255,255,0.25) 0 1px,
            rgba(255,255,255,0) 1px 3px,
            rgba(0,0,0,0.08) 3px 4px,
            rgba(0,0,0,0) 4px 6px),
        var(--sw);
}
.tv-sw--stainless .tv-sw-dot,
.tv-sw-lg.tv-sw--stainless {
    background:
        repeating-linear-gradient(135deg,
            rgba(255,255,255,0.7) 0 1px,
            rgba(255,255,255,0) 1px 3px,
            rgba(0,0,0,0.10) 3px 4px,
            rgba(0,0,0,0) 4px 6px),
        linear-gradient(135deg, #F5F6F8 0%, #CFD3D8 100%);
}
.tv-sw--wood-gray .tv-sw-dot,
.tv-sw-lg.tv-sw--wood-gray {
    background:
        repeating-linear-gradient(92deg,
            rgba(255,255,255,0.07) 0 1px,
            rgba(255,255,255,0) 1px 4px,
            rgba(0,0,0,0.10) 4px 5px,
            rgba(0,0,0,0) 5px 10px),
        linear-gradient(180deg, #3A3B3B 0%, #1F1F1F 100%);
}
.tv-sw--wood-brown .tv-sw-dot,
.tv-sw-lg.tv-sw--wood-brown {
    background:
        repeating-linear-gradient(92deg,
            rgba(255,255,255,0.08) 0 1px,
            rgba(255,255,255,0) 1px 4px,
            rgba(0,0,0,0.12) 4px 5px,
            rgba(0,0,0,0) 5px 10px),
        linear-gradient(180deg, #875932 0%, #4E2E14 100%);
}

/* Full finish legend */
ul.tv-sw-legend {
    list-style: none; margin: 0; padding: 0;
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px;
}
@media (max-width: 860px) { ul.tv-sw-legend { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 640px) { ul.tv-sw-legend { grid-template-columns: repeat(2, 1fr); } }
ul.tv-sw-legend li { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; }
.tv-sw-lg {
    width: 72px; height: 72px; border-radius: 16px;
    background: var(--sw, #ccc);
    box-shadow: 0 8px 24px rgba(14,17,22,0.10), inset 0 0 0 1px rgba(14,17,22,0.06);
    transition: transform .3s cubic-bezier(.2,.8,.2,1);
}
ul.tv-sw-legend li:hover .tv-sw-lg {
    transform: scale(1.18);
    box-shadow: 0 18px 36px rgba(14,17,22,0.2), 0 0 0 4px rgba(43,184,224,0.25);
}
.tv-sw-lg.tv-sw--bordered { box-shadow: 0 8px 24px rgba(14,17,22,0.10), inset 0 0 0 1px rgba(14,17,22,0.18); }
.tv-sw-lg-name { font-size: 13px; font-weight: 700; color: #0B0F14; max-width: 140px; line-height: 1.3; overflow-wrap: break-word; }

/* Handle page thumbs */
.tv-handle-thumb img { filter: drop-shadow(0 12px 24px rgba(14,17,22,0.14)); }

/* Home-page handle 2×2 grid, transparent background, larger handles */
.tv-handle-thumb-grid .tv-handle-thumb-card {
    background: transparent !important;
    border: 0 !important;
    transition: transform .25s ease;
}
.tv-handle-thumb-grid .tv-handle-thumb-card:hover {
    transform: translateY(-3px) scale(1.02);
}
.tv-handle-thumb-grid .tv-handle-thumb-card:hover img {
    filter: drop-shadow(0 18px 28px rgba(14,17,22,0.24));
}
.tv-handle-thumb-grid img {
    max-width: 210px !important;
    width: 100% !important;
    height: auto !important;
    filter: drop-shadow(0 10px 20px rgba(14,17,22,0.18));
    transition: filter .3s ease;
}
@media (max-width: 640px) {
    .tv-handle-thumb-grid img { max-width: 180px !important; }
}

/* ===============================================================
   Contact form
   =============================================================== */
.tv-contact-form { display: flex; flex-direction: column; gap: 14px; }
.tv-contact-form label {
    display: flex; flex-direction: column; gap: 6px;
    font-size: 13px; font-weight: 600; color: #0B0F14;
    letter-spacing: 0.2px; text-transform: uppercase;
}
.tv-contact-form .tv-form-row {
    display: grid; grid-template-columns: 1fr 1fr; gap: 14px;
}
@media (max-width: 640px) { .tv-contact-form .tv-form-row { grid-template-columns: 1fr; } }
.tv-contact-form input, .tv-contact-form select, .tv-contact-form textarea {
    width: 100%; font-family: Inter, system-ui, sans-serif;
    font-size: 15px; font-weight: 400; color: #0B0F14;
    padding: 12px 14px; border-radius: 10px;
    border: 1px solid #E5EAEF; background: #FFFFFF;
    transition: border-color .2s ease, box-shadow .2s ease;
    text-transform: none;
}
.tv-contact-form input:focus, .tv-contact-form select:focus, .tv-contact-form textarea:focus {
    outline: none; border-color: #2BB8E0;
    box-shadow: 0 0 0 3px rgba(43,184,224,0.2);
}
.tv-btn-submit {
    margin-top: 6px; padding: 14px 22px;
    background: #2BB8E0; color: #FFFFFF; font-weight: 700; font-size: 15px;
    border: 2px solid #2BB8E0; border-radius: 10px; cursor: pointer;
    display: inline-flex; align-items: center; gap: 10px; justify-content: center;
    transition: all .2s ease;
}
.tv-btn-submit:hover { background: #12688A; border-color: #12688A; transform: translateY(-1px); box-shadow: 0 10px 30px rgba(43,184,224,0.28); }
.tv-form-note { font-size: 13px; color: #6B7280; margin-top: 4px; line-height: 1.5; }
.tv-contact-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; font-size: 14px; color: #4B5563; }
.tv-contact-list i { color: #1B8FB5; width: 18px; }
.tv-contact-list a { color: #12688A; font-weight: 600; text-decoration: none; }
.tv-contact-list a:hover { text-decoration: underline; }

/* ===============================================================
   Footer
   =============================================================== */
#truvue-footer { color: #CBD5E1; }
#truvue-footer .elementor-heading-title { color: #FFFFFF; }
#truvue-footer .tv-footer-row { align-items: flex-start; }
@media (max-width: 900px) {
    #truvue-footer .tv-footer-row > .elementor-element { width: 100% !important; max-width: 100% !important; --width: 100% !important; }
}
#truvue-footer ul.tv-footer-links,
#truvue-footer ul.tv-footer-contact {
    list-style: none; margin: 0; padding: 0;
    display: flex; flex-direction: column; gap: 10px;
}
#truvue-footer ul.tv-footer-links a {
    color: rgba(255,255,255,0.72); text-decoration: none; font-size: 15px;
    transition: color .2s ease;
}
#truvue-footer ul.tv-footer-links a:hover { color: #2BB8E0; }
#truvue-footer ul.tv-footer-contact {
    color: rgba(255,255,255,0.72); font-size: 14px; line-height: 1.55;
}
#truvue-footer ul.tv-footer-contact li { display: flex; gap: 10px; }
#truvue-footer ul.tv-footer-contact i { color: #2BB8E0; margin-top: 4px; }
#truvue-footer ul.tv-footer-contact span { font-size: 12px; opacity: .7; display: block; margin-top: 2px; }
#truvue-footer ul.tv-footer-contact a { color: #FFFFFF; text-decoration: none; }
#truvue-footer ul.tv-footer-contact a:hover { color: #2BB8E0; }
#truvue-footer .tv-footer-badge {
    display: flex; align-items: center; gap: 10px;
    font-size: 12px; color: rgba(255,255,255,0.6);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 10px; padding: 10px 12px;
    max-width: max-content;
}
#truvue-footer .tv-footer-badge i { color: #2BB8E0; font-size: 14px; }
#truvue-footer .tv-footer-legal {
    border-top: 1px solid rgba(255,255,255,0.08);
    color: rgba(255,255,255,0.55); font-size: 12px;
}
#truvue-footer .tv-footer-legal .tv-footer-legal-copy { margin: 0; line-height: 1.5; }
#truvue-footer .tv-footer-credit a {
    color: rgba(255,255,255,0.78);
    font-weight: 600;
    text-decoration: none;
    border-bottom: 1px dotted rgba(43,184,224,0.5);
    transition: color .2s ease, border-color .2s ease;
}
#truvue-footer .tv-footer-credit a:hover {
    color: #2BB8E0;
    border-bottom-color: #2BB8E0;
}
@media (max-width: 900px) {
    #truvue-footer .tv-footer-legal { flex-wrap: wrap; row-gap: 10px; }
    #truvue-footer .tv-footer-legal > * { width: 100%; }
}

/* ===============================================================
   Final CTA band
   =============================================================== */
.tv-final-cta { text-align: center; }

/* ===============================================================
   Mobile button safety, full-width in hero + CTA
   =============================================================== */
@media (max-width: 420px) {
    .tv-hero-bg .elementor-widget-button,
    .tv-final-cta .elementor-widget-button {
        width: 100% !important; max-width: 100% !important;
    }
    .tv-hero-bg .elementor-widget-button .elementor-button,
    .tv-final-cta .elementor-widget-button .elementor-button {
        width: 100% !important; justify-content: center !important; padding: 14px 18px !important;
    }
}

/* Equal column heights for feature rows */
.tv-key-feat-grid, .tv-why-grid { align-items: stretch; }

/* Gallery tiles don't wrap with broken aspect ratios when side-by-side */
@media (max-width: 1024px) { .tv-gallery-grid { grid-template-columns: repeat(2, 1fr) !important; } }
@media (max-width: 540px)  { .tv-gallery-grid { grid-template-columns: 1fr !important; } }

/* Force Elementor's container grid to respect our grid assignment */
.e-con.e-grid > .e-con-inner { display: contents; }

/* tv-shim-v1 */
/* Shim: support for native widgets converted from html widgets. */

/* footer icon-list second-line subtitle text */
.elementor-icon-list-text .tv-il-sub {
    display: block;
    font-size: 0.85em;
    opacity: 0.75;
    margin-top: 2px;
}

/* tv-handle-colors-lbl heading widget */
.elementor-widget-heading.tv-handle-colors-lbl .elementor-heading-title,
.elementor-widget.tv-handle-colors-lbl .elementor-heading-title {
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    font-weight: 700;
    color: #4B5563;
    margin: 0 auto 18px;
}

/* tv-op-step-num heading widget (large numeral in circle) */
.elementor-widget-heading.tv-op-step-num .elementor-heading-title,
.elementor-widget.tv-op-step-num .elementor-heading-title {
    width: 56px;
    height: 56px;
    line-height: 56px;
    border-radius: 50%;
    background: #2BB8E0;
    color: #FFFFFF;
    font-size: 24px;
    font-weight: 800;
    margin: 0 auto;
    text-align: center;
}

/* footer icon-box badge */
.elementor-widget-icon-box .elementor-icon-box-title {
    font-size: 14px;
    font-weight: 600;
    color: #FFFFFF;
}/* End custom CSS */