:root{
  --topPad: 3vh;   /* was 5–6vh; lifts the whole stack toward the top */
  --heroGap: 8px;  /* smaller gap so showroom sits closer to logo */
  --tile: 280px;   /* showroom size (same as future product tabs) */
}

/* global sanity */
* { box-sizing: border-box; }
html, body{
  height: 100%;
  margin: 0;
  background: #fff;
  overflow: hidden;        /* no scroll */
}

/* Pin hero to the viewport and lock 2 rows: logo + showroom */
.stage{
  position: fixed;
  inset: 0;
  display: grid;
  grid-template-rows: auto auto 1fr; /* logo, showroom, flexible spacer */
  justify-items: center;
  align-content: start;
  padding-top: var(--topPad);
}

/* explicit rows to avoid accidental shifts */
.site-logo{
  grid-row: 1;
  width: clamp(300px, 38vw, 480px);
  height: auto;
  image-rendering: crisp-edges;
  user-select: none;
  pointer-events: none;
  margin: 0;               /* kill any default spacing */
}

.showroom-frame{
  grid-row: 2;
  width: clamp(220px, 24vw, var(--tile));
  height: auto;
  image-rendering: crisp-edges;
  user-select: none;
  pointer-events: none;
  margin: 0;
}