.service-page .page-hero { padding-bottom:48px; }
.service-page .two-column>* { min-width:0; }
.service-page .service-example h2 { overflow-wrap:anywhere; hyphens:auto; }
.service-explorer { padding:0 0 var(--section-space); background:#0d1116; }
.service-explorer-heading { display:flex; align-items:baseline; justify-content:space-between; gap:20px; margin-bottom:18px; }
.service-explorer-heading .eyebrow { margin:0; }
.service-explorer-hint { color:#b8c2ce; font-size:14px; margin:0; }
.service-explorer-hint .with-scene { display:none; }
.scene-ready .service-explorer-hint .with-scene { display:inline; }
.scene-ready .service-explorer-hint .without-scene { display:none; }
.service-explorer-frame { display:grid; grid-template-columns:minmax(0,2.25fr) minmax(280px,1fr); overflow:hidden; border:1px solid #ffffff24; border-radius:12px; background:#141b24; }
.service-scene-visual { position:relative; align-self:start; margin:0; background:#20262d; }
.service-scene-visual>img { display:block; width:100%; height:auto; }
.scene-point { position:absolute; z-index:1; width:46px; height:46px; padding:0; transform:translate(-50%,-50%); border:2px solid #fff; border-radius:50%; color:#fff; background:#111820ed; font:650 15px var(--font-body); cursor:pointer; box-shadow:0 2px 15px #0007; transition:background .18s,box-shadow .18s; }
.scene-point[hidden] { display:none; }
.scene-point:hover,.scene-point.is-active { background:#eb2440; color:#fff; box-shadow:0 0 0 6px #fff3,0 3px 18px #0006; }
.scene-point:focus-visible { outline:3px solid #fff; outline-offset:5px; box-shadow:0 0 0 9px #171c25; }
.service-scene-panel { padding:clamp(22px,2.5vw,34px); align-self:center; min-width:0; }
.service-scene-panel h2 { font-family:var(--font-body); font-size:clamp(23px,2.1vw,30px); font-weight:600; line-height:1.25; letter-spacing:-.035em; margin:0 0 24px; }
.scene-details { border-top:1px solid #ffffff25; }
.scene-details:last-of-type { border-bottom:1px solid #ffffff25; }
.scene-details>summary { display:flex; align-items:center; gap:12px; padding:16px 0; list-style:none; cursor:pointer; color:#d4dce5; font-size:15px; font-weight:550; line-height:1.5; }
.scene-details>summary::-webkit-details-marker { display:none; }
.scene-details>summary::after { content:'+'; margin-left:auto; font-size:20px; font-weight:400; color:#b9c3ce; }
.scene-details[open]>summary { color:#fff; }
.scene-details[open]>summary::after { content:'−'; }
.scene-details>summary>span { display:grid; place-items:center; flex:0 0 25px; width:25px; height:25px; border:1px solid #687280; border-radius:50%; font-size:12px; }
.scene-details[open]>summary>span { color:#fff; border-color:#ff5266; background:#e4203c; }
.scene-details>summary>span,.scene-details[open]>summary>span { transform:none; transition:none; }
.scene-details p { font-size:14px; line-height:1.8; color:#c0cad6; margin:0 0 18px; }
.service-explorer-caption { margin:16px 0 0; font-size:14px; line-height:1.75; color:#b8c2ce; max-width:83ch; }
@media (min-width:1001px) {
  /* Keep the image uncropped: hotspot coordinates stay attached to their objects. */
  .service-scene-visual { align-self:center; height:auto; }
}
@media (max-width:1000px) {
  .service-explorer-frame { grid-template-columns:1fr; }
  .service-scene-panel { padding:26px; }
  .service-scene-panel h2 { max-width:30ch; margin-bottom:20px; }
}
@media (max-width:600px) {
  .service-page .page-hero { padding-bottom:32px; }
  .service-explorer-heading { display:block; }
  .service-explorer-hint { margin-top:12px; font-size:14px; }
  .service-explorer-frame { border-radius:8px; }
  .service-scene-panel { padding:24px 20px; }
  .scene-point { width:44px; height:44px; font-size:14px; }
  .service-explorer-caption { font-size:14px; }
}
@media (prefers-reduced-motion:reduce) {
  .scene-point { transition:none; }
}