/* Mobile layout is intentionally isolated here to avoid desktop overrides. */
@media (max-width: 768px) {
  html, body { width: 100%; max-width: 100%; overflow-x: hidden; }
  body { background: var(--paper); }

  .site-header { position: fixed; top: 0; left: 0; right: 0; }
  .nav-shell { height: 68px !important; padding: 0 16px !important; }
  .brand img { height: 40px !important; width: auto !important; }
  .menu-toggle { display: flex !important; }
  .nav-links, .nav-actions { display: none !important; }

  .mobile-menu { min-height: 100dvh; }
  .mobile-menu-links a { font-size: 34px !important; padding: 12px 20px !important; }

  .home-hero {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    padding: 68px 0 0 !important;
    overflow: visible !important;
  }

  .hero-visual {
    order: 0 !important;
    position: relative !important;
    display: block !important;
    width: 100% !important;
    height: 410px !important;
    min-height: 410px !important;
    max-height: 410px !important;
    overflow: hidden !important;
    background: #ddd6cc !important;
  }
  .hero-visual picture { display: block !important; width: 100% !important; height: 100% !important; }
  .hero-visual img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center 43% !important;
  }

  .hero-copy {
    order: 1 !important;
    width: 100% !important;
    min-height: 0 !important;
    padding: 38px 18px 48px !important;
    display: block !important;
    background: var(--paper) !important;
  }
  .hero-copy::before { display: none !important; }
  .eyebrow { margin-bottom: 14px !important; font-size: 8px !important; line-height: 1.4 !important; }
  .display {
    width: 100% !important;
    max-width: none !important;
    font-size: 43px !important;
    line-height: 1.02 !important;
    letter-spacing: -.025em !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
  }
  .marker::after { height: .12em !important; bottom: .07em !important; }
  .hero-lead { margin-top: 22px !important; font-size: 14px !important; line-height: 1.65 !important; }
  .hero-actions { margin-top: 25px !important; display: grid !important; grid-template-columns: 1fr !important; gap: 10px !important; }
  .hero-actions .pill { width: 100% !important; min-height: 48px !important; }
  .hero-mini-stats {
    margin-top: 34px !important;
    padding-top: 20px !important;
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0,1fr)) !important;
    gap: 8px !important;
  }
  .hero-mini-stat strong { font-size: 23px !important; }
  .hero-mini-stat span { font-size: 6.8px !important; letter-spacing: .10em !important; line-height: 1.35 !important; white-space: normal !important; }

  .ticker { display: none !important; }
  .section { width: 100% !important; padding: 56px 18px !important; }
  .section-head { display: block !important; width: 100% !important; margin-bottom: 30px !important; }
  .section-kicker { margin-bottom: 10px !important; font-size: 8px !important; }
  .section-title { max-width: 100% !important; font-size: 39px !important; line-height: 1.04 !important; }
  .section-copy { margin-top: 14px !important; font-size: 14px !important; line-height: 1.65 !important; }

  .services-layout { display: block !important; }
  .service-visual { display: none !important; }
  .service-trigger { grid-template-columns: 36px minmax(0,1fr) 20px !important; padding: 18px 0 !important; }
  .service-number { font-size: 19px !important; }
  .service-name { font-size: 25px !important; line-height: 1.04 !important; }
  .service-price { display: none !important; }
  .service-panel-inner { padding: 0 0 22px 48px !important; font-size: 13px !important; }

  .work-grid, .portfolio-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0,1fr)) !important;
    gap: 10px !important;
  }
  .work-grid .video-card, .portfolio-grid .video-card { margin-top: 0 !important; }
  .video-frame { border-radius: 12px !important; }
  .video-meta { font-size: 6.5px !important; gap: 6px !important; }

  .team-preview-layout { display: block !important; }
  .mini-team-grid { margin-top: 26px !important; display: grid !important; grid-template-columns: 1fr !important; gap: 10px !important; }
  .mini-team-card { grid-template-columns: 90px minmax(0,1fr) !important; min-height: 112px !important; }
  .mini-team-photo { min-height: 112px !important; }

  .lead-grid { display: block !important; }
  .lead-card { margin-top: 28px !important; border-radius: 18px !important; }
  .lead-title { font-size: 43px !important; }

  .instagram-section { padding: 48px 14px 54px !important; }
  .instagram-grid { grid-template-columns: repeat(2,minmax(0,1fr)) !important; gap: 8px !important; }

  .site-footer { padding: 42px 18px 24px !important; }
  .footer-top { display: block !important; }
  .footer-nav { margin-top: 28px !important; grid-template-columns: repeat(2,minmax(0,1fr)) !important; gap: 12px 18px !important; }
  .footer-logo-wrap { text-align: center !important; padding: 38px 0 24px !important; }
  .footer-logo-wrap img { width: 160px !important; height: auto !important; margin: 0 auto !important; }
  .footer-bottom { flex-direction: column !important; align-items: center !important; text-align: center !important; }

  .page-hero { padding: 112px 18px 52px !important; }
  .page-title { max-width: 100% !important; font-size: 48px !important; line-height: 1.02 !important; }
  .page-subtitle { font-size: 14px !important; line-height: 1.65 !important; }

  .price-menu-grid, .values-grid, .process-grid, .founders-grid, .team-cards, .form-grid, .check-grid { grid-template-columns: 1fr !important; }
  .price-menu-card { min-height: auto !important; padding: 25px 20px !important; }
  .full-service-strip { display: block !important; }
  .full-service-strip strong { display: block !important; margin: 18px 0 !important; }

  .custom-project-card { display: block !important; padding: 24px 19px !important; }
  .custom-project-list { margin: 22px 0 !important; }
  .location-note { grid-template-columns: 1fr !important; gap: 8px !important; }

  .website-hero { display: flex !important; flex-direction: column !important; padding-top: 68px !important; }
  .website-hero-copy { padding: 45px 18px 52px !important; }
  .website-hero-visual { min-height: 340px !important; order: -1 !important; }

  .contact-section, .join-section { padding-top: 108px !important; }
  .contact-grid, .join-grid { display: block !important; }
  .form-card, .join-form-card { margin-top: 34px !important; padding: 24px 18px !important; border-radius: 18px !important; }
  .contact-title, .join-title { font-size: 48px !important; }

  .cta-band { padding: 48px 18px !important; display: block !important; }
  .cta-band h2 { font-size: 39px !important; }
  .cta-band .pill { margin-top: 24px !important; width: 100% !important; }
}

@media (max-width: 390px) {
  .hero-visual { height: 370px !important; min-height: 370px !important; max-height: 370px !important; }
  .display { font-size: 40px !important; }
  .section-title { font-size: 37px !important; }
  .page-title, .contact-title, .join-title { font-size: 44px !important; }
}