.elementor-4958 .elementor-element.elementor-element-3fe4c46{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-4958 .elementor-element.elementor-element-3fe4c46:not(.elementor-motion-effects-element-type-background), .elementor-4958 .elementor-element.elementor-element-3fe4c46 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#FFFFFF;}:root{--page-title-display:none;}/* Start custom CSS for container, class: .elementor-element-3fe4c46 */<style>
/* ===== thriveGEO — OUR WORK PAGE / FULL-BLEED VIDEO + REFINED CASE STORY CAROUSEL ===== */

/* ===== ELEMENTOR WHITE STRIP FIX ===== */

.elementor-widget-html:has(#tg-our-work-page),
.elementor-widget-html:has(#tg-our-work-page) > .elementor-widget-container,
.elementor-section:has(#tg-our-work-page),
.e-con:has(#tg-our-work-page),
.elementor-column:has(#tg-our-work-page),
.elementor-widget-container:has(#tg-our-work-page) {
  margin-top: 0 !important;
  padding-top: 0 !important;
  background: #101014 !important;
}

.tg-work-page,
.tg-work-page * {
  box-sizing: border-box;
}

.tg-work-page {
  --mx: 50%;
  --my: 54%;
  --cardX: 50%;
  --cardY: 50%;
  --topBleed: 58px;

  position: relative;
  left: 50%;
  right: 50%;
  width: 100vw;
  margin-left: -50vw;
  margin-right: -50vw;
  margin-top: calc(-1 * var(--topBleed));
  overflow: hidden;
  font-family: "Figtree", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color: #ffffff;
  background: #101014;
}

.tg-work-page::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: calc(-1 * var(--topBleed));
  height: calc(var(--topBleed) + 4px);
  z-index: 0;
  background: #101014;
  pointer-events: none;
}

/* ===== FULL-BLEED HERO ===== */

.tg-work-hero {
  position: relative;
  min-height: calc(100vh + var(--topBleed));
  padding: calc(108px + var(--topBleed)) 42px 78px;
  overflow: hidden;
  background: #101014;
  isolation: isolate;
}

.tg-work-hero-video {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: .82;
  transform: scale(1.04);
  filter: saturate(1.04) contrast(1.02);
}

.tg-work-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    radial-gradient(circle at var(--mx) var(--my), rgba(37,190,192,.18), transparent 30%),
    radial-gradient(circle at 88% 16%, rgba(123,77,209,.18), transparent 34%),
    linear-gradient(180deg, rgba(16,16,20,.28) 0%, rgba(16,16,20,.44) 42%, rgba(16,16,20,.92) 100%);
  pointer-events: none;
}

.tg-work-hero::after {
  content: "";
  position: absolute;
  inset: 18px;
  z-index: 2;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 34px;
  pointer-events: none;
}

.tg-work-wrap {
  position: relative;
  z-index: 4;
  max-width: 1180px;
  margin: 0 auto;
}

.tg-work-hero-inner {
  position: relative;
  z-index: 4;
  min-height: calc(100vh - 186px);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.tg-work-hero-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 18px;
}

.tg-work-eyebrow,
.tg-work-hero-pill {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  min-height: 38px;
  padding: 0 16px;
  border-radius: 999px;
  color: rgba(255,255,255,.84);
  background: rgba(16,16,20,.24);
  border: 1px solid rgba(255,255,255,.18);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  font-size: 13px;
  line-height: 1;
  font-weight: 720;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.tg-work-eyebrow {
  gap: 10px;
  margin: 0;
}

.tg-work-eyebrow::before {
  content: "";
  width: 9px;
  height: 9px;
  border-radius: 999px;
  background: linear-gradient(135deg, #25BEC0 0%, #BFA8FF 100%);
  box-shadow: 0 0 18px rgba(37,190,192,.44);
}

.tg-work-hero-pill {
  letter-spacing: .02em;
  text-transform: none;
  font-weight: 600;
}

.tg-work-hero-main {
  max-width: 1040px;
  padding-top: 90px;
}

.tg-work-title {
  margin: 0;
  color: #ffffff;
  font-size: clamp(86px, 16vw, 204px);
  line-height: .86;
  font-weight: 455;
  letter-spacing: -.028em;
}

.tg-work-title .is-white {
  color: #ffffff;
}

.tg-work-title .is-gradient {
  display: block;
  width: fit-content;
  padding-right: .08em;
  padding-bottom: .05em;
  margin-right: -.08em;
  margin-bottom: -.05em;
  background: linear-gradient(90deg, #EFFFFF 0%, #25BEC0 34%, #6EA8FF 62%, #BFA8FF 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.tg-work-hero-copy {
  max-width: 760px;
  margin: 32px 0 0;
  color: rgba(255,255,255,.78);
  font-size: clamp(17px, 1.7vw, 22px);
  line-height: 1.52;
  font-weight: 400;
}

.tg-work-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 34px;
}

.tg-work-btn {
  --btnx: 50%;
  --btny: 50%;

  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  min-width: 172px;
  padding: 0 24px;
  border-radius: 10px;
  overflow: hidden;
  text-decoration: none !important;
  color: #101014 !important;
  background: #ffffff;
  font-size: 15px;
  line-height: 1;
  font-weight: 600;
  box-shadow: 0 18px 48px rgba(0,0,0,.22);
  transition:
    transform .24s ease,
    box-shadow .24s ease,
    background .24s ease;
}

.tg-work-btn::before {
  content: "";
  position: absolute;
  inset: -1px;
  opacity: 0;
  background: radial-gradient(circle at var(--btnx) var(--btny), rgba(37,190,192,.30), transparent 38%);
  transition: opacity .24s ease;
  pointer-events: none;
}

.tg-work-btn:hover::before,
.tg-work-btn:focus::before {
  opacity: 1;
}

.tg-work-btn:hover,
.tg-work-btn:focus {
  transform: translateY(-3px);
  background: #f7ffff;
  box-shadow: 0 24px 60px rgba(0,0,0,.28);
}

.tg-work-btn.is-dark {
  color: #ffffff !important;
  background: linear-gradient(135deg, #25BEC0 0%, #7B4DD1 100%);
}

.tg-work-btn.is-dark:hover,
.tg-work-btn.is-dark:focus {
  color: #ffffff !important;
  background: linear-gradient(135deg, #7B4DD1 0%, #25BEC0 100%);
  box-shadow: 0 24px 60px rgba(123,77,209,.30);
}

/* ===== CASE STORIES SECTION ===== */

.tg-work-projects {
  position: relative;
  scroll-margin-top: 24px;
  padding: 112px 42px 108px;
  overflow: hidden;
  color: #ffffff;
  background: #101014;
}

.tg-work-projects::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at var(--mx) var(--my), rgba(37,190,192,.12), transparent 30%),
    radial-gradient(circle at 84% 22%, rgba(123,77,209,.20), transparent 38%),
    radial-gradient(circle at 16% 82%, rgba(37,190,192,.10), transparent 36%);
  pointer-events: none;
}

.tg-work-projects::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.032) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.032) 1px, transparent 1px);
  background-size: 56px 56px;
  opacity: .14;
  pointer-events: none;
}

.tg-work-section-head {
  position: relative;
  z-index: 3;
  max-width: 1040px;
  margin-bottom: 48px;
}

.tg-work-section-kicker {
  margin: 0 0 18px;
  color: #25BEC0;
  font-size: 13px;
  line-height: 1;
  font-weight: 780;
  letter-spacing: .11em;
  text-transform: uppercase;
}

.tg-work-section-title {
  margin: 0;
  max-width: 960px;
  color: #ffffff;
  font-size: clamp(42px, 5.6vw, 76px);
  line-height: 1.08;
  font-weight: 465;
  letter-spacing: -.008em;
}

.tg-work-section-title span {
  display: inline-block;
  padding-right: .08em;
  background: linear-gradient(90deg, #25BEC0 0%, #5D8BD8 45%, #BFA8FF 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.tg-work-section-copy {
  max-width: 980px;
  margin: 26px 0 0;
  color: rgba(255,255,255,.70);
  font-size: 17px;
  line-height: 1.58;
  font-weight: 400;
}

.tg-work-section-copy .nowrap {
  white-space: nowrap;
}

/* ===== REFINED CAROUSEL ===== */

.tg-work-carousel-shell {
  position: relative;
  z-index: 3;
  margin-top: 22px;
}

.tg-work-carousel-window {
  position: relative;
  height: 455px;
  overflow: visible;
}

.tg-work-carousel {
  position: relative;
  height: 455px;
  perspective: 1600px;
}

.tg-work-project-card {
  --glowA: rgba(37,190,192,.16);
  --glowB: rgba(123,77,209,.16);

  position: absolute;
  top: 0;
  left: 50%;
  width: min(660px, 58vw);
  height: 390px;
  border-radius: 32px;
  overflow: hidden;
  text-decoration: none !important;
  color: #101014 !important;
  background:
    radial-gradient(ellipse at 50% 42%, rgba(255,255,255,.48) 0%, rgba(255,255,255,.42) 26%, rgba(255,255,255,.78) 55%, #ffffff 82%),
    radial-gradient(circle at 18% 20%, var(--glowA), transparent 42%),
    radial-gradient(circle at 88% 76%, var(--glowB), transparent 48%),
    linear-gradient(145deg, rgba(255,255,255,.98), rgba(255,255,255,.90));
  border: 1px solid rgba(255,255,255,.92);
  box-shadow:
    0 34px 90px rgba(0,0,0,.35),
    inset 0 1px 0 rgba(255,255,255,1);
  opacity: 0;
  pointer-events: none;
  transform: translateX(-50%) translateY(44px) scale(.74);
  transition:
    transform .82s cubic-bezier(.16, 1, .3, 1),
    opacity .62s ease,
    filter .62s ease,
    box-shadow .62s ease;
  backdrop-filter: blur(12px) saturate(1.04);
  -webkit-backdrop-filter: blur(12px) saturate(1.04);
}

.tg-work-project-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 52% 38%, rgba(255,255,255,.05) 0%, rgba(255,255,255,.04) 30%, rgba(255,255,255,.58) 66%, #ffffff 100%),
    radial-gradient(circle at var(--cardX) var(--cardY), rgba(37,190,192,.11), transparent 31%),
    linear-gradient(90deg, #ffffff 0%, rgba(255,255,255,.92) 13%, rgba(255,255,255,.56) 50%, rgba(255,255,255,.92) 87%, #ffffff 100%),
    linear-gradient(180deg, #ffffff 0%, rgba(255,255,255,.66) 44%, #ffffff 84%, #ffffff 100%);
}

.tg-work-project-card::after {
  content: "";
  position: absolute;
  left: 30px;
  right: 30px;
  bottom: 24px;
  z-index: 4;
  height: 4px;
  border-radius: 999px;
  background: linear-gradient(90deg, #25BEC0 0%, #5D8BD8 45%, #7B4DD1 100%);
  transform: scaleX(.20);
  transform-origin: left;
  opacity: .62;
  transition: transform .34s ease, opacity .34s ease;
}

.tg-work-project-card:hover::after {
  transform: scaleX(1);
  opacity: 1;
}

.tg-work-project-card.is-active {
  z-index: 8;
  opacity: 1;
  pointer-events: auto;
  filter: none;
  transform: translateX(-50%) translateY(0) scale(1);
  box-shadow:
    0 46px 118px rgba(0,0,0,.46),
    0 0 0 1px rgba(255,255,255,.84),
    inset 0 1px 0 rgba(255,255,255,1);
}

.tg-work-project-card.is-prev {
  z-index: 6;
  opacity: .62;
  pointer-events: auto;
  filter: saturate(.84) brightness(.90);
  transform: translateX(-101%) translateY(38px) scale(.74) rotateY(7deg);
}

.tg-work-project-card.is-next {
  z-index: 6;
  opacity: .62;
  pointer-events: auto;
  filter: saturate(.84) brightness(.90);
  transform: translateX(1%) translateY(38px) scale(.74) rotateY(-7deg);
}

.tg-work-project-card.is-far-prev {
  z-index: 3;
  opacity: .18;
  filter: blur(.4px) saturate(.66) brightness(.78);
  transform: translateX(-130%) translateY(68px) scale(.58) rotateY(10deg);
}

.tg-work-project-card.is-far-next {
  z-index: 3;
  opacity: .18;
  filter: blur(.4px) saturate(.66) brightness(.78);
  transform: translateX(30%) translateY(68px) scale(.58) rotateY(-10deg);
}

.tg-work-project-card-inner {
  position: relative;
  z-index: 3;
  height: 100%;
  padding: 28px 30px 34px;
  display: flex;
  flex-direction: column;
}

.tg-work-project-top {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
}

.tg-work-project-logo {
  position: relative;
  z-index: 2;
  width: 260px;
  height: 92px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.tg-work-project-logo img {
  display: block;
  width: auto;
  max-width: 230px;
  max-height: 82px;
  object-fit: contain;
  filter: drop-shadow(0 14px 26px rgba(9,33,61,.11));
}

.tg-work-project-logo.is-cnes img {
  max-width: 210px;
  max-height: 86px;
}

.tg-work-project-logo.is-aodn img {
  max-width: 245px;
  max-height: 86px;
}

.tg-work-project-logo.is-aws img {
  max-width: 160px;
  max-height: 72px;
}

.tg-work-project-logo.is-eopf img {
  max-width: 215px;
  max-height: 66px;
}

.tg-work-project-logo.is-ogcr img {
  max-width: 240px;
  max-height: 72px;
}

.tg-work-project-body {
  position: relative;
  z-index: 3;
  margin-top: auto;
  max-width: 560px;
}

.tg-work-project-body::before {
  content: "";
  position: absolute;
  left: -16px;
  right: -16px;
  top: -18px;
  bottom: -18px;
  z-index: -1;
  border-radius: 24px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.84), rgba(255,255,255,.96));
  pointer-events: none;
}

.tg-work-project-kicker {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  min-height: 30px;
  padding: 0 12px;
  margin: 0 0 14px;
  border-radius: 999px;
  color: rgba(16,16,20,.62);
  background: rgba(16,16,20,.055);
  border: 1px solid rgba(16,16,20,.08);
  font-size: 10.8px;
  line-height: 1;
  font-weight: 780;
  letter-spacing: .105em;
  text-transform: uppercase;
}

.tg-work-project-title {
  margin: 0;
  color: #101014;
  font-size: clamp(32px, 3.7vw, 50px);
  line-height: 1.08;
  font-weight: 500;
  letter-spacing: .006em;
}

.tg-work-project-copy {
  max-width: 500px;
  margin: 16px 0 0;
  color: rgba(16,16,20,.68);
  font-size: 15.8px;
  line-height: 1.5;
  font-weight: 400;
}

.tg-work-project-open {
  display: inline-flex;
  align-items: center;
  margin-top: 20px;
  color: #101014;
  font-size: 14.5px;
  line-height: 1;
  font-weight: 600;
}

/* CONTROLS */

.tg-work-carousel-controls {
  position: relative;
  z-index: 12;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-top: 2px;
}

.tg-work-carousel-btn {
  width: 48px;
  height: 48px;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 999px;
  color: #ffffff;
  background: rgba(255,255,255,.09);
  cursor: pointer;
  font: inherit;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition:
    transform .24s ease,
    background .24s ease,
    border-color .24s ease,
    box-shadow .24s ease;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.tg-work-carousel-btn:hover,
.tg-work-carousel-btn:focus {
  transform: translateY(-3px);
  background: rgba(255,255,255,.15);
  border-color: rgba(37,190,192,.44);
  box-shadow: 0 0 0 6px rgba(37,190,192,.08);
}

.tg-work-carousel-dots {
  display: inline-flex;
  gap: 8px;
  padding: 0 8px;
}

.tg-work-dot {
  width: 9px;
  height: 9px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: rgba(255,255,255,.28);
  cursor: pointer;
  transition:
    width .28s ease,
    background .28s ease,
    opacity .28s ease;
}

.tg-work-dot.is-active {
  width: 34px;
  background: linear-gradient(90deg, #25BEC0 0%, #7B4DD1 100%);
}

/* ===== CTA ===== */

.tg-work-cta {
  position: relative;
  padding: 84px 42px 112px;
  background: #ffffff;
}

.tg-work-cta-card {
  position: relative;
  max-width: 1180px;
  margin: 0 auto;
  min-height: 330px;
  padding: 48px;
  border-radius: 42px;
  overflow: hidden;
  background:
    radial-gradient(circle at 82% 24%, rgba(37,190,192,.18), transparent 34%),
    radial-gradient(circle at 16% 84%, rgba(123,77,209,.16), transparent 36%),
    linear-gradient(135deg, #101014 0%, #09213D 48%, #063C4D 100%);
  color: #ffffff;
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 36px 96px rgba(9,33,61,.16);
}

.tg-work-cta-card::before {
  content: "";
  position: absolute;
  width: 520px;
  height: 520px;
  right: -240px;
  top: -260px;
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(37,190,192,.22), rgba(123,77,209,.30));
  filter: blur(4px);
  opacity: .64;
  pointer-events: none;
}

.tg-work-cta-content {
  position: relative;
  z-index: 2;
  max-width: 760px;
}

.tg-work-cta h2 {
  margin: 0;
  color: #ffffff;
  font-size: clamp(38px, 5vw, 72px);
  line-height: 1.08;
  font-weight: 480;
  letter-spacing: -.01em;
}

.tg-work-cta p {
  max-width: 660px;
  margin: 24px 0 0;
  color: rgba(255,255,255,.72);
  font-size: 18px;
  line-height: 1.58;
  font-weight: 400;
}

.tg-work-cta-actions {
  margin-top: 32px;
}

/* ===== REVEAL ===== */

.tg-work-rise {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .76s ease, transform .76s ease;
}

.tg-work-rise.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ===== RESPONSIVE ===== */

@media (max-width: 1060px) {
  .tg-work-page {
    --topBleed: 42px;
  }

  .tg-work-hero,
  .tg-work-projects,
  .tg-work-cta {
    padding-left: 30px;
    padding-right: 30px;
  }

  .tg-work-carousel-window,
  .tg-work-carousel {
    height: 455px;
  }

  .tg-work-project-card {
    width: min(660px, 78vw);
    height: 390px;
  }

  .tg-work-project-card.is-prev {
    transform: translateX(-100%) translateY(40px) scale(.72) rotateY(7deg);
  }

  .tg-work-project-card.is-next {
    transform: translateX(0%) translateY(40px) scale(.72) rotateY(-7deg);
  }
}

@media (max-width: 720px) {
  .tg-work-page {
    --topBleed: 28px;
  }

  .tg-work-hero {
    min-height: calc(92vh + var(--topBleed));
    padding: calc(78px + var(--topBleed)) 20px 48px;
  }

  .tg-work-hero::after {
    inset: 10px;
    border-radius: 24px;
  }

  .tg-work-hero-inner {
    min-height: calc(92vh - 126px);
  }

  .tg-work-hero-top {
    flex-direction: column;
  }

  .tg-work-title {
    font-size: clamp(76px, 25vw, 112px);
    line-height: .94;
    letter-spacing: -.018em;
  }

  .tg-work-hero-copy {
    font-size: 16.5px;
    line-height: 1.56;
  }

  .tg-work-hero-actions {
    flex-direction: column;
  }

  .tg-work-btn {
    width: 100%;
  }

  .tg-work-projects,
  .tg-work-cta {
    padding: 72px 20px 82px;
  }

  .tg-work-section-title {
    font-size: 42px;
    line-height: 1.1;
    letter-spacing: -.004em;
  }

  .tg-work-section-copy {
    font-size: 16px;
  }

  .tg-work-section-copy .nowrap {
    white-space: normal;
  }

  .tg-work-carousel-window,
  .tg-work-carousel {
    height: 480px;
  }

  .tg-work-project-card {
    width: calc(100vw - 40px);
    height: 440px;
    border-radius: 28px;
  }

  .tg-work-project-card.is-prev,
  .tg-work-project-card.is-next,
  .tg-work-project-card.is-far-prev,
  .tg-work-project-card.is-far-next {
    opacity: 0;
    pointer-events: none;
    transform: translateX(-50%) translateY(38px) scale(.82);
  }

  .tg-work-project-card-inner {
    padding: 26px 22px 30px;
  }

  .tg-work-project-logo {
    width: 230px;
    height: 84px;
  }

  .tg-work-project-logo img {
    max-width: 190px;
    max-height: 68px;
  }

  .tg-work-project-logo.is-cnes img {
    max-width: 180px;
    max-height: 74px;
  }

  .tg-work-project-logo.is-aodn img {
    max-width: 210px;
    max-height: 72px;
  }

  .tg-work-project-logo.is-aws img {
    max-width: 138px;
    max-height: 58px;
  }

  .tg-work-project-logo.is-eopf img {
    max-width: 190px;
    max-height: 56px;
  }

  .tg-work-project-logo.is-ogcr img {
    max-width: 200px;
    max-height: 60px;
  }

  .tg-work-project-title {
    font-size: 36px;
    line-height: 1.1;
    letter-spacing: .004em;
  }

  .tg-work-project-copy {
    font-size: 15px;
  }

  .tg-work-project-open {
    margin-top: 18px;
  }

  .tg-work-cta-card {
    padding: 34px 24px;
    border-radius: 30px;
  }

  .tg-work-cta h2 {
    font-size: 42px;
    line-height: 1.1;
    letter-spacing: -.005em;
  }

  .tg-work-cta p {
    font-size: 16.5px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .tg-work-page *,
  .tg-work-page *::before,
  .tg-work-page *::after {
    animation: none !important;
    transition: none !important;
  }

  .tg-work-hero-video {
    display: none;
  }
}
</style>

<div class="tg-work-page" id="tg-our-work-page">

  <!-- HERO -->
  <section class="tg-work-hero">
    <video class="tg-work-hero-video" autoplay muted loop playsinline preload="metadata">
      <source src="https://thrivegeo.com/wp-content/uploads/2026/07/8733055-uhd_3840_2160_30fps.mp4" type="video/mp4">
    </video>

    <div class="tg-work-wrap">
      <div class="tg-work-hero-inner tg-work-rise">

        <div class="tg-work-hero-top">
          <p class="tg-work-eyebrow">Selected work</p>
          <p class="tg-work-hero-pill">Training · Engagement · Strategy</p>
        </div>

        <div class="tg-work-hero-main">
          <h1 class="tg-work-title">
            <span class="is-white">Our</span>
            <span class="is-gradient">work</span>
          </h1>

          <p class="tg-work-hero-copy">
            Case stories from teams using geospatial data, Earth observation and cloud-native tools with more confidence, clarity and impact.
          </p>

          <div class="tg-work-hero-actions">
            <a class="tg-work-btn" href="#case-stories">Explore case stories</a>
            <a class="tg-work-btn is-dark" href="https://thrivegeo.com/book-a-call/">Book a call</a>
          </div>
        </div>

      </div>
    </div>
  </section>

  <!-- CASE STORIES -->
  <section class="tg-work-projects" id="case-stories">
    <div class="tg-work-wrap">

      <header class="tg-work-section-head tg-work-rise">
        <p class="tg-work-section-kicker">Case stories</p>

        <h2 class="tg-work-section-title">
          Selected projects that turn complexity into <span>practical use</span>
        </h2>

        <p class="tg-work-section-copy">
          Explore examples of training, stakeholder engagement, data complexity and <span class="nowrap">practical geospatial use.</span>
        </p>
      </header>

      <div class="tg-work-carousel-shell tg-work-rise">
        <div class="tg-work-carousel-window">
          <div class="tg-work-carousel" aria-label="thriveGEO case story carousel">

            <a class="tg-work-project-card is-active" href="https://thrivegeo.com/cnes-customer-story/" data-project-card>
              <div class="tg-work-project-card-inner">
                <div class="tg-work-project-top">
                  <div class="tg-work-project-logo is-cnes">
                    <img src="https://thrivegeo.com/wp-content/uploads/2026/07/Logo_CNES_2017_triangulaire_bleu1.png" alt="CNES logo">
                  </div>
                </div>

                <div class="tg-work-project-body">
                  <p class="tg-work-project-kicker">Training & Upskilling</p>

                  <h3 class="tg-work-project-title">CNES</h3>

                  <p class="tg-work-project-copy">
                    Helping teams build confidence with cloud-native Earth observation workflows through practical, tailored training.
                  </p>

                  <span class="tg-work-project-open">Open case story</span>
                </div>
              </div>
            </a>

            <a class="tg-work-project-card is-next" href="https://thrivegeo.com/aodn-customer-story/" data-project-card>
              <div class="tg-work-project-card-inner">
                <div class="tg-work-project-top">
                  <div class="tg-work-project-logo is-aodn">
                    <img src="https://thrivegeo.com/wp-content/uploads/2026/07/10.-AODN-021.png" alt="AODN logo">
                  </div>
                </div>

                <div class="tg-work-project-body">
                  <p class="tg-work-project-kicker">Training & Upskilling</p>

                  <h3 class="tg-work-project-title">AODN</h3>

                  <p class="tg-work-project-copy">
                    A tailored hybrid training programme supporting practical use of xarray, Dask, DuckDB, COG and STAC workflows.
                  </p>

                  <span class="tg-work-project-open">Open case story</span>
                </div>
              </div>
            </a>

            <a class="tg-work-project-card is-far-next" href="https://thrivegeo.com/genai-geospatial-challenge/" data-project-card>
              <div class="tg-work-project-card-inner">
                <div class="tg-work-project-top">
                  <div class="tg-work-project-logo is-aws">
                    <img src="https://thrivegeo.com/wp-content/uploads/2026/07/aws-colour-2.svg" alt="AWS logo">
                  </div>
                </div>

                <div class="tg-work-project-body">
                  <p class="tg-work-project-kicker">Data Complexity</p>

                  <h3 class="tg-work-project-title">GenAI for Geospatial</h3>

                  <p class="tg-work-project-copy">
                    Supporting teams across EMEA as they turned generative AI and geospatial ideas into working prototypes.
                  </p>

                  <span class="tg-work-project-open">Open case story</span>
                </div>
              </div>
            </a>

            <a class="tg-work-project-card is-far-prev" href="https://thrivegeo.com/eopf-community-notebook-competition/" data-project-card>
              <div class="tg-work-project-card-inner">
                <div class="tg-work-project-top">
                  <div class="tg-work-project-logo is-eopf">
                    <img src="https://thrivegeo.com/wp-content/uploads/2026/07/TypeToolkitVariationPositive-2.svg" alt="EOPF Toolkit logo">
                  </div>
                </div>

                <div class="tg-work-project-body">
                  <p class="tg-work-project-kicker">Community Engagement</p>

                  <h3 class="tg-work-project-title">EOPF Competition</h3>

                  <p class="tg-work-project-copy">
                    Helping the community learn, test and share practical notebooks for new cloud-native Copernicus workflows.
                  </p>

                  <span class="tg-work-project-open">Open competition</span>
                </div>
              </div>
            </a>

            <a class="tg-work-project-card is-prev" href="https://thrivegeo.com/ogcr-project-story/" data-project-card>
              <div class="tg-work-project-card-inner">
                <div class="tg-work-project-top">
                  <div class="tg-work-project-logo is-ogcr">
                    <img src="https://thrivegeo.com/wp-content/uploads/2026/06/ogcr_logo-CBoGQyOV.svg" alt="OGCR logo">
                  </div>
                </div>

                <div class="tg-work-project-body">
                  <p class="tg-work-project-kicker">Stakeholder Engagement</p>

                  <h3 class="tg-work-project-title">OGCR</h3>

                  <p class="tg-work-project-copy">
                    Turning 100+ stakeholder voices into practical requirements for Europe’s carbon removal data infrastructure.
                  </p>

                  <span class="tg-work-project-open">Open case story</span>
                </div>
              </div>
            </a>

          </div>
        </div>

        <div class="tg-work-carousel-controls" aria-label="Carousel controls">
          <button class="tg-work-carousel-btn" type="button" data-carousel-prev aria-label="Previous case story">←</button>

          <div class="tg-work-carousel-dots" aria-label="Carousel pagination"></div>

          <button class="tg-work-carousel-btn" type="button" data-carousel-next aria-label="Next case story">→</button>
        </div>
      </div>

    </div>
  </section>

  <!-- CTA -->
  <section class="tg-work-cta">
    <div class="tg-work-cta-card tg-work-rise">
      <div class="tg-work-cta-content">
        <h2>Have a product that needs to move from potential to practical use?</h2>

        <p>
          Let’s talk about the training, engagement or strategic support your team needs to make geospatial work more usable.
        </p>

        <div class="tg-work-cta-actions">
          <a class="tg-work-btn is-dark" href="https://thrivegeo.com/book-a-call/">Book a call</a>
        </div>
      </div>
    </div>
  </section>

</div>

<script>
(function () {
  const page = document.querySelector('.tg-work-page');
  if (!page) return;

  const hero = page.querySelector('.tg-work-hero');
  const projectSection = page.querySelector('.tg-work-projects');
  const cards = Array.from(page.querySelectorAll('[data-project-card]'));
  const prevBtn = page.querySelector('[data-carousel-prev]');
  const nextBtn = page.querySelector('[data-carousel-next]');
  const dotsWrap = page.querySelector('.tg-work-carousel-dots');
  const buttons = page.querySelectorAll('.tg-work-btn');

  let current = 0;
  let timer = null;
  let raf = null;
  let latestEvent = null;

  function clamp(value, min, max) {
    return Math.max(min, Math.min(max, value));
  }

  function getClassForOffset(offset) {
    if (offset === 0) return 'is-active';
    if (offset === 1) return 'is-next';
    if (offset === -1) return 'is-prev';
    if (offset === 2 || offset < -2) return 'is-far-next';
    return 'is-far-prev';
  }

  function normalOffset(index) {
    const total = cards.length;
    let offset = index - current;

    if (offset > total / 2) offset -= total;
    if (offset < -total / 2) offset += total;

    return offset;
  }

  function updateCarousel() {
    cards.forEach(function (card, index) {
      card.classList.remove('is-active', 'is-prev', 'is-next', 'is-far-prev', 'is-far-next');
      card.classList.add(getClassForOffset(normalOffset(index)));
      card.setAttribute('aria-current', index === current ? 'true' : 'false');
    });

    const dots = dotsWrap ? Array.from(dotsWrap.querySelectorAll('.tg-work-dot')) : [];
    dots.forEach(function (dot, index) {
      dot.classList.toggle('is-active', index === current);
      dot.setAttribute('aria-current', index === current ? 'true' : 'false');
    });
  }

  function goTo(index) {
    current = (index + cards.length) % cards.length;
    updateCarousel();
    restartTimer();
  }

  function next() {
    goTo(current + 1);
  }

  function prev() {
    goTo(current - 1);
  }

  function startTimer() {
    if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) return;
    timer = window.setInterval(next, 5600);
  }

  function stopTimer() {
    if (timer) {
      window.clearInterval(timer);
      timer = null;
    }
  }

  function restartTimer() {
    stopTimer();
    startTimer();
  }

  if (dotsWrap) {
    cards.forEach(function (_, index) {
      const dot = document.createElement('button');
      dot.className = 'tg-work-dot';
      dot.type = 'button';
      dot.setAttribute('aria-label', 'Go to case story ' + (index + 1));
      dot.addEventListener('click', function () {
        goTo(index);
      });
      dotsWrap.appendChild(dot);
    });
  }

  if (nextBtn) nextBtn.addEventListener('click', next);
  if (prevBtn) prevBtn.addEventListener('click', prev);

  if (projectSection) {
    projectSection.addEventListener('pointermove', function (e) {
      latestEvent = e;

      if (raf) return;

      raf = requestAnimationFrame(function () {
        const rect = projectSection.getBoundingClientRect();
        const x = clamp(((latestEvent.clientX - rect.left) / rect.width) * 100, 8, 92);
        const y = clamp(((latestEvent.clientY - rect.top) / rect.height) * 100, 8, 92);

        projectSection.style.setProperty('--mx', x + '%');
        projectSection.style.setProperty('--my', y + '%');

        raf = null;
      });
    });

    projectSection.addEventListener('pointerleave', function () {
      projectSection.style.setProperty('--mx', '50%');
      projectSection.style.setProperty('--my', '54%');
    });

    projectSection.addEventListener('mouseenter', stopTimer);
    projectSection.addEventListener('mouseleave', startTimer);
  }

  if (hero) {
    hero.addEventListener('pointermove', function (e) {
      const rect = hero.getBoundingClientRect();
      const x = clamp(((e.clientX - rect.left) / rect.width) * 100, 8, 92);
      const y = clamp(((e.clientY - rect.top) / rect.height) * 100, 8, 92);

      hero.style.setProperty('--mx', x + '%');
      hero.style.setProperty('--my', y + '%');
    });

    hero.addEventListener('pointerleave', function () {
      hero.style.setProperty('--mx', '50%');
      hero.style.setProperty('--my', '54%');
    });
  }

  cards.forEach(function (card, index) {
    card.addEventListener('pointermove', function (e) {
      const rect = card.getBoundingClientRect();
      const x = clamp(((e.clientX - rect.left) / rect.width) * 100, 8, 92);
      const y = clamp(((e.clientY - rect.top) / rect.height) * 100, 8, 92);

      card.style.setProperty('--cardX', x + '%');
      card.style.setProperty('--cardY', y + '%');
    });

    card.addEventListener('click', function (e) {
      if (!card.classList.contains('is-active')) {
        e.preventDefault();
        goTo(index);
      }
    });
  });

  buttons.forEach(function (btn) {
    btn.addEventListener('pointermove', function (e) {
      const rect = btn.getBoundingClientRect();
      const x = ((e.clientX - rect.left) / rect.width) * 100;
      const y = ((e.clientY - rect.top) / rect.height) * 100;

      btn.style.setProperty('--btnx', x + '%');
      btn.style.setProperty('--btny', y + '%');
    });
  });

  const caseStoryLinks = page.querySelectorAll('a[href="#case-stories"]');

  caseStoryLinks.forEach(function (link) {
    link.addEventListener('click', function (e) {
      const target = page.querySelector('#case-stories');
      if (!target) return;

      e.preventDefault();

      target.scrollIntoView({
        behavior: 'smooth',
        block: 'start'
      });
    });
  });

  const revealEls = page.querySelectorAll('.tg-work-rise');

  const observer = new IntersectionObserver(function (entries) {
    entries.forEach(function (entry) {
      if (entry.isIntersecting) {
        entry.target.classList.add('is-visible');
        observer.unobserve(entry.target);
      }
    });
  }, { threshold: 0.12 });

  revealEls.forEach(function (el, index) {
    el.style.transitionDelay = (index * 80) + 'ms';
    observer.observe(el);
  });

  updateCarousel();
  startTimer();
})();
</script>/* End custom CSS */