/* Freela mobile layer: phone and small tablet fixes. Loaded after the page styles. */

/* swipe rows (classes added by fx.js) */
.m-dots { display: none; }

@media (max-width: 720px) {
  /* tighter vertical rhythm */
  section[style*="padding: 112px 0"], section[style*="padding: 96px 0"] { padding-top: 64px !important; padding-bottom: 64px !important; }
  section[style*="padding: 112px 0 0"] { padding-top: 64px !important; padding-bottom: 0 !important; }
  section[style*="padding: 112px 0 0"] + section#contact { padding-top: 48px !important; }
  footer[style*="padding: 80px 0 36px"] { padding-top: 56px !important; }
  section[style*="padding: 88px 0"] { padding-top: 56px !important; padding-bottom: 56px !important; }
  h2 { margin-top: 10px !important; }
  [style*="margin-top: 48px"] { margin-top: 28px !important; }
  [style*="margin-top: 40px"] { margin-top: 24px !important; }

  /* hero */
  [style*="padding: 64px 0 104px"] { padding: 28px 0 48px !important; gap: 32px !important; }
  [style*="padding: 72px 0 104px"], [style*="padding: 72px 0 96px"], [style*="padding: 72px 0 88px"] { padding: 32px 0 56px !important; }
  [style*="padding: 56px 0 200px"] { padding: 28px 0 150px !important; }
  h1 { font-size: clamp(38px, 11vw, 52px) !important; }
  .glass[style*="left: -24px"] { left: 10px !important; top: 10px !important; padding: 8px 14px 8px 8px !important; gap: 10px !important; }
  .glass[style*="left: -24px"] img { width: 36px !important; height: 36px !important; }
  .glass[style*="left: -24px"] div[style*="font-size: 16px"] { font-size: 14px !important; }
  .glass[style*="left: -24px"] .mono { font-size: 10px !important; }
  .hero-stage { margin-top: 0 !important; }
  [style*="position: relative; padding-top: 32px"] { padding-top: 0 !important; }
  .hero-cap { padding: 12px 14px !important; }
  .hero-cap > * { font-size: 13px !important; }
  .hero-cap .mono { font-size: 11px !important; }

  /* logo strip stacks */
  div[aria-label^="Brands and local"] { flex-direction: column !important; align-items: flex-start !important; gap: 14px !important; padding: 24px 0 28px !important; }
  div[aria-label^="Brands and local"] > div:first-child { width: auto !important; }
  div[aria-label^="Brands and local"] .logo-rail { width: 100%; flex: none; }
  .logo-track { gap: 44px !important; padding-right: 44px !important; }

  /* service cards: no empty space */
  #services .card, #services .grad-fill { min-height: 0 !important; gap: 18px; padding: 24px !important; }
  #services [style*="font-size: 32px"], #services [style*="font-size: 28px"] { font-size: 24px !important; }

  /* about photo */
  #about .grad-fill[style*="height: 480px"] { height: 360px !important; flex-basis: 100% !important; }
  #about [style*="gap: 32px; margin-top: 28px"] { gap: 20px !important; }

  /* swipe rows */
  .m-swipe { display: flex !important; flex-wrap: nowrap !important; overflow-x: auto; scroll-snap-type: x mandatory; gap: 12px !important; margin-left: -24px !important; margin-right: -24px !important; padding: 0 24px 6px !important; scrollbar-width: none; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; }
  .m-swipe::-webkit-scrollbar { display: none; }
  .m-swipe > * { flex: 0 0 84% !important; min-width: 0; scroll-snap-align: start; scroll-margin-left: 24px; }
  .m-swipe > .fx-r { transition-delay: 0s !important; }
  #work .m-swipe img { height: 240px !important; }
  .m-dots { display: flex; justify-content: center; gap: 6px; margin-top: 16px; }
  .m-dots i { width: 6px; height: 6px; border-radius: 999px; background: currentColor; opacity: .25; transition: width .3s, opacity .3s; }
  .m-dots i.on { width: 20px; opacity: 1; background: linear-gradient(90deg, #C9F31D, #3BAF4B); }
  section[style*="#0A0A0B"] .m-dots, #how .m-dots { color: #F4F4F5; }
  .fx-steps-line { display: none; }

  /* comfortable tap targets for text links */
  a[style*="font-size: 15px; font-weight: 700"] { display: inline-flex; align-items: center; min-height: 44px; }
  .mono a, a.mono { display: inline-block; padding: 6px 0; }

  /* forms */
  .pill { min-height: 40px !important; padding: 0 12px !important; font-size: 14px !important; }
  .card[id="contact-form"] { padding: 22px !important; }

  /* articles: charts scroll sideways so the text stays readable */
  .prose { font-size: 17.5px !important; }
  .prose h2 { font-size: 26px !important; margin-top: 44px !important; }
  .prose figure { overflow-x: auto; margin-left: -24px !important; margin-right: -24px !important; padding: 0 24px; scrollbar-width: none; }
  .prose figure::-webkit-scrollbar { display: none; }
  .prose figure img { min-width: 640px; }
  .prose figure::after { content: "swipe to see the full chart \2192"; display: block; position: sticky; left: 0; margin-top: 10px; font: 500 12px 'JetBrains Mono', monospace; color: #3F6212; }
  .short { padding: 24px 22px !important; }

  /* article hero image sits below the meta line */
  section.wrap[style*="margin-top: -160px"] { margin-top: -96px !important; }
  section.wrap[style*="margin-top: -160px"] img { border-radius: 18px !important; }

  /* case studies */
  section.wrap[style*="margin-top: -150px"] { margin-top: -110px !important; }
  section.wrap[style*="margin-top: -150px"] img { border-radius: 18px !important; }
  [style*="padding: 56px 0 200px; max-width: 980px"] { padding: 28px 0 150px !important; }
  .facts { gap: 18px !important; margin-top: 28px !important; }
  .gal { gap: 12px !important; }
  .gal .row { gap: 12px !important; }
  .gal figure { border-radius: 16px !important; }
  .gal .tall { max-height: 620px; }
  .gal .gifs { gap: 12px !important; padding: 16px !important; }
  .gal .posters { grid-template-columns: 1fr 1fr !important; gap: 10px !important; }
  #grid .pcard .nm { font-size: 22px; }
  #portfolio #grid { gap: 36px !important; }
  a.pcard[style*="flex-direction: row"] .ph { flex-basis: 100% !important; }

  /* card thumbnails keep their full 16:9 artwork */
  a.card img[style*="height: 200px"] { height: auto !important; aspect-ratio: 16 / 9; }
  a.card div[style*="min-height: 380px"] { min-height: 0 !important; aspect-ratio: 16 / 9; }

  /* contact band */
  #contact .grad-fill, section .grad-fill[style*="border-radius: 32px"] { border-radius: 24px !important; }
}

@media (max-width: 380px) {
  .m-swipe > * { flex-basis: 88% !important; }
  h1 { font-size: 36px !important; }
}