/* Real search imagery, with the same contained treatment as the portfolio. */
.solution-card.card-search .search-capture {
  padding: 22px 0 0 22px;
  background: #eaf0f2;
  overflow: hidden;
  display: flex;
  align-items: flex-start;
}
.search-capture > img {
  display: block;
  width: calc(100% + 36px);
  max-width: none;
  height: auto;
  flex: 0 0 auto;
  border: 1px solid #cbd8df;
  border-radius: 10px 0 0 0;
  box-shadow: 0 12px 30px #082b4720;
}
.service-dialog.has-search-capture .dialog-media { background: #202124; }
.service-dialog.has-search-capture #dialog-image { width: 100%; height: auto; max-height: none; object-fit: contain; }
.service-dialog.has-search-capture .dialog-media-caption { display: none; }
@media (max-width:639px) {
  .solution-card.card-search .search-capture { padding: 16px 0 0 16px; }
}
/* Real desktop and mobile captures, framed at their native proportions. */
.solution-card .site-art.device-preview {
  position: relative;
  flex: 1;
  min-height: 430px;
  background: radial-gradient(ellipse at 65% 30%, #f8fafb 0, #edf2f4 58%, #e3ebee 100%);
  isolation: isolate;
  overflow: hidden;
}
.device-browser {
  position: absolute;
  top: 38px;
  left: 20%;
  width: 76%;
  overflow: hidden;
  border: 1px solid #cbd5db;
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 18px 32px #102d3e20, 0 2px 5px #102d3e0d;
  transition: transform .3s ease;
}
.device-browser-toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 30px;
  padding: 0 11px;
  border-bottom: 1px solid #dde4e8;
  background: #f7f9fa;
}
.device-window-controls {display: flex; gap: 4px;}
.device-window-controls i {width: 5px; height: 5px; border-radius: 50%; background: #bbc7cf;}
.device-address {display: flex; justify-content: center; align-items: center; gap: 5px; margin: 0 auto; width: 65%; padding: 3px 8px; border: 1px solid #e5ebee; border-radius: 4px; color: #657681; background: white; font: 10px/1.2 Arial, sans-serif;}
.device-address svg {width: 9px; height: 9px; fill: none; stroke: currentColor; stroke-width: 1.4;}
.device-browser-menu {color: #87949d; font: 16px/1 Arial, sans-serif;}
.device-browser > img {display: block; width: 100%; height: auto; aspect-ratio: 16/9; object-fit: contain;}
.device-phone {
  position: absolute;
  z-index: 1;
  top: 23px;
  left: 5%;
  width: 172px;
  padding: 2px;
  border: 5px solid #142b39;
  border-radius: 27px;
  background: #fff;
  box-shadow: 0 18px 28px #102d3e2b, 0 0 0 1px #70818a;
  transition: transform .3s ease;
}
.device-phone-status {height: 20px; display: flex; align-items: center; justify-content: space-between; padding: 0 8px; color: #142b39;}
.device-phone-status > span {font: 600 7px/1 Arial, sans-serif;}
.device-phone-status > i {width: 39px; height: 9px; border-radius: 10px; background: #142b39;}
.device-phone-status > svg {width: 23px; height: 10px; fill: currentColor;}
.device-phone-screen {position: relative; overflow: hidden; background: #fff;}
.device-phone-screen > img {display: block; width: 100%; height: auto; aspect-ratio: 390/844; object-fit: contain;}
.device-contact-icons {position: absolute; bottom: 12px; right: 7px; display: flex; flex-direction: column; gap: 5px;}
.device-contact-icons > span {display: grid; place-items: center; width: 25px; height: 25px; border-radius: 50%; color: #fff; border: 1px solid #ffffffc7; box-shadow: 0 2px 6px #102d3e35;}
.device-contact-call {background: #082b47;}
.device-contact-email {background: #18737b;}
.device-contact-icons svg {width: 12px; height: 12px; fill: currentColor; stroke: none;}
.device-phone-bottom {display: grid; place-items: center; height: 13px;}
.device-phone-bottom > span {width: 45px; height: 3px; border-radius: 4px; background: #142b39;}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .card-website:hover .device-browser {transform: translateY(-3px);}
  .card-website:hover .device-phone {transform: translateY(-5px);}
}
@media (max-width: 639px) {
  .solution-card .site-art.device-preview {min-height: 335px;}
  .device-browser {top: 36px; left: 18%; width: 78%; border-radius: 6px;}
  .device-browser-toolbar {height: 21px; gap: 4px; padding: 0 5px;}
  .device-window-controls {gap: 2px;}
  .device-window-controls i {width: 3px; height: 3px;}
  .device-address {font-size: 6px; padding: 2px; gap: 3px;}
  .device-address svg {width: 6px; height: 6px;}
  .device-browser-menu {font-size: 11px;}
  .device-phone {top: 38px; left: 6%; width: 124px; border-width: 4px; border-radius: 21px;}
  .device-phone-status {height: 17px; padding: 0 4px;}
  .device-phone-status > span {font-size: 6px;}
  .device-phone-status > i {width: 29px; height: 7px;}
  .device-phone-status > svg {width: 19px; height: 8px;}
  .device-phone-bottom {height: 11px;}
  .device-phone-bottom > span {width: 33px; height: 2px;}
  .device-contact-icons {right: 5px; bottom: 9px; gap: 4px;}
  .device-contact-icons > span {width: 20px; height: 20px;}
  .device-contact-icons svg {width: 10px; height: 10px;}
}