/* GLADIOZ — Comprehensive responsive layer
   Loaded last on every page. Tablet ≤960, mobile ≤640, small ≤420. */

/* ---------- Global guards ---------- */
html, body { overflow-x: hidden; }
* { min-width: 0; }
img, svg { max-width: 100%; }

/* ============ TABLET (≤960) ============ */
@media (max-width: 960px) {
  /* Pin header at top across mobile/tablet — fixed beats sticky when an
     ancestor has overflow:hidden (which clips position:sticky on iOS). */
  .nav {
    position: fixed !important;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    z-index: 1000;
  }
  body { padding-top: 68px; }
  /* Type scale tightening */
  .hero-title { font-size: clamp(2.6rem, 7vw, 4.8rem) !important; }
  .page-hero h1 { font-size: clamp(2.6rem, 7vw, 5rem) !important; }
  .page-hero { padding: 72px 0 40px !important; }
  .display { letter-spacing: -0.02em; }

  /* Section paddings */
  .hero { padding: 56px 0 80px !important; }
  .studio, .featured, .process, .teach, .contact-section,
  .svc-list, .gal-grid-section { padding-top: 70px !important; padding-bottom: 70px !important; }
  .cta-band { padding: 90px 0 !important; }

  /* Hero collage scale + reflow */
  .hero-right { width: 100% !important; height: 460px !important; max-width: 540px; margin: 0 auto; }
  .hero-stats { gap: 28px !important; flex-wrap: wrap; }
  .hero-stats strong { font-size: 1.7rem !important; }

  /* Marquee */
  .marquee { font-size: 0.9rem; }

  /* Featured services 2-up */
  .services-grid { grid-template-columns: 1fr 1fr !important; }

  /* Footer 2-col */
  .foot-grid { grid-template-columns: 1fr 1fr !important; gap: 32px !important; }
}

/* ============ MOBILE (≤640) ============ */
@media (max-width: 640px) {
  /* Header height shrinks at mobile — re-tune body offset */
  body { padding-top: 62px; }
  /* Tighter padding everywhere */
  .shell { padding: 0 20px !important; }
  .nav-inner { padding: 12px 18px !important; }
  .brand { gap: 9px; }
  .brand-name { font-size: 1.15rem; }
  .brand-mark { width: 36px; height: 36px; }

  /* Type scale */
  .hero-title { font-size: clamp(2.2rem, 10vw, 3.2rem) !important; margin-bottom: 24px !important; }
  .hero-lede { font-size: 1rem !important; max-width: 100% !important; margin-bottom: 24px !important; }
  .page-hero h1 { font-size: clamp(2.2rem, 10vw, 3.4rem) !important; }
  .page-hero .lede { font-size: 1rem !important; margin-top: 22px !important; }
  .display { line-height: 1.05; }

  /* Hero CTA full-width stack */
  .hero-actions { flex-direction: column; align-items: stretch; gap: 10px !important; margin-bottom: 40px !important; }
  .hero-actions .btn { width: 100%; justify-content: center; }
  .cta-actions { flex-direction: column; align-items: stretch; }
  .cta-actions .btn { width: 100%; justify-content: center; }

  /* Hero stats: 3-up tight */
  .hero-stats { gap: 18px !important; }
  .hero-stats > div { flex: 1 1 30%; }
  .hero-stats strong { font-size: 1.4rem !important; }
  .hero-stats span { font-size: 0.55rem !important; }

  /* Hero collage — shrink + tilt less */
  .hero-right { width: 100% !important; height: 400px !important; }
  .hero-card { animation-duration: 1s !important; }
  .hc-1 { width: 64% !important; left: 4% !important; }
  .hc-2 { width: 56% !important; right: 0 !important; top: 32% !important; }
  .hc-3 { width: 48% !important; left: 20% !important; bottom: 6% !important; }
  .hero-logo { width: 80px !important; height: 80px !important; bottom: -10px !important; right: 0 !important; }
  .hero-scroll { display: none !important; }

  /* Studio */
  .studio-title { font-size: clamp(1.8rem, 7vw, 2.4rem) !important; }
  .studio-pillars { grid-template-columns: 1fr !important; gap: 18px !important; }
  .studio-text { font-size: 1rem !important; margin-bottom: 36px !important; }

  /* Sec heads */
  .sec-head { margin-bottom: 36px !important; }
  .sec-head h2, h2.display { font-size: clamp(1.8rem, 7vw, 2.6rem) !important; }

  /* Featured services single column */
  .services-grid { grid-template-columns: 1fr !important; }
  .svc-card { padding: 28px 22px 64px !important; border-bottom: 1px solid var(--rule) !important; }
  .svc-card h3 { font-size: 1.4rem !important; }
  .svc-card .svc-cta { bottom: 24px !important; left: 22px !important; }

  /* Process rail */
  .process-rail .prow { grid-template-columns: 1fr !important; gap: 8px !important; padding: 22px 0 !important; }
  .prow-num { font-size: 0.75rem; }
  .prow h3 { font-size: 1.2rem !important; }

  /* Teach section */
  .teach-grid { gap: 32px !important; }
  .teach-art .teach-frame { aspect-ratio: 4/5; max-width: 360px; margin: 0 auto; }
  .teach-title { font-size: clamp(1.8rem, 7vw, 2.4rem) !important; }
  .teach-text { font-size: 1rem !important; }
  .teach-list li { grid-template-columns: 90px 1fr !important; gap: 12px !important; font-size: 0.9rem !important; }

  /* CTA */
  .cta-inner h2 { font-size: clamp(2rem, 9vw, 2.8rem) !important; }
  .cta-inner p { font-size: 1rem !important; }

  /* SERVICES PAGE */
  .svc-row { padding: 36px 0 !important; gap: 18px !important; }
  .svc-row .num { padding-top: 0 !important; font-size: 0.78rem !important; }
  .row-body h2 { font-size: clamp(1.6rem, 7vw, 2.2rem) !important; }
  .row-body p { font-size: 1rem !important; margin-bottom: 18px !important; }
  .row-meta { grid-template-columns: 1fr 1fr !important; gap: 14px !important; padding-top: 12px !important; }
  .row-meta li { font-size: 0.85rem !important; }
  .row-art { aspect-ratio: 4/3 !important; max-width: 440px; }

  /* GALLERY */
  .gal-grid { columns: 1 !important; column-gap: 16px !important; }
  .gal-item { margin-bottom: 16px !important; }
  .filter-bar { padding: 14px 0 !important; gap: 6px !important; }
  .chip { padding: 7px 13px !important; font-size: 0.62rem !important; }

  /* ABOUT */
  .man-grid { gap: 24px !important; }
  .big-quote { font-size: 1.4rem !important; }
  .man-text { font-size: 1rem !important; }
  .num-grid { grid-template-columns: 1fr 1fr !important; }
  .num-cell:nth-child(2) { border-right: 0 !important; }
  .num-cell { padding: 24px 18px !important; }
  .val-grid { grid-template-columns: 1fr !important; }
  .val { padding: 28px 20px !important; border-right: 0 !important; border-bottom: 1px solid var(--rule); }
  .team-grid { grid-template-columns: 1fr !important; gap: 18px !important; }
  .member { flex-direction: column; }
  .m-portrait { aspect-ratio: 16/10 !important; }

  /* CONTACT */
  .c-grid { gap: 32px !important; }
  .c-form-card { padding: 28px 20px !important; }
  .c-card-label { margin-bottom: 22px !important; }
  .field { margin-bottom: 18px !important; }
  .field-row { grid-template-columns: 1fr !important; gap: 0 !important; }
  .field input, .field select, .field textarea { font-size: 1rem !important; padding: 12px 14px !important; }
  .c-block { padding: 22px !important; }
  .c-channel { gap: 12px !important; padding: 14px 0 !important; }
  .c-icon { width: 40px !important; height: 40px !important; }
  .c-channel strong { font-size: 1.05rem !important; }
  .c-quote p { font-size: 1.1rem !important; }

  /* CLASSES */
  .track-grid { grid-template-columns: 1fr !important; }
  .track { padding: 36px 22px !important; border-right: 0 !important; border-bottom: 1px solid var(--rule); }
  .age-grid { grid-template-columns: 1fr !important; }
  .age { border-right: 0 !important; padding: 24px 20px !important; }
  .format-grid { grid-template-columns: 1fr !important; gap: 24px !important; }
  .format-list li { grid-template-columns: 90px 1fr !important; gap: 12px !important; }

  /* Footer */
  .foot-grid { grid-template-columns: 1fr !important; gap: 28px !important; }
  .foot-brand { font-size: 1.6rem !important; }

  /* Tweaks panel — its inline width:280px fits 375px screens; just make body scrollable */
  .twk-panel { max-height: calc(100vh - 24px) !important; }
}

/* ============ SMALL MOBILE (≤420) ============ */
@media (max-width: 420px) {
  body { padding-top: 56px; }
  .shell { padding: 0 16px !important; }
  .nav-inner { padding: 10px 14px !important; }
  .brand-name { font-size: 1.05rem !important; }

  .hero-title { font-size: clamp(2rem, 11vw, 2.6rem) !important; }
  .page-hero h1 { font-size: clamp(2rem, 11vw, 2.6rem) !important; }
  .hero-right { height: 340px !important; }
  .hero-logo { width: 64px !important; height: 64px !important; }

  .hero-stats { gap: 12px !important; }
  .hero-stats > div { flex-basis: 45%; }

  .marquee { font-size: 0.78rem !important; }

  .num-grid { grid-template-columns: 1fr !important; }
  .num-cell { border-right: 0 !important; border-bottom: 1px solid var(--rule); }
}

/* ============ TOUCH DEVICES — disable hover-only effects ============ */
@media (hover: none) {
  .svc-card:hover, .svc-row:hover, .gal-item:hover,
  .c-channel:hover, .member:hover, .hero-right:hover .hc-1,
  .hero-right:hover .hc-2, .hero-right:hover .hc-3 {
    transform: none !important;
    background: inherit !important;
  }
  .row-art, .svc-row:nth-child(even) .row-art { transform: none !important; }
}