/* ============================================================
   IMAGINIF — Mobile Stylesheet
   Applies to screens under 768px only
   ============================================================ */

@media (max-width: 768px) {

  /* ── GLOBAL ─────────────────────────────────────────────── */
  body { font-size: 17px; }

  .section { padding: 52px 20px !important; }
  .divider { padding: 0 20px; margin: 48px 0; }

  h1 { font-size: 34px !important; }
  .section-h2 { font-size: 26px !important; }
  .section-body { font-size: 17px; }

  /* ── HEADER ─────────────────────────────────────────────── */
  header { padding: 0 20px; height: 64px; }
  .logo img { height: 24px; }
  nav { 
    display: none;
    position: fixed; top: 64px; left: 0; right: 0; bottom: 0;
    background: rgba(9,20,40,0.99);
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 36px;
    z-index: 199;
  }
  nav.open { display: flex; }
  nav a { font-size: 18px; letter-spacing: 0.12em; }
  .header-cta { display: none; }
  .menu-toggle { display: flex; }

  /* ── HERO ───────────────────────────────────────────────── */
  .hero { 
    grid-template-columns: 1fr !important; 
    min-height: auto !important;
    margin-top: 64px;
  }
  .hero-photo { 
    order: 1; 
    height: 52vh !important;
    min-height: 280px;
  }
  .hero-photo::before { 
    background: linear-gradient(to bottom, transparent 40%, var(--black) 100%) !important; 
  }
  .hero-content { 
    order: 2; 
    padding: 36px 20px 56px !important;
    justify-content: flex-start !important;
  }
  .hero-kicker { font-size: 11px; margin-bottom: 16px; }
  .hero-sub { font-size: 16px; }
  .hero-lead { font-size: 16px; margin-bottom: 32px; }
  .proof-row { gap: 20px; margin-bottom: 36px; padding-bottom: 28px; }
  .proof-n { font-size: 28px; }
  .proof-l { font-size: 11px; }

  /* ── TIBB CARDS ─────────────────────────────────────────── */
  .tibb-grid { 
    grid-template-columns: 1fr !important; 
    gap: 2px;
    margin-top: 36px;
  }
  .tibb-card { padding: 32px 20px; }
  .tibb-letter { font-size: 72px; }
  .tibb-title { font-size: 20px; }
  .tibb-text { font-size: 16px; }
  .tibb-list li { font-size: 15px; }

  /* ── PRODUCTS ───────────────────────────────────────────── */
  .products-grid { grid-template-columns: 1fr !important; gap: 16px; }
  .product-card { padding: 36px 24px; }
  .product-title { font-size: 26px; }
  .product-price { font-size: 52px; }
  .product-list li { font-size: 16px; }

  /* ── ABOUT TEASER ───────────────────────────────────────── */
  .about-layout { grid-template-columns: 1fr !important; gap: 32px; }
  .about-photo-wrap { display: none !important; }
  .about-quote { font-size: 18px; padding-left: 20px; }
  .about-body { font-size: 17px; }

  /* ── PAGE HERO (ABOUT BANNER) ───────────────────────────── */
  main { margin-top: 64px; }
  .page-hero { height: 50vh; min-height: 280px; }
  .page-hero-text { left: 20px !important; right: 20px !important; bottom: 28px !important; }
  .page-hero-name { font-size: 34px !important; line-height: 1.15; }
  .page-hero-kicker { font-size: 11px; margin-bottom: 10px; }
  .page-hero-title { font-size: 16px; }

  /* ── STORY / CREDENTIALS ────────────────────────────────── */
  .about-layout > div:last-child,
  .story-intro { grid-template-columns: 1fr !important; }
  .credentials-box { position: static !important; margin-top: 40px; padding: 28px 20px; }
  .credential-item { padding: 10px 0; }
  .credential-text { font-size: 15px; }
  .credential-year { font-size: 14px; }

  /* ── TIMELINE ───────────────────────────────────────────── */
  .timeline { padding-left: 20px; }
  .timeline-item { 
    grid-template-columns: 72px 1fr !important; 
    gap: 12px !important;
    margin-bottom: 20px;
    padding-bottom: 20px;
  }
  .timeline-year { font-size: 13px; }
  .timeline-content h4 { font-size: 16px; }
  .timeline-content p { font-size: 15px; }
  .timeline-brand { font-size: 11px; padding: 2px 8px; }
  .era-label { font-size: 12px; }

  /* ── PUBLICATIONS ───────────────────────────────────────── */
  .pub-grid { grid-template-columns: 1fr !important; gap: 12px; }
  .pub-card { padding: 28px 20px; }
  .pub-title { font-size: 18px; }
  .pub-desc { font-size: 16px; }

  /* ── EDUCATION ──────────────────────────────────────────── */
  .edu-grid { grid-template-columns: 1fr 1fr !important; gap: 2px; }
  .edu-school { font-size: 16px; }
  .edu-degree { font-size: 15px; }

  /* ── BRANDTAILER SECTION ────────────────────────────────── */
  .section > div[style*="grid-template-columns:1fr 1fr"] {
    display: flex !important;
    flex-direction: column !important;
    gap: 32px;
  }

  /* ── METHODOLOGY ────────────────────────────────────────── */
  .methodology-grid { grid-template-columns: 1fr 1fr !important; gap: 2px; }
  .method-letter { font-size: 52px; }
  .method-desc { font-size: 15px; }

  /* ── WORK PAGE ──────────────────────────────────────────── */
  .filter-bar { 
    padding: 32px 20px 0 !important; 
    flex-wrap: wrap;
    gap: 8px;
  }
  .filter-btn { font-size: 13px; padding: 10px 16px; }
  .project-grid { grid-template-columns: 1fr !important; gap: 12px; }
  .project-img { height: 200px !important; }
  .project-body { padding: 24px 20px; }
  .project-title { font-size: 20px; }
  .project-desc { font-size: 15px; }

  /* Also built for */
  div[style*="padding:48px 80px"] { padding: 40px 20px !important; }

  /* ── SERVICES PAGE ──────────────────────────────────────── */
  .for-grid { grid-template-columns: 1fr !important; gap: 32px; }
  .for-list li { font-size: 16px; }
  .for-quote { padding: 28px 20px; }
  .for-quote blockquote { font-size: 17px; }
  .process-steps { grid-template-columns: 1fr !important; gap: 2px; }
  .step-card { padding: 28px 20px; }
  .step-title { font-size: 18px; }
  .pricing-grid { grid-template-columns: 1fr !important; gap: 16px; }
  .price-card { padding: 36px 20px; }
  .price-amount { font-size: 52px; }

  /* ── CONTACT PAGE ───────────────────────────────────────── */
  .contact-grid { grid-template-columns: 1fr !important; gap: 40px; }
  .contact-sidebar { position: static !important; }
  .contact-card { padding: 28px 20px; }
  .contact-card-value { font-size: 17px; }
  .offices-card { padding: 28px 20px; }
  .office-city { font-size: 17px; }
  .lang-badge { font-size: 14px; padding: 6px 16px; }
  .form-row { grid-template-columns: 1fr !important; }
  .form-group input,
  .form-group select,
  .form-group textarea { font-size: 16px; padding: 14px 16px; }

  /* WhatsApp button — make it big on mobile */
  .wa-btn { font-size: 16px; padding: 18px 20px; }

  /* ── FAQ ────────────────────────────────────────────────── */
  .faq-grid { grid-template-columns: 1fr !important; gap: 2px; }
  .faq-item { padding: 28px 20px; }
  .faq-q { font-size: 18px; }
  .faq-a { font-size: 16px; }

  /* ── BIO STRIP ──────────────────────────────────────────── */
  .bio-strip { 
    grid-template-columns: 1fr !important; 
    padding: 28px 20px;
    gap: 24px;
  }
  .bio-strip img { width: 100% !important; height: 260px !important; object-fit: cover; object-position: center top; }
  .bio-name { font-size: 24px; }
  .bio-text { font-size: 16px; }

  /* ── CTA BUTTONS ────────────────────────────────────────── */
  .cta-btns,
  div[style*="display:flex;gap:16px;justify-content:center"],
  div[style*="display:flex;gap:16px;flex-wrap:wrap"] {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 12px !important;
  }
  .btn { 
    display: block !important; 
    text-align: center !important;
    padding: 18px 24px !important;
    font-size: 14px !important;
  }

  /* ── FOOTER ─────────────────────────────────────────────── */
  .site-footer { padding: 40px 20px 24px !important; }
  .footer-top { 
    grid-template-columns: 1fr !important; 
    gap: 32px !important;
    padding-bottom: 36px;
  }
  .footer-tagline { font-size: 17px; }
  .footer-desc { font-size: 15px; }
  .footer-col ul li a { font-size: 15px; }
  .footer-bottom { 
    flex-direction: column !important; 
    gap: 10px !important; 
    text-align: center !important;
    font-size: 13px;
  }

  /* ── SIGNATURE ──────────────────────────────────────────── */
  .signature { font-size: 24px; }

}