/*=================================================================
  LUMERX POWER — DESIGN-BRIEF SECTIONS
  Layouts built to match the supplied design mockups.
  Loaded after main.css so it can extend the base theme.
==================================================================*/
:root {
  --lx-navy: #0A1B3D;
  --lx-blue: #0B47B5;
  --lx-blue-deep: #0A337E;
  --lx-orange: #EE6400;
  --lx-green: #1E8E3E;
  --lx-body: #5A6474;
  --lx-line: #E6EAF2;
  --lx-soft: #E9F0FB;
}

/*----- shared heading bits -----*/
.lx-eyebrow {
  font-family: var(--ztc-family-font1);
  font-size: var(--ztc-font-size-font-s14);
  font-weight: var(--ztc-weight-bold);
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--lx-blue);
  display: block;
}

.lx-bar {
  height: 3px;
  width: 42px;
  background: var(--lx-blue);
  border-radius: 3px;
  display: block;
  margin: 14px 0 26px;
}

/*=================================================================
  1. WHAT WE DO — FIVE CARD ROW
==================================================================*/
.wwd2-section-area {
  position: relative;
  z-index: 1;
  background: #F4F6F9;
}

.wwd2-head {
  text-align: center;
  max-width: 720px;
  margin: 0 auto 52px;
}

.wwd2-head h2 {
  font-family: var(--ztc-family-font1);
  font-size: 44px;
  font-weight: var(--ztc-weight-black);
  color: var(--lx-navy);
  line-height: 1.18;
  letter-spacing: -0.6px;
  margin: 16px 0 18px;
}

.wwd2-head p {
  font-family: var(--ztc-family-font1);
  font-size: var(--ztc-font-size-font-s18);
  color: var(--lx-body);
  line-height: 1.65;
  max-width: 560px;
  margin: 0 auto;
}

.wwd2-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 20px;
  align-items: stretch;
}

.wwd2-card {
  position: relative;
  background: var(--ztc-text-text-1);
  border-radius: 14px;
  box-shadow: 0 6px 26px rgba(10, 27, 61, 0.07);
  display: flex;
  flex-direction: column;
  transition: all 0.4s;
}

.wwd2-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 18px 42px rgba(10, 27, 61, 0.14);
}

.wwd2-card-media {
  position: relative;
  height: 200px;
  border-radius: 14px 14px 0 0;
  overflow: hidden;
  flex-shrink: 0;
}

.wwd2-card-media img {
  height: 100%;
  width: 100%;
  max-height: none;
  object-fit: cover;
  transition: all 0.5s;
}

.wwd2-card:hover .wwd2-card-media img {
  transform: scale(1.07);
}

/* sits on the media/content seam — kept outside .wwd2-card-media
   so the media's overflow:hidden (needed for the hover zoom) can't clip it */
.wwd2-num {
  position: absolute;
  left: 18px;
  top: 179px;
  height: 42px;
  width: 42px;
  border-radius: 50%;
  background: var(--lx-blue);
  color: var(--ztc-text-text-1);
  font-family: var(--ztc-family-font1);
  font-size: var(--ztc-font-size-font-s14);
  font-weight: var(--ztc-weight-bold);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 5px 14px rgba(11, 71, 181, 0.4);
  border: 3px solid var(--ztc-text-text-1);
  z-index: 3;
}

.wwd2-card-body {
  padding: 26px 20px 26px;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.wwd2-card-icon {
  height: 36px;
  margin-bottom: 14px;
  display: flex;
  align-items: flex-end;
}

.wwd2-card-icon img {
  height: 32px;
  width: 32px;
  max-height: none;
  object-fit: contain;
}

.wwd2-card-body h3 {
  font-family: var(--ztc-family-font1);
  font-size: var(--ztc-font-size-font-s18);
  font-weight: var(--ztc-weight-bold);
  color: var(--lx-navy);
  line-height: 1.34;
  margin-bottom: 12px;
}

.wwd2-card-body p {
  font-family: var(--ztc-family-font1);
  font-size: var(--ztc-font-size-font-s14);
  color: var(--lx-body);
  line-height: 1.7;
  margin: 0;
}

.wwd2-stretch {
  position: absolute;
  inset: 0;
  z-index: 4;
  border-radius: 14px;
  font-size: 0;
  color: transparent;
}

.wwd2-cta {
  text-align: center;
  margin-top: 46px;
}

.wwd2-btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  background: var(--lx-blue);
  color: var(--ztc-text-text-1);
  font-family: var(--ztc-family-font1);
  font-size: var(--ztc-font-size-font-s14);
  font-weight: var(--ztc-weight-bold);
  letter-spacing: 1.3px;
  text-transform: uppercase;
  padding: 18px 38px;
  border-radius: 8px;
  transition: all 0.4s;
}

.wwd2-btn:hover {
  background: var(--lx-blue-deep);
  color: var(--ztc-text-text-1);
  transform: translateY(-3px);
  box-shadow: 0 12px 26px rgba(11, 71, 181, 0.32);
}

@media (max-width: 1199px) {
  .wwd2-grid {
    grid-template-columns: repeat(3, 1fr);
  }
  .wwd2-head h2 {
    font-size: 38px;
  }
}

@media (max-width: 767px) {
  .wwd2-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }
  .wwd2-head h2 {
    font-size: 30px;
  }
}

@media (max-width: 575px) {
  .wwd2-grid {
    grid-template-columns: 1fr;
  }
}

/*=================================================================
  2. MISSION / VISION / VALUES
==================================================================*/
.mvv2-section-area {
  position: relative;
  z-index: 1;
  background: #F7F9FC;
  overflow: hidden;
}

.mvv2-section-area::before {
  position: absolute;
  content: "";
  inset: 0;
  background-image: url(../img/bg/header-img4.jpg);
  background-size: cover;
  background-position: center;
  opacity: 0.08;
  z-index: -2;
}

.mvv2-section-area::after {
  position: absolute;
  content: "";
  inset: 0;
  background: linear-gradient(180deg, rgba(247, 249, 252, 0.72) 0%, rgba(247, 249, 252, 0.9) 60%, #F7F9FC 100%);
  z-index: -1;
}

.mvv2-head {
  text-align: center;
  margin-bottom: 54px;
}

.mvv2-pill {
  display: inline-block;
  background: var(--ztc-text-text-1);
  border: 1px solid rgba(238, 100, 0, 0.45);
  color: var(--lx-orange);
  font-family: var(--ztc-family-font1);
  font-size: var(--ztc-font-size-font-s14);
  font-weight: var(--ztc-weight-bold);
  letter-spacing: 1.4px;
  text-transform: uppercase;
  padding: 10px 26px;
  border-radius: 999px;
  box-shadow: 0 4px 14px rgba(10, 27, 61, 0.06);
}

.mvv2-head h2 {
  font-family: var(--ztc-family-font1);
  font-size: 52px;
  font-weight: var(--ztc-weight-black);
  color: var(--lx-navy);
  line-height: 1.15;
  letter-spacing: -0.8px;
  margin: 22px 0 18px;
}

.mvv2-head h2 .dot {
  color: var(--lx-orange);
  margin: 0 10px;
}

.mvv2-head p {
  font-family: var(--ztc-family-font1);
  font-size: var(--ztc-font-size-font-s18);
  color: var(--lx-body);
  line-height: 1.65;
  max-width: 600px;
  margin: 0 auto;
}

.mvv2-card {
  position: relative;
  border-radius: 18px;
  padding: 46px 34px 40px;
  height: 100%;
  overflow: hidden;
  transition: all 0.4s;
  box-shadow: 0 6px 28px rgba(10, 27, 61, 0.07);
}

.mvv2-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 18px 44px rgba(10, 27, 61, 0.13);
}

.mvv2-card.is-mission {
  background: linear-gradient(180deg, #FDEFE3 0%, #FEF8F3 52%, #FFFFFF 100%);
}

.mvv2-card.is-vision {
  background: linear-gradient(180deg, #E8F5EC 0%, #F5FBF7 52%, #FFFFFF 100%);
}

.mvv2-card.is-values {
  background: linear-gradient(180deg, #E8EFFB 0%, #F4F8FD 52%, #FFFFFF 100%);
}

.mvv2-icon {
  height: 92px;
  width: 92px;
  border-radius: 50%;
  background: var(--ztc-text-text-1);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 26px;
  box-shadow: 0 8px 22px rgba(10, 27, 61, 0.1);
}

.mvv2-icon i {
  font-size: 34px;
}

.mvv2-card.is-mission .mvv2-icon i {
  color: var(--lx-orange);
}

.mvv2-card.is-vision .mvv2-icon i {
  color: var(--lx-green);
}

.mvv2-card.is-values .mvv2-icon i {
  color: var(--lx-blue);
}

.mvv2-card h3 {
  font-family: var(--ztc-family-font1);
  font-size: var(--ztc-font-size-font-s28);
  font-weight: var(--ztc-weight-black);
  color: var(--lx-navy);
  text-transform: uppercase;
  text-align: center;
  letter-spacing: 0.4px;
}

.mvv2-card.is-mission h3 span {
  color: var(--lx-orange);
}

.mvv2-card.is-vision h3 span {
  color: var(--lx-green);
}

.mvv2-card.is-values h3 span {
  color: var(--lx-blue);
}

.mvv2-rule {
  height: 3px;
  width: 46px;
  border-radius: 3px;
  margin: 14px auto 26px;
  display: block;
}

.mvv2-card.is-mission .mvv2-rule {
  background: var(--lx-orange);
}

.mvv2-card.is-vision .mvv2-rule {
  background: var(--lx-green);
}

.mvv2-card.is-values .mvv2-rule {
  background: var(--lx-blue);
}

.mvv2-card p {
  font-family: var(--ztc-family-font1);
  font-size: var(--ztc-font-size-font-s16);
  color: var(--lx-body);
  line-height: 1.78;
  margin: 0;
}

.mvv2-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.mvv2-list li {
  display: flex;
  align-items: center;
  gap: 14px;
  font-family: var(--ztc-family-font1);
  font-size: var(--ztc-font-size-font-s16);
  font-weight: var(--ztc-weight-medium);
  color: var(--ztc-text-text-5);
  padding: 13px 0;
  border-bottom: 1px solid rgba(11, 71, 181, 0.12);
}

.mvv2-list li:last-child {
  border-bottom: 0;
}

.mvv2-list li i {
  height: 26px;
  width: 26px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--lx-blue);
  color: var(--ztc-text-text-1);
  font-size: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
}

@media (max-width: 991px) {
  .mvv2-head h2 {
    font-size: 36px;
  }
  .mvv2-card {
    margin-bottom: 26px;
  }
}

@media (max-width: 575px) {
  .mvv2-head h2 {
    font-size: 28px;
  }
  .mvv2-head h2 .dot {
    margin: 0 5px;
  }
}

/*=================================================================
  3. TRUSTED PARTNERSHIPS
==================================================================*/
.partners2-section-area {
  position: relative;
  z-index: 1;
  background: #F7F9FC;
}

.partners2-left h2 {
  font-family: var(--ztc-family-font1);
  font-size: 56px;
  font-weight: var(--ztc-weight-black);
  color: var(--lx-navy);
  line-height: 1.08;
  letter-spacing: -1px;
  margin-bottom: 22px;
}

.partners2-left h2 .accent {
  color: var(--lx-blue);
  display: block;
}

.partners2-left > p {
  font-family: var(--ztc-family-font1);
  font-size: var(--ztc-font-size-font-s16);
  color: var(--lx-body);
  line-height: 1.75;
  margin-bottom: 30px;
  max-width: 400px;
}

.partners2-tabs {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin: 0;
  padding: 0;
  border: 0;
}

.partners2-tabs .nav-item {
  width: 100%;
}

.partners2-tabs .nav-link {
  display: flex;
  align-items: center;
  gap: 18px;
  width: 100%;
  text-align: left;
  padding: 20px 24px;
  border-radius: 14px;
  background: var(--ztc-text-text-1);
  border: 1px solid var(--lx-line);
  box-shadow: 0 4px 18px rgba(10, 27, 61, 0.05);
  transition: all 0.4s;
}

.partners2-tabs .nav-link .p2-ticon {
  height: 48px;
  width: 48px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--lx-blue);
  color: var(--ztc-text-text-1);
  font-size: 19px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.4s;
}

.partners2-tabs .nav-link .p2-ttext {
  flex: 1;
}

.partners2-tabs .nav-link .p2-ttext strong {
  display: block;
  font-family: var(--ztc-family-font1);
  font-size: var(--ztc-font-size-font-s20);
  font-weight: var(--ztc-weight-bold);
  color: var(--lx-navy);
  line-height: 1.3;
  transition: all 0.4s;
}

.partners2-tabs .nav-link .p2-ttext span {
  font-family: var(--ztc-family-font1);
  font-size: var(--ztc-font-size-font-s14);
  color: var(--lx-body);
  transition: all 0.4s;
}

.partners2-tabs .nav-link .p2-tarrow {
  margin-left: auto;
  color: var(--lx-navy);
  font-size: 16px;
  transition: all 0.4s;
}

.partners2-tabs .nav-link:hover {
  transform: translateX(4px);
  box-shadow: 0 8px 24px rgba(10, 27, 61, 0.1);
}

.partners2-tabs .nav-link.active {
  background: linear-gradient(135deg, var(--lx-blue) 0%, var(--lx-blue-deep) 100%);
  border-color: transparent;
  box-shadow: 0 12px 30px rgba(11, 71, 181, 0.32);
}

.partners2-tabs .nav-link.active .p2-ticon {
  background: rgba(255, 255, 255, 0.2);
}

.partners2-tabs .nav-link.active .p2-ttext strong,
.partners2-tabs .nav-link.active .p2-tarrow {
  color: var(--ztc-text-text-1);
}

.partners2-tabs .nav-link.active .p2-ttext span {
  color: rgba(255, 255, 255, 0.78);
}

.partners2-panel {
  background: #FAFBFD;
  border: 1px solid #EDF1F7;
  border-radius: 20px;
  padding: 34px 34px 22px;
  height: 100%;
}

.partners2-panel-head {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-bottom: 10px;
}

.partners2-panel-head .p2-hicon {
  height: 56px;
  width: 56px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--lx-soft);
  color: var(--lx-blue);
  font-size: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.partners2-panel-head h3 {
  font-family: var(--ztc-family-font1);
  font-size: var(--ztc-font-size-font-s28);
  font-weight: var(--ztc-weight-bold);
  color: var(--lx-navy);
  margin-bottom: 10px;
}

.partners2-panel-head .lx-bar {
  margin: 0;
}

.partners2-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.partners2-list li {
  display: flex;
  align-items: flex-start;
  gap: 18px;
  padding: 20px 0;
  border-bottom: 1px solid var(--lx-line);
}

.partners2-list li:last-child {
  border-bottom: 0;
}

.partners2-list li .p2-licon {
  height: 46px;
  width: 46px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--lx-blue);
  color: var(--ztc-text-text-1);
  font-size: 17px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.partners2-list li h4 {
  font-family: var(--ztc-family-font1);
  font-size: var(--ztc-font-size-font-s18);
  font-weight: var(--ztc-weight-bold);
  color: var(--lx-navy);
  margin-bottom: 5px;
}

.partners2-list li p {
  font-family: var(--ztc-family-font1);
  font-size: var(--ztc-font-size-font-s14);
  color: var(--lx-body);
  line-height: 1.65;
  margin: 0;
}

.partners2-strip {
  display: flex;
  margin-top: 46px;
  border-top: 1px solid var(--lx-line);
  padding-top: 34px;
}

.partners2-strip-item {
  flex: 1;
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 0 22px;
  border-right: 1px solid var(--lx-line);
}

.partners2-strip-item:first-child {
  padding-left: 0;
}

.partners2-strip-item:last-child {
  border-right: 0;
  padding-right: 0;
}

.partners2-strip-item .p2-sicon {
  height: 46px;
  width: 46px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--lx-soft);
  color: var(--lx-blue);
  font-size: 17px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.partners2-strip-item h5 {
  font-family: var(--ztc-family-font1);
  font-size: var(--ztc-font-size-font-s16);
  font-weight: var(--ztc-weight-bold);
  color: var(--lx-navy);
  margin-bottom: 6px;
}

.partners2-strip-item p {
  font-family: var(--ztc-family-font1);
  font-size: var(--ztc-font-size-font-s14);
  color: var(--lx-body);
  line-height: 1.6;
  margin: 0;
}

@media (max-width: 1199px) {
  .partners2-left h2 {
    font-size: 44px;
  }
  .partners2-strip {
    flex-wrap: wrap;
    gap: 26px 0;
  }
  .partners2-strip-item {
    flex: 0 0 33.333%;
  }
  .partners2-strip-item:nth-child(3n) {
    border-right: 0;
  }
}

@media (max-width: 991px) {
  .partners2-panel {
    margin-top: 34px;
  }
  .partners2-strip-item {
    flex: 0 0 50%;
    padding: 0 16px 0 0;
  }
  .partners2-strip-item:nth-child(3n) {
    border-right: 1px solid var(--lx-line);
  }
  .partners2-strip-item:nth-child(2n) {
    border-right: 0;
  }
}

@media (max-width: 575px) {
  .partners2-left h2 {
    font-size: 34px;
  }
  .partners2-panel {
    padding: 26px 20px 16px;
  }
  .partners2-strip-item {
    flex: 0 0 100%;
    border-right: 0 !important;
    padding: 0;
  }
}

/*=================================================================
  4. TEAM TRACK RECORD
==================================================================*/
.trackrecord2-section-area {
  position: relative;
  z-index: 1;
  background: #F7F9FC;
}

.trackrecord2-left h2 {
  font-family: var(--ztc-family-font1);
  font-size: 56px;
  font-weight: var(--ztc-weight-black);
  color: var(--lx-navy);
  line-height: 1.08;
  letter-spacing: -1px;
  margin-bottom: 22px;
}

.trackrecord2-left h2 .accent {
  color: var(--lx-blue);
  display: block;
}

.trackrecord2-left > p {
  font-family: var(--ztc-family-font1);
  font-size: var(--ztc-font-size-font-s16);
  color: var(--lx-body);
  line-height: 1.75;
  max-width: 420px;
}

.trackrecord2-left h4 {
  font-family: var(--ztc-family-font1);
  font-size: var(--ztc-font-size-font-s20);
  font-weight: var(--ztc-weight-bold);
  color: var(--lx-navy);
  margin-bottom: 8px;
}

.trackrecord2-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.trackrecord2-list li {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px 0;
  border-bottom: 1px solid var(--lx-line);
}

.trackrecord2-list li:last-child {
  border-bottom: 0;
}

.trackrecord2-list li .tr-icon {
  height: 46px;
  width: 46px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--lx-soft);
  color: var(--lx-blue);
  font-size: 17px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.trackrecord2-list li .tr-text {
  font-family: var(--ztc-family-font1);
  font-size: var(--ztc-font-size-font-s16);
  color: var(--lx-body);
  line-height: 1.5;
}

.trackrecord2-list li .tr-text strong {
  display: block;
  font-weight: var(--ztc-weight-bold);
  color: var(--lx-navy);
}

.trackrecord2-collage {
  display: grid;
  grid-template-columns: 1.02fr 0.98fr;
  grid-template-rows: 254px 1fr;
  gap: 18px;
  min-height: 540px;
}

.trackrecord2-collage .tr-tall {
  grid-row: 1/span 2;
  border-radius: 16px;
  overflow: hidden;
}

.trackrecord2-collage .tr-top {
  border-radius: 16px;
  overflow: hidden;
}

.trackrecord2-collage .tr-tall img,
.trackrecord2-collage .tr-top img {
  height: 100%;
  width: 100%;
  max-height: none;
  object-fit: cover;
  transition: all 0.5s;
}

.trackrecord2-collage .tr-tall:hover img,
.trackrecord2-collage .tr-top:hover img {
  transform: scale(1.06);
}

.trackrecord2-collage .tr-card {
  background: linear-gradient(150deg, var(--lx-blue) 0%, var(--lx-blue-deep) 100%);
  border-radius: 16px;
  padding: 34px 30px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.trackrecord2-collage .tr-card .tr-card-icon {
  height: 58px;
  width: 58px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.85);
  color: var(--ztc-text-text-1);
  font-size: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
}

.trackrecord2-collage .tr-card h4 {
  font-family: var(--ztc-family-font1);
  font-size: var(--ztc-font-size-font-s28);
  font-weight: var(--ztc-weight-black);
  color: var(--ztc-text-text-1);
  line-height: 1.22;
}

.trackrecord2-collage .tr-card .tr-card-rule {
  height: 3px;
  width: 46px;
  background: rgba(255, 255, 255, 0.9);
  border-radius: 3px;
  display: block;
  margin: 16px 0 18px;
}

.trackrecord2-collage .tr-card p {
  font-family: var(--ztc-family-font1);
  font-size: var(--ztc-font-size-font-s16);
  color: rgba(255, 255, 255, 0.88);
  line-height: 1.7;
  margin: 0;
}

@media (max-width: 1199px) {
  .trackrecord2-left h2 {
    font-size: 44px;
  }
  .trackrecord2-collage {
    grid-template-rows: 210px 1fr;
    min-height: 470px;
  }
}

@media (max-width: 991px) {
  .trackrecord2-collage {
    margin-top: 40px;
  }
}

@media (max-width: 575px) {
  .trackrecord2-left h2 {
    font-size: 34px;
  }
  .trackrecord2-collage {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    min-height: 0;
  }
  .trackrecord2-collage .tr-tall {
    grid-row: auto;
    height: 260px;
  }
  .trackrecord2-collage .tr-top {
    height: 200px;
  }
}

/*=================================================================
  5. GLOBAL TYPOGRAPHY NORMALISATION
  main.css sets Figtree per-component but never on <body>, so any
  element without an explicit rule inherited Bootstrap's system
  font stack. These element-level selectors put everything back on
  the brand face. Font Awesome rules are class-based (higher
  specificity), so icon glyphs are unaffected.
==================================================================*/
body {
  font-family: var(--ztc-family-font1);
}

h1, h2, h3, h4, h5, h6,
p, a, span, strong, em, b, small, label,
ul, ol, li, dl, dt, dd,
blockquote, figcaption, caption, th, td,
button, input, select, optgroup, textarea {
  font-family: var(--ztc-family-font1);
}

/*=================================================================
  6. SECTION BACKGROUND RHYTHM
  The homepage alternates white / light. These utilities let every
  other page follow the same cadence.
==================================================================*/
.lx-bg-white {
  background: #FFFFFF !important;
}

.lx-bg-light {
  background: #F4F6F9 !important;
}

/*=================================================================
  7. LEADERSHIP GRID — every card the same height
  Laptops and larger (>=1200px) put all five leaders on one row.
  Below that a 6-column grid gives three per row with the final two
  centred. grid-auto-rows:1fr equalises every row either way, so the
  cards match regardless of bio length.
==================================================================*/
.leader-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 24px;
  align-items: stretch;
  grid-auto-rows: 1fr;
}

.leader-grid > * {
  grid-column: auto;
  min-width: 0;
}

/* tighter typography so five portraits stay readable in one row */
.leader-grid .leader-content {
  padding: 22px 18px 26px;
}

.leader-grid .leader-name {
  font-size: var(--ztc-font-size-font-s18);
}

.leader-grid .leader-title {
  font-size: var(--ztc-font-size-font-s14);
  margin-bottom: 12px;
}

.leader-grid .leader-bio {
  font-size: 13px;
  line-height: 1.65;
}

@media (max-width: 1199px) {
  .leader-grid {
    grid-template-columns: repeat(6, 1fr);
    gap: 30px;
  }
  .leader-grid > * {
    grid-column: span 2;
  }
  .leader-grid > *:nth-child(4) {
    grid-column: 2 / span 2;
  }
  .leader-grid > *:nth-child(5) {
    grid-column: 4 / span 2;
  }
  .leader-grid .leader-content {
    padding: 28px 28px 32px;
  }
  .leader-grid .leader-name {
    font-size: var(--ztc-font-size-font-s22);
  }
  .leader-grid .leader-title {
    font-size: var(--ztc-font-size-font-s16);
    margin-bottom: 16px;
  }
  .leader-grid .leader-bio {
    font-size: var(--ztc-font-size-font-s14);
    line-height: 1.7;
  }
}

.leader-grid .leader-card {
  margin-bottom: 0;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.leader-grid .leader-content {
  flex: 1;
}

/* definite edge between portrait and card body — without it the
   lighter studio backdrops bleed into the content area */
.leader-photo {
  border-bottom: 1px solid var(--ztc-border-border-2);
}

/* this portrait is framed wider and lit brighter than the rest;
   a slight scale matches its crop to the other four */
.leader-photo.is-tight img {
  transform: scale(1.12);
  transform-origin: center 30%;
}

@media (max-width: 991px) {
  .leader-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
  }
  .leader-grid > *:nth-child(4) {
    grid-column: span 2;
  }
  .leader-grid > *:nth-child(5) {
    grid-column: 2 / span 2;
  }
}

@media (max-width: 575px) {
  .leader-grid {
    grid-template-columns: 1fr;
  }
  .leader-grid > *,
  .leader-grid > *:nth-child(4),
  .leader-grid > *:nth-child(5) {
    grid-column: 1;
  }
}

/*=================================================================
  8. SOLUTION CARDS (service pages)
==================================================================*/
.solutions-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px;
  align-items: stretch;
}

.solutions-grid.is-four {
  grid-template-columns: repeat(4, 1fr);
}

.solution-card {
  position: relative;
  background: var(--ztc-text-text-1);
  border: 1px solid var(--lx-line);
  border-radius: 14px;
  padding: 34px 28px 30px;
  height: 100%;
  transition: all 0.4s;
  overflow: hidden;
}

.solution-card::after {
  position: absolute;
  content: "";
  left: 0;
  top: 0;
  height: 100%;
  width: 3px;
  background: var(--lx-blue);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 0.4s;
}

.solution-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 16px 38px rgba(10, 27, 61, 0.12);
  border-color: transparent;
}

.solution-card:hover::after {
  transform: scaleY(1);
}

.solution-card .solution-icon {
  height: 62px;
  width: 62px;
  border-radius: 16px;
  background: var(--lx-soft);
  color: var(--lx-blue);
  font-size: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 22px;
  transition: all 0.4s;
}

.solution-card:hover .solution-icon {
  background: var(--lx-blue);
  color: var(--ztc-text-text-1);
}

.solution-card h4 {
  font-family: var(--ztc-family-font1);
  font-size: var(--ztc-font-size-font-s20);
  font-weight: var(--ztc-weight-bold);
  color: var(--lx-navy);
  line-height: 1.32;
  margin-bottom: 12px;
}

.solution-card p {
  font-family: var(--ztc-family-font1);
  font-size: var(--ztc-font-size-font-s14);
  color: var(--lx-body);
  line-height: 1.72;
  margin: 0;
}

@media (max-width: 1199px) {
  .solutions-grid,
  .solutions-grid.is-four {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 575px) {
  .solutions-grid,
  .solutions-grid.is-four {
    grid-template-columns: 1fr;
  }
}

/*=================================================================
  9. HOW WE SUPPORT — PROCESS GRAPHIC
  Step labels are pulled from each page's existing sentence, so the
  graphic adds structure rather than new copy.
==================================================================*/
.process-section-area {
  position: relative;
  z-index: 1;
}

.process-head {
  text-align: center;
  max-width: 760px;
  margin: 0 auto 60px;
}

.process-head h2 {
  font-family: var(--ztc-family-font1);
  font-size: 40px;
  font-weight: var(--ztc-weight-black);
  color: var(--lx-navy);
  line-height: 1.2;
  letter-spacing: -0.5px;
  margin: 14px 0 18px;
}

.process-head p {
  font-family: var(--ztc-family-font1);
  font-size: var(--ztc-font-size-font-s18);
  color: var(--lx-body);
  line-height: 1.7;
  margin: 0;
}

.process-track {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  position: relative;
  gap: 0;
}

.process-step {
  position: relative;
  flex: 1;
  text-align: center;
  padding: 0 10px;
}

/* connector rail between consecutive steps */
.process-step::before {
  position: absolute;
  content: "";
  top: 33px;
  left: -50%;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, rgba(11, 71, 181, 0.15) 0%, rgba(11, 71, 181, 0.35) 100%);
  z-index: 0;
}

.process-step:first-child::before {
  display: none;
}

.process-step .process-dot {
  position: relative;
  z-index: 1;
  height: 68px;
  width: 68px;
  margin: 0 auto 20px;
  border-radius: 50%;
  background: var(--ztc-text-text-1);
  border: 2px solid rgba(11, 71, 181, 0.22);
  color: var(--lx-blue);
  font-size: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.4s;
}

.process-step .process-num {
  display: inline-block;
  font-family: var(--ztc-family-font1);
  font-size: var(--ztc-font-size-font-s12);
  font-weight: var(--ztc-weight-bold);
  letter-spacing: 1.2px;
  color: var(--lx-blue);
  margin-bottom: 8px;
}

.process-step h4 {
  font-family: var(--ztc-family-font1);
  font-size: var(--ztc-font-size-font-s18);
  font-weight: var(--ztc-weight-bold);
  color: var(--lx-navy);
  line-height: 1.35;
  margin: 0;
}

.process-step:hover .process-dot {
  background: var(--lx-blue);
  border-color: var(--lx-blue);
  color: var(--ztc-text-text-1);
  transform: translateY(-5px);
  box-shadow: 0 12px 26px rgba(11, 71, 181, 0.3);
}

@media (max-width: 991px) {
  .process-head h2 {
    font-size: 32px;
  }
  .process-track {
    flex-wrap: wrap;
    gap: 34px 0;
  }
  .process-step {
    flex: 0 0 50%;
  }
  .process-step::before {
    display: none;
  }
}

@media (max-width: 575px) {
  .process-step {
    flex: 0 0 100%;
  }
}

/*=================================================================
  10. DETAILED SERVICE CARDS (services.php)
  Same visual language as the homepage cards, but three per row and
  carrying the extra bullet list + "Learn More" link. grid-auto-rows
  keeps every card identical in height across both rows, and the
  link is pinned to the bottom so it sits on a shared baseline no
  matter how many bullets a service lists.
==================================================================*/
.wwd2-grid.is-detailed {
  grid-template-columns: repeat(3, 1fr);
  gap: 26px;
  grid-auto-rows: 1fr;
}

.wwd2-grid.is-detailed .wwd2-card-body {
  padding: 28px 26px 28px;
}

.wwd2-card-body h3 a {
  color: var(--lx-navy);
  transition: all 0.4s;
}

.wwd2-card-body h3 a:hover {
  color: var(--lx-blue);
}

.wwd2-list {
  list-style: none;
  margin: 18px 0 0;
  padding: 0;
}

.wwd2-list li {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  font-family: var(--ztc-family-font1);
  font-size: var(--ztc-font-size-font-s14);
  color: var(--lx-body);
  line-height: 1.6;
  margin-top: 9px;
}

.wwd2-list li:first-child {
  margin-top: 0;
}

.wwd2-list li img {
  width: 16px;
  height: 16px;
  max-height: none;
  margin-top: 3px;
  flex-shrink: 0;
}

/* margin-top:auto pushes this to the bottom of the flex body */
.wwd2-more {
  margin-top: auto;
  padding-top: 22px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--ztc-family-font1);
  font-size: var(--ztc-font-size-font-s14);
  font-weight: var(--ztc-weight-bold);
  color: var(--lx-blue);
  transition: all 0.4s;
}

.wwd2-more i {
  transition: transform 0.3s;
}

.wwd2-more:hover {
  color: var(--lx-blue-deep);
}

.wwd2-more:hover i {
  transform: translateX(4px);
}

@media (max-width: 1199px) {
  .wwd2-grid.is-detailed {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 767px) {
  .wwd2-grid.is-detailed {
    grid-template-columns: 1fr;
    grid-auto-rows: auto;
  }
}

/*=================================================================
  11. CONTACT FORM — honeypot + submit status banners
==================================================================*/
.hp-field {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.form-alert {
  font-family: var(--ztc-family-font1);
  font-size: var(--ztc-font-size-font-s14);
  line-height: 1.6;
  border-radius: 8px;
  padding: 14px 18px;
  margin-bottom: 20px;
}

.form-alert-success {
  background: #E9F7EE;
  border: 1px solid rgba(30, 142, 62, 0.35);
  color: var(--lx-green);
}

.form-alert-error {
  background: #FDECEC;
  border: 1px solid rgba(201, 15, 22, 0.35);
  color: #C90F16;
}

/*----- live per-field validation states -----*/
.input-area {
  position: relative;
}

.input-area .field-error {
  display: block;
  font-family: var(--ztc-family-font1);
  font-size: var(--ztc-font-size-font-s12);
  line-height: 1.5;
  color: #C90F16;
  min-height: 18px;
  margin-top: 6px;
}

.input-area .field-error:empty {
  min-height: 0;
  margin-top: 0;
}

.input-area.has-error input,
.input-area.has-error textarea {
  border-color: #C90F16 !important;
  box-shadow: 0 0 0 3px rgba(201, 15, 22, 0.1);
}

.input-area.is-valid input,
.input-area.is-valid textarea {
  border-color: rgba(30, 142, 62, 0.65) !important;
}

.input-area .field-meta {
  display: block;
  text-align: right;
  font-family: var(--ztc-family-font1);
  font-size: var(--ztc-font-size-font-s12);
  color: var(--lx-body);
  opacity: 0.75;
  margin-top: 6px;
}

.input-area.near-limit .field-meta {
  color: #C90F16;
  opacity: 1;
}

.input-area label {
  cursor: pointer;
  margin-bottom: 0;
}

/*=================================================================
  12. WHY CLIENTS TRUST US — dividers between pillars
==================================================================*/
.trust-strip-section-area .row > [class*="col-"]:not(:last-child) .trust-pillar {
  border-right: 1px solid var(--lx-line);
}

@media (max-width: 991px) {
  /* two per row here, so only the left-hand one keeps a divider */
  .trust-strip-section-area .row > [class*="col-"]:nth-child(2n) .trust-pillar {
    border-right: 0;
  }
}

@media (max-width: 767px) {
  .trust-strip-section-area .row > [class*="col-"] .trust-pillar {
    border-right: 0 !important;
    border-bottom: 1px solid var(--lx-line);
    padding-bottom: 24px;
  }
  .trust-strip-section-area .row > [class*="col-"]:last-child .trust-pillar {
    border-bottom: 0;
  }
}

/*=================================================================
  13. MOBILE NAV — collapsible Services submenu
  The theme's menumarker script adds .has-sub to a <li> containing a
  <ul> and prepends span.submenu-button, which is a full-width
  overlay — so tapping anywhere on the "Services" row toggles it.
  Here we keep the submenu closed until then and swap the theme's
  plus/minus bars for a rotating chevron.
==================================================================*/
.mobile-nav .mobile-nav-list .mobile-submenu {
  display: none;
  margin: 6px 0 10px;
  padding: 4px 0 4px 16px;
  border-left: 2px solid rgba(255, 255, 255, 0.22);
}

.mobile-nav .mobile-nav-list .mobile-submenu li a {
  font-size: var(--ztc-font-size-font-s16) !important;
  font-weight: var(--ztc-weight-regular) !important;
  color: rgba(255, 255, 255, 0.72) !important;
  padding: 7px 0 !important;
  line-height: 1.45;
}

.mobile-nav .mobile-nav-list .mobile-submenu li a:hover {
  color: var(--ztc-text-text-1) !important;
}

/* the parent row reads as a control, not a plain link */
.mobile-nav .mobile-nav-list > li.mobile-services-item > a {
  position: relative;
  padding-right: 34px !important;
  transition: color 0.3s;
}

/* drop the theme's vertical bar; reshape the horizontal one into a chevron */
.mobile-nav .mobile-nav-list > li.mobile-services-item > span.submenu-button::after {
  display: none;
}

.mobile-nav .mobile-nav-list > li.mobile-services-item > span.submenu-button::before {
  content: "";
  height: 9px;
  width: 9px;
  background: transparent;
  border-right: 2px solid rgba(255, 255, 255, 0.85);
  border-bottom: 2px solid rgba(255, 255, 255, 0.85);
  border-radius: 1px;
  right: 6px;
  top: 14px;
  transform: rotate(45deg);
  transition: transform 0.3s ease, border-color 0.3s;
}

/* open state: chevron flips up and the label picks up the brand blue */
.mobile-nav .mobile-nav-list > li.mobile-services-item > span.submenu-button.submenu-opened::before {
  transform: rotate(-135deg);
  top: 19px;
  border-color: #6f9ffb;
}

.mobile-nav .mobile-nav-list > li.mobile-services-item > span.submenu-button.submenu-opened + a {
  color: #6f9ffb !important;
}

/*----- mobile nav: address text was inheriting the default dark colour -----*/
.mobile-sidebar .mobile-nav .allmobilesection .footer1-contact-info .contact-info-single .contact-info-text p {
  font-family: var(--ztc-family-font1);
  font-size: var(--ztc-font-size-font-s16);
  font-weight: var(--ztc-weight-medium);
  color: var(--ztc-text-text-1);
  line-height: 1.6;
  margin-bottom: 0;
}

/*=================================================================
  14. LEADERSHIP BIO — clamp with a read more toggle
  The clamp is applied by script only when the text actually
  overflows, so short bios never get a pointless button. Without JS
  the bio simply shows in full.
==================================================================*/
.leader-bio.is-clamped {
  display: -webkit-box;
  -webkit-line-clamp: 5;
  -webkit-box-orient: vertical;
  line-clamp: 5;
  overflow: hidden;
}

.leader-readmore {
  align-self: flex-start;
  margin-top: 10px;
  padding: 0;
  background: none;
  border: 0;
  font-family: var(--ztc-family-font1);
  font-size: var(--ztc-font-size-font-s14);
  font-weight: var(--ztc-weight-bold);
  color: var(--lx-blue);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: color 0.3s;
}

.leader-readmore:hover {
  color: var(--lx-blue-deep);
}

.leader-readmore::after {
  content: "";
  height: 7px;
  width: 7px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translate(-1px, -1px);
  transition: transform 0.3s;
}

.leader-readmore[aria-expanded="true"]::after {
  transform: rotate(-135deg) translate(-2px, -2px);
}

.leader-grid .leader-content {
  display: flex;
  flex-direction: column;
}

/* While every bio is collapsed the cards share a row height (grid-auto-rows:1fr).
   Once one is expanded that would stretch its whole row, making the untouched
   cards look like they expanded too — so hand sizing back to each card. */
.leader-grid.has-expanded {
  grid-auto-rows: auto;
  align-items: start;
}

/* --leader-min-h is written by lumerx-ui.js from the collapsed row height,
   so untouched cards hold their size instead of shrinking. */
.leader-grid.has-expanded .leader-card {
  height: auto;
  min-height: var(--leader-min-h, 0px);
}

/*=================================================================
  15. HEADER DROPDOWN POSITION
  The theme opened the dropdown at a fixed top:50px while the nav
  <li> is only ~27px tall, leaving a ~23px dead gap under the link:
  it read as detached, and the mouse crossed unhoverable space on
  the way down, so the menu closed before you reached it.

  Anchoring to 100% of the item keeps it tucked under the link at
  any font size, and the ::before bridges the remaining gap so the
  pointer never leaves the hover area.
==================================================================*/
.homepage1-body .header-area.homepage1 .header-elements .main-menu ul li ul.dropdown-padding {
  top: calc(100% + 10px);
}

/* Opens flush with the bottom of the nav item — no gap at all for the
   pointer to fall through. The menu's own 15px padding still keeps the
   first item clear of the link text. */
.homepage1-body .header-area.homepage1 .header-elements .main-menu ul li:hover ul.dropdown-padding {
  top: 100%;
}

/* Hover bridge on the LI, not the UL.
   A bridge inside the dropdown cannot work: the dropdown is
   visibility:hidden until :hover, and a hidden element can't receive
   the pointer — so the hover died the instant it left the 27px link
   box. This pseudo-element belongs to the <li>, which is always
   rendered, so the hover area extends past the link and the chain to
   the menu is never broken. */
.header-area .header-elements .main-menu ul li.has-dropdown::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  height: 14px;
  z-index: 8;
}

/*=================================================================
  16. reCAPTCHA WIDGET
  The widget is a fixed-width 304px iframe; scale it down on narrow
  screens so it never pushes the form into horizontal overflow.
==================================================================*/
.recaptcha-area {
  margin-bottom: 6px;
}

.recaptcha-area .g-recaptcha {
  display: inline-block;
}

@media (max-width: 400px) {
  .recaptcha-area .g-recaptcha {
    transform: scale(0.86);
    transform-origin: 0 0;
  }
}