/* css/critical-services.css — freeze initial layout to kill CLS */

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

/* Header / brand block — keep size stable */
.services-hero { display: grid; place-items: center; width: 95%; padding-block: 20px; }
.services-hero .brand { display: grid; place-items: center; width: 100%; text-align: center; }
.services-hero .brand img { display: block; height: 56px; width: auto; }

/* Main content container */
main { max-width: 980px; margin: 0 auto; padding: 10px 16px 60px; }

/* Reserve space for H1 + intro so font swap/async CSS don't move blocks */
h1 { font-size: 3rem; line-height: 1.2; margin: 8px 0 12px; min-height: 3.6em; }
.lead { min-height: 2.8em; }

/* Sections have consistent chrome from first paint */
section { border-radius: 14px; border: 1px solid transparent; padding: 16px; }

/* Core sections: give browser a reasonable intrinsic size so later images/iframes
   don't push everything down at once. Tune numbers if needed. */
#core-services { content-visibility: auto; contain-intrinsic-size: 1px 760px; }
#detail-cases  { content-visibility: auto; contain-intrinsic-size: 1px 520px; }
#faq           { content-visibility: auto; contain-intrinsic-size: 1px 520px; }

/* YT preview area: reserve one tile height (9:16) before JS injects content */
#video { content-visibility: auto; }
#yt-grid { min-height: 360px; } /* ≈ a 240px wide 9:16 tile; adjust if your grid is wider */

/* WhatsApp FAB: fix its box so image load doesn’t nudge layout */
.wa-fab { position: fixed; inset: auto 16px 16px auto; width: 56px; height: 56px;
          display: grid; place-items: center; z-index: 1000; }
.wa-fab img { width: 40px; height: 40px; display: block; }

/* Mobile tweaks */
@media (max-width:640px){
  h1{ font-size: 2.4rem; }
  #yt-grid{ min-height: 300px; }
}