/* Product pages retain their own product imagery and dynamic selections. */
/* Home uses the same navy fade as the Solutions hero. */
.home-page section.hero.company-photo-hero::after,
.about-page section.about-hero.company-photo-hero::after {
  background-image: linear-gradient(90deg, rgba(7,24,39,.99) 0%, rgba(7,24,39,.96) 28%, rgba(7,24,39,.78) 43%, rgba(7,24,39,.38) 62%, rgba(7,24,39,.08) 85%), linear-gradient(0deg, rgba(7,24,39,.38), transparent 48%), var(--company-hero-image) !important;
}
.about-page section.about-hero.company-photo-hero::after {
  background-size: cover, cover, auto 100%;
  background-position: center, center, calc(100% + 170px) top;
}
/* Shared detail hero palette follows the Solutions navy fade. */
section.company-photo-hero.product-photo-hero { color: #fff !important; background-color: #071827 !important; }
section.company-photo-hero.product-photo-hero::before {
  background: linear-gradient(90deg, rgba(7,24,39,.99) 0%, rgba(7,24,39,.96) 28%, rgba(7,24,39,.78) 43%, rgba(7,24,39,.38) 62%, rgba(7,24,39,.08) 85%), linear-gradient(0deg, rgba(7,24,39,.38), transparent 48%) !important;
}
section.company-photo-hero.product-photo-hero :is(h1, h2, .back-label) { color: #fff !important; }
section.company-photo-hero.product-photo-hero p { color: rgba(255,255,255,.72) !important; }
section.company-photo-hero.product-photo-hero a { color: rgba(255,255,255,.82) !important; }
.product-card { background-image: none !important; }
.product-card::before, .product-card::after { display: none !important; }
header a[data-i18n="navBrands"] { color: #123653 !important; }
:is(.site-header .brand-copy, .about-header .about-brand, .solutions-header .solutions-brand) strong {
  color: #123653 !important;
}
section.company-photo-hero.product-photo-hero {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: #f7f9fb var(--product-hero-image) right top / auto 100% no-repeat;
}
section.company-photo-hero.product-photo-hero::after { display: none; }
section.company-photo-hero.product-photo-hero::before {
  content: "";
  display: block;
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(90deg, #f7f9fb 0%, rgba(247,249,251,.96) 30%, rgba(247,249,251,.74) 48%, rgba(247,249,251,.05) 76%);
}
section.company-photo-hero.product-photo-hero img[class*="hero-image"],
section.company-photo-hero.product-photo-hero #heroImage {
  display: block !important;
  inset: 0 0 0 auto;
  width: 68%;
  height: 100%;
  position: absolute;
  object-fit: cover;
  object-position: right top;
  opacity: 1;
  z-index: 0;
}
.product-photo-hero [class*="hero-copy"],
.product-photo-hero .km-copy { position: relative; z-index: 2; }
@media (max-width: 760px) {
  section.company-photo-hero.product-photo-hero { background-size: auto 100%; }
  section.company-photo-hero.product-photo-hero img[class*="hero-image"], section.company-photo-hero.product-photo-hero #heroImage { width: 100%; }
  section.company-photo-hero.product-photo-hero::before { background: linear-gradient(90deg, rgba(247,249,251,.96), rgba(247,249,251,.55)); }
}
/* Department selection uses its own image; the overview keeps the sketch. */
body:not(.all-divisions-view) .solutions-hero.company-photo-hero::after { display: none; }
body:not(.all-divisions-view) .solutions-hero.company-photo-hero .hero-image-wrap > img {
  display: block !important;
  object-fit: cover;
  object-position: right top;
  filter: none;
  transform: none;
}
body:not(.all-divisions-view) .solutions-hero.company-photo-hero .image-overlay {
  display: block !important;
  background: linear-gradient(90deg, #f7f9fb 0%, rgba(247,249,251,.94) 30%, rgba(247,249,251,.7) 48%, rgba(247,249,251,.08) 76%),
    linear-gradient(0deg, rgba(247,249,251,.2), transparent 50%);
}
/* Shared architectural sketch across all page heroes. */
section.company-photo-hero {
  background: linear-gradient(110deg, #f7f9fb, #ffffff);
  color: #172d40;
  isolation: isolate;
}
section.company-photo-hero::before { display: none; }
section.company-photo-hero::after {
  content: "";
  display: block;
  position: absolute;
  inset: 0 0 0 30%;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(90deg, rgba(247, 249, 251, .7), rgba(255, 255, 255, .04) 65%),
    linear-gradient(0deg, rgba(247, 249, 251, .12), transparent 45%),
    var(--company-hero-image, url("hero-building-colored-sketch.png")) right top / cover no-repeat;
  mask-image: linear-gradient(90deg, transparent, #000 25%);
}
.company-photo-hero .image-overlay,
.company-photo-hero .about-hero-overlay,
.company-photo-hero img[class*="hero-image"],
.company-photo-hero #heroImage,
.company-photo-hero .hero-image-wrap > img,
.company-photo-hero .hero-department-grid { display: none !important; }
.company-photo-hero .hero-image-wrap { background: transparent !important; }
.company-photo-hero .hero-visual,
.company-photo-hero .solutions-hero-visual { pointer-events: none; }
.company-photo-hero h1 { text-shadow: none; }
.company-photo-hero .hero-lead,
.company-photo-hero .about-hero-copy > p:last-child,
.company-photo-hero .back-label { color: #455d70; }
.company-photo-hero .year-card,
.company-photo-hero .orbit-card {
  background: rgba(255, 255, 255, .88);
  border: 1px solid #d7dfe6;
  backdrop-filter: blur(10px);
}
.company-photo-hero :is(h1, h2, p, .back-label, .eyebrow, .year-card strong, .orbit-card strong) { color: #172d40 !important; }
.company-photo-hero :is(.year-card span, .orbit-card span) { color: #526a7e; }
.company-photo-hero :is(h1 span, h1 em) { color: #d60b2f; }
.company-photo-hero a:not(.button):not([class*="button"]) { color: #284f6a; }
.site-header, .about-header { color: #172d40 !important; }
:is(.site-header, .about-header) :is(.brand-copy small, .about-brand small, .desktop-nav, .about-nav, .lang-toggle, .about-language) { color: #455d70 !important; }
:is(.site-header, .about-header) :is(a, .menu-toggle, .about-menu, button.active) { color: #172d40 !important; }
:is(.site-header, .about-header) :is(.lang-toggle, .about-language) { background: #ffffffd9; border-color: #cbd5dd; }
:is(.site-header, .about-header) :is(.header-cta, .about-nav-cta) { border-color: #cbd5dd; }
.desktop-nav.nav-open, .about-nav.open { background: rgba(255,255,255,.6) !important; border: 0 !important; }
.about-nav, .desktop-nav, .solutions-nav {
  padding: 12px 18px;
  background: linear-gradient(135deg, rgba(255,255,255,.4), rgba(245,249,252,.2));
  -webkit-backdrop-filter: blur(24px) saturate(145%);
  backdrop-filter: blur(24px) saturate(145%);
  border: 0;
  border-radius: 12px;
  box-shadow: 0 8px 28px rgba(23,45,64,.045);
}
.about-nav .about-nav-cta,
.desktop-nav .header-cta,
.solutions-nav .solutions-nav-cta { border: 0; background: rgba(255,255,255,.25); border-radius: 6px; }
.desktop-nav { margin-right: 0; gap: 28px; }
.desktop-nav .header-cta { display: flex; }
.desktop-nav a.active { padding-bottom: 7px; border-bottom: 1px solid #d60b2f; }
.solutions-header, .solutions-header :is(a, small, button, .solutions-language) { color: #172d40 !important; }
.solutions-language { background: #ffffffd9; border-color: #cbd5dd; }
.solutions-header {
  position: absolute;
  inset: 0 0 auto;
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-bottom: 0;
  box-shadow: none;
}
.dept-nav-wrapper {
  position: sticky;
  top: 0;
  z-index: 90;
  width: 100%;
  margin: 0;
  padding: 12px 0;
  background: rgba(247,249,251,.82);
  backdrop-filter: blur(12px);
  border-top: 1px solid #d7dfe6;
  border-bottom: 1px solid #d7dfe6;
}
.dept-nav-wrapper .dept-nav-inner { width: min(calc(100% - 80px), 1400px); margin-inline: auto; display: flex; align-items: center; gap: 20px; overflow-x: auto; scrollbar-width: none; }
.dept-nav-inner::-webkit-scrollbar { display: none; }
.dept-nav-title { color: #526a7e; font-size: 12px; font-weight: 700; white-space: nowrap; }
.dept-tabs { display: flex; align-items: center; gap: 8px; }
.dept-tab { display: inline-flex; align-items: center; padding: 8px 16px; font: 500 13px "Noto Sans Thai", sans-serif; white-space: nowrap; cursor: pointer; text-decoration: none; color: #455d70; background: rgba(255,255,255,.55); border: 1px solid #cbd5dd; }
.dept-tab:hover { color: #172d40; background: #fff; border-color: #9aafbf; }
.dept-tab.active { color: #fff; background: #d60b2f; border-color: #d60b2f; }
.solutions-hero { padding-top: 90px; }
/* Partner names stay legible over both photography and dark division panels. */
.brand-pills :is(.pill-label, .pill) {
  font-family: "Noto Sans Thai", "DM Sans", sans-serif;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.6;
  color: #123653 !important;
}
.brand-pills .pill-label {
  padding: 4px 10px;
  background: rgba(247, 249, 251, .94);
}
.brand-pills .pill {
  background: rgba(247, 249, 251, .94);
  border-color: #cbd5dd;
}
@media (max-width: 760px) {
  .dept-nav-wrapper .dept-nav-inner { width: calc(100% - 44px); gap: 12px; }
}
.solutions-nav-cta { border-color: #cbd5dd; }
.solutions-nav.open { background: rgba(255,255,255,.6) !important; border: 0 !important; }
@media (max-width: 760px) {
  section.company-photo-hero {
    background: linear-gradient(90deg, rgba(247, 249, 251, .94), rgba(247, 249, 251, .35)),
      linear-gradient(0deg, rgba(247, 249, 251, .8), transparent 70%),
      var(--company-hero-image, url("hero-building-colored-sketch.png")) right top / cover no-repeat;
  }
  section.company-photo-hero::after { display: none; }
}

/* Fade the photo itself so its left edge blends into the white hero. */
@media (min-width: 761px) {
  section.hero.company-photo-hero::after {
    inset: 0 -8% 0 42%;
    background-image: linear-gradient(90deg, transparent, transparent),
      linear-gradient(0deg, rgba(247, 249, 251, .06), transparent 25%),
      var(--company-hero-image, url("hero-building-colored-sketch.png"));
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.04) 8%, rgba(0,0,0,.32) 20%, rgba(0,0,0,.78) 38%, #000 55%);
    mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.04) 8%, rgba(0,0,0,.32) 20%, rgba(0,0,0,.78) 38%, #000 55%);
  }
  section.hero.company-photo-hero::before { display: none; }
}
/* Home hero uses the same navy as the Solutions section. */
.home-page section.hero.company-photo-hero { background: var(--navy); color: #fff; }
.home-page .hero.company-photo-hero :is(h1, .eyebrow) { color: #fff !important; }
.home-page .hero.company-photo-hero .hero-lead { color: rgba(255,255,255,.8) !important; }
.home-page .hero.company-photo-hero::after {
  inset: 0;
  background-image:
    linear-gradient(90deg, rgba(7, 24, 39, .98) 0%, rgba(7, 24, 39, .9) 31%, rgba(7, 24, 39, .56) 53%, rgba(7, 24, 39, .08) 78%),
    linear-gradient(0deg, rgba(7, 24, 39, .38), transparent 48%),
    var(--company-hero-image);
  background-size: cover, cover, auto 100%;
  background-position: center, center, calc(100% + 170px) top;
  background-repeat: no-repeat;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, transparent 20%, rgba(0,0,0,.08) 30%, rgba(0,0,0,.28) 40%, rgba(0,0,0,.58) 50%, rgba(0,0,0,.84) 60%, #000 70%);
  mask-image: linear-gradient(90deg, transparent 0%, transparent 20%, rgba(0,0,0,.08) 30%, rgba(0,0,0,.28) 40%, rgba(0,0,0,.58) 50%, rgba(0,0,0,.84) 60%, #000 70%);
}
.home-page .hero-copy { padding-top: max(250px, 35vh); }
.home-page .hero h1 { max-width: 620px; font-size: clamp(48px, 6.2vw, 88px); line-height: 1.02; letter-spacing: -.065em; }
.home-page .hero .eyebrow { color: rgba(255,255,255,.7) !important; font-size: 11px; letter-spacing: .18em; }
.home-page .hero .hero-lead { max-width: 520px; line-height: 1.75; }
.home-page .hero .hero-actions { margin-top: 32px; }
.home-page .site-header :is(.brand-copy strong, .brand-copy small, a, .menu-toggle, button.active) { color: #fff !important; }
.home-page .site-header :is(.desktop-nav, .lang-toggle) { color: rgba(255,255,255,.85) !important; background: rgba(36,74,104,.4); }
.home-page .site-header .desktop-nav.nav-open { background: rgba(36,74,104,.96) !important; }
@media (max-width: 760px) {
  .home-page section.hero.company-photo-hero {
    background: linear-gradient(90deg, rgba(36,74,104,.98), rgba(36,74,104,.38)),
      linear-gradient(0deg, #244a68, transparent 75%),
      var(--company-hero-image) right top / cover no-repeat;
  }
}

/* Use the Home hero treatment consistently on About and Solutions. */
.about-page .about-hero,
.solutions-page .solutions-hero { background: var(--navy); color: #fff; }
.about-page .about-hero::before,
.solutions-page .solutions-hero::before { display: none; }
.about-page .about-hero-image,
.solutions-page .solutions-hero .hero-image-wrap > img { display: none !important; }
.about-page .about-hero::after,
.solutions-page .solutions-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(90deg, rgba(7,24,39,.98), rgba(7,24,39,.88) 31%, rgba(7,24,39,.48) 57%, rgba(7,24,39,.08) 82%), linear-gradient(0deg, rgba(7,24,39,.38), transparent 48%), var(--company-hero-image);
  background-size: cover, cover, cover;
  background-position: center, center, right center;
}
.about-page .about-hero::after {
  background-image: linear-gradient(90deg, rgba(7,24,39,.98), rgba(7,24,39,.9) 31%, rgba(7,24,39,.56) 53%, rgba(7,24,39,.08) 78%), linear-gradient(0deg, rgba(7,24,39,.38), transparent 48%), url("hero-trirex-renovated.png");
  background-size: cover, cover, auto 100%;
  background-position: center, center, calc(100% + 220px) top;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, transparent 20%, rgba(0,0,0,.08) 30%, rgba(0,0,0,.28) 40%, rgba(0,0,0,.58) 50%, rgba(0,0,0,.84) 60%, #000 70%);
  mask-image: linear-gradient(90deg, transparent 0%, transparent 20%, rgba(0,0,0,.08) 30%, rgba(0,0,0,.28) 40%, rgba(0,0,0,.58) 50%, rgba(0,0,0,.84) 60%, #000 70%);
}
.solutions-page .solutions-hero::after { background-image: linear-gradient(90deg, rgba(7,24,39,.98), rgba(7,24,39,.88) 31%, rgba(7,24,39,.48) 57%, rgba(7,24,39,.08) 82%), linear-gradient(0deg, rgba(7,24,39,.38), transparent 48%), url("solutions_hero.jpg"); }
.about-page .about-hero-grid,
.solutions-page .solutions-hero-grid { position: relative; z-index: 2; }
.about-page .about-hero :is(h1, p, .back-label, .year-card strong),
.solutions-page .solutions-hero :is(h1, p, .hero-kicker, .hero-desc) { color: #fff !important; }
.about-page .about-header,
.solutions-page .solutions-header { color: #fff !important; }
.home-page :is(.brand-copy strong, .brand-copy small),
.about-page :is(.about-brand strong, .about-brand small),
.solutions-page :is(.solutions-brand strong, .solutions-brand small) { color: #fff !important; }
.solutions-page .solutions-brand { transform: none; }

/* Start revealing the hero image slightly earlier. */
.home-page .hero.company-photo-hero::after,
.about-page .about-hero::after,
.solutions-page .solutions-hero::after {
  background-image: linear-gradient(90deg, rgba(7,24,39,.98), rgba(7,24,39,.9) 25%, rgba(7,24,39,.56) 46%, rgba(7,24,39,.08) 70%), linear-gradient(0deg, rgba(7,24,39,.38), transparent 48%), var(--company-hero-image);
}
.about-page .about-hero::after { background-image: linear-gradient(90deg, rgba(7,24,39,.98), rgba(7,24,39,.9) 25%, rgba(7,24,39,.56) 46%, rgba(7,24,39,.08) 70%), linear-gradient(0deg, rgba(7,24,39,.38), transparent 48%), url("hero-trirex-renovated.png"); }
.solutions-page .solutions-hero::after { background-image: linear-gradient(90deg, rgba(7,24,39,.98), rgba(7,24,39,.9) 25%, rgba(7,24,39,.56) 46%, rgba(7,24,39,.08) 70%), linear-gradient(0deg, rgba(7,24,39,.38), transparent 48%), url("solutions_hero.jpg"); }
.home-page .hero.company-photo-hero::after,
.about-page .about-hero::after,
.solutions-page .solutions-hero::after { background-image: linear-gradient(90deg, rgba(7,24,39,.98), rgba(7,24,39,.9) 20%, rgba(7,24,39,.56) 40%, rgba(7,24,39,.08) 64%), linear-gradient(0deg, rgba(7,24,39,.38), transparent 48%), var(--company-hero-image); }
.about-page .about-hero::after { background-image: linear-gradient(90deg, rgba(7,24,39,.98), rgba(7,24,39,.9) 20%, rgba(7,24,39,.56) 40%, rgba(7,24,39,.08) 64%), linear-gradient(0deg, rgba(7,24,39,.38), transparent 48%), url("hero-trirex-renovated.png"); }
.solutions-page .solutions-hero::after { background-image: linear-gradient(90deg, rgba(7,24,39,.98), rgba(7,24,39,.9) 20%, rgba(7,24,39,.56) 40%, rgba(7,24,39,.08) 64%), linear-gradient(0deg, rgba(7,24,39,.38), transparent 48%), url("solutions_hero.jpg"); }
.solutions-page .solutions-hero::after { display: none !important; }
.solutions-page .solutions-hero .hero-image-wrap > img { display: block !important; }
body.solutions-page.all-divisions-view .solutions-hero-visual .hero-image-wrap > img { opacity: 1 !important; }
body.solutions-page.all-divisions-view .hero-department-grid { display: none !important; }
body.solutions-page .solutions-hero .orbit-card { display: none !important; }

/* Keep every department hero on the same navy gradient treatment. */
body.solutions-page:not(.all-divisions-view) .solutions-hero .image-overlay {
  background: linear-gradient(90deg, rgba(7,24,39,.98) 0%, rgba(7,24,39,.9) 25%, rgba(7,24,39,.56) 48%, rgba(7,24,39,.08) 76%),
    linear-gradient(0deg, rgba(7,24,39,.38), transparent 48%) !important;
}
body.solutions-page:not(.all-divisions-view) .solutions-hero :is(h1, h2, p, .hero-kicker, .hero-desc, .division-header > p) {
  color: #fff !important;
}
body.solutions-page:not(.all-divisions-view) .solutions-hero .brand-pills .pill-label {
  color: #fff !important;
}
body.solutions-page:not(.all-divisions-view) .solutions-hero .brand-pills .pill {
  color: #123653 !important;
  background: rgba(255,255,255,.9);
}
body.solutions-page.all-divisions-view .solutions-hero .image-overlay {
  background: linear-gradient(90deg, rgba(7,24,39,.98) 0%, rgba(7,24,39,.9) 25%, rgba(7,24,39,.56) 48%, rgba(7,24,39,.08) 76%),
    linear-gradient(0deg, rgba(7,24,39,.38), transparent 48%) !important;
}
body.solutions-page.all-divisions-view .solutions-hero :is(h1, p, .hero-kicker, .hero-desc) {
  color: #fff !important;
}

/* Visible blue fade across the left side of every Solutions Hero. */
body.solutions-page.all-divisions-view .solutions-hero .image-overlay,
body.solutions-page:not(.all-divisions-view) .solutions-hero .image-overlay {
  display: block !important;
  background: linear-gradient(90deg, rgba(7,24,39,.99) 0%, rgba(7,24,39,.96) 28%, rgba(7,24,39,.78) 43%, rgba(7,24,39,.38) 62%, rgba(7,24,39,.08) 85%),
    linear-gradient(0deg, rgba(7,24,39,.38), transparent 48%) !important;
}
body.solutions-page:not(.all-divisions-view) .solutions-hero .hero-division-copy .division-header h2 {
  max-width: 620px;
  font-size: clamp(30px, 3.6vw, 52px) !important;
  line-height: 1.08;
  margin-bottom: 12px;
}
body.solutions-page:not(.all-divisions-view) .solutions-hero .hero-division-copy .division-header h2 span {
  display: block;
  margin-top: 8px;
  font-size: .54em;
  font-weight: 500;
  color: rgba(255,255,255,.68) !important;
}
body.solutions-page:not(.all-divisions-view) .solutions-hero .hero-division-copy .division-header > p {
  max-width: 620px;
  color: rgba(255,255,255,.72) !important;
  font-size: 14px;
  line-height: 1.65;
}
body.solutions-page:not(.all-divisions-view) .solutions-hero .hero-division-copy .brand-pills {
  display: none;
}