.spatial-intro{background:linear-gradient(116deg,#09272a 4%,#16483e 70%,#236950);padding:clamp(50px,7vw,90px) 0;color:#fff;position:relative;overflow:hidden}
.spatial-intro:after{content:"";position:absolute;right:-100px;top:-180px;width:490px;height:490px;border:1px solid #96bd9b55;border-radius:50%;box-shadow:0 0 0 50px #ffffff08,0 0 0 100px #ffffff08;pointer-events:none}
.spatial-intro h1{font-size:clamp(3rem,7vw,6rem);line-height:1.04;margin:16px 0;letter-spacing:-.05em;color:#fff}.spatial-intro h1 em{font-style:normal;color:#d7ed78}.spatial-intro p{font-size:clamp(1rem,1.6vw,1.23rem);max-width:780px;line-height:1.7;color:#d6e9e2}
.spatial-kicker{font-size:.72rem;letter-spacing:.17em;font-weight:800;color:#bada65}.spatial-workspace{padding:42px 0 70px;background:#f3f7f3}.spatial-heading{display:flex;align-items:center;justify-content:space-between;gap:22px;margin-bottom:24px}.spatial-heading h2{font-size:clamp(1.55rem,3vw,2.45rem);color:#09272a;margin:8px 0}.spatial-heading p{color:#587369}.spatial-live{font-size:.76rem;font-weight:750;border:1px solid #d2e6d9;border-radius:50px;padding:9px 14px;color:#205a45;white-space:nowrap}.spatial-live i{display:inline-block;background:#50ad7d;width:8px;height:8px;border-radius:50%;margin-right:7px}
.spatial-tabs{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px;margin:0 0 18px}.spatial-tab{display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:8px;padding:15px 12px;min-height:112px;border:1px solid #d1e4da;border-radius:14px;background:#fff;color:#183b31;text-align:left;cursor:pointer;transition:background .18s,transform .18s,box-shadow .18s,border-color .18s;min-width:0}.spatial-tab:hover{transform:translateY(-3px);border-color:#79b39b;box-shadow:0 12px 25px #09272a12}.spatial-tab.active,.spatial-tab[aria-selected=true]{background:#16483e;color:white;border-color:#16483e;box-shadow:0 12px 23px #09272a24}.spatial-tab:focus-visible{outline:3px solid #bada65;outline-offset:3px}.spatial-tab-icon{font-size:1.25rem;line-height:1;color:#278965}.spatial-tab.active .spatial-tab-icon{color:#d7ed78}.spatial-tab-copy{display:flex;flex-direction:column;gap:4px;min-width:0}.spatial-tab strong{font-size:.86rem;line-height:1.3;overflow-wrap:anywhere}.spatial-tab small{font-size:.69rem;opacity:.74;line-height:1.3}
.spatial-description{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:20px 24px;background:#fff;border:1px solid #dce8df;border-radius:17px 17px 0 0}.spatial-tag{font-size:.66rem;color:#268263;letter-spacing:.14em;font-weight:800}.spatial-description h3{color:#09272a;font-size:1.4rem;margin:5px 0}.spatial-description p{color:#597368;font-size:.91rem;max-width:780px;line-height:1.6}.spatial-tip{color:#5a7968;font-size:.76rem;white-space:nowrap}.spatial-shell{border:1px solid #d4e4d9;border-top:0;overflow:hidden;border-radius:0 0 18px 18px;background:#e8eee7;box-shadow:0 24px 55px #09272a16}.spatial-frame-viewport{position:relative;width:100%;height:clamp(590px,81dvh,950px);overflow:hidden}.spatial-frame-viewport iframe{border:0;position:absolute;left:0;top:0;width:100%;height:109.8901%;transform:translateY(-9%);transform-origin:top center;background:#fff}.spatial-caveat{font-size:.81rem;color:#66796d;line-height:1.6;margin:16px 0 0}.spatial-contact{background:#09272a;padding:55px 0;color:#fff}.spatial-contact-inner{display:flex;align-items:center;justify-content:space-between;gap:28px}.spatial-contact h2{color:#fff;font-size:clamp(1.5rem,3vw,2.3rem);margin:9px 0}.spatial-contact p{color:#c8ded7;max-width:720px;line-height:1.6}
@media(max-width:1150px){.spatial-tabs{grid-template-columns:repeat(4,minmax(0,1fr))}}@media(max-width:720px){.spatial-tabs{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;padding:2px 1px 12px;scrollbar-width:thin}.spatial-tab{flex:0 0 158px;min-height:94px;scroll-snap-align:start}.spatial-heading{align-items:start;flex-direction:column}.spatial-live{align-self:flex-start}.spatial-description{padding:14px 16px;align-items:start}.spatial-tip{display:none}.spatial-frame-viewport{height:clamp(620px,83dvh,870px)}.spatial-contact-inner{align-items:start;flex-direction:column}.spatial-intro{padding:44px 0}.spatial-description h3{font-size:1.2rem}}
@media(prefers-reduced-motion:reduce){.spatial-tab{transition:none}}

/* Branded workspace heading: aligned with primary site header */
.spatial-description{background:#09272A;border-color:#31594E;color:#FFFFFF;}
.spatial-description .spatial-tag{color:#D7ED78;}
.spatial-description h3{color:#FFFFFF;}
.spatial-description p{color:#C8DED7;}
.spatial-description .spatial-tip{color:#C8DED7;}
.spatial-shell{border-color:#31594E;}

/* Pixel-based crop: independent of iframe height, tuned by viewport */
.spatial-frame-viewport iframe{top:-65px;height:calc(100% + 65px);transform:none;transform-origin:initial}
@media(max-width:1024px){.spatial-frame-viewport iframe{top:-55px;height:calc(100% + 55px)}}
@media(max-width:767px){.spatial-frame-viewport iframe{top:-45px;height:calc(100% + 45px)}}


/* Seamless join: remove the bright hairline between branded heading and map.
   The frame keeps the responsive fixed-pixel crop; this thin overlay hides
   the embedded app's remaining light seam without touching its controls. */
.spatial-description {
  border-bottom: 0;
  border-radius: 17px 17px 0 0;
  padding-bottom: 19px;
}
.spatial-shell {
  border-top: 0;
  border-color: #31594E;
  border-radius: 0 0 18px 18px;
}
.spatial-frame-viewport {
  background: #09272A;
  isolation: isolate;
}
.spatial-frame-viewport::after {
  content: "";
  position: absolute;
  z-index: 2;
  left: 0;
  right: 0;
  top: 0;
  height: 5px;
  background: #09272A;
  pointer-events: none;
}
@media(max-width:767px) {
  .spatial-frame-viewport::after {height: 4px;}
}

/* Seven-app responsive tab grid */
@media(min-width:1151px){.spatial-tabs{grid-template-columns:repeat(7,minmax(0,1fr))}}

/* Final Spatial Explorer refinement */
.spatial-tabs{grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.spatial-tab{min-height:86px;flex-direction:row;align-items:center;justify-content:flex-start;padding:13px 14px;gap:12px;border-radius:12px}
.spatial-tab-icon{flex:0 0 auto;font-size:1.45rem}.spatial-tab strong{font-size:.89rem}.spatial-tab small{font-size:.72rem}
.spatial-description{border-radius:14px 14px 0 0}.spatial-shell{border-radius:0 0 14px 14px}
.spatial-frame-viewport{height:clamp(620px,83dvh,960px)}
@media(max-width:1050px){.spatial-tabs{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:720px){.spatial-tabs{display:flex;overflow-x:auto;gap:8px;scroll-snap-type:x proximity;padding-bottom:12px}.spatial-tab{flex:0 0 174px;min-height:80px}.spatial-tab small{font-size:.7rem}.spatial-frame-viewport{height:max(620px,78dvh)}}
@media(max-width:480px){.spatial-intro h1{font-size:2.65rem}.spatial-frame-viewport{height:max(610px,77dvh)}.spatial-description{padding:15px}.spatial-workspace{padding:30px 0 45px}}

/* Compact, accessible, collapsed-by-default Explorer help */
.explorer-quickguide{margin:0 0 17px;background:#09272A;color:#fff;border:1px solid #31594E;border-radius:13px;overflow:hidden}
.explorer-quickguide summary{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:13px 18px;cursor:pointer;min-height:54px}
.explorer-quickguide summary::-webkit-details-marker{display:none}
.explorer-quickguide summary:focus-visible{outline:3px solid #D7ED78;outline-offset:-4px}
.quickguide-title{display:flex;align-items:center;gap:10px;flex-wrap:wrap;min-width:0}
.quickguide-title strong{color:#fff;font-size:.94rem}
.quickguide-icon{width:24px;height:24px;border-radius:50%;background:#D7ED78;color:#09272A;display:inline-flex;align-items:center;justify-content:center;font-size:.83rem;font-weight:800}
.quickguide-subtitle{color:#C8DED7;font-size:.78rem}
.quickguide-action{flex-shrink:0;color:#D7ED78;font-size:.82rem;font-weight:750}
.explorer-quickguide[open] .quickguide-action span{display:inline-block;transform:rotate(180deg)}
.quickguide-content{border-top:1px solid #31594E;padding:17px 18px 19px;background:#123A36}
.quickguide-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.quickguide-grid b{color:#D7ED78;font-size:.84rem}
.quickguide-grid p{color:#DCECE5;font-size:.78rem;line-height:1.55;margin:6px 0 0}
.quickguide-note{color:#C8DED7;font-size:.8rem;margin:17px 0 12px}
.quickguide-contact{display:inline-block;text-decoration:none;background:#D7ED78;color:#09272A;border-radius:8px;font-weight:750;font-size:.83rem;padding:10px 14px}
.quickguide-contact:hover{background:#BADA65}
@media(max-width:850px){.quickguide-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:580px){.explorer-quickguide summary{padding:11px 13px}.quickguide-subtitle{display:none}.quickguide-content{padding:15px}.quickguide-grid{grid-template-columns:1fr;gap:12px}}