/* ==========================================================================
   Mobile + tablet (single-column layouts)
   ========================================================================== */
@media (max-width: 899px) {
  /* Less space above the portrait when About stacks */
  .about {
    padding-top: 1.5rem;
  }
}

/* ==========================================================================
   Small mobile
   ========================================================================== */
@media (max-width: 479px) {
  .hero__actions .btn,
  .contact__actions .btn,
  .contact-form__footer .btn {
    flex: 1 1 100%;
  }

  .hero__scroll {
    display: none;
  }

  /* The scroll cue is hidden here, so the hero doesn't need room for it */
  .hero {
    padding-bottom: 2.5rem;
  }
}

/* ==========================================================================
   Tablet
   ========================================================================== */
@media (min-width: 640px) {
  .footer__grid {
    grid-template-columns: 1.6fr 1fr 1fr;
    gap: 2rem;
  }

  .hero__visual {
    padding: 3rem 2rem;
  }

  .about__pillars {
    grid-template-columns: 1fr 1fr;
    column-gap: 2rem;
  }

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

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

  .contact-form__fields {
    grid-template-columns: 1fr 1fr;
  }

  .field--full {
    grid-column: 1 / -1;
  }

  /* Tablet: contact cards in a 2x2 grid (back to one column beside the intro on desktop) */
  .contact__list {
    grid-template-columns: 1fr 1fr;
  }
}

/* ==========================================================================
   Project grid: 1 column → 2 (tablet) → 3 (desktop)
   ========================================================================== */
@media (min-width: 768px) {
  .projects {
    grid-template-columns: 1fr 1fr;
  }

  /* After 4 projects: fills a full row on tablet... */
  .project-more {
    grid-column: 1 / -1;
  }
}

@media (min-width: 1024px) {
  .projects {
    grid-template-columns: repeat(3, 1fr);
  }

  /* ...and the two empty slots next to project 4 on desktop */
  .project-more {
    grid-column: span 2;
  }
}

/* ==========================================================================
   Desktop navigation
   ========================================================================== */
@media (min-width: 900px) {
  :root {
    --header-h: 84px;
  }

  .menu-toggle {
    display: none;
  }

  .nav {
    position: static;
    z-index: auto;
    flex-direction: row;
    align-items: center;
    gap: 2.5rem;
    padding: 0;
    background: none;
    clip-path: none;
    visibility: visible;
    overflow: visible;
    transition: none;
  }

  .nav__list {
    flex-direction: row;
    gap: 2rem;
  }

  .nav__item {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .nav__link {
    font-size: 0.9375rem;
    font-weight: 500;
    letter-spacing: 0;
    line-height: 1.5;
  }

  .nav__link::after {
    bottom: -2px;
    height: 1px;
  }

  .nav__cta {
    width: auto;
    min-height: 44px;
  }

  .hero {
    padding-bottom: 7rem;
  }

  .hero__inner {
    grid-template-columns: 1.25fr 0.75fr;
  }

  .hero__visual {
    max-width: none;
    padding: 3.5rem 0;
  }

  .hero__layer--top {
    left: -12%;
  }

  .hero__layer--bottom {
    right: -6%;
  }

  .about__inner {
    grid-template-columns: 0.85fr 1.15fr;
    align-items: start;
  }

  .about__media {
    position: sticky;
    top: calc(var(--header-h) + 2rem);
    max-width: none;
  }

  .about__tag {
    left: -1.5rem;
  }

  .section-head {
    grid-template-columns: 1.2fr 0.8fr;
    gap: 4rem;
  }

  .stat {
    flex-direction: row;
    align-items: center;
    gap: 2rem;
  }

  .stat__label {
    max-width: 16ch;
  }

  .contact__inner {
    grid-template-columns: 1.2fr 0.8fr;
    align-items: center;
  }

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

  /* Form spans the full row under the intro and contact cards */
  .contact-form {
    grid-column: 1 / -1;
    grid-template-columns: minmax(0, 0.75fr) minmax(0, 1.25fr);
    gap: clamp(2rem, 5vw, 4rem);
  }
}

/* Short desktop screens: keep the scroll cue from overlapping content */
@media (min-width: 900px) and (max-height: 760px) {
  .hero__scroll {
    display: none;
  }
}

/* ==========================================================================
   Large desktop
   ========================================================================== */
@media (min-width: 1200px) {
  .nav__list {
    gap: 2.5rem;
  }
}