/* css/critical.css — layout-only, safe to block */

/* reset basics */
html, body { margin: 0; height: 100%; }

/* header frame so logo doesn’t shift */
.s-header { position: absolute; top: 24px; left: 0; right: 0; height: 96px; z-index: 500; }
.header-logo { position: absolute; left: 60px; top: 50%; transform: translateY(-50%); }
.header-logo img { width: 168px; height: 28px; display: block; }

/* hero container uses viewport var to avoid mobile URL-bar jumps */
.s-home { position: relative; display: block; width: 100%; height: calc(var(--vh, 1vh) * 100); background: #000; }

/* slideshow area */
.image-slideshow { position: absolute; inset: 0; overflow: hidden; }
.image-slideshow .slide { position: absolute; inset: 0; }

/* images fill frame; no reflow */
.slide-image { width: 100%; height: 100%; object-fit: cover; display: block; }

/* centered hero content with reserved space (prevents title/subtitle nudges) */
.home-content { position: relative; display: flex; align-items: center; justify-content: center; height: 100%; }
.home-content__main { max-width: 1000px; margin: 0 auto; text-align: center; padding-top: 18rem; }

/* reserve height so font swap/animations don’t change layout */
#home-title { font-size: 3.1rem; line-height: 1.2; margin: 0 12px; color: #fff; min-height: 3.6em; }
.subtitle-container { font-size: 2.2rem; line-height: 1.4; color: #fff; margin: 12px 12px 0; min-height: 2.8em; }

/* keep slight shadow overlay so text is readable before main.css */
.s-home .shadow-overlay {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to bottom, #000 1%, transparent 45%, transparent 84%);
  opacity: .5;
}