/* ============================================================
   RESPONSIVE FINE-TUNING
   style.css handles most breakpoints inline via clamp()+grid;
   this file covers the remaining structural shifts.
   ============================================================ */

/* Large screens: cap line-length growth */
@media (min-width: 1600px){
  :root{ --content-max: 1360px; }
}

/* Tablet */
@media (max-width: 1024px){
  .hero h1{ max-width: 13ch; }
  .process-item{ grid-template-columns: 60px 1fr; }
  .cta-band{ flex-direction: column; align-items: flex-start; }
}

/* Small tablet / large phone */
@media (max-width: 768px){
  .site-header{ padding: 14px 16px 0; }
  .nav-shell{ padding: 8px 8px 8px 16px; }
  .hero{ border-radius: 0 0 var(--radius-m) var(--radius-m); }
  .hero-row{ flex-direction: column; align-items: flex-start; }
  .pillar-strip{ flex-wrap: wrap; }
  .pillar-strip .pillar{ flex: 1 1 50%; border-left: none; border-top: 1px solid var(--line); }
  .pillar-strip .pillar:nth-child(1), .pillar-strip .pillar:nth-child(2){ border-top: none; }
  .pillar-strip .pillar:nth-child(2n+1){ border-left: none; }
  .cta-band{ margin-inline: 16px; padding: 32px 24px; }
  .footer-top{ gap: 32px; }
}

/* Phones */
@media (max-width: 480px){
  .container{ padding-inline: 18px; }
  .btn{ padding: 12px 18px; }
  .section-head{ flex-direction: column; align-items: flex-start; }
  .card-media{ aspect-ratio: 16/10; }
  .process-item{ grid-template-columns: 1fr; gap: 8px; }
  .process-num{ font-size: var(--step-1); }
}

/* Very small phones */
@media (max-width: 375px){
  .hero h1{ font-size: 2.4rem; }
  .nav-shell .brand span.brand-text{ display:none; }
}

/* Landscape mobile: shrink the hero so first section is reachable */
@media (max-height: 480px) and (orientation: landscape){
  .hero-inner{ padding-top: 24px; }
  .pillar-strip{ display:none; }
}

/* Admin layout responsiveness lives in admin.html's own <style> block for
   isolation from the public design system. */