/* Only the two approved additions and the space required for the new section. */
:root { --sp-prototype-height: 1040px; }
.wrap { height: calc((16914px + var(--sp-prototype-height)) * var(--scale)); }
.canvas { height: calc(16914px + var(--sp-prototype-height)); }
.wide-img[src="/assets/service-experience/final-solution-card.webp"],
.wide-img[src="/assets/service-experience/final-solution-seasonal.webp"],
.wide-img[src="/assets/service-experience/final-solution-tags.webp"],
.footer, .footer-title, .footer-meta, .footer-copy {
  transform: translateY(var(--sp-prototype-height));
}
.sp-prototype-link { display: inline-flex; align-items: center; justify-content: center; gap: 24px; padding: 17px 22px; border-radius: 6px; background: #006241; color: #fff; font-size: 16px; font-weight: 600; line-height: 1.3; text-decoration: none; transition: background 160ms; }
.sp-prototype-link:hover { background: #004e34; }
.sp-prototype-link:focus-visible, .sp-prototype-preview:focus-visible { outline: 3px solid #b98a27; outline-offset: 5px; }
.sp-prototype-hero { position: absolute; top: 884px; left: 98px; font-size: max(18px, calc(10px / var(--scale))); padding: max(17px, calc(7px / var(--scale))) max(22px, calc(10px / var(--scale))); gap: 16px; }
.sp-prototype { position: absolute; left: 0; top: 14775px; width: calc(1440px * var(--scale)); transform: scale(calc(1 / var(--scale))); transform-origin: top left; padding: clamp(28px, 4.1vw, 60px) clamp(20px, 6.8vw, 98px); background: #fff; }
.sp-prototype h2 { font-size: clamp(25px, 2.7vw, 38px); font-weight: 600; line-height: 1.18; letter-spacing: -.025em; }
.sp-prototype-intro { margin: 12px 0 26px; color: #59635d; font-size: 16px; line-height: 1.6; }
.sp-prototype-preview { position: relative; display: flex; align-items: center; justify-content: center; padding: 20px 20px 42px; background: #f2f1ec; border-radius: 8px; overflow: hidden; }
.sp-prototype-preview img { width: min(76%, 800px); height: auto; }
.sp-preview-open { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: grid; place-items: center; width: 70px; height: 70px; background: #fff; color: #006241; border-radius: 50%; box-shadow: 0 3px 24px #0002; font-size: 30px; transition: background 160ms; }
.sp-prototype-preview:hover .sp-preview-open { background: #e4eee8; }
.sp-preview-label { position: absolute; bottom: 16px; left: 22px; color: #333e37; font-size: 11px; font-weight: 600; letter-spacing: .07em; }
.sp-prototype-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px; margin-top: 26px; }
.sp-prototype-actions p { color: #59635d; font-size: 14px; line-height: 1.5; }
.sp-prototype-note { margin-top: 17px; color: #69736d; font-size: 12px; line-height: 1.5; }
.sp-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
@media (max-width: 600px) { .sp-prototype-preview { padding: 16px 8px 40px; } .sp-prototype-preview img { width: 100%; } .sp-preview-open { width: 48px; height: 48px; font-size: 24px; } .sp-prototype-actions { align-items: stretch; flex-direction: column; } .sp-prototype-actions .sp-prototype-link { font-size: 14px; } }
@media (prefers-reduced-motion: reduce) { .sp-prototype-link, .sp-preview-open { transition: none; } }