/* ============================================
   MOBILE FIRST — Base styles are for < 768px
   Overrides go upward from here
   ============================================ */

/* Hide desktop nav elements on mobile */
.nav-links,
.nav-cta {
  display: none;
}

.nav-menu-toggle {
  display: block;
}

/* Mobile service items: simplified grid */
.services-item-header {
  grid-template-columns: auto 1fr auto;
}

.services-item-brief {
  display: none;
}

.services-item-body p {
  padding-left: 0;
}

/* Mobile work grid */
.work-card-inner {
  min-height: 240px;
}

/* Mobile footer */
.footer-inner {
  flex-direction: column;
  gap: var(--space-element);
}

.footer-contact {
  text-align: left;
}

/* ============================================
   TABLET — 768px+
   ============================================ */
@media (min-width: 768px) {
  /* Show desktop nav */
  .nav-links,
  .nav-cta {
    display: flex;
  }

  .nav-menu-toggle {
    display: none;
  }

  /* Two-column split */
  .split {
    grid-template-columns: 1.2fr 0.8fr;
  }

  /* Service items: show brief */
  .services-item-header {
    grid-template-columns: auto 1fr auto auto;
  }

  .services-item-brief {
    display: block;
  }

  .services-item-body p {
    padding-left: 3.5rem;
  }

  /* Work grid: 2x2 */
  .grid-asymmetric {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
  }

  .work-card-inner {
    min-height: 280px;
    height: 100%;
  }

  /* Process grid: 2-column */
  .grid-process {
    grid-template-columns: 1fr 1fr;
  }

  /* Footer: row layout */
  .footer-inner {
    flex-direction: row;
    align-items: flex-start;
  }

  .footer-contact {
    text-align: right;
  }
}

/* ============================================
   DESKTOP — 1024px+
   ============================================ */
@media (min-width: 1024px) {
  /* Work grid: 2x2 with equal cells */
  .grid-asymmetric {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
  }

  .work-card-inner {
    min-height: 340px;
    height: 100%;
  }

  /* Process grid: 4-column */
  .grid-process {
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-element);
  }
}

/* ============================================
   WIDE — 1400px+
   ============================================ */
@media (min-width: 1400px) {
  .hero-headline {
    font-size: 7rem;
  }
}