/**
 * ========================================
 * MAIN STYLESHEET
 * ========================================
 * This is the master stylesheet that imports all other CSS files.
 * The order of imports is critical for the cascade.
 *
 * For production, it's recommended to create page-specific stylesheets
 * that import only the necessary components for that page, rather than
 * loading this entire file.
 */

/* === 1. GLOBAL FOUNDATION === */
/* Imports variables, resets, layout helpers, and base typography */
@import url('global/index.css');

/* === 2. REUSABLE COMPONENTS === */
/* Imports all reusable UI components */

/*@import url('components/alerts.css');
@import url('components/buttons.css');
@import url('components/cards.css');
@import url('components/forms.css');*/
/*@import url('components/cards.css');*/
/*@import url('components/carousel-unified.css');*/

/* === 3. SECTION & LAYOUT STYLES === */
/* Imports styles for specific page sections and major layout elements */
@import url('layout/header.css');
@import url('layout/curve.css');
@import url('layout/overlay-menu.css');
@import url('layout/footer.css');
@import url('layout/menu-icon.css');
@import url('components/filter-search.css');



/* ==========================================================================
    LEGACY IMPORTS (To be removed as files are refactored)
   ========================================================================== */

/* @import url('menu-icon.css'); */
/* @import url('curve.css'); */
/* @import url('hero.css'); */
/* @import url('services.css'); */
/* @import url('indicators.css'); */
/* @import url('consultation.css'); */
/* @import url('projects.css'); */
/* @import url('about.css');  */
/* @import url('whatwedo.css'); */

/* utilities (if you pull responsive out) */
/*@import url('utilities/responsive.css'); */

/* Accessibility helpers (must come after @import rules) */
.visually-hidden{position:absolute!important;height:1px;width:1px;overflow:hidden;clip:rect(1px,1px,1px,1px);white-space:nowrap;border:0;padding:0;margin:-1px}

/* Mobile defaults */
@media (max-width: 480px){
  html, body { max-width: 100%; overflow-x: hidden; }
  .hero picture img, .hero img { max-height: 75vh; width: 100%; object-fit: cover; }
  .bundles-row, .em-services-carousel { overflow-x: auto; -webkit-overflow-scrolling: touch; }
}