/* Fuel Card (page 134) full-bleed hero. Page 134 only. resources.css still loads for the rest of the page. */
.page-id-134 .mdbx .hero{
  position:relative;
  overflow:hidden;
  background-color:#132A54!important
}
/* Same navy left fade as the approved board heroes */
.page-id-134 .mdbx .hero::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  background:linear-gradient(90deg,
    #132A54 0%,
    rgba(19,42,84,.97) 28%,
    rgba(19,42,84,.90) 40%,
    rgba(19,42,84,.55) 50%,
    rgba(19,42,84,.18) 58%,
    rgba(19,42,84,.06) 68%,
    rgba(19,42,84,.04) 100%)
}

/* Physical-card restyle for the CSS .fcard graphic (desktop + mobile). */
.page-id-134 .mdbx .hero .fcardwrap{
  position:relative;
  z-index:8;
  isolation:isolate;
  opacity:1;
  filter:none;
  mix-blend-mode:normal
}
.page-id-134 .mdbx .hero .fcard{
  position:relative;
  width:100%;
  aspect-ratio:1.5858;
  margin:0;
  padding:0!important;
  box-sizing:border-box;
  border-radius:18px;
  overflow:hidden;
  color:#fff;
  font-family:Poppins,sans-serif;
  background-color:#111!important;
  background-image:url(../../img/mdb-fuelcard-brush.webp)!important;
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  box-shadow:0 24px 50px rgba(16,24,40,.32);
  transform:none!important;
  container-type:inline-size;
  container-name:fcard
}
.page-id-134 .mdbx .hero .fcard::before{
  content:none!important;
  display:none!important
}
/* Collapse Elementor widget wrappers so the card height comes from aspect-ratio alone. */
.page-id-134 .mdbx .hero .fcard > .elementor-element{
  position:absolute;
  left:0;
  top:0;
  width:100%;
  height:0;
  margin:0!important;
  padding:0!important;
  overflow:visible
}
.page-id-134 .mdbx .hero .fcard .brand,
.page-id-134 .mdbx .hero .fcard .fc-sub,
.page-id-134 .mdbx .hero .fcard .num,
.page-id-134 .mdbx .hero .fcard .foot,
.page-id-134 .mdbx .hero .fcard .chip{
  margin:0!important;
  padding:0!important;
  color:transparent;
  font-size:0!important;
  line-height:0!important;
  letter-spacing:0;
  background:none;
  border:0;
  box-shadow:none
}
/* Hide fake number / member / discounts / "FUEL CARD" text (keep nodes for CSS hooks). */
.page-id-134 .mdbx .hero .fcard .foot,
.page-id-134 .mdbx .hero .fcard .num{
  display:block;
  width:0;
  height:0;
  overflow:hidden
}
/* MDB wordmark (site header logo, recolored white) + tagline */
.page-id-134 .mdbx .hero .fcard .brand{
  position:absolute;
  top:10.5%;
  left:29%;
  width:40%;
  height:auto;
  color:transparent!important;
  z-index:1
}
.page-id-134 .mdbx .hero .fcard .brand b{
  color:transparent!important;
  font-weight:inherit
}
.page-id-134 .mdbx .hero .fcard .brand::before{
  content:"";
  display:block;
  width:100%;
  aspect-ratio:322.9/39.625;
  background:url(../../img/headerlogo.svg) left center / 100% 100% no-repeat;
  filter:brightness(0) invert(1)
}
/* Tagline "Connecting Movers Nationwide" is already in headerlogo.svg. */
/* Thin vertical divider */
.page-id-134 .mdbx .hero .fcard .num{
  position:absolute;
  top:11%;
  left:71.2%;
  width:0!important;
  height:14.5%;
  overflow:visible!important;
  border-left:1.25px solid #fff;
  z-index:1
}
/* "Powered by" over the AtoB logo */
.page-id-134 .mdbx .hero .fcard .fc-sub{
  position:absolute;
  top:10%;
  left:74.5%;
  right:5%;
  width:auto;
  height:auto;
  color:#fff!important;
  z-index:1;
  font-size:0!important;
  text-align:left
}
.page-id-134 .mdbx .hero .fcard .fc-sub::before{
  content:"Powered by";
  display:block;
  color:#fff;
  font-family:Poppins,sans-serif;
  font-size:2.55cqi;
  font-weight:500;
  letter-spacing:.01em;
  line-height:1.2;
  margin-bottom:1cqi;
  white-space:nowrap
}
.page-id-134 .mdbx .hero .fcard .fc-sub::after{
  content:"AtoB";
  display:inline-block;
  color:#fff;
  font-family:Poppins,sans-serif;
  font-size:4.8cqi;
  font-weight:600;
  letter-spacing:-.01em;
  line-height:1;
  padding-left:6.6cqi;
  background:url(../../img/atob-icon.svg) left 52% / 5.4cqi 5.4cqi no-repeat;
  white-space:nowrap
}
/* Gold EMV chip */
.page-id-134 .mdbx .hero .fcard .chip{
  position:absolute;
  left:12.5%;
  top:37%;
  width:14.2%;
  height:auto;
  aspect-ratio:12.93/11.38;
  border-radius:16% 16% 18% 18%;
  background-color:transparent;
  background-image:url(../../img/mdb-emv-chip.svg)!important;
  background-size:100% 100%;
  background-repeat:no-repeat;
  box-shadow:0 1px 2px rgba(0,0,0,.4);
  z-index:1
}
.page-id-134 .mdbx .hero .fcard .chip::before,
.page-id-134 .mdbx .hero .fcard .chip::after{
  content:none!important;
  display:none!important
}
/* Keep the yellow savings badge */
.page-id-134 .mdbx .hero .fcardwrap .save{
  position:absolute;
  right:-10px;
  bottom:-14px;
  background:#F2C230;
  color:#101828;
  font-weight:700;
  font-size:15px;
  padding:12px 18px;
  border-radius:14px;
  box-shadow:0 12px 30px rgba(16,24,40,.2);
  z-index:2;
  line-height:1.2
}

@media(min-width:961px){
  .page-id-134 .mdbx .hero{
    /* wrap is 1160px (site.css), 24px pad, 1.1fr/0.9fr with 64px gap */
    --fc-text-end: calc((100vw - min(1160px, 100vw)) / 2 + 24px + (min(1160px, 100vw) - 112px) * .55);
    padding:72px 0 48px
  }
  /* wrap must not clip the full-bleed photo */
  .page-id-134 .mdbx .hero .wrap{
    position:static!important;
    max-width:1160px;
    grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);
    grid-template-rows:auto auto;
    gap:16px 64px;
    align-items:start
  }
  /* Copy in the left column, above the fcard, in front of the fade */
  .page-id-134 .mdbx .hero .wrap > :first-child{
    grid-column:1;
    grid-row:1;
    position:relative;
    z-index:2
  }
  /* CSS fuel-card graphic under the copy, ~68% of the original 440px, so the hero stays close to board height. */
  .page-id-134 .mdbx .hero .wrap > .elementor-element-c7a40a8{
    grid-column:1;
    grid-row:2;
    position:relative;
    z-index:8;
    isolation:isolate;
    justify-self:start;
    width:100%;
    max-width:300px;
    margin-top:0
  }
  .page-id-134 .mdbx .hero .fcardwrap{
    width:100%;
    max-width:300px;
    margin:0
  }
  .page-id-134 .mdbx .hero .fcardwrap .save{
    font-size:11px;
    padding:8px 12px;
    right:-8px;
    bottom:-10px;
    border-radius:10px
  }
  .page-id-134 .mdbx .hero .stage{
    display:contents;
    z-index:auto
  }
  .page-id-134 .mdbx .hero .stage .shot,
  .page-id-134 .mdbx .hero .stage .shot .img{
    position:absolute;
    inset:0;
    z-index:0;
    border:0;
    border-radius:0;
    box-shadow:none;
    background:transparent;
    aspect-ratio:auto;
    overflow:hidden
  }
  /* Full-bleed cover background: fill the hero height and the right edge, pan so
     the face starts just past the copy. A soft left mask hides the photo seam
     under the navy fade (the subject sits near the left of the source). */
  .page-id-134 .mdbx .hero .stage .shot{
    container-type:size;
    --fc-left: calc(var(--fc-text-end) - 220 * 100cqh / 1024)
  }
  .page-id-134 .mdbx .hero .stage .shot img{
    display:block;
    width:auto!important;
    max-width:none!important;
    height:100%!important;
    min-height:100%;
    min-width:calc(100vw - var(--fc-left));
    position:absolute;
    top:0!important;
    bottom:auto!important;
    left:var(--fc-left)!important;
    object-fit:cover!important;
    object-position:left top!important;
    transform:none!important;
    -webkit-mask-image:linear-gradient(to right, transparent 0, #000 clamp(72px, 8vw, 130px));
    mask-image:linear-gradient(to right, transparent 0, #000 clamp(72px, 8vw, 130px))
  }
}
/* At 1024, shrink the hero so the AtoB card in the photo is not clipped on the right. */
@media(min-width:961px) and (max-width:1100px){
  .page-id-134 .mdbx .hero{
    padding:32px 0 16px
  }
  .page-id-134 .mdbx .hero .wrap{
    gap:10px 48px
  }
  .page-id-134 .mdbx .hero .wrap > .elementor-element-c7a40a8,
  .page-id-134 .mdbx .hero .fcardwrap{
    max-width:260px
  }
  .page-id-134 .mdbx .hero .stage .shot{
    --fc-left: calc(var(--fc-text-end) - 230 * 100cqh / 1024)
  }
}

/* Mobile: photo band on top, navy text below, then the fcard graphic. Face and AtoB card visible in the band. */
@media(max-width:960px){
  .page-id-134 .mdbx .hero{
    overflow:hidden;
    padding:0 0 24px;
    background-color:#132A54!important
  }
  .page-id-134 .mdbx .hero::after{
    display:none!important;
    content:none!important
  }
  .page-id-134 .mdbx .hero .wrap{
    display:flex;
    flex-direction:column;
    gap:0;
    max-width:none;
    padding:0 16px 8px;
    position:relative!important;
    z-index:2
  }
  .page-id-134 .mdbx .hero .stage{
    position:relative;
    inset:auto;
    display:contents;
    overflow:visible
  }
  .page-id-134 .mdbx .hero .stage .shot,
  .page-id-134 .mdbx .hero .stage .shot .img{
    position:relative;
    inset:auto;
    order:-1;
    width:calc(100% + 32px);
    margin-left:-16px;
    margin-right:-16px;
    height:460px;
    aspect-ratio:auto;
    border-radius:0;
    box-shadow:none;
    border:0;
    z-index:auto;
    overflow:hidden
  }
  .page-id-134 .mdbx .hero .stage .shot img{
    width:100%!important;
    height:100%!important;
    max-width:none!important;
    object-fit:cover!important;
    /* Face is upper-left, card is mid-left; keep both in the band. No mirror. */
    object-position:30% 0%!important;
    transform:none!important;
    left:auto!important;
    top:auto!important
  }
  .page-id-134 .mdbx .hero .wrap > :first-child{
    order:0;
    padding-top:28px;
    position:relative;
    z-index:2
  }
  .page-id-134 .mdbx .hero .wrap > .elementor-element-c7a40a8,
  .page-id-134 .mdbx .hero .fcardwrap{
    order:2;
    position:relative!important;
    left:auto!important;
    right:auto!important;
    top:auto!important;
    bottom:auto!important;
    width:100%!important;
    max-width:440px;
    margin:24px auto 8px!important;
    z-index:2
  }
  .page-id-134 .mdbx .hero .fcard{transform:none}
}