.site-demo-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}.site-demo-card{min-width:0;background:var(--surface)}.site-demo-cover{--preview-width:1200px;--preview-height:1153.412px;position:relative;overflow:hidden;background:#f1f0e6}.preview-browser{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:12px 16px;background:#30302e;color:#f4f4ec;font-size:13px;line-height:1.4}.preview-viewport{position:relative;aspect-ratio:850/817;overflow:hidden;container-type:inline-size}.preview-viewport iframe{position:absolute;top:0;left:0;width:var(--preview-width);height:var(--preview-height);border:0;pointer-events:none;transform:scale(var(--preview-scale,.3333));transform-origin:top left;background:#f1f0e6}.preview-open{position:absolute;inset:0;display:flex;align-items:end;justify-content:end;padding:16px}.preview-open>span{font-size:13px;background:#161616;color:#f4f4ec;padding:10px 14px;transform:translateY(8px);opacity:0;transition:opacity 220ms,transform 220ms}.preview-open:hover>span,.preview-open:focus-visible>span{opacity:1;transform:translateY(0)}.site-demo-caption{padding:24px}.site-demo-caption h3{font-size:23px}.site-demo-caption p{margin-top:12px;min-height:54px;font-size:16px}.site-demo-caption .text-link{margin-top:24px;font-size:16px}.demo-section-foot{display:flex;justify-content:space-between;gap:32px;margin-top:28px;align-items:start}.demo-section-foot p{font-size:14px;max-width:60ch;color:var(--muted)}.demo-section-foot .text-link{white-space:nowrap;margin:0}.demo-gallery{padding-top:50px}.demo-gallery h1{font-size:clamp(40px,5vw,72px);max-width:650px}.gallery-note{margin-top:24px;color:var(--muted);font-size:16px}.demo-gallery .section-intro>div>p:first-child{font-size:18px;max-width:50ch}.demo-gallery-close{margin-top:80px;background:var(--surface);padding:40px}.demo-gallery-close p{margin:20px 0;max-width:60ch}.demo-gallery-close h2{font-size:36px}.compact-home .service-list{grid-template-columns:repeat(3,minmax(0,1fr))}.compact-home .service{display:block;padding:30px}.compact-home .service h3{font-size:26px}.compact-home .service p{min-height:80px}.compact-home .service .text-link{font-size:14px}.compact-home .team-note:empty{display:none}.demo-credits{margin-top:32px;background:var(--surface);padding:0 24px}.demo-credits summary{font-size:16px;padding:20px 0}.demo-credits p{font-size:16px;max-width:65ch;padding:0 0 18px}.demo-credits a{text-decoration:underline;text-underline-offset:4px}
@media(max-width:1000px){.compact-home .service-list{grid-template-columns:1fr}.compact-home .service p{min-height:0}.site-demo-grid{gap:16px}.site-demo-caption{padding:20px}.site-demo-caption h3{font-size:20px}.preview-browser{padding:10px 12px;font-size:13px}}
@media(max-width:650px){.site-demo-grid{grid-template-columns:1fr;gap:28px}.site-demo-caption p{min-height:0}.demo-section-foot{flex-direction:column;gap:20px}.demo-gallery{padding-top:24px}.demo-gallery-close{padding:28px 24px}.demo-gallery-close h2{font-size:30px}.preview-open>span{opacity:1;transform:none}.preview-browser{padding:12px 16px}}
@media(prefers-reduced-motion:reduce){.preview-open>span{transition:none;transform:none}}

/* Size the desktop preview from its card, including the first paint and fractional widths. */
@supports (transform:scale(calc(100cqw / 1200px))){.preview-viewport iframe{transform:scale(calc(100cqw / var(--preview-width)))}}

/* Match the café composition to the supplied 850 × 817 view. */
.site-demo-cover[data-preview-width="850"]{--preview-width:850px;--preview-height:817px}