/* Service detail pages (retail.js, business.js): one summary section on the site's pale page hero,
   then a few questions. The heading, intro, tick list, facts and actions sit beside one photo or the
   Managed IT topic animation. */
.dsum h1 { max-width: 15ch; }
.dsum h1 span { display: block; color: var(--blue); }
.dsum .lead { max-width: 46ch; margin-top: 20px; }
.dsum-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 28px; max-width: 560px; margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--line); }
.dsum-list li { display: flex; gap: 10px; align-items: flex-start; font-size: 15px; line-height: 1.4; color: var(--ink); }
.dsum-list .icon { flex-shrink: 0; width: 18px; height: 18px; margin-top: 1px; color: var(--blue); }
.dsum-facts { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 20px; font-size: 13px; color: var(--muted); }
.dsum-facts span + span::before { content: '·'; margin-right: 14px; }
.dsum .actions { margin-top: 26px; }
.dsum .page-split > img { height: 480px; object-fit: cover; }

/* The business pages' animated illustrations (business-art.js). One loop each, slow and quiet;
   nothing moves with reduced motion. */
.dsum-art { display: grid; place-items: center; height: 480px; overflow: hidden; border-radius: 12px; background: radial-gradient(90% 80% at 50% 45%, #f4fafc 0%, #e3f0f5 70%); }
.art { width: min(94%, 540px); height: auto; overflow: visible; }
.art .a-ring { fill: none; stroke: #a9cbd8; stroke-width: 1.2; stroke-dasharray: 3 7; }
.art .a-link { fill: none; stroke: #bcd6e0; stroke-width: 1.5; }
.art .a-dash { stroke-dasharray: 4 6; }
.art .a-node-bg { fill: #fff; stroke: #c3dbe5; stroke-width: 1.2; }
.art .a-ic, .art .a-ic * { fill: none; stroke: #006e94; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.art .a-cloud, .art .a-box, .art .a-paper { fill: #fff; stroke: #006e94; stroke-width: 2; stroke-linejoin: round; }
.art .a-fold, .art .a-ant, .art .a-wave, .art .a-arc, .art .a-arrow { fill: none; stroke: #006e94; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.art .a-arc, .art .a-arrow { stroke: var(--cyan); stroke-width: 2.2; }
.art .a-shield { fill: #fff; stroke: #006e94; stroke-width: 3; stroke-linejoin: round; }
.art .a-tick { fill: none; stroke: var(--cyan); stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 100; animation: a-tick 8s ease-in-out infinite; }
.art .a-write { fill: none; stroke: #7fa9ba; stroke-width: 2.4; stroke-linecap: round; stroke-dasharray: 20; stroke-dashoffset: 20; animation: a-write 6s ease-in-out infinite var(--d, 0s); }
.art .a-comet { fill: none; stroke: var(--cyan); stroke-width: 4; stroke-linecap: round; stroke-dasharray: 7 140; stroke-dashoffset: 7; opacity: 0; animation: a-comet var(--t, 3s) cubic-bezier(.45, 0, .25, 1) infinite var(--d, 0s); }
.art .a-comet-in { stroke: #006e94; }
.art .a-comet-restore { stroke: #2e9b6f; stroke-width: 5; stroke-dasharray: 10 140; }
.art .a-ping { fill: none; stroke: var(--cyan); stroke-width: 2; opacity: 0; transform-box: fill-box; transform-origin: center; animation: a-ping var(--t, 3s) ease-out infinite var(--d, 0s); }
.art .a-spin { transform-box: view-box; transform-origin: var(--o, 240px 200px); animation: a-spin 48s linear infinite; }
.art .a-rev { animation-direction: reverse; }
.art .a-slow { animation-duration: 80s; }
.art .a-sweep { animation-duration: 7s; }
.art .a-sync { animation-duration: 9s; }
.art .a-glow { transform-box: fill-box; transform-origin: center; animation: a-glow 4s ease-in-out infinite; }
.art .a-threat { fill: #c47b38; opacity: 0; animation: a-threat 4.2s ease-in infinite var(--d, 0s); }
.art .a-burst { fill: none; stroke: var(--cyan); stroke-width: 2; opacity: 0; transform-box: fill-box; transform-origin: center; animation: a-burst 4.2s ease-out infinite var(--d, 0s); }
.art .a-ripple { fill: none; stroke: var(--cyan); stroke-width: 1.6; opacity: 0; transform-box: fill-box; transform-origin: center; animation: a-ripple 3.6s ease-out infinite var(--d, 0s); }
.art .a-wave { animation: a-wave 2.4s ease-in-out infinite var(--d, 0s); }
.art .a-led { fill: #c9dde6; animation: a-led 1.8s steps(1) infinite var(--d, 0s); }

@keyframes a-spin { to { transform: rotate(360deg); } }
@keyframes a-comet { 0% { stroke-dashoffset: 7; opacity: 0; } 8% { opacity: 1; } 80% { opacity: 1; } 92%, 100% { stroke-dashoffset: -100; opacity: 0; } }
@keyframes a-ping { 0% { opacity: .9; transform: scale(1); } 40%, 100% { opacity: 0; transform: scale(1.55); } }
@keyframes a-tick { 0% { stroke-dashoffset: 100; } 18%, 88% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: 100; } }
@keyframes a-write { 0% { stroke-dashoffset: 20; } 30%, 82% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: 20; } }
@keyframes a-glow { 0%, 100% { transform: scale(.85); opacity: .6; } 50% { transform: scale(1.18); opacity: 1; } }
@keyframes a-threat { 0% { transform: translate(0, 0); opacity: 0; } 12% { opacity: 1; } 58% { transform: translate(var(--dx), var(--dy)); opacity: 1; } 64%, 100% { transform: translate(var(--dx), var(--dy)); opacity: 0; } }
@keyframes a-burst { 0%, 56% { opacity: 0; transform: scale(.3); } 60% { opacity: .9; } 80%, 100% { opacity: 0; transform: scale(2); } }
@keyframes a-ripple { 0% { opacity: .7; transform: scale(.5); } 100% { opacity: 0; transform: scale(3.2); } }
@keyframes a-wave { 0%, 100% { opacity: .25; } 40% { opacity: 1; } }
@keyframes a-led { 0% { fill: #c9dde6; } 50% { fill: #00aeef; } }

@media (prefers-reduced-motion: reduce) {
  .art * { animation: none !important; }
  .art .a-tick { stroke-dashoffset: 0; }
  .art .a-write { stroke-dashoffset: 0; }
  .art .a-wave { opacity: 1; }
}

/* Questions straight after the summary, with less space than a full section. */
.dsum-faqs { padding-block: 80px; }
.faq-list details p a { color: var(--blue); text-decoration: underline; text-underline-offset: 3px; }

/* The "More about" links in a Managed IT topic panel. */
.msp-topic-more { display: flex; flex-wrap: wrap; gap: 8px 24px; margin-top: 22px; }
.msp-topic-more .text-link { font-size: 14px; }

@media (max-width: 960px) {
  .dsum .page-split > img { height: 360px; }
  /* Below desktop the panel takes the drawing's own proportions, so nothing is cropped. */
  .dsum-art { height: auto; aspect-ratio: 6 / 5; max-width: 640px; }
  .dsum-faqs { padding-block: 64px; }
}
@media (max-width: 600px) {
  .dsum-list { grid-template-columns: 1fr; gap: 10px; }
  .dsum .page-split > img { height: 280px; }
  .dsum-faqs { padding-block: 56px; }
}