/* ==========================================================================
   HARI CONSULTING LLC — RESPONSIVE STYLESHEET
   Breakpoints: 1024px (Tablet Landscape), 768px (Tablet Portrait / Mobile)
   ========================================================================== */

/* --- TABLET (max-width: 1024px) --- */
@media screen and (max-width: 1024px) {
  :root {
    --grid-padding: 24px;
    --section-padding-large: 80px;
    --section-padding-extra-large: 100px;
  }

  .main-navigation {
    gap: var(--gap-04);
  }

  .mega-menu-inner {
    grid-template-columns: 1fr 1fr;
    gap: 24px;
  }

  .mega-menu-overview {
    grid-column: span 2;
  }

  .feature-split,
  .feature-split.reverse {
    grid-template-columns: 1fr;
    gap: var(--gap-07);
  }

  .feature-split.reverse .card-media {
    order: 2;
  }

  .horizontal-split {
    grid-template-columns: 1fr;
    gap: var(--gap-07);
  }

  .stats-list {
    grid-template-columns: repeat(2, 1fr);
  }

  .stat:nth-child(2) {
    border-right: none;
  }

  .stat:nth-child(3),
  .stat:nth-child(4) {
    border-top: 1px solid var(--color-border-dark);
    padding-top: var(--gap-04);
  }

  .footer-top {
    grid-template-columns: 1fr 1fr;
    gap: var(--gap-07);
  }

  .principles-grid,
  .stats-grid {
    grid-template-columns: 1fr;
  }
}

/* --- MOBILE (max-width: 768px) --- */
@media screen and (max-width: 768px) {
  :root {
    --nav-height: 72px;
    --grid-padding: 18px;
    --section-padding-large: 64px;
    --section-padding-medium: 48px;
    --section-padding-extra-large: 80px;
  }

  body {
    padding-top: var(--nav-height);
  }

  .navigation {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    z-index: 1000 !important;
  }

  .navigation-bar {
    height: var(--nav-height) !important;
  }

  .main-navigation,
  .navigation-right .button,
  .navigation-right .navigation-link {
    display: none !important;
  }

  .nav-toggle-btn {
    display: flex !important;
  }

  .brand-logo-img {
    height: 40px;
    max-width: 220px;
  }

  .footer-logo-img,
  .footer-brand .brand-logo-img {
    height: 48px !important;
    max-width: 260px !important;
  }

  .mobile-nav-drawer {
    top: var(--nav-height) !important;
    height: calc(100vh - var(--nav-height)) !important;
    height: calc(100dvh - var(--nav-height)) !important;
  }

  .mega-menu-panel {
    display: none !important;
  }

  .section.hero {
    padding-top: var(--section-padding-large);
  }

  .hero-subhead {
    font-size: 0.9375rem;
  }

  .services-grid {
    grid-template-columns: 1fr;
  }

  .service-card {
    aspect-ratio: 9/13;
    min-height: 480px;
  }

  .service-card-content {
    padding: 30px 22px 24px;
  }

  .service-card .media-group {
    opacity: 0.55;
  }

  .service-card .media-fill {
    transform: scale(1);
  }

  .stats-list {
    grid-template-columns: 1fr;
  }

  .stat {
    border-right: none;
    border-bottom: 1px solid var(--color-border-dark);
    padding-bottom: var(--gap-04);
  }

  .stat:last-child {
    border-bottom: none;
  }

  .case-studies-grid {
    grid-template-columns: 1fr;
  }

  .blog-grid {
    grid-template-columns: 1fr;
  }

  .footer-top {
    grid-template-columns: 1fr;
    gap: var(--gap-06);
  }

  .lead-form-wrap {
    padding: 28px 20px;
    width: 100%;
  }

  .field-row {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .form-input,
  .form-select,
  .form-textarea {
    font-size: 16px; /* Prevents auto-zoom in iOS Safari */
    padding: 12px 14px;
  }

  .buttons {
    flex-direction: column;
    width: 100%;
  }

  .buttons .button {
    width: 100%;
  }

  .credentials-band {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--gap-04);
  }

  .credentials-band .button {
    width: 100%;
  }

  .hidden-on-mobile {
    display: none !important;
  }
}

/* --- RESPONSIVE PIXELATED HERO & FRAMES --- */
@media screen and (max-width: 1024px) {
  .hero-intro-split {
    grid-template-columns: 1fr;
    gap: var(--gap-06);
  }

  .hero-mission-lockup {
    grid-template-columns: 1fr;
    gap: var(--gap-06);
  }

  .hero-metrics-band {
    grid-template-columns: repeat(2, 1fr);
  }

  .hero-metric-card {
    padding: 32px 24px;
    border-right: none;
    border-bottom: 1px solid var(--color-border);
  }

  .hero-metric-card:nth-child(odd) {
    border-right: 1px solid var(--color-border);
    padding-left: 0;
  }

  .hero-metric-card:nth-child(even) {
    padding-right: 0;
  }

  .hero-metric-card:nth-last-child(-n+2) {
    border-bottom: none;
  }

  .hero-image-wrap.full-bleed {
    aspect-ratio: 16 / 9;
  }
}

@media screen and (max-width: 768px) {
  .hero-image-wrap.full-bleed {
    aspect-ratio: 4 / 3;
    margin-bottom: var(--gap-08);
  }

  .pixel-frame {
    aspect-ratio: 4 / 5;
  }
}

@media screen and (max-width: 991px) {
  .contact-split {
    grid-template-columns: 1fr;
    gap: var(--gap-08);
  }

  .contact-form-panel {
    padding: 36px 28px;
  }
}

@media screen and (max-width: 600px) {
  .hero-metrics-band {
    grid-template-columns: 1fr;
  }

  .hero-metric-card {
    padding: 24px 0;
    border-right: none !important;
    border-bottom: 1px solid var(--color-border);
  }

  .hero-metric-card:last-child {
    border-bottom: none;
  }

  .modern-field-row {
    grid-template-columns: 1fr;
  }

  .contact-info-row {
    grid-template-columns: 72px 1fr;
    gap: 12px;
  }

  .contact-form-panel {
    padding: 28px 18px;
  }
}

@media screen and (max-width: 480px) {
  .lead-form-wrap {
    padding: 20px 14px;
  }

  .form-input,
  .form-select,
  .form-textarea {
    font-size: 16px;
    padding: 11px 12px;
  }

  .form-label {
    font-size: 0.75rem;
  }

  .trust-badge {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 12px;
    padding: 8px 10px;
    width: 100%;
  }
}