/* Give the live experience the first screen, with a readable editorial column. */
.hero-demo .demo-thumbnails[hidden]{display:none!important}
.demo-workplace-map{position:relative;overflow:hidden;border-radius:14px;background:#101f19;border:1px solid #74937c44}
.demo-workplace-map svg{display:block;width:100%;height:auto}
.demo-workplace-route{fill:none;stroke:#d4efb4;stroke-width:4;stroke-dasharray:7 8;stroke-linecap:round}
.hero-demo .demo-workplace-marker{position:absolute;transform:translate(-50%,-50%);width:46px;height:46px;min-height:46px;padding:0;border-radius:50%;background:#163127;color:#e8f5e7;border:1px solid #a4baab;box-shadow:0 4px 18px #0007}
.hero-demo .demo-workplace-marker[aria-pressed=true]{background:#d4efb4;color:#142619!important;box-shadow:0 0 0 7px #d4efb419}
.demo-workplace-detail{min-height:170px;padding:20px 0 12px}
.hero-demo .demo-workplace-detail h3{font-size:24px;line-height:1.35;margin:8px 0;text-transform:none}
.demo-workplace-detail p{font-size:15px;line-height:1.6;color:#bfd0c4}
@media(max-width:600px){.demo-workplace-map{margin-inline:-8px}.hero-demo .demo-workplace-marker{width:44px;height:44px;min-height:44px;font-size:12px}.demo-workplace-map svg text{font-size:13px}.demo-workplace-detail{min-height:210px}}
.demo-venue-photo{margin:0 0 20px;border-radius:12px;overflow:hidden;background:#171021}
.demo-venue-photo img{display:block;width:100%;height:auto}
.demo-venue-photo figcaption{padding:12px 16px;font-size:12px;color:#d5c8d7}
.hero-demo[data-demo=venue] .demo-photo-detail h3{font-size:24px;line-height:1.3;text-transform:none}
.demo-prep-photo{margin:0 0 18px;overflow:hidden;border-radius:12px;background:#15271e}
.demo-prep-photo img{display:block;width:100%;height:clamp(220px,28vh,330px);object-fit:cover}
.demo-prep-photo figcaption{padding:9px 12px;font-size:12px;color:#b9ccbf}
.demo-prep-checklist{border:0;padding:0;margin:0;display:grid;grid-template-columns:1fr 1fr;gap:10px}
.demo-prep-checklist legend{font-size:12px;text-transform:uppercase;letter-spacing:.08em;margin-bottom:12px;color:#cfe4d3}
.demo-prep-item{display:flex;gap:12px;padding:14px;background:#ffffff06;border:1px solid #ffffff20;border-radius:10px;cursor:pointer}
.demo-prep-item:has(input:checked){background:#c8eab910;border-color:#aaca98}
.hero-demo .demo-prep-item input{position:static!important;inset:auto!important;width:20px!important;height:20px!important;opacity:1!important;appearance:auto;flex:0 0 20px;accent-color:#c9eab0;margin:2px 0 0}
.demo-prep-item strong{display:block;font-size:14px;color:#eef5ee}
.demo-prep-item small{display:block;margin-top:5px;color:#b7c9be;font-size:12px;line-height:1.5}
.hero-demo[data-demo=preparation] progress{width:100%;height:6px;margin-top:18px;accent-color:#c9eab0}
.hero-demo .demo-prep-progress{font-size:13px;color:#d3e5d4;margin:9px 0 0;line-height:1.6}
@media(max-width:600px){.demo-prep-checklist{grid-template-columns:1fr}.demo-prep-photo img{height:auto}.demo-prep-item{min-height:66px}}
.hero-demo .demo-thumbnail[aria-pressed=true] span{color:#142312!important}
.demo-photo-map{position:relative;border-radius:12px;overflow:hidden;background:#17291e}
.demo-photo-map>img{display:block;width:100%;height:auto}
.hero-demo .demo-photo-marker{position:absolute;transform:translate(-50%,-50%);border-radius:50%;width:48px;height:48px;min-height:48px;padding:0;border:2px solid white;background:#102b23;color:white!important;box-shadow:0 2px 16px #0008;font-variant-numeric:tabular-nums}
.hero-demo .demo-photo-marker[aria-pressed=true]{background:#d6f6b2;color:#142312!important;border-color:#d6f6b2}
.hero-demo .demo-photo-marker:active{transform:translate(-50%,-50%)!important}
.demo-photo-detail{padding:12px 0 0;min-height:150px}
.demo-photo-detail p{font-size:15px;line-height:1.6;color:#c2d4c8}
@media(max-width:600px){.hero-demo .demo-photo-marker{width:44px;height:44px;min-height:44px;font-size:12px}}
@media (min-width:1180px) {
  html body .demo-hero.demo-hero:not(#Hero),
  html body.aurora-on .demo-hero.demo-hero:not(#Hero) {
    display:grid!important;
    grid-template-columns:minmax(320px,.95fr) minmax(0,1.55fr);
    grid-template-rows:auto auto;
    column-gap:clamp(32px,3.5vw,72px);
    row-gap:16px;
    align-items:start;
    padding:clamp(120px,11vh,160px) clamp(32px,4.5vw,100px) 64px!important;
    overflow:clip!important;
  }
  html body .demo-hero.demo-hero:not(#Hero)>:is(.container,.portfolio-hero-content,.about-hero-content,.blog-container),
  html body.aurora-on .demo-hero.demo-hero:not(#Hero)>:is(.container,.portfolio-hero-content,.about-hero-content,.blog-container) {
    grid-column:1;grid-row:1;margin:0!important;padding:24px 0!important;
    min-width:0;width:100%;max-width:none!important;text-align:left!important;
    display:block!important;height:auto!important;align-self:start;
  }
  html body .demo-hero.demo-hero:not(#Hero) h1,
  html body.aurora-on .demo-hero.demo-hero:not(#Hero) h1 {
    font-family:Outfit,Arial,sans-serif!important;
    font-size:clamp(38px,3.4vw,66px)!important;font-weight:500!important;
    line-height:1.08!important;letter-spacing:-.045em!important;
    text-align:left!important;text-transform:none!important;
    margin:18px 0 24px!important;max-width:100%!important;
    text-wrap:balance;
  }
  html body .demo-hero.demo-hero:not(#Hero)>:is(.container,.portfolio-hero-content,.about-hero-content,.blog-container) p {
    text-align:left!important;font-size:17px!important;line-height:1.65!important;
    max-width:38ch!important;margin:16px 0!important;
  }
  html body .demo-hero.demo-hero:not(#Hero) .experience-service {display:block;text-align:left!important;line-height:1.7}
  html body .demo-hero.demo-hero:not(#Hero) .hero-content {display:block!important;height:auto!important;text-align:left!important}
  html body .demo-hero.demo-hero:not(#Hero) .hero-buttons {justify-content:flex-start;flex-wrap:wrap;gap:12px}
  html body .demo-hero.demo-hero:not(#Hero)>.hero-demo {
    grid-column:2;grid-row:1;min-width:0;width:100%;max-width:none;
    margin:0;padding:20px;border-radius:18px;
    box-shadow:0 30px 90px #0005;
  }
  html body .demo-hero.demo-hero:not(#Hero)>.service-showroom {padding:0}
  html body .demo-hero.demo-hero:not(#Hero)>.demo-source {
    grid-column:2;grid-row:2;width:100%;margin:0!important;font-size:11px!important;line-height:1.7!important;
  }
  html body .demo-hero.demo-hero:not(#Hero) .demo-stage {height:clamp(360px,46vh,620px)}
  html body .demo-hero.demo-hero:not(#Hero) .demo-heading {margin-bottom:16px}
  html body .demo-hero.demo-hero:not(#Hero) .service-showroom>.demo-heading {margin:0;padding:16px 20px}
  html body .demo-hero.demo-hero:not(#Hero) .demo-heading h2 {font-size:20px!important;line-height:1.35!important;text-align:left!important}
  html body .demo-hero.demo-hero:not(#Hero) .demo-heading p {font-size:13px!important}
  html body .demo-hero.demo-hero:not(#Hero) .demo-toolbar {gap:12px;margin:14px 0}
  html body .demo-hero.demo-hero:not(#Hero) .service-showroom>.demo-toolbar {margin:0;padding:14px 20px}
  html body .demo-hero.demo-hero:not(#Hero) .demo-scene-label {min-width:0}
  html body .demo-hero.demo-hero:not(#Hero) .demo-scene-label strong {font-size:17px}
  html body .demo-hero.demo-hero:not(#Hero) .demo-controls {flex-wrap:wrap}
  html body .demo-hero.demo-hero:not(#Hero) .demo-thumbnails:not(.photo-thumbnails) {display:flex;flex-wrap:wrap;gap:8px;overflow:visible}
  html body .demo-hero.demo-hero:not(#Hero) .demo-thumbnails:not(.photo-thumbnails) .demo-thumbnail {flex:1 1 90px;min-width:0;max-width:150px;border-radius:8px}
  html body .demo-hero.demo-hero:not(#Hero) .demo-thumbnail img {height:48px}
  html body .demo-hero.demo-hero:not(#Hero) .photo-thumbnails .demo-thumbnail img {height:auto}
  html body .demo-hero.demo-hero:not(#Hero) .demo-thumbnail span {font-size:11px;line-height:1.4}
  html body .demo-hero.demo-hero:not(#Hero) .experience-footer {align-items:flex-start;flex-wrap:wrap;gap:14px;padding:20px}
  html body .demo-hero.demo-hero:not(#Hero) .experience-photo-feature>img {height:clamp(380px,48vh,620px)}
  html body .demo-hero.demo-hero:not(#Hero) .demo-map {height:clamp(360px,48vh,600px)}
  html body .demo-hero.demo-hero:not(#Hero) .demo-flow {grid-template-columns:1fr}
  html body .demo-hero.demo-hero:not(#Hero) .demo-flow-card {min-height:0;padding:18px}
}