.elementor-47 .elementor-element.elementor-element-205d393{--display:flex;}.elementor-widget-text-editor{font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );color:var( --e-global-color-text );}.elementor-widget-text-editor.elementor-drop-cap-view-stacked .elementor-drop-cap{background-color:var( --e-global-color-primary );}.elementor-widget-text-editor.elementor-drop-cap-view-framed .elementor-drop-cap, .elementor-widget-text-editor.elementor-drop-cap-view-default .elementor-drop-cap{color:var( --e-global-color-primary );border-color:var( --e-global-color-primary );}.elementor-47 .elementor-element.elementor-element-5729245{--display:flex;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-47 .elementor-element.elementor-element-ee5b252{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;padding:0px 0px 0px 0px;}.elementor-47 .elementor-element.elementor-element-ca1e12b{--display:flex;}.elementor-47 .elementor-element.elementor-element-de05af7{--display:flex;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-47 .elementor-element.elementor-element-892acf8{--display:flex;}.elementor-47 .elementor-element.elementor-element-897c243{--display:flex;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-47 .elementor-element.elementor-element-83d9f46{--display:flex;}.elementor-47 .elementor-element.elementor-element-bcfc50a{--display:flex;}.elementor-47 .elementor-element.elementor-element-430fe4c{--display:flex;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-47 .elementor-element.elementor-element-4838922{--display:flex;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-47 .elementor-element.elementor-element-a3f3ea1{--display:flex;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}:root{--page-title-display:none;}@media(min-width:768px){.elementor-47 .elementor-element.elementor-element-5729245{--content-width:1600px;}.elementor-47 .elementor-element.elementor-element-de05af7{--content-width:1600px;}.elementor-47 .elementor-element.elementor-element-897c243{--content-width:1600px;}.elementor-47 .elementor-element.elementor-element-430fe4c{--content-width:1600px;}.elementor-47 .elementor-element.elementor-element-4838922{--content-width:1600px;}.elementor-47 .elementor-element.elementor-element-a3f3ea1{--content-width:1600px;}}/* Start custom CSS for html, class: .elementor-element-ee5b252 *//* ============================================================
   CONTAINER 2 CSS: ABOUT HERO
   ============================================================ */

.about-hero-container {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, var(--color-navy, #081F3F) 0%, var(--color-primary, #0D3B73) 100%);
  padding: var(--space-3xl, 96px) var(--space-md, 24px) var(--space-2xl, 64px) var(--space-md, 24px);
}

.about-hero-art {
  position: absolute;
  top: 50%; right: -60px;
  transform: translateY(-50%);
  width: 420px; height: 420px;
  pointer-events: none;
}

.about-hero-inner {
  position: relative; /* sits above the decorative art */
  max-width: 760px;
  margin: 0 auto;
}

.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs, 8px);
  padding: 8px 16px;
  border-radius: 999px;
  background: rgba(255,255,255,0.08);
  color: var(--color-gold, #D6A641);
  font-size: 14px;
  font-weight: 600;
  margin-bottom: var(--space-md, 24px);
}

.about-hero-heading {
  font-family: var(--font-main, 'Inter', sans-serif);
  font-size: 48px;
  font-weight: 700;
  line-height: 1.2;
  color: var(--color-white, #fff);
  margin: 0 0 var(--space-md, 24px) 0;
  overflow-wrap: break-word;
}
.highlight-word { color: var(--color-gold, #D6A641); }

.about-hero-paragraph {
  font-size: 18px;
  line-height: 1.6;
  color: rgba(255,255,255,0.8);
  margin: 0;
  max-width: 640px;
}

/* ---------- TABLET: 1023px and narrower ---------- */
@media (max-width: 1023px) {
  .about-hero-container { padding-top: var(--space-2xl, 64px); }
  .about-hero-heading { font-size: 38px; }
}

/* ---------- MOBILE: 767px and narrower ---------- */
@media (max-width: 767px) {
  .about-hero-container { padding: var(--space-2xl, 64px) var(--space-sm, 16px); }
  .about-hero-heading { font-size: 30px; }
  .about-hero-paragraph { font-size: 16px; }
  /* The decorative rings don't have enough width left to read as
     anything but clutter on a narrow phone — hide them entirely. */
  .about-hero-art { display: none; }
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-65bc0ba *//* ============================================================
   CONTAINER 3 CSS: OUR STORY
   ============================================================ */

.story-container {
  max-width: var(--content-width, 1200px);
  margin: 0 auto;
  padding: var(--space-3xl, 96px) var(--space-md, 24px);
}

/* Section header text pieces — reused across most containers below */
.eyebrow {
  display: inline-block;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-steel, #3E6B9C);
  margin-bottom: var(--space-sm, 16px);
}
.section-heading {
  font-family: var(--font-main, 'Inter', sans-serif);
  font-size: 40px;
  font-weight: 700;
  color: var(--color-navy, #081F3F);
  margin: 0 0 var(--space-sm, 16px) 0;
}
.section-paragraph {
  font-size: 18px;
  color: var(--color-gray, #5F6B7A);
  line-height: 1.7;
  margin: 0 0 var(--space-md, 24px) 0;
}
.section-paragraph:last-child { margin-bottom: 0; }

.story-layout {
  display: grid;
  grid-template-columns: 1.4fr 1fr; /* text column (7) : card column (5) */
  gap: var(--space-2xl, 64px);
  align-items: start;
}

.story-stat-card {
  background: var(--color-white, #fff);
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: var(--radius-lg, 28px);
  box-shadow: var(--shadow-soft, 0 10px 30px rgba(0,0,0,0.05));
  padding: var(--space-lg, 32px);
}
.story-stat-row {
  display: flex;
  justify-content: space-between;
  padding: var(--space-sm, 16px) 0;
  border-top: 1px solid rgba(0,0,0,0.06);
}
.story-stat-row:first-child { border-top: none; padding-top: 0; }
.story-stat-label { font-size: 14px; color: var(--color-gray, #5F6B7A); }
.story-stat-value { font-size: 18px; font-weight: 700; color: var(--color-primary, #0D3B73); }

/* ---------- TABLET: 1023px and narrower ---------- */
@media (max-width: 1023px) {
  /* Text + card stack instead of sitting side by side */
  .story-layout { grid-template-columns: 1fr; }
}

/* ---------- MOBILE: 767px and narrower ---------- */
@media (max-width: 767px) {
  .story-container { padding: var(--space-2xl, 64px) var(--space-sm, 16px); }
  .section-heading { font-size: 28px; }
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-c903947 *//* ============================================================
   CONTAINER 4 CSS: MISSION & VISION
   ============================================================ */

.mission-container {
  background: var(--color-soft-blue, #EAF2FB);
  padding: var(--space-3xl, 96px) var(--space-md, 24px);
}
.mission-inner { max-width: var(--content-width, 1200px); margin: 0 auto; }
.mission-container .section-header { margin-bottom: var(--space-2xl, 64px); }

.mission-grid {
  display: grid;
  grid-template-columns: 1fr 1fr; /* two EQUAL columns, unlike Story's 7/5 split */
  gap: var(--space-lg, 32px);
}

.mission-card {
  background: var(--color-white, #fff);
  border-radius: var(--radius-lg, 28px);
  padding: var(--space-xl, 48px);
}
.mission-icon {
  width: 56px; height: 56px;
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--radius-sm, 12px);
  background: var(--color-soft-blue, #EAF2FB);
  color: var(--color-primary, #0D3B73);
  margin-bottom: var(--space-md, 24px);
}
.mission-icon svg { width: 26px; height: 26px; }
.mission-card-title { font-size: 22px; font-weight: 600; color: var(--color-navy, #081F3F); margin: 0 0 var(--space-sm, 16px) 0; }

/* ---------- TABLET: 1023px and narrower ---------- */
@media (max-width: 1023px) {
  .mission-grid { grid-template-columns: 1fr; }
}

/* ---------- MOBILE: 767px and narrower ---------- */
@media (max-width: 767px) {
  .mission-container { padding: var(--space-2xl, 64px) var(--space-sm, 16px); }
  .mission-card { padding: var(--space-lg, 32px); }
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-a63add4 *//* ============================================================
   CONTAINER 5 CSS: LEADERSHIP
   ============================================================ */

.leadership-container {
  max-width: var(--content-width, 1200px);
  margin: 0 auto;
  padding: var(--space-3xl, 96px) var(--space-md, 24px);
}
.leadership-container .section-header { margin-bottom: var(--space-2xl, 64px); }

.leadership-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-lg, 32px);
}

.leader-card { text-align: left; }
.leader-photo {
  width: 100%;
  aspect-ratio: 1 / 1;
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--radius-md, 20px);
  background: var(--color-soft-blue, #EAF2FB);
  color: var(--color-primary, #0D3B73);
  font-size: 28px;
  font-weight: 700;
  margin-bottom: var(--space-md, 24px);
}
.leader-name { font-size: 18px; font-weight: 600; color: var(--color-navy, #081F3F); margin: 0 0 4px 0; }
.leader-role { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; color: var(--color-steel, #3E6B9C); margin-bottom: var(--space-sm, 16px); }
.leader-bio { font-size: 15px; color: var(--color-gray, #5F6B7A); line-height: 1.6; margin: 0; }

/* ---------- TABLET: 1023px and narrower ---------- */
@media (max-width: 1023px) {
  /* 4 columns -> 2 columns */
  .leadership-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ---------- MOBILE: 767px and narrower ---------- */
@media (max-width: 767px) {
  .leadership-container { padding: var(--space-2xl, 64px) var(--space-sm, 16px); }
  /* 2 columns -> 1 column */
  .leadership-grid { grid-template-columns: 1fr; gap: var(--space-lg, 32px); }
  .leader-photo { max-width: 140px; } /* keeps the tile from stretching full-width in a single column */
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-5ec4f64 *//* ============================================================
   CONTAINER 6 CSS: WHY CLIENTS TRUST US
   ============================================================ */

.trust-reasons-container {
  background: var(--color-soft-blue, #EAF2FB);
  padding: var(--space-3xl, 96px) var(--space-md, 24px);
}
.trust-reasons-inner { max-width: var(--content-width, 1200px); margin: 0 auto; }
.trust-reasons-container .section-header { margin-bottom: var(--space-2xl, 64px); }

.trust-reasons-card {
  background: var(--color-white, #fff);
  border-radius: var(--radius-lg, 28px);
  padding: var(--space-md, 24px) var(--space-xl, 48px);
}

.trust-reason-row {
  display: flex;
  align-items: flex-start;
  gap: var(--space-md, 24px);
  padding: var(--space-lg, 32px) 0;
  border-top: 1px solid rgba(0,0,0,0.06);
}
.trust-reason-row:first-child { border-top: none; }

.trust-reason-icon {
  width: 44px; height: 44px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--radius-sm, 12px);
  background: var(--color-soft-blue, #EAF2FB);
  color: var(--color-primary, #0D3B73);
}
.trust-reason-icon svg { width: 22px; height: 22px; }
.trust-reason-content { flex: 1; }
.trust-reason-title { font-size: 18px; font-weight: 600; color: var(--color-navy, #081F3F); margin: 0 0 4px 0; }
.trust-reason-content .section-paragraph { margin: 0; font-size: 16px; }

/* ---------- MOBILE: 767px and narrower ---------- */
@media (max-width: 767px) {
  .trust-reasons-container { padding: var(--space-2xl, 64px) var(--space-sm, 16px); }
  .trust-reasons-card { padding: var(--space-sm, 16px) var(--space-md, 24px); }
  .trust-reason-row { flex-wrap: wrap; }
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-5e791f2 *//* ============================================================
   CONTAINER 7 CSS: INDUSTRIES SERVED
   ============================================================ */

.industries-static-container {
  max-width: var(--content-width, 1200px);
  margin: 0 auto;
  padding: var(--space-3xl, 96px) var(--space-md, 24px);
}
.industries-static-container .section-header { margin-bottom: var(--space-2xl, 64px); }

.industries-static-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: var(--space-md, 24px);
}

.industry-static-card {
  background: var(--color-soft-blue, #EAF2FB);
  border-radius: var(--radius-md, 20px);
  padding: var(--space-lg, 32px) var(--space-md, 24px);
  text-align: center;
}
.industry-static-icon {
  width: 48px; height: 48px; margin: 0 auto var(--space-sm, 16px) auto;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: var(--color-white, #fff);
  color: var(--color-primary, #0D3B73);
}
.industry-static-icon svg { width: 22px; height: 22px; }
.industry-static-name { font-size: 15px; font-weight: 600; color: var(--color-navy, #081F3F); margin: 0; }

/* ---------- TABLET: 1023px and narrower ---------- */
@media (max-width: 1023px) {
  /* 6 columns -> 3 columns */
  .industries-static-grid { grid-template-columns: repeat(3, 1fr); }
}

/* ---------- MOBILE: 767px and narrower ---------- */
@media (max-width: 767px) {
  .industries-static-container { padding: var(--space-2xl, 64px) var(--space-sm, 16px); }
  /* 3 columns -> 2 columns (not all the way to 1 — these cards are
     small enough that 2-up still reads comfortably on a phone) */
  .industries-static-grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-sm, 16px); }
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-6c2a426 *//* ============================================================
   CONTAINER 8 CSS: GALLERY SCROLL
   Reuses .arrow-btn, first defined in the homepage doc's Industries
   container — identical rule, so pasting both docs together causes
   no collision, just a harmless repeat. Skip re-pasting .arrow-btn
   here if you already have it from that container.
   ============================================================ */

.about-gallery-container {
  max-width: var(--content-width, 1200px);
  margin: 0 auto;
  padding: var(--space-3xl, 96px) var(--space-md, 24px);
}

.about-gallery-header-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: var(--space-lg, 32px);
  margin-bottom: var(--space-xl, 48px);
}

.about-gallery-arrow-group {
  display: flex;
  gap: var(--space-sm, 16px);
  flex-shrink: 0;
}

/* .arrow-btn — identical to the homepage doc's Industries container,
   plus a press animation (see :active below) added for this container. */
.arrow-btn {
  width: 48px; height: 48px;
  border-radius: 50%;
  border: 1px solid rgba(0,0,0,0.1);
  background: var(--color-white, #fff);
  color: var(--color-primary, #0D3B73);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: background 0.25s ease, box-shadow 0.25s ease, transform 0.2s ease;
}
.arrow-btn svg { width: 20px; height: 20px; }
.arrow-btn:hover { background: var(--color-soft-blue, #EAF2FB); box-shadow: var(--shadow-soft, 0 10px 30px rgba(0,0,0,0.05)); }
.arrow-btn:active { transform: scale(0.9); }

.about-gallery-track {
  display: flex;
  gap: var(--space-md, 24px);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth; /* native fallback for keyboard/anchor-triggered scroll */
  overscroll-behavior-x: contain; /* stops the drag/scroll from bubbling into page scroll */
  padding-bottom: var(--space-sm, 16px); /* room for a scrollbar without clipping cards */
  -webkit-overflow-scrolling: touch;
  margin: 0;
  cursor: grab; /* signals the track is click-and-drag-able for mouse users */
}
/* While the JS above is actively dragging the track: snapping and the
   smooth-scroll easing both get out of the way so it tracks the
   cursor exactly, 1:1. Removing this class (on pointer-up) restores
   both, which is what makes it glide-snap to the nearest photo. */
.about-gallery-track.is-dragging {
  cursor: grabbing;
  scroll-snap-type: none;
  scroll-behavior: auto;
}

.gallery-item {
  scroll-snap-align: start;
  flex: 0 0 260px; /* fixed width card that never shrinks */
  margin: 0;
  transition: opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1), transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
/* Hidden starting state ONLY applies once the JS above adds
   "js-gallery-animated" to the track — so with the <script> removed,
   this rule never matches and every item is simply visible (see the
   plain .gallery-item rule above, which has no opacity/transform). */
.about-gallery-track.js-gallery-animated .gallery-item {
  opacity: 0;
  transform: translateY(28px);
}
.about-gallery-track.js-gallery-animated .gallery-item.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.gallery-photo {
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-md, 20px);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-soft, 0 10px 30px rgba(0,0,0,0.05));
  margin-bottom: var(--space-sm, 16px);
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.45s ease;
}
/* Hover lift — a small, tasteful nudge to signal these tiles are the
   real-photo slots. Skipped automatically on touch devices, which
   don't have hover. */
.gallery-item:hover .gallery-photo {
  transform: translateY(-8px) scale(1.03);
  box-shadow: var(--shadow-strong, 0 20px 60px rgba(0,0,0,0.08));
}
.gallery-photo-icon {
  width: 40px; height: 40px; color: var(--color-white, #fff);
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}
.gallery-item:hover .gallery-photo-icon { transform: scale(1.1); }

/* 4 gradient variants, cycled across the 8 items so neighboring tiles
   never repeat the same combination. All use the site's existing
   color tokens, so they stay in-brand even before real photos exist. */
.gallery-photo-a { background: linear-gradient(135deg, var(--color-primary, #0D3B73), var(--color-navy, #081F3F)); }
.gallery-photo-b { background: linear-gradient(135deg, var(--color-steel, #3E6B9C), var(--color-primary, #0D3B73)); }
.gallery-photo-c { background: linear-gradient(135deg, var(--color-navy, #081F3F), var(--color-gold, #D6A641)); }
.gallery-photo-d { background: linear-gradient(135deg, var(--color-gold, #D6A641), var(--color-steel, #3E6B9C)); }

.gallery-caption { font-size: 15px; font-weight: 600; color: var(--color-navy, #081F3F); margin: 0; text-align: center; }

/* ---------- TABLET: 1023px and narrower ---------- */
@media (max-width: 1023px) {
  .about-gallery-header-row { flex-direction: column; align-items: flex-start; }
}

/* ---------- MOBILE: 767px and narrower ---------- */
@media (max-width: 767px) {
  .about-gallery-container { padding: var(--space-2xl, 64px) var(--space-sm, 16px); }
  .gallery-item { flex: 0 0 200px; }
}

/* ---------- Respect the visitor's OS-level "reduce motion" setting ----------
   The JS above already skips adding "js-gallery-animated" when this is
   on, so items render visible with no reveal animation; this backstops
   the hover/press motion too, in case a container is pasted somewhere
   the JS didn't run. */
@media (prefers-reduced-motion: reduce) {
  .gallery-item,
  .gallery-photo,
  .gallery-photo-icon,
  .arrow-btn {
    transition: none;
  }
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-194c10a *//* ============================================================
   CONTAINER 8 CSS: CTA
   ============================================================ */

.about-cta-container {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, var(--color-navy, #081F3F) 0%, var(--color-primary, #0D3B73) 100%);
  padding: var(--space-3xl, 96px) var(--space-md, 24px);
  text-align: center;
}

.about-cta-art {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 500px; height: 500px;
  pointer-events: none;
  opacity: 0.6;
}

.about-cta-inner {
  position: relative;
  max-width: 700px;
  margin: 0 auto;
}

.about-cta-heading {
  font-family: var(--font-main, 'Inter', sans-serif);
  font-size: 40px;
  font-weight: 700;
  color: var(--color-white, #fff);
  margin: 0 0 var(--space-md, 24px) 0;
}
.about-cta-paragraph {
  font-size: 18px;
  color: rgba(255,255,255,0.8);
  margin: 0 0 var(--space-lg, 32px) 0;
}
.about-cta-button-row {
  display: flex;
  justify-content: center;
  gap: var(--space-sm, 16px);
  flex-wrap: wrap;
  margin-bottom: var(--space-md, 24px);
}

/* "On dark" button variants — identical to the homepage doc's, repeated
   here so this page is self-contained on its own. */
.btn-primary-on-dark {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 14px 28px; border-radius: var(--radius-sm, 12px);
  font-weight: 600; font-size: 15px; text-decoration: none;
  background: var(--color-gold, #D6A641); color: var(--color-navy, #081F3F);
  transition: transform 0.2s ease;
}
.btn-secondary-on-dark {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 14px 28px; border-radius: var(--radius-sm, 12px);
  font-weight: 600; font-size: 15px; text-decoration: none;
  background: transparent; color: var(--color-white, #fff);
  border: 2px solid rgba(255,255,255,0.35);
  transition: transform 0.2s ease;
}
.btn-primary-on-dark:hover, .btn-secondary-on-dark:hover { transform: translateY(-2px); }

.about-cta-fine-print { font-size: 14px; color: rgba(255,255,255,0.5); margin: 0; position: relative; }

/* ---------- MOBILE: 767px and narrower ---------- */
@media (max-width: 767px) {
  .about-cta-container { padding: var(--space-2xl, 64px) var(--space-sm, 16px); }
  .about-cta-heading { font-size: 28px; }
  .about-cta-button-row { flex-direction: column; }
  .about-cta-button-row .btn { width: 100%; }
}/* End custom CSS */