/* critical.css - minimal above-the-fold styles
	Purpose: reserve layout space for header and hero image to prevent
	cumulative layout shift (CLS) while the full CSS and images load.
	Keep rules tiny and non-invasive so visual design and responsiveness
	remain controlled by the full stylesheets. */

html { box-sizing: border-box; -webkit-font-smoothing: antialiased; }
*, *::before, *::after { box-sizing: inherit; }

body {
  margin: 0;
  color: #222;
  background: #fff;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  line-height: 1.4;
}

/* Keep horizontal padding so layout doesn't jump before full CSS loads */
.container, .container-fluid { padding-left: 1rem; padding-right: 1rem; }

/* Images: responsive baseline */
img, picture, video { max-width: 100%; height: auto; display: block; }

/* Reserve space for the header that will be injected at runtime */
#header-placeholder { min-height: 72px; }

/* Hero image: aspect-ratio prevents CLS when the image hasn't loaded yet.
	Using an aspect-ratio is safe and doesn't change responsiveness. */
.hero-img { display: block; width: 100%; height: auto; aspect-ratio: 679 / 359; }

/* Minimal button baseline so CTAs appear stable */
.btn { display: inline-block; text-decoration: none; border: none; background: transparent; color: inherit; cursor: pointer; font: inherit; padding: 0.375rem 0.75rem; border-radius: 0.25rem; }

.visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }