/* Service previews use real project imagery and readable work examples. */
.service-visual {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  flex: 1;
  width: 100%;
  min-height: 342px;
  padding: 24px 20px;
  overflow: hidden;
  isolation: isolate;
  background: #edf2f4;
  color: #0b2e43;
  text-align: left;
  font: 400 12px/1.45 Inter, Arial, sans-serif;
}
.service-visual *, .service-visual *::before {box-sizing: border-box;}
.service-visual img {display: block;max-width: 100%;}
.service-visual svg {width: 18px;height: 18px;flex-shrink: 0;fill: none;stroke: currentColor;stroke-width: 1.6;}
.preview-window {position: relative;width: 100%;border: 1px solid #cdd9df;border-radius: 10px;background: #fff;box-shadow: 0 12px 26px #143c4c15;overflow: hidden;}
.preview-toolbar {height: 33px;padding: 0 12px;display: flex;align-items: center;gap: 9px;border-bottom: 1px solid #e0e7eb;background: #f8fafb;color: #556a77;font-size: 10px;}
.preview-toolbar > span:last-child {margin-left: auto;}
.preview-dots {display: flex;gap: 3px;}
.preview-dots i {height: 4px;width: 4px;background: #aabac3;border-radius: 50%;}
.preview-label {display: block;font-size: 9px;font-weight: 600;letter-spacing: .065em;color: #50707a;}
.marketing-visual {gap: 14px;background: #eaf1f2;}
.ad-preview {padding: 15px 16px 16px;}
.ad-source {display: flex;align-items: center;gap: 8px;margin: 10px 0 9px;font-size: 10px;color: #425b66;}
.ad-source > span {display: grid;place-items: center;background: #172d35;color: #fff;width: 26px;height: 26px;border-radius: 50%;font-weight: 600;font-size: 12px;}
.ad-source small {font-size: 9px;display: block;color: #647783;}
.ad-preview > strong {display: block;font-size: 16px;line-height: 1.3;color: #1758a0;font-weight: 500;letter-spacing: -.025em;}
.ad-preview > p {font-size: 11px;line-height: 1.55;margin: 7px 0 0;color: #4d616c;}
.campaign-connection {display: flex;align-items: center;justify-content: center;gap: 8px;font-size: 10px;color: #3d6973;}
.campaign-connection svg {height: 15px;width: 15px;}
.landing-preview {width: 86%;margin-left: auto;}
.landing-preview > img {width: 100%;height: auto;aspect-ratio: 16/9;object-fit: contain;}
.landing-preview .preview-toolbar {height: 26px;font-size: 9px;}
.content-visual {padding: 22px 20px;background: #e8f0ef;}
.content-editor .preview-toolbar {gap: 8px;}
.editor-state {padding: 3px 6px;border-radius: 4px;background: #e5f1ee;color: #286269;font-size: 9px;}
.editor-photo {width: 100%;height: 150px;object-fit: cover;object-position: 50% 0%;}
.editor-fields {padding: 15px 17px 17px;}
.editor-fields > strong {display: block;font-size: 18px;line-height: 1.22;letter-spacing: -.025em;margin: 7px 0 9px;}
.editor-fields > p {font-size: 11px;line-height: 1.55;margin: 0 0 14px;color: #526572;}
.editor-faq {padding-top: 11px;border-top: 1px solid #e0e7e9;display: flex;justify-content: space-between;align-items: center;gap: 12px;color: #204756;font-size: 11px;}
.editor-faq svg {width: 13px;height: 13px;}
.hosting-visual {background: #e9eff3;}
.hosting-console .preview-toolbar {background: #0b2e43;color: #d0e1e7;border-bottom-color: #1a4053;}
.hosting-site {display: flex;align-items: center;gap: 12px;padding: 20px 18px 17px;}
.hosting-site > img {width: 39px;height: 39px;object-fit: contain;}
.hosting-site strong {font-size: 17px;letter-spacing: -.025em;display: block;}
.hosting-site small {display: block;font-size: 10px;color: #657a85;margin-top: 2px;}
.care-tasks {padding: 0 18px 9px;}
.care-task {display: flex;align-items: center;gap: 11px;padding: 12px 0;border-top: 1px solid #e5ecef;}
.care-task > svg {color: #247b80;width: 19px;height: 19px;}
.care-task > span {flex: 1;}
.care-task strong {display: block;font-size: 12px;line-height: 1.3;font-weight: 600;}
.care-task small {display: block;color: #607681;font-size: 10px;line-height: 1.4;margin-top: 3px;}
.care-task > b {color: #78929c;font-weight: 400;font-size: 18px;}
.service-dialog.has-service-visual .dialog-media {background: #edf2f4;}
.service-dialog.has-service-visual #dialog-image {display: none;}
.service-dialog.has-service-visual .dialog-media-caption {position: static;padding: 24px 32px;background: #fff;color: var(--navy);}
.service-dialog.has-service-visual .dialog-media-caption h3 {color: var(--navy);font-size: 24px;}
.service-dialog.has-service-visual .dialog-media-caption p {color: var(--body);font-size: 17px;max-width: 650px;}
.dialog-service-visual {display: flex;justify-content: center;background: #edf2f4;}
.dialog-service-visual .service-visual {flex: 0 1 440px;min-height: 0;padding: 28px;}
.dialog-service-visual .marketing-visual {flex-basis: 540px;}
.dialog-service-visual .content-visual {flex-basis: 540px;}
.dialog-service-visual .editor-photo {height: 220px;}
@media (min-width: 940px) {
  .solution-card:is(.card-advertising,.card-content,.card-care) .card-copy {min-height: 192px;}
}
@media (min-width: 640px) and (max-width: 939px) {
  .solution-card.card-care {display:flex;grid-column:auto;}
  .solution-card.card-care .card-copy {padding:28px 24px;}
  .solution-card.card-care .card-copy > p {max-width:none;}
  .solution-card.card-care h3 {padding-right:50px;}
  .solution-card.card-care .hosting-visual {min-height:342px;}
}
@media (max-width: 639px) {
  .service-visual {min-height: 335px;padding: 17px 15px;}
  .marketing-visual {gap: 10px;}
  .ad-preview {padding: 13px 14px;}
  .ad-preview > strong {font-size: 15px;}
  .ad-preview > p {font-size: 10px;}
  .landing-preview {width: 91%;}
  .editor-photo {height: 132px;}
  .editor-fields {padding: 14px;}
  .hosting-site {padding: 17px 14px;}
  .care-tasks {padding-inline: 14px;}
  .care-task {padding-block: 10px;}
  .dialog-service-visual .service-visual {padding: 20px;}
  .dialog-service-visual .editor-photo {height: 160px;}
  .service-dialog.has-service-visual .dialog-media-caption {padding: 22px;}
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .solution-card .preview-window {transition: transform .25s ease;}
  .solution-card:hover .preview-window {transform: translateY(-3px);}
}
/* Owner-supplied image treatments, with disclosure retained at card and detail size. */
.service-visual.service-image-visual {gap:16px;padding:22px 16px;background:#eaf0f3;}
.service-image-surface {width:100%;overflow:hidden;border:1px solid #ccd9e0;border-radius:9px;box-shadow:0 12px 25px #143c4c18;background:#fff;}
.service-image-surface>img {display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:contain;}
.service-visual.service-content-photo {background:#e6edef;padding:0;}
.service-content-photo .service-image-surface {border:0;border-radius:0;box-shadow:none;}
.service-dialog.has-service-image .dialog-media {grid-template-columns:minmax(0,1fr);}
.service-dialog.has-service-image .dialog-service-visual {display:block;}
.service-dialog.has-service-image .service-image-visual {padding:24px;width:100%;max-width:none;}
.service-dialog.has-service-image .service-full-image {align-self:center;min-height:44px;display:inline-flex;align-items:center;justify-content:center;font-size:16px;line-height:1.4;}
@media(max-width:639px) {
 .service-visual.service-image-visual {padding:18px 12px;}
 .service-visual.service-content-photo {padding:0;}
 .service-dialog.has-service-image .service-image-visual {padding:18px 12px;}
}