/* =======================================================
   Color Splashh — responsive.css
   Loaded LAST — the authoritative responsive system.
   Covers: 1280px | 1024px | 768px | 640px | 480px | 375px
   ======================================================= */

/* -------------------------------------------------------
   GLOBAL BASELINE
   Prevents horizontal overflow and grid/flex child blowout
   ------------------------------------------------------- */
html {
  overflow-x: hidden;
}

body {
  overflow-x: clip; /* clip doesn't break position:sticky like hidden does */
}

/* All flex/grid children must not self-expand past their track */
* {
  min-width: 0;
}

img,
video,
svg,
iframe {
  max-width: 100%;
  height: auto;
}

/* -------------------------------------------------------
   BREAKPOINT: ≤ 1280px (Large laptops)
   ------------------------------------------------------- */
@media (max-width: 1280px) {
  /* Container edge padding at 1280 */
  :root {
    --pad-x: 3rem;
  }
}

/* -------------------------------------------------------
   BREAKPOINT: ≤ 1024px (Tablet landscape / small laptop)
   ------------------------------------------------------- */
@media (max-width: 1024px) {
  :root {
    --pad-x: 2rem;
  }

  /* Typography */
  .display-1 { font-size: var(--text-5xl); }
  .display-2 { font-size: var(--text-4xl); }

  /* ---- HOME ---- */
  .hero { min-height: auto; }
  .hero-grid {
    grid-template-columns: 1fr;
    padding-block: var(--space-16);
  }
  .hero-visual,
  .hero-img-badge { display: none; }

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

  .featured-grid .portfolio-card:first-child { aspect-ratio: 16/7; }

  /* ---- ABOUT ---- */
  .studio-story-grid  { grid-template-columns: 1fr; }
  .studio-story-visual { display: none; }
  .founder-full-grid  { grid-template-columns: 1fr; }
  .founder-full-img   { display: none; }
  .why-grid           { grid-template-columns: repeat(2, 1fr); }

  /* ---- SERVICES ---- */
  .service-section        { padding-block: var(--space-16); }
  .service-section-inner  { grid-template-columns: 1fr; gap: var(--space-8); }
  .service-section h2     { font-size: var(--text-3xl); }

  /* ---- PORTFOLIO ---- */
  #portfolio-grid     { grid-template-columns: repeat(2, 1fr); }
  .portfolio-empty    { grid-column: span 2 !important; }

  /* ---- CONTACT ---- */
  .contact-main { grid-template-columns: 1fr; }

  /* ---- SHARED ---- */
  .diff-grid          { grid-template-columns: repeat(2, 1fr); }
  .founder-teaser     { grid-template-columns: 1fr 1fr; gap: var(--space-10); }
  .cta-banner         { padding: var(--space-16) var(--space-10); }
  .footer-inner       { grid-template-columns: 1.5fr 1fr 1fr; gap: var(--space-8); }
}

/* -------------------------------------------------------
   BREAKPOINT: ≤ 768px (Tablet portrait)
   ------------------------------------------------------- */
@media (max-width: 768px) {
  :root {
    --pad-x:        1.5rem;
    --section-pad:  3.5rem;
  }

  /* === NAVIGATION === */
  .nav-links,
  .nav-wa-btn  { display: none !important; }
  .nav-hamburger { display: flex !important; }

  /* === TYPOGRAPHY === */
  .display-1  { font-size: var(--text-4xl); }
  .display-2  { font-size: var(--text-3xl); }
  .heading-1  { font-size: var(--text-2xl); }
  .heading-2  { font-size: var(--text-xl);  }
  .heading-3  { font-size: var(--text-lg);  }
  .pull-quote { font-size: var(--text-xl);  }

  /* === GRID UTILITIES === */
  .grid-12 { grid-template-columns: 1fr; }
  .grid-3  { grid-template-columns: 1fr; }
  .grid-4  { grid-template-columns: repeat(2, 1fr); }
  .grid-2  { grid-template-columns: 1fr; }

  /* === TRUST BAR === */
  .trust-bar      { flex-wrap: wrap; }
  .stat-item      {
    flex: 1 1 50%;
    padding: var(--space-6) var(--space-5);
    border-bottom: 1px solid rgba(250, 249, 246, 0.12);
  }
  .stat-item + .stat-item::before { display: none; }
  .stat-number    { font-size: var(--text-4xl); }

  /* === DIFF-GRID === */
  .diff-grid        { grid-template-columns: repeat(2, 1fr); }
  .diff-card        { padding: var(--space-5); }
  .diff-card--wide  { grid-column: span 2; }

  /* === FOUNDER TEASER === */
  .founder-teaser { grid-template-columns: 1fr; }
  .founder-img-wrap { max-width: 380px; margin-inline: auto; }
  .founder-experience-badge {
    position: absolute;
    left: var(--space-4);
    bottom: calc(-1 * var(--space-4));
  }

  /* === FEATURED GRID === */
  .featured-grid { grid-template-columns: 1fr; }
  .featured-grid .portfolio-card:first-child {
    grid-column: span 1;
    aspect-ratio: 4/3;
  }

  /* === HERO CTAs — stack on mobile === */
  .hero-ctas {
    flex-direction: column;
    width: 100%;
  }
  .hero-ctas .btn {
    width: 100%;
    justify-content: center;
  }

  /* === CTA BANNER === */
  .cta-banner {
    padding: var(--space-10) var(--space-6);
    border-radius: var(--radius-md);
  }
  .cta-banner-title  { font-size: var(--text-2xl); }
  .cta-banner-sub    { font-size: var(--text-base); }
  .cta-btn-group     { flex-direction: column; align-items: stretch; }
  .cta-btn-group .btn { width: 100%; justify-content: center; }

  /* === MODAL — bottom sheet style on mobile === */
  .modal-overlay {
    padding: 0;
    align-items: flex-end;
  }
  .modal {
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    max-height: 92vh;
    width: 100%;
    max-width: 100%;
  }
  .modal-close         { padding: var(--space-4) var(--space-4) 0; }
  .modal-content       { padding: var(--space-3) var(--space-4) var(--space-8); }
  .modal-hero-img      { height: 200px; border-radius: var(--radius-sm); }
  .modal-title         { font-size: var(--text-xl); }
  .modal-section-label { font-size: 11px; }
  .modal-cta           { padding: var(--space-4) var(--space-4) var(--space-6); }

  /* === MARQUEE === */
  .logo-item { padding: var(--space-3) var(--space-4); }

  /* === INDUSTRY STRIP === */
  .industry-item { min-width: 90px; }

  /* === PAGE HERO SECTIONS — reduce top padding === */
  .about-hero,
  .services-hero,
  .portfolio-hero,
  .contact-hero {
    padding-top: calc(66px + var(--space-8));
    padding-bottom: var(--space-8);
  }

  /* === SERVICES SUB-NAV === */
  #services-subnav-wrap.sticky { top: 58px; }

  /* === PORTFOLIO === */
  .portfolio-results-bar {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-1);
  }

  /* === CONTACT === */
  .contact-main      { grid-template-columns: 1fr; }
  .wa-block-title    { font-size: var(--text-xl); }

  /* === FOOTER === */
  .footer-inner {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-8);
  }
  .footer-bottom {
    flex-direction: column;
    gap: var(--space-2);
    text-align: center;
  }

  /* === ABOUT WHY-GRID === */
  .why-grid { grid-template-columns: 1fr; }

  /* === WA FLOAT === */
  .wa-float { width: 52px; height: 52px; font-size: 24px; }
}

/* -------------------------------------------------------
   BREAKPOINT: ≤ 640px (Large phones / small tablets)
   ------------------------------------------------------- */
@media (max-width: 640px) {
  :root {
    --section-pad: 3rem;
  }

  /* === TYPOGRAPHY === */
  .display-1  { font-size: var(--text-3xl); }
  .display-2  { font-size: var(--text-2xl); }
  .heading-1  { font-size: var(--text-xl);  }
  .heading-2  { font-size: var(--text-lg);  }

  /* === GRID === */
  .grid-4 { grid-template-columns: 1fr; }

  /* === TRUST BAR: 1 per row === */
  .stat-item { flex: 1 1 100%; }
  .stat-number { font-size: var(--text-3xl); }

  /* === DIFF-GRID: 1 col === */
  .diff-grid       { grid-template-columns: 1fr; }
  .diff-card--wide { grid-column: span 1; }

  /* === PORTFOLIO FILTER: wrap chips === */
  .filter-bar { padding-block: var(--space-3); }
  .filter-bar-inner { gap: var(--space-3); }
  .filter-row {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-2);
  }
  .filter-row-label { width: auto; font-size: 10px; }
  .filter-tag    { font-size: 11px; padding: 6px var(--space-3); line-height: 1; }

  /* === PORTFOLIO GRID: 1 col === */
  #portfolio-grid  { grid-template-columns: 1fr; }
  .portfolio-empty { grid-column: span 1 !important; }

  /* === SERVICE SAMPLES: 1 col === */
  .service-samples { grid-template-columns: 1fr; }
  .service-sample-img:first-child { grid-column: span 1; aspect-ratio: 4/3; }

  /* === SERVICE SECTION CTA ROW === */
  .service-section-cta-row { flex-direction: column; align-items: stretch; }
  .service-section-cta-row .btn { width: 100%; justify-content: center; }

  /* === CONTACT FORM === */
  .wa-block               { padding: var(--space-5); }
  .wa-number-btn          { font-size: var(--text-sm); padding: var(--space-4); }
  .contact-form-panel     { padding: var(--space-5); }
  .contact-form-panel h2  { font-size: var(--text-xl); }
  .contact-detail-item    { padding: var(--space-4); }

  /* === ABOUT: why-grid 1 col === */
  .why-grid { grid-template-columns: 1fr; }

  /* === FOOTER: 1 col === */
  .footer-inner { grid-template-columns: 1fr; gap: var(--space-6); }
  .footer-brand p { max-width: 100%; }

  /* === CTA BANNER === */
  .cta-banner       { padding: var(--space-8) var(--space-5); }
  .cta-banner-title { font-size: var(--text-xl); }

  /* === SERVICE SECTION === */
  .service-section { padding-block: var(--space-10); }
}

/* -------------------------------------------------------
   BREAKPOINT: ≤ 480px (Phones — main mobile target)
   ------------------------------------------------------- */
@media (max-width: 480px) {

  /* === SERVICES OVERVIEW: force 1 col === */
  .services-overview-grid { grid-template-columns: 1fr !important; }

  /* === HERO === */
  .hero-grid     { padding-block: var(--space-10); }
  .hero-sub      { font-size: var(--text-base); }
  .hero-eyebrow  { font-size: 10px; }

  /* === TRUST BAR === */
  .stat-number { font-size: var(--text-2xl); }

  /* === INDUSTRY STRIP === */
  .industry-item      { min-width: 78px; padding: var(--space-3) var(--space-2); }
  .industry-item-icon { width: 34px; height: 34px; font-size: 18px; }
  .industry-item-name { font-size: 10px; }

  /* === CARDS: reduce padding === */
  .service-card     { padding: var(--space-5); }
  .service-card-title { font-size: var(--text-lg); }
  .service-card-desc  { font-size: var(--text-sm); }
  .diff-card        { padding: var(--space-5); }
  .diff-card-icon   { width: 40px; height: 40px; font-size: 20px; margin-bottom: var(--space-4); }

  /* === TESTIMONIALS === */
  .testimonial-card { padding: var(--space-5); }

  /* === MODAL === */
  .modal-overlay { padding: 0; }
  .modal {
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    max-height: 95vh;
    width: 100%;
  }
  .modal-hero-img  { height: 160px; }
  .modal-title     { font-size: var(--text-lg); }

  /* === BUTTONS === */
  .btn-lg { padding: var(--space-4) var(--space-6); min-height: 50px; }

  /* === WA FLOAT === */
  .wa-float { width: 48px; height: 48px; font-size: 22px; bottom: 16px; right: 14px; }

  /* === CONTACT DETAIL === */
  .contact-detail-icon { width: 38px; height: 38px; font-size: 18px; }

  /* === FAQ === */
  .faq-question     { padding: var(--space-4) var(--space-5); font-size: var(--text-sm); }
  .faq-answer-inner { padding: 0 var(--space-5) var(--space-4); font-size: var(--text-sm); }

  /* === SECTION SPACING === */
  :root { --section-pad: 2.5rem; }
  .section--sm  { padding-block: 1.5rem; }

  /* === EXPERTISE PILLS === */
  .expertise-pill { font-size: var(--text-xs); padding: var(--space-1) var(--space-3); }
}

/* -------------------------------------------------------
   BREAKPOINT: ≤ 375px (Small phones — iPhone SE, etc.)
   ------------------------------------------------------- */
@media (max-width: 375px) {

  :root { --pad-x: 1.25rem; }

  /* === NAV LOGO === */
  .nav-logo-name { font-size: var(--text-lg); }
  .nav-logo-sub  { font-size: 8px; }

  /* === TYPOGRAPHY === */
  .display-2  { font-size: var(--text-xl); }
  .heading-1  { font-size: var(--text-lg);  }
  .heading-2  { font-size: var(--text-base);}
  .hero h1    { font-size: clamp(1.75rem, 9vw, 2.5rem); }
  .hero-sub   { font-size: var(--text-sm); }
  .pull-quote { font-size: var(--text-lg); }

  /* === BUTTONS === */
  .btn    { font-size: var(--text-xs); min-height: 42px; }
  .btn-lg { font-size: var(--text-sm); min-height: 46px; padding: var(--space-3) var(--space-5); }

  /* === SERVICE CARDS === */
  .service-card       { padding: var(--space-4); }
  .service-card-title { font-size: var(--text-base); }

  /* === INDUSTRY ITEMS === */
  .industry-item      { min-width: 68px; padding: var(--space-2); }
  .industry-item-icon { width: 30px; height: 30px; font-size: 16px; }
  .industry-item-name { font-size: 9px; }

  /* === DIFF CARDS === */
  .diff-card       { padding: var(--space-4); }
  .diff-card-title { font-size: var(--text-base); }
  .diff-card-desc  { font-size: var(--text-xs); }

  /* === TRUST BAR === */
  .stat-number { font-size: var(--text-2xl); }
  .stat-label  { font-size: var(--text-xs); }

  /* === SECTION LABEL === */
  .section-label { font-size: 9px; }

  /* === TESTIMONIALS === */
  .testimonial-card     { padding: var(--space-4); }
  .testimonial-card-quote { font-size: var(--text-sm); }

  /* === FOOTER === */
  .footer-inner   { gap: var(--space-5); }
  .footer-brand p { font-size: var(--text-xs); }
  .footer-col ul li a { font-size: var(--text-xs); }
  .footer-contact-item { font-size: var(--text-xs); }

  /* === CONTACT === */
  .wa-block-title { font-size: var(--text-lg); }
  .wa-number-btn  { font-size: var(--text-xs); }

  /* === MODAL === */
  .modal-hero-img { height: 130px; }
  .modal-content  { padding: var(--space-3) var(--space-3) var(--space-5); }
  .modal-title    { font-size: var(--text-base); }
}