/* Site extras: behaviours that the Webflow site applied via injected runtime
   scripts, reproduced here as static CSS so nothing changes visually but no
   Webflow JS is needed. Loaded globally by BaseLayout (all selectors are scoped
   by specific class names, so loading everywhere is harmless). */

/* Design tokens. Reference these for consistent styling across the site. */
:root {
  --aa-shadow-float: 0 18px 44px rgba(0, 0, 0, .12); /* floating-card shadow (nav dropdowns; reuse anywhere) */
}

/* --- Homepage hero: enforce aspect ratio to prevent CLS (was an inline <style>
       + heropreloadhome script). Only affects the homepage .homepage-grid-main. --- */
.homepage-grid-main > img.image {
  aspect-ratio: 2560 / 1509;
  height: auto;
  object-fit: contain;
  width: 130%;
  max-width: 130%;
  margin: 0 0 -24px -110px;
  padding: 0;
  position: relative;
  z-index: 0;
  display: block;
}
.homepage-grid-main > .why_grid-content {
  position: relative;
  z-index: 1;
}
@media (min-width: 992px) {
  .section_hero { padding-top: 96px; }
}
@media (max-width: 991px) {
  .homepage-grid-main > img.image { width: 100%; max-width: 100%; margin: 16px auto 0; }
}
@media (max-width: 767px) {
  .homepage-grid-main > img.image { width: 90vw; max-width: 90vw; margin: 12px calc(50% - 45vw) 0; }
}
@media (max-width: 479px) {
  .homepage-grid-main > img.image { width: 95vw; max-width: 95vw; margin: 8px calc(50% - 47.5vw) 0; }
}

/* --- Homepage process cards (was processcardstighten-1.0.1.js) --- */
.service-card { gap: 8px !important; padding: 14px 18px !important; }
.service-card-icon { margin-bottom: 0 !important; }
.service-card-icon img { width: 64px !important; height: 64px !important; max-width: 64px !important; }
.service-card-heading { font-size: 24px !important; margin-bottom: 2px !important; line-height: 1.25 !important; }
.service-card-description { font-size: 14px !important; line-height: 22px !important; margin-bottom: 0 !important; }
.service-card .button-3 { margin-top: auto !important; }

/* --- Mobile heading lift. The fixed navbar clearance (.main-wrapper margin-top:100px)
       is sized for the taller desktop bar; the mobile bar is ~72px, so on small screens
       that leaves too much empty space above each page's heading. Tighten the clearance
       on mobile so every page's content starts just below the bar. --- */
@media (max-width: 991px) {
  .main-wrapper { margin-top: 80px; }
}

/* --- Mobile nav overlay (was mobilenavoverlay-1.1.0.js). On <=991px Header.astro hides
       its own links/CTA and shows the burger, which opens this .aa-menu overlay. --- */
/* Sits BELOW the floating bar (z-index 900 < the nav's 1000) so the real bar stays put
   on top when the menu opens; padding-top clears the bar. The bar's own logo + burger
   (which animates to an X) stay visible, so no duplicate logo/close is needed here. */
.aa-menu {
  position: fixed; top: 0; left: 0; right: 0; bottom: 0;
  background: #fff; z-index: 900; overflow-y: auto;
  padding: 5.25rem 1.5rem calc(env(safe-area-inset-bottom, 0px) + 6rem);
  box-sizing: border-box; display: none;
}
.aa-menu.open { display: block; }
.aa-menu-inner { max-width: 520px; margin: 0 auto; display: flex; flex-direction: column; gap: .25rem; }
.aa-menu .item { font-size: 1.15rem; font-weight: 600; color: #1a1a1a; padding: .6rem 0; text-decoration: none; display: block; line-height: 1.25; }
.aa-menu .cat { padding-top: .9rem; }
.aa-menu .sublist { display: flex; flex-direction: column; padding: .1rem 0 .25rem .6rem; gap: 0; }
.aa-menu .sublist a { color: #555; font-size: .95rem; padding: .3rem 0; text-decoration: none; line-height: 1.3; display: block; font-weight: 400; }
.aa-cta {
  position: fixed; left: 1.5rem; right: 1.5rem;
  bottom: calc(env(safe-area-inset-bottom, 0px) + 1rem);
  z-index: 1001; max-width: 520px; margin: 0 auto; display: none;
}
.aa-cta.open { display: block; }
.aa-cta a {
  display: flex; align-items: center; justify-content: center; width: 100%;
  padding: 1rem 2rem; background: #3c1d3d; color: #fff; border-radius: 8px;
  font-weight: 600; font-size: 1.05rem; text-decoration: none; box-sizing: border-box; white-space: nowrap;
}
body.aa-menu-open { overflow: hidden; }
@media (min-width: 992px) {
  .aa-menu, .aa-cta { display: none !important; }
}