.elementor-6628 .elementor-element.elementor-element-28a8789{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-6628 .elementor-element.elementor-element-b02a421{margin:-11px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;}.elementor-6628 .elementor-element.elementor-element-a541468{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}/* Start custom CSS for html, class: .elementor-element-b02a421 *//* Make hero section full browser width */
#hero-flagger {
  position: relative;
  width: 100vw;              /* full viewport width */
  max-width: 100vw !important;
  margin: 0 auto;            /* center it */
  left: 50%;                 /* push section center */
  transform: translateX(-50%); /* pull back half its width */
  box-sizing: border-box;
}

/* Optional: adjust inner content so it stays centered */
#hero-flagger > div {
  max-width: 1200px;   /* control readable width of text */
  margin: 0 auto;
  padding: 60px 20px;
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-cbba2fa *//* --- Stability & reset --- */
*, *::before, *::after { box-sizing: border-box; }
img, video { max-width: 100%; height: auto; display: block; }

/* Reserve intrinsic size so images don't cause layout shift while loading */
img { content-visibility: auto; contain-intrinsic-size: 300px 169px; } /* ~16:9 fallback */

/* Prevent long headings/links from overflowing flex columns */
.lg\:flex > * { min-width: 0; word-wrap: break-word; overflow-wrap: anywhere; }

/* Keep main container predictable */
main.container { max-width: 1200px; }

/* Smooth in-page anchor jumps from the sticky TOC */
section { scroll-margin-top: 96px; }  /* adjust if your header/hero height differs */

/* Stabilize sticky TOC on desktop */
@media (min-width: 1024px) {
  .lg\:sticky { top: 2rem; }
}

/* Standardize figure/image blocks to avoid height mismatches */
#overview figure img,
#steps figure img,
#classes figure img {
  aspect-ratio: 16 / 9;        /* reserves space before load */
  object-fit: cover;            /* fills without distortion */
  border-radius: 0.75rem;       /* matches your rounded-xl look */
}

/* Optional: equalize hero side image height to its card on wide screens */
@media (min-width: 1024px) {
  #hero-flagger figure { display: flex; }
  #hero-flagger figure img { height: 100%; object-fit: cover; }
}

/* Avoid iOS/Android jank caused by background-attachment: fixed */
@media (max-width: 1024px) {
  #hero-flagger [aria-hidden="true"] { background-attachment: scroll !important; }
}

/* Details/accordion polish without layout jump */
#faq details > summary { list-style: none; }
#faq details { overflow: hidden; transition: box-shadow .2s ease; }
#faq details[open] { box-shadow: 0 6px 16px rgba(0,0,0,.08); }/* End custom CSS */