:root {
  --triotech-orange: #ec6b00;
  --triotech-gray: #55565a;
  --triotech-ink: #101820;
  --triotech-paper: #f4f5f6;
}

.triotech-shell {
  width: min(1180px, calc(100% - 48px));
  margin-inline: auto;
}

.triotech-master-page,
.triotech-iml-intro {
  color: var(--triotech-ink);
  font-family: Montserrat, Arial, sans-serif;
}

.triotech-master-page *,
.triotech-iml-intro * {
  box-sizing: border-box;
}

.triotech-eyebrow {
  margin: 0 0 16px;
  color: var(--triotech-orange);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .14em;
  line-height: 1.5;
  text-transform: uppercase;
}

.triotech-lead {
  max-width: 810px;
  font-size: clamp(18px, 2vw, 24px);
  line-height: 1.65;
}

.triotech-slider-h1 {
  margin: 0;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  line-height: inherit;
}

.triotech-master-hero {
  position: relative;
  overflow: hidden;
  min-height: 720px;
  display: grid;
  align-items: center;
  color: #fff;
  background: radial-gradient(circle at 82% 18%, rgba(236, 107, 0, .28), transparent 32%), linear-gradient(122deg, #070b10 0%, #121b24 58%, #232d35 100%);
}

.triotech-master-hero::after {
  content: "";
  position: absolute;
  inset: auto -8% -32% 35%;
  height: 62%;
  border: 1px solid rgba(236, 107, 0, .4);
  transform: skewY(-8deg);
}

.triotech-master-hero__grid {
  position: absolute;
  inset: 0;
  opacity: .16;
  background-image: linear-gradient(rgba(255, 255, 255, .15) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .15) 1px, transparent 1px);
  background-size: 72px 72px;
  mask-image: linear-gradient(90deg, transparent, #000 35%, #000);
}

.triotech-master-hero__content {
  position: relative;
  z-index: 1;
  padding-block: 150px 100px;
}

.triotech-master-hero h1 {
  max-width: 980px;
  margin: 0 0 28px;
  color: #fff;
  font-size: clamp(42px, 6.4vw, 88px);
  font-weight: 800;
  letter-spacing: -.045em;
  line-height: .98;
  text-transform: uppercase;
}

.triotech-master-hero .triotech-lead {
  color: rgba(255, 255, 255, .78);
}

.triotech-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 34px;
}

.triotech-button {
  display: inline-flex;
  min-height: 52px;
  align-items: center;
  justify-content: center;
  padding: 13px 24px;
  border: 2px solid transparent;
  border-radius: 2px;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .08em;
  line-height: 1.3;
  text-decoration: none !important;
  transition: background-color .2s ease, border-color .2s ease, color .2s ease, transform .2s ease;
}

.triotech-button:hover {
  transform: translateY(-2px);
}

.triotech-button:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 3px;
}

.triotech-button--primary {
  color: #fff !important;
  background: var(--triotech-orange);
}

.triotech-button--primary:hover {
  color: #fff !important;
  background: #c95b00;
}

.triotech-button--outline {
  color: var(--triotech-ink) !important;
  border-color: var(--triotech-ink);
}

.triotech-button--outline:hover {
  color: #fff !important;
  background: var(--triotech-ink);
}

.triotech-button--ghost {
  color: #fff !important;
  border-color: rgba(255, 255, 255, .55);
}

.triotech-button--ghost:hover {
  border-color: #fff;
  color: var(--triotech-ink) !important;
  background: #fff;
}

.triotech-file-types {
  margin-top: 18px;
  color: rgba(255, 255, 255, .62);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .16em;
}

.triotech-iml-intro {
  padding: 96px 0;
  background: #f1f3f4;
}

/* Home IML module follows the visual language of the existing WPBakery sections. */
.triotech-iml-intro {
  position: relative;
  overflow: hidden;
  padding: 88px 0 94px;
  border-top: 1px solid #edf0f2;
  border-bottom: 1px solid #edf0f2;
  background-color: #fff;
  background-image:
    radial-gradient(circle at 88% 8%, rgba(236, 107, 0, .08), transparent 28%),
    linear-gradient(rgba(16, 24, 40, .025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(16, 24, 40, .025) 1px, transparent 1px);
  background-size: auto, 52px 52px, 52px 52px;
}

.triotech-iml-intro::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: 82px;
  height: 3px;
  background: var(--triotech-orange);
  transform: translateX(-50%);
}

.triotech-iml-intro .triotech-shell {
  position: relative;
  width: min(1170px, calc(100% - 48px));
}

.triotech-iml-intro__overview {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(480px, 1.1fr);
  gap: clamp(42px, 5vw, 76px);
  align-items: center;
}

.triotech-iml-intro__copy {
  max-width: 580px;
}

.triotech-iml-intro .triotech-eyebrow {
  margin-bottom: 18px;
  font-size: 12px;
  letter-spacing: .16em;
}

.triotech-iml-intro h2 {
  color: #101828;
  font-size: clamp(34px, 3.5vw, 52px);
  line-height: 1.12;
  scroll-margin-top: 190px;
}

.triotech-iml-intro .triotech-lead {
  margin: 24px 0 0;
  color: #55565a;
  font-size: 17px;
  line-height: 1.75;
}

.triotech-iml-intro__statement {
  margin: 28px 0 0;
  padding-left: 18px;
  border-left: 3px solid var(--triotech-orange);
  color: #101828;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .12em;
}

.triotech-iml-intro__visual {
  position: relative;
  min-height: 390px;
  margin: 0;
  overflow: hidden;
  border-radius: 6px;
  background: #11161c;
  box-shadow: 0 28px 60px rgba(16, 24, 40, .18);
}

.triotech-iml-intro__visual::before {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 0;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: inherit;
  pointer-events: none;
}

.triotech-iml-intro__visual::after {
  content: "";
  position: absolute;
  z-index: 1;
  top: 22px;
  right: 22px;
  width: 68px;
  height: 68px;
  border-top: 2px solid var(--triotech-orange);
  border-right: 2px solid var(--triotech-orange);
  pointer-events: none;
}

.triotech-iml-intro__visual img {
  width: 100%;
  height: 100%;
  min-height: 390px;
  display: block;
  object-fit: cover;
  object-position: 62% center;
}

.triotech-iml-intro__visual-label {
  position: absolute;
  z-index: 2;
  right: 24px;
  bottom: 22px;
  padding: 10px 12px;
  color: #fff;
  background: rgba(8, 13, 18, .78);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .1em;
}

.triotech-iml-intro .triotech-process {
  gap: 12px;
  margin-top: 52px;
  border: 0;
  background: transparent;
}

.triotech-iml-intro .triotech-process li {
  min-height: 116px;
  padding: 20px 16px;
  border: 1px solid #e5e8eb;
  border-radius: 5px;
  box-shadow: 0 10px 28px rgba(16, 24, 40, .055);
  transition: border-color .25s ease, box-shadow .25s ease, transform .25s ease;
}

.triotech-iml-intro .triotech-process li:hover {
  border-color: rgba(236, 107, 0, .55);
  box-shadow: 0 16px 36px rgba(16, 24, 40, .09);
  transform: translateY(-4px);
}

.triotech-iml-intro .triotech-process span {
  margin-bottom: 25px;
}

.triotech-iml-intro .triotech-process strong {
  color: #101828;
  font-size: 11px;
  letter-spacing: .025em;
}

.triotech-iml-intro .triotech-actions {
  justify-content: center;
  margin-top: 38px;
}

.triotech-iml-intro .triotech-button {
  min-height: 50px;
  border-radius: 4px;
  font-size: 12px;
}

.triotech-iml-intro h2,
.triotech-flow-section h2,
.triotech-value-section h2,
.triotech-final-cta h2 {
  margin: 0;
  color: inherit;
  font-size: clamp(32px, 4.3vw, 58px);
  font-weight: 800;
  letter-spacing: -.035em;
  line-height: 1.08;
}

.triotech-process {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 1px;
  margin: 48px 0 0;
  padding: 0;
  border: 1px solid #cfd3d6;
  list-style: none;
  background: #cfd3d6;
}

.triotech-process li {
  position: relative;
  min-height: 128px;
  padding: 22px 17px;
  background: #fff;
}

.triotech-process li::after {
  content: "";
  position: absolute;
  right: -5px;
  top: 50%;
  z-index: 2;
  width: 9px;
  height: 9px;
  border-top: 2px solid var(--triotech-orange);
  border-right: 2px solid var(--triotech-orange);
  transform: translateY(-50%) rotate(45deg);
}

.triotech-process li:last-child::after {
  display: none;
}

.triotech-process span {
  display: block;
  margin-bottom: 28px;
  color: var(--triotech-orange);
  font-size: 12px;
  font-weight: 800;
}

.triotech-process strong {
  display: block;
  color: var(--triotech-ink);
  font-size: 12px;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.triotech-flow-section {
  padding: 108px 0;
  background: var(--triotech-paper);
}

.triotech-detail-section {
  padding: 110px 0;
  background: #fff;
}

.triotech-detail-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  border: 1px solid #d7dade;
  background: #d7dade;
}

.triotech-detail-card {
  position: relative;
  min-height: 360px;
  padding: clamp(34px, 5vw, 62px);
  background: #fff;
}

.triotech-detail-card:nth-child(4n+2),
.triotech-detail-card:nth-child(4n+3) {
  background: #f7f8f9;
}

.triotech-detail-card__number {
  display: block;
  margin-bottom: 54px;
  color: rgba(16, 24, 32, .13);
  font-size: 64px;
  font-weight: 800;
  line-height: 1;
}

.triotech-detail-card h2 {
  margin: 0 0 22px;
  color: var(--triotech-ink);
  font-size: clamp(25px, 3vw, 38px);
  font-weight: 800;
  letter-spacing: -.025em;
  line-height: 1.18;
}

.triotech-detail-card > p {
  margin: 0;
  color: var(--triotech-gray);
  font-size: 16px;
  line-height: 1.8;
}

.triotech-value-section {
  padding: 110px 0;
  color: #fff;
  background: var(--triotech-ink);
}

.triotech-value-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: start;
}

.triotech-value-section ul {
  margin: 0;
  padding: 0;
  border-top: 1px solid rgba(255, 255, 255, .22);
  list-style: none;
}

.triotech-value-section li {
  position: relative;
  padding: 22px 0 22px 28px;
  border-bottom: 1px solid rgba(255, 255, 255, .22);
  font-size: 16px;
  line-height: 1.55;
}

.triotech-value-section li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 29px;
  width: 8px;
  height: 8px;
  background: var(--triotech-orange);
}

.triotech-final-cta {
  padding: 100px 0;
  text-align: center;
  background: #e8eaec;
}

.triotech-final-cta p:not(.triotech-eyebrow) {
  max-width: 720px;
  margin: 24px auto 34px;
  color: var(--triotech-gray);
  font-size: 18px;
  line-height: 1.7;
}

.triotech-proof-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.triotech-proof-card {
  min-height: 174px;
  padding: 26px;
  border: 1px solid rgba(255, 255, 255, .18);
  background: rgba(255, 255, 255, .07);
}

.triotech-proof-card__technology {
  display: block;
  margin-bottom: 19px;
  color: var(--triotech-orange);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .12em;
}

.triotech-proof-card h3 {
  margin: 0 0 10px;
  color: #fff;
  font-size: 17px;
  line-height: 1.4;
}

.triotech-proof-card p {
  margin: 0;
  color: rgba(255, 255, 255, .7);
  font-size: 13px;
  line-height: 1.65;
}

.triotech-iml-intro__overview--no-image {
  grid-template-columns: 1fr;
}

.triotech-iml-intro__overview--no-image .triotech-iml-intro__copy {
  max-width: 780px;
}

.triotech-detail-card ul {
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
}

.triotech-detail-card ul li {
  position: relative;
  padding: 9px 0 9px 20px;
  border-bottom: 1px solid #eceef0;
  color: var(--triotech-gray);
  font-size: 15px;
  line-height: 1.55;
}

.triotech-detail-card ul li:last-child {
  border-bottom: 0;
}

.triotech-detail-card ul li::before {
  content: "";
  position: absolute;
  top: 18px;
  left: 0;
  width: 6px;
  height: 6px;
  background: var(--triotech-orange);
}

/*
 * Industries page (native WPBakery build) — the card grid below is rendered
 * from real [vc_row_inner]/[vc_column_inner] + [vc_column_text] shortcodes so
 * every heading, paragraph and bullet is editable from Composer. These rules
 * are namespaced under .triotech-vc-* (not .triotech-detail-card) because the
 * WPBakery markup nests content one level deeper (.vc_column-inner >
 * .wpb_wrapper) than the plain custom-shortcode cards elsewhere on the site.
 */
.triotech-vc-fullbleed .triotech-container {
  max-width: none;
  width: 100%;
  margin: 0;
  padding: 0;
}

.wpb_row.triotech-vc-grid-inner {
  margin-left: 0;
  margin-right: 0;
}

.triotech-vc-card {
  position: relative;
  border: 1px solid #d7dade;
  margin-right: -1px;
  margin-bottom: -1px;
  background: #fff;
}

.triotech-vc-card .vc_column-inner {
  padding: 0;
}

.triotech-vc-card:nth-child(odd) {
  background: #fff;
}

.triotech-vc-card:nth-child(even) {
  background: #f7f8f9;
}

.triotech-vc-card:hover {
  z-index: 1;
  box-shadow: inset 0 0 0 1px rgba(236, 107, 0, .35), 0 22px 44px rgba(16, 24, 40, .1);
}

.triotech-vc-card .wpb_wrapper {
  min-height: 320px;
  padding: clamp(28px, 2.4vw, 40px) clamp(24px, 2.6vw, 38px);
  transition: transform .25s ease;
}

.triotech-vc-card:hover .wpb_wrapper {
  transform: translateY(-3px);
}

.triotech-vc-card__number {
  display: block;
  margin-bottom: 24px;
  color: rgba(16, 24, 32, .13);
  font-size: 44px;
  font-weight: 800;
  line-height: 1;
}

.triotech-vc-card .wpb_wrapper h3 {
  margin: 0 0 16px;
  color: var(--triotech-ink);
  font-size: clamp(19px, 1.6vw, 23px);
  font-weight: 800;
  letter-spacing: -.02em;
  line-height: 1.2;
}

.triotech-vc-card .wpb_wrapper p {
  margin: 0;
  color: var(--triotech-gray);
  font-size: 15px;
  line-height: 1.7;
}

.triotech-vc-card .wpb_wrapper ul {
  margin: 16px 0 0;
  padding: 0;
  list-style: none;
}

.triotech-vc-card .wpb_wrapper ul li {
  position: relative;
  padding: 8px 0 8px 18px;
  border-bottom: 1px solid #eceef0;
  color: var(--triotech-gray);
  font-size: 14px;
  line-height: 1.5;
}

.triotech-vc-card .wpb_wrapper ul li:last-child {
  border-bottom: 0;
}

.triotech-vc-card .wpb_wrapper ul li::before {
  content: "";
  position: absolute;
  top: 16px;
  left: 0;
  width: 6px;
  height: 6px;
  background: var(--triotech-orange);
}

@media (max-width: 1200px) {
  .triotech-vc-card.vc_col-sm-3 {
    width: 50%;
  }
}

@media (max-width: 640px) {
  .triotech-vc-card.vc_col-sm-3 {
    width: 100%;
    margin-right: 0;
  }
}

/*
 * Industries hero — photo background needs light text + a dark scrim for
 * legibility. Scoped to .triotech-industries-hero (set via el_class on the
 * row itself, in triotech_industries_native_content()) so the shared
 * .triotech-iml-intro class keeps its normal dark-on-light look everywhere
 * else it's used (e.g. the IML hub page). Two classes = higher specificity
 * than the base .triotech-iml-intro rules, so this wins regardless of
 * stylesheet load order.
 */
.triotech-iml-intro.triotech-industries-hero {
  background-image: url("/triotech/wp-content/uploads/2026/09/bgd2-1.png");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.triotech-iml-intro.triotech-industries-hero::before {
  z-index: 2;
}

.triotech-iml-intro.triotech-industries-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(115deg, rgba(6, 10, 15, .86) 0%, rgba(14, 20, 28, .58) 45%, rgba(14, 20, 28, .16) 100%);
}

.triotech-iml-intro.triotech-industries-hero .wpb_text_column {
  position: relative;
  z-index: 1;
}

.triotech-iml-intro.triotech-industries-hero h1 {
  color: #fff;
}

.triotech-iml-intro.triotech-industries-hero .triotech-lead {
  color: rgba(255, 255, 255, .84);
}

.triotech-iml-intro.triotech-industries-hero .triotech-iml-intro__statement {
  color: #fff;
}

/*
 * Project Management hero — same photo + scrim + light-text treatment as
 * the Industries hero above, scoped to .triotech-pm-hero so the shared
 * .triotech-iml-intro class keeps its normal look everywhere else.
 */
.triotech-iml-intro.triotech-pm-hero {
  background-image: url("/triotech/wp-content/uploads/2026/09/bgd3-1.png");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.triotech-iml-intro.triotech-pm-hero::before {
  z-index: 2;
}

.triotech-iml-intro.triotech-pm-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(115deg, rgba(6, 10, 15, .86) 0%, rgba(14, 20, 28, .58) 45%, rgba(14, 20, 28, .16) 100%);
}

.triotech-iml-intro.triotech-pm-hero .wpb_text_column {
  position: relative;
  z-index: 1;
}

.triotech-iml-intro.triotech-pm-hero h1 {
  color: #fff;
}

.triotech-iml-intro.triotech-pm-hero .triotech-lead {
  color: rgba(255, 255, 255, .84);
}

.triotech-iml-intro.triotech-pm-hero .triotech-iml-intro__statement {
  color: #fff;
}

/*
 * Machine Park hero — same photo + scrim + light-text treatment as the
 * Industries and Project Management heroes above, scoped to .triotech-mp-hero
 * so the shared .triotech-iml-intro class keeps its normal look everywhere
 * else it's used.
 */
.triotech-iml-intro.triotech-mp-hero {
  background-image: url("/triotech/wp-content/uploads/2026/09/bgd4-1.png");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.triotech-iml-intro.triotech-mp-hero::before {
  z-index: 2;
}

.triotech-iml-intro.triotech-mp-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(115deg, rgba(6, 10, 15, .86) 0%, rgba(14, 20, 28, .58) 45%, rgba(14, 20, 28, .16) 100%);
}

.triotech-iml-intro.triotech-mp-hero .wpb_text_column {
  position: relative;
  z-index: 1;
}

.triotech-iml-intro.triotech-mp-hero h1 {
  color: #fff;
}

.triotech-iml-intro.triotech-mp-hero .triotech-lead {
  color: rgba(255, 255, 255, .84);
}

.triotech-iml-intro.triotech-mp-hero .triotech-iml-intro__statement {
  color: #fff;
}

/*
 * Deep Hole Drilling hero — same photo + scrim + light-text treatment as
 * Industries / Project Management / Machine Park above, scoped to
 * .triotech-dhd-hero so the shared .triotech-iml-intro class keeps its
 * normal look everywhere else it's used.
 */
.triotech-iml-intro.triotech-dhd-hero {
  background-image: url("/triotech/wp-content/uploads/2026/09/bgd5-1.png");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.triotech-iml-intro.triotech-dhd-hero::before {
  z-index: 2;
}

.triotech-iml-intro.triotech-dhd-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(115deg, rgba(6, 10, 15, .86) 0%, rgba(14, 20, 28, .58) 45%, rgba(14, 20, 28, .16) 100%);
}

.triotech-iml-intro.triotech-dhd-hero .wpb_text_column {
  position: relative;
  z-index: 1;
}

.triotech-iml-intro.triotech-dhd-hero h1 {
  color: #fff;
}

.triotech-iml-intro.triotech-dhd-hero .triotech-lead {
  color: rgba(255, 255, 255, .84);
}

.triotech-iml-intro.triotech-dhd-hero .triotech-iml-intro__statement {
  color: #fff;
}

/*
 * Advanced Manufacturing hero — same photo + scrim + light-text treatment as
 * Industries / Project Management / Machine Park / Deep Hole Drilling above,
 * scoped to .triotech-am-hero so the shared .triotech-iml-intro class keeps
 * its normal look everywhere else it's used.
 */
.triotech-iml-intro.triotech-am-hero {
  background-image: url("/triotech/wp-content/uploads/2026/09/bgd6-1.png");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.triotech-iml-intro.triotech-am-hero::before {
  z-index: 2;
}

.triotech-iml-intro.triotech-am-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(115deg, rgba(6, 10, 15, .86) 0%, rgba(14, 20, 28, .58) 45%, rgba(14, 20, 28, .16) 100%);
}

.triotech-iml-intro.triotech-am-hero .wpb_text_column {
  position: relative;
  z-index: 1;
}

.triotech-iml-intro.triotech-am-hero h1 {
  color: #fff;
}

.triotech-iml-intro.triotech-am-hero .triotech-lead {
  color: rgba(255, 255, 255, .84);
}

.triotech-iml-intro.triotech-am-hero .triotech-iml-intro__statement {
  color: #fff;
}

/*
 * Automation hero — same photo + scrim + light-text treatment as the
 * Industries / Project Management / Machine Park / Deep Hole Drilling /
 * Advanced Manufacturing heroes above, scoped to .triotech-automation-hero
 * so the shared .triotech-iml-intro class keeps its normal look everywhere
 * else it's used.
 */
.triotech-iml-intro.triotech-automation-hero {
  background-image: url("/triotech/wp-content/uploads/2026/09/bgd7-1.png");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.triotech-iml-intro.triotech-automation-hero::before {
  z-index: 2;
}

.triotech-iml-intro.triotech-automation-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(115deg, rgba(6, 10, 15, .86) 0%, rgba(14, 20, 28, .58) 45%, rgba(14, 20, 28, .16) 100%);
}

.triotech-iml-intro.triotech-automation-hero .wpb_text_column {
  position: relative;
  z-index: 1;
}

.triotech-iml-intro.triotech-automation-hero h1 {
  color: #fff;
}

.triotech-iml-intro.triotech-automation-hero .triotech-lead {
  color: rgba(255, 255, 255, .84);
}

.triotech-iml-intro.triotech-automation-hero .triotech-iml-intro__statement {
  color: #fff;
}

/*
 * Shared SIZE-only treatment for every photo-hero row above (Industries, PM,
 * Machine Park, Deep Hole Drilling, Advanced Manufacturing, Automation).
 * Colors/overlay/typography stay on each page's own .triotech-XXX-hero class
 * — this class only changes the box dimensions, matched to the existing
 * "Razvoj i projektovanje" raw-HTML hero (.trp-hero) so every hero section
 * on the site reads as the same size: min-height 650px / padding 150-0-78 on
 * desktop, 610px / 130-0-56 at tablet, 570px at mobile (values read directly
 * off .trp-hero's own CSS).
 */
.triotech-iml-intro.triotech-photo-hero {
  display: flex;
  align-items: flex-end;
  min-height: 650px;
  padding: 150px 0 78px;
}

/*
 * Typography + text-block width to match /razvoj-i-projektovanje/'s .trp-hero
 * exactly (h1 font-size/weight/letter-spacing/line-height, lead paragraph
 * size). Scoped to .triotech-photo-hero only — the shared .triotech-iml-intro
 * h1/.triotech-lead rules elsewhere (e.g. the Home IML section) are untouched.
 */
.triotech-iml-intro.triotech-photo-hero h1 {
  font-size: clamp(45px, 6vw, 86px);
  font-weight: 500;
  letter-spacing: -3px;
  line-height: .98;
}

.triotech-iml-intro.triotech-photo-hero .triotech-lead {
  font-size: clamp(17px, 1.7vw, 22px);
  line-height: 1.65;
}

@media (max-width: 767px) {
  .triotech-iml-intro.triotech-photo-hero {
    min-height: 610px;
    padding: 130px 0 56px;
  }
}

@media (max-width: 480px) {
  .triotech-iml-intro.triotech-photo-hero {
    min-height: 570px;
  }

  .triotech-iml-intro.triotech-photo-hero h1 {
    font-size: 43px;
  }
}

/*
 * Project Management — 10-step process grid (5 columns x 2 rows on desktop).
 * Modern floating-card treatment: rounded corners, soft shadow, hover lift,
 * and a large low-opacity "ghost" step number in the background — reuses the
 * visual language of .triotech-vc-card but with real gaps between cards
 * instead of a shared-border spreadsheet grid. Namespaced .triotech-vc-step*
 * (kept separate from .triotech-vc-card) since the layout is number/title/
 * description only, no bullet list.
 *
 * WPBakery nests two ".wpb_wrapper" divs per column (one directly under
 * .vc_column-inner, one deeper inside .wpb_text_column) — the outer one is
 * styled as the visible card (border/radius/shadow/hover), the inner one
 * only as the padded content box, distinguished with child combinators so
 * the card doesn't end up with a double border.
 */
.wpb_row.triotech-vc-step-row {
  margin-left: 0;
  margin-right: 0;
  padding: 40px 4vw 44px;
  background: var(--triotech-paper);
}

.triotech-vc-step {
  position: relative;
}

.triotech-vc-step .vc_column-inner {
  padding: 9px;
}

.triotech-vc-step > .vc_column-inner > .wpb_wrapper {
  position: relative;
  height: 100%;
  overflow: hidden;
  border: 1px solid #e5e7ea;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 4px 16px rgba(16, 24, 40, .045);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}

.triotech-vc-step:hover > .vc_column-inner > .wpb_wrapper {
  transform: translateY(-5px);
  border-color: rgba(236, 107, 0, .4);
  box-shadow: 0 20px 40px rgba(16, 24, 40, .12);
}

.triotech-vc-step .wpb_text_column > .wpb_wrapper {
  position: relative;
  min-height: 224px;
  padding: 30px 24px 26px;
}

.triotech-vc-step__number {
  position: absolute;
  z-index: -1;
  top: 12px;
  right: 18px;
  color: rgba(16, 24, 32, .1);
  font-size: 52px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -.02em;
}

.triotech-vc-step .wpb_wrapper h3 {
  position: relative;
  margin: 0 0 10px;
  padding-top: 15px;
  color: var(--triotech-ink);
  font-size: 15px;
  font-weight: 800;
  letter-spacing: .01em;
  line-height: 1.3;
  text-transform: uppercase;
}

.triotech-vc-step .wpb_wrapper h3::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 26px;
  height: 3px;
  background: var(--triotech-orange);
}

.triotech-vc-step .wpb_wrapper p {
  margin: 0;
  color: var(--triotech-gray);
  font-size: 14px;
  line-height: 1.6;
}

/*
 * WPBakery has no bootstrap-grid equivalent for a fifth-width column, so
 * width="1/5" renders a literal class token "vc_col-sm-1/5" (with a raw
 * slash) instead of a "vc_col-sm-N" number — matched here via an attribute
 * selector rather than a class selector, since an unescaped "/" is not a
 * valid character in a CSS class-name token.
 */
@media (max-width: 1200px) {
  .triotech-vc-step[class~="vc_col-sm-1/5"] {
    width: 33.3333%;
  }
}

@media (max-width: 780px) {
  .triotech-vc-step[class~="vc_col-sm-1/5"] {
    width: 50%;
  }
}

@media (max-width: 520px) {
  .triotech-vc-step[class~="vc_col-sm-1/5"] {
    width: 100%;
  }

  .triotech-vc-step .wpb_text_column > .wpb_wrapper {
    min-height: 0;
  }
}

/*
 * Machine Park — "spec plate" cards. Deliberately different treatment from
 * both .triotech-vc-card (Industries — light, bordered spreadsheet grid)
 * and .triotech-vc-step (Project Management — light floating card with a
 * ghost number): dark ink plates with an orange top edge and a technical
 * corner bracket, explicit SPOSOBNOST / PRIMENA field labels (the content
 * genuinely is MACHINE → CAPABILITY → APPLICATION, so the labels make that
 * structure visible instead of flattening it into a generic title+paragraph
 * card), and PRIMENA rendered as small tags instead of a bullet list.
 * Namespaced .triotech-vc-spec* — kept separate from the other two systems.
 */
.wpb_row.triotech-vc-spec-row {
  margin-left: 0;
  margin-right: 0;
  padding: 40px 4vw 44px;
  background: var(--triotech-paper);
}

.triotech-vc-spec {
  position: relative;
}

.triotech-vc-spec .vc_column-inner {
  padding: 9px;
}

.triotech-vc-spec > .vc_column-inner > .wpb_wrapper {
  position: relative;
  height: 100%;
  overflow: hidden;
  background: var(--triotech-ink);
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 8px;
  box-shadow: 0 10px 28px rgba(8, 12, 18, .22);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}

.triotech-vc-spec:hover > .vc_column-inner > .wpb_wrapper {
  transform: translateY(-5px);
  border-color: rgba(236, 107, 0, .55);
  box-shadow: 0 22px 44px rgba(8, 12, 18, .34);
}

.triotech-vc-spec > .vc_column-inner > .wpb_wrapper::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--triotech-orange);
}

.triotech-vc-spec > .vc_column-inner > .wpb_wrapper::after {
  content: "";
  position: absolute;
  top: 14px;
  right: 14px;
  width: 20px;
  height: 20px;
  border-top: 1px solid rgba(255, 255, 255, .18);
  border-right: 1px solid rgba(255, 255, 255, .18);
  transition: border-color .25s ease;
}

.triotech-vc-spec:hover > .vc_column-inner > .wpb_wrapper::after {
  border-color: rgba(236, 107, 0, .55);
}

.triotech-vc-spec .wpb_text_column > .wpb_wrapper {
  position: relative;
  min-height: 272px;
  padding: 26px 22px 24px;
}

.triotech-vc-spec__number {
  display: inline-block;
  margin-bottom: 16px;
  padding: 4px 9px;
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 3px;
  color: rgba(255, 255, 255, .55);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .1em;
}

.triotech-vc-spec .wpb_wrapper h3 {
  margin: 0 0 18px;
  color: #fff;
  font-size: 16px;
  font-weight: 800;
  letter-spacing: .01em;
  line-height: 1.25;
  text-transform: uppercase;
}

.triotech-vc-spec__field {
  margin-bottom: 16px;
}

.triotech-vc-spec__field:last-child {
  margin-bottom: 0;
}

.triotech-vc-spec__label {
  display: block;
  margin-bottom: 7px;
  color: var(--triotech-orange);
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .14em;
}

.triotech-vc-spec__field p {
  margin: 0;
  color: rgba(255, 255, 255, .72);
  font-size: 13.5px;
  line-height: 1.6;
}

.triotech-vc-spec__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.triotech-vc-spec__tag {
  padding: 5px 9px;
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 3px;
  background: rgba(255, 255, 255, .04);
  color: rgba(255, 255, 255, .78);
  font-size: 11.5px;
  line-height: 1.3;
}

@media (max-width: 1200px) {
  .triotech-vc-spec.vc_col-sm-3 {
    width: 50%;
  }
}

@media (max-width: 640px) {
  .triotech-vc-spec.vc_col-sm-3 {
    width: 100%;
  }

  .triotech-vc-spec .wpb_text_column > .wpb_wrapper {
    min-height: 0;
  }
}

/*
 * Deep Hole Drilling — 4-panel MAŠINA / PROCES / PRIMENA / REALAN DEO grid.
 * A third, distinct treatment again: a simple light panel with an orange
 * left rule, no card shadow/border-box — appropriate for 4 static facets
 * of one machine rather than a repeated list of many items.
 */
.wpb_row.triotech-vc-panel-row {
  margin-left: 0;
  margin-right: 0;
}

.triotech-vc-panel {
  position: relative;
}

.triotech-vc-panel .vc_column-inner {
  padding: 9px;
}

.triotech-vc-panel > .vc_column-inner > .wpb_wrapper {
  height: 100%;
  background: var(--triotech-paper);
  border-left: 4px solid var(--triotech-orange);
}

.triotech-vc-panel .wpb_text_column > .wpb_wrapper {
  padding: 26px 28px;
}

.triotech-vc-panel .wpb_wrapper h3 {
  margin: 0 0 12px;
  color: var(--triotech-orange);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.triotech-vc-panel .wpb_wrapper p {
  margin: 0;
  color: var(--triotech-ink);
  font-size: 15px;
  line-height: 1.65;
}

@media (max-width: 640px) {
  .triotech-vc-panel.vc_col-sm-6 {
    width: 100%;
  }
}

/*
 * Advanced Manufacturing hub — a fifth, distinct treatment: light bordered
 * card (not a dark plate like .triotech-vc-spec, not a plain left-border
 * fact box like .triotech-vc-panel) with a small "TEHNOLOGIJA 0N" index tag,
 * two definition rows (SPOSOBNOST / PRIMENA) separated by hairline rules,
 * a highlighted "KORIST ZA VAS" callout box (the customer-benefit part of
 * the brief's Technology → Capability → Application → Customer Benefit
 * model gets its own visual weight), and an optional outbound link to the
 * existing detailed subpage (CNC/EDM/Specijalne tehnologije) — the
 * "Završna obrada" card has no subpage yet, so it simply omits the link.
 */
.wpb_row.triotech-vc-tech-row {
  margin-left: 0;
  margin-right: 0;
  padding: 40px 4vw 44px;
  background: var(--triotech-paper);
}

.triotech-vc-tech {
  position: relative;
}

.triotech-vc-tech .vc_column-inner {
  padding: 9px;
}

.triotech-vc-tech > .vc_column-inner > .wpb_wrapper {
  height: 100%;
  background: #fff;
  border: 1px solid #e5e8eb;
  border-radius: 8px;
  box-shadow: 0 10px 28px rgba(16, 24, 40, .06);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}

.triotech-vc-tech:hover > .vc_column-inner > .wpb_wrapper {
  transform: translateY(-4px);
  border-color: rgba(236, 107, 0, .4);
  box-shadow: 0 18px 40px rgba(16, 24, 40, .1);
}

.triotech-vc-tech .wpb_text_column > .wpb_wrapper {
  padding: 28px 26px 26px;
}

.triotech-vc-tech__index {
  display: inline-block;
  margin-bottom: 14px;
  color: var(--triotech-orange);
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .14em;
}

.triotech-vc-tech .wpb_wrapper h3 {
  margin: 0 0 18px;
  color: var(--triotech-ink);
  font-size: 17px;
  font-weight: 800;
  letter-spacing: .01em;
  line-height: 1.25;
  text-transform: uppercase;
}

.triotech-vc-tech__row {
  padding: 14px 0;
  border-top: 1px solid #edf0f2;
}

.triotech-vc-tech__label {
  display: block;
  margin-bottom: 6px;
  color: var(--triotech-gray);
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .12em;
}

.triotech-vc-tech__row p {
  margin: 0;
  color: var(--triotech-ink);
  font-size: 14px;
  line-height: 1.6;
}

.triotech-vc-tech__benefit {
  margin-top: 14px;
  padding: 14px 16px;
  border-left: 3px solid var(--triotech-orange);
  background: #fdf6ef;
}

.triotech-vc-tech__benefit .triotech-vc-tech__label {
  color: var(--triotech-orange);
}

.triotech-vc-tech__benefit p {
  margin: 0;
  color: var(--triotech-ink);
  font-size: 14px;
  line-height: 1.6;
}

.triotech-vc-tech__link {
  display: inline-flex;
  margin-top: 18px;
  color: var(--triotech-orange);
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: .04em;
  text-decoration: none;
}

.triotech-vc-tech__link:hover {
  text-decoration: underline;
}

@media (max-width: 640px) {
  .triotech-vc-tech.vc_col-sm-6 {
    width: 100%;
  }
}

.triotech-reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .55s ease, transform .55s ease;
}

.triotech-reveal.is-visible {
  opacity: 1;
  transform: none;
}

.widget_socials-2 a[href$="#"],
.site-header-wrap a[href$="#"][title] {
  display: none !important;
}

@media (max-width: 980px) {
  .triotech-shell {
    width: min(100% - 36px, 760px);
  }

  .triotech-master-hero {
    min-height: 640px;
  }

  .triotech-process {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .triotech-process li {
    min-height: 112px;
  }

  .triotech-process li::after {
    display: none;
  }

  .triotech-iml-intro {
    padding-block: 78px;
  }

  .triotech-iml-intro__overview {
    grid-template-columns: 1fr;
  }

  .triotech-iml-intro__copy {
    max-width: 720px;
  }

  .triotech-iml-intro__visual {
    min-height: 360px;
  }

  .triotech-iml-intro__visual img {
    min-height: 360px;
  }

  .triotech-iml-intro .triotech-process {
    gap: 12px;
  }

  .triotech-detail-grid,
  .triotech-value-layout {
    grid-template-columns: 1fr;
  }

  .triotech-value-layout {
    gap: 48px;
  }
}

@media (max-width: 640px) {
  .triotech-shell {
    width: min(100% - 32px, 560px);
  }

  .triotech-master-hero {
    min-height: 640px;
  }

  .triotech-master-hero__content {
    padding-block: 150px 80px;
  }

  .triotech-actions {
    flex-direction: column;
  }

  .triotech-button {
    width: 100%;
  }

  .triotech-iml-intro,
  .triotech-flow-section,
  .triotech-detail-section,
  .triotech-value-section,
  .triotech-final-cta {
    padding-block: 76px;
  }

  .triotech-iml-intro {
    padding-block: 68px;
  }

  .triotech-iml-intro .triotech-shell {
    width: min(100% - 32px, 560px);
  }

  .triotech-iml-intro h2 {
    font-size: clamp(30px, 9vw, 39px);
  }

  .triotech-iml-intro .triotech-lead {
    font-size: 16px;
  }

  .triotech-iml-intro__visual,
  .triotech-iml-intro__visual img {
    min-height: 260px;
  }

  .triotech-iml-intro__visual img {
    object-position: 82% center;
  }

  .triotech-iml-intro__visual-label {
    right: 16px;
    bottom: 14px;
    max-width: calc(100% - 32px);
    font-size: 9px;
  }

  .triotech-process,
  .triotech-detail-grid {
    grid-template-columns: 1fr;
  }

  .triotech-process li {
    min-height: 106px;
  }

  .triotech-detail-card {
    min-height: auto;
  }

  .triotech-detail-card:nth-child(n) {
    background: #fff;
  }

  .triotech-detail-card:nth-child(even) {
    background: #f7f8f9;
  }

  .triotech-iml-intro .triotech-process li {
    min-height: 92px;
  }

  .triotech-proof-grid {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  .triotech-reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .triotech-button {
    transition: none;
  }

  .triotech-iml-intro .triotech-process li {
    transition: none;
  }

  .triotech-iml-intro .triotech-process li:hover {
    transform: none;
  }
}

/*
 * Home page fix — "Pogledajte sve usluge" button (native WPBakery content,
 * not generated by this plugin). Its inline style carries a stray
 * "display: block" (every sibling button on the page with the same pill
 * style — border-radius:30px — is inline-flex/inline-block and sized to its
 * text), which stretches this one button to the full 1009px column width
 * as an oversized oval. Matching it back to how every other button on the
 * page renders: auto width, centered by its .button-wrap wrapper.
 */
.triotech-button[style*="display: block"] {
  display: inline-flex !important;
  width: auto !important;
}

/*
 * Language switcher (GTranslate globe), 10.09.2026 v3 — desktop placement
 * fix + a second, independent instance next to the mobile hamburger.
 *
 * Desktop: GTranslate injects its <li class="menu-item-gtranslate"> as a
 * plain shrink-wrapped element (height = the 22px globe icon only), while
 * every other item in this menu gets its real height (100px, matching the
 * nav bar) from padding on the theme's own <a> tag — which this <li> never
 * has, since GTranslate renders a <span>, not an <a>.
 *
 * v2 tried position:absolute + right:0, matching the hamburger button's own
 * technique — but that removes the <li> from normal flow, which shrinks
 * #main-nav's own (content-driven) width by exactly the space the icon used
 * to occupy. right:0 then lands flush against the nav's new, smaller right
 * edge — which is now "Kontakt"'s own edge — so the icon overlapped
 * "Kontakt" instead of sitting after it.
 *
 * v3: stays in normal flow instead of ever going absolute. Giving the <li>
 * itself vertical padding — 39px top/bottom, so 39 + 22 (icon) + 39 = 100px,
 * the same total height every sibling <li> already has via its <a>'s own
 * padding — centers the icon exactly like every other item, without
 * touching horizontal position at all: it just stays exactly where it
 * already sat in the flow, right after "Kontakt" with the same natural gap
 * every other pair of menu items has.
 */
@media (min-width: 992px) {
  .main-nav .menu-item-gtranslate {
    padding: 39px 0 !important;
  }
}

/*
 * Mobile: a second GTranslate instance (see triotech_configure_gtranslate()
 * "wrapper_selector") renders into this element, which
 * triotech_inject_mobile_lang_switcher_anchor() inserts right before the
 * theme's own hamburger button. Hidden above the theme's own 991px mobile
 * breakpoint (the nav-menu instance above already covers desktop) so the
 * two never show at the same time; positioned the same way the hamburger
 * itself is (absolute, relative to #site-header-inner, vertically centered)
 * with enough right offset to clear the 24px-wide hamburger plus a gap.
 */
.triotech-lang-switcher-mobile {
  display: none;
}

@media (max-width: 991px) {
  .triotech-lang-switcher-mobile {
    display: block;
    position: absolute;
    top: 50%;
    right: 40px;
    z-index: 101;
    transform: translateY(-50%);
  }
}

/*
 * Footer promo block (10.09.2026, on request) — templates/footer-promotion.php
 * renders TWO independent things when MailChimp for WP (mc4wp) is active:
 * (1) a ".triotech-subscribe" box — an email-signup form, headed by the
 * theme_mod "promo_subs_text", which this project earlier set to contact
 * -CTA copy ("Pošaljite tehničku dokumentaciju...") assuming it was just the
 * intro text for the promo block below — not realizing it is specifically
 * the heading for this MailChimp box. Since MailChimp was never connected
 * (no API key), the box also shows MC4WP's own unstyled English warning
 * text behind it. (2) A second, completely separate heading/sub-heading/
 * button block (promo_heading/promo_subheading/promo_button/
 * promo_button_url — already correctly configured to a real "POŠALJITE
 * PROJEKAT" button linking to /ponude/) that renders right below it.
 * Block (2) already is the "contact CTA" the text was meant to describe —
 * so rather than editing the theme's conditional (which would need a theme
 * file change), the broken/redundant block (1) is simply hidden; nothing
 * else on the page depends on it.
 */
.footer-promotion .triotech-subscribe {
  display: none !important;
}

/*
 * [triotech_newsletter] shortcode (10.09.2026) — the plugin's own
 * newsletter signup form, replacing MailChimp for WP everywhere it was
 * used (footer "eBilten" widget). Deliberately plain/small — this sits in
 * a narrow footer widget column, not a marketing hero.
 */
.triotech-newsletter-form {
  max-width: 320px;
}

.triotech-newsletter-row {
  display: flex;
  gap: 8px;
}

.triotech-newsletter-row input[type="email"] {
  flex: 1 1 auto;
  min-width: 0;
  height: 44px;
  padding: 0 14px;
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: 3px;
  background: rgba(255, 255, 255, .06);
  color: #fff;
  font-size: 13px;
}

.triotech-newsletter-row input[type="email"]::placeholder {
  color: rgba(255, 255, 255, .5);
}

.triotech-newsletter-row input[type="email"]:focus {
  outline: none;
  border-color: var(--triotech-orange);
  background: rgba(255, 255, 255, .1);
}

.triotech-newsletter-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  min-width: 0;
  flex: 0 0 auto;
  padding: 0;
  border: 0;
  border-radius: 3px;
  background: var(--triotech-orange);
  color: #fff;
  cursor: pointer;
  transition: background-color .2s ease;
}

.triotech-newsletter-submit:hover {
  background: #c95b00;
}

.triotech-newsletter-submit svg {
  width: 16px;
  height: 16px;
  fill: currentColor;
}

.triotech-newsletter-submit:disabled {
  opacity: .6;
  cursor: default;
}

.triotech-newsletter-consent {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-top: 12px;
  cursor: pointer;
}

.triotech-newsletter-consent input[type="checkbox"] {
  flex: 0 0 auto;
  width: 15px;
  height: 15px;
  margin-top: 2px;
  accent-color: var(--triotech-orange);
}

.triotech-newsletter-consent span {
  color: rgba(255, 255, 255, .58);
  font-size: 11.5px;
  line-height: 1.5;
}

.triotech-newsletter-msg {
  margin: 10px 0 0;
  font-size: 12px;
  line-height: 1.5;
}

.triotech-newsletter-msg[data-state="ok"] {
  color: #7fce9a;
}

.triotech-newsletter-msg[data-state="error"] {
  color: #ff9d8f;
}

.triotech-newsletter-hp {
  position: absolute !important;
  left: -9999px !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
}

/*
 * Footer polish (10.09.2026, on request) — "footer feels disconnected
 * from the rest of the site". Two changes: the white/reversed logo
 * (reused from the homepage's dark header, see
 * triotech_footer_logo() in triotech-site-core.php) above the about
 * text, and an orange accent-underline under every footer widget title,
 * matching the accent-underline already used for section headings
 * elsewhere on the site (.triotech-headings .sep.accent) so the footer
 * reads as part of the same design system rather than a stock theme
 * default.
 */
.triotech-footer-logo {
  margin-bottom: 20px;
}

.triotech-footer-logo img {
  display: block;
  max-width: 170px;
  height: auto;
}

#footer-widgets .widget .widget-title {
  position: relative;
  padding-bottom: 12px;
}

#footer-widgets .widget .widget-title::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 36px;
  height: 2px;
  background: var(--triotech-orange);
}

#footer-widgets .widget_links .links-wrap li {
  margin-bottom: 4px;
}

#footer-widgets .widget_information ul li {
  transition: color .2s ease;
}

#footer-widgets .widget_information ul li:hover {
  color: rgba(255, 255, 255, .85);
}

/* Missing gap between the Kontakt icons and their text (reported 10.09.2026). */
#footer-widgets .widget_information ul li i {
  margin-right: 10px;
}

/*
 * Legal pages hero (10.09.2026, on request) — /uslovi-koriscenja/,
 * /politika-privatnosti/, /politika-kolacica/ had a plain white intro
 * (just the ".triotech-legal-intro" eyebrow/title/lead text block, no
 * photo) while every other content page on the site opens with a photo
 * hero. Same recipe already used for the Industries/Project Management/
 * Machine Park heroes (.triotech-iml-intro.XXX-hero — photo + dark
 * gradient scrim + white text), applied here directly to
 * .triotech-legal-intro so no page content/shortcode needs editing.
 * Background reuses title3.jpg, the same image the theme already shows
 * by default on simple pages like Kontakt (featured_title_background_img)
 * — no new image invented.
 */
.triotech-legal-intro {
  position: relative;
  overflow: hidden;
  padding: 132px 0 64px;
  background-image: url("/triotech/wp-content/uploads/2025/12/title3.jpg");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.triotech-legal-intro::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(115deg, rgba(6, 10, 15, .86) 0%, rgba(14, 20, 28, .58) 45%, rgba(14, 20, 28, .16) 100%);
}

.triotech-legal-intro .wpb_text_column {
  position: relative;
  z-index: 1;
}

.triotech-legal-intro h1 {
  color: #fff;
}

.triotech-legal-intro .triotech-lead {
  color: rgba(255, 255, 255, .84);
}

@media (max-width: 782px) {
  .triotech-legal-intro {
    padding: 108px 0 48px;
  }
}