/* ============================================
   RESPONSIVE — Mobile (≤ 760px)
   ============================================ */
@media (max-width: 760px) {
  /* Header */
  .site-header {
    height: 60px;
    padding: 0 5vw;
  }

  .nav {
    display: none;
  }

  .header-contact {
    font-size: 10px;
  }

  /* Hero */
  .hero {
    display: block;
    min-height: 760px;
    padding: 60px 5vw 40px;
  }

  .hero-copy {
    padding: 65px 0 0;
  }

  .hero h1 {
    font-size: 48px;
  }

  .hero-art {
    width: 72%;
    height: 360px;
    right: -5%;
    top: auto;
    bottom: 38px;
  }

  .sun {
    width: 160px;
    height: 160px;
  }

  .art-caption {
    font-size: 38px;
  }

  .hero-bottom {
    left: 5vw;
    right: 5vw;
    font-size: 8px;
  }

  .hero-bottom span:last-child {
    display: none;
  }

  .intro {
    font-size: 11px;
  }

  .desktop {
    display: none;
  }

  /* Sections */
  .section-pad {
    padding: 80px 6vw;
  }

  .problem-heading,
  .strength-heading,
  .project-heading,
  .price-heading {
    margin: 35px 0 45px;
  }

  /* Problems */
  .problem-grid {
    display: block;
  }

  .problem-grid p:nth-child(even) {
    padding-left: 0;
    border-left: 0;
  }

  .problem-grid p:nth-child(even)::before {
    left: -2px;
  }

  .problem-grid p:nth-child(even):hover {
    padding-left: 14px;
  }

  .problem-answer {
    padding: 42px 0 0;
    font-size: 12px;
  }

  .problem-answer strong {
    font-size: 15px;
  }

  /* Services */
  .service-intro {
    display: block;
    margin: 35px 0 40px;
  }

  .service-intro > p:last-child {
    margin-top: 24px;
  }

  .service-list article {
    grid-template-columns: 13% 68% 19%;
    padding: 18px 0;
    min-height: 0;
  }

  .service-title {
    grid-column: 2;
  }

  .service-body {
    grid-column: 2;
    padding: 12px 0 6px;
    font-size: 11px;
  }

  .tags {
    grid-column: 2;
  }

  .service-list a {
    grid-column: 3;
    grid-row: 1;
    align-self: start;
  }

  /* Strength */
  .strength-list {
    display: block;
  }

  .strength-list article:nth-child(even) {
    padding-left: 0;
    border-left: 0;
  }

  .strength-list article {
    padding: 22px 0 35px;
  }

  .strength-list h3 {
    font-size: 19px;
    margin: 16px 0 9px;
  }

  /* Projects */
  .project-card,
  .edo {
    display: flex;
    flex-direction: column;
  }

  .project-image {
    height: 280px;
    order: 0;
  }

  .project-content {
    padding: 35px 8%;
    min-height: 360px;
  }

  .project-content h3 {
    font-size: 39px;
  }

  .map-graphic {
    min-height: 300px;
    order: -1;
  }

  /* Field */
  .field-inner {
    display: block;
    margin-top: 35px;
  }

  .field-text {
    padding-top: 30px;
  }

  /* Workflow */
  .workflow ol {
    display: block;
  }

  .workflow li,
  .workflow li:nth-child(3n+2),
  .workflow li:nth-child(3n) {
    padding: 20px 0;
    border-left: 0;
  }

  /* Price */
  .price-list div {
    min-height: 62px;
  }

  .price-list span {
    font-size: 11px;
  }

  .price-list b {
    font-size: 18px;
  }

  /* About */
  .about {
    min-height: 550px;
  }

  .about-copy {
    width: 100%;
  }

  .about-mark {
    font-size: 230px;
    right: 10%;
    bottom: -3%;
  }

  /* Contact */
  .contact {
    padding: 75px 6vw 26px;
    min-height: 570px;
  }

  .contact-top {
    display: block;
  }

  .contact-top > p:last-child {
    margin-top: 35px;
  }

  .contact h2 {
    margin: 45px 0 30px;
    font-size: 50px;
  }

  .contact-bottom {
    padding-top: 50px;
    gap: 15px;
    align-items: end;
  }

  .contact-bottom > p:nth-child(2) {
    display: none;
  }

  .contact-bottom p:last-child {
    font-size: 8px;
  }

  .logo {
    font-size: 9px;
  }

  .logo-mark {
    width: 24px;
    height: 24px;
    font-size: 13px;
  }

  /* Contact decorative circles smaller on mobile */
  .contact::before {
    width: 300px;
    height: 300px;
    right: -120px;
    top: -120px;
  }

  .contact::after {
    width: 200px;
    height: 200px;
    right: -60px;
    top: -60px;
  }

  /* Reduce motion for mobile performance */
  .service-list article:hover {
    padding-left: 0;
  }

  .service-list article::before {
    display: none;
  }
}