/* Stop vertical clipping of header canvas bleed — overflow-x: hidden forces overflow-y: auto.
   width:100% avoids the 100vw scrollbar-gutter overflow that required overflow-x:hidden. */
html {
  overflow-x: clip;
}

.container1,
.FooterFlex {
  width: 100%;
  overflow-x: clip;
  overflow-y: visible;
}

/* Visually enlarges the 3D header canvas without changing grid layout (28:17 box unchanged). */
.header1#svgLOGO {
  contain: none;
  overflow: visible;
}

#svgLOGO {
  transform: scale(1.2);
  transform-origin: top left;
}

/* Anchor/canvas split: #svgLOGO keeps its untouched 28:17 column-2 box and acts as
   the composition anchor — the model is framed against it, so it can never move.
   The canvas is an absolutely-positioned child that may bleed outside the anchor;
   JS measures both rects each resize and maps the projection with setViewOffset,
   so any bleed just adds visible scene (trackball headroom), not displacement. */
#svgLOGO {
  position: relative;
}

#svgLOGO canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* Landscape: bleed the canvas into the left gutter and top margin. */
@media (orientation: landscape) and (min-width: 501px) {
  #svgLOGO canvas {
    left: -5vw;
    width: calc(100% + 5vw);
    top: -3rem;
    height: calc(100% + 3rem);
  }
}

/* Portrait: bleed into the left gutter and top margin. */
@media (orientation: portrait) {
  #svgLOGO canvas {
    left: -3.8vw;
    width: calc(100% + 3.8vw);
    top: -2rem;
    height: calc(100% + 2rem);
  }
}