/* ==========================================================================
   MAGANSTAR — RESPONSIVE STYLESHEET (Mobile & Tablet)
   --------------------------------------------------------------- */
html,
body {
  overflow-x: hidden;
  max-width: 100%;
}

/* Keep images, svg and media from overflowing their containers */
img,
svg,
video,
canvas {
  max-width: 100%;
  height: auto;
}

/* Allow flex/grid children to shrink below their intrinsic min-width.
   This stops long headings / fixed min-widths from causing overflow. */
.flex-icon,
.hero-content,
.hero-visual,
.value-card,
.service-card,
.team-card,
.contact-card,
.split-grid > *,
.contact-grid > *,
.footer-grid > * {
  min-width: 0;
}

/* Long unbroken words / emails should wrap instead of overflowing */
p,
a,
h1,
h2,
h3,
h4,
span,
li {
  overflow-wrap: break-word;
  word-wrap: break-word;
}

.section-padding3:has(.split-grid) {
  margin-top: 20px;
}

/* Tablet + mobile: switch to hamburger navigation */
@media (max-width: 1023px) {
  .nav-links { display: none; }
  .mobile-menu-btn { display: inline-flex; align-items: center; justify-content: center; }

  /* Open-state mobile menu — slides in as a panel below the header */
  .nav-links.active {
    display: flex;
    flex-direction: column;
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    background: rgba(12, 20, 40, 0.98);
    backdrop-filter: blur(16px) saturate(140%);
    padding: 24px 28px 32px;
    gap: 6px;
    z-index: 99;
    border-bottom: 1px solid var(--border-subtle);
    box-shadow: 0 24px 48px -24px rgba(0, 0, 0, 0.6);
    max-height: calc(100vh - 80px);
    overflow-y: auto; /* allow scrolling if menu is taller than viewport */
  }

  /* Menu links — larger, full-width tap targets */
  .nav-links.active a {
    display: block;
    width: 100%;
    padding: 13px 6px;
    font-size: 1.02rem;
    border-bottom: 1px solid var(--border-subtle);
  }
  .nav-links.active a:last-child { border-bottom: none; }

  /* Remove the underline indicator inside the open menu (it overlaps) */
  .nav-links.active a.active::after { display: none; }
  /* Highlight the active link differently inside the open menu */
  .nav-links.active a.active { color: var(--accent-cyan); }

  /* CTA button inside the menu — full-width, comfortable touch target */
  .nav-links.active .nav-cta {
    margin-top: 16px;
    justify-content: center;
    padding: 14px 24px;
    text-align: center;
  }
}

/* ------------------------------------------------------------------
   3. TABLET LAYOUT (768px – 1023px)
   Keeps the desktop look but compresses spacing, font sizes and columns
   so everything fits comfortably on portrait & landscape tablets.
   ------------------------------------------------------------------ */
@media (min-width: 768px) and (max-width: 1023px) {
  .container { padding: 0 28px; }

  .navbar { padding: 16px 0; }
  .logo-image { width: 186px; }

  /* Hero — keep two columns but tighten gutter */
  .hero-grid,
  .hero-grid2 { gap: 34px; }
  .hero-content h1 { font-size: var(--step-3); }
  .signal-diagram { max-width: 420px; }

  /* Section headings scale down slightly */
  .section-title h2,
  .pagehero h1 { font-size: var(--step-3); }

  /* Two-column splits remain two columns on tablet */
  .split-grid { grid-template-columns: 1fr 1fr; gap: 40px; }
  .contact-grid { grid-template-columns: 1fr; gap: 40px; }

  /* Stats — keep 4 across but allow tighter spacing */
  .stats-grid { gap: 26px 18px; }
  .stat { min-width: 130px; }

/* Service / process / team cards — 2 columns */
  .services-grid,
  .process-grid { grid-template-columns: repeat(2, 1fr); }
  .process-grid .process-card { flex: 1 1 calc(50% - 14px); min-width: 0; }

  /* Homepage process-track: keep cards visible on tablet (safety net for the
     scroll-reveal JS which sets opacity:0 until the observer fires) */
  .process-track .process-card {
    opacity: 1 !important;
    transform: none !important;
  }

  /* Team grid — 2 columns */
  .team-grid { grid-template-columns: repeat(2, 1fr); }

  /* CTA and quote panels get comfortable tablet padding */
  .cta-block,
  .cta-block2 { padding: 48px 36px; }
  .quote-panel { padding: 40px 32px; }

/* Org chart — center nicely on tablet. Keep the top MD card and the
     three direct-report cards in a balanced row so the hierarchy reads
     clearly without overflowing on portrait/landscape tablets. */
  .org-container {
    margin-left: 0;
    padding: 40px 16px;
    max-width: 900px;
  }
  .level-bottom {
    flex-direction: row;
    justify-content: center;
    gap: 24px;
  }
  .level-top { width: 100%; }
  .md-card { width: 300px; }
  .level-bottom .card {
    flex: 1 1 0;
    min-width: 0;
    max-width: 280px;
    padding: 32px 20px 22px;
  }
  .level-bottom .card h2 { font-size: 1.05rem; }
  .level-bottom .card p { font-size: 1.3rem; }
  .connector-horizontal-wrapper { width: 72%; }

  /* Footer stays 2 columns */
  .footer-grid { grid-template-columns: repeat(2, 1fr); gap: 36px; }
}

/* ------------------------------------------------------------------
   4. MOBILE LAYOUT (≤ 767px)
   Everything stacks into a single, readable column with consistent
   spacing, larger touch targets and proportionally scaled elements.
   ------------------------------------------------------------------ */
@media (max-width: 767px) {
  .container { padding: 0 20px; }

  /* ---- Header / nav ---- */
  .navbar { padding: 14px 0; flex-wrap: nowrap; }
  .logo-image { width: 168px; }
  .mobile-menu-btn { font-size: 22px; padding: 8px; }
  .nav-links.active { top: 100%; padding: 20px 22px 28px; }

  /* ---- Hero ---- */
  .hero,
  .hero-grid,
  .hero-grid2 { padding: 0; }

  .hero-grid,
  .hero-grid2 {
    flex-direction: column;
    align-items: flex-start;
    gap: 32px;
    padding-top: 24px;
  }
  .hero-content { flex: 1 1 auto; width: 100%; }
  .hero-content h1 { font-size: clamp(1.9rem, 7.5vw, 2.5rem); line-height: 1.12; }
  .hero-content p { font-size: var(--step-0); }

  .hero-visual {
    flex: 1 1 auto;
    width: 100%;
    justify-content: center;
  }
  .signal-diagram { max-width: 340px; }

  /* Hero buttons — full-width, easy to tap */
  .hero-buttons {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    gap: 14px;
  }
  .hero-buttons .btn-primary,
  .hero-buttons .btn-outline {
    width: 100%;
    justify-content: center;
    text-align: center;
  }

  /* ---- Page hero (subpages) ---- */
  .pagehero { padding: 24px 0 6px; }
  .pagehero h1 { font-size: var(--step-2); padding-bottom: 18px; }
  .pagehero p { font-size: var(--step-0); }

  /* ---- Section titles ---- */
  .section-title { margin-bottom: 36px; }
  .section-title h2 { font-size: var(--step-2); line-height: 1.15; }

  /* ---- Two-column splits stack ---- */
  .split-grid,
  .value-list { grid-template-columns: 1fr; gap: 28px; }

  /* ---- Contact grid stacks ---- */
  .contact-grid { grid-template-columns: 1fr; gap: 36px; }

  /* ---- Stats ---- */
  .stats-grid { gap: 22px 14px; }
  .stat { min-width: 130px; flex: 1 1 40%; }
  .stat h4 { font-size: var(--step-1); }

  /* ---- Cards: single column ---- */
  .services-grid,
  .process-grid,
  .team-grid { grid-template-columns: 1fr; }
  .process-grid .process-card { flex: 1 1 100%; min-width: 0; }

/* ---- Process steps ---- */
  .process-step { gap: 16px; padding: 22px 0; }
  .process-step .step-num { width: 40px; height: 40px; font-size: 0.82rem; }

  /* ---- Homepage process track (plain .process-track, NOT .process-grid) ----
     Ensure the horizontal 5-step strip stacks into a visible vertical column
     on mobile. Cards are given opacity:1 / transform:none as a safety net so
     they are always visible even before the scroll-reveal animation fires. */
  .process-track {
    flex-direction: column;
    gap: 22px;
  }
  .process-track .process-arrow {
    width: auto;
    margin-top: 0;
    transform: rotate(90deg);
    padding: 4px 0;
    align-self: center;
  }
  .process-track .process-card {
    width: 100%;
    flex: 1 1 auto;
    opacity: 1 !important;
    transform: none !important;
  }

  /* ---- CTA / quote / form panels ---- */
  .cta-block,
  .cta-block2 { padding: 38px 24px; }
  .cta-block h3,
  .cta-block2 h3 { font-size: var(--step-2); }
  .quote-panel { padding: 30px 24px; }
  .form-panel { padding: 30px 22px; }

  

  /* ---- Contact card ---- */
  .contact-card { flex-direction: column; gap: 14px; }

  /* ---- Timeline ---- */
  .timeline-item { padding-left: 56px; }
  .timeline::before { left: 16px; }
  .timeline-item::before { left: 8px; }

/* ---- Org chart (team page) — vertical stack, no overflow ---- */
  .org-container {
    margin-left: 0;
    padding: 32px 8px;
    width: 100%;
  }
.level-top,
  .level-bottom { width: 100%; }
  .level-bottom {
    flex-direction: column;
    align-items: center;
    gap: 44px;
    margin-top: 20px;
  }
  .connector-horizontal-wrapper,
  .vertical-top { display: none; }
  .md-card { width: 100%; max-width: 320px; }
  .level-bottom .card {
    width: 100%;
    max-width: 320px;
    min-width: 0;
    padding: 34px 20px 24px;
  }
  .level-bottom .card h2 { font-size: 1.05rem; }
  .level-bottom .card p { font-size: 1.3rem; }

  /* ---- Footer ---- */
  .footer { padding: 48px 0 24px; }
  .footer-grid { grid-template-columns: 1fr; gap: 30px; margin-bottom: 36px; }
  .footer-brand p { max-width: none; }
  .footer-col h4 { margin-bottom: 16px; }

  /* ---- Buttons / touch targets ---- */
  .btn-primary,
  .btn-outline { padding: 14px 24px; font-size: 0.95rem; min-height: 48px; }
}

/* ------------------------------------------------------------------
   5. SMALL PHONES (≤ 480px)
   Tighter container padding, scaled-down type, smaller card padding.
   ------------------------------------------------------------------ */
@media (max-width: 480px) {
  .container { padding: 0 16px; }
  .logo-image { width: 148px; }

  .hero-content h1 { font-size: clamp(1.65rem, 7vw, 2rem); }
  .hero-content h1 .grad { font-size: 1em; }

  .section-title h2,
  .pagehero h1 { font-size: var(--step-2); }

  .service-card { padding: 26px 20px; }
  .value-card { padding: 20px 18px; }
  .team-card { padding: 28px 20px; }
  .contact-card { padding: 22px 18px; }

  .process-step { gap: 12px; }

  .btn-primary,
  .btn-outline { padding: 13px 20px; font-size: 0.9rem; }

  .timeline-item { padding-left: 48px; }
  .timeline::before { left: 12px; }
  .timeline-item::before { left: 5px; }

.trust-grid { gap: 34px; padding-right: 34px; }

  .nav-links.active { padding: 18px 18px 24px; }

  /* Org chart — further scale cards/type on small phones */
  .org-container { padding: 28px 6px;}
  .level-bottom { gap: 40px; }
  .level-bottom .card,
  .md-card { max-width: 300px; padding: 32px 18px 22px; }
  .level-bottom .card h2,
  .md-card h2 { font-size: 1rem; }
  .level-bottom .card p,
  .md-card p { font-size: 1.2rem; }
}

.cfo-card{
    margin-top: 20px;
  }

/* ------------------------------------------------------------------
   6. VERY SMALL SCREENS (≤ 360px) — edge case safety
   ------------------------------------------------------------------ */
@media (max-width: 360px) {
  .container { padding: 0 14px; }
  .logo-image { width: 132px; }
  .eyebrow { font-size: 0.72rem; }
  .hero-content h1 { font-size: 1.55rem; }
  .section-title h2,
  .pagehero h1 { font-size: 1.45rem; }
  .stats-grid { gap: 18px 10px; }
  .stat { min-width: 110px; }

}

/* ------------------------------------------------------------------
   7. COMPACT FOOTER — reduces overall footer height while keeping all
   content (logo, links, contact, social icons, copyright) fully visible
   and properly aligned. Maintains existing design, colors, typography
   and spacing rhythm between elements. Applied outside breakpoints so it
   behaves consistently on desktop, tablet and mobile.
   ------------------------------------------------------------------ */
.footer {
  padding: 20px 0 16px;      /* reduced from 24px top / tighter bottom */
}
.footer-grid {
  gap: 28px;                 /* tighter column gap */
  margin-bottom: 16px;       /* reduced space above copyright line */
}
.footer-brand p {
  margin: 12px 0 16px;       /* tighter around brand description */
}
.footer-col h4 {
  margin-bottom: 16px;       /* slightly reduced below column headings */
}
.footer-col li {
  margin-bottom: 10px;       /* tighter link rows */
}
.social-links {
  margin-top: 4px;           /* reduced above social icons */
}
.copyright {
  padding-top: 6px;          /* reduced above copyright text */
}

/* Mobile: keep the compact footer height but retain comfortable spacing
   between the stacked columns so nothing feels cramped. */
@media (max-width: 767px) {
  .footer {
    padding: 18px 0 14px;
  }
  .footer-grid {
    gap: 24px;
    margin-bottom: 14px;
  }
}

/* ==========================================================================
   END OF RESPONSIVE STYLESHEET
   Desktop 1024px+ is completely unaffected by the rules above.
   ========================================================================== */