@font-face{
  font-family:'Italiana Numerals';
  src:url('/assets/fonts/italiana-numerals.ttf') format('truetype');
  font-style:normal;
  font-weight:400;
  font-display:swap;
  unicode-range:U+0030-0039;
}
/* One long lead card and four matching cards; original copy and actions stay in index.html. */
.immersiveHome #needs .cards{
  display:grid;
  grid-template-columns:minmax(0,1.16fr) repeat(2,minmax(0,1fr));
  grid-template-rows:repeat(2,420px) auto;
  gap:18px;
  align-items:stretch;
}
#needs .cards .fundingCard{
  display:flex;
  flex-direction:column;
  align-items:stretch;
  width:100%;
  height:100%;
  min-height:0;
  padding:0;
  border:0;
  border-radius:24px;
  overflow:hidden;
  background:#fff;
  color:#172b3f;
  box-shadow:0 22px 54px rgba(16,40,59,.22);
}
#needs .cards .funding-personal{grid-column:1;grid-row:1/span 2}
#needs .cards .funding-debt{grid-column:2;grid-row:1}
#needs .cards .funding-house{grid-column:3;grid-row:1}
#needs .cards .funding-car{grid-column:2;grid-row:2}
#needs .cards .funding-business{grid-column:3;grid-row:2}
#needs .cards .fundingCard:before,#needs .cards .fundingCard:after{display:none}
#needs .cards .fundingCard:hover{
  box-shadow:0 28px 66px rgba(16,40,59,.3),0 0 0 2px rgba(180,165,130,.5);
}
#needs .cards .fundingCard .fundingPhoto{
  position:absolute;
  z-index:0;
  inset:0;
  width:100%;
  height:100%;
  min-height:0;
  overflow:hidden;
  background:#dce7ec;
}
#needs .cards .fundingCard .fundingPhoto:after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,rgba(9,30,47,.28),transparent 35%,rgba(6,18,30,.18) 60%,rgba(6,18,30,.82) 100%);
  pointer-events:none;
}
#needs .cards .fundingCard .fundingPhoto img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform .7s cubic-bezier(.2,.7,.2,1);
}
#needs .cards .fundingCard:hover .fundingPhoto img{transform:scale(1.045)}
/* Keep the complete coupe visible in the taller funding card. */
#needs .cards .funding-car .fundingPhoto{background:#09121c}
#needs .cards .funding-car .fundingPhoto img{object-fit:contain;object-position:center top}
#needs .cards .fundingCard .fundingNumber,
#needs .cards .fundingCard.funding-personal .fundingNumber,
#needs .cards .fundingCard.funding-debt .fundingNumber,
#needs .cards .fundingCard.funding-house .fundingNumber,
#needs .cards .fundingCard.funding-car .fundingNumber,
#needs .cards .fundingCard.funding-business .fundingNumber{
  position:absolute;
  z-index:3;
  top:22px;
  left:22px;
  display:block;
  width:auto;
  height:auto;
  padding:0;
  border:0;
  border-radius:0;
  background:transparent;
  -webkit-backdrop-filter:none;
  backdrop-filter:none;
  color:rgba(255,255,255,.72);
  font-family:'Italiana Numerals',serif;
  font-size:64px;
  font-weight:400;
  font-variant-numeric:lining-nums;
  letter-spacing:.005em;
  line-height:1;
}
#needs .cards .fundingCard .fundingBody{
  position:relative;
  z-index:1;
  display:flex;
  flex:0 0 auto;
  flex-direction:column;
  align-items:flex-start;
  height:auto;
  min-height:220px;
  margin-top:auto;
  padding:12px 20px 10px;
  border-top:1px solid rgba(255,255,255,.83);
  background:linear-gradient(142deg,rgba(37,56,76,.3),rgba(14,31,48,.3));
  -webkit-backdrop-filter:none;
  backdrop-filter:none;
  box-shadow:0 -9px 34px rgba(12,37,55,.14),inset 0 1px 0 rgba(255,255,255,.68);
}
#needs .cards .fundingCard .fundingBody h3,
#needs .cards .fundingCard.funding-personal .fundingBody h3,
#needs .cards .fundingCard.funding-debt .fundingBody h3{
  max-width:none;
  margin:0 0 4px;
  color:#f7fbff;
  font-size:24px;
  font-weight:650;
  letter-spacing:-.035em;
  line-height:1.2;
}
#needs .cards .fundingCard .fundingBody p,
#needs .cards .fundingCard.funding-personal .fundingBody p,
#needs .cards .fundingCard.funding-debt .fundingBody p{
  flex:0 0 auto;
  max-width:none;
  margin:0 0 4px;
  color:#e8f0f6;
  font-size:14px;
  line-height:1.4;
}
#needs .cards .fundingCard .fundingBody .btn,
#needs .cards .fundingCard.funding-personal .fundingBody .btn,
#needs .cards .fundingCard:not(.funding-personal) .fundingBody .btn{
  align-self:flex-start;
  flex:0 0 auto;
  max-width:none;
  min-height:44px;
  margin-top:auto;
  padding:0 1px 2px;
  gap:16px;
  border:0;
  border-bottom:1px solid #b4a582;
  border-radius:0;
  background:transparent;
  color:#f6f9fd;
  box-shadow:none!important;
  font-size:14px;
  font-weight:650;
}
#needs .cards .fundingCard .fundingBody .btn:hover,
#needs .cards .fundingCard.funding-personal .fundingBody .btn:hover,
#needs .cards .fundingCard:not(.funding-personal) .fundingBody .btn:hover{
  background:transparent;
  border-color:#e3c891;
  color:#f0d7a5;
}
#needs .cards .fundingCard .fundingBody .serviceDetailLink,
#needs .cards .fundingCard.funding-personal .fundingBody .serviceDetailLink{
  flex:0 0 auto;
  max-width:none;
  min-height:44px;
  display:inline-flex;
  align-items:center;
  margin:8px 0 0;
  padding:0;
  border:0;
  color:#e7f1f8;
  font-size:14px;
  line-height:1.5;
  text-decoration:underline;
  text-decoration-color:#b4a582;
  text-underline-offset:4px;
}

@media(max-width:1050px){
  .immersiveHome #needs .cards{
    grid-template-columns:repeat(2,minmax(0,1fr));
    grid-template-rows:480px repeat(2,420px) auto;
  }
  #needs .cards .fundingCard,
  #needs .cards .funding-personal,
  #needs .cards .funding-debt,
  #needs .cards .funding-house,
  #needs .cards .funding-car,
  #needs .cards .funding-business{grid-column:auto;grid-row:auto}
  #needs .cards .funding-personal{grid-column:1/-1}
}
@media(max-width:640px){
  .immersiveHome #needs .cards{grid-template-columns:minmax(0,1fr);grid-template-rows:none;grid-auto-rows:auto;gap:18px}
  #needs .cards .fundingCard,
  #needs .cards .funding-personal,
  #needs .cards .funding-business{
    grid-column:1;
    width:100%;
    height:420px;
    transform:none!important;
  }
  #needs .cards .funding-personal{height:470px}
  #needs .cards .fundingCard .fundingBody{padding:12px 19px 10px}
}
@media(prefers-reduced-motion:reduce){
  #needs .cards .fundingCard .fundingPhoto img{transition:none}
}