/* =========================
   MOBILE HERO (FINAL)
   ========================= */

@media (max-width: 768px) {

  /* hide desktop hero */
  .hero{
    display:none;
  }

  /* =========================
     MOBILE HERO
     ========================= */

  .hero-mobile{
    display:block;
    background:#f4f4f2;
    padding:40px 0 20px;
    overflow:hidden;
  }

  .hero-mobile-inner{
    width:100%;
    display:flex;
    flex-direction:column;
    align-items:center;
  }

  /* ❌ Balloons removed */
  .hero-mobile-balloons{
    display:none;
  }

  /* 🐋 Whale — higher position */
  .hero-mobile-whale{
    width:92%;
    max-width:420px;
    height:auto;
    display:block;
    margin-top:-20px;
  }

  /* =========================
     GLOBAL MOBILE FIXES
     ========================= */

  .site-header{
    position:relative;
  }

  .nav-inline{
    display:none;
  }

  .two-cols{
    flex-direction:column;
    gap:28px;
  }

  .container{
    max-width:92%;
  }

  h2{
    font-size:32px;
    line-height:40px;
  }

  .about .two-cols{
    align-items:flex-start;
  }

  .about h2{
    margin-bottom:12px;
    text-align:left;
  }

  .image-right,
  .image-left{
    width:100%;
    margin:0;
  }

  .services .image-right{ order:1; }
  .services .text-block{ order:2; }

  .news .image-right{ order:1; }
  .news .text-block{ order:2; }

  .projects .text-block,
  .news .image-right,
  .news .text-block,
  .contact .image-left,
  .contact .text-block,
  .split-full{
    margin-top:0;
    top:0;
  }

  .contact p br:first-of-type{
    display:none;
  }

  .contact a{
    color:inherit;
    text-decoration:none;
    pointer-events:none;
  }

}