/* SANDBOX COPY (Home Sandbox only, 2026-10-03 B8): tablet/landscape hero centering declarations removed from MODE B block; layout now in Designer is-c combos. Source: asset 6ab4b9b8362cbf5ac704962b (Live Home still uses it). */

/* FX only — layout lives in Webflow Designer. Do not add size/pad/align here.
   Nav-specific FX/layout (hamburger morph, hide-on-scroll, nav link/button
   hover gradient, desktop 2-row collapse, mobile nav bar + panel) moved to
   the site-wide head (#ltf-site-nav-fx) so every page gets it — do not
   re-add nav rules here. */

/* Lock sideways scroll (magnifier print layer + glow FX can extend past viewport) */
html,
body {
  overflow-x: clip !important;
  max-width: 100vw !important;
}

@keyframes ltf-upsell-sweep {
  /*
    Seamless L→R loop: background-size is 300% (one full tile = 3x the
    item's width) and background-position percentages move the image by
    (container - bgSize) * pos/100 = -2x-item-width * pos/100. Animating
    all the way to 150% therefore shifts by exactly one full 3x-width tile
    (-3x-item-width), so the frame at 150% is pixel-identical to the frame
    at 0% — the loop restart is invisible instead of jump-cutting 1/3 short.
  */
  from { background-position: 150% 50%; }
  to { background-position: 0% 50%; }
}

@property --ltf-edge-angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}

@keyframes ltf-edge-spin {
  to { --ltf-edge-angle: 360deg; }
}

/* Page CTAs — 2px white outline; hover swaps to gradient ring (same size) */
.ltf-hero-bottom-bar .ltf-btn-gradient-wrap,
.ltf-section-cta .ltf-btn-gradient-wrap,
.ltf-funnel-cta .ltf-btn-gradient-wrap {
  padding: 2px !important;
  border-radius: 12px;
  background: #FFFFFF !important;
  box-shadow: none !important;
}
.ltf-hero-bottom-bar .ltf-btn-gradient-wrap:hover,
.ltf-hero-bottom-bar .ltf-btn-gradient-wrap:focus-within,
.ltf-hero-bottom-bar .ltf-btn-gradient-wrap.ltf-btn-gradient-active,
.ltf-section-cta .ltf-btn-gradient-wrap:hover,
.ltf-section-cta .ltf-btn-gradient-wrap:focus-within,
.ltf-section-cta .ltf-btn-gradient-wrap.ltf-btn-gradient-active,
.ltf-funnel-cta .ltf-btn-gradient-wrap:hover,
.ltf-funnel-cta .ltf-btn-gradient-wrap:focus-within,
.ltf-funnel-cta .ltf-btn-gradient-wrap.ltf-btn-gradient-active {
  padding: 2px !important;
  background: transparent !important;
  box-shadow: none !important;
}
.ltf-hero-bottom-bar .ltf-btn-primary,
.ltf-section-cta .ltf-btn-primary,
.ltf-funnel-cta .ltf-btn-primary {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  border: none !important;
  border-radius: 10px !important;
  background: #00001C !important;
  color: #E5E5E5 !important;
  font-family: acumin-pro-condensed, sans-serif !important;
  font-size: 18px !important;
  font-weight: 500 !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  text-align: center !important;
  white-space: nowrap !important;
}
/* Funnel link still has <strong> in Designer — normalize to match other .ltf-btn-primary */
.ltf-hero-bottom-bar .ltf-btn-primary strong,
.ltf-section-cta .ltf-btn-primary strong,
.ltf-funnel-cta .ltf-btn-primary strong {
  font-weight: 500 !important;
  font-family: inherit !important;
  letter-spacing: inherit !important;
}
.ltf-hero-bottom-bar .ltf-btn-gradient-wrap,
.ltf-section-cta .ltf-btn-gradient-wrap,
.ltf-funnel-cta .ltf-btn-gradient-wrap {
  display: inline-flex !important;
  justify-content: center !important;
  align-items: stretch !important;
  box-sizing: border-box !important;
}

/* ── Crew + Specs glow ─────────────────────────────────────────────── */
.ltf-card,
.ltf-spec-card {
  position: relative;
  overflow: visible !important;
  isolation: isolate;
  /* Hold border transparent until the ring finishes fading (avoids white flash on hover out). */
  transition: border-color 0.15s ease 0.35s;
}
.ltf-card::before,
.ltf-spec-card::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
  background:
    radial-gradient(ellipse at 22% 18%, rgba(112, 64, 192, 0.72) 0%, transparent 52%),
    radial-gradient(ellipse at 82% 28%, rgba(42, 170, 184, 0.62) 0%, transparent 50%),
    radial-gradient(ellipse at 48% 92%, rgba(11, 128, 80, 0.58) 0%, transparent 55%),
    radial-gradient(ellipse at 70% 70%, rgba(31, 119, 129, 0.4) 0%, transparent 48%);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.45s ease;
}
.ltf-card:hover::before,
.ltf-card.is-glow::before,
.ltf-spec-card:hover::before,
.ltf-spec-card.is-glow::before {
  opacity: 0.84;
}
.ltf-card > *,
.ltf-spec-card > * {
  position: relative;
  z-index: 1;
}
.ltf-card::after,
.ltf-spec-card::after {
  content: '';
  position: absolute;
  /* Cards have a 3px border; -3px puts this pseudo on the border box edge
     (absolute children sit from the padding edge, so 0/inherit sits inward).
     The old -6px/18px version floated the ring outside the card, exposing
     page background in the gap. border-radius: inherit matches 12px exactly. */
  inset: -3px;
  z-index: 2;
  border-radius: inherit;
  /* 3px ring thickness = Designer border width — flush replacement. */
  padding: 3px;
  background: conic-gradient(
    from var(--ltf-edge-angle),
    #4D259D, #2AAAB8, #1F7781, #0B8050, #7040C0, #4D259D
  );
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s ease;
}
.ltf-card:hover,
.ltf-card.is-glow,
.ltf-spec-card:hover,
.ltf-spec-card.is-glow {
  border-color: transparent !important;
  transition: border-color 0s;
}
.ltf-card:hover::after,
.ltf-card.is-glow::after,
.ltf-spec-card:hover::after,
.ltf-spec-card.is-glow::after {
  opacity: 1;
  animation: ltf-edge-spin 4s linear infinite;
}

/* ── Beyond the Gear sweep ──────────────────────────────────────────── */
.ltf-upsell-list {
  overflow: hidden;
  border-radius: 12px;
  isolation: isolate;
}
.ltf-upsell-list-item {
  position: relative;
  z-index: 0;
  isolation: isolate;
  overflow: hidden;
  list-style: none !important;
  /* Solid fill so sweep band sits above this, under text */
  background-color: #00001C;
}
.ltf-upsell-list-item::marker {
  content: none !important;
  font-size: 0 !important;
}
.ltf-upsell-list-item:first-child {
  border-top-left-radius: 12px;
  border-top-right-radius: 12px;
}
.ltf-upsell-list-item:last-child {
  border-bottom-left-radius: 12px;
  border-bottom-right-radius: 12px;
  border-bottom-width: 0 !important;
}
.ltf-upsell-list-item > * {
  position: relative;
  z-index: 2;
}
/* Square bullet = painted box (not ▪ glyph — missing in acumin on iOS → black tofu) */
.ltf-upsell-list-item::before {
  content: '' !important;
  display: inline-block !important;
  width: 9px !important;
  height: 9px !important;
  flex-shrink: 0 !important;
  margin-right: 14px !important;
  align-self: center !important;
  position: relative !important;
  z-index: 2 !important;
  background-color: #0B8050 !important;
  color: transparent !important;
  -webkit-text-fill-color: transparent !important;
  font-size: 0 !important;
  line-height: 0 !important;
  transition: background-color 0.35s ease;
}
/*
  Sweep band UNDER the text. The item's actual copy is a raw text node
  (Webflow renders `.ltf-upsell-list-item` as a `<p>` with no wrapping
  span), and per the CSS2.1 stacking-context paint order, in-flow inline
  text (step 5) already paints ABOVE any descendant with z-index:0 or
  higher (step 6/7) but BELOW negative-z-index descendants (step 2) — so
  a positive z-index here was actually putting the gradient IN FRONT of
  the copy. z-index:-1 fixes that while `isolation: isolate` above keeps
  it scoped to this item's own stacking context (so it still paints above
  this item's own #00001C fill from step 1, not some page-level ancestor).
*/
.ltf-upsell-list-item::after {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: -1 !important;
  border-radius: inherit !important;
  background-image: linear-gradient(
    90deg,
    rgba(112, 64, 192, 0) 0%,
    rgba(11, 128, 80, 0.55) 10%,
    rgba(42, 170, 184, 0.75) 22%,
    rgba(77, 37, 157, 0.78) 36%,
    rgba(112, 64, 192, 0.85) 50%,
    rgba(77, 37, 157, 0.78) 64%,
    rgba(42, 170, 184, 0.75) 78%,
    rgba(11, 128, 80, 0.55) 90%,
    rgba(112, 64, 192, 0) 100%
  ) !important;
  background-size: 300% 100% !important;
  /*
    NOT !important: CSS-Cascade ranks keyframe animations BELOW author
    !important declarations, so an !important here would permanently pin
    the value and the `ltf-upsell-sweep` animation below could visibly
    "run" (Web Animations API reports it active) while never actually
    moving anything on screen. This plain value only sets the idle
    (opacity:0, pre-hover) position; the animation freely overrides it.
  */
  background-position: 0% 50%;
  background-repeat: repeat-x !important;
  opacity: 0 !important;
  pointer-events: none !important;
  transition: opacity 0.3s ease;
}
.ltf-upsell-list-item:hover::after,
.ltf-upsell-list-item.is-sweep::after,
.ltf-upsell-list-item:active::after {
  opacity: 1 !important;
  animation: ltf-upsell-sweep 6s linear infinite !important;
}
.ltf-upsell-list-item:hover::before,
.ltf-upsell-list-item.is-sweep::before,
.ltf-upsell-list-item:active::before {
  background-color: #7040C0 !important;
}

/* ── Trenches loupe — host never clips; radius lives on fabric image only ─ */
.ltf-section.is-trenches,
.ltf-section.is-trenches .ltf-section-inner,
.ltf-section.is-trenches .ltf-split-2,
.ltf-authority-image-box,
.ltf-magnifier {
  position: relative;
  overflow: visible !important;
}
.ltf-authority-image-box {
  border-radius: 0 !important;
  max-width: 515px; /* desktop fabric −1% */
  box-sizing: border-box;
}
@media (min-width: 992px) {
  .ltf-authority-image-box {
    padding-top: 50px;
    padding-bottom: 50px;
  }
}
.ltf-authority-image-box > img,
.ltf-magnifier-base,
.ltf-trench-image {
  border-radius: 24px;
}
.ltf-magnifier:not(.is-lit) .ltf-magnifier-lens {
  opacity: 0;
}
.ltf-magnifier-lens {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 5;
  pointer-events: none;
  filter: drop-shadow(0 10px 18px rgba(0, 0, 0, 0.45));
}
.ltf-magnifier-hole {
  position: absolute;
  overflow: hidden;
  border-radius: 50%;
  isolation: isolate;
  -webkit-mask-image: radial-gradient(circle, #000 68%, transparent 78%);
  mask-image: radial-gradient(circle, #000 68%, transparent 78%);
}
.ltf-magnifier-print {
  position: absolute;
  top: 0;
  left: 0;
  max-width: none;
  object-fit: cover;
  pointer-events: none;
}
.ltf-magnifier-glass {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
  z-index: 3;
}

/* ── Launch Your Fleet vignette glow ────────────────────────────────── */
.ltf-funnel-cta {
  position: relative;
  isolation: isolate;
  box-sizing: border-box;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.ltf-funnel-cta > .ltf-site-cage.ltf-cage,
.ltf-funnel-cta > .ltf-cage {
  box-sizing: border-box;
  width: 100%;
  max-width: 1400px;
  padding-left: clamp(2rem, 4vw, 2.5rem);
  padding-right: clamp(2rem, 4vw, 2.5rem);
}
.ltf-funnel-cta::before,
.ltf-funnel-cta-glow {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 0;
  width: 900px;
  height: 520px;
  max-width: 140%;
  transform: translate(-50%, -50%);
  background:
    radial-gradient(ellipse at 28% 32%, rgba(42, 170, 184, 0.62) 0%, transparent 52%),
    radial-gradient(ellipse at 72% 68%, rgba(112, 64, 192, 0.55) 0%, transparent 55%),
    radial-gradient(ellipse at center, rgba(11, 128, 80, 0.28) 0%, transparent 72%);
  filter: blur(100px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.55s ease;
}
.ltf-funnel-cta::before {
  content: '';
}
.ltf-funnel-cta:hover::before,
.ltf-funnel-cta.is-glow::before,
.ltf-funnel-cta:hover .ltf-funnel-cta-glow,
.ltf-funnel-cta.is-glow .ltf-funnel-cta-glow {
  opacity: 0.32;
}
.ltf-funnel-cta-inner {
  position: relative;
  z-index: 2;
  transition: border-color 0.45s ease;
}
.ltf-funnel-cta:hover .ltf-funnel-cta-inner,
.ltf-funnel-cta.is-glow .ltf-funnel-cta-inner {
  border-color: rgba(42, 170, 184, 0.55);
}


/* Desktop slam stack (≥1281) — layout via specs-vault-slam.js inline styles, not head */

/* Narrow desktop (992–1280) — Trenches grows with content; Specs layout = Designer only */
@media (min-width: 992px) and (max-width: 1280px) {
  .ltf-section.is-trenches {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    padding-top: 96px !important;
    padding-bottom: 96px !important;
    overflow: visible !important;
  }
  .ltf-section.is-trenches .ltf-section-inner.ltf-cage {
    padding-left: clamp(2rem, 4vw, 5rem) !important;
    padding-right: clamp(2rem, 4vw, 5rem) !important;
    overflow: visible !important;
    box-sizing: border-box !important;
    max-width: 1400px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
  .ltf-section.is-trenches .ltf-split.ltf-split-2 {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: flex-start !important;
    gap: clamp(20px, 3vw, 40px) !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow: visible !important;
    box-sizing: border-box !important;
  }
  .ltf-body-text.is-trenches-body {
    font-size: clamp(16px, 1.5vw, 18px) !important;
    line-height: 1.4 !important;
    padding-right: 0 !important;
    max-width: 100% !important;
  }
  .ltf-stack.ltf-split-copy.is-trenches-copy {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    width: auto !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    overflow: visible !important;
  }
  .ltf-section.is-trenches .ltf-authority-image-box.ltf-split-asset {
    flex: 0 0 auto !important;
    min-width: min(280px, 36vw) !important;
    max-width: min(380px, 42vw) !important;
    width: auto !important;
  }
  .ltf-authority-image-box > .ltf-magnifier-base,
  .ltf-authority-image-box > img.ltf-magnifier-base {
    display: block !important;
    width: 100% !important;
    height: auto !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ltf-card:hover::after,
  .ltf-card.is-glow::after,
  .ltf-spec-card:hover::after,
  .ltf-spec-card.is-glow::after,
  .ltf-upsell-list-item:hover::after,
  .ltf-upsell-list-item.is-sweep::after {
    animation: none !important;
  }
}

/* Mobile — keep orange figure inside frame (no sideways scroll) */
@media (max-width: 991px) {
  /*
    Hero layout: Webflow Designer only (.ltf-hero, .hero-canvas-wrapper,
    .ltf-hero-headline, .ltf-hero-bottom-bar, .ltf-hero-figure, combo classes).
    Do not set position, padding, size, or alignment on hero elements here.
  */

  /* Trenches fabric width only — vertical pad lives in Designer (0 on mobile) */
  .ltf-authority-image-box {
    width: min(73.1vw, 306px) !important;
    max-width: calc(100vw - 80px) !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}

/* Specs & Standards — tablet stack (768–991); mobile stack (≤767); slam fan ≥992 */
@media (max-width: 991px) and (min-width: 768px) {
  .ltf-specs-vault {
    height: auto !important;
    min-height: 0 !important;
  }
  .ltf-specs-vault-sticky {
    position: relative !important;
    height: auto !important;
    min-height: 0 !important;
    top: auto !important;
    align-items: stretch !important;
  }
  .ltf-vault-cage,
  .ltf-vault-cage.ltf-cage,
  .ltf-vault-cage.ltf-split-2 {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    max-width: 100% !important;
    gap: 24px !important;
    align-items: stretch !important;
  }
  .ltf-specs-vault-cards,
  .ltf-specs-vault-cards.ltf-split-asset {
    display: flex !important;
    flex-direction: column !important;
    gap: 32px !important;
    width: 100% !important;
    max-width: 100% !important;
    min-height: 0 !important;
    height: auto !important;
    padding: 0 !important;
    padding-bottom: 0 !important;
    overflow: visible !important;
    flex: 1 1 auto !important;
  }
  .ltf-spec-card,
  .ltf-spec-card.ltf-spec-card-01,
  .ltf-spec-card.ltf-spec-card-02,
  .ltf-spec-card.ltf-spec-card-03,
  .ltf-spec-card.ltf-spec-card-04 {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    z-index: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 24px 16px !important;
    overflow: visible !important;
    transform: none !important;
    aspect-ratio: auto !important;
  }
  .ltf-cards-grid .ltf-card {
    aspect-ratio: auto !important;
    max-height: none !important;
    height: auto !important;
    min-height: 0 !important;
    width: 100% !important;
    justify-content: flex-start !important;
  }
}

/*
  Phone landscape (short viewport): drop dead air under Specs header + card copy.
  Portrait and desktop resize do not hit this band.
*/
@media (max-width: 991px) and (orientation: landscape) and (max-height: 520px) {
  .ltf-specs-vault-sticky {
    padding-top: 32px !important;
    padding-bottom: 20px !important;
  }
  .ltf-specs-vault-header,
  .ltf-specs-vault-header.ltf-split-copy {
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
  }
  .ltf-specs-vault-header .ltf-body-text-navy {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
  }
  .ltf-vault-cage.ltf-split-2 {
    gap: 16px !important;
  }
  .ltf-specs-vault-cards,
  .ltf-specs-vault-cards.ltf-split-asset {
    gap: 20px !important;
  }
  .ltf-spec-card,
  .ltf-spec-card.ltf-spec-card-01,
  .ltf-spec-card.ltf-spec-card-02,
  .ltf-spec-card.ltf-spec-card-03,
  .ltf-spec-card.ltf-spec-card-04 {
    min-height: 0 !important;
    height: auto !important;
    padding-top: 16px !important;
    padding-bottom: 16px !important;
  }
  .ltf-spec-card .ltf-body-text {
    margin-bottom: 0 !important;
  }
}

/* Specs & Standards — mobile stack (≤767) */
@media (max-width: 767px) {
  .ltf-specs-vault {
    height: auto !important;
    min-height: 0 !important;
  }
  .ltf-specs-vault-sticky {
    position: relative !important;
    height: auto !important;
    min-height: 0 !important;
    top: auto !important;
    align-items: stretch !important;
  }
  .ltf-vault-cage,
  .ltf-vault-cage.ltf-cage,
  .ltf-vault-cage.ltf-split-2 {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    max-width: 100% !important;
    padding-top: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    gap: 24px !important;
    align-items: stretch !important;
  }
  .ltf-specs-vault-header,
  .ltf-specs-vault-header.ltf-split-copy {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    padding-bottom: 5px !important;
    align-items: flex-start !important;
    align-self: stretch !important;
    text-align: left !important;
  }
  .ltf-specs-vault-header .ltf-section-header-navy,
  .ltf-specs-vault-header .ltf-subheading-navy,
  .ltf-specs-vault-header .ltf-body-text-navy {
    width: 100% !important;
    max-width: 100% !important;
    text-align: left !important;
  }
  .ltf-specs-vault-header .ltf-subheading-navy {
    white-space: nowrap !important;
  }
  .ltf-specs-vault-cards,
  .ltf-specs-vault-cards.ltf-split-asset {
    display: flex !important;
    flex-direction: column !important;
    gap: 40px !important;
    width: 100% !important;
    max-width: 100% !important;
    min-height: 0 !important;
    height: auto !important;
    padding: 0 !important;
    overflow: visible !important;
  }
  .ltf-spec-card,
  .ltf-spec-card.ltf-spec-card-01,
  .ltf-spec-card.ltf-spec-card-02,
  .ltf-spec-card.ltf-spec-card-03,
  .ltf-spec-card.ltf-spec-card-04 {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    z-index: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 24px 16px !important;
    border-style: solid !important;
    border-width: 3px !important;
    border-color: #e5e5e5 !important;
    border-radius: 12px !important;
    background-color: #00001C !important;
    overflow: visible !important;
    transform: none !important;
  }
  .ltf-spec-card .ltf-card-title {
    font-size: clamp(1.62rem, 2.4vw, 1.98rem) !important;
  }
  .ltf-spec-card .ltf-body-text {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    text-align: left !important;
    font-size: 18px !important;
    line-height: 1.35 !important;
  }
}

@media (max-width: 991px) {
  /*
    Beyond the Gear — list sweep FX only; section padding lives in Designer.
  */
  .ltf-upsell-list-item {
    display: flex !important;
    align-items: center !important;
    font-size: 19.2px !important; /* 24px −20% — fit 2 lines on phone */
    line-height: 1.22 !important;
    padding-top: 18px !important;
    padding-bottom: 18px !important;
    padding-left: 18px !important;
    padding-right: 18px !important;
  }
  .ltf-upsell-list-item::before {
    width: 10px !important;
    height: 10px !important;
    margin-right: 12px !important;
    background-color: #0B8050 !important;
  }
  .ltf-upsell-list-item:hover::before,
  .ltf-upsell-list-item.is-sweep::before,
  .ltf-upsell-list-item:active::before {
    background-color: #7040C0 !important;
  }
}

/* Tablet: Designer shows .is-beyond-desktop only — do not force mobile CTA */
@media (max-width: 991px) and (min-width: 768px) {
  .ltf-section-cta.is-beyond-mobile {
    display: none !important;
  }
}

/* Phone: one CTA under the list */
@media (max-width: 767px) {
  .ltf-upsell .ltf-section-cta:not(.is-beyond-mobile) {
    display: none !important;
  }
  .ltf-section-cta.is-beyond-mobile {
    display: flex !important;
    width: 100% !important;
    margin-top: 40px !important;
    margin-bottom: 20px !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
  }
}

@media (min-width: 992px) {
  .ltf-section-cta.is-beyond-mobile {
    display: none !important;
  }
}


@media (max-width: 991px) {
  .ltf-hero {
    height: calc(100svh + 52px) !important;
    min-height: calc(100svh + 52px) !important;
    max-height: none !important;
    /* overflow-x:clip + overflow-y:visible computes to clip both axes — use visible */
    overflow: visible !important;
  }

  .ltf-hero > .ltf-site-cage.ltf-cage {
    height: 100% !important;
    min-height: 100% !important;
    overflow: visible !important;
  }

  .ltf-hero .hero-canvas-wrapper,
  .ltf-hero #canvas3d {
    overflow: hidden !important;
  }

  /* Webflow sets max-height:78% + hero overflow:hidden — clips shirt at fold */
  .ltf-hero-figure {
    max-height: none !important;
  }

  /*
    Hero CTA position/size/spacing: Webflow Designer only (.is-hero-cta-wrap).
    Head must not override absolute inset or margins — that caused copy overflow
    when combined with width:100% overrides below.
  */
  .ltf-hero-bottom-bar .ltf-btn-gradient-wrap.is-hero-cta-wrap {
    pointer-events: auto !important;
  }

  .ltf-funnel-cta {
    box-sizing: border-box !important;
    height: auto !important;
    min-height: 100svh !important;
    overflow: visible !important;
  }

  .ltf-funnel-cta > .ltf-site-cage.ltf-cage,
  .ltf-funnel-cta > .ltf-cage {
    padding-left: clamp(2rem, 4vw, 2.5rem) !important;
    padding-right: clamp(2rem, 4vw, 2.5rem) !important;
    box-sizing: border-box !important;
  }

  .ltf-funnel-cta-inner {
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Tablet + mobile section/funnel CTAs — 375px centered; hero wrap = Designer (left) */
  .ltf-section-cta {
    display: flex !important;
    justify-content: center !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }
  .ltf-section-cta .ltf-btn-gradient-wrap,
  .ltf-funnel-cta .ltf-btn-gradient-wrap {
    width: min(375px, calc(100vw - 48px)) !important;
    max-width: 375px !important;
    min-width: 0 !important;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box !important;
    display: inline-flex !important;
    justify-content: center !important;
    align-items: stretch !important;
  }
  .ltf-hero-bottom-bar .ltf-btn-primary,
  .ltf-section-cta .ltf-btn-primary,
  .ltf-funnel-cta .ltf-btn-primary {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    font-family: acumin-pro-condensed, sans-serif !important;
    font-size: 18px !important;
    font-weight: 500 !important;
    letter-spacing: 0.18em !important;
    text-transform: uppercase !important;
    text-align: center !important;
    white-space: nowrap !important;
  }

  .ltf-funnel-cta {
    padding-left: clamp(2rem, 4vw, 2.5rem) !important;
    padding-right: clamp(2rem, 4vw, 2.5rem) !important;
  }
}

/*
  Mobile hero layout (H1, copy, CTA, shirt): Webflow Designer @ small.
  Primary-bar logomark size is locked in Designer — override here only (portrait ≤767).
*/
@media (max-width: 767px) {
  html,
  body {
    overflow-x: clip !important;
    max-width: 100vw !important;
  }

  .ltf-hero,
  .ltf-hero > .ltf-site-cage.ltf-cage {
    overflow: visible !important;
    overflow-x: visible !important;
    overflow-y: visible !important;
  }

  .ltf-section-cta .ltf-btn-gradient-wrap,
  .ltf-funnel-cta .ltf-btn-gradient-wrap {
    width: min(265px, calc(100vw - 48px)) !important;
    max-width: 265px !important;
  }
}

@media (max-width: 767px) and (orientation: portrait) {
  .ltf-hero .is-hero-logo-mobile:not(.is-hero-logo-inside) {
    height: 120px !important;
    max-height: 120px !important;
    max-width: min(159px, 31.74vw) !important;
    width: auto !important;
  }
}


/*
  Hero MODE B — tablet 768–991 (portrait + landscape) + phone landscape only.
  Primary bar stays frozen for desktop ≥992 and phone portrait ≤767.
  Layout on inside duplicates: Designer; this block = show/hide + inside grid shell only.
*/
.ltf-stack.ltf-split-copy.is-hero-copy-inside-breakpoints,
.ltf-body-text.is-hero-body-inside,
.ltf-btn-gradient-wrap.is-hero-cta-wrap-inside,
.is-hero-logo-mobile.is-hero-logo-inside,
img.ltf-hero-figure.is-hero-figure-inside,
.is-hero-copy-spacer {
  display: none !important;
}

@media (min-width: 768px) and (max-width: 991px),
       (max-width: 767px) and (orientation: landscape) {
  /*
    Keep hero section tall (absolute H1/bar/canvas do not expand flow).
    Canvas alone uses aspect-ratio — not 100vh — so boulder scale stays width-driven.
  */
  .ltf-hero {
    position: relative !important;
    z-index: 2 !important;
    isolation: isolate !important;
    height: calc(100svh + 52px) !important;
    min-height: calc(100svh + 52px) !important;
    max-height: none !important;
    overflow: visible !important;
  }

  .ltf-hero > .ltf-site-cage.ltf-cage {
    position: relative !important;
    height: 100% !important;
    min-height: 100% !important;
    max-height: none !important;
    overflow: visible !important;
  }

  .ltf-hero-bottom-bar .ltf-stack.ltf-split-copy.is-hero-copy:not(.is-hero-copy-inside-breakpoints) {
    display: none !important;
  }

  .ltf-hero-bottom-bar .ltf-btn-gradient-wrap.is-hero-cta-wrap:not(.is-hero-cta-wrap-inside),
  .ltf-hero .is-hero-logo-mobile:not(.is-hero-logo-inside) {
    display: none !important;
  }

  .ltf-stack.ltf-split-copy.is-hero-copy-inside-breakpoints {
    display: grid !important;
  }

  .ltf-body-text.is-hero-body-inside,
  .is-hero-logo-mobile.is-hero-logo-inside,
  .ltf-btn-gradient-wrap.is-hero-cta-wrap-inside,
  img.ltf-hero-figure.is-hero-figure-inside {
    display: block !important;
  }

  .ltf-btn-gradient-wrap.is-hero-cta-wrap-inside {
    display: inline-flex !important;
  }

  .ltf-stack.ltf-split-copy.is-hero-copy-inside-breakpoints {
    min-width: 0 !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) !important;
    grid-template-rows: auto auto !important;
    justify-items: stretch !important;
    align-items: center !important;
    gap: 0 !important;
  }

  .is-hero-logo-mobile.is-hero-logo-inside {
    position: absolute !important;
    top: var(--ltf-middle-logo-top, auto) !important;
    left: var(--ltf-middle-logo-left, 24px) !important;
    grid-column: 1 / 2 !important;
    grid-row: 1 !important;
    justify-self: start !important;
    align-self: start !important;
    margin-top: 0 !important;
    height: var(--ltf-middle-logo-height, 81px) !important;
    max-height: var(--ltf-middle-logo-height, 81px) !important;
    width: auto !important;
    z-index: 5 !important;
    pointer-events: none !important;
  }

  .ltf-hero .hero-canvas-wrapper,
  .ltf-hero #canvas3d {
    overflow: visible !important;
  }

  .ltf-hero .hero-canvas-wrapper {
    top: 50px !important;
    left: 0 !important;
    right: 0 !important;
    width: 100vw !important;
    max-width: 100% !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    aspect-ratio: 100 / 72 !important;
    transform: none !important;
    z-index: 0 !important;
  }

  .ltf-hero #canvas3d {
    width: 100% !important;
    height: 100% !important;
    display: block !important;
    max-width: 100% !important;
    min-height: 280px !important;
  }

  .ltf-hero-headline {
    position: absolute !important;
    top: 121px !important;
    z-index: 4 !important;
    box-sizing: border-box !important;
    transform: none !important;
  }

  .ltf-hero-bottom-bar {
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 24px !important;
    padding-right: 24px !important;
    top: var(--ltf-middle-bar-top, 213px) !important;
    bottom: auto !important;
    box-sizing: border-box !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 0 !important;
    position: absolute !important;
  }

  .ltf-body-text.is-hero-body-inside {
    grid-column: 1 / -1 !important;
    grid-row: 1 !important;
    width: 100% !important;
    max-width: none !important;
    margin-top: 0 !important;
    font-size: 18px !important;
    line-height: 1.32 !important;
  }

  .ltf-btn-gradient-wrap.is-hero-cta-wrap-inside {
    grid-column: 1 / 4 !important;
    grid-row: 2 !important;
    margin-top: 50px !important;
    position: relative !important;
    transform: none !important;
    width: min(375px, calc(100vw - 48px)) !important;
    max-width: 375px !important;
  }

  .ltf-hero img.ltf-hero-figure,
  .ltf-hero .ltf-hero-figure {
    position: absolute !important;
    right: 0 !important;
    bottom: auto !important;
    left: auto !important;
    top: var(--ltf-middle-shirt-top, auto) !important;
    width: clamp(135px, 26.25vw, 225px) !important;
    max-height: none !important;
    height: auto !important;
    object-fit: contain !important;
    object-position: bottom right !important;
    z-index: 1 !important;
  }
}

@media (min-width: 768px) and (max-width: 991px) and (orientation: landscape) {
  .ltf-hero .ltf-hero-headline .ltf-section-header,
  .ltf-hero .ltf-hero-headline h1.ltf-main-header {
    font-size: clamp(3.5rem, calc(7vw + 12pt), calc(5rem + 12pt)) !important;
  }
}

@media (max-width: 767px) and (orientation: landscape) {
  .ltf-hero img.ltf-hero-figure,
  .ltf-hero .ltf-hero-figure {
    width: clamp(120px, 22.5vw, 165px) !important;
    right: -8px !important;
    bottom: auto !important;
  }

  .ltf-btn-gradient-wrap.is-hero-cta-wrap-inside {
    width: min(265px, calc(100vw - 48px)) !important;
    max-width: 265px !important;
  }
}

@media (orientation: landscape) and (max-height: 520px) and (max-width: 991px) {
  .ltf-hero,
  .ltf-hero > .ltf-site-cage.ltf-cage {
    overflow: visible !important;
    min-height: calc(100svh + 52px) !important;
    padding-bottom: 50px !important;
  }

  .ltf-body-text.is-hero-body-inside {
    max-width: none !important;
    font-size: 18px !important;
  }
}

/* ── Why Work With Us — scoped FX (no global .ltf-card bleed) ─────── */
.is-why-partner .ltf-section-head.is-why-head-left {
  text-align: left;
  align-items: flex-start;
}

.is-why-partner .card-them {
  opacity: 0.48;
  filter: grayscale(100%);
  transition: opacity 0.3s ease, border-color 0.3s ease;
}

.is-why-partner .card-them:hover {
  opacity: 0.62;
}

.is-why-partner .card-us-col {
  opacity: 1;
  filter: none;
  border-color: rgba(0, 242, 254, 0.55) !important;
  box-shadow:
    0 10px 32px -12px rgba(0, 242, 254, 0.35),
    0 0 22px rgba(138, 43, 226, 0.18);
}

@media (min-width: 768px) {
  .is-why-partner .is-compare-lead,
  .is-why-partner .comparison-item .item-desc {
    opacity: 0;
    max-height: 0;
    margin-top: 0;
    padding-top: 0;
    transform: translateY(-8px);
    overflow: hidden;
    transition:
      opacity 0.28s ease,
      transform 0.28s ease,
      max-height 0.32s ease,
      margin-top 0.28s ease;
  }

  .is-why-partner .card-them:hover .is-compare-lead,
  .is-why-partner .card-us-col:hover .is-compare-lead,
  .is-why-partner .comparison-item:hover .item-desc {
    opacity: 1;
    max-height: 120px;
    margin-top: 8px;
    transform: translateY(0);
  }

  .is-why-partner .card-us-col .item-title {
    color: rgba(0, 242, 254, 0.92);
  }
}

@media (max-width: 767px) {
  .is-why-partner .ltf-compare-grid .card-us-col {
    order: -1;
  }

  .is-why-partner .ltf-compare-grid .card-them {
    order: 1;
  }

  .is-why-partner .is-compare-lead,
  .is-why-partner .comparison-item .item-desc {
    opacity: 1 !important;
    max-height: none !important;
    margin-top: 8px !important;
    transform: none !important;
  }
}