@import url("/v8/site-shell-premium.css?v=20260810-site-shell-v1");

/* =========================================================
   M2A GROUP — UNIFIED SITE HEADER CONTRACT
   One visible header system across Master + Legacy pages.
   Desktop: logo + Home + 6 nav links + language + Contact Now.
   Tablet/Mobile bar: logo + language + hamburger only.
   ========================================================= */

/* Prevent the retired HTML intro curtain from painting before the command intro boots. */
#m2aIntro{
  display:none !important;
}
#m2aIntro .m2a-intro-panels{
  display:none !important;
}

/* Canonical frame: never inherit floating-card header geometry from older pages. */
.site-header{
  display:block !important;
  width:100% !important;
  max-width:none !important;
  min-height:0 !important;
  margin:0 !important;
  padding:13px 0 !important;
  border-radius:0 !important;
}
.site-header.scrolled{padding:9px 0 !important}

/* Premium logo: compact and proportional without changing header geometry. */
.site-header .brand img{
  width:auto !important;
  max-width:62px !important;
  height:52px !important;
  object-fit:contain !important;
}

/* Drawer must remain above the fixed premium header on every legacy/master route. */
.mobile-menu{z-index:2147483200 !important}

/* Contact is represented only by the primary CTA. */
.desktop-nav a[href="/contact"],
.desktop-nav a[href="/contact/"],
.desktop-nav a[href="/en-contact"],
.desktop-nav a[href="/en-contact/"],
.mobile-menu a[href="/contact"],
.mobile-menu a[href="/contact/"],
.mobile-menu a[href="/en-contact"],
.mobile-menu a[href="/en-contact/"]{
  display:none !important;
}

/* Desktop: Home is a first-class navigation item again. */
@media (min-width:1101px){
  .site-header .header-container{
    display:flex !important;
    width:min(1480px,calc(100% - 40px)) !important;
    max-width:none !important;
    margin-inline:auto !important;
    align-items:center !important;
    justify-content:space-between !important;
    gap:18px !important;
  }

  html[dir="rtl"] .site-header .header-container{direction:rtl !important}
  html[dir="ltr"] .site-header .header-container{direction:ltr !important}

  .site-header .brand{
    position:static !important;
    display:flex !important;
    align-items:center !important;
    flex:0 0 auto !important;
    transform:none !important;
  }

  .site-header .desktop-nav{
    position:static !important;
    display:flex !important;
    flex:1 1 auto !important;
    width:auto !important;
    min-width:0 !important;
    align-items:center !important;
    justify-content:center !important;
    gap:clamp(14px,1.25vw,23px) !important;
    inset:auto !important;
    transform:none !important;
  }

  .site-header .desktop-nav .home-nav-link,
  .site-header .desktop-nav a[href="/"]:first-child,
  .site-header .desktop-nav a[href="/en"]:first-child,
  .site-header .desktop-nav a[href="/en/"]:first-child{
    display:inline-flex !important;
  }

  .site-header .desktop-nav a{
    flex:0 0 auto !important;
    white-space:nowrap !important;
  }

  .site-header .header-actions{
    position:static !important;
    display:flex !important;
    width:auto !important;
    flex:0 0 auto !important;
    align-items:center !important;
    justify-content:flex-end !important;
    flex-wrap:nowrap !important;
    gap:10px !important;
    inset:auto !important;
    transform:none !important;
    white-space:nowrap !important;
  }

  .site-header .language-link,
  .site-header .header-cta{
    display:inline-flex !important;
    flex:0 0 auto !important;
  }

  .site-header .menu-toggle{
    display:none !important;
  }
}

/* Compact desktop/laptop: preserve all seven nav links without collisions. */
@media (min-width:1101px) and (max-width:1320px){
  .site-header .header-container{
    width:calc(100% - 24px) !important;
    gap:10px !important;
  }

  .site-header .desktop-nav{
    gap:clamp(8px,.8vw,13px) !important;
  }

  .site-header .desktop-nav a{
    font-size:11.5px !important;
  }

  .site-header .language-link,
  .site-header .header-cta{
    padding-inline:10px !important;
    font-size:11.5px !important;
  }
}

/* Tablet/Mobile: exact approved bar — Logo | Language | Hamburger. */
@media (max-width:1100px){
  .site-header{padding:10px 0 !important}
  .site-header.scrolled{padding:8px 0 !important}

  .site-header .header-container{
    display:flex !important;
    width:min(100%,calc(100% - 28px)) !important;
    margin-inline:auto !important;
    align-items:center !important;
    justify-content:space-between !important;
    gap:10px !important;
    direction:ltr !important;
  }

  .site-header .brand{
    position:static !important;
    display:flex !important;
    align-items:center !important;
    flex:0 0 auto !important;
    transform:none !important;
  }

  .site-header .desktop-nav,
  .site-header .header-cta{
    display:none !important;
  }

  .site-header .header-actions{
    position:static !important;
    display:flex !important;
    width:auto !important;
    margin-inline-start:auto !important;
    align-items:center !important;
    justify-content:flex-end !important;
    flex:0 0 auto !important;
    flex-wrap:nowrap !important;
    gap:8px !important;
    direction:ltr !important;
    inset:auto !important;
    transform:none !important;
    white-space:nowrap !important;
  }

  .site-header .language-link{
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    flex:0 0 auto !important;
  }

  .site-header .menu-toggle{
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    flex:0 0 auto !important;
  }
}

@media (max-width:420px){
  .site-header .header-container{
    width:calc(100% - 22px) !important;
    gap:8px !important;
  }

  .site-header .brand img{
    max-width:56px !important;
    height:48px !important;
  }

  .site-header .language-link{
    padding:8px 11px !important;
    font-size:11px !important;
  }
}

/* =========================================================
   ARCHITECTURE PAGE — HEADER FOUNDATION FALLBACK
   architecture routes intentionally do not load the large legacy style.css.
   Restore only the canonical header/mobile-menu geometry they need.
   No architecture content selectors are touched here.
   ========================================================= */
body.architecture-page .site-header a,
body.architecture-page .mobile-menu a{
  text-decoration:none !important;
}

body.architecture-page .site-header .brand img{
  width:auto !important;
  max-width:62px !important;
  height:52px !important;
  border-radius:4px !important;
  object-fit:contain !important;
}

body.architecture-page .site-header .desktop-nav a{
  padding:8px 0 !important;
  font-size:14px !important;
  line-height:1.75 !important;
  font-weight:900 !important;
}

body.architecture-page .site-header .language-link,
body.architecture-page .site-header .header-cta{
  min-height:0 !important;
  padding:10px 16px !important;
  border-radius:999px !important;
  font-size:13px !important;
  line-height:1.75 !important;
  font-weight:900 !important;
}

body.architecture-page .site-header .menu-toggle{
  width:46px !important;
  height:46px !important;
  padding:0 !important;
  border-radius:50% !important;
  flex-direction:column !important;
  gap:5px !important;
}
body.architecture-page .site-header .menu-toggle span{
  display:block !important;
  width:19px !important;
  height:2px !important;
  border-radius:99px !important;
}

/* Same canonical mobile drawer used by the rest of the site. */
body.architecture-page .mobile-menu{
  position:fixed !important;
  inset:0 !important;
  opacity:0 !important;
  visibility:hidden !important;
  transition:opacity .35s cubic-bezier(.2,.8,.2,1),visibility .35s cubic-bezier(.2,.8,.2,1) !important;
}
body.architecture-page .mobile-menu.active{
  opacity:1 !important;
  visibility:visible !important;
}
body.architecture-page .mobile-menu-inner{
  position:absolute !important;
  inset-block:18px !important;
  right:18px !important;
  left:auto !important;
  width:min(390px,calc(100% - 36px)) !important;
  display:flex !important;
  flex-direction:column !important;
  gap:10px !important;
  padding:22px !important;
  border:1px solid rgba(201,168,91,.36) !important;
  border-radius:28px !important;
  transform:translateX(35px) !important;
  transition:transform .35s cubic-bezier(.2,.8,.2,1) !important;
}
html[dir="ltr"] body.architecture-page .mobile-menu-inner{
  left:18px !important;
  right:auto !important;
  transform:translateX(-35px) !important;
}
body.architecture-page .mobile-menu.active .mobile-menu-inner{
  transform:none !important;
}
body.architecture-page .mobile-menu-head{
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  margin-bottom:12px !important;
}
body.architecture-page .mobile-menu-head img{
  width:auto !important;
  max-width:70px !important;
  height:58px !important;
  object-fit:contain !important;
}
body.architecture-page .menu-close{
  width:42px !important;
  height:42px !important;
  border-radius:50% !important;
  font-size:28px !important;
}
body.architecture-page .mobile-menu-inner > a{
  padding:13px 16px !important;
  border-radius:17px !important;
  font-weight:900 !important;
}
body.architecture-page .mobile-menu-contact{
  margin-top:auto !important;
  padding:20px !important;
  border-radius:20px !important;
}

@media (max-width:1100px){
  body.architecture-page .site-header .language-link{
    padding:8px 12px !important;
    font-size:11.5px !important;
  }
}

/* =========================================================
   HOMEPAGE DESKTOP — CINEMATIC EXPAND / COMPACT HEADER
   Reuses the existing .scrolled state. Mobile/tablet are untouched.
   ========================================================= */
@media (min-width:1101px){
  html body.home-page .site-header{
    padding:17px 0 !important;
    background:transparent !important;
    border-bottom-color:transparent !important;
    box-shadow:none !important;
    backdrop-filter:blur(2px) saturate(110%) !important;
    -webkit-backdrop-filter:blur(2px) saturate(110%) !important;
    transition:padding .52s cubic-bezier(.2,.8,.2,1),background-color .46s ease,border-color .46s ease,box-shadow .46s ease,backdrop-filter .46s ease !important;
  }

  html body.home-page .site-header .header-container{
    padding:4px 0 !important;
    border:1px solid transparent !important;
    border-radius:26px !important;
    background:transparent !important;
    box-shadow:none !important;
    transition:width .56s cubic-bezier(.2,.8,.2,1),padding .52s cubic-bezier(.2,.8,.2,1),border-color .44s ease,background-color .44s ease,box-shadow .44s ease !important;
  }

  html body.home-page .site-header.scrolled{
    padding:8px 0 !important;
    background:transparent !important;
    border-bottom-color:transparent !important;
    box-shadow:none !important;
    backdrop-filter:none !important;
    -webkit-backdrop-filter:none !important;
  }

  html body.home-page .site-header.scrolled .header-container{
    width:min(1320px,calc(100% - 40px)) !important;
    padding:7px 16px !important;
    border-color:rgba(73,220,230,.13) !important;
    background:rgba(8,17,20,.88) !important;
    box-shadow:0 16px 44px rgba(0,0,0,.24),inset 0 1px 0 rgba(255,255,255,.035) !important;
    backdrop-filter:blur(18px) saturate(125%) !important;
    -webkit-backdrop-filter:blur(18px) saturate(125%) !important;
  }

  html[data-m2a-home-theme="light"] body.home-page .site-header,
  html[data-m2a-home-theme="light"] body.home-page .site-header:not(.scrolled){
    background:transparent !important;
    border-bottom-color:transparent !important;
    box-shadow:none !important;
  }

  html[data-m2a-home-theme="light"] body.home-page .site-header.scrolled .header-container{
    border-color:rgba(73,220,230,.22) !important;
    background:rgba(8,17,20,.94) !important;
    box-shadow:0 18px 48px rgba(0,0,0,.25),inset 0 1px 0 rgba(255,255,255,.045) !important;
  }

  html[data-m2a-home-theme="light"] body.home-page .site-header.scrolled .desktop-nav a{
    color:#dce9e8 !important;
  }

  html[data-m2a-home-theme="light"] body.home-page .site-header.scrolled .desktop-nav a:hover,
  html[data-m2a-home-theme="light"] body.home-page .site-header.scrolled .desktop-nav a.active{
    color:#49dce6 !important;
  }

  html[data-m2a-home-theme="light"] body.home-page .site-header.scrolled .language-link{
    color:#eef8f7 !important;
    background:rgba(255,255,255,.055) !important;
    border-color:rgba(255,255,255,.12) !important;
  }

  html[data-m2a-home-theme="light"] body.home-page .site-header.scrolled .m2a-theme-toggle{
    color:#f3d77a !important;
    background:rgba(255,255,255,.045) !important;
    border-color:rgba(73,220,230,.22) !important;
    box-shadow:0 8px 22px rgba(0,0,0,.18) !important;
  }
}

@media (prefers-reduced-motion:reduce) and (min-width:1101px){
  html body.home-page .site-header,
  html body.home-page .site-header .header-container{
    transition:none !important;
  }
}

/* =========================================================
   HOMEPAGE LIGHT THEME — FULL CANVAS + SECTION SYSTEM
   The light state now owns the page canvas itself, not only individual cards.
   Image-overlay project/insight cards intentionally keep their cinematic treatment.
   ========================================================= */
html[data-m2a-home-theme="light"] body.home-page,
html[data-m2a-home-theme="light"] body.home-page main{
  background:#eef7f5 !important;
  color:#10282d !important;
}

html[data-m2a-home-theme="light"] body.home-page .page-bg{
  background:
    radial-gradient(circle at 12% 14%,rgba(73,220,230,.16),transparent 34%),
    radial-gradient(circle at 86% 16%,rgba(240,210,123,.18),transparent 30%),
    linear-gradient(135deg,#f5fbfa 0%,#e8f3f1 48%,#f2f8f7 100%) !important;
}

html[data-m2a-home-theme="light"] body.home-page .page-bg::after{
  background-image:
    linear-gradient(rgba(16,40,45,.045) 1px,transparent 1px),
    linear-gradient(90deg,rgba(16,40,45,.045) 1px,transparent 1px) !important;
  opacity:.52 !important;
}

html[data-m2a-home-theme="light"] body.home-page main>.hero{
  background:
    radial-gradient(circle at 74% 24%,rgba(240,210,123,.18),transparent 28%),
    radial-gradient(circle at 20% 68%,rgba(73,220,230,.15),transparent 31%),
    linear-gradient(180deg,#f7fbfa 0%,#edf6f4 100%) !important;
}

html[data-m2a-home-theme="light"] body.home-page main>.section.about,
html[data-m2a-home-theme="light"] body.home-page main>.section.process,
html[data-m2a-home-theme="light"] body.home-page main>.section.projects-showcase,
html[data-m2a-home-theme="light"] body.home-page main>.section.partners,
html[data-m2a-home-theme="light"] body.home-page main>.section.quote-section{
  background:#f3f9f8 !important;
}

html[data-m2a-home-theme="light"] body.home-page main>.section.sectors,
html[data-m2a-home-theme="light"] body.home-page main>.section.strength-section,
html[data-m2a-home-theme="light"] body.home-page main>.section.home-media-hub,
html[data-m2a-home-theme="light"] body.home-page main>.section.articles-showcase,
html[data-m2a-home-theme="light"] body.home-page main>.section.contact{
  background:#e7f2f0 !important;
}

html[data-m2a-home-theme="light"] body.home-page .brand-command-strip{
  background:linear-gradient(180deg,#e9f4f2,#e3efed) !important;
  border-color:rgba(16,40,45,.09) !important;
}

html[data-m2a-home-theme="light"] body.home-page .section-head h2,
html[data-m2a-home-theme="light"] body.home-page .section-copy h2,
html[data-m2a-home-theme="light"] body.home-page .strength-copy h2,
html[data-m2a-home-theme="light"] body.home-page .projects-section-head h2,
html[data-m2a-home-theme="light"] body.home-page .m2a-media-heading h2,
html[data-m2a-home-theme="light"] body.home-page .partner-section-head h2,
html[data-m2a-home-theme="light"] body.home-page .articles-section-head h2,
html[data-m2a-home-theme="light"] body.home-page .partner-brand-copy h3,
html[data-m2a-home-theme="light"] body.home-page .partner-contact-head h4,
html[data-m2a-home-theme="light"] body.home-page .quote-assurance-item strong{
  color:#10282d !important;
}

html[data-m2a-home-theme="light"] body.home-page .section-head p,
html[data-m2a-home-theme="light"] body.home-page .section-copy p,
html[data-m2a-home-theme="light"] body.home-page .strength-copy p,
html[data-m2a-home-theme="light"] body.home-page .projects-section-head p,
html[data-m2a-home-theme="light"] body.home-page .m2a-media-heading p,
html[data-m2a-home-theme="light"] body.home-page .partner-section-head p,
html[data-m2a-home-theme="light"] body.home-page .articles-section-head p,
html[data-m2a-home-theme="light"] body.home-page .partner-brand-copy p,
html[data-m2a-home-theme="light"] body.home-page .partner-contact-head p,
html[data-m2a-home-theme="light"] body.home-page .quote-assurance-item small{
  color:#587174 !important;
}

html[data-m2a-home-theme="light"] body.home-page .projects-coming-note,
html[data-m2a-home-theme="light"] body.home-page .projects-head-meta span,
html[data-m2a-home-theme="light"] body.home-page .articles-head-meta span,
html[data-m2a-home-theme="light"] body.home-page .articles-bottom-cta,
html[data-m2a-home-theme="light"] body.home-page .m2a-media-filter-bar,
html[data-m2a-home-theme="light"] body.home-page .partner-showcase,
html[data-m2a-home-theme="light"] body.home-page .partner-brand-panel,
html[data-m2a-home-theme="light"] body.home-page .partner-contact-panel,
html[data-m2a-home-theme="light"] body.home-page .partner-contact-item,
html[data-m2a-home-theme="light"] body.home-page .partner-capabilities span,
html[data-m2a-home-theme="light"] body.home-page .quote-assurance-item{
  background:rgba(255,255,255,.72) !important;
  border-color:rgba(16,40,45,.09) !important;
  box-shadow:0 18px 46px rgba(38,78,82,.07) !important;
}

html[data-m2a-home-theme="light"] body.home-page .m2a-media-filter-bar button{
  color:#244348 !important;
  background:rgba(255,255,255,.7) !important;
  border-color:rgba(16,40,45,.1) !important;
}

html[data-m2a-home-theme="light"] body.home-page .m2a-media-filter-bar button.is-active{
  color:#083f43 !important;
  background:rgba(73,220,230,.14) !important;
  border-color:rgba(13,119,120,.2) !important;
}

html[data-m2a-home-theme="light"] body.home-page .partner-contact-item strong,
html[data-m2a-home-theme="light"] body.home-page .projects-coming-note strong,
html[data-m2a-home-theme="light"] body.home-page .articles-bottom-cta strong{
  color:#18383d !important;
}

html[data-m2a-home-theme="light"] body.home-page .partner-contact-item span,
html[data-m2a-home-theme="light"] body.home-page .projects-coming-note p,
html[data-m2a-home-theme="light"] body.home-page .articles-bottom-cta p{
  color:#60777b !important;
}

html[data-m2a-home-theme="light"] body.home-page .footer,
html[data-m2a-home-theme="light"] body.home-page .m2a-master-footer{
  background:linear-gradient(180deg,#e6f1ef,#dfecea) !important;
  border-top-color:rgba(16,40,45,.09) !important;
}

html[data-m2a-home-theme="light"] body.home-page .footer p,
html[data-m2a-home-theme="light"] body.home-page .developer-credit-prefix,
html[data-m2a-home-theme="light"] body.home-page .developer-credit-email{
  color:#5c7377 !important;
}

html[data-m2a-home-theme="light"] body.home-page .developer-signature-name{
  color:#0b7778 !important;
}