main > section[hidden] { display: none !important; }
.section-tabs { display: none; }
.nav a[aria-current="location"],
.mobile-nav a[aria-current="location"] { color: #83e5ff; }

.garage-guide { position: relative; max-width: 320px; margin-top: 14px; }
.garage-guide summary {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px;
  padding: 2px 12px 2px 6px; border: 1px solid #5387ac; border-radius: 14px;
  color: #f2f7ff; background: #0a1830; cursor: pointer; list-style: none;
  font-size: 13px; font-weight: 700;
}
.garage-guide summary::-webkit-details-marker { display: none; }
.garage-guide summary::after { content: "+"; color: #83e5ff; font-size: 18px; }
.garage-guide[open] summary::after { content: "−"; }
.garage-guide img { width: 48px; height: 34px; object-fit: contain; }
.garage-guide-panel {
  position: absolute; z-index: 12; top: calc(100% + 6px); left: 0;
  width: min(300px, 100%); padding: 12px; border: 1px solid #5387ac;
  border-radius: 12px; color: #e5f1ff; background: #08162b;
  box-shadow: 0 14px 30px #02060c88;
}
.garage-guide-panel p { margin: 0 0 5px !important; font-size: 13px !important; }
.garage-guide-panel a { display: inline-flex; min-height: 44px; align-items: center; margin-right: 10px; color: #83e5ff; font-size: 13px; font-weight: 700; }
.garage-picker-hint { display: none; }
.remote-intake { max-width: 48ch; color: #bfe5ff; }
.remote-hero { padding-block: clamp(32px, 7vw, 80px); }
.remote-hero img { width: min(100%, 240px); justify-self: center; }
.remote-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.remote-checklist { margin: 14px 0 22px; padding-left: 21px; line-height: 1.65; }
.mascot-motion-toggle {
  min-height: 44px; padding: 4px 10px; color: #b9dfff;
  background: transparent; border: 1px solid #416681; border-radius: 8px; font-size: 12px;
}
.mascot-motion-toggle:disabled { opacity: .7; }
.civic-runner {
  position: fixed; z-index: 60; left: 0; bottom: max(10px, env(safe-area-inset-bottom));
  width: 156px; pointer-events: none; contain: layout style; user-select: none;
}
.civic-runner[hidden] { display: none !important; }
.civic-runner canvas { display: block; width: 100%; height: 108px; }
.civic-reaction {
  display: none; position: absolute; left: 50%; bottom: 82%; z-index: 1;
  transform: translateX(-50%); padding: 4px 9px; border-radius: 9px;
  border: 1px solid #a9dcff; background: #f4faff; color: #132c46;
  white-space: nowrap; font-size: 13px; font-weight: 800; box-shadow: 0 2px 7px #0007;
}
.civic-reaction::after {
  content: ""; position: absolute; left: 48%; top: calc(100% - 4px);
  width: 8px; height: 8px; transform: rotate(45deg); background: inherit;
  border-right: 1px solid #a9dcff; border-bottom: 1px solid #a9dcff;
}
.civic-runner[data-mood] .civic-reaction { display: block; }
@media (prefers-reduced-motion: reduce) { .civic-runner { display: none !important; } }
@media (min-width: 1101px) { .cinema-info .cinema-info-preview { height: clamp(125px, 11.5vw, 166px); } }

@media (max-width: 980px) {
  .section-tabs {
    position: sticky; z-index: 75; top: var(--section-header-height, 74px);
    display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px;
    padding: 5px 8px; border-bottom: 1px solid #294b69; background: #071224;
  }
  .section-tabs a {
    display: grid; place-items: center; min-width: 0; min-height: 44px; padding: 4px 1px;
    border: 1px solid transparent; border-radius: 8px;
    color: #d8e8fc; font-size: clamp(11px, 3vw, 14px); font-weight: 700; text-align: center;
  }
  .section-tabs a[aria-current="location"] {
    color: #fff; border-color: #63bfe6; background: #153455;
  }
  .mobile-nav a { min-height: 44px; display: flex; align-items: center; }
}

@media (max-width: 760px) {
  .cinema-header { display: none !important; }
  .cinema-stage > .cinema-copy { padding: 18px 14px 6px !important; }
  .cinema-copy .cinema-micro { display: none !important; }
  .cinema-copy h1 { font-size: clamp(34px, 10vw, 49px) !important; }
  .cinema-copy > p { max-width: 40ch !important; margin-bottom: 12px !important; }
  .cinema-copy .cinema-values { display: none !important; }
  .cinema-copy .cinema-cta {
    display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .cinema-copy .cinema-cta .button {
    min-width: 0; padding-inline: 8px; text-align: center; white-space: normal;
  }
  .garage-guide { margin-top: 8px; }
  .garage-guide-panel { position: static; margin-top: 5px; box-shadow: none; }
  .civic-runner { width: 116px; bottom: max(6px, env(safe-area-inset-bottom)); }
  .civic-runner canvas { height: 80px; }
  .civic-reaction { font-size: 12px; }
  .cinema-stage > .garage-picker-hint {
    display: block; order: 1; margin: 8px 14px 3px;
    color: #c1d8ee; font-size: 13px;
  }
  .cinema-stage > .cinema-ribbon {
    order: 1; grid-template-columns: none !important; grid-auto-flow: column;
    grid-auto-columns: clamp(86px, 24vw, 106px); min-width: 0; margin: 0 0 6px;
    padding: 4px 14px 8px; border: 0; scroll-padding-inline: 14px;
    scroll-snap-type: x proximity;
  }
  .cinema-stage > .cinema-ribbon .cinema-ribbon-item {
    min-width: 0; min-height: 66px; padding: 5px; text-align: center; scroll-snap-align: start;
  }
  .cinema-stage > .cinema-ribbon .cinema-ribbon-item img { height: 31px; }
  .cinema-stage > .cinema-info { order: 3 !important; }
  .cinema-info .cinema-info-preview { height: clamp(94px, 29vw, 145px) !important; }
  .cinema-info .cinema-info-actions { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .cinema-info .cinema-info-actions .button { font-size: 11px !important; padding-inline: 6px !important; }
  .cinema-stage > .cinema-feature-controls button,
  .cinema-stage > .cinema-scene-actions button { min-height: 44px !important; }
  .service-card .card-content { padding: 14px; }
  .service-card p { font-size: 13px; min-height: 0; }
  .service-card .service-bottom .arrow { min-width: 44px; min-height: 44px; }
  .booking-form input, .booking-form select, .booking-form textarea { font-size: 16px; }
  .remote-hero .container { gap: 22px; }
  .remote-hero img { width: 132px; justify-self: start; }
}

.remote-products .container { display: block; }
.remote-product-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 330px), 1fr)); gap: 14px; margin: 18px 0; }
.remote-product-grid article { display: flex; align-items: center; gap: 14px; padding: 12px; border: 1px solid #2c4463; border-radius: 12px; background: #0b1729; scroll-margin-top: 160px; }
.remote-product-grid img { width: clamp(80px, 23vw, 116px); height: auto; border-radius: 8px; background: #fff; }
.remote-product-grid h3 { font-size: 17px; margin: 0 0 6px; }
.remote-product-grid p { margin: 0 0 6px; font-size: 14px; }
.remote-product-grid a { display: inline-block; color: #9ceaff; font-size: 13px; padding: 6px 0; }

.civic-effect {
  position: absolute; top: 27%; right: 13%; color: #c1eeff; font-size: 19px;
  font-weight: 900; text-shadow: 0 0 5px #0b1628, 0 0 11px #5cceff;
}
.civic-effect { display: none; }
.civic-runner[data-mood] .civic-effect:not(:empty) { display: block; }
.civic-runner[data-mood] .civic-effect { animation: civic-pop .85s ease-in-out 2; }
.civic-runner[data-mood="pricing"] .civic-effect { color: #ffdb8c; }
.civic-runner[data-mood="lighting"] .civic-effect { color: #ea95ff; }
.civic-waves { display: none; position: absolute; inset: 0; }
.civic-runner[data-mood="music"] .civic-waves, .civic-runner[data-booming] .civic-waves { display: block; }
.civic-waves i {
  position: absolute; top: 36%; left: 17%; width: 12px; height: 17px;
  border: solid #87e9ff; border-width: 0 0 0 2px; border-radius: 50%;
  animation: civic-wave-out 1.1s ease-out infinite;
}
.civic-waves i:nth-child(3n+2) { animation-delay: .16s; }
.civic-waves i:nth-child(3n) { animation-delay: .32s; }
.civic-waves i:nth-child(n+4) { right: 17%; left: auto; transform: scaleX(-1); animation-name: civic-wave-right; }
@keyframes civic-wave-out {
  0% { transform: translateX(2px) scale(.62); opacity: 0; }
  24% { opacity: 1; }
  100% { transform: translateX(-10px) scale(1.45); opacity: 0; }
}
@keyframes civic-wave-right {
  0% { transform: translateX(-2px) scale(-.62,.62); opacity: 0; }
  24% { opacity: 1; }
  100% { transform: translateX(10px) scale(-1.45,1.45); opacity: 0; }
}
@keyframes civic-pop {
  0% { transform: translateY(4px) scale(.6); opacity: 0; }
  30% { opacity: 1; }
  100% { transform: translateY(-13px) scale(1.08); opacity: 0; }
}

.audio-track-credit { color: #c7d7ed; font-size: 13px; margin: 6px 14px; }
.audio-track-credit a { color: #8ee2ff; text-decoration: underline; }

#sceneVisual { scroll-margin-top: calc(var(--section-header-height, 74px) + 6px); }
@media (max-width: 980px) {
  #sceneVisual { scroll-margin-top: calc(var(--section-header-height, 74px) + 62px); }
}