/*
Theme Name: MTA360
Description: Custom hand-coded theme for MTA360, matching the approved design comp 1:1.
Author: MTA360
Version: 1.0.0
Text Domain: mta360
*/

:root {
  --navy: #001A33;
  --gold: #E0C88A;
  --ivory: #F5F0E1;
  --ink: #2B2B2B;
  --muted-gold: #9a823f;
  --alt-bg: #FBF7EA;
  --font-display: 'Playfair Display', serif;
  --font-body: 'Montserrat', Arial, sans-serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; background: var(--ivory); }
body {
  font-family: var(--font-body);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
}
a { text-decoration: none; color: inherit; }
img { max-width: 100%; height: auto; display: block; }
:where(h1, h2, h3, h4, h5, h6) { font-family: var(--font-display); margin: 0; }

/* ===== Header ===== */
.mta-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
  background: rgba(0,26,51,0.96);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(224,200,138,0.32);
}
.mta-header-inner {
  width: min(100% - 48px, 1280px); margin-inline: auto;
  display: flex !important; align-items: center !important; justify-content: space-between !important; height: 104px !important;
  box-sizing: border-box !important;
}
.mta-logo { display: flex !important; align-items: center !important; height: 100% !important; }
.mta-logo img { height: 78px !important; width: auto !important; display: block !important; margin: 0 !important; }

.mta-nav { display: flex !important; align-items: center !important; gap: 30px !important; height: 100% !important; margin: 0 !important; }
.mta-nav-item { position: relative !important; height: 100% !important; display: flex !important; align-items: center !important; box-sizing: border-box !important; }
.mta-nav-item > a {
  font-family: var(--font-body); color: var(--ivory) !important; font-size: 0.78rem; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase; cursor: pointer; white-space: nowrap;
  display: flex !important; align-items: center !important; justify-content: center !important;
  height: auto !important; line-height: normal !important; padding: 0 !important; margin: 0 !important;
  transform: translateY(6px) !important;
}
.mta-nav-item:hover > a, .mta-nav-item.mta-open > a { color: var(--gold); }
.mta-dropdown {
  position: absolute; top: 100%; left: 0; min-width: 260px;
  background: rgba(0,26,51,0.98); border: 1px solid rgba(224,200,138,0.28); padding: 10px 0;
  opacity: 0; visibility: hidden; transform: translateY(6px);
  transition: opacity 0.18s ease, transform 0.18s ease;
}
.mta-nav-item:hover .mta-dropdown, .mta-nav-item.mta-open .mta-dropdown {
  opacity: 1; visibility: visible; transform: translateY(0);
}
.mta-dropdown a {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 11px 22px; color: rgba(245,240,225,0.86); font-size: 0.78rem; font-weight: 500; letter-spacing: 0.04em;
  white-space: nowrap;
}
.mta-dropdown a:hover { background: rgba(224,200,138,0.08); color: var(--gold); }
.mta-badge {
  font-size: 0.58rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--navy); background: var(--gold); padding: 3px 7px;
}

.mta-header-right { display: flex !important; align-items: center !important; gap: 22px; height: 100% !important; }
.mta-phone {
  color: var(--gold); font-weight: 700; letter-spacing: 0.04em; font-size: 0.86rem; white-space: nowrap;
  display: inline-flex !important; align-items: center !important; transform: translateY(6px) !important;
}
.mta-cta {
  background: var(--gold); color: var(--navy); border: 1px solid var(--gold);
  padding: 12px 18px; text-transform: uppercase; letter-spacing: 0.08em; font-weight: 800;
  font-size: 0.72rem; white-space: nowrap; display: inline-flex !important; align-items: center !important;
  transform: translateY(6px) !important;
}
.mta-cta:hover { background: transparent; color: var(--gold); }
.mta-burger {
  display: none; background: none; border: none; color: var(--gold); font-size: 1.5rem; cursor: pointer; padding: 0;
}

.mta-mobile-menu {
  display: none; background: rgba(0,26,51,0.99); border-top: 1px solid rgba(224,200,138,0.2);
  padding: 14px 24px 24px; max-height: 70vh; overflow: auto;
}
.mta-mobile-menu.mta-mobile-open { display: block; }
.mta-mobile-item { border-bottom: 1px solid rgba(224,200,138,0.12); }
.mta-mobile-item-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 13px 0; }
.mta-mobile-item-row > a { flex: 1; color: var(--ivory); font-size: 0.85rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.mta-mobile-toggle {
  background: none; border: 1px solid rgba(224,200,138,0.4); color: var(--gold);
  width: 30px; height: 30px; font-size: 1rem; line-height: 1; cursor: pointer; flex-shrink: 0;
}
.mta-mobile-submenu { padding: 2px 0 12px 14px; display: none; flex-direction: column; }
.mta-mobile-submenu.mta-mobile-open { display: flex; }
.mta-mobile-submenu a {
  display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 11px 0;
  color: rgba(245,240,225,0.82); font-size: 0.78rem; font-weight: 500; letter-spacing: 0.03em;
}
.mta-mobile-phone { display: block; padding: 16px 0 4px; color: var(--gold); font-weight: 700; font-size: 1rem; }

@media (max-width: 1080px) {
  .mta-nav { display: none !important; }
  .mta-phone { display: none !important; }
  .mta-burger { display: block !important; }
}

.mta-header-inner { position: relative; }

/* ===== Footer ===== */
.mta-footer {
  background: var(--navy); color: var(--ivory); border-top: 1px solid rgba(224,200,138,0.35); padding: 80px 0 36px;
}
.mta-footer-inner { width: min(100% - 48px, 1280px); margin-inline: auto; }
.mta-footer-grid {
  display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 48px; padding-bottom: 56px;
  border-bottom: 1px solid rgba(224,200,138,0.18);
}
.mta-footer-grid h4 {
  color: var(--gold); text-transform: uppercase; letter-spacing: 0.12em; font-size: 0.74rem; font-weight: 700; margin: 0 0 18px;
}
.mta-footer-col { min-width: 0; }
.mta-footer-col p { margin: 0 0 8px; }
.mta-footer-logo { width: 200px; height: 200px; max-width: 100%; aspect-ratio: 1 / 1; margin-bottom: 18px; }
.mta-footer-tagline { color: var(--gold); font-size: 0.82rem; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 700; margin: 0 0 8px; }
.mta-footer-desc { color: rgba(245,240,225,0.7); font-size: 0.92rem; line-height: 1.6; max-width: 300px; margin: 0 0 22px; }
.mta-t2t-note { color: rgba(245,240,225,0.6); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.04em; margin: 0 0 4px; }
.mta-t2t-desc { color: rgba(245,240,225,0.55); font-size: 0.78rem; line-height: 1.7; margin: 0 0 18px; }
.mta-t2t-logo { width: 294px; height: auto; max-width: 100%; aspect-ratio: 523 / 204; }
.mta-footer-address { color: rgba(245,240,225,0.78); font-size: 0.86rem; line-height: 1.7; margin: 0; }
.mta-footer-address a { color: var(--gold); font-weight: 700; }
.mta-footer-col a.mta-footer-link { display: block; color: rgba(245,240,225,0.82); font-size: 0.86rem; padding: 6px 0; }
.mta-footer-col a.mta-footer-link:hover { color: var(--gold); }
.mta-footer-bottom {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 16px; padding-top: 28px;
  color: rgba(245,240,225,0.5); font-size: 0.78rem;
}
@media (max-width: 980px) { .mta-footer-grid { grid-template-columns: 1fr 1fr; gap: 32px 24px; } }
@media (max-width: 560px) {
  .mta-footer { padding: 48px 0 24px; }
  .mta-footer-grid { grid-template-columns: 1fr; gap: 32px; padding-bottom: 32px; }
  .mta-footer-logo { width: 110px; height: 110px; }
  .mta-t2t-logo { width: 200px; }
  .mta-footer-desc { max-width: 100%; }
  .mta-footer-bottom { flex-direction: column; align-items: flex-start; gap: 8px; }
}

/* Same footer fix, scoped to the desktop "Preview Mobile App" demo mode - see the
   .mta-cardrow rules above for why the max-width media query alone isn't enough there. */
html.mta-app-mode .mta-footer { padding: 48px 0 24px; }
html.mta-app-mode .mta-footer-grid { grid-template-columns: 1fr; gap: 32px; padding-bottom: 32px; }
html.mta-app-mode .mta-footer-logo { width: 110px; height: 110px; }
html.mta-app-mode .mta-t2t-logo { width: 200px; }
html.mta-app-mode .mta-footer-desc { max-width: 100%; }
html.mta-app-mode .mta-footer-bottom { flex-direction: column; align-items: flex-start; gap: 8px; }

/* ===== Responsive heading scale (matches reference's mta-h1/mta-h2 breakpoint overrides) ===== */
#mta-content h1 { font-size: clamp(2.3rem, 4.6vw, 4rem); line-height: 1.08; letter-spacing: -0.025em; }
#mta-content h2 { font-size: clamp(1.8rem, 3.4vw, 2.8rem); line-height: 1.12; letter-spacing: -0.025em; }
@media (max-width: 640px) {
  #mta-content h1 { font-size: clamp(1.7rem, 8.5vw, 2.6rem) !important; line-height: 1.18 !important; }
  #mta-content h2 { font-size: clamp(1.4rem, 7.5vw, 2.1rem) !important; line-height: 1.22 !important; }
}
@media (max-width: 420px) {
  #mta-content h1 { font-size: clamp(1.5rem, 8.5vw, 2.2rem) !important; }
  #mta-content h2 { font-size: clamp(1.3rem, 7.5vw, 1.9rem) !important; }
}
/* ===== Flex-basis width fix (Elementor container 'width' control is conditional on content_width=full and never fires) ===== */
.mta-w-48 { flex: 0 1 48% !important; box-sizing: border-box !important; }
.mta-w-96 { flex: 0 1 96% !important; box-sizing: border-box !important; }
.mta-w-32 { flex: 0 1 32% !important; box-sizing: border-box !important; }
.mta-w-23 { flex: 0 1 23% !important; box-sizing: border-box !important; }
.mta-w-31 { flex: 0 1 31% !important; box-sizing: border-box !important; }
.mta-w-24 { flex: 0 1 24% !important; box-sizing: border-box !important; }
.mta-w-42 { flex: 0 1 42% !important; box-sizing: border-box !important; }
.mta-w-54 { flex: 0 1 54% !important; box-sizing: border-box !important; }
.mta-w-22 { flex: 0 1 22% !important; box-sizing: border-box !important; }
.mta-w-25 { flex: 0 1 25% !important; box-sizing: border-box !important; }
.mta-w-38 { flex: 0 1 38% !important; box-sizing: border-box !important; }
.mta-w-58 { flex: 0 1 58% !important; box-sizing: border-box !important; }
@media (max-width: 900px) {
  .mta-cardrow > .e-con-inner, .mta-cardrow.e-con-inner, .mta-cardrow { flex-direction: column !important; }
  .mta-w-48, .mta-w-96, .mta-w-32, .mta-w-23, .mta-w-31, .mta-w-24, .mta-w-42, .mta-w-54, .mta-w-22, .mta-w-25, .mta-w-38, .mta-w-58 {
    width: 100% !important;
    flex: 1 1 auto !important;
  }
}

/* Same stacking fix, but triggered by the desktop "Preview Mobile App" demo mode
   (html.mta-app-mode), which only clamps body max-width - it never changes the real
   viewport, so the max-width media query above never fires while demoing on desktop. */
html.mta-app-mode .mta-cardrow > .e-con-inner,
html.mta-app-mode .mta-cardrow.e-con-inner,
html.mta-app-mode .mta-cardrow {
  flex-direction: column !important;
}
html.mta-app-mode .mta-w-48, html.mta-app-mode .mta-w-96, html.mta-app-mode .mta-w-32,
html.mta-app-mode .mta-w-23, html.mta-app-mode .mta-w-31, html.mta-app-mode .mta-w-24,
html.mta-app-mode .mta-w-42, html.mta-app-mode .mta-w-54, html.mta-app-mode .mta-w-22,
html.mta-app-mode .mta-w-25, html.mta-app-mode .mta-w-38, html.mta-app-mode .mta-w-58 {
  width: 100% !important;
  flex: 1 1 auto !important;
}

/* ===== Our People: custom expand/collapse card panel (theme-owned, not Elementor accordion) ===== */
.mta-emp-panel { display: none; flex: 1 1 100% !important; width: 100%; box-sizing: border-box; }
.mta-emp-panel.mta-open { display: block; }
.mta-emp-panel {
  background: #001A33;
  border: 1px solid rgba(224,200,138,0.35);
  padding: 48px;
}
.mta-emp-open { cursor: pointer; }
.mta-emp-close { cursor: pointer; }
@media (max-width: 700px) {
  .mta-emp-panel { padding: 28px 22px; }
}

/* ===== Homepage: centered shield badge shown only on mobile / demo mode (matches reference's
   .mobile-hero-badge). The reference uses position:absolute, but on this build the badge's
   own widget wrapper collapses to zero height (the img contributes nothing to it once it's
   taken out of flow), so the next block (the eyebrow text) starts at nearly the same Y
   position as the badge - they overlap regardless of hero padding. Fix: keep the badge in
   normal flow on mobile instead, so it actually reserves real vertical space. */
@media (max-width: 640px) {
  .mta-mobile-hero-badge {
    display: block !important;
    position: static !important;
    transform: none !important;
    margin: 0 auto 24px !important;
  }
}
html.mta-app-mode .mta-mobile-hero-badge {
  display: block !important;
  position: static !important;
  transform: none !important;
  margin: 0 auto 24px !important;
}

/* Now that the badge reserves real flow space (see .mta-mobile-hero-badge below) instead of
   floating over the content, the hero doesn't need extra top padding - the reference's own
   140px is enough since the badge's height now pushes the eyebrow text down naturally. */

/* ===== Homepage: Industries We Serve expand panel (theme-owned, mirrors the reference's
   single shared "hasIndustryPreview" slot - only one industry's panel shows at a time) ===== */
.mta-ind-panel { display: none; }
.mta-ind-panel.mta-open { display: block; }
.mta-ind-open, .mta-ind-close { cursor: pointer; }

/* Industries We Serve grid: unlike other card-rows (Our People, Leadership), this one should
   stay a 2-column grid on mobile - matching the reference - rather than collapsing to a single
   stacked column, so all 9 industries stay visible above the expand panel. The flex-based
   override (matching flex-direction/width against Elementor's own var()-driven rules) turned out
   unreliable here, so this uses CSS Grid directly instead - display:grid overrides Elementor's
   flex layout outright rather than fighting it rule-by-rule, and grid-template-columns/gap are
   properties Elementor never touches on these elements. */
@media (max-width: 900px) {
  .mta-ind-grid > .e-con-inner {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 6px !important;
  }
  .mta-ind-grid .mta-w-22 {
    width: auto !important;
    aspect-ratio: 1 / 1;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 16px !important;
  }
}
@media (max-width: 900px) {
  .mta-ind-grid .mta-w-22 > .e-con-inner {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    height: 100% !important;
    width: 100% !important;
  }
}
html.mta-app-mode .mta-ind-grid > .e-con-inner {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 6px !important;
}
html.mta-app-mode .mta-ind-grid .mta-w-22 {
  width: auto !important;
  aspect-ratio: 1 / 1;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 16px !important;
}

/* Industries We Serve panels are now children of the grid row itself (moved there via JS to sit
   right after whichever row the clicked industry is in). They need to span the full row width in
   both the desktop flex layout and the mobile CSS Grid layout. */
.mta-ind-panel-full { flex: 1 1 100% !important; width: 100% !important; }
@media (max-width: 900px) { .mta-ind-panel-full { grid-column: 1 / -1 !important; } }
html.mta-app-mode .mta-ind-panel-full { grid-column: 1 / -1 !important; }

/* ===== Homepage: "What Our Clients Say" testimonial slider (theme-owned) ===== */
.mta-testi-slide { display: none; max-width: 840px; text-align: center; }
.mta-testi-slide.mta-open { display: block; animation: mtaTestiSlideUp 0.6s ease both; }
@keyframes mtaTestiSlideUp {
  from { opacity: 0; transform: translateY(28px); }
  to { opacity: 1; transform: translateY(0); }
}
.mta-testi-dot {
  width: 10px; height: 10px; border: 1px solid #E0C88A; background: transparent;
  cursor: pointer; display: inline-block; padding: 0; box-sizing: border-box;
}
.mta-testi-dot.mta-open { background: #E0C88A; }

/* Our People employee grid: force exactly 4-per-row on desktop via CSS Grid. The prior flex
   approach (4 cards at 23% width + 32px gaps) left only ~3px of slack in the container width -
   easily tipped into wrapping to 3-per-row by box-sizing/rounding. CSS Grid divides the gap out
   of the available space automatically (matching how the reference itself does this with
   grid-template-columns:repeat(4,minmax(0,1fr))), so there's no overflow math to get wrong. */
@media (min-width: 901px) {
  .mta-emp-grid > .e-con-inner {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 40px 32px !important;
  }
}
/* The panel's flex:1 1 100% trick (used to break it onto its own full-width row) only works
   in the flexbox layout mobile still uses. In the desktop CSS Grid layout above, flex properties
   are ignored entirely, so the panel was rendering as an ordinary 1-column grid cell instead -
   which is why it appeared to the right of the clicked card instead of spanning the row. */
@media (min-width: 901px) {
  .mta-emp-grid .mta-emp-panel {
    grid-column: 1 / -1 !important;
    width: auto !important;
  }
}

/* Leadership bio pages: portrait + name/role/tags row. Forced nowrap on desktop so it can never
   wrap to a stacked layout regardless of exact width math, with an explicit mobile override to
   stack image-above-text there instead (matching the pattern used elsewhere on the site). */
@media (max-width: 900px) {
  .mta-bio-portrait-row > .e-con-inner { flex-direction: column !important; flex-wrap: wrap !important; }
}
html.mta-app-mode .mta-bio-portrait-row > .e-con-inner { flex-direction: column !important; flex-wrap: wrap !important; }

/* Homepage Growth Platform pillars: same razor-thin flexbox overflow issue as the Our People
   grid (3 cards at 32% + 2x24px gaps left ~1-2px slack, easily tipped to 2-per-row wrapping).
   Force CSS Grid on desktop so the gap is divided out of the available space automatically. */
@media (min-width: 901px) {
  .mta-growth-grid > .e-con-inner {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 24px !important;
  }
}