/* Photo scenes only on large sections. Small blocks stay plain light. */

:root {
  --gt-photo-1: url("../img/bg1.webp");
  --gt-photo-2: url("../img/bg2.webp");
  --gt-photo-3: url("../img/bg3.webp");
  --gt-photo-4: url("../img/bg4.webp");
  --gt-veil-light: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.84) 0%,
    rgba(255, 255, 255, 0.9) 100%
  );
  --gt-veil-hero: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.78) 0%,
    rgba(255, 255, 255, 0.86) 100%
  );
  --gt-veil-dark: linear-gradient(
    180deg,
    rgba(7, 8, 15, 0.55) 0%,
    rgba(7, 8, 15, 0.7) 100%
  );
}

body.gt-body {
  background: var(--gt-gradient-page);
  background-attachment: scroll;
}

/* Full-width image, no cover-crop zoom */
body.gt-body #gt-sec-hero,
body.gt-body #gt-sec-flip-cards,
body.gt-body #gt-sec-services,
body.gt-body #gt-sec-why,
body.gt-body #gt-sec-industries,
body.gt-body #gt-sec-platform,
body.gt-body #gt-sec-projects,
body.gt-body #gt-sec-tech,
body.gt-body .gt-page-hero,
body.gt-body .gt-resource-hero,
body.gt-body .gt-career-hero,
body.gt-body .gt-contact-hero {
  background-color: #ffffff !important;
  background-repeat: no-repeat !important;
  background-position: center center !important;
  background-size: 100% auto !important;
  background-attachment: scroll !important;
}

body.gt-body #gt-sec-hero,
body.gt-body .gt-page-hero,
body.gt-body .gt-resource-hero,
body.gt-body .gt-career-hero,
body.gt-body .gt-contact-hero {
  background-image: var(--gt-veil-hero), var(--gt-photo-3) !important;
}

body.gt-body #gt-sec-flip-cards,
body.gt-body #gt-sec-services,
body.gt-body #gt-sec-why,
body.gt-body #gt-sec-industries,
body.gt-body #gt-sec-platform,
body.gt-body #gt-sec-tech {
  background-image: var(--gt-veil-light), var(--gt-photo-2) !important;
}

body.gt-body #gt-sec-projects {
  background-image: var(--gt-veil-light), var(--gt-photo-4) !important;
}

body.gt-body #gt-sec-process {
  background-color: #07080f !important;
  background-image: var(--gt-veil-dark), var(--gt-photo-1) !important;
  background-repeat: no-repeat !important;
  background-position: center center !important;
  background-size: 100% auto !important;
}

body.gt-body #gt-sec-video {
  background-color: #07080f !important;
  background-image: var(--gt-veil-dark), var(--gt-photo-2) !important;
  background-repeat: no-repeat !important;
  background-position: center center !important;
  background-size: 100% auto !important;
}

body.gt-body #gt-sec-hero .gt-hero-matrix {
  opacity: 0.1;
}

body.gt-body #gt-sec-hero .gt-hero-gradient {
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.2) 0%,
    rgba(255, 255, 255, 0.08) 50%,
    rgba(255, 255, 255, 0.28) 100%
  );
}

body.gt-body #gt-sec-hero::before,
body.gt-body #gt-sec-hero::after {
  opacity: 0.12;
}

/* Small / simple sections stay plain light — no photo */
body.gt-body #gt-sec-hero-band,
body.gt-body #gt-sec-intro,
body.gt-body #gt-sec-engage,
body.gt-body #gt-sec-stats,
body.gt-body #gt-sec-timeline,
body.gt-body #gt-sec-newsletter,
body.gt-body #gt-sec-capabilities,
body.gt-body .gt-footer,
body.gt-body .gt-cta-band,
body.gt-body .gt-band-soft,
body.gt-body .gt-detail-shell,
body.gt-body .gt-about-mission,
body.gt-body .gt-about-industries,
body.gt-body .gt-about-timeline,
body.gt-body .gt-offices-cards-section,
body.gt-body .gt-team-disciplines,
body.gt-body .gt-team-join,
body.gt-body .gt-career-benefits,
body.gt-body .gt-career-apply {
  background-image: none !important;
  background-color: var(--gt-white) !important;
}

body.gt-body .gt-bg-white,
body.gt-body .gt-bg-surface,
body.gt-body .gt-section-alt,
body.gt-body #gt-sec-projects .gt-projects-body,
body.gt-body #gt-sec-projects .gt-projects-top {
  background-color: transparent;
}

body.gt-body #gt-sec-projects .gt-projects-body {
  background: transparent !important;
}

body.gt-body .gt-tech-gradient::before {
  opacity: 0.5;
}

/* Mobile sections are much taller than they are wide.  The desktop treatment
   above deliberately shows each complete image (`100% auto`), but on a phone
   that leaves unpainted bands above and below the image and makes a section
   look as though its background has stopped halfway through. */
@media (max-width: 768px) {
  html,
  body.gt-body,
  body.gt-body main {
    width: 100%;
    max-width: 100%;
    overflow-x: clip;
  }

  body.gt-body main > section {
    isolation: isolate;
    overflow-x: clip;
  }

  body.gt-body #gt-sec-hero,
  body.gt-body #gt-sec-flip-cards,
  body.gt-body #gt-sec-services,
  body.gt-body #gt-sec-why,
  body.gt-body #gt-sec-industries,
  body.gt-body #gt-sec-platform,
  body.gt-body #gt-sec-projects,
  body.gt-body #gt-sec-tech,
  body.gt-body #gt-sec-process,
  body.gt-body #gt-sec-video {
    background-size: cover !important;
    background-position: center center !important;
  }

  /* Keep each carousel inside the viewport while preserving swipe/scroll. */
  body.gt-body .gt-hscroll {
    margin-inline: -16px;
    padding-inline: 16px;
    scroll-padding-inline: 16px;
  }

  body.gt-body .gt-hscroll > * {
    flex-basis: calc(100vw - 32px);
    width: calc(100vw - 32px);
    max-width: calc(100vw - 32px);
    min-width: 0;
    scroll-snap-align: start;
  }

  body.gt-body .gt-flip-carousel-outer {
    --flip-visible: 1;
    --flip-pad: 16px;
  }

  body.gt-body .gt-flip-nav,
  body.gt-body .gt-hscroll-dots {
    position: relative;
    z-index: 2;
  }

  body.gt-body #gt-sec-industries.gt-industries-section {
    overflow-x: clip;
  }

  body.gt-body .gt-industries-layout,
  body.gt-body .gt-platform-grid,
  body.gt-body .gt-newsletter-card,
  body.gt-body .gt-timeline-grid {
    min-width: 0;
    max-width: 100%;
  }
}