/* The homepage uses only the Atelier object and its two controls. */
.hero.hero--interactive { padding-top:84px; }
.hero--interactive .hero__body { grid-template-columns:minmax(0,1.15fr) minmax(0,1fr); gap:40px 48px; align-items:center; }
.hero--interactive .hero__content { min-width:0; }
.hero-safe { position:relative; z-index:1; width:100%; max-width:900px; margin:0 auto; }
.hero-safe__viewport { height:clamp(360px,52vh,560px); width:100%; touch-action:pan-y; }
.hero-safe__viewport canvas { display:block; max-width:100%; cursor:grab; }
.hero-safe__viewport canvas:active { cursor:grabbing; }
.hero-safe__controls { display:flex; flex-direction:column; align-items:center; gap:16px; }
.hero-safe__views { display:flex; padding:4px; border:1px solid rgba(213,160,88,.3); border-radius:30px; background:rgba(18,20,20,.8); }
.hero-safe button { font:500 13px/1.4 var(--font-body); cursor:pointer; }
.hero-safe__views button { min-height:44px; padding:10px 26px; border:0; border-radius:24px; background:transparent; color:var(--on-surface-variant); }
.hero-safe__views button.selected { background:var(--primary); color:var(--bg); }
.hero-safe__views button:hover:not(.selected) { background:rgba(213,160,88,.14); }
.hero-safe__scan { display:flex; align-items:center; justify-content:center; gap:16px; min-height:58px; width:290px; max-width:100%; padding:14px 22px; color:var(--on-surface); background:rgba(18,20,20,.88); border:1px solid var(--primary); }
.hero-safe__scan svg { width:28px; height:28px; flex-shrink:0; color:var(--primary); }
.hero-safe__scan:hover:not(:disabled) { background:#30352e; }
.hero-safe button:focus-visible { outline:2px solid var(--primary); outline-offset:4px; }
.hero-safe button:disabled { opacity:.6; cursor:wait; }
.hero-safe__fallback { position:absolute; top:30%; left:10%; right:10%; padding:24px; background:var(--bg); color:var(--on-surface); border:1px solid var(--primary); }
.hero--interactive .hero__showcase { display:block; grid-column:1 / -1; justify-self:start; max-width:680px; }
@media(max-width:900px) {
  .hero.hero--interactive { padding-top:76px; gap:40px; }
  .hero-safe__viewport { height:380px; }
  .hero--interactive .hero__body { grid-template-columns:minmax(0,1fr); gap:32px; }
  .hero--interactive .hero__showcase { justify-self:start; max-width:100%; }
}

.hero__showcase-list a { align-self:flex-start; font:600 11px/1.4 var(--font-label); color:rgba(226,226,226,.78); letter-spacing:.08em; text-transform:uppercase; text-decoration:underline; text-underline-offset:4px; text-decoration-color:rgba(213,160,88,.4); }
.hero__showcase-list a:hover { color:var(--primary); text-decoration-color:currentColor; }
.hero__showcase-list a:focus-visible { outline:2px solid var(--primary); outline-offset:5px; }