/* =========================================================
   CUSTOM FIXES
   1. Equal spacing above/below "Quality is not a promise..." heading
   2. Footer background so the white logo is clearly visible
   3. Go-to-top button
   ========================================================= */

/* --- Fix 1: bottom padding under the quality tagline to match the top --- */
.security_bottom-heading {
  margin-top: 4rem;
  margin-bottom: 4rem;
}

.form_left .text-size-small {
  color: var(--dark-umber-500);
}
.form_right .heading-style-h6 {
  color: var(--white);
}

/* CTA + footer share one photo. Torn ivory edge sits on top; do not
   CSS-mask the photo (a short mask hides the lower half as black). */
.section_cta.is-mask {
  overflow: visible;
  background-color: transparent;
}
.section_cta .cta_bg.cta-mask {
  -webkit-mask-image: none;
  mask-image: none;
}
.locations_bottom-transition {
  z-index: 12;
}
.section_cta .footer-bg-img,
.footer_wrapper > .footer-bg-img,
.footer_blur {
  display: none !important;
}
.section_cta .section_footer {
  background: transparent;
  border-color: transparent;
}
.numbers_sticky.is-1 .numbers_image-main.numbers-mask:not(.is-global),
.numbers_sticky.is-2 .numbers_image-main.numbers-mask:not(.is-global) {
  -webkit-mask-size: cover;
  mask-size: cover;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}
.numbers_sticky.is-1 .numbers_image-main.numbers-mask:not(.is-global) {
  -webkit-mask-image: url("/assets/images/masks/numbers-base.png");
  mask-image: url("/assets/images/masks/numbers-base.png");
  -webkit-mask-position: 50% 0%;
  mask-position: 50% 0%;
}
.numbers_sticky.is-2 .numbers_image-main.numbers-mask {
  -webkit-mask-image: url("/assets/images/masks/numbers-top.png");
  mask-image: url("/assets/images/masks/numbers-top.png");
  -webkit-mask-position: 50% 0%;
  mask-position: 50% 0%;
}

/* Footer sits inside the CTA (Flyward) over the sunset, not a navy block. */
.footer_wrapper {
  position: relative;
  z-index: 2;
}
.section_footer {
  background: transparent;
  position: relative;
  z-index: 5;
}
.footer_main {
  padding-top: 4.5rem;
}

@media screen and (max-width: 479px) {
  .footer_main {
    padding-top: 5.75rem;
  }
}

/* --- Fix 3: Go-to-top button --- */
.go-to-top {
  position: fixed;
  right: 1.5rem;
  bottom: 1.5rem;
  width: 3rem;
  height: 3rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background-color: #1c3a5e;
  color: #fff;
  border: none;
  cursor: pointer;
  z-index: 999;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
}

.go-to-top.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.go-to-top:hover {
  background-color: #0b2036;
}

.go-to-top svg {
  width: 1.1rem;
  height: 1.1rem;
}

@media screen and (max-width: 479px) {
  .go-to-top {
    right: 1rem;
    bottom: 1rem;
    width: 2.6rem;
    height: 2.6rem;
  }
}

/* =========================================================
   ABOUT PAGE FIXES
   ========================================================= */

/* --- Fix: About page hero heading was touching the fixed navbar/logo ---
   Adding extra breathing room on top of the existing 15vh so the
   heading always clears the fixed nav bar, on any screen size. */
.hero-careers_content.is-about {
  padding-top: calc(15vh + 3rem);
}

/* --- Fix: "commitment" heading/text in the pinned leadership section was
   rendering underneath the fixed navbar, and once pushed down it sat
   directly on top of the busy photo with no separation. Add a dark
   gradient panel behind the text (left side only) so the text reads
   clearly beside the image instead of overlapping into it. --- */
.section_leadership .leadership_content {
  padding-top: 8rem;
  background-image: linear-gradient(
    100deg,
    rgba(11, 20, 15, 0.82) 0%,
    rgba(11, 20, 15, 0.6) 28%,
    rgba(11, 20, 15, 0.15) 48%,
    rgba(11, 20, 15, 0) 60%
  );
}

.section_leadership .leadership_top {
  max-width: 34rem;
}

.section_leadership .leadership_center {
  margin-left: 0;
  max-width: 34rem;
}

/* --- Fix: "VIRAL JAYESH MEHTA" heading + tagline (.leadership_top) was
   visually overlapping the small "Viral Jayesh Mehta / Founder & CEO"
   tag (.leadership_center) directly below it, and the bottom content was
   getting cut off while scrolling through the pinned section.
   Cause: .leadership_top/.leadership_center/.leadership_bottom are given
   fixed height:40%/20%/40% of the pinned 100svh box in fly.css — a budget
   that only balances if nothing else grows. The max-width:24rem set above
   (needed so the heading doesn't run into the fixed navbar) forced the
   heading to wrap onto 3 lines instead of 1-2, making .leadership_top
   taller than its 40% budget. Combined with the extra padding-top added
   above, the three blocks no longer fit in 100svh: the browser compressed
   them into overlapping/clipped positions instead of stacking cleanly.
   Fix: size each block by its actual content (height: auto) instead of a
   fixed percentage, and let the existing "justify-content: space-between"
   on .leadership_content distribute any leftover room between them. This
   can't overlap regardless of how many lines the heading wraps to. --- */
.section_leadership .leadership_top {
  height: 36%;
  flex: none;
}
.section_leadership .leadership_center {
  height: auto;
  flex: none;
}
.section_leadership .leadership_bottom {
  height: 42%;
  flex: none;
}

@media screen and (max-width: 991px) {
  .section_leadership .leadership_top,
  .section_leadership .leadership_center {
    height: auto;
  }
}

@media screen and (max-width: 767px) {
  .section_leadership .leadership_content {
    padding-top: 6rem;
    padding-bottom: 5rem;
    background-image: linear-gradient(
      180deg,
      rgba(11, 20, 15, 0.85) 0%,
      rgba(11, 20, 15, 0.55) 40%,
      rgba(11, 20, 15, 0.15) 60%,
      rgba(11, 20, 15, 0) 75%
    );
  }

  .section_leadership .leadership_top,
  .section_leadership .leadership_center {
    max-width: 100%;
    height: auto;
  }
}

/* --- Add: "Get In Touch" button under the "From Farms To The World"
   paragraph (moved here from the hero banner, which is now video-only).
   .horizontal_heading-right.is-wider has no flex/gap of its own, so give
   the button its own spacing above and a proper inline-block box. --- */
.horizontal_heading-right.is-wider .button {
  display: inline-block;
  margin-top: 1.5rem;
}

/* --- Fix: "Get In Touch" button (added above) was unclickable.
   Cause: .horizontal_bg-img.is-bottom is a purely decorative SVG (a thin
   line near the bottom of this section) but its <img> box is stretched
   to the full height of the section via height:100% + top:auto, and it
   sits at z-index:20 — above the heading/button content at z-index:3.
   Even though almost all of that box is visually transparent, the
   browser still counts it as "on top" for click purposes, so it
   silently absorbed clicks meant for the button beneath it. Since this
   image is decorative only, let clicks pass through it. --- */
.horizontal_bg-img.is-bottom {
  pointer-events: none;
}

/* --- Fix: huge empty gap between the "Our Global Presence" heading and
   the stats grid below it (was margin-top: 10rem in fly.css) --- */
.locations_grid {
  margin-top: 3rem;
}

/* =========================================================
   HOME PAGE FIX
   ========================================================= */

/* --- Fix: "Our Journey from Indian Farms to Global Shores" section was
   invisible below the heading.
   Cause: .journey_map and the 4 .journey_item cards are position:absolute,
   positioned relative to .section_journey (its only positioned ancestor,
   since .journey_path/.container-max have no position set). Absolutely
   positioned elements don't add to their ancestor's height, so
   .section_journey's height collapsed to just the heading's height.
   Combined with "overflow: clip" on .section_journey, the map graphic and
   all 4 journey cards (positioned up to top: 90rem/75rem) were clipped
   away and never visible.
   Fix: give .section_journey enough min-height to contain the lowest
   positioned item at each breakpoint. Keep overflow: clip (Flyward) so
   those cards cannot paint over the numbers sunset. (Mobile, <=767px,
   is unaffected — fly.css already switches .journey_item back to
   position:relative there, so it lays out normally.) --- */
.section_journey {
  min-height: 128rem !important;
}
.section_journey .journey_path {
  overflow: hidden;
}
.section_journey .journey_path svg {
  display: block;
  width: 100%;
  height: 116rem;
  overflow: hidden;
}
.section_numbers .numbers_wrapper {
  position: relative;
}
.journey-draw-end {
  display: block;
  width: 100%;
  height: 1px;
  margin: 0;
  pointer-events: none;
}
@media screen and (max-width: 991px) {
  .section_journey .journey_path svg {
    height: 100rem;
  }
}
@media screen and (max-width: 767px) {
  .section_journey .journey_path {
    display: none;
  }
}

@media screen and (max-width: 991px) {
  .section_journey {
    min-height: 112rem !important;
  }
}

@media screen and (max-width: 767px) {
  .section_journey {
    min-height: 0;
  }
}

/* =========================================================
   HOME PAGE - EXPERIENCE / NUMBERS SECTION
   ========================================================= */

/* Same overlap as Flyward .section_numbers.is-mask, but a different
   class so Webflow IX2 does not put translateY on this section.
   A transform on the section would make position:sticky (sunset hold)
   and any pin stick to the section instead of the viewport. */
.section_numbers.is-overlap {
  margin-top: -13rem;
  padding-top: 13rem;
}
@media screen and (max-width: 991px) {
  .section_numbers.is-overlap {
    margin-top: -8rem;
    padding-top: 8rem;
  }
}

.section_numbers.is-overlap > .padding-global {
  padding-left: 0;
  padding-right: 0;
}

/* Extra runway so sticky sunset holds before the quote slider overlap
   (20rem). 130vh is only ~30vh of hold; 20rem eats most of that. */
.section_numbers .numbers_wrapper {
  height: 165vh;
}

/* Full-bleed product accordion (same gutters as numbers) */
.section_travel > .padding-global {
  padding-left: 0;
  padding-right: 0;
}
.section_travel .container-max {
  max-width: none;
  width: 100%;
}
.section_travel .products .container {
  padding: 0 !important;
  max-width: none;
  width: 100%;
}
.section_travel .product-accordion {
  width: 100%;
  gap: 0;
  contain: layout paint;
}
.section_travel .product-item {
  min-width: 0;
  border-radius: 0;
}

/* Torn paper is a full-width image over the accordion; transparent pixels
   still intercept clicks. Let clicks reach View More. */
.section_travel .travel_bottom-bg {
  pointer-events: none;
}
.section_travel .product-content {
  z-index: 10;
}
.section_travel .product-view-more {
  position: relative;
  z-index: 11;
  pointer-events: auto;
}
.section_travel .product-item.active .product-label {
  pointer-events: none;
}

/* Keep the torn paper overlay, but sit copy above it so it is not clipped. */
@media screen and (min-width: 992px) {
  .section_travel .product-accordion {
    height: 38rem;
  }
  .section_travel .product-content {
    bottom: 6.5rem;
    padding-bottom: 1.5rem;
  }
}

/* =========================================================
   ABOUT PAGE - REDUCE GAP BETWEEN HEADING & PARAGRAPH
   ========================================================= */

.hero-careers_content.is-about {
  justify-content: flex-start !important;
  padding-top: 25vh !important;
}

.hero-careers_content.is-about .heading-style-h1 {
  margin-bottom: 1rem !important;
}

/* =========================================================
   PRODUCT CARD IMPROVEMENTS
   ========================================================= */

/* Make product item fully clickable */
.product-item {
  cursor: pointer;
}

/* Improve text visibility with better overlay gradient */
.product-overlay {
  background: linear-gradient(
    to top, 
    rgba(0, 0, 0, 0.95) 0%,
    rgba(0, 0, 0, 0.85) 15%,
    rgba(0, 0, 0, 0.5) 40%,
    rgba(0, 0, 0, 0.2) 70%,
    transparent 100%
  ) !important;
  opacity: 0.8 !important;
}

/* Enhanced overlay on hover/active for better text contrast */
.product-item.active .product-overlay {
  opacity: 0.75 !important;
}

/* View More text styling */
.product-view-more {
  display: inline-block;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--primary);
  cursor: pointer;
  text-transform: uppercase;
  letter-spacing: 1px;
  padding: 0;
  transition: all 0.3s ease;
  position: relative;
  text-decoration: none;
}

.product-view-more::after {
  content: ' →';
  font-weight: 800;
  margin-left: 0.5rem;
  transition: margin-left 0.3s ease;
}

.product-item.active .product-view-more::after {
  margin-left: 0.8rem;
}

/* Hide the old button styling if it exists */
.product-content .btn-primary {
  display: none !important;
}

/* Improve text contrast in product content */
.product-content p {
  color: rgba(255, 255, 255, 0.9) !important;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}

.product-content h3 {
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.product-tag {
  box-shadow: 0 2px 8px rgba(193, 139, 44, 0.3);
}

/* =========================================================
   About page: brand film section (ambient looping video)
   Sits between the hero and the mission/vision section.
   ========================================================= */
.section_brand-film {
  position: relative;
  width: 100%;
  height: 60vh;
  min-height: 26rem;
  max-height: 40rem;
  overflow: hidden;
  background-color: #0b0a08;
}

.brand-film_video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.brand-film_overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(11, 10, 8, 0.15) 0%,
    rgba(11, 10, 8, 0.35) 55%,
    rgba(11, 10, 8, 0.85) 100%
  );
}

.brand-film_content {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  padding: 0 1.5rem 3rem;
  max-width: 40rem;
  margin: 0 auto;
  text-align: center;
  color: var(--white);
}

.brand-film_content .text-size-caption-large {
  color: var(--white);
  opacity: 0.75;
  margin-bottom: 0.5rem;
}

.brand-film_content h2 {
  color: var(--white);
  margin-bottom: 0.75rem;
}

.brand-film_content p {
  color: var(--white);
  opacity: 0.85;
}

@media screen and (max-width: 991px) {
  .section_brand-film {
    height: 50vh;
    min-height: 22rem;
  }
  .brand-film_content {
    padding: 0 1.25rem 2rem;
  }
}

@media screen and (max-width: 479px) {
  .section_brand-film {
    height: 46vh;
    min-height: 19rem;
  }
}

/* Respect reduced-motion preference: pause the ambient loop and
   show the poster frame as a static image instead. */
@media (prefers-reduced-motion: reduce) {
  .brand-film_video {
    display: none;
  }
  .section_brand-film {
    background-image: url("../images/about-video-poster.jpg");
    background-size: cover;
    background-position: center;
  }
}

/* Mobile improvements */
@media (max-width: 992px) {
  .product-view-more {
    font-size: 0.9rem;
    padding: 0.65rem 0;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    width: fit-content;
    color: var(--primary);
  }

  .product-content .btn-primary {
    display: none !important;
  }

  /* Ensure text is visible on mobile cards */
  .product-overlay {
    background: linear-gradient(
      to top,
      rgba(0, 0, 0, 0.95) 0%,
      rgba(0, 0, 0, 0.85) 20%,
      rgba(0, 0, 0, 0.4) 60%,
      rgba(0, 0, 0, 0) 100%
    ) !important;
    opacity: 1 !important;
  }

  .product-content p {
    color: rgba(255, 255, 255, 0.95) !important;
  }
}