/* Homepage frames (assets/js/frame-fit.js). Desktop only: the script sets html.frame-fit
   from 901px wide and 560px tall. Sizes come from the script as inline styles. */

/* Measuring pass: the hero row stops stretching, so each column reports what it needs. */
.frame-measure .hero-grid{ align-items: start !important; }
.frame-measure .hero, .frame-measure #consultancy{ min-height: 0 !important; }

.frame-fit .hero, .frame-fit #consultancy{ box-sizing: border-box; }
.frame-fit .hero{ justify-content: center; }
.frame-fit #consultancy{ display: flex; flex-direction: column; justify-content: center; }

/* Split strips: the games strip sits under My Experience, so its track needs no top gap. */
.marquee--games .marquee-track--reverse{ margin-top: 0; }

/* Guard: nothing inside the scaled page may widen it past the window (no horizontal scroll bar).
   clip (unlike hidden) creates no scroll container, so the sticky header keeps working. */
html.frame-fit body{ overflow-x: clip; }

/* First paint (html.ff-wait, set in <head> on desktop): the page stays hidden until frame-fit.js
   has set the page scale, so the wrong scale never shows. The background stays visible.
   The reveal animations wait too: they start when the page appears. */
html.ff-wait #site-header, html.ff-wait main, html.ff-wait .site-footer{ opacity: 0; }
html.ff-wait .blur-reveal{ animation-play-state: paused !important; }
html.ff-wait [data-reveal].is-in{ opacity: 0 !important; transform: translateY(18px) !important; }