.elementor-3481 .elementor-element.elementor-element-072881b{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-3481 .elementor-element.elementor-element-a2cf132{width:100%;max-width:100%;}.elementor-3481 .elementor-element.elementor-element-a2cf132 > .elementor-widget-container{margin:0px 0px 0px 0px;padding:0px 0px 0px 0px;}.elementor-3481 .elementor-element.elementor-element-ea2a727{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-3481 .elementor-element.elementor-element-ea2a727:not(.elementor-motion-effects-element-type-background), .elementor-3481 .elementor-element.elementor-element-ea2a727 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#FFFFFF;}.elementor-3481 .elementor-element.elementor-element-669b48a{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-3481 .elementor-element.elementor-element-669b48a:not(.elementor-motion-effects-element-type-background), .elementor-3481 .elementor-element.elementor-element-669b48a > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#FFFFFF;}.elementor-3481 .elementor-element.elementor-element-a592685{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-3481 .elementor-element.elementor-element-a592685:not(.elementor-motion-effects-element-type-background), .elementor-3481 .elementor-element.elementor-element-a592685 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#FFFFFF;}.elementor-3481 .elementor-element.elementor-element-ebd82fb{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-3481 .elementor-element.elementor-element-ebd82fb:not(.elementor-motion-effects-element-type-background), .elementor-3481 .elementor-element.elementor-element-ebd82fb > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#FFFFFF;}.elementor-3481 .elementor-element.elementor-element-a04e4a7{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-3481 .elementor-element.elementor-element-a04e4a7:not(.elementor-motion-effects-element-type-background), .elementor-3481 .elementor-element.elementor-element-a04e4a7 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#FFFFFF;}.elementor-3481 .elementor-element.elementor-element-6ed3396{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-3481 .elementor-element.elementor-element-6ed3396:not(.elementor-motion-effects-element-type-background), .elementor-3481 .elementor-element.elementor-element-6ed3396 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#FFFFFF;}.elementor-3481 .elementor-element.elementor-element-6ed3396.e-con{--flex-grow:0;--flex-shrink:0;}.elementor-3481 .elementor-element.elementor-element-b70fff7{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-3481 .elementor-element.elementor-element-b70fff7:not(.elementor-motion-effects-element-type-background), .elementor-3481 .elementor-element.elementor-element-b70fff7 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#FFFFFF;}@media(min-width:768px){.elementor-3481 .elementor-element.elementor-element-6ed3396{--width:97.894%;}}/* Start custom CSS for html, class: .elementor-element-a2cf132 */#jaceo{
      --blue:#193886;
      --yellow:#feb42f;
      --white:#ffffff;
      --dark:#0c1222;
      font-size: 1.06rem;
    }

    #jaceo *{ box-sizing:border-box; }
    #jaceo a{ color: inherit; }

    /* ================= HERO ================= */

    #jaceo .hero-frame{
      position:relative;
      min-height:100svh;
      padding: 0 5%;
      display:flex;
      align-items:center;
      color:var(--white);
      overflow:hidden;
      background:
        url("http://topmetalsupplier.com/wp-content/uploads/2026/01/Media_Portada_Top_Metal-5-scaled.png")
        center/cover no-repeat;
      isolation: isolate;
    }

    /* Dark overlay to keep text readable */
    #jaceo .hero-frame::before{
      content:"";
      position:absolute;
      inset:0;
    
      z-index:0;
      pointer-events:none;
    }

    /* ================= GRID (BLUEPRINT) ================= */

    #jaceo .hero-grid{
      position:absolute;
      inset:0;
      background:
        linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
      background-size:80px 80px;
      pointer-events:none;
      z-index: 1;
      opacity: .9;
    }

    /* ================= LOGO STRUCTURE ================= */

    #jaceo .hero-logo-structure{
      position:absolute;
      right:-15%;
      top:50%;
      transform:translateY(-50%);
      width:900px;
      height:900px;
      background:
        url("http://topmetalsupplier.com/wp-content/uploads/2025/11/Topmetal_logos_2025-08-3-scaled.png")
        center/contain no-repeat;
      opacity:0.035;
      filter:grayscale(100%);
      pointer-events:none;
      z-index: 1;
    }

    /* ================= LAYOUT WRAP ================= */

#jaceo .hero-inner{
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 100%;
  margin: 0 auto;

  display: grid;

  /* ✅ la izquierda se vuelve flexible y empuja el filtro a la derecha */
  grid-template-columns: minmax(0, 1fr) minmax(0, 520px);

  column-gap: clamp(18px, 3vw, 46px);
  row-gap: 18px;
  align-items: center;

  /* ✅ asegura que el grid use todo el ancho disponible */
  justify-content: stretch;
}



    /* ================= FRAMED CONTENT (ONLY TEXT + BUTTONS) ================= */

    #jaceo .hero-framed-content{
      position: relative;
      width: 100%;
      padding: 90px 110px;
      border: 3px solid var(--blue);
      background: linear-gradient(180deg, rgba(25,56,134,.08), rgba(25,56,134,.02));
    }

    /* yellow engineering corner */
    #jaceo .hero-framed-content::before{
      content:"";
      position:absolute;
      top:-3px;
      left:-3px;
      width:140px;
      height:140px;
      border-top:6px solid var(--yellow);
      border-left:6px solid var(--yellow);
      pointer-events:none;
    }

    /* ================= CONTENT ================= */

    #jaceo .hero-content h1{
      margin: 0 0 28px;
      font-size:clamp(60px,6vw,96px);
      font-weight:900;
      line-height:1.02;
      letter-spacing: -0.02em;
    }

    #jaceo .hero-content p{
      margin: 0 0 56px;
      max-width: 720px;
      font-size: 20px;
      line-height: 1.7;
      color: rgba(255,255,255,.92);
    }

    /* ================= BUTTONS ================= */

    #jaceo .hero-actions{
      display:flex;
      gap: 22px;
      flex-wrap: wrap;
      align-items: center;
    }

    #jaceo .btn-primary,
    #jaceo .btn-secondary{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      min-height: 56px;
      padding: 18px 48px;
      font-weight: 900;
      letter-spacing: .12em;
      text-decoration:none;
      text-transform: uppercase;
      transition: transform .18s ease, filter .18s ease;
      border: 0;
      cursor: pointer;
      user-select: none;
      white-space: nowrap;
    }

    #jaceo .btn-primary{
      background: var(--blue);
      color: #fff;
    }

    #jaceo .btn-secondary{
      background: var(--yellow);
      color: #000;
    }

    #jaceo .btn-primary:hover,
    #jaceo .btn-secondary:hover{
      transform: translateY(-1px);
      filter: saturate(1.05);
    }

    /* =====================================================
       LOCATOR FILTER – PANEL (RIGHT COLUMN, OUTSIDE BORDER)
    ===================================================== */

    #jaceo #CEOJA_Locator_Filter{
      width: 100%;
      justify-self: end;
    }

    #jaceo #CEOJA_Locator_Filter .locator-panel{
      width: 100%;
      background: #ffffff;
      border-radius: 18px;
      border: 1px solid rgba(254,180,47,.85);
      padding: 16px;
      box-shadow: 0 22px 58px rgba(0,0,0,.30);
    }

    #jaceo #CEOJA_Locator_Filter .locator-group{ margin-bottom: 12px; }

    #jaceo #CEOJA_Locator_Filter label{
      font-size: 12.5px;
      font-weight: 800;
      color: #193886;
      margin-bottom: 7px;
      display: block;
      letter-spacing: .02em;
    }

    #jaceo #CEOJA_Locator_Filter select{
      width: 100%;
      height: 46px;
      border-radius: 12px;
      border: 1px solid rgba(0,0,0,.14);
      padding: 0 12px;
      font-weight: 700;
      background: #ffffff;
      outline: none;
      font-size: 1.06rem;
    }

    #jaceo #CEOJA_Locator_Filter select:focus{
      border-color: #7fa6e5;
      box-shadow: 0 0 0 3px rgba(127,166,229,.30);
    }

    #jaceo #CEOJA_Locator_Filter .locator-go{
      width: 100%;
      height: 50px;
      border-radius: 12px;
      background: #193886;
      color: #ffffff;
      font-weight: 900;
      border: none;
      cursor: pointer;
      margin-top: 8px;
      transition: transform .15s ease, filter .15s ease;
      font-size: 1.06rem;
      letter-spacing: .04em;
    }

    #jaceo #CEOJA_Locator_Filter .locator-go:hover{
      transform: translateY(-1px);
      filter: saturate(1.05);
    }

    #jaceo #CEOJA_Locator_Filter .locator-hint{
      margin: 10px 2px 0;
      font-size: 12px;
      font-weight: 700;
      color: rgba(25,56,134,.86);
      line-height: 1.35;
    }

    /* =====================================================
       RESPONSIVE (ONE SET ONLY)
    ===================================================== */

    /* Tablet and below: stack cleanly */
    @media (max-width: 1200px){
  #jaceo .hero-frame{
    padding: 72px 5%;
    align-items: flex-start;
  }

  #jaceo .hero-inner{
    grid-template-columns: 1fr;
    align-items: start;
  }

  /* el filtro queda centrado cuando baja debajo del contenido */
  #jaceo #CEOJA_Locator_Filter{
    justify-self: center;
    width: 100%;
    max-width: 520px;
    margin-left: auto;
    margin-right: auto;
  }
}

    /* Mobile */
    @media (max-width: 900px){
      #jaceo .hero-frame{
        min-height: 100svh;
        padding: 78px 7% 78px;
        align-items: center;
      }

      #jaceo .hero-framed-content{
        padding: 34px 24px;
        border-width: 2px;
      }

      #jaceo .hero-framed-content::before{
        width: 72px;
        height: 72px;
        border-width: 4px;
      }

      #jaceo .hero-content h1{
        font-size: clamp(38px, 9vw, 56px);
        margin-bottom: 16px;
        line-height: 1.02;
      }

      #jaceo .hero-content p{
        font-size: 15px;
        line-height: 1.65;
        margin-bottom: 24px;
      }

      #jaceo .hero-actions{
        flex-direction: column;
        gap: 12px;
      }

      #jaceo .btn-primary,
      #jaceo .btn-secondary{
        width: 100%;
        text-align: center;
        padding: 14px 18px;
        min-height: 52px;
      }
    }

    @media (max-width: 600px){
      #jaceo .hero-frame{
        min-height: 100svh;
        padding: 68px 6% 68px;
      }

      #jaceo .hero-framed-content{
        padding: 28px 18px;
      }

      #jaceo #CEOJA_Locator_Filter{
        max-width: 100%;
      }
    }
    

/* =====================================================
   DESKTOP: FILTRO PEGADO A LA DERECHA CON 5% REAL
   (el 5% lo da .hero-frame)
===================================================== */
@media (min-width: 1201px){
  #jaceo #CEOJA_Locator_Filter{
    justify-self: end;          /* se pega al lado derecho del grid */
    width: 100%;
    display: flex;
    justify-content: flex-end;  /* panel hacia la derecha */
    padding: 0;                 /* importante: sin padding extra */
    margin: 0;                  /* limpio */
  }

  #jaceo #CEOJA_Locator_Filter .locator-panel{
    width: min(520px, 100%);    /* mantiene tu ancho sin overflow */
  }
}

@media (min-width: 1201px){
  #jaceo #CEOJA_Locator_Filter{
    justify-self: end;
  }
}



@media (min-width: 1201px) and (max-width: 1355px){

  /* 1) grid: dale más oxígeno al layout */
  #jaceo .hero-inner{
    grid-template-columns: minmax(0, 1fr) minmax(0, 460px);
    column-gap: clamp(14px, 2vw, 26px);
    align-items: center;
  }

  /* 2) el bloque enmarcado NO puede tener padding fijo gigante aquí */
  #jaceo .hero-framed-content{
    padding: clamp(34px, 3.2vw, 58px) clamp(22px, 2.6vw, 54px);
  }

  /* 3) tipografías: controla el salto del H1 + párrafo */
  #jaceo .hero-content h1{
    font-size: clamp(46px, 4.6vw, 74px);
    margin-bottom: 18px;
  }

  #jaceo .hero-content p{
    font-size: clamp(16px, 1.35vw, 18px);
    margin-bottom: 28px;
    max-width: 62ch;
  }

  /* 4) botones: reduce gap para que no fuerce ancho */
  #jaceo .hero-actions{
    gap: 14px;
  }

  #jaceo .btn-primary,
  #jaceo .btn-secondary{
    padding: 16px 34px;
    min-height: 54px;
  }

  /* 5) panel derecho: que respete el nuevo ancho */
  #jaceo #CEOJA_Locator_Filter .locator-panel{
    width: 100%;
  }
}

/* =====================================================
   Limpieza: evita duplicados y micro-overflows
===================================================== */
#jaceo .hero-frame{ overflow: hidden; } /* ya lo tienes, lo refuerzo */

/* opcional: baja un poco la intensidad de la grilla para que no “corte” visualmente */
#jaceo .hero-grid{
  opacity: .55;
  background-size: 88px 88px;
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-5ad50da */#TM_IndustriesServed_State{
      --tm-blue:#193886;
      --tm-blue2:#132c68;
      --tm-yellow:#FEB42F;
      --tm-white:#ffffff;

      --ink: rgba(12,15,20,.92);
      --muted: #000000;
      --line: rgba(12,15,20,.12);

      --paper:#ffffff;
      --soft:#f3f6fb;

      --radius: 22px;
      --radius2: 28px;

      --shadow: 0 28px 90px rgba(19,44,104,.18);
      --shadow2: 0 18px 55px rgba(12,15,20,.14);

      font-family: "Montserrat", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
      font-size: 1.06rem;
      width: 100%;
      padding: clamp(30px, 4.8vw, 70px) 5vw;
      background:
        radial-gradient(1200px 520px at 10% 12%, rgba(25,56,134,.10), transparent 55%),
        radial-gradient(900px 520px at 88% 22%, rgba(254,180,47,.12), transparent 56%),
        linear-gradient(180deg, #ffffff 0%, #ffffff 56%, #fbfcff 100%);
      position: relative;
      overflow: hidden;
      box-sizing: border-box;
      isolation: isolate;
    }
    #TM_IndustriesServed_State *{ box-sizing: border-box; }
    #TM_IndustriesServed_State img{ max-width:100%; display:block; }

    /* Ambient layer */
    #TM_IndustriesServed_State .tm-amb{
      position:absolute; inset:-2px;
      pointer-events:none;
      z-index:0;
      opacity:.9;
      filter: saturate(1.05);
    }
    #TM_IndustriesServed_State .tm-amb:before,
    #TM_IndustriesServed_State .tm-amb:after{
      content:"";
      position:absolute;
      inset:-20%;
      background:
        radial-gradient(900px 560px at 14% 12%, rgba(25,56,134,.16), transparent 58%),
        radial-gradient(720px 520px at 86% 16%, rgba(254,180,47,.18), transparent 60%),
        radial-gradient(820px 520px at 82% 78%, rgba(25,56,134,.12), transparent 62%),
        linear-gradient(115deg, rgba(19,44,104,.06), rgba(255,255,255,0) 48%, rgba(254,180,47,.08));
      transform: rotate(-2deg);
      filter: blur(18px);
      animation: TMambFloat 10s ease-in-out infinite;
    }
    #TM_IndustriesServed_State .tm-amb:after{
      inset:-26%;
      transform: rotate(3deg);
      opacity:.72;
      filter: blur(26px);
      animation-duration: 12.5s;
    }
    @keyframes TMambFloat{
      0%,100%{ transform: translate3d(0,0,0) rotate(-2deg) scale(1); }
      50%{ transform: translate3d(0,-10px,0) rotate(-1deg) scale(1.03); }
    }

    /* Header */
    #TM_IndustriesServed_State .head{
      position: relative;
      z-index: 1;
      max-width: 100%;
      margin: 0 auto clamp(16px, 2vw, 26px);
      display: grid;
      gap: 10px;
    }
    #TM_IndustriesServed_State .eyebrow{
      font-weight: 800;
      letter-spacing: .10em;
      text-transform: uppercase;
      color: rgba(25,56,134,.88);
      font-size: .92rem;
    }
    #TM_IndustriesServed_State h2{
      margin: 0;
      font-family: "Poppins", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
      font-weight: 900;
      font-size: clamp(1.75rem, 2.4vw, 2.35rem);
      line-height: 1.12;
      letter-spacing: -0.02em;
      color: var(--ink);
    }
    #TM_IndustriesServed_State .sub{
      margin: 0;

      color: var(--muted);
      line-height: 1.7;
      font-size: 1.06rem;
    }

    /* Layout */
    #TM_IndustriesServed_State .wrap{
      position: relative;
      z-index: 1;
      max-width: 100%;
      margin: 0 auto;
      display: grid;
      grid-template-columns: minmax(0, 1.18fr) minmax(0, .82fr);
      gap: clamp(16px, 2.4vw, 26px);
      align-items: stretch;
    }

    /* Main media card (height controlled) */
  #TM_IndustriesServed_State .mediaCard{
  display: flex;
  flex-direction: column;
  height: 100%;
}

    #TM_IndustriesServed_State .mediaFrame{
  margin: 14px;
  border-radius: calc(var(--radius2) - 10px);
  overflow: hidden;
  background: #0b0f16;
  box-shadow: 0 18px 55px rgba(0,0,0,.16);

  /* REEMPLAZA lo anterior del aspect-ratio/max-height por esto */
  flex: 1;
  height: 100%;
   /*min-height: clamp(360px, 44vw, 560px);*/
  max-height: none;
  aspect-ratio: auto;
}
   #TM_IndustriesServed_State .mainImg{
  width: 100%;
  height: 100%;
  object-fit: cover;
}
    #TM_IndustriesServed_State .mainImg.is-swapping{
      opacity: 0;
      transform: scale(1.04);
    }

    /* Right rail */
    #TM_IndustriesServed_State .rail{
      display: grid;
      grid-template-rows: auto 1fr;
      gap: clamp(14px, 1.8vw, 18px);
      min-width: 0;
    }

    /* Thumbnails (uniform size) */
    #TM_IndustriesServed_State .thumbs{
      background: rgba(255,255,255,.94);
      border: 1px solid rgba(25,56,134,.14);
      border-radius: var(--radius);
      box-shadow: var(--shadow2);
      padding: 12px;
      display: grid;
      gap: 10px;
      align-content: start;
      position: relative;
       overflow:hidden;
    }
    #TM_IndustriesServed_State .thumbs:before{
      content:"";
      position:absolute; inset:-1px;
      background: linear-gradient(135deg, rgba(25,56,134,.12), rgba(254,180,47,.12), rgba(25,56,134,.10));
      opacity:.35;
      filter: blur(16px);
      pointer-events:none;
      
       pointer-events:none;
  max-width:100%;
    }
    #TM_IndustriesServed_State .thumbBtn{
      position: relative;
      border: 0;
      padding: 0;
      background: transparent;
      cursor: pointer;
      border-radius: 16px;
      outline: none;
      text-align: left;
    }
    #TM_IndustriesServed_State .thumb{
      width: 100%;
      /* Same size always */
      height: 86px;
      border-radius: 16px;
      overflow: hidden;
      border: 1px solid rgba(12,15,20,.16);
      box-shadow: 0 10px 26px rgba(12,15,20,.10);
      transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
      background: #0b0f16;
      display: grid;
      grid-template-columns: 120px 1fr;
    }
    #TM_IndustriesServed_State .thumbMedia{
      width: 120px;
      height: 100%;
      overflow: hidden;
      background: #0b0f16;
    }
    #TM_IndustriesServed_State .thumbMedia img{
      width: 100%;
      height: 100%;
      object-fit: cover;
      opacity: .92;
      transform: scale(1.02);
      transition: opacity .25s ease, transform .35s ease;
    }
    #TM_IndustriesServed_State .thumbMeta{
      padding: 10px 12px;
      display: grid;
      align-content: center;
      gap: 4px;
      background: linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,255,255,.86));
    }
    #TM_IndustriesServed_State .thumbTitle{
      margin: 0;
      font-family: "Poppins", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
      font-weight: 900;
      font-size: 1.02rem;
      line-height: 1.12;
      color: rgba(12,15,20,.92);
      letter-spacing: -0.01em;
    }
    #TM_IndustriesServed_State .thumbHint{
      margin: 0;
      font-size: .98rem;
      color: rgba(12,15,20,.62);
      line-height: 1.25;
    }

    #TM_IndustriesServed_State .thumbBtn:hover .thumb{
      transform: translateY(-2px);
      box-shadow: 0 16px 40px rgba(12,15,20,.14);
      border-color: rgba(25,56,134,.26);
    }
    #TM_IndustriesServed_State .thumbBtn:hover .thumbMedia img{
      opacity: 1;
      transform: scale(1.06);
    }
    #TM_IndustriesServed_State .thumbBtn.is-active .thumb{
      border-color: rgba(254,180,47,.78);
      box-shadow: 0 18px 50px rgba(254,180,47,.14), 0 16px 42px rgba(12,15,20,.12);
      transform: translateY(-1px);
    }
    #TM_IndustriesServed_State .thumbBtn.is-active .thumbMedia img{
      opacity: 1;
      transform: scale(1.07);
    }
    #TM_IndustriesServed_State .thumbBtn:focus-visible .thumb{
      outline: 3px solid rgba(127,166,229,.65);
      outline-offset: 2px;
    }

    /* Copy card (dynamic content) */
    #TM_IndustriesServed_State .copy{
      background: rgba(255,255,255,.96);
      border: 1px solid rgba(25,56,134,.14);
      border-radius: var(--radius2);
      box-shadow: var(--shadow2);
      padding: clamp(16px, 2.1vw, 22px);
      display: grid;
      align-content: start;
      gap: 10px;
      position: relative;
      overflow: hidden;
      min-height: 220px;
    }
    #TM_IndustriesServed_State .copy:before{
      content:"";
      position:absolute; inset:-2px;
      background:
        radial-gradient(700px 460px at 18% 14%, rgba(25,56,134,.12), transparent 62%),
        radial-gradient(620px 420px at 86% 18%, rgba(254,180,47,.14), transparent 62%);
      filter: blur(14px);
      opacity: .9;
      pointer-events:none;
    }
    #TM_IndustriesServed_State .kicker{
      position: relative;
      z-index: 1;
      font-weight: 800;
      letter-spacing: .10em;
      text-transform: uppercase;
      color: rgba(25,56,134,.88);
      font-size: .92rem;
    }
    #TM_IndustriesServed_State .indTitle{
      position: relative;
      z-index: 1;
      margin: 0;
      font-family: "Poppins", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
      font-weight: 900;
      font-size: clamp(1.25rem, 1.6vw, 1.55rem);
      line-height: 1.14;
      letter-spacing: -0.02em;
      color: var(--ink);
    }
    #TM_IndustriesServed_State .indSub{
      position: relative;
      z-index: 1;
      margin: 0;
      color: rgba(12,15,20,.72);
      line-height: 1.65;
      font-size: 1.06rem;
    }
    #TM_IndustriesServed_State .indBody{
      position: relative;
      z-index: 1;
      margin: 0;
      color: var(--muted);
      line-height: 1.68;
      font-size: 1.06rem;
    }

    #TM_IndustriesServed_State .ctaRow{
      position: relative;
      z-index: 1;
      margin-top: 8px;
      display: flex;
      gap: 12px;
      flex-wrap: wrap;
    }
    #TM_IndustriesServed_State .btn{
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 12px 16px;
      border-radius: 0px;
      text-decoration: none;
      font-weight: 900;
      letter-spacing: .01em;
      border: 1px solid rgba(25,56,134,.22);
      transition: transform .2s ease, box-shadow .25s ease, background .25s ease, border-color .25s ease;
      font-family: "Poppins", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
      font-size: 1.06rem;
      line-height: 1;
      will-change: transform;
    }
    #TM_IndustriesServed_State .btnPrimary{
      background: linear-gradient(135deg, var(--tm-blue), var(--tm-blue2));
      color: var(--tm-white);
      box-shadow: 0 16px 44px rgba(25,56,134,.22);
      border-color: rgba(25,56,134,.18);
    }
    #TM_IndustriesServed_State .btnPrimary:hover{
      transform: translateY(-2px);
      box-shadow: 0 22px 60px rgba(25,56,134,.28);
    }
    #TM_IndustriesServed_State .btnOutline{
      background: rgba(255,255,255,.88);
      color: rgba(19,44,104,.92);
      border-color: rgba(254,180,47,.68);
      box-shadow: 0 14px 40px rgba(12,15,20,.10);
    }
    #TM_IndustriesServed_State .btnOutline:hover{
      transform: translateY(-2px);
      box-shadow: 0 18px 52px rgba(12,15,20,.14);
      border-color: rgba(254,180,47,.90);
    }

    /* Text swap animation */
    #TM_IndustriesServed_State .swap{
      transition: opacity .22s ease, transform .22s ease;
      will-change: opacity, transform;
    }
    #TM_IndustriesServed_State .swap.is-fading{
      opacity: 0;
      transform: translateY(6px);
    }

    /* Entrance reveal */
    #TM_IndustriesServed_State .reveal{
      opacity: 0;
      transform: translateY(10px);
      transition: opacity .7s ease, transform .7s ease;
    }
    #TM_IndustriesServed_State.is-inview .reveal{
      opacity: 1;
      transform: translateY(0);
    }

    /* Responsive */
    @media (max-width: 980px){
      #TM_IndustriesServed_State .wrap{
        grid-template-columns: 1fr;
      }
      #TM_IndustriesServed_State .thumbs{
        display: grid;
        grid-auto-flow: column;
        grid-auto-columns: minmax(270px, 1fr);
        overflow-x: auto;
        gap: 12px;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
      }
      #TM_IndustriesServed_State .thumbBtn{
        scroll-snap-align: start;
      }
      #TM_IndustriesServed_State .thumb{
        height: 92px;
      }
    }

    @media (prefers-reduced-motion: reduce){
      #TM_IndustriesServed_State .tm-amb:before,
      #TM_IndustriesServed_State .tm-amb:after{ animation: none; }
      #TM_IndustriesServed_State .mainImg,
      #TM_IndustriesServed_State .reveal,
      #TM_IndustriesServed_State .btn,
      #TM_IndustriesServed_State .thumb,
      #TM_IndustriesServed_State .thumbMedia img,
      #TM_IndustriesServed_State .swap{ transition: none !important; }
    }
    
   







/* =========================
   FIX DESKTOP ONLY (>= 981px)
   - Aquí sí queremos botones full width en la columna derecha
========================= */
@media (min-width: 981px){
  #TM_IndustriesServed_State .thumbBtn{ display:block; width:100%; }
  #TM_IndustriesServed_State .thumb{ width:100%; }
  #TM_IndustriesServed_State .thumbMeta{ width:100%; }
}

/* =========================
   FIX MOBILE / TABLET (<= 980px)
   - Carrusel real sin cortes
   - Cada card ocupa casi todo el viewport
   - Texto no se recorta raro
========================= */
@media (max-width: 980px){

  #TM_IndustriesServed_State .thumbs{
    grid-auto-columns: 88%;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 12px;
    scroll-padding-left: 12px;
  }

  /* Cada slide debe llenar SU columna (no 100% del contenedor total) */
  #TM_IndustriesServed_State .thumbBtn{
    width: 100%;
  }

  /* Ajuste interno para que el texto tenga espacio */
  #TM_IndustriesServed_State .thumb{
    grid-template-columns: 104px 1fr;
  }
  #TM_IndustriesServed_State .thumbMedia{
    width: 104px;
  }

  /* Clave: permite que el texto haga ellipsis correcto */
  #TM_IndustriesServed_State .thumbMeta{
    min-width: 0;
  }
  #TM_IndustriesServed_State .thumbTitle,
  #TM_IndustriesServed_State .thumbHint{
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

/* Extra para móviles muy pequeños */
@media (max-width: 520px){
  #TM_IndustriesServed_State .thumbs{ grid-auto-columns: 92%; }
  #TM_IndustriesServed_State .thumb{ grid-template-columns: 96px 1fr; }
  #TM_IndustriesServed_State .thumbMedia{ width: 96px; }
}



/* =========================
   FIX: Right rail must stretch (desktop/tablet)
   - Elimina el espacio vacío a la derecha
   - Fuerza ancho completo en rail / thumbs / buttons
========================= */
#TM_IndustriesServed_State .wrap{
  justify-items: stretch;
}

#TM_IndustriesServed_State .rail,
#TM_IndustriesServed_State .thumbs,
#TM_IndustriesServed_State .copy{
  width: 100%;
  max-width: 100%;
  justify-self: stretch;
}

#TM_IndustriesServed_State .thumbBtn{
  display: block;
  width: 100%;
  justify-self: stretch;
}

/* =========================
   FIX: Right thumbnails image always same size
   - La mini imagen NO cambia con el archivo
   - El contenedor manda, la imagen se adapta
========================= */
#TM_IndustriesServed_State .thumb{
  width: 100%;
  height: 86px; /* tu tamaño fijo (déjalo así o ajústalo) */
  grid-template-columns: 120px 1fr;
}

#TM_IndustriesServed_State .thumbMedia{
  width: 120px;
  height: 100%;
  overflow: hidden;
}

#TM_IndustriesServed_State .thumbMedia img{
  width: 100%;
  height: 100%;
  object-fit: cover;     /* clave: adapta sin deformar */
  object-position: center;
  display: block;
}
/* =========================
   FIX DEFINITIVO – 981px a 1200px
   Mini cards uniformes
   Imagen NO define altura
========================= */
@media (min-width: 981px) and (max-width: 1200px){

  /* TODAS las minicards del mismo alto */
  #TM_IndustriesServed_State .thumb{
    height: 96px;                 /* altura fija y uniforme */
    grid-template-columns: 120px 1fr;
    align-items: stretch;
  }

  /* Contenedor de imagen fijo */
  #TM_IndustriesServed_State .thumbMedia{
    width: 120px;
    height: 100%;
    overflow: hidden;
  }

  /* La imagen se adapta al contenedor */
  #TM_IndustriesServed_State .thumbMedia img{
    width: 100%;
    height: 100%;
    object-fit: cover;            /* CLAVE */
    object-position: center;
  }

  /* Texto NO empuja altura */
  #TM_IndustriesServed_State .thumbMeta{
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
  }

  /* Evita saltos por textos largos */
  #TM_IndustriesServed_State .thumbTitle,
  #TM_IndustriesServed_State .thumbHint{
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}
/* =========================
   FIX: Columna izquierda igual altura que la derecha
   - La izquierda NO depende de la imagen
   - La izquierda estira a la altura total de .rail (thumbs + copy)
   - La imagen se adapta al contenedor
========================= */

/* 1) Grid: ambas columnas estiran igual */
#TM_IndustriesServed_State .wrap{
  align-items: stretch;
}

/* 2) La derecha define altura (thumbs + copy) */
#TM_IndustriesServed_State .rail{
  height: 100%;
}

/* 3) La izquierda se estira a la misma altura que la derecha */
#TM_IndustriesServed_State .mediaCard{
  height: 100%;
}

/* 4) El frame de la imagen llena toda la altura disponible
      (IMPORTANTE: quitamos min-height por clamp en desktop) */
#TM_IndustriesServed_State .mediaFrame{
  margin: 14px;
  height: 100%;
  min-height: 0;     /* clave: no forzar altura por clamp */
  max-height: none;
  display: block;
}

/* 5) La imagen SIEMPRE se adapta al frame */
#TM_IndustriesServed_State .mainImg{
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

/* 6) Solo en mobile/tablet (< 980px) permitimos que la izquierda tenga altura propia */
@media (max-width: 980px){
  #TM_IndustriesServed_State .mediaFrame{
    min-height: clamp(320px, 56vw, 520px); /* aquí sí puede crecer */
    height: auto;
  }
  #TM_IndustriesServed_State .mainImg{
    height: 100%;
  }
}


/* =========================
   FIX DEFINITIVO (DESKTOP): IZQUIERDA MISMA ALTURA QUE DERECHA
   - La altura NO depende de la imagen
   - La imagen se adapta al contenedor
   - IMPORTANTE: anula el min-height clamp en desktop
========================= */

/* 1) El grid estira ambos items a la misma fila */
#TM_IndustriesServed_State .wrap{
  align-items: stretch;
}

/* 2) Mueve el "margen" a padding del contenedor para que el frame pueda medir 100% real */
#TM_IndustriesServed_State .mediaCard{
  padding: 14px;              /* antes lo tenías como margin en .mediaFrame */
  height: 100%;
  align-self: stretch;
  display: flex;
}

/* 3) El frame ahora llena toda la altura disponible de la columna */
#TM_IndustriesServed_State .mediaFrame{
  margin: 0 !important;       /* anula tu margin:14px anterior */
  width: 100%;
  height: 100%;
  min-height: 0 !important;   /* clave: mata el clamp en desktop */
  flex: 1;
  border-radius: calc(var(--radius2) - 10px);
  overflow: hidden;
  background: #0b0f16;
  box-shadow: 0 18px 55px rgba(0,0,0,.16);
}

/* 4) La imagen siempre se adapta */
#TM_IndustriesServed_State .mainImg{
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}


/* =========================
   FIX 981px–1200px
   - Mini cards TODAS iguales
   - Imagen mini SIEMPRE mismo tamaño
   - Texto NO se corta: clamp de líneas
========================= */
@media (min-width: 981px) and (max-width: 1200px){

  /* Ajusta un poco la proporción de columnas para que el rail no quede tan apretado */
  #TM_IndustriesServed_State .wrap{
    grid-template-columns: minmax(0, 1.06fr) minmax(0, .94fr);
  }

  /* Mini card uniforme */
  #TM_IndustriesServed_State .thumb{
    height: 96px;                 /* fija para que ninguna crezca más que otra */
    width: 100%;
    display: grid;
    grid-template-columns: 120px minmax(0, 1fr); /* minmax(0,1fr) evita cortes raros */
    align-items: stretch;
  }

  /* Contenedor de mini imagen fijo */
  #TM_IndustriesServed_State .thumbMedia{
    width: 120px;
    height: 100%;
    overflow: hidden;
    flex: 0 0 120px;
  }

  /* La mini imagen se adapta, no define el tamaño */
  #TM_IndustriesServed_State .thumbMedia img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
  }

  /* Texto centrado y SIN cortar feo */
  #TM_IndustriesServed_State .thumbMeta{
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
  }

  /* Título: 1 línea (si es largo, se recorta bonito) */
  #TM_IndustriesServed_State .thumbTitle{
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* Hint: 2 líneas máximo (no “se corta” a media frase, se clampa) */
  #TM_IndustriesServed_State .thumbHint{
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    white-space: normal; /* importante: quita nowrap */
    line-height: 1.2;
    max-height: calc(1.2em * 2);
  }
}


/* =========================
   MOBILE/TABLET: aquí sí dejamos altura propia para la imagen izquierda
   (porque ya no existe columna derecha al lado)
========================= */
@media (max-width: 980px){

  /* El padding lateral vuelve a ser el 5% real */
  #TM_IndustriesServed_State .wrap{
    padding-left: 5%;
    padding-right: 5%;
  }

  /* La card NO mete margen lateral */
  #TM_IndustriesServed_State .mediaCard{
    padding: 0;
  }

  /* El frame ocupa el ancho correcto */
  #TM_IndustriesServed_State .mediaFrame{
    margin: 14px 0 !important;   /* solo vertical */
    width: 100%;
    height: auto;
    max-height: clamp(260px, 52vw, 420px);
    aspect-ratio: 16 / 10;
    overflow: hidden;
  }

  #TM_IndustriesServed_State .mainImg{
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}


/* =========================
   FIX ÚNICO Y LIMPIO
   - >=981px: izquierda igual altura total de la derecha
   - <=980px: imagen con altura controlada (NO gigante)
========================= */

/* DESKTOP: 2 columnas reales */
@media (min-width: 981px){

  #TM_IndustriesServed_State .wrap{
    align-items: stretch;
  }

  /* La izquierda se estira igual que la derecha */
  #TM_IndustriesServed_State .mediaCard{
    padding: 14px;
    height: 100%;
    align-self: stretch;
    display: flex;
  }

  #TM_IndustriesServed_State .mediaFrame{
    margin: 0 !important;
    width: 100%;
    height: 100%;
    min-height: 0 !important;  /* mata el clamp en desktop */
    flex: 1;
    overflow: hidden;
  }

  #TM_IndustriesServed_State .mainImg{
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
  }
}

/* MOBILE/TABLET: 1 columna (aquí NO queremos que ocupe media página) */
@media (max-width: 980px){

  #TM_IndustriesServed_State .mediaCard{
    padding: 0;
    display: block;
    height: auto;
  }

  /* Altura controlada + ratio consistente */
  #TM_IndustriesServed_State .mediaFrame{
    margin: 14px !important;
    height: auto;
    min-height: 0 !important;
    max-height: clamp(260px, 52vw, 420px); /* BAJA el tamaño */
    aspect-ratio: 16 / 10;                /* evita “poster gigante” */
    overflow: hidden;
  }

  #TM_IndustriesServed_State .mainImg{
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
  }
}
/* =========================
   FIX DEFINITIVO: 5vw REAL EN MOBILE
   - La sección ya tiene padding 5vw
   - Quitamos margen lateral del frame (14px) que rompe el 5%
========================= */
@media (max-width: 980px){

  /* NO metas padding extra aquí, la sección ya tiene 5vw */
  #TM_IndustriesServed_State .wrap{
    padding: 0 !important;
  }

  /* La card no agrega nada lateral */
  #TM_IndustriesServed_State .mediaCard{
    padding: 0 !important;
    margin: 0 !important;
  }

  /* CLAVE: elimina el margin lateral de 14px */
  #TM_IndustriesServed_State .mediaFrame{
    margin: 14px 0 !important;   /* solo arriba/abajo */
    width: 100% !important;
    max-width: 100% !important;
    height: auto;
    max-height: clamp(260px, 52vw, 420px);
    aspect-ratio: 16 / 10;
    overflow: hidden;
  }

  #TM_IndustriesServed_State .mainImg{
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
  }
}
/* =========================
   FINAL FIX (>=1200px también)
   - 2 columnas misma altura
   - contenedor manda, imagen se adapta
   - elimina cualquier min-height clamp en desktop
========================= */

/* Desktop (2 columnas) */
@media (min-width: 981px){

  /* La fila del grid estira ambos lados igual */
  #TM_IndustriesServed_State .wrap{
    align-items: stretch !important;
  }

  /* Derecha se estira */
  #TM_IndustriesServed_State .rail{
    height: 100%;
    align-self: stretch;
  }

  /* Izquierda se estira igual */
  #TM_IndustriesServed_State .mediaCard{
    height: 100%;
    align-self: stretch;
    display: flex;
    flex-direction: column;
  }

  /* El frame ocupa TODA la altura disponible y NO depende de la imagen */
  #TM_IndustriesServed_State .mediaFrame{
    margin: 14px !important;
    flex: 1;
    height: auto !important;
    min-height: 0 !important;     /* mata tu clamp */
    max-height: none !important;
    aspect-ratio: auto !important;
    display: block;
  }

  /* Imagen siempre se adapta al frame */
  #TM_IndustriesServed_State .mainImg{
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
  }
}

/* Mobile/Tablet: altura controlada (1 columna) */
@media (max-width: 980px){

  #TM_IndustriesServed_State .mediaCard{
    height: auto;
    display: block;
  }

  #TM_IndustriesServed_State .mediaFrame{
    margin: 14px 0 !important; /* respeta el 5vw real */
    width: 100%;
    height: auto !important;
    min-height: 0 !important;
    max-height: clamp(260px, 52vw, 420px);
    aspect-ratio: 16 / 10;
    overflow: hidden;
  }

  #TM_IndustriesServed_State .mainImg{
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
  }
}
/* =========================
   FINAL FIX REAL (DESKTOP)
   - El alto NO lo manda la imagen
   - La fila del grid la manda el rail (derecha)
   - Copy estira y rellena, sin huecos
========================= */

@media (min-width: 981px){

  #TM_IndustriesServed_State .wrap{
    align-items: stretch !important;
  }

  /* Derecha: que tenga altura completa de la fila */
  #TM_IndustriesServed_State .rail{
    height: 100% !important;
    align-self: stretch !important;
  }

  /* El 1fr del rail debe poder estirarse sin límites raros */
  #TM_IndustriesServed_State .copy{
    height: 100% !important;
    min-height: 0 !important;
  }

  /* Izquierda: se estira a la altura de la fila (la manda la derecha) */
  #TM_IndustriesServed_State .mediaCard{
    height: 100% !important;
    align-self: stretch !important;
    display: flex !important;
    flex-direction: column !important;
  }

  /* Frame: NO usar clamp en desktop */
  #TM_IndustriesServed_State .mediaFrame{
    flex: 1 !important;
    height: 100% !important;
    min-height: 0 !important;          /* clave */
    max-height: none !important;
    aspect-ratio: auto !important;
  }

  /* Imagen se adapta al contenedor */
  #TM_IndustriesServed_State .mainImg{
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
    display: block !important;
  }
}

/* =========================
   FIX: Elimina el hueco visual debajo del botón
   - La card .copy se estira (por el 1fr del rail)
   - Convertimos .copy a flex column
   - Empujamos la CTA al fondo
========================= */

@media (min-width: 981px){

  #TM_IndustriesServed_State .copy{
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
  }

  /* Empuja el bloque del botón hacia abajo y “consume” el espacio */
  #TM_IndustriesServed_State .ctaRow{
    margin-top: auto !important;
    padding-top: 12px; /* separación elegante */
  }
}

/* =========================
   FIX ÚNICO Y CORRECTO
   - Desktop: izquierda = derecha
   - El contenedor manda, la imagen se adapta
========================= */

@media (min-width: 981px){

  /* 1) El grid manda la altura */
  #TM_IndustriesServed_State .wrap{
    align-items: stretch;
  }

  /* 2) La derecha define el alto real */
  #TM_IndustriesServed_State .rail{
    display: flex;
    flex-direction: column;
    height: 100%;
  }

  /* 3) La copy rellena el espacio */
  #TM_IndustriesServed_State .copy{
    flex: 1;
    display: flex;
    flex-direction: column;
  }

  #TM_IndustriesServed_State .ctaRow{
    margin-top: auto;
  }

  /* 4) Izquierda se estira igual */
  #TM_IndustriesServed_State .mediaCard{
    display: flex;
    padding: 14px;     /* el espacio va AQUÍ */
    height: 100%;
  }

  /* 5) El frame llena TODO el alto */
  #TM_IndustriesServed_State .mediaFrame{
    margin: 0;         /* CLAVE */
    flex: 1;
    height: 100%;
    min-height: 0;
    overflow: hidden;
  }

  /* 6) La imagen NUNCA manda el tamaño */
  #TM_IndustriesServed_State .mainImg{
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
  }
}

/* =========================
   FIX >1200px (DESKTOP REAL)
   - Quita el estiramiento que crea el hueco
   - Controla la altura de la imagen (la imagen ya NO manda la fila)
========================= */
@media (min-width: 1201px){

  /* 1) NO estirar a la fuerza (esto es lo que genera el “hueco”) */
  #TM_IndustriesServed_State .wrap{
    align-items: start !important;            /* clave */
  }

  #TM_IndustriesServed_State .rail{
    height: auto !important;                 /* deja altura natural */
    align-self: start !important;
    display: grid !important;
    grid-template-rows: auto auto !important;/* thumbs + copy en auto */
  }

  #TM_IndustriesServed_State .copy{
    height: auto !important;                 /* NO se estira */
    min-height: 0 !important;                /* anula el 220 si estorba */
    display: grid !important;                /* como estaba originalmente */
  }

  /* 2) La imagen queda “premium” pero con altura controlada */
  #TM_IndustriesServed_State .mediaCard{
    padding: 14px !important;                /* el espacio va aquí */
    height: auto !important;
    align-self: start !important;
  }

  #TM_IndustriesServed_State .mediaFrame{
    margin: 0 !important;                    /* evita romper el 100% */
    width: 100% !important;
    max-height: clamp(520px, 42vw, 680px) !important; /* controla alto */
    aspect-ratio: 16 / 10 !important;        /* consistente */
    overflow: hidden !important;
  }

  #TM_IndustriesServed_State .mainImg{
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
    display: block !important;
  }
}
/* =========================
   >1200px: LEFT = RIGHT (tope exacto)
   - Usa la variable --TMrailH que ya calculas en JS
   - La izquierda termina EXACTO donde termina la derecha
========================= */
@media (min-width: 1201px){

  /* La fila NO debe estirar por la imagen */
  #TM_IndustriesServed_State .wrap{
    align-items: start !important;
  }

  /* La derecha se queda con altura natural (thumbs + copy) */
  #TM_IndustriesServed_State .rail{
    height: auto !important;
    align-self: start !important;
    display: grid !important;
    grid-template-rows: auto auto !important;
  }

  #TM_IndustriesServed_State .copy{
    height: auto !important;
    min-height: 220px !important; /* conserva tu base */
    display: grid !important;
  }

  /* Mueve el “espacio” a padding (NO margin) para medir exacto */
  #TM_IndustriesServed_State .mediaCard{
    padding: 14px !important;
    margin: 0 !important;
    height: var(--TMrailH, auto) !important;  /* CLAVE */
    align-self: start !important;
    display: flex !important;
  }

  #TM_IndustriesServed_State .mediaFrame{
    margin: 0 !important;          /* CLAVE */
    width: 100% !important;
    height: 100% !important;       /* llena el alto del mediaCard */
    min-height: 0 !important;
    max-height: none !important;
    aspect-ratio: auto !important;
    overflow: hidden !important;
  }

  #TM_IndustriesServed_State .mainImg{
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
    display: block !important;
  }
}/* End custom CSS */