/* Keep the established header layout and appearance at both endpoints. */
.site-header .nav-shell { transform-origin: top left; }
.spiral-section:not([data-static=true]) .spiral-world { transform-style: flat; perspective: 1300px; }
.orbit-card img, .orbit-card .orbit-label { pointer-events: none; }
.home-services .service-tiles .service-tile {
  transform-origin: center;
  transition: transform .28s cubic-bezier(.2,.7,.25,1), border-color .25s, background-color .25s;
}
@media (hover:hover) and (pointer:fine) {
  .home-services .service-tiles .service-tile:hover,
  .home-services .service-tiles .service-tile:focus-visible {
    transform: scale(1.045) !important;
    z-index: 1;
  }
}
@property --pill-flare-angle { syntax: "<angle>"; initial-value: 0deg; inherits: false; }
@keyframes mobile-pill-flare { to { --pill-flare-angle: 360deg; } }
@media (max-width:1050px) {
  .ui-assembly-stage .editor-body { height: auto; }
  .ui-assembly-stage .editor-canvas { height: var(--ui-body-height); }
  .ui-assembly-stage .editor-inspector {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    padding: 8px 14px 4px;
    border: 0;
    border-top: 1px solid var(--home-border);
    text-align: center;
    position: relative;
    z-index: 3;
  }
  .ui-assembly-stage .editor-inspector > :not(label) { display: none; }
  .ui-assembly-stage .editor-inspector label { margin: 0; font-size: 11px; min-width: 0; }
  .ui-assembly-stage .editor-inspector input { height: 28px; margin: 2px 0 0; touch-action: auto; }
}
@media (max-width:700px) {
  .ui-assembly-stage { --ui-body-height: clamp(200px, calc(100svh - 360px), 460px); }
  .scope-grid .scope-card { align-items: center; text-align: center; }
  .scope-grid .scope-card :is(h3,p,.scope-price,ul,li) { text-align: center; }
  .scope-grid .scope-card > :is(h3,p) { min-height: 0; }
  .scope-grid .scope-card > :is(.button,.package-expand) { align-self: center; margin-inline: auto; }
  .scope-grid .scope-card ul { width: 100%; }
  .studio-pill::after {
    display: block;
    opacity: 1;
    filter: none;
    border-radius: inherit;
    padding: 1.5px;
    background: conic-gradient(from var(--pill-flare-angle), transparent 0 274deg, #b4131866 298deg, #ff393e 328deg, #ff9e93 335deg, transparent 356deg);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    animation: mobile-pill-flare 4s linear infinite;
  }
}
@media (hover:none) {
  .home-services .service-tiles .service-tile:hover { transform: none !important; }
  .home-services .service-tiles .service-tile:active { transform: scale(1.025) !important; }
}
@media (prefers-reduced-motion:reduce) {
  .studio-pill::after { animation: none; }
  .home-services .service-tiles .service-tile { transition: none; }
}


/* Use the hero's existing bars and dust as separate depth layers. */
@media (prefers-reduced-motion:no-preference) {
  .hero-stage { --hero-bar-depth: 560px; --hero-dust-depth: 205px; }
  .hero-stage .hero-bars {
    translate: 0 min(70px, calc(var(--hero-progress,0) * var(--hero-bar-depth)));
  }
  .hero-stage .hero-dust {
    translate: 0 max(-32px, calc(-1 * var(--hero-progress,0) * var(--hero-dust-depth)));
  }
}
@media (max-width:700px) and (prefers-reduced-motion:no-preference) {
  .hero-stage { --hero-bar-depth: 340px; --hero-dust-depth: 130px; }
}
.scope-card.atmosphere-card:hover { box-shadow: none; }