/* =================================================================
   SPARK CUSTOM STORE — responsive.css
   Breakpoints: ≤1200px | ≤992px | ≤768px | ≤480px
================================================================= */

/* =================================================================
   BASE FONT — fixed 16px (conventional).
   ─────────────────────────────────────────────────────────────
   The previous `clamp(16px, 1.25vw, 48px)` made the base font scale
   with viewport WIDTH, so the whole site (every rem: text, padding,
   navbar, cards) zoomed up on any screen wider than 1280px:
       1366px → 17px,  1536px → 19px,  1920px → 24px (1.5×).
   On normal laptop / "720p" displays that read as "zoomed in".
   A fixed 16px base renders every rem at its true size; the
   media-query breakpoints below do the actual responsive work.
================================================================= */
html {
  font-size: 16px;
}

/* =================================================================
   BIG SCREENS — show the site the way it looks at 75% browser zoom.
   ─────────────────────────────────────────────────────────────
   From 1600px up the big-screen rules (larger headings, 90px logo,
   24px nav…) made a 100% view look over-zoomed; the client preferred
   75%. zoom also shrinks vw/vh, so tools/desktop-scale.mjs adds
   matching 4/3-scaled viewport-unit rules (marked DESKTOP-SCALE) —
   re-run it after changing CSS that uses vw/vh. Laptops (<1600px)
   and phones are unaffected.
================================================================= */
@media (min-width: 1600px) {
  html { zoom: 0.75; }
}

/* Container in rem — auto-widens proportionally with font-size.
   Only kicks in at the 1280px reference width; below that the
   page-specific clamp(…,78vw,2200px) rules keep mobile correct. */
@media (min-width: 1280px) {
  /* :where() = zero specificity, so pages that define their own `.container`
     (home, about, services, products) keep their width; pages without one
     (faq, gallery, testimonials, blog, custom-quote) get this 1260px shell.
     The old :root { --max-w; --container } override stomped about.css's
     --container token, and the !important caps below crushed portfolio's and
     contact's own wide-screen clamps — all removed (those pages own their caps). */
  :where(.container) {
    max-width: 78.75rem;    /* 1260px@16px */
    padding-inline: 2.8rem; /*  44px@16px  */
    margin-inline: auto;
  }
}

/* LARGE DESKTOP section-widening (fill wider screens) moved to home.css
   (per preference: keep all homepage big-screen responsiveness in home.css). */

/* ── Container: always add horizontal padding ─────────────────── */

/* =================================================================
   ≤ 1200px — LARGE TABLET
================================================================= */
@media (max-width: 1200px) {
  .process-section      { padding: 5rem 0; }
  .portfolio-section    { padding: 5rem 0; }
  .portfolio-grid       { grid-template-columns: repeat(3, 1fr); }
  .industries-section   { padding: 5rem 0; }
  .stats-section        { padding: 4rem 0; }
  .testimonials-section { padding: 5rem 0; }
  .faq-section          { padding: 5.5rem 0; }
  .cta-banner           { padding: 5rem 0; }

  /* Categories */
  .categories-section   { padding: 5rem 0; }
  .categories-grid      { grid-template-columns: repeat(3, 1fr); gap: 1.25rem; }
}

/* =================================================================
   ≤ 992px — TABLET
================================================================= */
@media (max-width: 992px) {
  .container { padding-left: 2rem; padding-right: 2rem; }

  /* Section padding */
  .process-section       { padding: 4.5rem 0; }
  .portfolio-section     { padding: 4.5rem 0; }
  .industries-section    { padding: 4.5rem 0; }
  .stats-section         { padding: 3.5rem 0; }
  .testimonials-section  { padding: 4.5rem 0; }
  .faq-section           { padding: 5rem 0; }
  .cta-banner            { padding: 4.5rem 0; }

  /* Hero → home.css */

  /* Grids */
  .portfolio-grid   { grid-template-columns: repeat(2, 1fr); }
  .industries-grid  { grid-template-columns: repeat(2, 1fr); }
  .stats-grid       { grid-template-columns: repeat(2, 1fr); }
  .testimonials-grid { grid-template-columns: 1fr; }
  .testimonial-card.featured { transform: none; }

  /* Process */
  .process-timeline {
    flex-wrap: wrap;
    gap: 2rem;
    justify-content: center;
  }
  .process-connector { display: none; }
  .process-step { flex: 0 0 calc(50% - 1rem); }

  /* CTA */
  .cta-inner { flex-direction: column; text-align: center; }
  .cta-text p { max-width: none; }
  .cta-actions { justify-content: center; }

  /* Categories */
  .categories-section { padding: 4.5rem 0; }
  .categories-grid    { grid-template-columns: repeat(3, 1fr); gap: 1.25rem; }

  /* Footer */
  .footer-grid  { grid-template-columns: 1fr 1fr; gap: 2rem; }
  .footer-brand { grid-column: 1 / -1; }
}

/* =================================================================
   ≤ 768px — MOBILE
================================================================= */
@media (max-width: 768px) {
  .container { padding-left: 1.25rem; padding-right: 1.25rem; }

  /* Section padding */
  .process-section       { padding: 3.5rem 0; }
  .portfolio-section     { padding: 3.5rem 0; }
  .industries-section    { padding: 3.5rem 0; }
  .stats-section         { padding: 3rem 0; }
  .testimonials-section  { padding: 3.5rem 0; }
  .faq-section           { padding: 4rem 0; }
  .cta-banner            { padding: 3.5rem 0; }

  /* Hero → home.css */



  /* Process */
  .process-step { flex: 0 0 100%; }

  /* Portfolio */
  .portfolio-grid   { grid-template-columns: 1fr; }
  .pf-btn           { padding: 6px 14px; font-size: 0.8rem; }

  /* Industries */
  .industries-grid { grid-template-columns: 1fr; }

  /* Categories */
  .categories-section { padding: 3.5rem 0; }
  .categories-grid    { grid-template-columns: repeat(2, 1fr); gap: 1rem; }
  .cat-card           { min-height: 200px; padding: 1.5rem 1.25rem; }

  /* FAQ */
  .faq-heading {
    padding: 0 1.25rem;
    margin-top: 0;
    margin-bottom: 2rem;
  }
  .faq-grid    { gap: 1.5rem; margin-bottom: 0; }
  .faq-column  { height: 300px; }
  .faq-image   { height: 280px; }

  /* CTA */
  .cta-inner     { gap: 2rem; }
  .cta-text h2   { font-size: clamp(1.75rem, 6vw, 2.5rem); }
  .cta-actions   { flex-direction: column; align-items: center; }
  .btn-primary.btn-lg,
  .btn-whatsapp  { width: 100%; max-width: 300px; justify-content: center; }

  /* Footer */
  .footer-grid         { grid-template-columns: 1fr; }
  .footer-brand        { display: block; }
  .footer-top          { padding: 3rem 0 2rem; }
  .footer-bottom-inner { flex-direction: column; text-align: center; gap: 0.75rem; }
  .footer-links        { justify-content: center; }

}

/* =================================================================
   ≤ 480px — SMALL MOBILE
================================================================= */
@media (max-width: 480px) {
  .container { padding-left: 1rem; padding-right: 1rem; }

  /* Hero → home.css */

  /* Categories */
  .categories-heading { font-size: clamp(1.75rem, 7vw, 2.5rem); }
  .categories-grid    { gap: 0.75rem; }
  .cat-card           { min-height: auto; padding: 1.25rem 1rem; }
  .cat-icon-wrap svg  { width: 30px; height: 30px; }
  .cat-card h3        { font-size: 0.9rem; }

  /* Marquee */
  .marquee-card { min-width: 150px; padding: 1rem 1.25rem; }
  .mc-icon      { font-size: 1.25rem; }
  .mc-title     { font-size: 0.85rem; }


  /* Stats */
  .stat-label { font-size: 0.75rem; }

  /* Testimonials */
  .testimonial-card { padding: 1.5rem; }
  .tc-author span   { font-size: 0.75rem; }


  /* Industries */
  .industry-card { padding: 1.75rem 1.5rem; }

  /* CTA */
  .btn-primary.btn-lg,
  .btn-whatsapp { max-width: 100%; }

  /* Section tags */
  .section-tag { font-size: 0.75rem; padding: 8px 14px; }
}








/* =================================================================
   ≥ 1920px — 1.5× scale (font=24px, container=1890px)
   Rem values auto-  .categories-grid { grid-template-columns: repeat(7, 1fr); }
  .testimonials-grid { grid-template-columns: repeat(4, 1fr); }

  /* Orbit constellation — in rem so it's proportional */
  /* .ts-orbit-scene { width: 22.5rem; height: 22.5rem; } 22.5×48=1080px */
  /* .ts-avatar-wrap { width: 2.5rem; height: 2.5rem; top: -1.25rem; left: calc(8.75rem - 1.25rem); }
  .ts-avatar      { width: 2.5rem; height: 2.5rem; }
  .ts-orbit-card  { width: 7.5rem; } */
  

/* }scale — no px overrides needed for size.
   Only grid column counts step here (can't be fluid).
================================================================= */ */
/* @media (min-width: 1920px) {
  /* Hero: lift the 700px cap, let the rem container define width */
  /* .hero-content { max-width: 55%; }
  .hero-h1, .hero-sub, .hero-ctas { max-width: 100%; } */

  /* Why section — base is now 43.75rem in home.css; rem scales proportionally, no override needed */

  /* Grid column counts — layout steps, not size */
  /* .portfolio-grid  { grid-template-columns: repeat(4, 1fr); }
  .industries-grid { grid-template-columns: repeat(4, 1fr); }
  .services-grid   { grid-template-columns: repeat(3, 1fr); }
  .testimonials-grid { grid-template-columns: repeat(3, 1fr); } */

  /* Navbar logo — in rem so it scales */
  /* .logo__img { height: 3.75rem; } 60px @ 16px base */
 */

/* =================================================================
   ≥ 2560px — 2× scale (font=32px, container=2520px)
================================================================= */
/* @media (min-width: 2560px) {
  
  /* .services-grid   { grid-template-columns: repeat(4, 1fr); }
  .portfolio-grid  { grid-template-columns: repeat(5, 1fr); }
  .industries-grid { grid-template-columns: repeat(5, 1fr); }
  .categories-grid { grid-template-columns: repeat(5, 1fr); }
  .testimonials-grid { grid-template-columns: repeat(3, 1fr); } */
 */

/* =================================================================
   ≥ 3200px — 2.5× scale (font≈40px, container≈3150px)
================================================================= */
/* @media (min-width: 3200px) {
  /* .portfolio-grid  { grid-template-columns: repeat(6, 1fr); }
  .industries-grid { grid-template-columns: repeat(6, 1fr); }
  .categories-grid { grid-template-columns: repeat(6, 1fr); }
  .testimonials-grid { grid-template-columns: repeat(4, 1fr); } */
*/

/* =================================================================
   ≥ 3840px — 3× terminal (font=48px, container=3780px)
   Nothing above this breakpoint is targeted.
================================================================= */
/* @media (min-width: 3840px) {

  /* Grid column counts at 3× scale */
  /* .services-grid   { grid-template-columns: repeat(5, 1fr); }
  .portfolio-grid  { grid-template-columns: repeat(7, 1fr); }
  .industries-grid { grid-template-columns: repeat(7, 1fr); } */