/* =========================================================
   WebBaron — Responsive Layer
   ========================================================= */

/* ---------- Large desktop refinement ---------- */
@media (min-width: 1440px) {
  .container { padding-inline: 40px; }
}

/* ---------- Laptop / small desktop ---------- */
@media (max-width: 1279px) {
  .hero-copy h1 { font-size: 50px; }
  .final-cta h2 { font-size: 38px; }
}

/* ---------- Tablet ---------- */
@media (max-width: 1023px) {
  :root {
    --section-pad: 88px;
  }
  .container { padding-inline: 28px; }

  h1, .h1 { font-size: 42px; }
  h2, .h2 { font-size: 32px; }
  h3, .h3 { font-size: 24px; }
  .text-display { font-size: 48px; }

  .nav-links { display: none; }
  .navbar-actions .btn-primary { display: none; }
  .nav-toggle { display: flex; }

  .hero { padding-top: 48px; padding-bottom: 72px; }
  .hero-inner { grid-template-columns: 1fr; gap: 56px; }
  .hero-copy h1 { font-size: 42px; }
  .hero-copy .lead, .hero-copy .lead-secondary { max-width: 100%; }
  .hero-visual { max-width: 560px; }

  .trust-strip-inner { flex-direction: column; align-items: flex-start; }

  .work-grid { grid-template-columns: 1fr; }
  .work-card.featured { grid-column: span 1; grid-template-columns: 1fr; }

  .capabilities-groups { grid-template-columns: 1fr; gap: 32px; }

  .industries-grid { grid-template-columns: repeat(2, 1fr); }

  .footer-top { grid-template-columns: 1fr 1fr; gap: 40px; }
  .footer-brand { grid-column: 1 / -1; margin-bottom: 8px; }

  .contact-layout { grid-template-columns: 1fr; gap: 48px; }
  .contact-form-panel { padding: 32px; }

  .work-filter-grid { grid-template-columns: 1fr; }

  .service-detail-head { grid-template-columns: 1fr; gap: 12px; }
  .service-detail-body { grid-template-columns: 1fr; gap: 32px; }
}

/* ---------- Mobile ---------- */
@media (max-width: 767px) {
  :root {
    --section-pad: 64px;
    --gap: 18px;
  }
  .container { padding-inline: 20px; }

  h1, .h1 { font-size: 32px; line-height: 1.16; }
  h2, .h2 { font-size: 26px; }
  h3, .h3 { font-size: 21px; }
  .text-display { font-size: 38px; }
  p.lead { font-size: 16.5px; }

  .section { padding-block: var(--section-pad); }
  .section-head { margin-bottom: 40px; }

  .navbar-inner { padding-block: 16px; }
  .brand-word { font-size: 17px; }

  .hero { padding-top: 36px; padding-bottom: 56px; }
  .hero-copy h1 { font-size: 32px; margin-bottom: 18px; }
  .hero-copy .lead-secondary { margin-bottom: 32px; padding-top: 14px; }
  .hero-ctas { width: 100%; flex-direction: column; align-items: stretch; gap: 14px; }
  .hero-ctas .btn { width: 100%; }
  .product-frame { padding: 12px; }
  .product-frame-body { padding: 16px; }

  .trust-strip { padding-block: 28px; }
  .trust-strip-text { font-size: 15.5px; }
  .trust-tag { font-size: 12px; padding: 7px 14px; }

  .work-grid { gap: 16px; }
  .work-card-body { padding: 22px; }
  .work-card.featured .work-card-body h3 { font-size: 24px; }

  .service-row { grid-template-columns: 44px 1fr; gap: 16px; padding: 28px 0; }
  .service-row-icon { display: none; }
  .service-row-num { font-size: 16px; }
  .service-row-main h3 { font-size: 19px; }

  .why-item { grid-template-columns: 1fr; gap: 10px; padding: 26px 0; }
  .why-item h3 { font-size: 19px; }

  .capability-group h4 { font-size: 12px; }
  .chip { font-size: 12.5px; padding: 8px 14px; }

  .process-step { grid-template-columns: 1fr; gap: 12px; padding: 32px 0; }
  .process-step-num { font-size: 32px; }
  .process-step-content h3 { font-size: 21px; }

  .industries-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .industry-tile { padding: 20px 14px; font-size: 13.5px; }

  .faq-question { font-size: 16px; padding: 22px 0; gap: 14px; }
  .faq-answer-inner { padding-bottom: 22px; }

  .final-cta { padding: 56px 24px; border-radius: 16px; }
  .final-cta h2 { font-size: 28px; }
  .final-cta-actions { flex-direction: column; width: 100%; }
  .final-cta-actions .btn { width: 100%; }

  .footer-top { grid-template-columns: 1fr; gap: 36px; padding-bottom: 40px; }
  .footer-bottom { flex-direction: column; align-items: flex-start; gap: 20px; }
  .footer-bottom-links { flex-wrap: wrap; }

  .contact-form-panel { padding: 24px; }
  .form-grid { grid-template-columns: 1fr; gap: 0; }

  .service-detail { padding-block: 56px; }
  .service-detail-num { font-size: 40px; }

  .page-hero { padding-top: 44px; padding-bottom: 48px; }
}

/* ---------- Small mobile ---------- */
@media (max-width: 390px) {
  .container { padding-inline: 16px; }
  .hero-copy h1 { font-size: 28px; }
  .brand-word { font-size: 16px; }
  .btn { padding: 14px 22px; font-size: 13.5px; }
}