/* The interactive objects share the page's surface; there is no stage or box. */
.hero-visual::before { content: none; }
.hero > .studio-intro { grid-column: 1 / -1; margin-bottom: 23px; }
.hero-visual { align-self: start; margin-left: 0; padding-top: 0; }
.scene-topline { min-height: 30px; padding-inline: 5px; }
.scene-topline button { min-height: 30px; padding-block: 4px; }
.scene { background: transparent; height: clamp(260px, 26vw, 370px); }
.scene-control-panel {
  background: transparent;
  box-shadow: none;
  border-radius: 0;
  margin-top: 0;
}
.scene-buttons { gap: 8px; }
.scene-buttons button {
  background: #fff;
  box-shadow: inset 0 0 0 1px #171a2410, 0 2px 3px #171a2408;
}
.scene-fallback { display: grid; place-items: center; perspective: 800px; }
.fallback-wordmark { width: 100%; }
.fallback-sculpture, .fallback-website { display: none; }
.scene[data-mode="1"] .fallback-wordmark,
.scene[data-mode="2"] .fallback-wordmark { display: none; }
.scene[data-mode="1"] .fallback-sculpture {
  display: block; position: absolute; inset: 5%; transform: rotate(-8deg);
}
.fallback-sculpture .fallback-form { width: 43%; height: 43%; aspect-ratio: 1; transform: none; }
.fallback-sculpture .form-blue { left: 6%; top: 6%; border-radius: 50% 50% 0 50%; }
.fallback-sculpture .form-red { left: 51%; top: 6%; border-radius: 50% 50% 50% 0; }
.fallback-sculpture .form-ink { left: 6%; top: 51%; border-radius: 50% 0 50% 50%; }
.fallback-sculpture .form-yellow { left: 51%; top: 51%; border-radius: 0 50% 50% 50%; }
.fallback-sculpture .fallback-form:after { background: #fff; }
.scene[data-mode="2"] .fallback-website {
  display: block; width: 100%; border: 7px solid #fff; border-radius: 10px;
  box-shadow: 0 14px 24px -12px #171a2444;
}
@media (max-width: 600px) {
  .hero > .studio-intro { margin-bottom: 24px; }
  .hero-visual { margin-top: 18px; padding: 0; }
  .scene { height: auto; aspect-ratio: 1.28; }
  .scene-topline { min-height: 30px; }
  .scene-topline button { min-height: 30px; }
  .scene-control-panel { margin-top: 0; }
}

/* One continuous composition, driven directly by the visitor's range input. */
.scene-scrubber{display:block;position:relative;height:36px;margin:6px 12px 0}
.scene-scrubber input{appearance:none;-webkit-appearance:none;width:100%;height:36px;margin:0;background:transparent;cursor:ew-resize;touch-action:pan-y}
.scene-scrubber input::-webkit-slider-runnable-track{height:5px;border-radius:8px;background:linear-gradient(90deg,#163be0 0%,#ef3329 50%,#ffcf1c 100%);box-shadow:inset 0 1px 2px #0002,0 1px #fff}
.scene-scrubber input::-moz-range-track{height:5px;border-radius:8px;background:linear-gradient(90deg,#163be0 0%,#ef3329 50%,#ffcf1c 100%)}
.scene-scrubber input::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;width:21px;height:21px;margin-top:-8px;border:5px solid #fff;border-radius:50%;background:#18202a;box-shadow:0 1px 2px #10172a40,0 3px 7px #10172a30}
.scene-scrubber input::-moz-range-thumb{width:11px;height:11px;border:5px solid #fff;border-radius:50%;background:#18202a;box-shadow:0 2px 5px #10172a40}
.scene-scrubber input:focus-visible{outline:2px solid var(--blue);outline-offset:3px;border-radius:8px}
.scene-scrubber-label{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.scene-object-key{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:4px 8px;font-size:clamp(8px,.7vw,10px);line-height:1.3;color:var(--muted);margin-top:4px;text-align:center}
.scene-object-key span{white-space:nowrap}
.scene-object-key b{font-size:1.16em;font-weight:700;color:var(--ink);margin-right:4px}
.scene-control-panel p{padding-top:6px;min-height:23px}
.fallback-icons{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;opacity:clamp(0,var(--scene-progress),1)}
.fallback-icons svg{width:100%;height:100%;max-height:100px;filter:drop-shadow(2px 6px 4px #16213a20)}
.scene[data-mode="0"] .fallback-wordmark{opacity:calc(1 - var(--scene-progress,0))}
.scene[data-mode="1"] .fallback-sculpture{display:none}
.scene[data-mode="2"] .fallback-icons{transform:scale(.85);inset:-5% -10% 0;z-index:2;pointer-events:none}
.scene[data-mode="2"] .fallback-website{width:65%;position:absolute;top:30%;left:17.5%}

.page-journey{--journey-color:#163be0;--journey-ink:#fff;position:fixed;right:24px;bottom:max(20px,env(safe-area-inset-bottom));z-index:20;display:grid;place-items:center;width:46px;height:46px;padding:0;border:0;border-radius:50%;background:var(--journey-color);color:var(--journey-ink);box-shadow:inset 0 1px 1px #fff7,0 3px 5px #17244120,0 9px 19px #17244124;cursor:pointer;transition:background-color .18s,color .18s,box-shadow .15s}
.page-journey svg{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.journey-track,.journey-progress{fill:none;stroke:currentColor;stroke-width:1.2;transform:rotate(-90deg);transform-origin:center}
.journey-track{opacity:.16}
.journey-progress{stroke-dasharray:126;stroke-dashoffset:126;opacity:.65;stroke-linecap:round}
.journey-arrow{width:16px;height:16px;transition:transform .25s;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
.page-journey svg.journey-arrow{position:static;width:16px;height:16px}
.page-journey.at-end .journey-arrow{transform:rotate(180deg)}
.page-journey:active{box-shadow:inset 0 2px 4px #14243c44,0 2px 4px #17244120}
.page-journey:focus-visible{outline:2px solid var(--ink);outline-offset:4px}
.footer-content{padding-right:75px}
@media(max-width:600px){
  .scene-object-key{grid-template-columns:repeat(3,minmax(0,1fr));font-size:11px;gap:2px 10px}
  .scene-control-panel{padding-inline:4px}
  .page-journey{width:44px;height:44px}
  .footer-content{padding-right:60px;grid-template-columns:auto 1fr;gap:15px}
}
@media(prefers-reduced-motion:reduce){.page-journey,.journey-arrow{transition:none}}