/* ================================================================
   GROWTH LANES — MOBILE-FIRST RESPONSIVE OVERRIDES
   Covers all pages: index, about, services, case studies, contact,
   FAQ, blog, terms, 404, etc.
   Breakpoints: 991px (tablet), 767px (mobile), 479px (small mobile)
   ================================================================ */

/* ── Global ─────────────────────────────────────────────────────── */
*,
*::before,
*::after {
  box-sizing: border-box;
}

.page-wrapper {
  overflow-x: hidden;
  width: 100%;
}

img {
  max-width: 100%;
  height: auto;
}


/* ================================================================
   TABLET  (≤ 991px)
   ================================================================ */
@media screen and (max-width: 991px) {

  /* -- Typography ------------------------------------------------ */
  .hero-title            { font-size: 36px; line-height: 1.2; }
  .heading-style-h1      { font-size: 36px; }
  .heading-style-h2      { font-size: 30px; }
  .heading-style-h3      { font-size: 24px; }

  /* -- Padding / containers -------------------------------------- */
  .padding-global        { padding-left: 24px; padding-right: 24px; }
  .base-container        { padding-left: 16px; padding-right: 16px; }
  .container-fluid       { padding-left: 20px; padding-right: 20px; }

  /* -- HERO ------------------------------------------------------ */
  .hero-main-split {
    flex-direction: column;
    gap: 40px;
    text-align: center;
  }
  .hero-left  { width: 100%; }
  .hero-right { width: 100%; display: flex; justify-content: center; }
  .hero-right-images img,
  .hero-right-images source { max-width: 280px; }
  .button-wrapper { justify-content: center; }

  /* -- About hero ------------------------------------------------ */
  .about-hero-wrapper {
    flex-direction: column;
    gap: 32px;
    text-align: center;
  }
  .about-hero-left  { width: 100%; }
  .about-hero-right { width: 100%; display: flex; justify-content: center; }
  .hero-about-main-image { max-width: 320px; }

  /* -- Process section ------------------------------------------ */
  .process-grid,
  .our-process-grid,
  .section-work-process .w-layout-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 24px;
  }

  /* -- Services / cards grids ----------------------------------- */
  .services-grid,
  .service-cards-grid,
  .w-layout-grid.services-grid {
    grid-template-columns: 1fr 1fr !important;
  }

  /* -- Customer logos ------------------------------------------- */
  .customer-logo-contain {
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
  }

  /* -- Contact section ------------------------------------------ */
  .contact-cta-wrapper   { flex-direction: column; gap: 32px; }
  .gl-contact-columns    { flex-direction: column !important; gap: 32px; }
  .gl-calendar-col,
  .gl-form-col           { width: 100% !important; }

  /* -- Footer --------------------------------------------------- */
  .footer-top-wrapper {
    grid-template-columns: 1fr !important;
    gap: 40px;
  }
  .footer-menu-wrapper {
    grid-template-columns: 1fr 1fr !important;
    gap: 24px;
  }

  /* -- Case studies / blog grids -------------------------------- */
  .case-studies-grid,
  .blog-grid,
  .w-layout-grid.case-studies-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 24px;
  }

  /* -- Counter / stats grid ------------------------------------- */
  .counter-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 32px;
  }

  /* -- FAQ ------------------------------------------------------- */
  .faq-grid,
  .faq-content-grid {
    grid-template-columns: 1fr !important;
  }

  /* -- Section padding ------------------------------------------ */
  .section-hero        { padding-top: 60px; padding-bottom: 60px; }
  .section-contact-cta { padding-top: 60px; padding-bottom: 60px; }
  .section-work-process,
  .section-customer    { padding-top: 60px; padding-bottom: 60px; }
}


/* ================================================================
   MOBILE  (≤ 767px)
   ================================================================ */
@media screen and (max-width: 767px) {

  /* -- Typography ------------------------------------------------ */
  .hero-title            { font-size: 28px; line-height: 1.25; }
  .heading-style-h1      { font-size: 28px; }
  .heading-style-h2      { font-size: 24px; }
  .heading-style-h3      { font-size: 20px; }
  .heading-style-h4      { font-size: 18px; }
  p, .body-text          { font-size: 15px; line-height: 1.6; }

  /* -- Padding / spacing ---------------------------------------- */
  .padding-global        { padding-left: 16px; padding-right: 16px; }
  .base-container        { padding-left: 12px; padding-right: 12px; }
  .container-fluid       { padding-left: 16px; padding-right: 16px; }
  .margin-bottom.margin-xlarge { margin-bottom: 20px; }

  /* -- Section padding ------------------------------------------ */
  .section-hero          { padding-top: 40px; padding-bottom: 40px; }
  .section-contact-cta   { padding-top: 48px; padding-bottom: 48px; }
  .section-work-process,
  .section-customer,
  .section-our-service   { padding-top: 48px; padding-bottom: 48px; }

  /* -- Navigation ----------------------------------------------- */
  .primary-nav           { padding-left: 16px; padding-right: 16px; }

  /* -- Hero ----------------------------------------------------- */
  .hero-main-split       { gap: 32px; }
  .hero-right            { display: none; }   /* hide hero image on small mobile */
  .button-primary,
  .button-secondary      { width: 100%; text-align: center; }
  .button-wrapper        { flex-direction: column; gap: 12px; align-items: stretch; }

  /* -- About hero ----------------------------------------------- */
  .about-hero-right      { display: none; }
  .about-hero-left       { text-align: center; }
  .hero-about-info       { font-size: 15px; }

  /* -- Counter / stats ------------------------------------------ */
  .counter-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 24px;
  }
  .counter-number        { font-size: 36px; }

  /* -- Process section ------------------------------------------ */
  .process-grid,
  .our-process-grid,
  .section-work-process .w-layout-grid {
    grid-template-columns: 1fr !important;
    gap: 20px;
  }
  .process-step          { text-align: center; }

  /* -- Services grid -------------------------------------------- */
  .services-grid,
  .service-cards-grid,
  .w-layout-grid.services-grid {
    grid-template-columns: 1fr !important;
    gap: 16px;
  }

  /* -- Case studies / blog -------------------------------------- */
  .case-studies-grid,
  .blog-grid,
  .w-layout-grid.case-studies-grid {
    grid-template-columns: 1fr !important;
    gap: 20px;
  }

  /* -- Customer logos ------------------------------------------- */
  .customer-logo-contain {
    flex-wrap: wrap;
    justify-content: center;
    gap: 16px;
  }
  .customer-logo-contain img { max-height: 32px; }

  /* -- Contact / CTA -------------------------------------------- */
  .contact-cta-wrapper   { text-align: center; gap: 24px; }
  .gl-contact-columns    { flex-direction: column !important; gap: 24px; }
  .gl-calendar-col,
  .gl-form-col           { width: 100% !important; }
  .contact-form-wrapper  { width: 100%; }
  .gl-cal-open-btn       { width: 100%; justify-content: center; }

  /* -- Footer --------------------------------------------------- */
  .footer-top-wrapper    {
    grid-template-columns: 1fr !important;
    gap: 32px;
  }
  .footer-menu-wrapper   {
    grid-template-columns: 1fr 1fr !important;
    gap: 20px;
  }
  .footer-social-links   { justify-content: flex-start; }
  .spacer-huge           { height: 40px; }

  /* -- FAQ ------------------------------------------------------ */
  .faq-grid,
  .faq-content-grid      { grid-template-columns: 1fr !important; }
  .faq-question-wrap     { padding: 16px; }

  /* -- Service detail pages ------------------------------------- */
  .service-hero-split,
  .service-content-split { flex-direction: column !important; gap: 24px; }
  .service-hero-left,
  .service-hero-right    { width: 100% !important; }

  /* -- Team grid ------------------------------------------------ */
  .team-grid             { grid-template-columns: 1fr 1fr !important; gap: 20px; }

  /* -- Testimonials --------------------------------------------- */
  .testimonial-grid      { grid-template-columns: 1fr !important; }

  /* -- Tables / overflow ---------------------------------------- */
  table                  { display: block; overflow-x: auto; }

  /* -- Misc utility --------------------------------------------- */
  .hide-on-mobile        { display: none !important; }
  .text-center-mobile    { text-align: center !important; }
  .full-width-mobile     { width: 100% !important; }

  /* -- Index-v2 custom sections --------------------------------- */
  .gl-svc-grid           { grid-template-columns: 1fr !important; gap: 16px; }
  .gl-testimonials-grid  { grid-template-columns: 1fr !important; gap: 16px; }
  .gl-philosophy-grid    { flex-direction: column !important; gap: 24px; }
  .gl-philosophy-col     { width: 100% !important; }
}


/* ================================================================
   SMALL MOBILE  (≤ 479px)
   ================================================================ */
@media screen and (max-width: 479px) {

  /* -- Typography ------------------------------------------------ */
  .hero-title            { font-size: 24px; }
  .heading-style-h1      { font-size: 24px; }
  .heading-style-h2      { font-size: 22px; }
  .heading-style-h3      { font-size: 19px; }
  p                      { font-size: 14px; }

  /* -- Padding -------------------------------------------------- */
  .padding-global        { padding-left: 12px; padding-right: 12px; }
  .base-container        { padding-left: 12px; padding-right: 12px; }

  /* -- Buttons -------------------------------------------------- */
  .button-primary,
  .button-secondary,
  .gl-closer-cta         { font-size: 14px; padding: 12px 20px; }

  /* -- Counter -------------------------------------------------- */
  .counter-grid          { grid-template-columns: 1fr 1fr !important; }
  .counter-number        { font-size: 30px; }

  /* -- Footer --------------------------------------------------- */
  .footer-menu-wrapper   { grid-template-columns: 1fr !important; gap: 16px; }

  /* -- Team grid ------------------------------------------------ */
  .team-grid             { grid-template-columns: 1fr !important; }

  /* -- Section padding ------------------------------------------ */
  .section-hero          { padding-top: 28px; padding-bottom: 28px; }
  .section-contact-cta   { padding-top: 36px; padding-bottom: 36px; }

  /* -- Index-v2 numbers (already in inline CSS, reinforce here) - */
  .gl-number-value       { font-size: 32px; }
  .gl-numbers-title      { font-size: 22px; }
  .gl-forwhom-title      { font-size: 22px; }
  .gl-closer-title       { font-size: 22px; }
  .gl-svc-title          { font-size: 22px; }
}