/* Site-wide layout fixes for phones and tablets. Loaded after the main stylesheet. */

/* Floating call / WhatsApp buttons: always visible, even on the dark green footer */
.float-btn{border:2px solid #fff;box-shadow:0 6px 18px rgba(0,0,0,.28)}

/* Homepage hero on tablets and phones: portrait photo, faces visible, badges clear of faces */
@media (max-width:980px){
  .hero-visual-wrap{aspect-ratio:4 / 5;max-width:440px;margin:8px auto 0}
  .hero-visual img{object-position:center 18%}
  .hero-stat-pill{padding:10px 14px;gap:10px;animation:none}
  .hero-stat-pill.top-right{top:auto;bottom:-18px;right:12px}
  .hero-stat-pill.bottom-left{left:12px;bottom:46px}
  .hero-stat-pill p{font-size:.8rem}
}

/* Tablets: five service tiles as 3 + 2 with no empty gap */
@media (min-width:601px) and (max-width:1100px){
  .svc-tiles{grid-template-columns:repeat(6,minmax(0,1fr))}
  .svc-tiles .svc-tile{grid-column:span 2}
  .svc-tiles .svc-tile:nth-child(n+4){grid-column:span 3;aspect-ratio:16 / 10}
}
/* Tablets: work wall in 3 even columns (18 tiles = 6 full rows) */
@media (min-width:761px) and (max-width:1100px){
  .work-wall .wall-tile.wide{grid-column:span 1}
}

/* Tablets: stats and client strip in tidy rows instead of long stacks */
@media (max-width:980px){
  .stats-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
  .authority-grid{grid-template-columns:repeat(5,minmax(0,1fr));gap:16px}
}

@media (max-width:600px){
  /* Long button labels wrap instead of pushing the page sideways */
  .btn{white-space:normal;text-align:center;max-width:100%;line-height:1.3}
  .stats-grid{grid-template-columns:1fr 1fr;gap:22px 16px}
  .stat-item h3{font-size:2.3rem}
  .stat-item p{font-size:.85rem}
  .authority-strip{padding:28px 0}
  .authority-grid{grid-template-columns:1fr 1fr;gap:18px 12px}
  .authority-item{font-size:.95rem}
  .authority-item:last-child{grid-column:span 2}
  /* Homepage: five service tiles in pairs, the fifth runs full width */
  .svc-tiles .svc-tile:last-child{grid-column:span 2;aspect-ratio:16 / 9}
  /* Growth Clarity Checker banner photo: shorter on phones */
  .banner-visual{aspect-ratio:4 / 3}
  /* Room for the floating buttons so they never cover the last footer links */
  .site-footer{padding-bottom:110px}
  .floating-buttons{bottom:14px;right:12px;gap:10px}
  .float-btn{width:48px;height:48px}
  .float-btn svg{width:22px;height:22px}
  /* Hero: trust points on one tidy line each, buttons full width */
  .hero-trust{gap:8px 16px}
  .hero-visual-wrap{max-width:100%}
}