/* Layout adapter only: supplied hero colors, copy and video policy stay intact. */
#kartta { position:relative; height:100vh; height:100dvh; isolation:isolate; overflow:clip; }
#kartta .app { width:100%; height:100%; }
#kartta #map { width:100%; height:100%; }
#kartta .mobileSheet { display:none; }
@media(max-width:920px) {
  #kartta .mobileControls { position:absolute; }
  #kartta .mobileSheet { display:block; position:absolute; }
}

/* Branding stays in the hero; search and map actions stay on the map. */
#kartta .mapSearchTitle { margin:0 0 14px; font-size:20px; line-height:1.3; }
@media(max-width:920px) {
  #kartta .mobileControls { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:8px; align-items:center; }
  #kartta .mobileActions { grid-column:1 / -1; grid-row:2; }
  #kartta .mobileTopRow { grid-column:2; grid-row:1; margin:0; }
  #kartta .mobileControls > .searchRow { grid-column:1; grid-row:1; margin:0; min-width:0; }
  #kartta .mobileControls .search { min-width:0; }
  #kartta .mobileControls input { min-width:0; }
}

/* Larger brand mark, with room for the wordmark and navigation on small screens. */
.tu-hero__logo img { width:88px; height:104px; flex-shrink:0; }
.tu-hero__logo { gap:14px; min-width:0; }
@media(max-width:900px) {
  .tu-hero__bar { padding:16px; gap:12px; }
  .tu-hero__logo { gap:10px; font-size:clamp(14px,4vw,20px); }
  .tu-hero__logo img { width:72px; height:86px; }
  .tu-hero__logo span { min-width:0; }
  .tu-hero__logo small { font-size:11px; max-width:200px; }
  .tu-hero__menu-btn { flex-shrink:0; }
  .tu-hero__nav { top:118px; }
}

/* One continuous navy surface connects the introduction and the map. */
body { background:#121a34; }
.tu-hero { padding-bottom:72px; }
.tu-hero::after {
  content:""; position:absolute; inset:auto 0 0; height:180px;
  background:linear-gradient(transparent,#121a34); pointer-events:none; z-index:-1;
}
.tu-hero__pause { bottom:5rem; }
#kartta {
  width:calc(100% - 64px); margin:-32px auto 32px; z-index:1;
  border:1px solid #49667e; border-radius:22px;
  box-shadow:0 18px 48px rgba(0,0,0,.22);
}
#kartta .sidebarHeader { padding:24px; }
#kartta #map { touch-action:pan-y; }
.mapGestureHint {
  position:absolute; z-index:1000; left:50%; top:50%; transform:translate(-50%,-50%);
  max-width:calc(100% - 32px); width:max-content; box-sizing:border-box;
  padding:12px 18px; border-radius:12px; background:rgba(18,26,52,.93); color:#ebf0fe;
  font:600 14px/1.4 system-ui,sans-serif; text-align:center;
  pointer-events:none; opacity:0; transition:opacity .15s;
}
.mapGestureHint.visible { opacity:1; }
@media(max-width:920px) {
  .tu-hero { padding-bottom:40px; }
  .tu-hero__pause { bottom:3rem; }
  #kartta { width:calc(100% - 16px); margin-top:-16px; margin-bottom:8px; border-radius:16px; }
}
@media(prefers-reduced-motion:reduce) { .mapGestureHint { transition:none; } }