/* ================================================================
     TILE IMAGES — all 6 in one place.
     Optimized WebP versions (400px, 10-24 KB each).
     To change a tile photo later, edit only these 6 lines.
     ================================================================ */
  .vv-img-restaurants  { background-image: url('https://vivantcorp.com/wp-content/uploads/2026/09/51e544e3-6f12-4301-96eb-e84f3110cf35-opt.webp') !important; }
  .vv-img-healthcare   { background-image: url('https://vivantcorp.com/wp-content/uploads/2026/09/43399695-7492-41c1-9d8d-9acf90609871-opt.webp') !important; }
  .vv-img-dealerships  { background-image: url('https://vivantcorp.com/wp-content/uploads/2026/09/db1ad643-26c3-41ce-8946-10c00592b9fc-opt.webp') !important; }
  .vv-img-retail       { background-image: url('https://vivantcorp.com/wp-content/uploads/2026/09/8d68e56f-71a8-4a33-8f1b-0ea01de9f99f-opt.webp') !important; }
  .vv-img-professional { background-image: url('https://vivantcorp.com/wp-content/uploads/2026/09/d7f8c0c8-9002-4ade-94b2-44fe7ada67e9-opt.webp') !important; }
  .vv-img-homeservice  { background-image: url('https://vivantcorp.com/wp-content/uploads/2026/09/49a20b97-2102-494d-9c42-1aa583348d2f-opt.webp') !important; }

  /* Unique variables wrapper to prevent theme color overrides */
  .vv-industries-section {
    --vv-navy-deep: #142C52;
    --vv-ink-dark: #1A2030;
    --vv-gray-muted: #5C6679;
    --vv-orange: #C75B2A;
  }

  /* Reset rule for just this section */
  .vv-industries-section,
  .vv-industries-section * {
    box-sizing: border-box !important;
  }

  /* Section Wrapper & Header
     (Inter + Plus Jakarta Sans are already loaded site-wide, so no Google Fonts link is needed here) */
  .vv-industries-section {
    background: #ffffff !important;
    padding: 0px 24px !important;
    max-width: 1360px !important;
    margin: 0 auto !important;
    font-family: 'Inter', sans-serif !important;
  }

  .vv-ind-head {
    display: flex !important;
    justify-content: space-between !important;
    align-items: flex-end !important;
    gap: 32px !important;
    margin-bottom: 48px !important;
  }

  .vv-ind-eyebrow {
    font-size: 12.5px !important;
    font-weight: 700 !important;
    letter-spacing: .08em !important;
    text-transform: uppercase !important;
    color: #2050c9 !important;
    margin-bottom: 12px !important;
    display: inline !important;
    background: #eaeffa;
    padding: 6px 12px;
    border-radius: 50px;
  }

  .vv-ind-head h2 {
    font-family: 'Plus Jakarta Sans', sans-serif !important;
    font-weight: 800 !important;
    font-size: 38px !important;
    color: var(--vv-ink-dark, #1A2030) !important;
    line-height: 1.15 !important;
    letter-spacing: -.02em !important;
    max-width: 540px !important;
    margin: 30px 0px !important;
  }

  .vv-ind-head p {
    font-size: 15px !important;
    line-height: 1.65 !important;
    color: var(--vv-gray-muted, #5C6679) !important;
    max-width: 320px !important;
    margin: 0 0 4px 0 !important;
  }

  /* Masonry Grid Layout */
  .vv-ind-grid {
    column-count: 3 !important;
    column-gap: 16px !important;
  }

  /* Base Tile Styling */
  .vv-ind-tile {
    position: relative !important;
    border-radius: 18px !important;
    padding: 24px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-end !important;
    overflow: hidden !important;
    isolation: isolate !important;
    text-decoration: none !important;
    box-shadow: 0 4px 12px rgba(20, 44, 82, 0.04) !important;
    break-inside: avoid !important;
    margin-bottom: 16px !important;
    transition: transform 0.3s ease !important;
    /* Performance: skip rendering (and background-image download) until the tile nears the screen */
    content-visibility: auto;
    contain-intrinsic-size: auto 420px;
  }

  a.vv-ind-tile:hover {
    transform: translateY(-4px) !important;
  }

  /* Non-clickable tile (no landing page yet) */
  div.vv-ind-tile {
    cursor: default !important;
  }

  /* Exact Heights for Perfectly Balanced Columns on Desktop */
  .vv-ind-grid .vv-ind-tile:nth-child(1) { height: 560px !important; padding: 32px !important; }
  .vv-ind-grid .vv-ind-tile:nth-child(2) { height: 300px !important; }
  .vv-ind-grid .vv-ind-tile:nth-child(3) { height: 430px !important; }
  .vv-ind-grid .vv-ind-tile:nth-child(4) { height: 430px !important; }
  .vv-ind-grid .vv-ind-tile:nth-child(5) { height: 380px !important; }
  .vv-ind-grid .vv-ind-tile:nth-child(6) { height: 480px !important; }

  /* Background Image styling with Zoom effect */
  .vv-ind-photo {
    position: absolute !important;
    inset: 0 !important;
    z-index: 0 !important;
    background-size: cover !important;
    background-position: center !important;
    transform: scale(1.04) !important;
    transition: transform .5s cubic-bezier(.2,.7,.2,1) !important;
  }

  a.vv-ind-tile:hover .vv-ind-photo {
    transform: scale(1.12) !important;
  }

  /* Mix-blend color overlay */
  .vv-ind-wash {
    position: absolute !important;
    inset: 0 !important;
    z-index: 1 !important;
    mix-blend-mode: multiply !important;
    opacity: .42 !important;
  }

  /* Bottom Dark Gradient for Text contrast */
  .vv-ind-scrim {
    position: absolute !important;
    inset: 0 !important;
    z-index: 2 !important;
    background: linear-gradient(195deg, rgba(10,18,38,0.05) 18%, rgba(8,14,30,0.5) 60%, rgba(6,10,24,0.9) 100%) !important;
  }

  /* Top Index Badge */
  .vv-ind-index {
    position: relative !important;
    z-index: 3 !important;
    font-family: 'Plus Jakarta Sans', sans-serif !important;
    font-weight: 700 !important;
    font-size: 11px !important;
    letter-spacing: .06em !important;
    color: rgba(255,255,255,.85) !important;
    margin-bottom: auto !important;
    align-self: flex-start !important;
    padding: 5px 12px !important;
    border-radius: 999px !important;
    background: rgba(255,255,255,.12) !important;
    backdrop-filter: blur(6px) !important;
    -webkit-backdrop-filter: blur(6px) !important;
    border: 1px solid rgba(255,255,255,.18) !important;
    text-transform: uppercase !important;
  }

  /* Typography inside Tiles */
  .vv-ind-tile h3 {
    font-family: 'Plus Jakarta Sans', sans-serif !important;
    font-weight: 800 !important;
    color: #ffffff !important;
    position: relative !important;
    z-index: 3 !important;
    font-size: 21px !important;
    margin-bottom: 6px !important;
    margin-top: 0 !important;
    letter-spacing: -.01em !important;
  }

  .vv-ind-grid .vv-ind-tile:nth-child(1) h3 {
    font-size: 21px !important;
    margin-bottom: 10px !important;
  }

  .vv-ind-tile p {
    font-size: 13.5px !important;
    line-height: 1.55 !important;
    color: rgba(255,255,255,.85) !important;
    max-width: 240px !important;
    position: relative !important;
    z-index: 3 !important;
    margin-bottom: 16px !important;
    margin-top: 0 !important;
  }

  .vv-ind-grid .vv-ind-tile:nth-child(1) p {
    font-size: 13.5px !important;
    max-width: 320px !important;
  }

  /* Links with Arrow slide effect */
  .vv-ind-link {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    font-size: 13.5px !important;
    font-weight: 700 !important;
    color: #ffffff !important;
    position: relative !important;
    z-index: 3 !important;
    width: fit-content !important;
    transition: color 0.2s !important;
  }

  .vv-ind-link svg {
    width: 14px !important;
    height: 14px !important;
    transition: transform .2s !important;
  }

  a.vv-ind-tile:hover .vv-ind-link svg {
    transform: translateX(4px) !important;
  }

  /* Responsive Rules */
  @media (max-width: 1024px) {
    .vv-ind-grid {
      column-count: 2 !important;
    }
    .vv-ind-grid .vv-ind-tile:nth-child(1) {
      height: 480px !important;
    }
    .vv-ind-head {
      flex-direction: column !important;
      align-items: flex-start !important;
      gap: 16px !important;
    }
    .vv-ind-head p {
      max-width: 100% !important;
    }
  }

  @media (max-width: 640px) {
    .vv-industries-section {
      padding: 4px 15px 48px !important;
    }
    .vv-ind-head h2 {
      font-size: 28px !important;
    }
    .vv-ind-grid {
      column-count: 1 !important;
    }
    /* Uniform card height on mobile */
    .vv-ind-grid .vv-ind-tile:nth-child(1),
    .vv-ind-grid .vv-ind-tile:nth-child(2),
    .vv-ind-grid .vv-ind-tile:nth-child(3),
    .vv-ind-grid .vv-ind-tile:nth-child(4),
    .vv-ind-grid .vv-ind-tile:nth-child(5),
    .vv-ind-grid .vv-ind-tile:nth-child(6) {
      height: 320px !important;
      padding: 24px !important;
    }
    .vv-ind-grid .vv-ind-tile:nth-child(1) h3 {
      font-size: 24px !important;
    }
  }
  @media (min-width: 1025px) { .vv-ind-grid .vv-ind-tile:nth-child(5) { height: 876px !important; } }