/* hq-phone — the one image, scroll-driven (HQ60Next v3). Live: a 1440x900 design box scaled to the
   viewport, the phone's canvas behind eight slides whose pieces sit at the board's own pixel positions.
   At rest (phones, tablets under 1024px, reduced motion, no script): eight stacked slides, each with its
   still of the phone and its copy. Tokens, nav, buttons and the form come from the kit (system.css). */
.hq-stage { position: relative; width: 100%; height: 100%; overflow: clip; background: var(--p-bg); }
.hq-frame {
  position: absolute; left: 50%; top: 50%; width: 1440px; height: 900px;
  transform: translate(-50%, -50%) scale(var(--hq-k, 1)); transform-origin: 50% 50%;
  font-family: var(--font-text); color: var(--p-ink);
}
.hq-studio { position: absolute; inset: 0; background: radial-gradient(48% 56% at 58% 50%, #ffffff 0%, #edf1f8 42%, rgba(237, 241, 248, 0) 74%); }
.hq-gl { position: absolute; inset: 0; z-index: 1; }
.hq-gl canvas { display: block; width: 1440px; height: 900px; }
.hq-poster { position: absolute; inset: 0; z-index: 2; width: 1440px; height: 900px; object-fit: cover; transition: opacity .3s linear; }
.hq-frame.is-gl .hq-poster { opacity: 0; }
.hq-shadow {
  position: absolute; z-index: 0; left: 0; top: 0; width: 460px; height: 90px; margin: -45px 0 0 -230px; border-radius: 50%;
  background: radial-gradient(50% 50% at 50% 50%, rgba(15, 23, 42, .34), rgba(15, 23, 42, 0) 70%); filter: blur(10px); will-change: transform;
}
/* live: every slide's opacity, its title's and pieces' transforms, the beam, the bubble and the drawn lines are set by
   scene.js from the scroll progress on every frame; no transition or animation here, so they follow the hand and run back */
.hq-slide { position: absolute; inset: 0; z-index: 3; opacity: 0; visibility: hidden; pointer-events: none; }
.hq-slide.is-on { pointer-events: auto; }
/* keyboard: the slide that holds the focused control is on screen at once, script or not (the form's fields reached by Tab) */
.hq-slide:has(:focus-visible), .hq-slide:has(:focus) { opacity: 1 !important; visibility: visible !important; pointer-events: auto; }
.hq-slide:has(:focus-visible) .title, .hq-slide:has(:focus) .title { transform: none !important; }
.hq-slide .title { position: absolute; left: 80px; top: 150px; width: 460px; will-change: transform; }
.hq-slide .title h2, .hq-slide .title h1 { font-size: 40px; line-height: 1.08; letter-spacing: -.03em; font-weight: var(--display-weight); margin: 0; text-wrap: balance; font-family: var(--font-display); }
.hq-slide .title p { margin: 14px 0 0; font-size: 17px; line-height: 1.5; color: var(--p-muted); max-width: 34ch; }
.hq-slide .h0 { position: absolute; left: 0; right: 0; top: 124px; margin: 0; font-size: 56px; line-height: 1.05; letter-spacing: -.035em; font-weight: var(--display-weight); text-align: center; font-family: var(--font-display); }
.hq-pieces { position: absolute; inset: 0; pointer-events: none; }   /* inert mock UI: never a hit target, never over the form */
.hq-pieces > * { will-change: transform, opacity; }
.hq-slide .still, .hq-rest-only { display: none; }
/* the moments are scrubbed by scene.js: the beam's travel, the bubble's place on its path, the brand card's slide */
.hq-slide .beam { opacity: 0; will-change: transform, opacity; }
.hq-bubble { position: absolute; left: 0; top: 0; width: 220px; padding: 10px 14px; border-radius: 18px 18px 18px 6px; background: #262629; color: #fff; font: 13px/1.35 ui-sans-serif, system-ui, sans-serif; opacity: 0; offset-rotate: 0deg; offset-distance: 0%; z-index: 4; }
/* the form slide: real text, keyboard-reachable; the kit's form recipe */
.hq-form { position: absolute; left: 80px; top: 330px; width: 460px; }
.hq-form .form { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
.hq-form .form .field { grid-column: 1 / -1; }
/* the first paint: the hero settles once (the scene's own entrance; the hero carries data-enter="off") */
.hq-frame.is-first .hq-slide[data-k="0"] .h0 { animation: hq-rise .9s var(--m-ease-enter) 1 both; }
@keyframes hq-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* ------------------------------------------------------------------ at rest: the slides stack */
.sc:not(.is-live) .hq-stage { height: auto; overflow: visible; background: none; }
.sc:not(.is-live) .hq-frame { position: static; width: auto; height: auto; transform: none; }
.sc:not(.is-live) .hq-studio, .sc:not(.is-live) .hq-gl, .sc:not(.is-live) .hq-poster, .sc:not(.is-live) .hq-shadow, .sc:not(.is-live) .hq-pieces { display: none; }
.sc:not(.is-live) .hq-slide { position: relative; inset: auto; opacity: 1; visibility: visible; pointer-events: auto; min-height: 100svh; padding: calc(var(--nav) + 40px) var(--gut) 48px; display: grid; grid-template-columns: minmax(0, 1fr); align-content: start; gap: 24px; }
.sc:not(.is-live) .hq-slide:first-child { padding-top: 24px; }   /* the section itself already pads for the nav (scenes.css) */
.sc:not(.is-live) .hq-slide .title, .sc:not(.is-live) .hq-slide .h0 { position: static; width: auto; transform: none; opacity: 1; text-align: left; }
.sc:not(.is-live) .hq-slide .title h2 { font-size: clamp(26px, 3.6vw, 40px); }
.sc:not(.is-live) .hq-slide .h0 { font-size: clamp(36px, 6.4vw, 56px); }
.sc:not(.is-live) .hq-slide .still { display: block; width: min(100%, 420px); height: auto; margin: 0 auto; }
.sc:not(.is-live) .hq-form { position: static; width: min(100%, 460px); }
.sc:not(.is-live) .hq-rest-only { display: block; }
/* one column at every rest width: the title, then the still, then (on the last slide) the form; the closing slide
   shows the form in place of the still so it stays one screen */
.sc:not(.is-live) .hq-slide[data-k="7"] .still { display: none; }
.sc:not(.is-live) .hq-slide .still { max-height: calc(100svh - var(--nav) - 220px); width: auto; max-width: 100%; }
@media (prefers-reduced-motion: reduce) { .hq-poster { transition: none; } .hq-frame.is-first .h0 { animation: none; opacity: 1; transform: none; } }