/*
Theme Name: ZAA Integral Engineering v3
Theme URI: https://zaaengineering.com
Author: ZAA Integral Engineering
Author URI: https://zaaengineering.com
Description: Premium multidisciplinary corporate engineering theme for ZAA Integral Engineering Limited. Pre-built with Electrical, Civil, and Mechanical engineering capabilities, project portfolio, integration diagram, and Elementor compatibility.
Version: 3.1.10
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: zaa-engineering
Tags: engineering, corporate, multidisciplinary, construction, electrical, civil, mechanical, dark-theme, elementor-ready

ZAA Integral Engineering Theme, (C) 2024 ZAA Integral Engineering Limited.
*/

/* Custom variables and theme reset */
:root {
  --zaa-obsidian: #0A0D12;
  --zaa-graphite: #151A21;
  --zaa-graphite-light: #1C2230;
  --zaa-warm-white: #F5F4F0;
  --zaa-steel: #8B949E;
  --zaa-steel-light: #A8B2BC;
  --zaa-near-black: #111318;
  --zaa-amber: #C8935A;
  --zaa-amber-light: #D4A76A;
  --zaa-amber-dark: #A67744;
  --zaa-font-heading: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
  --zaa-font-body: 'Inter', system-ui, -apple-system, sans-serif;
}

body {
  margin: 0;
  padding: 0;
  background-color: var(--zaa-obsidian);
  color: var(--zaa-warm-white);
  font-family: var(--zaa-font-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}


/* === ZAA v3 Multi-page Architecture === */
.zaa-inner-page{padding-top:110px;padding-bottom:100px;background:var(--zaa-obsidian);min-height:70vh}
.zaa-page-shell{max-width:1440px}
.zaa-lead{max-width:860px;color:var(--zaa-steel-light);font-size:20px;line-height:1.75;margin:0 0 64px}
.zaa-page-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:64px;align-items:start;margin:0 0 90px}
.zaa-highlight-panel{padding:38px;background:var(--zaa-graphite);border:1px solid rgba(245,244,240,.08)}
.zaa-highlight-panel h3{font-family:var(--zaa-font-heading);font-size:16px;letter-spacing:.08em;margin:10px 0;color:var(--zaa-warm-white)}
.zaa-highlight-panel p{color:var(--zaa-steel-light);line-height:1.7;margin:0 0 28px}
.zaa-section-block{padding:70px 0;border-top:1px solid rgba(245,244,240,.08);margin-top:40px}
.zaa-section-block>.zaa-heading{margin-bottom:40px}
.zaa-capability-page-grid{margin-bottom:60px}
.zaa-page-card-link{text-decoration:none;display:block}
.zaa-page-card-link .zaa-card-content{min-height:260px}
.zaa-page-card-link:hover .zaa-card-title{color:var(--zaa-amber)}
.zaa-contact-list{list-style:none;padding:0;margin:40px 0}
.zaa-contact-list li{display:flex;flex-direction:column;gap:7px;padding:20px 0;border-bottom:1px solid rgba(245,244,240,.1)}
.zaa-contact-list strong{font:700 10px var(--zaa-font-heading);letter-spacing:.25em;color:var(--zaa-amber)}
.zaa-contact-list span,.zaa-contact-list a{color:var(--zaa-warm-white);text-decoration:none}
.zaa-note{color:var(--zaa-steel);font-size:13px;margin-top:40px}
.zaa-empty-state{padding:60px;background:var(--zaa-graphite);border:1px solid rgba(245,244,240,.08)}
.zaa-post-card .zaa-card-image{height:230px}
.zaa-post-card .zaa-card-title a,.zaa-projects-archive-grid .zaa-card-title a{color:inherit;text-decoration:none}
.zaa-project-filter{display:flex;gap:10px;flex-wrap:wrap;margin:0 0 40px}
.zaa-filter-btn{font:700 10px var(--zaa-font-heading);letter-spacing:.18em;color:var(--zaa-steel-light);background:transparent;border:1px solid rgba(245,244,240,.16);padding:12px 16px;cursor:pointer}
.zaa-filter-btn:hover,.zaa-filter-btn.active{border-color:var(--zaa-amber);color:var(--zaa-amber);background:rgba(200,147,90,.06)}
.zaa-projects-archive-grid{align-items:stretch}
.zaa-projects-archive-grid .zaa-card{height:100%}
.zaa-projects-archive-grid .zaa-card-content{height:calc(100% - 230px);box-sizing:border-box}
.zaa-project-featured img{width:100%;height:auto;display:block}
.zaa-single-project{padding:140px 0 100px;background:var(--zaa-obsidian)}
.zaa-single-project .zaa-single-title{max-width:1000px;margin-bottom:50px}
.zaa-project-layout{margin-top:55px}
.zaa-project-details{background:var(--zaa-graphite);padding:32px;border:1px solid rgba(245,244,240,.08)}
.zaa-project-details h3{font:800 13px var(--zaa-font-heading);letter-spacing:.15em;color:var(--zaa-amber);margin:0 0 20px}
.zaa-project-detail{display:flex;flex-direction:column;gap:5px;padding:16px 0;border-bottom:1px solid rgba(245,244,240,.08)}
.zaa-project-detail strong{font:700 9px var(--zaa-font-heading);letter-spacing:.18em;color:var(--zaa-steel)}
.zaa-project-detail span{color:var(--zaa-warm-white)}
.zaa-project-inquire{display:inline-flex;margin-top:25px}
.zaa-prose p{margin-bottom:24px}
.zaa-prose h2,.zaa-prose h3{font-family:var(--zaa-font-heading);color:var(--zaa-warm-white);margin:40px 0 16px}
.zaa-honeypot{position:absolute!important;left:-10000px!important;opacity:0!important;height:1px!important;width:1px!important}
@media(max-width:900px){
 .zaa-page-grid{grid-template-columns:1fr;gap:40px}
 .zaa-inner-page{padding-top:90px}
 .zaa-lead{font-size:17px}
}
@media(max-width:640px){
 .zaa-inner-page{padding-top:80px;padding-bottom:70px}
 .zaa-page-shell{padding-left:20px;padding-right:20px}
 .zaa-project-filter{gap:7px}
 .zaa-filter-btn{padding:10px 11px;font-size:9px}
 .zaa-single-project{padding:100px 0 70px}
}


/* =========================================================
   ZAA GLOBAL ARCHITECTURE v5.0
   Final compact spacing + six-item navigation
========================================================= */
:root{--zaa-global-section:64px;--zaa-global-card-gap:14px;--zaa-global-card-y:18px;--zaa-global-card-x:24px}
html,body{overflow-x:hidden}
.zaa-exec-section{padding:var(--zaa-global-section) 0!important}
.zaa-exec-section-head{margin-bottom:38px!important}
.zaa-exec-positioning,.zaa-exec-cap-grid,.zaa-exec-projects,.zaa-exec-sectors{gap:var(--zaa-global-card-gap)!important;border:0!important}
.zaa-exec-position-card,.zaa-exec-sector,.zaa-exec-step,.zaa-exec-cap-card,.zaa-exec-project{box-sizing:border-box!important}
.zaa-exec-position-card,.zaa-exec-sector,.zaa-exec-step{min-height:0!important;padding:var(--zaa-global-card-y) var(--zaa-global-card-x)!important;display:flex!important;flex-direction:column!important;justify-content:center!important}
.zaa-exec-position-card h3,.zaa-exec-sector h3,.zaa-exec-step h3{margin:0 0 8px!important}
.zaa-exec-position-card p,.zaa-exec-sector p,.zaa-exec-step p{margin:0!important;line-height:1.55!important}
.zaa-exec-position-num,.zaa-exec-sector span{display:none!important}
.zaa-exec-cap-card{min-height:0!important}
.zaa-exec-cap-image{height:205px!important;min-height:205px!important}
.zaa-exec-cap-body{min-height:0!important;padding:18px 22px!important;display:flex!important;flex-direction:column!important;justify-content:center!important}
.zaa-exec-cap-body h3{margin:0 0 4px!important}
.zaa-exec-cap-body p{margin:8px 0!important;line-height:1.5!important}
.zaa-exec-project-image{height:195px!important;min-height:195px!important}
.zaa-exec-project-content{min-height:0!important;padding:18px 22px!important;display:flex!important;flex-direction:column!important;justify-content:center!important}
.zaa-exec-hero-content{padding-top:54px!important;padding-bottom:58px!important}
.zaa-exec-hero-layout{gap:55px!important}
.zaa-exec-hero{min-height:calc(100vh - 76px)!important}
.zaa-header-inner{min-height:68px!important}
.zaa-nav-menu>li>a{font-size:10px!important;letter-spacing:.12em!important}
.zaa-nav-menu .sub-menu{z-index:99999!important;background:#0A0D12!important;border:1px solid rgba(245,244,240,.12)!important}
.zaa-nav-menu .sub-menu a{padding:11px 15px!important;font-size:9px!important}
@media(max-width:760px){:root{--zaa-global-section:42px;--zaa-global-card-gap:10px;--zaa-global-card-y:15px;--zaa-global-card-x:18px}.zaa-exec-section{padding:42px 0!important}.zaa-exec-section-head{margin-bottom:26px!important}.zaa-exec-cap-image{height:190px!important;min-height:190px!important}.zaa-exec-cap-body{padding:15px 18px!important}.zaa-exec-project-image{height:180px!important;min-height:180px!important}.zaa-exec-project-content{padding:15px 18px!important}.zaa-exec-hero{min-height:78svh!important}.zaa-exec-hero-content{padding-top:55px!important;padding-bottom:35px!important}}


/* =========================================================
   ZAA v3.1.10 — UNIFIED GLOBAL PAGE RHYTHM
   Purpose: make the top spacing, section spacing, container
   spacing and card rhythm consistent across the entire site.
   ========================================================= */

:root{
  --zaa-page-top:64px;
  --zaa-page-bottom:64px;
  --zaa-section-y:64px;
  --zaa-section-heading-gap:28px;
  --zaa-grid-gap:14px;
  --zaa-container-max:1380px;
  --zaa-container-x:32px;
  --zaa-card-y:18px;
  --zaa-card-x:22px;
}

/* One master content width for every page */
.zaa-inner-page{
  padding-top:var(--zaa-page-top)!important;
  padding-bottom:var(--zaa-page-bottom)!important;
  min-height:0!important;
  background:var(--zaa-obsidian)!important;
}

.zaa-container,
.zaa-page-shell,
.zaa-inner-page>.zaa-container,
.zaa-inner-page>.zaa-page-shell{
  width:100%!important;
  max-width:var(--zaa-container-max)!important;
  margin-left:auto!important;
  margin-right:auto!important;
  padding-left:var(--zaa-container-x)!important;
  padding-right:var(--zaa-container-x)!important;
  box-sizing:border-box!important;
}

/* Every internal page starts from the same vertical baseline */
.zaa-page-hero{
  margin:0!important;
  padding:0 0 var(--zaa-section-y)!important;
  min-height:0!important;
}

/* Every content section uses exactly the same vertical rhythm */
.zaa-section-block{
  margin:0!important;
  padding:var(--zaa-section-y) 0!important;
  border-top:1px solid rgba(245,244,240,.08);
}

.zaa-section-block:first-of-type{
  margin-top:0!important;
}

.zaa-section-block>.zaa-section-label,
.zaa-section-block>.zaa-heading,
.zaa-section-block>.zaa-grid-2,
.zaa-section-block>.zaa-grid-3,
.zaa-section-block>.zaa-grid-4,
.zaa-section-block>.zaa-lifecycle,
.zaa-section-block>.zaa-highlight-panel{
  margin-top:0!important;
}

.zaa-section-block>.zaa-section-label{
  margin-bottom:10px!important;
}

.zaa-section-block>.zaa-heading{
  margin-bottom:var(--zaa-section-heading-gap)!important;
}

/* Remove accumulated bottom margins that create uneven page lengths */
.zaa-section-block:last-child{
  margin-bottom:0!important;
}

.zaa-section-block p:last-child,
.zaa-page-hero p:last-child,
.zaa-card-content p:last-child,
.zaa-highlight-panel p:last-child{
  margin-bottom:0!important;
}

/* Unified page hero text block */
.zaa-page-hero .zaa-lead{
  margin:0!important;
  max-width:760px!important;
}

/* Internal page grids */
.zaa-page-grid,
.zaa-grid-2,
.zaa-grid-3,
.zaa-grid-4{
  gap:var(--zaa-grid-gap)!important;
  margin-top:0!important;
  margin-bottom:0!important;
}

.zaa-page-grid{
  margin-bottom:0!important;
}

/* Uniform card geometry */
.zaa-card,
.zaa-page-card-link,
.zaa-principle-card,
.zaa-sector-card,
.zaa-resource-card,
.zaa-highlight-panel,
.zaa-page-card-link .zaa-card-content{
  box-sizing:border-box!important;
}

.zaa-card-content,
.zaa-principle-card,
.zaa-sector-card,
.zaa-resource-card{
  padding-top:var(--zaa-card-y)!important;
  padding-bottom:var(--zaa-card-y)!important;
  padding-left:var(--zaa-card-x)!important;
  padding-right:var(--zaa-card-x)!important;
}

.zaa-page-card-link .zaa-card-content{
  min-height:0!important;
  height:100%!important;
}

.zaa-highlight-panel{
  padding:var(--zaa-card-y) var(--zaa-card-x)!important;
}

/* Prevent headings from introducing different top offsets */
.zaa-page-shell h1,
.zaa-page-shell h2,
.zaa-page-shell h3,
.zaa-page-shell h4{
  margin-top:0!important;
}

/* Contact and project pages follow the same baseline */
.zaa-contact-list{
  margin-top:0!important;
  margin-bottom:0!important;
}

.zaa-single-project{
  padding-top:var(--zaa-page-top)!important;
  padding-bottom:var(--zaa-page-bottom)!important;
}

.zaa-single-project .zaa-single-title{
  margin-top:0!important;
}

.zaa-project-layout{
  margin-top:var(--zaa-section-heading-gap)!important;
}

/* Archive pages */
.zaa-projects-archive-grid{
  margin-top:0!important;
}

/* Homepage: same section rhythm, with hero intentionally treated separately */
.zaa-exec-section{
  padding-top:var(--zaa-section-y)!important;
  padding-bottom:var(--zaa-section-y)!important;
}

.zaa-exec-section-head,
.zaa-exec-project-head{
  margin-bottom:var(--zaa-section-heading-gap)!important;
}

/* Compact homepage hero: visually stronger but no excessive vertical waste */
.zaa-exec-hero{
  min-height:68vh!important;
  height:auto!important;
}

.zaa-exec-hero-content{
  padding-top:48px!important;
  padding-bottom:42px!important;
}

/* Homepage cards use the same grid rhythm */
.zaa-exec-positioning,
.zaa-exec-cap-grid,
.zaa-exec-projects,
.zaa-exec-sectors,
.zaa-exec-process,
.zaa-exec-principles{
  gap:var(--zaa-grid-gap)!important;
}

/* Uniform card vertical alignment */
.zaa-exec-position-card,
.zaa-exec-sector,
.zaa-exec-step,
.zaa-exec-cap-card,
.zaa-exec-project,
.zaa-exec-principle{
  margin:0!important;
}

/* Remove visual numbering globally */
.zaa-card-number,
.zaa-exec-position-num,
.zaa-exec-sector span,
.zaa-exec-step-number,
.zaa-section-number{
  display:none!important;
}

/* Keep animation subtle */
.zaa-reveal{
  animation:zaaUnifiedReveal .65s cubic-bezier(.22,1,.36,1) both;
}

@keyframes zaaUnifiedReveal{
  from{opacity:0;transform:translateY(18px)}
  to{opacity:1;transform:translateY(0)}
}

/* =========================================================
   TABLET
   ========================================================= */
@media(max-width:900px){
  :root{
    --zaa-page-top:50px;
    --zaa-page-bottom:50px;
    --zaa-section-y:50px;
    --zaa-section-heading-gap:24px;
    --zaa-container-x:26px;
    --zaa-card-y:16px;
    --zaa-card-x:20px;
  }

  .zaa-inner-page{
    padding-top:var(--zaa-page-top)!important;
    padding-bottom:var(--zaa-page-bottom)!important;
  }

  .zaa-page-hero{
    padding-bottom:var(--zaa-section-y)!important;
  }

  .zaa-exec-hero{
    min-height:64vh!important;
  }

  .zaa-exec-hero-content{
    padding-top:42px!important;
    padding-bottom:34px!important;
  }
}

/* =========================================================
   MOBILE
   ========================================================= */
@media(max-width:760px){
  :root{
    --zaa-page-top:36px;
    --zaa-page-bottom:36px;
    --zaa-section-y:36px;
    --zaa-section-heading-gap:22px;
    --zaa-container-x:20px;
    --zaa-card-y:14px;
    --zaa-card-x:18px;
  }

  .zaa-inner-page{
    padding-top:var(--zaa-page-top)!important;
    padding-bottom:var(--zaa-page-bottom)!important;
  }

  .zaa-container,
  .zaa-page-shell,
  .zaa-inner-page>.zaa-container,
  .zaa-inner-page>.zaa-page-shell{
    padding-left:20px!important;
    padding-right:20px!important;
  }

  .zaa-page-hero{
    padding-bottom:var(--zaa-section-y)!important;
  }

  .zaa-lead{
    font-size:17px!important;
    line-height:1.62!important;
  }

  .zaa-page-grid{
    grid-template-columns:1fr!important;
    gap:var(--zaa-grid-gap)!important;
  }

  .zaa-grid-2,
  .zaa-grid-3,
  .zaa-grid-4{
    grid-template-columns:1fr!important;
  }

  .zaa-exec-section{
    padding-top:36px!important;
    padding-bottom:36px!important;
  }

  .zaa-exec-hero{
    min-height:64svh!important;
  }

  .zaa-exec-hero-content{
    padding-top:36px!important;
    padding-bottom:26px!important;
  }

  .zaa-exec-section-head,
  .zaa-exec-project-head{
    margin-bottom:22px!important;
  }
}

/* =========================================================
   SMALL PHONES
   ========================================================= */
@media(max-width:480px){
  :root{
    --zaa-page-top:30px;
    --zaa-page-bottom:30px;
    --zaa-section-y:30px;
    --zaa-container-x:16px;
    --zaa-card-y:12px;
    --zaa-card-x:16px;
  }

  .zaa-container,
  .zaa-page-shell,
  .zaa-inner-page>.zaa-container,
  .zaa-inner-page>.zaa-page-shell{
    padding-left:16px!important;
    padding-right:16px!important;
  }

  .zaa-exec-hero{
    min-height:61svh!important;
  }

  .zaa-exec-hero-content{
    padding-top:30px!important;
    padding-bottom:22px!important;
  }
}

/* =========================================================
   REDUCED MOTION
   ========================================================= */
@media(prefers-reduced-motion:reduce){
  .zaa-reveal,
  .zaa-card,
  .zaa-exec-cap-card,
  .zaa-exec-project{
    animation:none!important;
    transform:none!important;
  }
}