/* Shared service-page proportions. No selectors reach the chatbot or backend. */
:root { --cs-hero-radius:30px; }
.cs-service-hero { background:linear-gradient(135deg,#fcfaf7 40%,#f3eff8); padding:64px 24px; }
.cs-hero-grid { max-width:1280px; margin:auto; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:56px; align-items:center; }
.cs-hero-copy { min-width:0; }
.cs-hero-breadcrumb { font-size:.85rem; margin-bottom:24px; color:var(--clinic-violet); }
.cs-hero-breadcrumb a { color:inherit; }
.cs-hero-title { font-size:clamp(2.25rem,3.4vw,3.35rem); line-height:1.13; margin:0 0 24px; color:var(--blue,#30136b); letter-spacing:-.025em; }
.cs-hero-intro { font-size:1.12rem; line-height:1.7; margin:0 0 28px; color:var(--blue,#30136b); }
.cs-primary-button { display:inline-flex; align-items:center; justify-content:center; background:#ff4885; color:white; padding:15px 23px; border:2px solid white; border-radius:12px; font-size:.95rem; font-weight:600; text-decoration:none; }
.cs-primary-button:hover { background:#ed3975; }
.cs-primary-button:focus-visible { outline:3px solid #7958b6; outline-offset:4px; }
.cs-hero-frame { width:100%; aspect-ratio:6/5; height:auto; overflow:hidden; border-radius:var(--cs-hero-radius); background:#f3edf8; border:1px solid #e9e1ef; box-shadow:0 18px 45px #51307010; }
main .cs-hero-frame>.cs-hero-media { display:block; width:100%; height:100%; max-width:none; max-height:none; margin:0; border-radius:0; object-position:center; object-fit:contain; }
main .cs-media-photo>.cs-hero-media { object-fit:cover; }
main .cs-media-phone>.cs-hero-media { padding:20px; }
main .cs-media-video>.cs-hero-media { object-fit:cover; }
.cs-hero-details { padding:32px 24px; background:#fcfaf7; }
.cs-hero-details>div { max-width:1280px; margin:auto; }
.cs-hero-details p,.cs-hero-details li { font-size:1rem; line-height:1.7; }
.cs-hero-details h2 { font-size:1.6rem; }
.cs-hero-details ul { display:flex; flex-wrap:wrap; gap:12px 35px; padding-left:20px; }
.cs-visual-section { padding:64px 24px; }
.cs-tinted { background:#f7f3f8; }
.cs-visual-row { max-width:1280px; margin:auto; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:64px; align-items:center; }
.cs-visual-row.cs-reverse>.cs-section-frame { order:2; }
.cs-visual-row h2,.cs-closing h2 { font-size:clamp(1.8rem,3vw,2.7rem); line-height:1.2; margin:0 0 20px; color:var(--blue,#30136b); }
.cs-visual-row p,.cs-closing p { font-size:1.1rem; line-height:1.7; }
.cs-section-frame { aspect-ratio:4/3; border-radius:30px; overflow:hidden; background:#f5f0f7; }
main .cs-section-frame img { display:block; width:100%; height:100%; object-fit:contain; border-radius:0; }
.cs-closing { max-width:800px; margin:auto; text-align:center; }
main .product-image-wrap>img[data-artwork="photo"] { width:100%; height:100%; aspect-ratio:3/2; object-fit:cover; object-position:center; }
main .product-image-wrap>img[data-artwork="graphic"],main img.ssp-category-img[data-artwork="graphic"] { object-fit:contain; object-position:center; background:#f5f0f7; }
main img.ssp-category-img[data-artwork="photo"] { object-fit:cover; }
@media(max-width:991px) {
 .cs-hero-grid,.cs-visual-row { gap:32px; }
 .cs-hero-title { font-size:2.4rem; }
 .cs-service-hero { padding:48px 24px; }
}
@media(max-width:767px) {
 .cs-service-hero { padding:32px 22px 40px; }
 .cs-hero-grid,.cs-visual-row { grid-template-columns:minmax(0,1fr); gap:30px; }
 .cs-hero-title { font-size:2.25rem; }
 .cs-hero-intro { font-size:1.05rem; }
 .cs-hero-breadcrumb { margin-bottom:18px; }
 .cs-hero-frame { width:100%; aspect-ratio:6/5; }
 .cs-visual-section { padding:40px 22px; }
 .cs-visual-row.cs-reverse>.cs-section-frame { order:0; }
 .cs-hero-details ul { display:block; }
 .cs-hero-details li { margin-bottom:.5rem; }
}
@media(prefers-reduced-motion:reduce) { .cs-service-hero * { scroll-behavior:auto; } }
main .product-image-wrap>.cs-section-art { position:static; display:block; width:100%; height:auto; aspect-ratio:4/3; max-width:none; margin:0; border-radius:30px; object-fit:contain; }

/* Phone mockups stand on their own, without a second card around the device. */
.cs-hero-frame.cs-media-phone,
.cs-hero-frame.cs-media-video,
.cs-hero-frame.cs-media-device {
 aspect-ratio:auto;
 overflow:visible;
 border:0;
 border-radius:0;
 background:transparent;
 box-shadow:none;
}
main .cs-media-phone>.cs-hero-media {
 width:auto;
 max-width:100%;
 height:auto;
 max-height:560px;
 margin-inline:auto;
 padding:0;
 object-fit:contain;
}
main .cs-media-video>.cs-hero-media,
main .cs-media-device>.cs-hero-media {
 width:100%;
 height:auto;
 object-fit:contain;
}
main .cs-media-phone>.cs-hero-media { mix-blend-mode:multiply; }

/* Homepage specialty strip: complete supplied website screenshots, same moving track. */
.cs-specialty-screenshots .client-logo {
 width:176px; height:auto; aspect-ratio:1168/784; padding:0;
 border-radius:10px; overflow:hidden;
}
.cs-specialty-screenshots .client-logo-img {
 display:block; width:100%; height:100%; max-width:100%;
 object-fit:contain; filter:none !important; opacity:1 !important;
}
@media(max-width:767px) {
 .cs-specialty-screenshots .client-logo { width:160px; }
}