.trajectory-stage {
  position: relative;
}

.trajectory-live-label {
  display: flex;
  align-items: baseline;
  gap: 14px;
  margin: 0 4px 12px;
}

.trajectory-live-label span {
  color: #d9eeaa;
  font: 700 9px Manrope;
  letter-spacing: .14em;
}

.trajectory-live-label b {
  font: 700 18px Manrope;
}

.trajectory-live-label small {
  margin-left: auto;
  color: rgba(255,255,255,.5);
  font-size: 10px;
}

#trajectory-viewer {
  width: 100%;
  height: 460px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 18px;
  overflow: hidden;
  background: #1a1a2e;
  box-shadow: 0 28px 80px rgba(0,0,0,.22);
}

.trajectory-sync-grid {
  display: grid;
  grid-template-columns: 1.35fr .65fr;
  gap: 14px;
}

.horizon-dots{display:flex;justify-content:center;gap:10px;margin-top:18px}.horizon-dots button{width:8px;height:8px;padding:0;border:0;border-radius:50%;background:rgba(255,255,255,.28);cursor:pointer;transition:.25s}.horizon-dots button.active{width:28px;border-radius:99px;background:var(--lime)}

.pano-card{grid-template-columns:1.32fr .68fr!important;background:linear-gradient(135deg,var(--sky),#edf4e8)!important}.pano-case-media{display:grid;grid-template-columns:1fr .72fr;gap:10px;padding:18px}.pano-preview,.pano-pose{position:relative;min-width:0;height:430px;overflow:hidden;border-radius:18px;background:#132f36}.pano-preview video{width:100%;height:100%;display:block;object-fit:cover}.pano-preview>span,.pano-pose>span{position:absolute;z-index:2;top:12px;left:12px;padding:6px 9px;border:1px solid rgba(255,255,255,.22);border-radius:999px;background:rgba(10,31,36,.72);color:#fff;font-size:8px;letter-spacing:.08em;text-transform:uppercase}.pano-pose>span{top:auto;bottom:12px}#pano-pose-viewer{width:100%;height:100%}#pano-pose-viewer canvas{display:block;width:100%!important;height:100%!important}.pano-case-tabs{display:flex;gap:7px;flex-wrap:wrap;margin-top:24px}.pano-case-tabs button{padding:9px 13px;border:1px solid rgba(23,52,59,.18);border-radius:999px;background:rgba(255,255,255,.5);color:var(--ink);cursor:pointer}.pano-case-tabs button.active{background:var(--ink);color:#fff}.pano-copy{padding-left:22px!important}

.trajectory-video-pane,
.trajectory-3d-pane {
  position: relative;
  overflow: hidden;
  border-radius: 18px;
  background: #1a1a2e;
}

.trajectory-video-pane video {
  display: block;
  width: 100%;
  height: 460px;
  object-fit: cover;
  background: #071a1b;
}

.trajectory-video-pane > span,
.trajectory-3d-pane > span {
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 2;
  padding: 7px 10px;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 999px;
  background: rgba(7,26,27,.7);
  color: rgba(255,255,255,.76);
  font-size: 9px;
  pointer-events: none;
  backdrop-filter: blur(8px);
}

#trajectory-viewer canvas {
  display: block;
  width: 100% !important;
  height: 100% !important;
}

@media (max-width: 600px) {
  #trajectory-viewer { height: 390px; }
  .trajectory-live-label small { display: none; }
}

@media (max-width: 900px) {
  .trajectory-sync-grid { grid-template-columns: 1fr; }
  .trajectory-video-pane video { height: auto; aspect-ratio: 16 / 9; }
  .pano-card{grid-template-columns:1fr!important}.pano-case-media{grid-template-columns:1fr}.pano-preview,.pano-pose{height:340px}.pano-copy{padding:28px!important}
}

.reconstruction-filters {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
  margin: 26px 0 22px;
}

.recon-filter {
  padding: 9px 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  text-transform: capitalize;
  cursor: pointer;
}

.recon-filter.active {
  color: #fff;
  background: var(--ink);
}

.reconstruction-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
}

.reconstruction-card {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 15px;
  background: #fff;
  color: var(--ink);
  text-decoration: none;
  box-shadow: 0 12px 32px rgba(20,50,48,.07);
  transition: transform .25s ease, box-shadow .25s ease;
}

.reconstruction-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 44px rgba(20,50,48,.13);
}

.reconstruction-media {
  display: grid;
  place-items: center;
  height: 205px;
  padding: 8px;
  background: #f8f8f5;
}

.reconstruction-media img {
  width: 100%;
  height: 100%;
  border: 0;
  border-radius: 0;
  object-fit: contain;
  transition: transform .3s ease;
}

.reconstruction-card:hover img { transform: scale(1.025); }
.reconstruction-card > div:last-child { padding: 13px 15px 15px; }
.reconstruction-card b { display: block; font: 700 13px Manrope; }
.reconstruction-card span { display: block; margin-top: 4px; color: var(--teal); font-size: 10px; text-transform: capitalize; }
.reconstruction-more { display: block; margin: 25px auto 0; padding: 11px 18px; border: 1px solid var(--ink); border-radius: 999px; background: transparent; color: var(--ink); cursor: pointer; }
.reconstruction-more[hidden] { display: none; }

@media (max-width: 900px) {
  .reconstruction-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 520px) {
  .reconstruction-grid { grid-template-columns: 1fr; }
  .reconstruction-media { height: 240px; }
}

.caption-case-tabs {
  display: flex;
  gap: 8px;
  margin: 0 0 22px;
  padding: 4px 0 9px;
  overflow-x: auto;
  scrollbar-width: thin;
}

.caption-case-tab {
  flex: 0 0 auto;
  padding: 9px 13px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  text-transform: capitalize;
}

.caption-case-tab span {
  margin-right: 7px;
  color: var(--teal);
  font-size: 8px;
  text-transform: uppercase;
}

.caption-case-tab.active { background: var(--ink); color: #fff; }
.caption-case-tab.active span { color: #d9eeaa; }
.metric.accent{background:var(--lime)}.horizon{background:#17343b}.trajectory,footer{background:#102a31}.button.primary,.trajectory-tab.active{background:var(--lime)}.eyebrow{color:var(--lime)}
.hero-copy.reveal.visible{transform:translate(-50%,-50%)}

.caption-case-explorer {
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: 22px;
  background: #fff;
  box-shadow: 0 24px 70px rgba(20,50,48,.08);
}

.web-case-head,
.web-card-title {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
}

.web-case-head { margin-bottom: 17px; }
.web-case-head > div { display: flex; align-items: baseline; gap: 10px; }
.web-case-head span { color: var(--teal); font: 700 9px Manrope; text-transform: uppercase; letter-spacing: .1em; }
.web-case-head h3 { font: 700 25px Manrope; text-transform: capitalize; }
.web-case-head p { color: var(--muted); font-size: 10px; }

.web-case-frames {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 18px;
}

.web-case-frames figure { position: relative; overflow: hidden; border-radius: 9px; background: #eef1ec; }
.web-case-frames img { display: block; width: 100%; aspect-ratio: 16/9; object-fit: cover; }
.web-case-frames figcaption { position: absolute; right: 6px; top: 6px; padding: 3px 6px; border-radius: 999px; background: rgba(7,28,29,.72); color: #fff; font-size: 8px; }

.web-case-main { display: grid; grid-template-columns: .72fr 1.28fr; gap: 14px; align-items: stretch; }
.web-pose-card,
.web-global-card,
.web-temporal { border: 1px solid var(--line); border-radius: 14px; background: #f8f8f5; }
.web-pose-card,
.web-global-card { padding: 16px; }
.web-card-title { margin-bottom: 12px; }
.web-card-title b { font: 700 13px Manrope; }
.web-card-title span { color: var(--muted); font-size: 8px; }

.web-pose-card svg { display: block; width: 100%; height: 390px; border-radius: 10px; background-image: linear-gradient(rgba(20,50,48,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(20,50,48,.045) 1px,transparent 1px); background-size: 28px 28px; }
.web-pose-card polyline { fill: none; stroke: url(#web-pose-gradient); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.web-pose-card circle { fill: #2c7bb6; stroke: #fff; stroke-width: .7; }
.web-pose-star { fill: #d7191c; font-size: 7px; text-anchor: middle; dominant-baseline: central; }
.web-pose-legend { display: flex; justify-content: center; gap: 18px; color: var(--muted); font-size: 8px; }
.web-pose-legend span:first-child { color: #2c7bb6; }
.web-pose-legend span:last-child { color: #d7191c; }

.web-controlled { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 6px; margin-bottom: 10px; }
.web-controlled span { padding: 9px 6px; border-radius: 7px; background: var(--teal); color: #fff; text-align: center; font: 700 9px Manrope; }
.web-controlled span:nth-child(2) { background: #438c8c; }
.web-controlled span:nth-child(3) { background: #6daa72; }
.web-controlled span:nth-child(4) { background: #d49a45; }
.web-caption-field { display: grid; grid-template-columns: 126px 1fr; gap: 11px; padding: 10px 7px; border-top: 1px solid var(--line); }
.web-caption-field b { color: var(--teal); font: 700 9px Manrope; }
.web-caption-field p { color: #394d4c; font-size: 10px; line-height: 1.42; }
.web-caption-field mark { padding: 0 2px; background: transparent; color: #c4513b; font-weight: 700; }

.web-temporal { margin-top: 14px; padding: 16px; }
.web-segment-timeline { display: flex; overflow: hidden; height: 25px; margin-bottom: 9px; border-radius: 5px; }
.web-segment-timeline span { display: grid; place-items: center; min-width: 22px; color: #fff; font: 700 7px Manrope; white-space: nowrap; }
.web-caption-segment { display: grid; grid-template-columns: 220px 1fr; gap: 12px; padding: 9px 11px; border-top: 1px solid var(--line); border-left: 5px solid var(--segment-color); background: rgba(255,255,255,.62); }
.web-caption-segment b { color: var(--segment-color); font-size: 9px; }
.web-caption-segment p { color: #425756; font-size: 10px; line-height: 1.4; }

@media (max-width: 900px) {
  .web-case-frames { grid-template-columns: repeat(3,1fr); }
  .web-case-main { grid-template-columns: 1fr; }
  .web-pose-card svg { height: 330px; }
}

@media (max-width: 600px) {
  .caption-case-explorer { padding: 14px; }
  .web-case-head { align-items: flex-start; flex-direction: column; }
  .web-case-frames { grid-template-columns: repeat(2,1fr); }
  .web-controlled { grid-template-columns: repeat(2,1fr); }
  .web-caption-field,
  .web-caption-segment { grid-template-columns: 1fr; }
}

/* ─── Interactive geographic map ─── */
.geo-map{position:relative;margin-top:14px;padding:18px;border-radius:22px;background:linear-gradient(180deg,#fbfaf5,#f2f0e7);border:1px solid var(--line);box-shadow:0 24px 70px rgba(20,50,48,.08)}
.geo-canvas{position:relative;line-height:0}
.geo-basemap{display:block;width:100%;height:auto;border-radius:14px;-webkit-user-drag:none;user-select:none}
.geo-hotspots{position:absolute;inset:0;pointer-events:none}
.geo-hotspot{position:absolute;transform:translate(-50%,-50%);width:28px;height:28px;padding:0;border:0;background:transparent;cursor:pointer;pointer-events:auto}
.geo-hotspot i{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:12px;height:12px;border-radius:50%;background:#f7ad86;border:2px solid #fff;box-shadow:0 0 0 2px rgba(247,173,134,.5),0 3px 7px rgba(0,0,0,.28);transition:.2s}
.geo-hotspot::before{content:"";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:12px;height:12px;border-radius:50%;background:rgba(247,173,134,.5);animation:geoPulse 2.4s ease-out infinite;pointer-events:none}
.geo-hotspot:hover i,.geo-hotspot.active i{background:#e8663f;box-shadow:0 0 0 3px rgba(232,102,63,.38),0 3px 9px rgba(0,0,0,.32);transform:translate(-50%,-50%) scale(1.18)}
@keyframes geoPulse{0%{width:12px;height:12px;opacity:.65}100%{width:44px;height:44px;opacity:0}}
.geo-pop{position:absolute;z-index:6;left:0;top:0;width:250px;padding:12px;border-radius:16px;background:rgba(9,31,33,.93);color:#fff;box-shadow:0 22px 55px rgba(0,0,0,.42);backdrop-filter:blur(10px);opacity:0;transform:translateY(6px) scale(.97);transition:opacity .16s,transform .16s;pointer-events:none;line-height:1.2}
.geo-pop.show{opacity:1;transform:none}
.geo-pop-head b{display:block;font:700 14px Manrope}
.geo-pop-head span{display:block;margin-top:3px;color:#9BCEC1;font-size:9px;text-transform:uppercase;letter-spacing:.09em}
.geo-pop-vids{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:6px;margin-top:10px}
.geo-vid{position:relative;aspect-ratio:16/10;overflow:hidden;border-radius:9px;background:#12333a}
.geo-vid video{width:100%;height:100%;object-fit:cover;display:block}
.geo-legend{display:flex;align-items:center;justify-content:center;gap:10px;margin-top:14px;color:var(--muted);font-size:10px;letter-spacing:.03em}
.geo-legend em{font-style:normal;color:var(--teal);font-weight:700}
.geo-scale{width:120px;height:8px;border-radius:6px;background:linear-gradient(90deg,#dfeee7,#a9d6c9,#7fbfc0,#5b9fbd,#3d6f86,#22414c)}
.geo-hint{text-align:center;margin-top:8px;color:var(--muted);font-size:11px}
@media(max-width:600px){.geo-pop{width:210px}.geo-hotspot{width:34px;height:34px}}

/* ─── "Three complementary sources" — refined dark band with pastel-accented cards ─── */
.sources{background:radial-gradient(120% 150% at 12% -10%,#18434c 0%,#103036 45%,#0b2429 100%);color:#eaf4ef}
.sources .kicker.light{color:#9BCEC1}
.source-copy h2{color:#f5faf6}
.source-cards{border:0!important;display:grid;grid-template-columns:repeat(3,1fr);gap:20px;max-width:1180px;margin:52px auto 0}
.source-cards article{position:relative;overflow:hidden;padding:34px 30px 30px;border:1px solid rgba(255,255,255,.1)!important;border-radius:20px;background:rgba(255,255,255,.045);transition:transform .35s,box-shadow .35s,border-color .35s}
.source-cards article::before{content:"";position:absolute;top:0;left:0;right:0;height:4px;background:var(--accent)}
.source-cards article:nth-child(1){--accent:linear-gradient(90deg,#67A2C5,#9cc9df)}
.source-cards article:nth-child(2){--accent:linear-gradient(90deg,#9BCEC1,#c4e6dd)}
.source-cards article:nth-child(3){--accent:linear-gradient(90deg,#f7ad86,#f9c9a9)}
.source-cards article:hover{transform:translateY(-6px);border-color:rgba(255,255,255,.24)!important;box-shadow:0 26px 60px rgba(0,0,0,.34)}
.source-cards span{display:inline-grid;place-items:center;width:36px;height:36px;border-radius:11px;background:rgba(255,255,255,.09);color:#cfe6dd;font:700 12px Manrope}
.source-cards h3{color:#f5faf6;font:700 24px Manrope;margin:22px 0 12px}
.source-cards p{color:rgba(234,244,239,.7);font-size:13px;line-height:1.62}

/* ─── "Build with Sekai2" — soft pastel gradient card ─── */
.access-box{background:linear-gradient(135deg,#eef5f2 0%,#e2edf0 46%,#f4ece1 100%);border:1px solid var(--line);box-shadow:0 30px 80px rgba(20,50,48,.09)}
.access .kicker{color:var(--teal)}
.access-box .button.dark{background:linear-gradient(135deg,#18434c,#0f2d33);border:0;color:#fff}
.access-box .button.line{border:1px solid rgba(23,52,59,.4)}
@media(max-width:900px){.source-cards{grid-template-columns:1fr}}

/* ─── Explore grid: spans are computed per filter so every row is exactly full ─── */
.dataset-grid{grid-auto-flow:row}
.dataset-grid .data-card:nth-child(n){grid-column:inherit}
.dataset-grid .data-card[data-span="4"]{grid-column:span 4}
.dataset-grid .data-card[data-span="8"]{grid-column:span 8}
.dataset-grid .data-card[data-span="12"]{grid-column:span 12}
.dataset-grid .data-card[data-span="4"] .card-media{height:270px}
.dataset-grid .data-card[data-span="8"] .card-media,.dataset-grid .data-card[data-span="12"] .card-media{height:340px}
@media(max-width:900px){
  .dataset-grid .data-card[data-span]{grid-column:span 6!important}
  .dataset-grid .data-card[data-span] .card-media{height:250px}
}
@media(max-width:600px){
  .dataset-grid .data-card[data-span]{grid-column:span 12!important}
  .dataset-grid .data-card[data-span] .card-media{height:240px}
}

/* ─── Interactive country map ─── */
.geo-svg-host{line-height:0}
.geo-svg-host svg{display:block;width:100%;height:auto}
.geo-svg-host path{stroke:#fff;stroke-width:1.1;vector-effect:non-scaling-stroke}
.geo-svg-host path.on{cursor:pointer;transition:filter .16s,opacity .16s}
.geo-svg-host path.on:hover,.geo-svg-host path.hot{filter:brightness(1.1) saturate(1.25);stroke:#0d2b31;stroke-width:1.9}
.geo-svg-host path.off{pointer-events:none}
.geo-fallback{padding:40px;text-align:center;color:var(--muted);font-size:12px}
.geo-pop{width:270px}
.geo-vid em{position:absolute;left:5px;bottom:4px;font-style:normal;font-size:7px;letter-spacing:.05em;text-transform:uppercase;color:rgba(255,255,255,.9);text-shadow:0 1px 3px rgba(0,0,0,.85)}
.geo-pop-foot{margin-top:8px;color:rgba(155,206,193,.85);font-size:9px;letter-spacing:.03em}

/* ─── Structured semantics: video fills the media column so long captions
       never leave dead space beneath it ─── */
.annotation-media{display:flex;flex-direction:column;gap:12px}
.focus-frame{flex:1 1 auto;height:auto;min-height:340px}
.focus-frame video{width:100%;height:100%;object-fit:cover;display:block}
.segment-strip{margin-top:0}
.field{padding:13px 0}
.field p{font-size:11.5px;line-height:1.52}

/* ─── Panoramic: video gets the space; metadata collapses to one line below ─── */
.pano-card{display:block!important;grid-template-columns:none!important;padding:16px;background:linear-gradient(135deg,#e8f2f6,#f2f4ea)!important;min-height:0}
.pano-case-media{display:grid;grid-template-columns:minmax(0,2.35fr) minmax(0,1fr);gap:12px;padding:0}
.pano-preview{height:auto;aspect-ratio:2/1;background:#0f2a31}
.pano-preview video{width:100%;height:100%;object-fit:contain;background:#0f2a31}
.pano-pose{height:auto}
.pano-bar{display:flex;align-items:center;flex-wrap:wrap;gap:10px 16px;margin-top:14px;padding-top:13px;border-top:1px solid rgba(23,52,59,.14)}
.pano-bar .tag{flex:none}
.pano-bar b{flex:none;font:700 17px Manrope;letter-spacing:-.02em}
.pano-bar p{flex:1 1 220px;min-width:0;color:var(--muted);font-size:12px;line-height:1.4}
.pano-case-tabs{margin-top:0!important;flex:none}
.pano-case-tabs button{padding:8px 12px;font-size:12px}
@media(max-width:900px){
  .pano-case-media{grid-template-columns:1fr}
  .pano-preview{aspect-ratio:2/1}
  .pano-pose{height:300px}
  .pano-bar{align-items:flex-start;flex-direction:column}
}

/* Country popup: one hero preview plus two supporting clips reads far better than
   three equal slivers at this width. */
.geo-pop{width:304px}
.geo-pop-vids{display:grid;grid-template-columns:1fr 1fr;grid-auto-flow:row;gap:6px}
.geo-pop-vids .geo-vid:first-child{grid-column:1 / -1}
.geo-vid{aspect-ratio:16/9}
.geo-vid em{font-size:7.5px}
@media(max-width:600px){.geo-pop{width:250px}}

/* Rows are computed to be exactly full, so make every card in a row the same
   height — a wide lead card next to a normal one must not look ragged. */
.dataset-grid .data-card{display:flex;flex-direction:column}
.dataset-grid .data-card .card-body{flex:1}
.dataset-grid .data-card[data-span="4"] .card-media,
.dataset-grid .data-card[data-span="6"] .card-media,
.dataset-grid .data-card[data-span="8"] .card-media{height:300px}
.dataset-grid .data-card[data-span="6"]{grid-column:span 6}
.dataset-grid .data-card[data-span="12"] .card-media{height:360px}
@media(max-width:900px){
  .dataset-grid .data-card[data-span]{grid-column:span 6!important}
  .dataset-grid .data-card[data-span] .card-media{height:250px!important}
}
@media(max-width:600px){
  .dataset-grid .data-card[data-span]{grid-column:span 12!important}
  .dataset-grid .data-card[data-span] .card-media{height:240px!important}
}

/* ─── Dataset-composition hero (module 61 teaser wheel) ─── */
.composition-figure{display:block;position:relative;padding:10px;border:1px solid var(--line);border-radius:22px;background:#fff;text-decoration:none;box-shadow:0 24px 70px rgba(20,50,48,.10);transition:transform .3s,box-shadow .3s}
.composition-figure:hover{transform:translateY(-3px);box-shadow:0 30px 80px rgba(20,50,48,.16)}
.composition-figure img{display:block;width:100%;height:auto;border-radius:14px}
.composition-figure span{position:absolute;right:24px;top:24px;padding:8px 12px;border-radius:999px;background:rgba(9,31,33,.82);color:#fff;font-size:10px}
@media(max-width:600px){.composition-figure span{display:none}}