/* ------------------------------------------------------------------
   Vectis shared component styles.

   These sections exist in the page markup but had no CSS anywhere on
   the site, so they rendered unstyled (SVG icons ballooning to full
   container width, cards collapsing to stacked full-bleed images).
   Defined once here and loaded on every page so they cannot go missing
   from an individual page again.

   Palette: green #1c3f2e / deep #0e2c1f / gold #f4b400
            cream #F8F5F1 / ink #1c2230 / muted #6a7280 / line #eef0ed
   ------------------------------------------------------------------ */

/* Guard: never let a raw inline SVG size itself to the container. */
.vectis-lp svg { max-width: 100%; }

/* ------------------------------------------------------------------
   FULL-BLEED FIX
   The mu-plugin gives Elementor's widget/column chrome `display:contents`
   so our sections can run edge to edge. A side effect is that .vectis-lp
   becomes a direct flex item of .elementor-column (which is display:flex),
   so it shrink-wraps to its widest child (1320px, the .vh-wrap cap) and
   sits left-aligned with a dead gutter on the right. Force it to take the
   full column width; .vh-wrap still centres the content inside it.
   ------------------------------------------------------------------ */
.vectis-lp {
  width: 100%;
  flex: 1 1 100%;
  align-self: stretch;
}

/* ------------------------------------------------------------------
   LINK COLOUR SPECIFICITY FIX
   `.vectis-lp a{color:inherit}` (0,1,1) outranks every single-class
   button rule (0,1,0), so buttons inherited their parent's colour —
   giving dark-ink text on dark-green buttons and white text on gold.
   These selectors are (0,2,1) so the intended colour wins.
   ------------------------------------------------------------------ */
.vectis-lp a.vh-head-cta,
.vectis-lp a.vh-head-cta:hover { color: #fff; }
.vectis-lp a.vh-btn-gold       { color: #1c2230; }
.vectis-lp a.vh-btn-outline    { color: #fff; }
.vectis-lp a.vh-btn-outline:hover { color: #1c3f2e; }
.vectis-lp a.vh-btn-dk         { color: #fff; }
.vectis-lp a.vh-btn-wh         { color: #1c3f2e; }
.vectis-lp a.vh-calc-cta,
.vectis-lp a.vh-calc-cta:hover { color: #fff; }
.vectis-lp a.vh-learn          { color: #1c3f2e; }
.vectis-lp a.vs-cta-btn        { color: #1c2230; }

/* ------------------------------------------------------------------
   SINGLE-COLUMN HERO
   `.vh-hero-grid.single` caps the block at 680px, but .vh-wrap also
   carries `margin:0 auto` — so the copy got centred in the viewport and
   ran straight over the hero photo. This variant keeps the wrap full
   width and left-aligned, capping only the text column.
   ------------------------------------------------------------------ */
.vectis-lp .vh-hero-grid.vh-hero-solo {
  grid-template-columns: 1fr;
  /* vertical only — .vh-wrap supplies the 32px gutter, and shorthand
     padding here would zero it and slam the copy against the edge */
  padding-top: 96px;
  padding-bottom: 96px;
}
.vectis-lp .vh-hero-grid.vh-hero-solo > div { max-width: 620px; }
@media (max-width: 900px) {
  .vectis-lp .vh-hero-grid.vh-hero-solo { padding-top: 56px; padding-bottom: 56px; }
  .vectis-lp .vh-hero-grid.vh-hero-solo > div { max-width: none; }
}

/* ================================ STATS BAND ====================== */
.vectis-lp .vh-stats {
  background: #1c3f2e;
  padding: 34px 0;
}
.vectis-lp .vh-stats .vh-wrap {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 26px;
}
.vectis-lp .vh-stat {
  display: flex;
  align-items: center;
  gap: 14px;
}
.vectis-lp .vh-stat-icon {
  width: 46px;
  height: 46px;
  flex: 0 0 46px;
  border-radius: 50%;
  background: rgba(244, 180, 0, .15);
  color: #f4b400;
  display: flex;
  align-items: center;
  justify-content: center;
}
.vectis-lp .vh-stat-icon svg { width: 22px; height: 22px; display: block; }
.vectis-lp .vh-stat-num {
  font-size: 27px;
  font-weight: 800;
  color: #fff;
  line-height: 1;
}
.vectis-lp .vh-stat-lbl {
  font-size: 12px;
  color: #cfdbd2;
  margin-top: 5px;
  line-height: 1.3;
}
@media (max-width: 900px) {
  .vectis-lp .vh-stats .vh-wrap { grid-template-columns: repeat(2, 1fr); gap: 22px; }
}
@media (max-width: 520px) {
  .vectis-lp .vh-stats .vh-wrap { grid-template-columns: 1fr; }
}

/* ====================== INDUSTRIES / ACADEMY ICON ROWS ============ */
.vectis-lp .vh-ind { background: #fff; padding: 62px 0; }
.vectis-lp .vh-acad { background: #F8F5F1; padding: 52px 0; }

.vectis-lp .vh-ind-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 16px;
  margin-top: 34px;
}
.vectis-lp .vh-acad-icons {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
.vectis-lp .vh-ib-small {
  background: #fff;
  border: 1px solid #eef0ed;
  border-radius: 12px;
  padding: 24px 14px;
  text-align: center;
  transition: transform .2s, box-shadow .2s;
}
.vectis-lp .vh-ib-small:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 30px rgba(28, 63, 46, .09);
}
.vectis-lp .vh-ib-icon {
  width: 48px;
  height: 48px;
  margin: 0 auto 12px;
  border-radius: 50%;
  background: #E8F0E5;
  color: #1c3f2e;
  display: flex;
  align-items: center;
  justify-content: center;
}
.vectis-lp .vh-ib-icon svg { width: 22px; height: 22px; display: block; }
.vectis-lp .vh-ib-small .nm {
  font-size: 13px;
  font-weight: 600;
  color: #1c2230;
  line-height: 1.35;
}
@media (max-width: 1100px) { .vectis-lp .vh-ind-grid { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 760px)  { .vectis-lp .vh-ind-grid,
                             .vectis-lp .vh-acad-icons { grid-template-columns: repeat(2, 1fr); } }

/* ============================ TESTIMONIALS ======================== */
.vectis-lp .vh-test { background: #F8F5F1; padding: 70px 0; }
.vectis-lp .vh-test-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}
.vectis-lp .vh-test-card {
  background: #fff;
  border-radius: 14px;
  padding: 30px 26px;
  display: flex;
  flex-direction: column;
  box-shadow: 0 6px 22px rgba(28, 63, 46, .06);
}
.vectis-lp .vh-test-q {
  color: #f4b400;
  font-size: 34px;
  line-height: 1;
  margin-bottom: 12px;
}
.vectis-lp .vh-test-card p {
  font-size: 14px;
  color: #4b5563;
  line-height: 1.72;
  margin: 0 0 22px;
}
.vectis-lp .vh-test-who {
  display: flex;
  align-items: center;
  gap: 13px;
  margin-top: auto;
  padding-top: 18px;
  border-top: 1px solid #eef0ed;
}
.vectis-lp .vh-test-who img {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}
.vectis-lp .vh-test-who .nm {
  font-size: 14px;
  font-weight: 700;
  color: #1c2230;
  line-height: 1.25;
}
.vectis-lp .vh-test-who .ti {
  font-size: 12px;
  color: #6a7280;
  margin-top: 3px;
  line-height: 1.3;
}
@media (max-width: 900px) { .vectis-lp .vh-test-grid { grid-template-columns: 1fr; } }

/* ========================= SERVICES CARD GRID ===================== */
.vectis-lp .vs-core { background: #F8F5F1; padding: 74px 0; }
.vectis-lp .vs-tag-c {
  text-align: center;
  color: #1c3f2e;
  font-size: 11px;
  letter-spacing: 2.5px;
  font-weight: 700;
  text-transform: uppercase;
  margin-bottom: 10px;
}
.vectis-lp .vs-h2 {
  text-align: center;
  font-size: 36px;
  font-weight: 700;
  color: #1c2230;
  margin: 0 0 48px;
}
.vectis-lp .vs-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.vectis-lp .vs-card {
  position: relative;
  background: #fff;
  border-radius: 14px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 6px 22px rgba(28, 63, 46, .06);
  transition: transform .2s, box-shadow .2s;
}
.vectis-lp .vs-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 44px rgba(28, 63, 46, .13);
}
.vectis-lp .vs-card-img {
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: #e8ece9;
}
.vectis-lp .vs-card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* Sits on the bottom edge of the photo. Kept in normal flow with negative
   margins so it tracks the image height at any card width, rather than
   being absolutely positioned against a guessed percentage. */
.vectis-lp .vs-card-icon {
  position: relative;
  z-index: 2;
  margin: -27px 22px -6px auto;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: #f4b400;
  color: #1c2230;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .18);
  z-index: 2;
}
.vectis-lp .vs-card-icon svg { width: 26px; height: 26px; display: block; }
.vectis-lp .vs-card-body { padding: 26px 24px 28px; display: flex; flex-direction: column; flex: 1; }
.vectis-lp .vs-card-body h3 {
  margin: 0 0 10px;
  font-size: 19px;
  font-weight: 700;
  color: #1c2230;
  line-height: 1.3;
}
.vectis-lp .vs-card-body .desc {
  font-size: 13.5px;
  color: #6a7280;
  line-height: 1.68;
  margin: 0 0 18px;
}
.vectis-lp .vs-card-body ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.vectis-lp .vs-card-body ul li {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  font-size: 13px;
  color: #4b5563;
  line-height: 1.5;
}
.vectis-lp .vs-card-body ul li svg {
  width: 15px;
  height: 15px;
  color: #1c3f2e;
  flex-shrink: 0;
  margin-top: 2px;
}
.vectis-lp a.vs-assess-cta {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 18px;
  background: #1c3f2e;
  color: #fff;
  border-radius: 7px;
  padding: 10px 16px;
  font-size: 12.5px;
  font-weight: 600;
  align-self: flex-start;
}
.vectis-lp a.vs-assess-cta:hover { background: #14301f; color: #fff; }
.vectis-lp a.vs-assess-cta svg { width: 13px; height: 13px; }
@media (max-width: 1080px) { .vectis-lp .vs-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 700px)  { .vectis-lp .vs-grid { grid-template-columns: 1fr; } }

/* ==================== WHO WE SERVE / INFO BOXES =================== */
.vectis-lp .vp-serve { background: #fff; padding: 62px 0; }
.vectis-lp .vp-serve-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}
.vectis-lp .vh-ib {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  background: #F8F5F1;
  border-radius: 12px;
  padding: 26px 22px;
}
.vectis-lp .vh-ib .vh-ib-icon { margin: 0; flex-shrink: 0; }
.vectis-lp .vh-ib-body h4 {
  margin: 0 0 7px;
  font-size: 16px;
  font-weight: 700;
  color: #1c2230;
}
.vectis-lp .vh-ib-body p {
  font-size: 13px;
  color: #6a7280;
  line-height: 1.65;
  margin: 0;
}
@media (max-width: 900px) { .vectis-lp .vp-serve-grid { grid-template-columns: 1fr; } }

/* ======================= CHECKLIST STRIP (About) ================== */
.vectis-lp .va-why { background: #1c3f2e; padding: 26px 0; }
.vectis-lp .vh-icon-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 16px 26px;
}
.vectis-lp .vh-icon-list li {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: #fff;
  font-size: 13.5px;
  font-weight: 600;
}
.vectis-lp .vh-icon-list li svg {
  width: 17px;
  height: 17px;
  color: #f4b400;
  flex-shrink: 0;
}
@media (max-width: 760px) { .vectis-lp .vh-icon-list { justify-content: flex-start; } }

/* ================================ FOOTER ========================== */
.vh-foot {
  background: #1c3f2e;
  color: #cfdbd2;
  padding: 55px 0 0;
  font-family: 'Inter', 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
}
.vh-foot * { box-sizing: border-box; }
.vh-foot .vh-wrap { max-width: 1320px; margin: 0 auto; padding: 0 32px; }
.vh-foot-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr 1.4fr; gap: 36px; }
.vh-foot h4 {
  color: #fff;
  font-size: 12px;
  letter-spacing: 1.8px;
  margin: 0 0 18px;
  font-weight: 700;
  text-transform: uppercase;
}
.vh-foot a { color: #cfdbd2; font-size: 13.5px; display: block; margin-bottom: 10px; text-decoration: none; }
.vh-foot a:hover { color: #f4b400; }
.vh-foot .brand img { max-height: 64px; margin-bottom: 14px; }
.vh-foot .brand p { margin: 0 0 18px; font-size: 12px; color: #a3b8ae; line-height: 1.65; max-width: 260px; }
.vh-foot .social { display: flex; gap: 10px; }
.vh-foot .social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background: rgba(255, 255, 255, .08);
  border-radius: 50%;
  margin: 0;
}
.vh-foot .social svg { width: 14px; height: 14px; color: #cfdbd2; }
.vh-foot .ci { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 14px; font-size: 13px; color: #cfdbd2; }
.vh-foot .ci svg { width: 14px; height: 14px; color: #f4b400; margin-top: 3px; flex-shrink: 0; }
.vh-foot-bot {
  border-top: 1px solid rgba(255, 255, 255, .12);
  margin-top: 40px;
  padding: 20px 0;
  display: flex;
  justify-content: space-between;
  font-size: 11.5px;
  color: #a3b8ae;
  flex-wrap: wrap;
  gap: 10px;
}
.vh-foot-bot .right a { display: inline; margin-left: 18px; }
@media (max-width: 1100px) { .vh-foot-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px)  { .vh-foot-grid { grid-template-columns: 1fr; } }

/* ============================ NAV SPACING ========================= */
.vh-header .vh-nav { gap: 22px; }
.vh-header .vh-nav a { font-size: 13.5px; }
@media (max-width: 1100px) {
  .vh-header .vh-nav { gap: 16px; }
  .vh-header .vh-nav a { font-size: 13px; }
}
@media (max-width: 1040px) {
  .vh-header .vh-nav { display: none; }
  .vh-header .vh-head-cta { display: inline-flex; }
  .vh-header .vh-burger { display: block; }
  .vh-header .vh-head-inner.open .vh-nav {
    display: flex;
    position: absolute;
    top: 100%;
    left: -32px;
    right: -32px;
    background: #fff;
    flex-direction: column;
    padding: 18px 32px 22px;
    border-bottom: 1px solid #eef0ed;
    align-items: flex-start;
    gap: 14px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, .06);
  }
}