
/* v2.9.0: Lines with site images */
.hero-with-site-images .wrap{
  align-items:center;
}
.hero-image-card{
  position:relative;
  border:1px solid #dbe7ef;
  border-radius:0;
  overflow:hidden;
  min-height:520px;
  background:#fff;
  box-shadow:none;
}
.hero-image-card .hero-photo,
.hero-image-card .hero-photo img{
  width:100%;
  height:100%;
  min-height:520px;
  display:block;
  object-fit:cover;
}
.hero-image-card:before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg, rgba(6,27,58,.02), rgba(6,27,58,.22));
  pointer-events:none;
}
.hero-image-callout{
  position:absolute;
  left:24px;
  right:24px;
  bottom:24px;
  padding:22px;
  background:rgba(255,255,255,.92);
  border:1px solid rgba(219,231,239,.9);
  box-shadow:0 18px 38px rgba(6,27,58,.16);
}
.hero-image-callout h3{
  margin:4px 0 0;
  color:var(--cri-navy);
  font-size:24px;
  line-height:1.12;
}
.hero-image-callout .callout-label{
  margin:0;
  color:var(--cri-red);
  text-transform:uppercase;
  letter-spacing:.12em;
  font-size:12px;
  font-weight:900;
}
.value-card .site-value-icon{
  width:58px;
  height:58px;
  margin:0 0 18px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#f5f9fc;
  border:1px solid #dbe7ef;
}
.value-card .site-value-icon img{
  width:42px;
  height:42px;
  object-fit:contain;
  display:block;
}
.hero-with-site-images + .markets-section .value-card:before,
body:has(.hero-with-site-images) .value-card:before{
  opacity:.82;
}
.trust-image-feature{
  min-height:100%;
  border:1px solid #dbe7ef;
  background:#fff;
  overflow:hidden;
  display:flex;
  flex-direction:column;
}
.trust-image-feature .trust-photo{
  margin:0;
}
.trust-image-feature .trust-photo img{
  width:100%;
  height:275px;
  object-fit:cover;
  display:block;
}
.trust-image-caption{
  padding:24px;
}
.trust-image-caption p:last-child{
  margin-bottom:0;
  color:#52697c;
}
.cri-option-preview.images{
  background:linear-gradient(180deg,#f9fcff,#e8f1f6);
}
.cri-option-preview.images .mock-photo{
  position:absolute;
  right:18px;
  top:42px;
  width:120px;
  height:88px;
  background:
    linear-gradient(135deg, rgba(6,27,58,.18), rgba(39,195,255,.12)),
    #fff;
  border:1px solid rgba(6,27,58,.10);
}
.cri-option-grid{
  grid-template-columns:repeat(3, minmax(0, 1fr));
}
@media (max-width:980px){
  .cri-option-grid{
    grid-template-columns:1fr;
  }
  .hero-image-card,
  .hero-image-card .hero-photo img{
    min-height:420px;
  }
}
@media (max-width:640px){
  .hero-image-card,
  .hero-image-card .hero-photo img{
    min-height:340px;
  }
  .hero-image-callout{
    left:16px;
    right:16px;
    bottom:16px;
    padding:18px;
  }
  .hero-image-callout h3{
    font-size:20px;
  }
}


/* v3.6.0 image fit improvements for lines-with-images page */
body.page-template-page-cri-lines-images .hero-with-site-images .wrap{
  align-items:start !important;
}

body.page-template-page-cri-lines-images .hero-image-card{
  position:relative !important;
  height:560px !important;
  min-height:560px !important;
  display:block !important;
  overflow:hidden !important;
}

body.page-template-page-cri-lines-images .hero-image-card .hero-photo{
  position:absolute !important;
  inset:0 !important;
  margin:0 !important;
  width:100% !important;
  height:100% !important;
}

body.page-template-page-cri-lines-images .hero-image-card .hero-photo img{
  display:block !important;
  width:100% !important;
  height:100% !important;
  min-height:0 !important;
  object-fit:cover !important;
  object-position:center center !important;
}

body.page-template-page-cri-lines-images .hero-image-callout{
  left:18px !important;
  right:18px !important;
  bottom:18px !important;
}

body.page-template-page-cri-lines-images .trust-grid{
  align-items:start !important;
}

body.page-template-page-cri-lines-images .trust-image-feature{
  align-self:start !important;
  height:100% !important;
  min-height:0 !important;
  display:grid !important;
  grid-template-rows:minmax(360px, 1fr) auto !important;
}

body.page-template-page-cri-lines-images .trust-image-feature .trust-photo{
  margin:0 !important;
  height:100% !important;
}

body.page-template-page-cri-lines-images .trust-image-feature .trust-photo img{
  display:block !important;
  width:100% !important;
  height:100% !important;
  min-height:360px !important;
  object-fit:cover !important;
  object-position:center center !important;
}

body.page-template-page-cri-lines-images .trust-image-caption{
  padding:22px 24px !important;
}

@media (max-width: 980px){
  body.page-template-page-cri-lines-images .hero-image-card{
    height:460px !important;
    min-height:460px !important;
  }
  body.page-template-page-cri-lines-images .trust-image-feature{
    grid-template-rows:minmax(300px, 1fr) auto !important;
  }
  body.page-template-page-cri-lines-images .trust-image-feature .trust-photo img{
    min-height:300px !important;
  }
}

@media (max-width: 640px){
  body.page-template-page-cri-lines-images .hero-image-card{
    height:360px !important;
    min-height:360px !important;
  }
  body.page-template-page-cri-lines-images .hero-image-callout{
    left:14px !important;
    right:14px !important;
    bottom:14px !important;
    padding:16px !important;
  }
  body.page-template-page-cri-lines-images .trust-image-feature{
    grid-template-rows:minmax(240px, 1fr) auto !important;
  }
  body.page-template-page-cri-lines-images .trust-image-feature .trust-photo img{
    min-height:240px !important;
  }
}


/* v3.8.0 offset yellow line treatment for image boxes */
body.page-template-page-cri-lines-images .hero-image-card,
body.page-template-page-cri-lines-images .trust-image-feature{
  position:relative !important;
  overflow:visible !important;
  isolation:isolate !important;
}

body.page-template-page-cri-lines-images .hero-image-card:after,
body.page-template-page-cri-lines-images .trust-image-feature:after{
  content:"" !important;
  position:absolute !important;
  inset:0 !important;
  border:2px solid var(--cri-gold) !important;
  transform:translate(-12px,-12px) !important;
  pointer-events:none !important;
  z-index:4 !important;
}

body.page-template-page-cri-lines-images .hero-image-card .hero-photo,
body.page-template-page-cri-lines-images .hero-image-card .hero-image-callout,
body.page-template-page-cri-lines-images .trust-image-feature .trust-photo,
body.page-template-page-cri-lines-images .trust-image-feature .trust-image-caption{
  position:relative !important;
  z-index:2 !important;
}

@media (max-width: 640px){
  body.page-template-page-cri-lines-images .hero-image-card:after,
  body.page-template-page-cri-lines-images .trust-image-feature:after{
    transform:translate(-8px,-8px) !important;
  }
}


/* v4.0.0 original icons restored for lines-with-images option with image-backed tiles */
body.page-template-page-cri-lines-images .value-card .site-value-icon{
  display:none !important;
}

body.page-template-page-cri-lines-images .value-card .image-backed-icon{
  width:58px !important;
  height:58px !important;
  margin:0 0 18px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  position:relative !important;
  overflow:hidden !important;
  border:1px solid #dbe7ef !important;
  border-radius:0 !important;
  color:var(--cri-navy) !important;
  background-image:
    linear-gradient(rgba(245,249,252,.86), rgba(245,249,252,.86)),
    url("../images/icon-bg-photo.png") !important;
  background-size:cover !important;
  background-repeat:no-repeat !important;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.35) !important;
}

body.page-template-page-cri-lines-images .value-card .image-backed-icon.image-backed-icon-cost{
  background-position:18% 36% !important;
}
body.page-template-page-cri-lines-images .value-card .image-backed-icon.image-backed-icon-scale{
  background-position:56% 18% !important;
}
body.page-template-page-cri-lines-images .value-card .image-backed-icon.image-backed-icon-performance{
  background-position:44% 56% !important;
}
body.page-template-page-cri-lines-images .value-card .image-backed-icon.image-backed-icon-support{
  background-position:78% 38% !important;
}

body.page-template-page-cri-lines-images .value-card .image-backed-icon::before{
  width:30px !important;
  height:30px !important;
  position:relative !important;
  z-index:2 !important;
  color:var(--cri-navy) !important;
}


/* v4.5.0 top image matches trust-image style; yellow outline softened */
body.page-template-page-cri-lines-images .hero-image-card{
  position:relative !important;
  display:grid !important;
  grid-template-rows:minmax(360px, 1fr) auto !important;
  height:auto !important;
  min-height:0 !important;
  background:#fff !important;
  border:1px solid #dbe7ef !important;
  overflow:visible !important;
  isolation:isolate !important;
}

body.page-template-page-cri-lines-images .hero-image-card:before{
  display:none !important;
  content:none !important;
}

body.page-template-page-cri-lines-images .hero-image-card .hero-photo{
  position:relative !important;
  inset:auto !important;
  margin:0 !important;
  width:100% !important;
  height:100% !important;
  overflow:hidden !important;
}

body.page-template-page-cri-lines-images .hero-image-card .hero-photo img{
  display:block !important;
  width:100% !important;
  height:100% !important;
  min-height:360px !important;
  object-fit:cover !important;
  object-position:center center !important;
}

body.page-template-page-cri-lines-images .hero-image-callout{
  position:relative !important;
  left:auto !important;
  right:auto !important;
  bottom:auto !important;
  margin:0 !important;
  padding:24px !important;
  background:#fff !important;
  border:0 !important;
  border-top:1px solid #dbe7ef !important;
  box-shadow:none !important;
}

body.page-template-page-cri-lines-images .hero-image-card:after,
body.page-template-page-cri-lines-images .trust-image-feature:after{
  border-color:rgba(233, 171, 32, .58) !important;
  transform:translate(-10px,-10px) !important;
}

@media (max-width:980px){
  body.page-template-page-cri-lines-images .hero-image-card{
    grid-template-rows:minmax(300px, 1fr) auto !important;
  }
  body.page-template-page-cri-lines-images .hero-image-card .hero-photo img{
    min-height:300px !important;
  }
}

@media (max-width:640px){
  body.page-template-page-cri-lines-images .hero-image-card{
    grid-template-rows:minmax(240px, 1fr) auto !important;
  }
  body.page-template-page-cri-lines-images .hero-image-card .hero-photo img{
    min-height:240px !important;
  }
  body.page-template-page-cri-lines-images .hero-image-callout{
    padding:18px !important;
  }
  body.page-template-page-cri-lines-images .hero-image-card:after,
  body.page-template-page-cri-lines-images .trust-image-feature:after{
    transform:translate(-8px,-8px) !important;
    border-color:rgba(233, 171, 32, .5) !important;
  }
}


/* v4.6.0 move imagery from icon tiles into value-card boxes */
body.page-template-page-cri-lines-images .value-grid{
  gap:0 !important;
}

body.page-template-page-cri-lines-images .value-card{
  position:relative !important;
  overflow:hidden !important;
  isolation:isolate !important;
  background:#ffffff !important;
}

/* remove photo from icon tile and restore clean icon treatment */
body.page-template-page-cri-lines-images .value-card .image-backed-icon{
  background:#f6f9fc !important;
  background-image:none !important;
  border:1px solid #dbe7ef !important;
  box-shadow:none !important;
}

body.page-template-page-cri-lines-images .value-card .image-backed-icon::before{
  color:var(--cri-navy) !important;
}

/* incorporate subtle image into each card instead */
body.page-template-page-cri-lines-images .value-card::after{
  content:"" !important;
  position:absolute !important;
  top:14px !important;
  right:14px !important;
  width:96px !important;
  height:96px !important;
  background-image:
    linear-gradient(rgba(255,255,255,.78), rgba(255,255,255,.82)),
    url("../images/icon-bg-photo.png") !important;
  background-size:cover !important;
  background-repeat:no-repeat !important;
  border-radius:6px !important;
  opacity:.55 !important;
  z-index:0 !important;
  pointer-events:none !important;
  box-shadow:inset 0 0 0 1px rgba(219,231,239,.85) !important;
}

body.page-template-page-cri-lines-images .value-card:nth-child(1)::after{background-position:14% 34% !important;}
body.page-template-page-cri-lines-images .value-card:nth-child(2)::after{background-position:58% 18% !important;}
body.page-template-page-cri-lines-images .value-card:nth-child(3)::after{background-position:45% 58% !important;}
body.page-template-page-cri-lines-images .value-card:nth-child(4)::after{background-position:80% 36% !important;}

/* keep all text above the image and readable */
body.page-template-page-cri-lines-images .value-card > *{
  position:relative !important;
  z-index:1 !important;
}

body.page-template-page-cri-lines-images .value-card h3,
body.page-template-page-cri-lines-images .value-card p{
  max-width:82% !important;
}

body.page-template-page-cri-lines-images .value-card h3{
  color:var(--cri-navy) !important;
}

body.page-template-page-cri-lines-images .value-card p{
  color:#4c6478 !important;
}

@media (max-width:980px){
  body.page-template-page-cri-lines-images .value-card::after{
    width:88px !important;
    height:88px !important;
  }
  body.page-template-page-cri-lines-images .value-card h3,
  body.page-template-page-cri-lines-images .value-card p{
    max-width:78% !important;
  }
}

@media (max-width:640px){
  body.page-template-page-cri-lines-images .value-card::after{
    width:72px !important;
    height:72px !important;
    top:12px !important;
    right:12px !important;
    opacity:.48 !important;
  }
  body.page-template-page-cri-lines-images .value-card h3,
  body.page-template-page-cri-lines-images .value-card p{
    max-width:100% !important;
  }
}


/* v4.9.0 remove value-card image inserts and add muted animated image to blue services section */
@keyframes cri-solutions-bg-drift{
  0%{ transform:scale(1.04) translate3d(0,0,0); }
  50%{ transform:scale(1.08) translate3d(-16px,-8px,0); }
  100%{ transform:scale(1.04) translate3d(0,0,0); }
}

/* remove image panels from the value/icon cards */
body.page-template-page-cri-lines-images .value-card::after{
  display:none !important;
  content:none !important;
}

body.page-template-page-cri-lines-images .value-card .image-backed-icon{
  background:#f6f9fc !important;
  background-image:none !important;
  border:1px solid #dbe7ef !important;
  box-shadow:none !important;
  opacity:1 !important;
}

body.page-template-page-cri-lines-images .value-card .image-backed-icon::before{
  color:var(--cri-navy) !important;
}

/* add uploaded image across the full blue services section */
body.page-template-page-cri-lines-images .solutions{
  position:relative !important;
  overflow:hidden !important;
  background:
    linear-gradient(135deg, rgba(28,19,43,.96), rgba(6,27,58,.95) 48%, rgba(12,50,52,.94)) !important;
  isolation:isolate !important;
}

body.page-template-page-cri-lines-images .solutions::after{
  content:"" !important;
  position:absolute !important;
  inset:-9% !important;
  z-index:0 !important;
  pointer-events:none !important;
  background:
    linear-gradient(135deg, rgba(6,27,58,.76), rgba(6,27,58,.82)),
    url("../images/solutions-bg.png") center center / cover no-repeat !important;
  opacity:.28 !important;
  mix-blend-mode:screen !important;
  transform-origin:center center !important;
  animation:cri-solutions-bg-drift 18s ease-in-out infinite !important;
}

body.page-template-page-cri-lines-images .solutions::before{
  z-index:1 !important;
  opacity:.72 !important;
}

body.page-template-page-cri-lines-images .solutions .section-wrap,
body.page-template-page-cri-lines-images .solutions .section-heading,
body.page-template-page-cri-lines-images .solutions .solution-grid,
body.page-template-page-cri-lines-images .solutions .solution-card{
  position:relative !important;
  z-index:2 !important;
}

body.page-template-page-cri-lines-images .solutions .solution-card{
  background:rgba(9,31,60,.70) !important;
  backdrop-filter:blur(2px) !important;
}

body.page-template-page-cri-lines-images .solutions .solution-card:hover{
  background:rgba(17,47,82,.78) !important;
}

@media (prefers-reduced-motion: reduce){
  body.page-template-page-cri-lines-images .solutions::after{
    animation:none !important;
  }
}
