/* ==========================================================================
   AHD WORLD — Responsive refinements
   Base styles in style.css are written mobile-first where practical;
   this file layers additional intentional adjustments per breakpoint
   rather than simply scaling the desktop layout down.
   ========================================================================== */

/* ---- Large desktop: give long-form sections a touch more breathing room ---- */
@media (min-width: 1400px){
  :root{ --maxw: 1280px; }
  .hero-grid{ gap: 90px; }
}

/* ---- Laptop / small desktop ---- */
@media (max-width: 1100px){
  .hero-grid{ grid-template-columns: 1fr; }
  .hero-figure{ max-width: 420px; margin: 0 auto; order: -1; }
  .cta-band{ text-align: center; justify-content: center; }
}

/* ---- Tablet ---- */
@media (max-width: 900px){
  .split{ grid-template-columns: 1fr; }
  .split.reverse{ grid-template-columns: 1fr; }
  .split-figure{ order: -1; max-width: 480px; margin: 0 auto; aspect-ratio: 16/10; }
  .contact-grid{ grid-template-columns: 1fr; }
  .process-item{ grid-template-columns: 48px 1fr; }
}

/* ---- Mobile ---- */
@media (max-width: 640px){
  .brand-logo{ height: 34px; }
  body{ font-size: 15.5px; }
  .section{ padding-block: 48px; }
  .stat-strip{ grid-template-columns: repeat(2,1fr) !important; }
  .gallery-grid{ grid-template-columns: 1fr 1fr; gap: 12px; }
  .card-grid{ gap: 16px; }
  .cta-band{ flex-direction: column; align-items: stretch; text-align: center; }
  .cta-band .hero-actions{ justify-content: center; }
  .hero-badges{ justify-content: center; }
  .footer-grid{ grid-template-columns: 1fr; text-align: center; }
  .footer-brand{ display:flex; flex-direction:column; align-items:center; }
  .footer-bottom{ flex-direction: column; text-align: center; }
  .lightbox-frame{ aspect-ratio: 4/3; }
}

/* ---- Very small phones ---- */
@media (max-width: 380px){
  .btn{ padding: 12px 20px; font-size: 14px; }
  .gallery-grid{ grid-template-columns: 1fr; }
}

/* ---- Landscape mobile: hero shouldn't force excessive scrolling ---- */
@media (max-height: 480px) and (orientation: landscape){
  .hero{ padding-block: 40px; }
  .hero-figure{ display: none; }
}

/* ---- Print: strip chrome, keep content readable ---- */
@media print{
  .site-header, .site-footer, .nav-toggle, .hero-ripple, .waterline, .lightbox, .to-top{ display: none !important; }
  body{ background: #fff; color: #000; }
  .section{ padding-block: 20px; }
}