/* ═══════════════════════════════════════════════════════════
   RIBBON STUDIO — MOBILE LAYER
   Loaded LAST on every page. A deliberate mobile product,
   not a shrunk desktop. Activates ≤768px.

   System:
   • Side gutters: 20px  • Inter-column gutter: 8px (8-col grid)
   • H2 32 / Body 15 / Button 14
   • One case per row, vertical rhythm, 44px+ tap targets
   • Animations simplified; heavy effects disabled
   ═══════════════════════════════════════════════════════════ */

@media (max-width: 768px) {

  :root {
    --m-edge: 20px;        /* left/right screen margin */
    --m-gutter: 8px;       /* gutter between grid columns */
    --m-h2: 32px;
    --m-body: 15px;
    --m-btn: 14px;
    --m-gap-section: 56px; /* vertical space inside sections */
    --m-gap-block: 28px;   /* space between stacked blocks */
    --m-gap-card: 20px;    /* space between cards */
  }

  /* ---------- 0. GLOBAL GUARDS ---------- */
  html, body { overflow-x: hidden; max-width: 100%; }
  img, video, canvas, svg { max-width: 100%; height: auto; }
  * { min-width: 0; }            /* prevents flex/grid overflow */

  /* Single source of truth for horizontal alignment */
  .container,
  .case-content,
  .case-cta .cta-inner,
  .article-layout,
  .site-footer {
    padding-left: var(--m-edge) !important;
    padding-right: var(--m-edge) !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  nav { padding-left: var(--m-edge) !important; padding-right: var(--m-edge) !important; }

  /* ---------- 1. TYPOGRAPHY ---------- */
  .section-title,
  .case-cta h2,
  .related-head h2,
  .blog-hero h1 ~ * h2 {
    font-size: var(--m-h2) !important;
    line-height: 1.05 !important;
    letter-spacing: -0.01em;
  }
  .body-text,
  .hero-sub,
  .hero-desc,
  .article-content p,
  .retainer-sub,
  p { font-size: var(--m-body) !important; line-height: 1.65 !important; }

  h3, .service-body h3, .portfolio-card h3,
  .work-info strong, .post-info h3, .frost-content h3 {
    font-size: 19px !important; line-height: 1.2;
  }
  h4, .label { font-size: 15px !important; }
  .audience-list a { font-size: 23px !important; }   /* +50% per request */

  /* Buttons — uniform 14px, comfortable 48px tap height */
  .btn, .nav-cta, .filter-all, .filter-tag,
  .budget-tag, .contact-submit, button.btn {
    font-size: var(--m-btn) !important;
  }
  .btn {
    height: 48px !important; min-height: 48px !important;
    padding: 0 20px !important; gap: 14px !important;
    border-radius: 10px !important;
    justify-content: center !important;
  }

  /* ---------- 2. SECTION RHYTHM ---------- */
  section { padding: var(--m-gap-section) 0 !important; }
  .section-head { margin-bottom: 32px !important; }
  .section-num { margin-bottom: 12px !important; }

  /* ---------- 3. HERO (homepage) ---------- */
  .hero {
    min-height: 67vh !important;       /* ~20% shorter than full screen */
    padding-top: 84px !important;
    position: relative !important;
    overflow: hidden;
  }
  /* Grid mesh behind the hero only, faded at edges */
  .hero::before {
    content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
    background-image:
      linear-gradient(rgba(150,120,255,0.11) 1px, transparent 1px),
      linear-gradient(90deg, rgba(150,120,255,0.11) 1px, transparent 1px);
    background-size: 42px 42px;
    -webkit-mask-image: radial-gradient(120% 85% at 50% 20%, #000 0%, rgba(0,0,0,.55) 48%, transparent 78%);
    mask-image: radial-gradient(120% 85% at 50% 20%, #000 0%, rgba(0,0,0,.55) 48%, transparent 78%);
  }
  .hero .container, .hero-center { position: relative; z-index: 1; }
  .hero-title { font-size: clamp(64px, 19.5vw, 124px) !important; line-height: 0.88 !important; }
  .hero-sub { margin-top: 20px !important; max-width: 100% !important; }
  .hero-cta { flex-direction: column; width: 100%; gap: 12px !important; margin-top: 36px !important; }
  .hero-cta .btn { width: 100%; }

  /* Showcase gallery — trim the large empty top/bottom band (~70% less) */
  .gallery-section { padding: 0 !important; }
  .circ-gallery { height: clamp(190px, 30vh, 260px) !important; }

  /* ---------- 4. CASES — ONE PER ROW (portfolio/blog) ---------- */
  .work-grid,
  .post-grid,
  .related-grid {
    grid-template-columns: 1fr !important;
    gap: var(--m-gap-card) !important;
  }
  /* Portfolio listing page keeps one-per-row */
  .portfolio-grid:not(#caseGrid) {
    grid-template-columns: 1fr !important;
    gap: var(--m-gap-card) !important;
  }
  /* Homepage Selected Work — stacked one under another (like Work page) */
  #caseGrid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: var(--m-gap-card) !important;
  }
  .work-all-wrap { display: flex !important; }   /* show "View all" on mobile */
  .portfolio-card { padding: 0 !important; }
  .portfolio-thumb, .work-cover { margin-bottom: 14px !important; border-radius: 10px; }
  .work-item, .post-card { margin-bottom: 4px; }

  /* Case detail galleries — stack cleanly, no cramped columns */
  .gallery-grid { grid-template-columns: 1fr !important; gap: 12px !important; }
  .gallery-grid .gi,
  .gallery-grid .gi.full,
  .gallery-grid .gi.half,
  .gallery-grid .gi.third { grid-column: 1 / -1 !important; }

  /* ---------- 5. SERVICES / ABOUT — single column ---------- */
  .services-grid, .about-grid {
    grid-template-columns: 1fr !important; gap: 32px !important;
  }
  .service-item { padding: 24px 0 !important; border-right: none !important; border-left: none !important; }
  /* Stats — all three on ONE line, numbers sized to fit */
  .stats-grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 10px !important;
    align-items: start !important;
  }
  .stats-grid .stat-num { font-size: clamp(30px, 11vw, 52px) !important; line-height: 1 !important; white-space: nowrap; }
  .stats-grid .stat-num .pct { font-size: 0.55em !important; }
  .stats-grid .stat-label, .stats-grid .label, .stats-grid p { font-size: 11px !important; line-height: 1.3 !important; margin-top: 10px !important; letter-spacing: 0.04em !important; }
  .stat-num, .about-stat .stat-num, .hero-stat-val {
    font-size: clamp(44px, 15vw, 72px) !important;
  }
  .about-stat .stat-num { font-size: clamp(44px, 15vw, 72px) !important; }
  .hero-stats { gap: 28px !important; }

  /* ---------- 6. CASE STUDY TEXT BLOCKS ---------- */
  .text-block { grid-template-columns: 1fr !important; gap: 16px !important; }
  .case-hero { padding: 116px 0 48px !important; }
  .stats-block { gap: 28px !important; }

  /* ---------- 7. RETAINER (mobile switcher) ---------- */
  .retainer-tabs { display: flex !important; }
  .retainer-grid { grid-template-columns: 1fr !important; gap: 0 !important; }
  .retainer-card { padding: 28px 22px !important; width: 100% !important; }
  .retainer-name { font-size: 26px !important; }
  .retainer-num, .retainer-price { font-size: 32px !important; }
  /* Show only the card matching the active tab */
  #retainerGrid[data-active="trial"] .retainer-max { display: none !important; }
  #retainerGrid[data-active="max"] .retainer-trial { display: none !important; }

  /* ---------- 8. FILTER BARS (portfolio + blog) ---------- */
  .filter-bar { flex-wrap: wrap !important; gap: var(--m-gutter) !important; padding: 10px 0 24px !important; }
  .blog-hero .filter-bar { padding-top: 10px !important; }   /* -60% gap to tags */
  .filter-line { display: none !important; }
  .filter-tags, .filter-list { flex-wrap: wrap; gap: var(--m-gutter) !important; }
  .filter-all, .filter-tag {
    min-height: 40px; padding: 9px 18px !important;
    display: inline-flex; align-items: center;
  }
  .work-hero h1, .blog-hero h1 { font-size: clamp(52px, 16vw, 80px) !important; }
  .work-hero { padding: 116px 0 52px !important; }
  .blog-hero { padding: 116px 0 18px !important; }

  /* ---------- 9. BLOG POST ---------- */
  .article-layout { grid-template-columns: 1fr !important; gap: 28px !important; }
  .toc { position: static !important; padding: 18px 0 !important;
         border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
  .article-hero { padding: 116px 20px 40px !important; }
  .article-cover { width: 100% !important; margin: 0 0 40px !important; border-radius: 12px; }
  .article-content h2 { font-size: var(--m-h2) !important; margin: 32px 0 12px !important; }
  .article-content h3 { font-size: 22px !important; margin: 26px 0 10px !important; }
  .article-meta { flex-wrap: wrap; gap: 8px 16px !important; }
  /* Accordion — big tap target */
  .article-accordion .accordion-head,
  .accordion-head { min-height: 56px; display: flex; align-items: center; }
  .related { padding: 56px 20px 72px !important; }
  .related-head { flex-direction: column; align-items: flex-start; gap: 8px; }

  /* ---------- 10. CONTACT FORM (popup) ---------- */
  .contact-inner { grid-template-columns: 1fr !important; gap: 18px !important; padding: 20px !important; }
  .contact-title { font-size: 40px !important; }
  .contact-sub { font-size: var(--m-body) !important; }
  .contact-field { min-height: 48px !important; font-size: var(--m-body) !important; }
  .budget-tag { min-height: 40px; }
  .contact-submit { min-height: 50px; }
  .contact-trust { gap: 8px 16px !important; }
  .contact-close { width: 44px !important; height: 44px !important; }

  /* ---------- 11. CTA FOOTER BLOCKS ---------- */
  .cta-footer, .cta-center .cta-footer {
    flex-direction: column !important; align-items: center !important; gap: 14px !important;
  }
  .case-cta { padding: 80px 0 !important; }

  /* ---------- 12. SITE FOOTER ---------- */
  .site-footer { flex-direction: column; gap: 12px; text-align: center; padding: 40px var(--m-edge) !important; }
  /* Footer: only column titles large; links/body stay small */
  .footer-head, .footer-sayhi { font-size: 24px !important; }
  .footer-nav a { font-size: 15px !important; }
  .footer-cta-sub { font-size: 15px !important; }

  /* FAQ questions bigger on mobile */
  .faq-q { font-size: 23px !important; }

  /* ---------- 13. MENU OVERLAY ---------- */
  .menu-overlay { padding: 82px var(--m-edge) 30px !important; }
  .menu-links a { font-size: 40px !important; padding: 14px 0 !important; min-height: 56px; }
  .menu-links a:hover { padding-left: 0 !important; }  /* no hover-shift on touch */

  /* ---------- 14. CIRCULAR GALLERY ---------- */
  .circ-gallery, .gallery-section .circ-gallery {
    height: clamp(280px, 46vh, 380px) !important;
  }

  /* ---------- 15. ANIMATION SIMPLIFICATION ---------- */
  /* Scroll reveal: gentle fade only, no large translate (less jank) */
  .sr, .reveal { transform: none !important; }
  .sr { opacity: 0; transition: opacity .5s ease !important; }
  .sr.in { opacity: 1; }
  .sr-d1, .sr-d2, .sr-d3, .sr-d4,
  .sr-stagger > * { transition-delay: 0s !important; }

  /* Kill hover-scale / lift on touch (no hover state anyway) */
  .work-item:hover .work-cover img,
  .portfolio-card:hover img { transform: none !important; }
  .work-cover video, .frost-vid { display: none !important; }  /* no hover video on mobile */

  /* Background: lightweight gradient, no dot-grid canvas */
  #dot-grid { display: none !important; }
  #grad-bg  { display: block !important; }
  #ghost { display: none !important; }
  .cursor-dot { display: none !important; }
}

/* ---------- Small phones ---------- */
@media (max-width: 380px) {
  .hero-title { font-size: clamp(56px, 19vw, 88px) !important; }
  .work-hero h1, .blog-hero h1 { font-size: 48px !important; }
  .contact-title { font-size: 34px !important; }
  .section-title { font-size: 28px !important; }
}

/* ---------- Respect reduced-motion globally ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  #grad-bg { animation: none !important; }
}